/* ==========================================================================
   Conquest FX layer v2: lighting, glow, motion graphics and motion blur.
   Loads after style.css + design.css. Purely visual; no features changed.
   Adds instant cross-page transitions (view transitions + prerender in fx.js).
   Respects prefers-reduced-motion and the site's "Pause motion" button.
   ========================================================================== */

:root {
 --fx-glow: #c776ff;
 --fx-hot: #f0d9ff;
 --fx-deep: #8f32d9;
 --fx-ease: cubic-bezier(.16,1,.3,1);
 --fx-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------- Page basics ---------- */
html { scrollbar-color: #5e2b8a #07050b; }
::selection { background: #8f32d9; color: #fff; }
/* Browsers without view transitions get a soft page fade instead */
@supports not (view-transition-name: none) {
 body { animation: fx-page .9s ease both; }
}
@keyframes fx-page { from { opacity: 0; } }

/* Slow drifting ambient light behind everything */
.fx-ambient {
 position: fixed; inset: -25%; z-index: -1; pointer-events: none;
 background:
  radial-gradient(38% 32% at 18% 22%, #6d23a024, transparent 70%),
  radial-gradient(34% 30% at 82% 70%, #3b1f8a22, transparent 70%),
  radial-gradient(28% 24% at 55% 45%, #a43be612, transparent 70%);
 animation: fx-drift 34s ease-in-out infinite alternate;
}
@keyframes fx-drift { to { transform: translate3d(6%, -5%, 0) rotate(8deg); } }

/* Soft light that follows the cursor (desktop only, added by fx.js) */
.fx-cursor-light {
 position: fixed; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px;
 border-radius: 50%; pointer-events: none; z-index: 15; opacity: 0;
 background: radial-gradient(circle, #b45cff1f 0, #8f32d90e 32%, transparent 65%);
 mix-blend-mode: screen; transition: opacity .8s ease; will-change: transform;
}
.fx-cursor-light.on { opacity: 1; }

/* ---------- Header ---------- */
.site-header { transition: background .45s ease, box-shadow .45s ease; }
body.fx-scrolled .site-header { background: #07050bf2; box-shadow: 0 12px 50px #000a; }
.site-header::after {
 content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
 background: linear-gradient(90deg, transparent, #c776ff99 25%, #f3e1ff 50%, #c776ff99 75%, transparent);
 opacity: .25; transition: opacity .5s ease;
}
body.fx-scrolled .site-header::after { opacity: .7; }
.fx-progress {
 position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; z-index: 1; pointer-events: none;
 transform-origin: left; transform: scaleX(var(--p, 0));
 background: linear-gradient(90deg, #6a1fb0, #c776ff 70%, #fff);
 box-shadow: 0 0 12px #c776ff, 0 0 2px #fff;
}
.site-header nav a { position: relative; transition: color .3s ease; }
.site-header nav a[aria-current] { box-shadow: none; }
.site-header nav a::after {
 content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px;
 background: linear-gradient(90deg, #8f32d9, #f0dcff, #8f32d9); box-shadow: 0 0 10px #c776ff;
 transform: scaleX(0); transition: transform .45s var(--fx-ease);
}
.site-header nav a:hover::after, .site-header nav a[aria-current]::after { transform: scaleX(1); }
.site-header nav a:hover { text-shadow: 0 0 14px #c776ff99; }
.brand img { transition: filter .4s ease; }
.brand:hover img { filter: drop-shadow(0 0 14px #c776ffaa); }
.nav-ip, .header-control { transition: background .3s, border-color .3s, box-shadow .4s, translate .35s var(--fx-ease); }
.nav-ip:hover, .header-control:hover { box-shadow: 0 0 26px #b45cff44, inset 0 0 12px #c776ff1c; }
.ip-indicator { animation: fx-blink 2.4s ease-in-out infinite; }
@keyframes fx-blink { 50% { box-shadow: 0 0 14px 3px #d5b7ff; background: #fff; } }

/* ---------- Buttons ---------- */
body[data-view] .button {
 position: relative; overflow: hidden; isolation: isolate;
 transition: transform .35s var(--fx-ease), translate .35s var(--fx-ease), background .3s, box-shadow .4s, border-color .3s;
}
body[data-view] .button::after {
 content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
 background: linear-gradient(115deg, transparent 30%, #ffffff8c 47%, #ffffff26 53%, transparent 70%);
 translate: -130% 0; transition: translate .95s var(--fx-ease);
}
body[data-view] .button:hover::after { translate: 130% 0; }
body[data-view] .button.primary:hover, body[data-view] .discord-button:hover {
 box-shadow: 0 14px 60px #9d3df080, 0 0 32px #d8adff70;
}
body[data-view] .button.glass:hover { border-color: #e7c6ffaa; box-shadow: 0 0 34px #a74ff033; }
body[data-view="home"] .hero .primary { animation: fx-cta 3.6s ease-in-out infinite; }
@keyframes fx-cta {
 50% { box-shadow: 0 12px 64px #a23ff08a, 0 0 28px #d8adff66; }
}
.fx-magnet { translate: var(--tx, 0px) var(--ty, 0px); }

/* Click light burst */
.fx-burst {
 position: fixed; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
 pointer-events: none; z-index: 120; border: 2px solid #f0d6ff;
 box-shadow: 0 0 22px #c776ff, inset 0 0 12px #c776ff;
 animation: fx-burst .7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fx-burst { from { transform: scale(.3); opacity: 1; } to { transform: scale(5.5); opacity: 0; } }

/* ---------- Hero ---------- */
.fx-aurora {
 position: absolute; inset: -12%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .85;
 translate: var(--hx, 0px) var(--hy, 0px); transition: translate 1.4s var(--fx-ease);
}
.fx-aurora i { position: absolute; border-radius: 50%; }
.fx-aurora i:nth-child(1) {
 width: 52vw; height: 40vw; left: 4%; top: 16%;
 background: radial-gradient(closest-side, #8f32d96b, transparent);
 animation: fx-float-a 19s ease-in-out infinite alternate;
}
.fx-aurora i:nth-child(2) {
 width: 46vw; height: 36vw; right: 2%; top: 30%;
 background: radial-gradient(closest-side, #4a2bd95c, transparent);
 animation: fx-float-b 23s ease-in-out infinite alternate;
}
.fx-aurora i:nth-child(3) {
 width: 40vw; height: 26vw; left: 30%; top: 2%;
 background: radial-gradient(closest-side, #e07bff4d, transparent);
 animation: fx-float-c 15s ease-in-out infinite alternate;
}
@keyframes fx-float-a { to { transform: translate3d(12%, -8%, 0) scale(1.15); } }
@keyframes fx-float-b { to { transform: translate3d(-14%, 6%, 0) scale(.9); } }
@keyframes fx-float-c { 0% { opacity: .6; } to { transform: translate3d(-8%, 10%, 0) scale(1.2); opacity: 1; } }

.fx-rays {
 position: absolute; left: 50%; top: -6%; width: 200vmax; height: 200vmax; margin: -100vmax 0 0 -100vmax;
 z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .9;
 background: repeating-conic-gradient(from 0deg, #e2b6ff12 0deg 2.5deg, transparent 2.5deg 11deg);
 -webkit-mask-image: radial-gradient(circle, #000 0, #0008 14%, transparent 40%);
 mask-image: radial-gradient(circle, #000 0, #0008 14%, transparent 40%);
 animation: fx-spin 140s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx-embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

body[data-view] .hero-content > * { animation: fx-rise 1.25s var(--fx-ease) both; }
body[data-view] .hero-content > :nth-child(2) { animation-delay: .18s; }
body[data-view] .hero-content > :nth-child(3) { animation-delay: .3s; }
body[data-view] .hero-content > :nth-child(4) { animation-delay: .42s; }
body[data-view] .hero-content > :nth-child(5) { animation-delay: .54s; }
body[data-view] .hero-bottom { animation: fx-fadein 1.2s ease .9s both; }
@keyframes fx-rise { from { opacity: 0; translate: 0 34px; scale: 1 1.18; filter: blur(14px) brightness(1.6); } }
@keyframes fx-fadein { from { opacity: 0; } }

/* Logo: wrapper gets the float, a light sheen sweeps across the artwork */
body[data-view] .hero-content > .fx-logo {
 position: relative; display: block; width: min(660px, 68vw); margin: 8px auto 5px;
 translate: var(--lx, 0px) var(--ly, 0px);
 transition: translate 1s var(--fx-ease);
 filter: drop-shadow(0 18px 45px #8f32d966);
 animation: fx-logo-in 1.5s var(--fx-ease) both, chronicle-logo 7s ease-in-out 1.5s infinite;
}
body[data-view] .fx-logo .hero-logo { display: block; width: 100%; margin: 0; animation: none; filter: none; }
.fx-logo::before {
 content: ""; position: absolute; left: 10%; right: 10%; top: 15%; bottom: 5%; z-index: -1; border-radius: 50%;
 background: radial-gradient(closest-side, #a540ff55, transparent); filter: blur(30px);
 animation: fx-pulse 5s ease-in-out infinite;
}
.fx-logo::after {
 content: ""; position: absolute; inset: 0; pointer-events: none;
 background: linear-gradient(100deg, transparent 38%, #ffffffb0 48%, #fff0 58%) no-repeat;
 background-size: 250% 100%; background-position: 160% 0;
 -webkit-mask: url('/assets/logo.png') center / 100% 100% no-repeat;
 mask: url('/assets/logo.png') center / 100% 100% no-repeat;
 animation: fx-sheen 6.5s ease-in-out 2s infinite;
}
@keyframes fx-logo-in {
 0% { opacity: 0; scale: 1.55; filter: blur(28px) brightness(3) drop-shadow(0 0 0 #c776ff00); }
 46% { opacity: 1; scale: .965; filter: blur(0) brightness(2.1) drop-shadow(0 0 70px #e2b8ff); }
 64% { scale: 1.015; }
 100% { opacity: 1; scale: 1; filter: drop-shadow(0 18px 45px #8f32d966); }
}
@keyframes fx-sheen { 0%, 62% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@keyframes fx-pulse { 50% { opacity: .55; transform: scale(1.08); } }

/* Gradient, shimmering highlight words */
body[data-view="home"] h2 em,
body[data-view="home"] .hero h1 em,
.ranking-page h1 em {
 background: linear-gradient(100deg, #b36bff 0%, #f3e0ff 22%, #c986ff 45%, #8f5bff 70%, #b36bff 100%);
 background-size: 200% 100%;
 -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
 filter: drop-shadow(0 0 22px #a64dff55);
 animation: fx-text 9s linear infinite;
}
@keyframes fx-text { to { background-position: -200% 0; } }

/* ---------- Feature strip ---------- */
body[data-view] .feature-strip span {
 position: relative;
 background: linear-gradient(90deg, #cbb8df 0 40%, #fff 50%, #cbb8df 60% 100%);
 background-size: 250% 100%; background-position: 100% 0;
 -webkit-background-clip: text; background-clip: text; color: transparent;
 animation: fx-strip 7s ease-in-out infinite;
}
body[data-view] .feature-strip span:nth-child(2) { animation-delay: .35s; }
body[data-view] .feature-strip span:nth-child(3) { animation-delay: .7s; }
body[data-view] .feature-strip span:nth-child(4) { animation-delay: 1.05s; }
body[data-view] .feature-strip span:nth-child(5) { animation-delay: 1.4s; }
@keyframes fx-strip { 0%, 55% { background-position: 100% 0; } 100% { background-position: -60% 0; } }
.feature-strip span + span::before {
 content: ""; position: absolute; left: -23px; top: 50%; width: 5px; height: 5px; margin-top: -3px;
 transform: rotate(45deg); background: #c776ff; box-shadow: 0 0 10px 1px #c776ff;
}

/* ---------- Scroll reveals: smoother, with a soft focus pull ---------- */
body[data-view] .reveal {
 transition: opacity 1.1s var(--fx-ease), transform 1.3s var(--fx-ease), filter 1.1s var(--fx-ease);
}
/* Motion-blur entrance: arrives stretched and smeared, then snaps into focus */
body[data-view] .reveal.pending { opacity: 0; transform: translateY(70px) scaleY(1.12); filter: blur(14px) brightness(1.5); }

/* Staggered groups: container stays put, children arrive one by one */
body[data-view] .power-board.reveal.pending,
body[data-view] .leaders-stage.reveal.pending,
body[data-view] .community-links.reveal.pending { opacity: 1; transform: none; filter: none; }
.power-board > *, .leaders-stage > a, .community-links > a {
 transition: translate 1.1s var(--fx-ease), opacity 1s ease, transform .6s var(--fx-ease), border-color .4s, background .4s;
}
.power-board.pending > *, .leaders-stage.pending > a, .community-links.pending > a { opacity: 0; translate: 0 70px; filter: blur(10px); }
.power-board > *, .leaders-stage > a, .community-links > a { transition-property: translate, opacity, transform, border-color, background, filter; }
.power-board > :nth-child(2), .leaders-stage > a:nth-child(2), .community-links > a:nth-child(2) { transition-delay: .12s, .12s, 0s, 0s, 0s; }
.power-board > :nth-child(3), .community-links > a:nth-child(3) { transition-delay: .24s, .24s, 0s, 0s, 0s; }
.power-board > :nth-child(4) { transition-delay: .36s, .36s, 0s, 0s, 0s; }

/* Glowing divider lines that draw in when a chapter enters */
.fx-lined::after {
 content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; pointer-events: none;
 background: linear-gradient(90deg, transparent, #c776ffcc 30%, #f3e1ff 50%, #c776ffcc 70%, transparent);
 box-shadow: 0 0 14px #b45cff; transform: scaleX(0); transition: transform 1.8s var(--fx-ease);
}
.fx-lined.fx-in::after { transform: scaleX(1); }

/* ---------- Card spotlight + border light (fx.js adds .fx-glow) ---------- */
.fx-spot { position: relative; isolation: isolate; }
.relic, .connection, .community-link, .trailer-carousel, .ranking-join { position: relative; }
.fx-glow {
 position: absolute !important; inset: 0; margin: 0 !important; padding: 0 !important; display: block !important;
 border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .5s ease;
 background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), #c776ff21, transparent 42%);
}
.fx-glow::after {
 content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
 background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), #f2dcffe6, #c776ff66 40%, transparent 70%);
 -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 -webkit-mask-composite: xor; mask-composite: exclude;
}
.fx-spot:hover > .fx-glow, .fx-spot:focus-within > .fx-glow { opacity: 1; }

/* 3D tilt (desktop) */
.fx-tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.connection.fx-tilt { transition: transform .6s var(--fx-ease), background .3s, border-color .3s, box-shadow .4s; }
body[data-view="home"] .connection:hover { box-shadow: 0 18px 60px #8f32d933, 0 0 0 1px #d9a4ff55; }
.connection strong { transition: text-shadow .4s; }
.connection:hover strong { text-shadow: 0 0 18px #d9a4ffcc; }

/* ---------- World ---------- */
.world-window img { animation: fx-kenburns 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes fx-kenburns { to { transform: scale(1.09) translate(-1.5%, -1%); } }
.world-window::after {
 content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
 background: linear-gradient(180deg, transparent 0 46%, #c776ff1f 50%, transparent 54%);
 background-size: 100% 260%; animation: fx-scan 8s linear infinite;
}
@keyframes fx-scan { from { background-position: 0 100%; } to { background-position: 0 0; } }
.world-crosshair { animation: fx-cross 3.2s ease-in-out infinite; }
@keyframes fx-cross { 50% { opacity: .35; transform: translate(-50%, -50%) scale(1.35); } }

/* ---------- Powers ---------- */
.power-panel { transition: border-color .4s, background .4s; }
.power-panel:hover { border-color: #d6b3f466; }
.power-mark { animation: fx-breathe-a 5s ease-in-out infinite; }
.pixel-heart { animation: fx-heartbeat 2.4s ease-in-out infinite; transform-origin: center; }
.shard-glyph { animation: fx-breathe-c 6s ease-in-out infinite; }
@keyframes fx-breathe-a { 50% { filter: drop-shadow(0 0 54px #c45bff) drop-shadow(0 0 12px #f1d2ff); } }
@keyframes fx-heartbeat {
 0%, 40%, 100% { filter: drop-shadow(0 0 28px #d651ad77); }
 10%, 26% { filter: drop-shadow(0 0 44px #ff6ccbcc) brightness(1.15); }
}
@keyframes fx-breathe-c { 50% { filter: drop-shadow(0 0 48px #9d84ff) brightness(1.15); } }
.power-world li { transition: color .3s, padding-left .4s var(--fx-ease), border-color .3s; }
.power-world li:hover { color: #fff; padding-left: 8px; border-color: #c776ff88; }

/* ---------- Relics ---------- */
.relic { transition: border-color .5s; }
.relic:hover { border-color: #d4b2ec5c; }
.relic-media video { transition: transform 1.4s var(--fx-ease); }
.relic:hover .relic-media video { transform: scale(1.05); }
body[data-view] .text-button { position: relative; transition: color .3s, letter-spacing .4s var(--fx-ease); }
body[data-view] .text-button::after {
 content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; pointer-events: none;
 background: linear-gradient(90deg, #f0d6ff, #c776ff 50%, transparent); box-shadow: 0 0 10px #c776ff;
 transform: scaleX(0); transform-origin: left; transition: transform .7s var(--fx-ease);
}
body[data-view] .text-button:hover::after, body[data-view] .text-button:focus-visible::after { transform: scaleX(1); }
body[data-view] .text-button:hover { text-shadow: 0 0 12px #c776ff88; }

/* ---------- The End ---------- */
.end-sky::before { animation: fx-twinkle 4.5s ease-in-out infinite alternate; }
@keyframes fx-twinkle { from { opacity: .14; } to { opacity: .42; } }
.end-sky span { animation: fx-streak 6s ease-in-out infinite; }
.end-sky span:nth-child(2) { animation-delay: -2s; } .end-sky span:nth-child(3) { animation-delay: -4s; }
@keyframes fx-streak { 50% { opacity: .25; } }
.fx-egg-rays {
 position: absolute; width: min(820px, 160vw); aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none;
 background: repeating-conic-gradient(from 0deg, #c776ff26 0deg 5deg, transparent 5deg 17deg);
 -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 62%);
 mask-image: radial-gradient(circle, #000 8%, transparent 62%);
 animation: fx-spin 80s linear infinite; mix-blend-mode: screen;
}
.fx-egg-glow {
 position: absolute; width: min(420px, 90vw); aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none;
 background: radial-gradient(closest-side, #b14ef070, #7a1fb033 55%, transparent);
 animation: fx-pulse 5.5s ease-in-out infinite;
}
.egg-ring { z-index: 1; }
.end-sequence span { transition: background .4s, color .4s; }
.end-sequence span:hover { background: #170b22; color: #c9a6e0; }
.end-sequence span:hover b { text-shadow: 0 0 12px #c776ffcc; color: #fff; }

/* ---------- Leaders ---------- */
.leaders-stage a::before { animation: fx-ringpulse 7s ease-in-out infinite; }
@keyframes fx-ringpulse { 50% { box-shadow: 0 0 0 55px #a84cdd12, 0 0 0 110px #a84cdd0b, 0 0 70px #bf6aff3a; } }
.leaders-stage b { transition: translate .5s var(--fx-ease), color .3s, text-shadow .3s; }
.leaders-stage a:hover b { translate: 8px 0; color: #fff; text-shadow: 0 0 14px #c776ffaa; }
.leaders-stage strong { transition: text-shadow .5s; }
.leaders-stage a:hover strong { text-shadow: 0 0 30px #c776ff77; }

/* ---------- Films ---------- */
body[data-view] .carousel-track { transition: transform 1s cubic-bezier(.77,0,.18,1); }
.carousel-track.fx-mblur-x { filter: url(#fx-mblur-x); }
body.motion-paused .carousel-track { transition: none; }
.trailer-slide .trailer-poster > img { transition: transform 1.5s var(--fx-ease), filter 1s ease; }
.trailer-slide[aria-hidden="true"] .trailer-poster > img { transform: scale(1.12); filter: brightness(.3) saturate(.6); }
.trailer-caption > * { transition: opacity .8s ease .3s, translate .9s var(--fx-ease) .3s; }
.trailer-slide[aria-hidden="true"] .trailer-caption > * { opacity: 0; translate: 0 16px; }
.play-circle { position: relative; transition: transform .5s var(--fx-spring), box-shadow .5s; }
.play-circle::before, .play-circle::after {
 content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid #e5c7ff; pointer-events: none;
 animation: fx-ring 2.8s cubic-bezier(.2,.6,.3,1) infinite;
}
.play-circle::after { animation-delay: 1.4s; }
@keyframes fx-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
.trailer-poster:hover .play-circle, .trailer-poster:focus-visible .play-circle { transform: scale(1.12); box-shadow: 0 0 80px #c27bff; }
.icon-button { transition: background .3s, box-shadow .3s, transform .4s var(--fx-spring); }
.icon-button:hover { box-shadow: 0 0 24px #b45cff66; transform: scale(1.08); }
.icon-button:active { transform: scale(.94); }

/* ---------- Community ---------- */
.community-link strong { transition: translate .6s var(--fx-ease), text-shadow .5s, color .3s; }
.community-link:hover strong { translate: 10px 0; text-shadow: 0 0 26px #c776ff99; }
.community-link small { transition: letter-spacing .6s var(--fx-ease); }
.community-link:hover small { letter-spacing: 3px; }

/* ---------- Join ---------- */
.join-backdrop { animation: fx-kenburns 30s ease-in-out infinite alternate; }
body[data-view="home"] .join::before {
 content: ""; position: absolute; left: 50%; top: 50%; width: min(900px, 120vw); aspect-ratio: 2 / 1; z-index: 1;
 translate: -50% -50%; pointer-events: none; border-radius: 50%;
 background: radial-gradient(closest-side, #8f32d940, transparent); animation: fx-pulse 6s ease-in-out infinite;
}

/* ---------- Rift rail: fill and head follow the scroll 1:1 (no easing, no lag) ---------- */
.rift-progress { position: relative; }
.fx-rail .rift-progress {
 height: 100% !important; transition: none !important;
 transform-origin: top; transform: scaleY(var(--fx-rail, 0)); will-change: transform;
}
.fx-rift-head {
 position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
 background: #fff; box-shadow: 0 0 10px 3px #d38bff, 0 0 34px 10px #8f32d9aa, 0 0 70px 18px #8f32d944;
 transform: translate3d(0, var(--fx-rail-px, 0px), 0); will-change: transform; opacity: 0; transition: opacity .3s;
}
.fx-rift-head.on { opacity: 1; }
.fx-rift-head::after {
 content: ""; position: absolute; left: 50%; bottom: 50%; width: 2px; height: 90px; margin-left: -1px;
 background: linear-gradient(transparent, #e9c6ffcc); filter: blur(1px);
}
.rift-rail i { transition: background .5s, box-shadow .5s, scale .5s var(--fx-spring); }
.rift-rail i.fx-lit { background: #e9c6ff; box-shadow: 0 0 16px 3px #c776ff; scale: 1.25; }

/* ---------- Toast + dialogs ---------- */
#toast {
 background: linear-gradient(120deg, #ecd3ff, #c79bff); box-shadow: 0 10px 50px #0009, 0 0 40px #b06cff70;
 transition: opacity .35s ease, transform .6s var(--fx-spring);
}
#toast:not(.visible) { transform: translate(-50%, 26px) scale(.92); }
dialog { box-shadow: 0 30px 120px #000d, 0 0 90px #8f32d930; }
dialog[open] { animation: fx-pop .55s var(--fx-ease); }
dialog[open]::backdrop { animation: fx-fadein .45s ease; }
/* Fix: dialog titles were inheriting the giant section-heading size */
body[data-view] .dialog-top h2 { font-size: 20px; line-height: 1.25; letter-spacing: 0; margin: 0; }
@keyframes fx-pop { from { opacity: 0; transform: translateY(20px) scale(.95); } }

/* ---------- Ranking pages ---------- */
.ranking-row { animation: fx-row .75s var(--fx-ease) both; transition: background .3s; }
.ranking-row:nth-child(2) { animation-delay: .05s; } .ranking-row:nth-child(3) { animation-delay: .1s; }
.ranking-row:nth-child(4) { animation-delay: .15s; } .ranking-row:nth-child(5) { animation-delay: .2s; }
.ranking-row:nth-child(6) { animation-delay: .25s; } .ranking-row:nth-child(7) { animation-delay: .3s; }
.ranking-row:nth-child(8) { animation-delay: .35s; } .ranking-row:nth-child(9) { animation-delay: .4s; }
.ranking-row:nth-child(10) { animation-delay: .45s; }
@keyframes fx-row { from { opacity: 0; translate: -20px 0; } }
.podium-row:nth-child(1) { background: linear-gradient(90deg, #f1d18c1f, transparent 55%); box-shadow: inset 3px 0 #f1d18c; }
.podium-row:nth-child(2) { background: linear-gradient(90deg, #d2c0e01a, transparent 50%); box-shadow: inset 3px 0 #d2c0e0; }
.podium-row:nth-child(3) { background: linear-gradient(90deg, #c8a1851a, transparent 45%); box-shadow: inset 3px 0 #c8a185; }
.ranking-row:first-child .placing { text-shadow: 0 0 12px #f1d18c; }
.podium-row:nth-child(1) :is(.player-avatar, .team-crest) { box-shadow: 0 0 0 2px #f1d18c, 0 0 20px #f1d18c88; }
.podium-row:nth-child(2) :is(.player-avatar, .team-crest) { box-shadow: 0 0 0 2px #d2c0e0, 0 0 16px #d2c0e066; }
.podium-row:nth-child(3) :is(.player-avatar, .team-crest) { box-shadow: 0 0 0 2px #c8a185, 0 0 16px #c8a18566; }
.player-avatar, .team-crest { transition: transform .45s var(--fx-spring); }
.ranking-row:hover :is(.player-avatar, .team-crest) { transform: scale(1.1) rotate(-3deg); }
.ranking-row:hover .ranking-value { text-shadow: 0 0 14px #c776ffaa; }
#ranking-board.fx-board {
 background-image:
  radial-gradient(640px circle at var(--mx, 50%) var(--my, -30%), #c776ff17, transparent 45%),
  linear-gradient(125deg, #21162e, #17101f);
}
.metric-tab { transition: background .3s, color .3s, border-color .3s, box-shadow .4s; }
.metric-tab[aria-selected="true"] { box-shadow: 0 0 26px #b77cff2e, inset 0 0 14px #c38bff17; }
.ranking-switch a { transition: background .3s, box-shadow .4s, color .3s, border-color .3s; }
.ranking-switch [aria-current] { box-shadow: 0 6px 32px #bc8ced5c; }
.ranking-empty .empty-symbol { animation: fx-pulse 3s ease-in-out infinite; text-shadow: 0 0 20px #c776ff; }
.back-link { transition: translate .4s var(--fx-ease), color .3s; }
.back-link:hover { translate: -5px 0; color: #fff; }

/* ---------- Footer ---------- */
.footer-links a { transition: color .3s, text-shadow .3s; }
.footer-links a:hover { text-shadow: 0 0 12px #c776ffaa; }

/* ---------- Responsive ---------- */
/* Fix: on mid-size screens the two-row header was shorter than its nav row,
   so the nav floated over page content without a background. */
@media (max-width: 1150px) {
 :root { --header-height: 128px; }
 body[data-view] .site-header { height: 128px; row-gap: 0; }
}
/* Fix: the "IV · THE END" label overlapped the egg/heading on tablets and phones;
   below 980px it now sits in the text column above the heading (fx.js copies it). */
.end-copy[data-chapter]::before { content: attr(data-chapter); display: none; color: #b785da; font: 9px Minecraft, sans-serif; letter-spacing: .1em; }
@media (max-width: 980px) {
 .end-chapter[data-chapter]::before { display: none; }
 .end-copy[data-chapter]::before { display: block; }
}
@media (max-width: 700px) {
 :root { --header-height: 124px; }
 body[data-view] .site-header { height: 124px; grid-template-rows: 72px 52px; }
}
@media (max-width: 700px) {
 body[data-view] .hero-content > .fx-logo { width: 94%; margin: 25px auto 18px; }
 .feature-strip span::before { display: none; }
 .fx-aurora { opacity: .6; }
}

/* ---------- Motion preferences ---------- */
.motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .fx-cursor-light { display: none; }
.motion-paused .fx-logo, .motion-paused .fx-aurora i, .motion-paused .fx-rays { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
 body { animation: none; }
 .fx-rays, .fx-embers, .fx-cursor-light { display: none; }
 body[data-view] .reveal.pending, .power-board.pending > *, .leaders-stage.pending > a, .community-links.pending > a {
  opacity: 1; transform: none; translate: none; filter: none;
 }
}


/* ==========================================================================
   v2 additions
   ========================================================================== */

/* ---------- Instant cross-page transitions (Chrome, Edge, Safari 18.2+) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: fx-header; }
::view-transition-group(fx-header) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
::view-transition-old(root) { animation: fx-vt-out .42s cubic-bezier(.7,0,.84,0) both; }
::view-transition-new(root) { animation: fx-vt-in .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes fx-vt-out { to { opacity: 0; transform: scale(.955) translateY(-2.5%); filter: blur(18px) brightness(1.8) saturate(1.4); } }
@keyframes fx-vt-in { from { opacity: 0; transform: scale(1.05) translateY(3%); filter: blur(24px) brightness(2.2) saturate(1.5); } }
/* Exit flash before leaving the page */
.fx-warp {
 position: fixed; inset: 0; z-index: 140; pointer-events: none; opacity: 0;
 background: radial-gradient(120% 90% at 50% 50%, #c776ff38, #6a1fb022 45%, #07050b00 75%);
 transition: opacity .19s ease;
}
html.fx-leaving .fx-warp { opacity: 1; }
html.fx-leaving main, html.fx-leaving footer {
 transition: filter .19s ease, opacity .19s ease, transform .19s cubic-bezier(.7,0,.84,0);
 filter: blur(7px) brightness(1.5); opacity: .55; transform: scale(.985);
}

/* SVG motion-blur defs container */
.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Click sparks canvas ---------- */
.fx-sparks { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 119; pointer-events: none; }
@keyframes fx-burst { 0% { transform: scale(.3); opacity: 1; filter: brightness(2); } 100% { transform: scale(6.5); opacity: 0; } }

/* ---------- Kinetic headings ---------- */
.fx-split { perspective: 700px; }
.fx-split .fx-w { display: inline-block; transform-origin: 50% 100%; }
.fx-split:not(.fx-words-in) .fx-w { opacity: 0; }
.fx-words-in .fx-w {
 animation: fx-word 1.15s var(--fx-ease) backwards;
 animation-delay: calc(var(--wi, 0) * 75ms);
}
.fx-words-in em.fx-w {
 animation: fx-word 1.15s var(--fx-ease) backwards, fx-text 9s linear infinite;
 animation-delay: calc(var(--wi, 0) * 75ms), 0s;
}
@keyframes fx-word {
 0% { opacity: 0; transform: translateY(.7em) rotateX(-75deg) scaleY(1.5); filter: blur(12px) brightness(2.6); }
 55% { opacity: 1; filter: blur(0) brightness(1.7); }
 100% { opacity: 1; transform: none; filter: none; }
}
.fx-words-in { animation: fx-head-glow 2.2s ease-out .25s backwards; }
@keyframes fx-head-glow { 0% { text-shadow: 0 0 0 #c776ff00; } 30% { text-shadow: 0 0 34px #d79bffcc, 0 0 80px #8f32d977; } 100% { text-shadow: 0 0 0 #c776ff00; } }
body[data-view="home"] .hero-content > h1.fx-split { animation: none; }
body[data-view="home"] h2 { text-shadow: 0 0 40px #a74dff2e; }

/* Scroll-velocity skew on headings: they lean into fast scrolls */
.chapter-heading h2, .end-copy h2, .community-head h2, .join h2, .ranking-page h1 {
 transform: skewY(var(--fx-skew, 0deg)); transform-origin: 0 50%; will-change: transform;
}
/* Directional (vertical) motion blur on media while scrolling fast */
.fx-moving .world-window img { filter: url(#fx-mblur-y); }
.fx-moving .dragon-egg { filter: url(#fx-mblur-y) drop-shadow(0 0 42px #b94ee054); }
.fx-moving .relic-media video { filter: blur(var(--fx-vblur, 0px)); }

/* ---------- Hero: impact flash, shockwave, lens flare ---------- */
.fx-shock {
 position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%;
 pointer-events: none; border: 2px solid #f3e1ff; opacity: 0;
 box-shadow: 0 0 40px #c776ff, inset 0 0 30px #c776ff;
 animation: fx-shock 1.4s cubic-bezier(.15,.7,.2,1) .62s both;
}
@keyframes fx-shock { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(7); } }
.fx-hero-flash {
 position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 0;
 background: radial-gradient(60% 50% at 50% 38%, #f6e6ff 0, #c776ff88 30%, transparent 70%);
 animation: fx-hero-flash 1.3s ease-out .6s both, fx-hero-pulse 9s ease-in-out 3s infinite;
}
@keyframes fx-hero-flash { 0% { opacity: 0; } 12% { opacity: .75; } 100% { opacity: 0; } }
@keyframes fx-hero-pulse { 0%, 88%, 100% { opacity: 0; } 92% { opacity: .22; } }
.fx-flare { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.fx-flare::before {
 content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 22vw;
 background: linear-gradient(100deg, transparent, #e6c3ff1f 35%, #ffffff66 50%, #e6c3ff1f 65%, transparent);
 filter: blur(10px); transform: translate3d(-40vw,0,0) skewX(-18deg);
 animation: fx-flare-sweep 9s cubic-bezier(.6,0,.2,1) 2.6s infinite;
}
@keyframes fx-flare-sweep { 0% { transform: translate3d(-40vw,0,0) skewX(-18deg); } 24%, 100% { transform: translate3d(130vw,0,0) skewX(-18deg); } }
.fx-flare::after {
 content: ""; position: absolute; left: 8%; right: 8%; top: 33%; height: 2px; opacity: 0;
 background: linear-gradient(90deg, transparent, #c776ff 28%, #fff 50%, #c776ff 72%, transparent);
 box-shadow: 0 0 22px 5px #b45cffaa, 0 0 70px 12px #8f32d955;
 animation: fx-anamorphic 9s ease-out 2.6s infinite;
}
@keyframes fx-anamorphic { 0%, 3% { opacity: 0; transform: scaleX(.15); } 8% { opacity: .95; transform: scaleX(1); } 22%, 100% { opacity: 0; transform: scaleX(1.25); } }
.fx-aurora { opacity: 1; }
.fx-rays { opacity: 1; }

/* Hero CTA: auto light sweep every few seconds + stronger pulse */
body[data-view="home"] .hero .button.primary::after { animation: fx-auto-sheen 4.8s cubic-bezier(.6,0,.2,1) 2.2s infinite; }
@keyframes fx-auto-sheen { 0% { translate: -130% 0; } 30%, 100% { translate: 130% 0; } }
@keyframes fx-cta { 50% { box-shadow: 0 14px 74px #a23ff0a6, 0 0 36px #e0bbff88, 0 0 0 1px #f4e3ff; } }

/* ---------- Running light borders (square cards) ---------- */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fx-runner { border-image: conic-gradient(from var(--fx-angle), #c776ff22 0deg, #c776ff22 250deg, #e6c3ff 300deg, #fff 320deg, #c776ff 340deg, #c776ff22 360deg) 1; animation: fx-runner 5s linear infinite; }
.ranking-join.fx-runner { border-image: none; }
@keyframes fx-runner { to { --fx-angle: 360deg; } }

/* ---------- Feature strip marquee ---------- */
body[data-view] .feature-strip.fx-marquee {
 display: block; overflow: hidden; white-space: nowrap; padding-inline: 0;
 -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
 mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.fx-marquee-track { display: inline-flex; will-change: transform; }
.fx-marquee-group { display: inline-flex; gap: 58px; padding-right: 58px; flex: none; }
.fx-marquee-group > span { flex: none; }
.fx-marquee-group > span::before {
 content: ""; position: absolute; left: -32px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
 transform: rotate(45deg); background: #c776ff; box-shadow: 0 0 12px 2px #c776ff;
}
body[data-view] .feature-strip.fx-marquee span + span::before { left: -32px; }
.fx-moving .fx-marquee-track { filter: url(#fx-mblur-m); }
@media (max-width: 700px) { body[data-view] .feature-strip.fx-marquee .fx-marquee-group > span::before { display: block; } }

/* ---------- The End: ender particles ---------- */
.fx-ender { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.fx-egg-glow { animation: fx-pulse 4.5s ease-in-out infinite; }

/* Divider lines get a travelling spark */
.fx-lined::before {
 content: ""; position: absolute; top: -3px; left: 0; width: 120px; height: 5px; pointer-events: none; opacity: 0;
 background: radial-gradient(closest-side, #fff, #c776ff 60%, transparent); filter: blur(.5px);
}
.fx-lined.fx-in::before { animation: fx-line-spark 1.8s var(--fx-ease) both; }
@keyframes fx-line-spark { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(min(1240px, 100vw) - 120px)); } }

/* ---------- Rankings ---------- */
@keyframes fx-row {
 0% { opacity: 0; translate: -46px 0; transform: skewX(-14deg); filter: blur(10px) brightness(1.8); }
 60% { opacity: 1; filter: blur(0) brightness(1.2); }
 100% { opacity: 1; translate: 0 0; transform: none; filter: none; }
}
.ranking-row { position: relative; }
.podium-row:nth-child(1)::after {
 content: ""; position: absolute; inset: 0; pointer-events: none;
 background: linear-gradient(100deg, transparent 42%, #f6e3b738 50%, transparent 58%) no-repeat;
 background-size: 260% 100%; background-position: 130% 0;
 animation: fx-row-sheen 5s cubic-bezier(.6,0,.2,1) 1.2s infinite;
}
@keyframes fx-row-sheen { 0% { background-position: 130% 0; } 35%, 100% { background-position: -30% 0; } }
.ranking-value.fx-counting { text-shadow: 0 0 18px #d9a4ffdd; color: #fff; }
#ranking-board.fx-pulse-in { animation: fx-board-in 1s var(--fx-ease); }
@keyframes fx-board-in { 0% { box-shadow: 0 0 0 1px #d9a4ff88, 0 0 70px #a64dff55; } 100% { box-shadow: 0 0 0 1px #d9a4ff00, 0 0 0 #a64dff00; } }

/* ---------- v2 motion preferences ---------- */
.motion-paused .fx-flare::before, .motion-paused .fx-flare::after, .motion-paused .fx-hero-flash,
.motion-paused .fx-runner, .motion-paused .podium-row::after { animation-play-state: paused !important; }
.motion-paused .fx-words-in .fx-w, .motion-paused .fx-split .fx-w { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
 ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(fx-header) { animation: none; }
 .fx-warp, .fx-sparks, .fx-flare, .fx-hero-flash, .fx-shock, .fx-ender { display: none; }
 .fx-split .fx-w { opacity: 1; animation: none; }
 .fx-runner { animation: none; }
 .chapter-heading h2, .end-copy h2, .community-head h2, .join h2, .ranking-page h1 { transform: none; }
}