/* Fuse Foundry — premium motion layer: intro, headline reveals, grain, glide, card light */
:root { --fx-ease: cubic-bezier(.2,.7,.1,1); --fx-ease-io: cubic-bezier(.77,0,.18,1); }

/* ---------- Intro ---------- */
.fx-intro-screen { display: none; }
.fx-intro-screen.is-out, html.fx-intro .fx-intro-screen { display: grid; position: fixed; inset: 0; z-index: 9999; place-items: center; background: #05061a; color: #fff; clip-path: inset(0 0 0 0); }
html.fx-intro .fx-intro-screen { animation: fx-failsafe .5s 6s both; }
html.fx-intro body { overflow: hidden; }
.fx-intro-screen.is-out { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--fx-ease-io); }
.fx-intro-screen.is-gone { display: none !important; }
@keyframes fx-failsafe { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
.fx-mark { text-align: center; }
.fx-mark-word { display: flex; gap: .06em; justify-content: center; font-family: var(--display, "Sora", sans-serif); font-weight: 700; font-size: clamp(54px, 11vw, 132px); letter-spacing: .02em; line-height: 1; overflow: hidden; padding-bottom: .06em; }
.fx-mark-word span { display: inline-block; transform: translateY(110%); animation: fx-rise 1s var(--fx-ease) forwards; }
.fx-mark-word span:nth-child(2) { animation-delay: .07s; } .fx-mark-word span:nth-child(3) { animation-delay: .14s; } .fx-mark-word span:nth-child(4) { animation-delay: .21s; }
.fx-mark-sub { margin-top: 14px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 12px; letter-spacing: .5em; text-transform: uppercase; color: rgba(255,255,255,.62); opacity: 0; animation: fx-fade .9s .45s var(--fx-ease) forwards; padding-left: .5em; }
.fx-mark-sub b { color: #ff7a1a; font-weight: 500; }
@keyframes fx-rise { to { transform: none; } }
@keyframes fx-fade { to { opacity: 1; } }
.fx-intro-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(20px, 4vw, 48px) clamp(22px, 4vh, 40px); display: flex; justify-content: space-between; align-items: flex-end; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.fx-count { font-family: var(--display, sans-serif); font-weight: 600; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.fx-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, #3b6bff, #ff2bd1 50%, #ff7a1a); transform-origin: left; transform: scaleX(var(--p, 0)); }
.fx-intro-glow { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,58,237,.28), rgba(255,43,209,.08) 55%, transparent 72%); filter: blur(10px); animation: fx-breathe 3s ease-in-out infinite alternate; pointer-events: none; }
@keyframes fx-breathe { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.08); opacity: 1; } }
html.fx-intro main { transform: scale(1.04); transform-origin: 50% 0; }
html.fx-reveal main { transform: none; transition: transform 1.4s var(--fx-ease); }

/* ---------- Unified easing for scroll reveals ---------- */
.reveal { transform: translateY(40px); transition: opacity 1s var(--fx-ease), transform 1.2s var(--fx-ease); }
.reveal.is-visible { transform: none; }

/* ---------- Headline word reveals ---------- */
.fx-split.reveal { opacity: 1; transform: none; }
.fx-split { text-wrap: balance; }
.fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.fx-wi { display: inline-block; transform: translateY(108%) rotate(2deg); transform-origin: 0 100%; transition: transform 1.15s var(--fx-ease); transition-delay: var(--d, 0s); }
.fx-split.is-visible .fx-wi { transform: none; }

/* ---------- Film grain ---------- */
.fx-grain { position: fixed; inset: -60%; z-index: 9000; pointer-events: none; opacity: .07; background-size: 180px 180px; animation: fx-grain 1s steps(6) infinite; mix-blend-mode: overlay; }
@keyframes fx-grain { 0% { transform: translate(0,0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-4%, -3%); } 80% { transform: translate(7%, 6%); } 100% { transform: translate(0,0); } }

/* ---------- Scroll progress ---------- */
.fx-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 9001; pointer-events: none; background: linear-gradient(90deg, #3b6bff, #ff2bd1 50%, #ff7a1a); transform-origin: left; transform: scaleX(0); }

/* ---------- Card light + tilt ---------- */
.fx-card { position: relative; transform-style: preserve-3d; will-change: transform; }
.fx-card.fx-hot { transition: none !important; }
.fx-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s var(--fx-ease); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.14), transparent 45%); }
.fx-card.fx-hot::after, .fx-card:hover::after { opacity: 1; }

/* ---------- Text roll ---------- */
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fx-roll-host .fx-roll { display: inline-flex; overflow: hidden; vertical-align: top; height: 1.3em; line-height: 1.3; font-size: inherit; color: inherit; }
.fx-roll-host .fx-rc { display: inline-block; font-size: inherit; color: inherit; text-shadow: 0 1.3em currentColor; transition: transform .6s cubic-bezier(.7,0,.2,1); transition-delay: calc(var(--i) * 22ms); }
.fx-roll-host:hover .fx-rc, .fx-roll-host:focus-visible .fx-rc, .fx-roll-host.fx-roll-play .fx-rc { transform: translateY(-1.3em); }
.fx-roll-host.fx-roll-reset .fx-rc { transition: none; }

/* ---------- Magnetic buttons ---------- */
.fx-mag { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html.fx-intro .fx-intro-screen { display: none; }
  .fx-grain { animation: none; }
  .fx-wi { transform: none; transition: none; }
}
/* ---------- Circuit synapse background ---------- */
.fx-circuit { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* bigger orbit stage on desktop */
@media (min-width: 961px) { .svc-stage { height: 620px; } }
@media (max-width: 760px) { .fx-grain { opacity: .035; mix-blend-mode: normal; } }