/* Cinematic layer for the main page. Loaded AFTER the page's own styles, so it only adds
   motion and the feature-card link — no layout is redefined here.
   Everything is additive: with JS off, or under prefers-reduced-motion, the page is simply
   the page. */

/* ── entrances ──────────────────────────────────────────────────────────── */
.cine{opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1)}
.cine.in{opacity:1;transform:none}
.cine.c1{transition-delay:.06s}.cine.c2{transition-delay:.12s}.cine.c3{transition-delay:.18s}
.cine.c4{transition-delay:.24s}.cine.c5{transition-delay:.3s}.cine.c6{transition-delay:.36s}

/* The screens get a touch more travel and a scale — the product is the thing worth a beat. */
.shot.cine,.live.cine,.thumbs.cine{transform:translateY(38px) scale(.968)}
.shot.cine.in,.live.cine.in,.thumbs.cine.in{transform:none}

/* Table rows deal themselves in. */
#stack-body tr.cine{transform:translateY(14px)}
#stack-body tr.cine.in{transform:none}

/* ── hero on load ───────────────────────────────────────────────────────── */
.hero h1,.hero .sub,.hero .pill,.hero .btn-row,.hero .micro,.hero-card{
  animation:cineIn .95s cubic-bezier(.16,.84,.44,1) both}
.hero .sub{animation-delay:.1s}
.hero .btn-row{animation-delay:.2s}
.hero .micro{animation-delay:.28s}
.hero-card{animation-delay:.16s}
@keyframes cineIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ── living background ──────────────────────────────────────────────────── */
.orb{will-change:transform}
.orb:nth-of-type(1){animation:cineDrift1 26s ease-in-out infinite}
.orb:nth-of-type(2){animation:cineDrift2 32s ease-in-out infinite}
.orb:nth-of-type(3){animation:cineDrift3 38s ease-in-out infinite}
.orb:nth-of-type(4){animation:cineDrift2 44s ease-in-out infinite reverse}
@keyframes cineDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(74px,52px,0) scale(1.12)}}
@keyframes cineDrift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-62px,-44px,0) scale(1.09)}}
@keyframes cineDrift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(44px,-64px,0) scale(1.14)}}

/* Slow sheen over the gradient headline. */
.grad-text{background-size:260% 100%;animation:cineSheen 9s ease-in-out infinite}
@keyframes cineSheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* ── reading progress ───────────────────────────────────────────────────── */
.cine-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--accent-2,#12a150),var(--accent,#34d17a));
  box-shadow:0 0 12px var(--accent,#34d17a)}

/* ── feature cards become doors ─────────────────────────────────────────── */
.feat{position:relative;overflow:hidden;
  transition:transform .28s cubic-bezier(.16,.84,.44,1),box-shadow .28s,border-color .28s}
.feat:hover{transform:translateY(-5px);box-shadow:var(--shadow,0 30px 70px -26px rgba(15,50,33,.35));
  border-color:var(--accent-line,rgba(18,161,80,.34))}
.feat::before{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),var(--accent-soft,rgba(52,209,122,.14)),transparent 62%)}
.feat:hover::before{opacity:1}

/* "Read the full story" — the link to the feature's own page. */
.feat-more{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:13px;font-weight:750;color:var(--accent-text,#0f8f4c)}
.feat-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.feat:hover .feat-more svg{transform:translateX(4px)}

/* Counters land on their number instead of just being there. */
.cine-count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .cine{opacity:1;transform:none;transition:none}
  .shot.cine,.live.cine,.thumbs.cine,#stack-body tr.cine{transform:none}
  .hero h1,.hero .sub,.hero .pill,.hero .btn-row,.hero .micro,.hero-card{animation:none}
  .orb{animation:none}
  .grad-text{animation:none}
  .feat:hover{transform:none}
}