/* ═══════════════════════════════════════════════════════════════════════
   THE SAGA CAROUSEL
   ═══════════════════════════════════════════════════════════════════════
   A coverflow of every novel. One book holds the centre — full size, sharp,
   lit — while its neighbours fall back, shrink, blur and dim. It advances on
   its own every few seconds, and the panel underneath follows whichever book
   is centred.

   Built with absolutely-positioned cards rather than a scrolling track, so a
   card's distance from the centre can drive scale, blur, opacity and z-index
   as one continuous expression. A scroll container cannot do that, and a
   scroll-snap version cannot hold a book still for a measured beat.
   ══════════════════════════════════════════════════════════════════════ */

/* The carousel root. Must be positioned: the prev/next arrows are absolute
   and would otherwise anchor to the viewport and float off up the page. */
[data-carousel]{position:relative;}
[data-carousel]:focus{outline:none;}
[data-carousel]:focus-visible{outline:2px solid var(--brass-light);outline-offset:6px;}

.saga-stage{
  position:relative;
  height:clamp(360px,46vw,520px);
  margin:3.5rem 0 0;
  perspective:1600px;
  /* The carousel bleeds past the section's max-width so the falling-away
     books run to the edges of the screen, then fade out against the page. */
  width:100vw;left:50%;transform:translateX(-50%);
  overflow:hidden;
  touch-action:pan-y;              /* let vertical page scroll through */
}
/* Vignettes at both edges: cards dissolve into the page instead of being
   guillotined by the overflow clip. */
.saga-stage::before,.saga-stage::after{
  content:'';position:absolute;top:0;bottom:0;width:14%;z-index:60;pointer-events:none;
}
.saga-stage::before{left:0;background:linear-gradient(90deg,var(--coal) 10%,transparent);}
.saga-stage::after{right:0;background:linear-gradient(270deg,var(--coal) 10%,transparent);}

.saga-card{
  position:absolute;top:50%;left:50%;
  width:clamp(200px,24vw,290px);
  aspect-ratio:2/3;
  margin:0;padding:0;border:none;background:none;
  cursor:pointer;
  transform-origin:50% 50%;
  transition:transform .85s cubic-bezier(.22,.68,.24,1),
             opacity .85s ease,
             filter .85s ease;
  will-change:transform,opacity,filter;
}
.saga-card img{
  width:100%;height:100%;
  /* contain, never cover: a cover is artwork and must not be cropped. */
  object-fit:contain;
  display:block;background:#15110c;
  border:1px solid var(--brass-dark);
  box-shadow:0 24px 60px rgba(0,0,0,.75);
}
/* The centred book. The brass rim and glow are what make it read as "this
   one" from across a room. */
.saga-card.is-centre img{
  border-color:var(--brass);
  box-shadow:0 30px 70px rgba(0,0,0,.85),0 0 45px rgba(200,146,42,.28);
}
.saga-card.is-centre{cursor:default;}
/* Off-centre cards are inert to the keyboard: tabbing should not walk
   through books nobody can read. They stay clickable by mouse. */
.saga-card:not(.is-centre){pointer-events:auto;}

/* ── The panel below: details for whichever book is centred ─────────── */
.saga-detail{
  max-width:720px;margin:2.5rem auto 0;text-align:center;
  min-height:210px;                /* reserved so the page never jumps */
  transition:opacity .35s ease;
}
.saga-detail.fading{opacity:0;}
.saga-cycle{font-family:'Share Tech Mono',monospace;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brass);margin-bottom:.7rem;min-height:1em;}
.saga-title{font-family:'Cinzel Decorative',serif;font-size:clamp(1.5rem,3.4vw,2.3rem);color:var(--brass-light);line-height:1.2;text-shadow:0 0 26px var(--glow);}
.saga-blurb{font-size:.98rem;line-height:1.95;font-style:italic;color:var(--parchment-light);opacity:.9;margin:1rem auto 0;max-width:620px;}
.saga-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem;}
.saga-chip{font-family:'Share Tech Mono',monospace;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);border:1px solid rgba(200,146,42,.25);padding:.24rem .6rem;background:rgba(200,146,42,.05);}
.saga-actions{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem;}

/* ── Controls ──────────────────────────────────────────────────────── */
/* Arrows sit against the stage, which is the top slice of the carousel —
   not against the whole block, or they would drift down beside the text. */
.saga-nav{
  position:absolute;top:clamp(180px,23vw,260px);transform:translateY(-50%);z-index:70;
  width:46px;height:46px;border-radius:50%;
  background:rgba(13,11,8,.72);border:1px solid var(--brass-dark);
  color:var(--brass-light);font-size:1.1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,box-shadow .3s;
  backdrop-filter:blur(4px);
}
.saga-nav:hover{background:rgba(46,40,32,.9);border-color:var(--brass-light);box-shadow:0 0 18px var(--glow);}
.saga-nav.prev{left:max(1rem,calc(50vw - 560px));}
.saga-nav.next{right:max(1rem,calc(50vw - 560px));}

.saga-dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.75rem;}
.saga-dot{width:7px;height:7px;padding:0;border-radius:50%;border:1px solid var(--brass-dark);background:transparent;cursor:pointer;transition:background .3s,border-color .3s,transform .3s;}
.saga-dot[aria-selected="true"]{background:var(--brass);border-color:var(--brass-light);transform:scale(1.35);box-shadow:0 0 10px var(--glow);}

/* Progress hairline — shows how long the centred book will hold. Doubles as
   the affordance that tells a reader this thing moves by itself. */
.saga-progress{width:min(220px,40vw);height:1px;margin:1.1rem auto 0;background:rgba(200,146,42,.16);overflow:hidden;}
.saga-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass-dark),var(--brass-light));}
.saga-progress i.run{animation:sagaHold var(--hold,6s) linear forwards;}
@keyframes sagaHold{from{width:0}to{width:100%}}

.saga-state{text-align:center;padding:4rem 1rem;font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-dark);}
.saga-state.err{font-family:'IM Fell English',serif;font-style:italic;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--parchment);opacity:.8;}
.saga-state.err a{color:var(--brass-light);}

@media(max-width:700px){
  .saga-nav{width:38px;height:38px;font-size:.95rem;}
  .saga-nav.prev{left:.5rem;} .saga-nav.next{right:.5rem;}
  .saga-detail{min-height:250px;padding:0 1rem;}
}
/* With reduced motion the carousel stops advancing by itself (handled in JS)
   and the cards change without sliding. */
@media(prefers-reduced-motion:reduce){
  .saga-card{transition:none;}
  .saga-progress{display:none;}
}