/* =====================================================================
   ReyfynAI — scroll-story home page (story.html).
   Layout for the pinned story, the proof sections that follow it, and the
   micro-interactions. Tokens and shared components come from style.css.
   Behaviour lives in assets/js/story.js.
===================================================================== */

/* ---------- the pinned story ---------- */
.story-track{ height:445vh; position:relative; }
.story-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:#EFE6D0; }
.story-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.s-fog{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.s-fog i{ position:absolute; width:90vmax; height:90vmax; border-radius:50%; will-change:transform; background:radial-gradient(circle, rgba(255,255,255,.5), transparent 62%); }
.s-fog i:nth-child(1){ left:-30vmax; top:-24vmax; animation:s-fa 28s ease-in-out infinite alternate; }
.s-fog i:nth-child(2){ right:-36vmax; bottom:-38vmax; animation:s-fb 33s ease-in-out infinite alternate; }
.s-fog i:nth-child(3){ left:12vmax; top:18vmax; width:64vmax; height:64vmax; animation:s-fc 24s ease-in-out infinite alternate; }
@keyframes s-fa{ to{ transform:translate3d(14vmax,8vmax,0); } }
@keyframes s-fb{ to{ transform:translate3d(-12vmax,-8vmax,0); } }
@keyframes s-fc{ to{ transform:translate3d(-10vmax,10vmax,0) scale(1.1); } }
.s-vignette{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(120,100,60,.16) 100%); }

.beat{ position:absolute; inset:0; opacity:0; pointer-events:none; will-change:opacity,transform; }
.beat.is-live{ pointer-events:auto; }
.beat .copy{ position:absolute; left:max(32px, calc((100vw - 1180px) / 2 + 32px)); max-width:min(560px, 86vw); bottom:11vh; }
#b1 .copy{ top:50%; bottom:auto; transform:translateY(-44%); }

.s-h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(38px,5.4vw,68px); line-height:1.06; letter-spacing:-.01em; margin-bottom:22px; }
.s-h1 .accent{ color:var(--sage); }
.s-h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(32px,4.6vw,58px); line-height:1.08; letter-spacing:-.01em; }
.s-lead{ font-size:17px; color:var(--text-secondary); max-width:480px; margin-bottom:32px; }
.s-sub{ margin-top:16px; font-size:clamp(14.5px,1.5vw,17px); color:var(--text-secondary); max-width:44ch; line-height:1.55; }

.fadeup{ opacity:0; transform:translateY(14px); transition:opacity .8s .45s cubic-bezier(.23,1,.32,1), transform .8s .45s cubic-bezier(.23,1,.32,1); }
.in .fadeup{ opacity:1; transform:none; }

/* chapter 2: the night */
.s-clock{ position:absolute; left:max(32px, calc((100vw - 1180px) / 2 + 32px)); top:15vh; font-family:var(--font-display); font-weight:500;
  font-size:clamp(60px,11vw,150px); line-height:1; letter-spacing:-.02em; color:var(--text-primary); opacity:.9; white-space:nowrap; }
.s-card{ position:absolute; width:min(340px,80vw); padding:18px 20px; border-radius:12px; background:#FFFDF8; border:1px solid var(--bg-panel-border);
  box-shadow:0 18px 40px -16px rgba(43,42,36,.22); animation:s-float 5s ease-in-out infinite alternate; }
@keyframes s-float{ to{ transform:translateY(-8px); } }
#b2 .s-card{ left:58%; top:50%; }
#b4 .s-card{ left:60%; top:48%; }
.s-card .n1{ display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; font:600 10.5px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--sage); }
.s-card .n2{ font-family:var(--font-display); font-weight:600; font-size:20px; line-height:1.2; }
.s-card .n3{ margin-top:6px; font-size:13px; line-height:1.5; color:var(--text-secondary); }
.s-card .stamp{ margin-top:14px; display:inline-block; padding:7px 12px; border:1.5px solid #9F7D3C; border-radius:6px; font:600 12px/1 var(--font-display);
  letter-spacing:.08em; text-transform:uppercase; color:#8A6B2C; transform:rotate(-4deg); }

/* chapter 4: the morning */
.s-sun{ position:absolute; left:68%; top:30%; width:90vmin; height:90vmin; margin:-45vmin 0 0 -45vmin; border-radius:50%;
  background:radial-gradient(circle, rgba(255,247,224,.95), rgba(198,161,91,.2) 45%, transparent 68%); }

.s-hint{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  font:600 11px/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--sage); transition:opacity .4s; pointer-events:none; }
.s-hint i{ width:1px; height:34px; background:linear-gradient(var(--sage), transparent); animation:s-drip 1.9s ease-in-out infinite; }
@keyframes s-drip{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

@media (max-width:820px){
  .beat .copy{ left:22px; right:22px; max-width:none; bottom:calc(7vh + 8px); }
  #b1 .copy{ top:auto; bottom:calc(9vh + 8px); transform:none; }
  .s-lead{ font-size:15.5px; margin-bottom:24px; }
  .s-clock{ left:22px; top:13vh; }
  #b2 .s-card{ left:calc(50% - min(340px,80vw) / 2); top:30%; }
  #b4 .s-card{ left:calc(50% - min(340px,80vw) / 2); top:16%; }
  .s-sun{ left:50%; top:22%; }
}

/* ---------- the sections after the story ---------- */
.proof{ position:relative; overflow:hidden; }
.live-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
@media (max-width:980px){ .live-grid{ grid-template-columns:1fr; gap:48px; } }
.live-copy h2{ font-size:clamp(30px,3.8vw,46px); line-height:1.12; margin-bottom:18px; }
.live-copy p{ color:var(--text-secondary); font-size:16px; max-width:46ch; margin-bottom:26px; }
.text-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--sage); }
.text-link span{ transition:transform .25s cubic-bezier(.23,1,.32,1); }
@media (hover:hover) and (pointer:fine){ .text-link:hover span{ transform:translateX(5px); } }


@media (prefers-reduced-motion: reduce){
  .fadeup{ opacity:1; transform:none; transition:none; }
  .s-card, .s-fog i, .s-hint i{ animation:none; }
}