/* outerbook-carousel.css */

:root{
--card-bg:#f4f4f6;
--text-main:#1f1f1f;
--text-sub:#6e6e73;
--shadow-soft:0 10px 25px rgba(0,0,0,0.06);
--shadow-hover:0 18px 40px rgba(0,0,0,0.12);
}

.books-carousel-section{
width:100%;
padding:20px 6% 24px 6%;
}

.outerbook-carousel{
width:875px;
max-width:100%;
display:flex;
flex-direction:column;
gap:18px;
}


.books-carousel-inner{
max-width:900px;
margin-left:0;
margin-right:auto;
padding:0;
box-sizing:border-box;
}



/* ROW CONTAINER */

.marquee{
width:100%;
overflow:hidden;
position:relative;
}

/* FADE EDGES */

.marquee::before,
.marquee::after{
content:"";
position:absolute;
top:0;
width:140px;
height:100%;
z-index:5;
pointer-events:none;
}

.marquee::before{
left:0;
background:linear-gradient(to right,#0f1020 0%,rgba(15,16,32,0) 100%);
}

.marquee::after{
right:0;
background:linear-gradient(to left,#0f1020 0%,rgba(15,16,32,0) 100%);
}

/* TRACK (IMPORTANT FIX) */

.track{
display:flex !important;
flex-direction:row !important;
align-items:center;
gap:24px;
width:max-content;
will-change:transform;
}

/* SCROLL SPEEDS */

.row1{animation:scroll1 156s linear infinite; transform:translate3d(0,0,0);}
.row2{animation:scroll2 335s linear infinite reverse; transform:translate3d(0,0,0);}
.row3{animation:scroll3 180s linear infinite; transform:translate3d(0,0,0);}

/* CARD */

.card{
min-width:260px;
padding:22px;
border-radius:14px;
background:linear-gradient(180deg,#f8f8f8,#f1f1f1);
box-shadow:var(--shadow-soft);
transition:transform .25s ease, box-shadow .35s ease;
text-align:center;
cursor:pointer;
display:flex;
flex-direction:column;
justify-content:center;
}

.card:hover{
transform:translateY(-7px);
box-shadow:var(--shadow-hover);
}

/* ROW HEIGHT DIFFERENCE */

.row2 .card{
min-height:80px;
}

.row1 .card,
.row3 .card{
min-height:68px;
}

/* TEXT */

.title{
font-size:16px;
font-weight:600;
color:var(--text-main);
margin-bottom:6px;
}

.reader{
font-size:13px;
color:var(--text-sub);
}

/* LOGO CARD */

.logo-card{
position:relative;
min-width:220px;
display:flex;
align-items:center;
justify-content:center;
background:transparent;
box-shadow:none;
perspective:800px;
}

/* FLIP FACES */

.logo-face{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
backface-visibility:hidden;
transition:transform .45s ease, opacity .45s ease;
}

.logo-front{
transform:rotateY(0deg);
}

.logo-back{
transform:rotateY(180deg);
opacity:0;
font-size:14px;
font-weight:600;
color:#f1f2f5;
text-align:center;
padding:0 10px;
line-height:1.25;
}

.logo-flipped .logo-front{
transform:rotateY(180deg);
opacity:0;
}

.logo-flipped .logo-back{
transform:rotateY(360deg);
opacity:1;
}

/* LOGO IMAGE */

.row-logo{
height:64px;
width:auto;
}

/* SCROLL ANIMATIONS */

@keyframes scroll1{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

@keyframes scroll2{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

@keyframes scroll3{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}



.outerbook-modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.75);
align-items:center;
justify-content:center;
z-index:10000;
}

/* collision glow */
.carousel-collision {
  box-shadow:
    0 0 10px rgba(108,99,255,0.6),
    0 0 25px rgba(108,99,255,0.8),
    0 0 45px rgba(108,99,255,0.5);

  animation: logoShake 0.35s ease;
}

/* shake animation */
@keyframes logoShake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-2px); }
  40%  { transform: translateX(2px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}


.logo-glow{
box-shadow:
0 0 10px #6C63FF,
0 0 25px #6C63FF,
0 0 45px #6C63FF;
}

.logo-shake{
animation:logoShake .35s ease;
}

@keyframes logoShake{
0%{transform:translateX(0)}
25%{transform:translateX(-2px)}
50%{transform:translateX(2px)}
75%{transform:translateX(-2px)}
100%{transform:translateX(0)}
}