/* Motion layer for the VoidScript site: intro, scroll reveals, live hero chat, small polish.
   Everything here turns off for visitors who ask for reduced motion. */

/* Scroll reveals (only when JS is running, so the page still shows without it) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
.js .feat.rv { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), border-color .15s, background .15s; transition-delay: var(--d, 0s); }
.js .feat.rv.in { opacity: 1; transform: none; }

/* Section headings: each word rises in on its own */
.js .sec h2 .wd { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; transition-delay: calc(var(--i, 0) * 55ms); }
.js .sec.in h2 .wd { opacity: 1; transform: none; filter: none; }

/* Provider chips pop in one after another */
.js .pop span { opacity: 0; transform: scale(.82); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 45ms); }
.js .pop.in span { opacity: 1; transform: none; }

/* Playtest lines appear one after another */
.js .v2m .v2m-out span { opacity: 0; transform: translateX(-10px); transition: opacity .45s ease, transform .45s ease; transition-delay: calc(var(--i, 0) * .16s); }
.js .v2m.in .v2m-out span { opacity: 1; transform: none; }

/* Intro: a giant wordmark pinned to the screen. It rushes toward you as you scroll,
   then the site slides up underneath. */
.intro { position: relative; height: 230vh; }
.intro-stick { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; perspective: 1400px; background: radial-gradient(70% 60% at 50% 45%, rgba(var(--acc-rgb), .18), transparent 72%), var(--bg); }
.giant { display: flex; font-family: var(--display); font-weight: 900; font-size: min(230px, calc(90vw / (.62 * var(--n, 10)))); letter-spacing: -.02em; line-height: 1.02; white-space: nowrap; user-select: none; transform-style: preserve-3d; }
.ltr { display: inline-block; transform-origin: 50% 60%; will-change: transform, opacity, filter; }
.ltr b { display: inline-block; font-weight: 900; background: linear-gradient(180deg, #fff6ee 0%, #ffd2a8 38%, var(--acc) 72%, #ff5c8a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: ltr-in 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ltr-in { from { opacity: 0; transform: translateY(60%) rotateX(-80deg); } to { opacity: 1; transform: none; } }
.intro-hint { position: absolute; bottom: 44px; left: 50%; margin: 0; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--dim); transform: translateX(-50%); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
.intro.static { height: auto; }
.intro.static .intro-stick { position: relative; height: 62vh; }

/* Hero entrance, top to bottom. "backwards" so the scroll tilt on the app window can take over. */
@keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero > * { animation: up .9s cubic-bezier(.2,.7,.2,1) backwards; }
.hero > :nth-child(1) { animation-delay: 0s; }
.hero > :nth-child(2) { animation-delay: .08s; }
.hero > :nth-child(3) { animation-delay: .16s; }
.hero > :nth-child(4) { animation-delay: .24s; }
.hero > :nth-child(5) { animation-delay: .3s; }
.hero > :nth-child(7) { animation-delay: .4s; }
.hero .shot { will-change: transform; transform-origin: 50% 0; }

/* Headline: a slow shine across the second line */
.shine { background: linear-gradient(100deg, var(--fg) 35%, var(--acc) 50%, var(--fg) 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Live hero chat: messages and tool lines appear as they are "run" */
.shot-chat .pre { opacity: 0; transform: translateY(6px); }
.shot-chat .tool, .shot-chat .code, .shot-chat .m.ai { transition: opacity .35s ease, transform .35s ease; }
.composer i { animation: ping 2.2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb), .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(var(--acc-rgb), 0); } }

/* Buttons: a light sheen on hover */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.btn:hover::after { transform: translateX(120%); }

/* Nav: the section you are reading is highlighted */
.links a { transition: color .2s ease; }
.links a.active { color: var(--fg); }

/* Keep decorations that hang past the edge from adding a sideways scroll on phones */
html { overflow-x: clip; }
.spooky-deco { overflow: hidden; }

/* Logo marquee: the chip labels should keep their normal case and size */
.strip .marq-track span { width: auto; text-transform: none; letter-spacing: normal; font-size: 14px; }

/* Scroll progress along the top edge */
#progress { position: fixed; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--acc), #ff5c8a); transform: scaleX(0); transform-origin: 0 50%; z-index: 40; }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .feat.rv, .js .v2m .v2m-out span, .js .pop span, .js .sec h2 .wd, .hero > *, .shine, .composer i, .ltr b, .intro-hint { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .shot-chat .pre { opacity: 1 !important; transform: none !important; }
  .btn::after, #progress { display: none; }
}