/* ============================================================================
   Bookworm's Paradise — motion layer (subtle, premium, not flashy)
   Everything here is OPT-OUT safe: prefers-reduced-motion disables it,
   and if JS doesn't run, content is fully visible (no hidden-forever risk).
   ========================================================================== */

/* ---- scroll reveal -------------------------------------------------------- */
/* Elements get .reveal from JS; .is-in flips them visible. Without JS they
   stay visible because the base rule only applies once .reveal is added. */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
.reveal.is-in{ opacity:1; transform:none; }
/* staggered children (plan cards, gallery, steps) */
.reveal-stagger > *{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal-stagger.is-in > *{ opacity:1; transform:none; }
.reveal-stagger.is-in > *:nth-child(1){ transition-delay:.00s; }
.reveal-stagger.is-in > *:nth-child(2){ transition-delay:.07s; }
.reveal-stagger.is-in > *:nth-child(3){ transition-delay:.14s; }
.reveal-stagger.is-in > *:nth-child(4){ transition-delay:.21s; }
.reveal-stagger.is-in > *:nth-child(5){ transition-delay:.28s; }
.reveal-stagger.is-in > *:nth-child(6){ transition-delay:.35s; }

/* ---- hero load sequence --------------------------------------------------- */
.hero-copy > *{ opacity:0; transform:translateY(14px); animation:heroIn .8s cubic-bezier(.16,1,.3,1) forwards; }
.hero-loc{ animation-delay:.05s; }
.hero h1{ animation-delay:.16s; }
.hero-copy p.lead{ animation-delay:.30s; }
.hero-cta{ animation-delay:.44s; }
.hero-meta{ animation-delay:.58s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }
/* slow, gentle zoom on the hero photo — barely perceptible, feels alive */
.hero-media img{ animation:heroZoom 18s ease-out forwards; }
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }

/* ---- featured plan: soft attention pulse (once settled) ------------------- */
.plan.feat{ animation:featGlow 3.4s ease-in-out 1.2s 2; }
@keyframes featGlow{
  0%,100%{ box-shadow:0 0 0 1px var(--teal), var(--shadow-md); }
  50%{ box-shadow:0 0 0 1px var(--teal), 0 0 0 6px rgba(15,166,160,.14), var(--shadow-md); }
}

/* ---- live study clock in trust strip -------------------------------------- */
.study-clock{ display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.82); font-variant-numeric:tabular-nums; }
.study-clock .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan-edge); animation:clockPulse 2.4s ease-in-out infinite; }
@keyframes clockPulse{ 0%,100%{ opacity:.45; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.15);} }

/* ---- CTA buttons: subtle sheen on hover ----------------------------------- */
.btn-primary, .btn-brass{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-brass::after{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); transition:left .6s ease; pointer-events:none;
}
.btn-primary:hover::after, .btn-brass:hover::after{ left:140%; }

/* ---- gallery / video cards: a touch more lift ----------------------------- */
.gcard, .vcard{ transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.gcard:hover{ transform:translateY(-3px); }
.vcard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

/* ---- nav link underline grow ---------------------------------------------- */
@media (min-width:861px){
  .nav a.navlink{ position:relative; }
  .nav a.navlink::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
    background:var(--teal); transition:right .25s ease; }
  .nav a.navlink:hover::after{ right:0; }
}

/* ---- respect reduced motion: turn ALL of it off --------------------------- */
@media (prefers-reduced-motion:reduce){
  .reveal, .reveal.is-in, .reveal-stagger > *, .reveal-stagger.is-in > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-copy > *{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hero-media img{ animation:none !important; }
  .plan.feat{ animation:none !important; }
  .study-clock .dot{ animation:none !important; }
  .btn-primary::after, .btn-brass::after{ display:none !important; }
  .gcard:hover, .vcard:hover{ transform:none !important; }
}