/* While You Create - visual effects (progressive enhancement, additive layer).
   No layout shift: only transform/opacity animate. Content is visible without JS
   (the .fx-* classes are added by effects.js). Respects reduced motion. */

/* scroll reveals */
.fx-rv { opacity: 0; transform: translateY(14px); will-change: opacity, transform;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1) var(--fx-d,0ms),
              transform .6s cubic-bezier(.22,.61,.36,1) var(--fx-d,0ms); }
.fx-rv.fx-in { opacity: 1; transform: none; }

/* book-card 3D tilt */
.fx-persp { perspective: 1100px; }
.fx-tilt { will-change: transform; }

/* hero constellation canvas (behind content) */
.fx-host { position: relative; }
.fx-host > .fx-cnv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fx-host > :not(.fx-cnv) { position: relative; z-index: 1; }

/* kinetic premise: draw a strike through 'consume', highlight 'create' */
.premise-consume { position: relative; transition: opacity .5s ease .35s; }
.premise.fx-rv .premise-consume::after { content: ""; position: absolute; left: 0; top: 54%;
  height: 3px; width: 0; border-radius: 3px; background: var(--accent);
  transition: width .6s cubic-bezier(.7,0,.3,1) .3s; pointer-events: none; }
.premise.fx-in .premise-consume::after { width: 100%; }
.premise.fx-in .premise-consume { opacity: .55; }
.premise-create { display: inline-block; transition: color .5s ease .15s, transform .5s ease .15s; }
.premise.fx-in .premise-create { color: var(--ki-glow); transform: scale(1.04); text-shadow: 0 0 42px rgba(78,216,255,.55); }
.premise.fx-rv .premise-consume::after { background: var(--ki-glow); }

@media (prefers-reduced-motion: reduce) {
  .fx-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .premise .premise-consume::after { display: none !important; }
  .premise.fx-in .premise-consume { opacity: 1 !important; }
  .premise.fx-in .premise-create { transform: none !important; }
}

/* ================================================================
   PHASE 2 — scroll-telling + cinematic moments (additive)
   ================================================================ */

/* "one book for each stage of life" — books section becomes a dark cinematic band */
.section.fx-stage{background:radial-gradient(125% 120% at 50% -10%, #0e2740 0%, #081626 55%, var(--night) 100%);color:#fff}
.section.fx-stage .series-link a{color:var(--ki-glow)}
.section.fx-stage .books-grid{position:relative}
.section.fx-stage .book-card{position:relative;z-index:1}
/* neon timeline drawn behind the 3 books as the band scrolls into view */
.fx-stage-line{position:absolute;z-index:0;left:9%;right:9%;top:42%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--ki-glow),transparent);
  transform:scaleX(0);transform-origin:center;opacity:.55;
  animation:fx-line linear both;animation-timeline:view();animation-range:cover 6% cover 42%}
@keyframes fx-line{to{transform:scaleX(1)}}
@media (max-width:780px){.fx-stage-line{display:none}}

/* kinetic mask-wipe on section headings */
.fx-wipe{clip-path:inset(0 110% 0 0);transition:clip-path .8s cubic-bezier(.7,0,.2,1)}
.fx-wipe.fx-in{clip-path:inset(0 -12% 0 0)}

@media (prefers-reduced-motion: reduce){
  .fx-stage-line{display:none!important}
  .fx-wipe{clip-path:none!important;transition:none!important}
}

/* ================================================================
   PHASE 3 — custom neon cursor + view-transition tuning
   ================================================================ */
.fx-cursor-ring{position:fixed;top:0;left:0;width:30px;height:30px;margin:-15px;border-radius:50%;
  border:1.5px solid var(--ki-glow);box-shadow:0 0 12px rgba(78,216,255,.5);
  pointer-events:none;z-index:10000;opacity:0;will-change:transform;
  transition:width .18s ease,height .18s ease,margin .18s ease,border-color .18s ease,opacity .25s ease}
.fx-cursor-ring.on{width:50px;height:50px;margin:-25px;border-color:#fff;box-shadow:0 0 18px rgba(78,216,255,.7)}
@media (pointer:coarse){.fx-cursor-ring{display:none!important}}
@media (prefers-reduced-motion: reduce){.fx-cursor-ring{display:none!important}}

/* smooth, calm cross-fade for SPA view transitions */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
}

/* Lenis smooth scroll (only active when the lib is loaded on capable desktop) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* neon video loop layer behind dark bands (under content) */
.section.fx-stage,.premise{position:relative}
.fx-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;opacity:.5}
.section.fx-stage > .wrap,.premise > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){.fx-media{display:none!important}}

/* ================================================================
   BOLD — full-viewport hero cue + cinematic book panels
   ================================================================ */
/* scroll-down cue in the hero */
.fx-cue{position:absolute;left:50%;bottom:24px;width:26px;height:42px;margin-left:-13px;
  border:2px solid rgba(150,228,255,.55);border-radius:14px;z-index:2}
.fx-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;
  background:var(--ki-glow);animation:fx-cue 1.6s ease-in-out infinite}
@keyframes fx-cue{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(15px)}100%{opacity:0}}

/* the 3 books become big alternating cinematic panels on the dark stage band (desktop) */
@media (min-width:781px){
  .section.fx-stage .books-grid{grid-template-columns:1fr;gap:46px;max-width:1000px;margin-left:auto;margin-right:auto}
  .section.fx-stage .book-card{flex-direction:row;align-items:center;min-height:320px;
    background:rgba(255,255,255,.04);border-color:rgba(120,200,240,.18)}
  .section.fx-stage .book-card.fx-alt{flex-direction:row-reverse}
  .section.fx-stage .bc-cover{flex:0 0 42%;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;padding:30px;
    background:linear-gradient(160deg,#0c2236 0%,#081626 100%)}
  /* override base .bc-cover img (position:absolute;inset:0) so the contained cover sits in flow, not stretched */
  .section.fx-stage .bc-cover img{position:static;inset:auto;height:auto;width:auto;max-height:320px;max-width:78%;object-fit:contain;border-radius:8px;box-shadow:0 22px 54px -20px rgba(0,0,0,.75)}
  .section.fx-stage .bc-body{flex:1;justify-content:center;padding:30px 38px}
  .section.fx-stage .bc-body h3{font-size:2.1rem;color:#fff}
  .section.fx-stage .bc-ages{color:var(--ki-glow)}
  .section.fx-stage .bc-sub,.section.fx-stage .bc-desc{color:#c6daea}
  .section.fx-stage .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
  .section.fx-stage .book-card.fx-rv{transform:translateY(54px) scale(.965)}
  .section.fx-stage .book-card.fx-in{transform:none}
}
@media (prefers-reduced-motion: reduce){.fx-cue::after{animation:none}}