/* ============================================================
   Het Verhaal van de Zeven Stromen
   ============================================================ */

:root {
    --fire: #e8890c; --fire-glow: rgba(232,137,12,0.6); --fire-deep: #4a1800;
    --water: #4a9be5; --water-glow: rgba(74,155,229,0.5); --water-deep: #061a30;
    --air: #c8eef7; --air-glow: rgba(200,238,247,0.4); --air-deep: #0a1e2a;
    --earth: #c44444; --earth-glow: rgba(196,68,68,0.5); --earth-deep: #1a0505;
    --nature: #3fa83f; --nature-glow: rgba(63,168,63,0.5); --nature-deep: #041a04;
    --electric: #f0e040; --electric-glow: rgba(240,224,64,0.7); --electric-deep: #1a1800;
    --tech: #a855d9; --tech-glow: rgba(168,85,217,0.5); --tech-deep: #0e0420;

    --guardian: #8a9bb5; --guardian-glow: rgba(138,155,181,0.5); --guardian-deep: #0a0f1a;
    --fighter: #c4956a; --fighter-glow: rgba(196,149,106,0.45); --fighter-deep: #1a1208;
    --ranger: #6b8f5e; --ranger-glow: rgba(107,143,94,0.5); --ranger-deep: #061a08;
    --rogue: #8a8a9e; --rogue-glow: rgba(138,138,158,0.4); --rogue-deep: #0a0a14;
    --wizard: #9a7ac8; --wizard-glow: rgba(154,122,200,0.5); --wizard-deep: #0c0620;
    --bard: #c4a054; --bard-glow: rgba(196,160,84,0.5); --bard-deep: #1a1408;

    --bg: #06030f; --bg-deep: #030108;
    --ink: #f4ecd8; --ink-dim: #b8a888; --ink-muted: #6a5d46;
    --parchment: #e8dcc0; --gold: #d4a54a;
    --font-display: 'Cinzel', serif;
    --font-body: 'Cormorant Garamond', serif;
    --hero-progress: 0;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-snap-type:y mandatory; scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar { display:none; }
body { background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:clamp(1.05rem,1.15vw,1.25rem); line-height:1.7; -webkit-font-smoothing:antialiased; }

/* Snap targets */
.hero,.genesis,.realm,.turn,.role,.bridge,.convergence,.finale { scroll-snap-align:start; scroll-snap-stop:always; }

/* Fixed layers */
#particleCanvas { position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.grain { position:fixed; inset:0; z-index:2; pointer-events:none; opacity:0.03; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay; }

/* Shared */
.section-title { font-family:var(--font-display); font-size:clamp(2rem,7vw,3.5rem); font-weight:600; letter-spacing:0.08em; color:var(--parchment); text-align:center; margin-bottom:0.8rem; }
.section-lede { font-family:var(--font-body); font-style:italic; font-size:clamp(1.1rem,4vw,1.4rem); color:var(--ink-dim); text-align:center; max-width:80vw; margin:0 auto; }
.color-roy { color:var(--electric); text-shadow:0 0 25px rgba(240,224,64,0.5); }
.color-lidewei { color:var(--nature); text-shadow:0 0 25px rgba(63,168,63,0.5); }

/* ============================================================ HERO */
.hero { position:relative; height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; z-index:3; }
.hero-aurora { position:absolute; inset:0; overflow:hidden; pointer-events:none; will-change:transform; transform:translateY(calc(var(--hero-progress) * -100px)); }
.aurora { position:absolute; width:70vw; height:70vw; max-width:600px; max-height:600px; border-radius:50%; filter:blur(80px); opacity:0.4; mix-blend-mode:screen; animation:drift 25s ease-in-out infinite; }
.aurora-fire { background:radial-gradient(circle,var(--fire),transparent 70%); top:-15%; left:-10%; }
.aurora-water { background:radial-gradient(circle,var(--water),transparent 70%); top:25%; right:-15%; animation-delay:-5s; }
.aurora-nature { background:radial-gradient(circle,var(--nature),transparent 70%); bottom:5%; left:10%; animation-delay:-10s; }
.aurora-electric { background:radial-gradient(circle,var(--electric),transparent 70%); top:-5%; right:15%; animation-delay:-15s; opacity:0.25; }
.aurora-tech { background:radial-gradient(circle,var(--tech),transparent 70%); bottom:-5%; left:50%; animation-delay:-20s; opacity:0.3; }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 25%{transform:translate(5vw,-3vh) scale(1.15)} 50%{transform:translate(-3vw,5vh) scale(0.9)} 75%{transform:translate(-5vw,-5vh) scale(1.08)} }

.hero-content { position:relative; z-index:3; text-align:center; padding:0 2rem; will-change:transform,opacity; transform:translateY(calc(var(--hero-progress)*50px)) scale(calc(1 - var(--hero-progress)*0.08)); opacity:calc(1 - var(--hero-progress)*1.5); }
.hero-kicker { font-family:var(--font-display); font-size:clamp(0.65rem,2.5vw,0.9rem); letter-spacing:0.35em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:clamp(2rem,8vw,4rem); opacity:0; animation:fadeInUp 2s 0.5s ease-out forwards; }
.hero-title { font-family:var(--font-display); font-weight:500; line-height:1.1; margin-bottom:clamp(2rem,6vw,3rem); }
.hero-line-1 { display:block; font-size:clamp(1.2rem,4.5vw,2.5rem); font-weight:400; letter-spacing:0.15em; color:var(--ink-dim); margin-bottom:0.5em; opacity:0; animation:fadeInUp 2s 0.8s ease-out forwards; }
.hero-line-2 { display:block; font-size:clamp(2.5rem,10vw,6rem); font-weight:700; letter-spacing:0.04em; background:linear-gradient(135deg,var(--gold) 0%,#fff 30%,var(--gold) 60%,#fff 100%); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:fadeInUp 2s 1.1s ease-out forwards, shimmer 6s 3s ease-in-out infinite; opacity:0; }
@keyframes shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
/* ============================================================ NAV BUTTON */
.nav-next { position:fixed; bottom:max(2rem,env(safe-area-inset-bottom,2rem)); left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; align-items:center; gap:0.5rem; background:none; border:none; cursor:pointer; padding:0.8rem 1.5rem; opacity:0; animation:fadeIn 1.5s 2.5s ease-out forwards; transition:opacity 0.6s ease; -webkit-tap-highlight-color:transparent; }
.nav-next.hidden { opacity:0 !important; pointer-events:none; }
.nav-next span { font-family:var(--font-display); font-size:0.6rem; letter-spacing:0.5em; text-indent:0.5em; text-transform:uppercase; color:var(--ink-muted); transition:color 0.3s ease; }
.nav-next:hover span { color:var(--gold); }
.nav-next-chevron { width:16px; height:16px; border-right:1.5px solid var(--ink-muted); border-bottom:1.5px solid var(--ink-muted); transform:rotate(45deg); animation:navPulse 2.5s ease-in-out infinite; transition:border-color 0.3s ease; }
.nav-next:hover .nav-next-chevron { border-color:var(--gold); }
@keyframes navPulse { 0%,100%{opacity:0.3;transform:rotate(45deg) translateY(0)} 50%{opacity:0.9;transform:rotate(45deg) translateY(5px)} }

/* ============================================================ GENESIS */
.genesis { position:relative; z-index:3; height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.genesis-phrases { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:0 2rem; }
.genesis-phrase { position:absolute; font-family:var(--font-body); font-style:italic; font-size:clamp(1.2rem,4.5vw,2rem); line-height:1.6; color:var(--parchment); text-align:center; max-width:88vw; opacity:0; transform:translateY(40px); transition:opacity 0.8s ease,transform 0.8s ease; pointer-events:none; }
.genesis-phrase.active { opacity:1; transform:translateY(0); }
.genesis-phrase.past { opacity:0; transform:translateY(-40px); }

/* ============================================================ REALMS */
.realm { --realm-progress:0; --realm-opacity:0; position:relative; z-index:3; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; }

.realm-landscape { position:absolute; inset:-15% 0; width:100%; height:calc(100% + 30%); object-fit:cover; object-position:center center; pointer-events:none; z-index:0; opacity:calc(var(--realm-opacity) * 0.55); will-change:transform,opacity; transform:translateY(calc((var(--realm-progress) - 0.5) * -50px)); filter:brightness(0.35) saturate(0.7); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 30%,transparent 80%); mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 30%,transparent 80%); }
[data-element="fire"] .realm-landscape { object-position:center 60%; filter:brightness(0.35) saturate(0.8); }
[data-element="water"] .realm-landscape { object-position:center 40%; }
[data-element="air"] .realm-landscape { object-position:center 30%; filter:brightness(0.30) saturate(0.6); }
[data-element="earth"] .realm-landscape { object-position:center 70%; }
[data-element="nature"] .realm-landscape { object-position:center 50%; filter:brightness(0.30) saturate(0.8); }
[data-element="electric"] .realm-landscape { filter:brightness(0.40) saturate(0.75); }
[data-element="tech"] .realm-landscape { object-position:center 40%; filter:brightness(0.30) saturate(0.8); }

.realm-bg { position:absolute; inset:-10% 0; z-index:1; opacity:var(--realm-opacity); will-change:transform; transform:translateY(calc((var(--realm-progress) - 0.5) * -30px)); }
[data-element="fire"] .realm-bg { background:radial-gradient(ellipse at 50% 70%,var(--fire-deep) 0%,transparent 55%),linear-gradient(to top,rgba(232,137,12,0.08),transparent 40%); }
[data-element="water"] .realm-bg { background:radial-gradient(ellipse at 50% 30%,var(--water-deep) 0%,transparent 55%),linear-gradient(to bottom,rgba(74,155,229,0.06),transparent 40%); }
[data-element="air"] .realm-bg { background:radial-gradient(ellipse at 50% 20%,var(--air-deep) 0%,transparent 60%); }
[data-element="earth"] .realm-bg { background:radial-gradient(ellipse at 50% 100%,var(--earth-deep) 0%,transparent 50%),linear-gradient(to top,rgba(196,68,68,0.08),transparent 30%); }
[data-element="nature"] .realm-bg { background:radial-gradient(ellipse at 40% 60%,var(--nature-deep) 0%,transparent 55%); }
[data-element="electric"] .realm-bg { background:radial-gradient(ellipse at 50% 50%,var(--electric-deep) 0%,transparent 50%); }
[data-element="tech"] .realm-bg { background:radial-gradient(ellipse at 60% 40%,var(--tech-deep) 0%,transparent 55%); }

.realm-orbs { position:absolute; inset:-10% 0; z-index:1; pointer-events:none; opacity:var(--realm-opacity); will-change:transform; transform:translateY(calc((var(--realm-progress) - 0.5) * -60px)); }
.orb { position:absolute; border-radius:50%; filter:blur(60px); mix-blend-mode:screen; animation:orbPulse 6s ease-in-out infinite; }
.orb-2 { animation-delay:-2s; } .orb-3 { animation-delay:-4s; }
@keyframes orbPulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.15);opacity:0.85} }

[data-element="fire"] .orb-1 { width:50vw; height:50vw; background:var(--fire-glow); top:20%; left:-15%; }
[data-element="fire"] .orb-2 { width:35vw; height:35vw; background:rgba(255,100,0,0.4); bottom:10%; right:-10%; }
[data-element="fire"] .orb-3 { width:25vw; height:25vw; background:rgba(255,200,50,0.3); top:50%; left:40%; }
[data-element="water"] .orb-1 { width:45vw; height:45vw; background:var(--water-glow); top:10%; right:-10%; }
[data-element="water"] .orb-2 { width:40vw; height:40vw; background:rgba(30,100,200,0.35); bottom:15%; left:-15%; }
[data-element="water"] .orb-3 { width:20vw; height:20vw; background:rgba(150,210,255,0.3); top:45%; left:20%; }
[data-element="air"] .orb-1 { width:60vw; height:60vw; background:rgba(200,238,247,0.2); top:5%; left:10%; filter:blur(100px); }
[data-element="air"] .orb-2 { width:40vw; height:40vw; background:rgba(255,255,255,0.12); bottom:20%; right:5%; filter:blur(80px); }
[data-element="earth"] .orb-1 { width:50vw; height:30vw; background:var(--earth-glow); bottom:5%; left:10%; filter:blur(80px); }
[data-element="earth"] .orb-2 { width:35vw; height:35vw; background:rgba(120,30,30,0.4); top:30%; right:-10%; }
[data-element="nature"] .orb-1 { width:40vw; height:40vw; background:var(--nature-glow); top:15%; left:-10%; }
[data-element="nature"] .orb-2 { width:30vw; height:30vw; background:rgba(100,200,50,0.3); bottom:20%; right:5%; }
[data-element="nature"] .orb-3 { width:15vw; height:15vw; background:rgba(200,255,100,0.25); top:55%; left:50%; }
[data-element="electric"] .orb-1 { width:30vw; height:30vw; background:var(--electric-glow); top:20%; left:20%; animation:electricFlare 3s ease-in-out infinite; }
[data-element="electric"] .orb-2 { width:25vw; height:25vw; background:rgba(255,255,200,0.4); bottom:25%; right:15%; animation:electricFlare 2.5s ease-in-out infinite; animation-delay:-1s; }
@keyframes electricFlare { 0%,100%{opacity:0.3;transform:scale(1)} 15%{opacity:0.9;transform:scale(1.3)} 30%{opacity:0.2;transform:scale(0.95)} 50%{opacity:0.7;transform:scale(1.1)} }
[data-element="tech"] .orb-1 { width:35vw; height:35vw; background:var(--tech-glow); top:25%; right:-5%; }
[data-element="tech"] .orb-2 { width:30vw; height:30vw; background:rgba(120,50,180,0.3); bottom:20%; left:10%; }

.realm-atmosphere { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:var(--realm-opacity); }
[data-element="fire"] .realm-atmosphere { background:conic-gradient(from 250deg at 50% 100%,transparent 0deg,rgba(232,137,12,0.06) 10deg,transparent 20deg,transparent 160deg,rgba(255,100,0,0.05) 170deg,transparent 180deg); }
[data-element="water"] .realm-atmosphere { background:repeating-linear-gradient(0deg,transparent,transparent 8vh,rgba(74,155,229,0.03) 8.5vh,transparent 9vh),linear-gradient(to bottom,rgba(10,30,60,0.4),transparent 30%); }
[data-element="air"] .realm-atmosphere { background:linear-gradient(135deg,transparent 30%,rgba(200,238,247,0.04) 45%,transparent 55%); }
[data-element="earth"] .realm-atmosphere { background:linear-gradient(to bottom,rgba(0,0,0,0.3),transparent 25%),linear-gradient(to top,rgba(196,68,68,0.06),transparent 20%); }
[data-element="nature"] .realm-atmosphere { background:linear-gradient(to right,rgba(63,168,63,0.06),transparent 15%),linear-gradient(to left,rgba(63,168,63,0.06),transparent 15%); }
[data-element="electric"] .realm-atmosphere { background:repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(240,224,64,0.015) 60px,rgba(240,224,64,0.015) 61px),repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(240,224,64,0.015) 60px,rgba(240,224,64,0.015) 61px); }
[data-element="tech"] .realm-atmosphere { background:radial-gradient(circle at 20% 30%,rgba(168,85,217,0.04) 1px,transparent 1px),radial-gradient(circle at 80% 70%,rgba(168,85,217,0.04) 1px,transparent 1px); background-size:80px 80px; }

.realm-content { position:relative; z-index:2; text-align:center; padding:0 2rem; max-width:90vw; will-change:transform,opacity; opacity:var(--realm-opacity); transform:translateY(calc((var(--realm-progress) - 0.5) * -20px)); }
.realm-name { font-family:var(--font-display); font-size:clamp(2rem,8vw,7rem); font-weight:800; letter-spacing:0.04em; line-height:1; margin-bottom:1.5rem; }
[data-element="fire"] .realm-name { color:var(--fire); text-shadow:0 0 80px var(--fire-glow),0 0 160px rgba(232,137,12,0.3); animation:fireFlicker 3s ease-in-out infinite; }
@keyframes fireFlicker { 0%,100%{text-shadow:0 0 80px var(--fire-glow)} 33%{text-shadow:0 0 100px rgba(232,137,12,0.8)} 66%{text-shadow:0 0 60px rgba(232,137,12,0.5)} }
[data-element="water"] .realm-name { color:var(--water); text-shadow:0 0 80px var(--water-glow); animation:waterPulse 4s ease-in-out infinite; }
@keyframes waterPulse { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
[data-element="air"] .realm-name { color:var(--air); text-shadow:0 0 80px var(--air-glow); animation:airFloat 6s ease-in-out infinite; }
@keyframes airFloat { 0%,100%{transform:translate(0,0)} 25%{transform:translate(4px,-5px)} 50%{transform:translate(-3px,3px)} 75%{transform:translate(3px,2px)} }
[data-element="earth"] .realm-name { color:var(--earth); text-shadow:0 0 60px var(--earth-glow),0 2px 4px rgba(0,0,0,0.6); letter-spacing:0.1em; animation:earthSettle 8s ease-in-out infinite; }
@keyframes earthSettle { 0%,100%{transform:translateY(0);text-shadow:0 0 60px var(--earth-glow),0 2px 4px rgba(0,0,0,0.6)} 30%{transform:translateY(2px);text-shadow:0 0 50px var(--earth-glow),0 3px 6px rgba(0,0,0,0.7)} 50%{transform:translateY(3px);text-shadow:0 0 70px rgba(196,68,68,0.7),0 4px 8px rgba(0,0,0,0.8)} 52%{transform:translate(1px,3px)} 54%{transform:translate(-1px,2.5px)} 56%{transform:translateY(3px)} 80%{transform:translateY(1px);text-shadow:0 0 55px var(--earth-glow),0 2px 5px rgba(0,0,0,0.65)} }
[data-element="nature"] .realm-name { color:var(--nature); text-shadow:0 0 80px var(--nature-glow); }
[data-element="electric"] .realm-name { color:var(--electric); text-shadow:0 0 100px var(--electric-glow),0 0 40px rgba(255,255,200,0.5); animation:electricGlitch 4s ease-in-out infinite; }
@keyframes electricGlitch { 0%,88%,100%{transform:translate(0)} 90%{transform:translate(-3px,2px)} 92%{transform:translate(3px,-1px)} 94%{transform:translate(-1px,1px)} 96%{transform:translate(0)} }
[data-element="tech"] .realm-name { color:var(--tech); text-shadow:0 0 80px var(--tech-glow); }
.realm-text { font-family:var(--font-body); font-style:italic; font-size:clamp(1.15rem,4.5vw,1.6rem); line-height:1.6; max-width:500px; margin:0 auto; }
.realm-vanish { display:inline-block; }
[data-element="fire"][data-visible="true"] .realm-vanish { animation:vanishWord 4s 1.5s ease-in forwards; }
@keyframes vanishWord { 0%{opacity:1;filter:blur(0)} 60%{opacity:0.3;filter:blur(2px)} 100%{opacity:0.05;filter:blur(6px)} }
[data-element="tech"] .realm-text { border-right:2px solid var(--tech); padding-right:4px; }
[data-element="tech"][data-visible="true"] .realm-text { animation:cursorBlink 1s step-end infinite; }
@keyframes cursorBlink { 0%,100%{border-color:var(--tech)} 50%{border-color:transparent} }
.realm-fundament { display:inline-block; }
[data-element="earth"][data-visible="true"] .realm-fundament { animation:earthFoundation 3s 1s ease-out forwards; }
@keyframes earthFoundation { 0%{transform:translateY(0);letter-spacing:0.05em;text-shadow:none} 40%{transform:translateY(3px);letter-spacing:-0.01em;text-shadow:0 2px 8px rgba(196,68,68,0.5)} 100%{transform:translateY(2px);letter-spacing:0em;text-shadow:0 1px 6px rgba(196,68,68,0.3)} }

/* ============================================================ TURN */
.turn { position:relative; z-index:3; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:2rem; overflow:hidden; }
.turn-flashes { position:absolute; inset:0; pointer-events:none; }
.turn-flash { position:absolute; width:45vw; height:45vw; border-radius:50%; filter:blur(70px); opacity:0; mix-blend-mode:screen; }
.turn.in-view .turn-flash { animation:turnFlashIn 1s ease-out forwards,turnCollapse 3s 1s ease-in-out forwards; }
@keyframes turnFlashIn { from{opacity:0} to{opacity:0.7} }
@keyframes turnCollapse { 0%{transform:scale(1);opacity:0.7} 100%{transform:scale(0.2) translate(var(--tx,0),var(--ty,0));opacity:0.1} }
.turn-flash[data-element="fire"] { background:var(--fire); top:-10%; left:-10%; --tx:50vw; --ty:50vh; }
.turn-flash[data-element="water"] { background:var(--water); top:-10%; right:-10%; --tx:-50vw; --ty:50vh; }
.turn-flash[data-element="air"] { background:var(--air); top:30%; left:-15%; --tx:55vw; --ty:10vh; }
.turn-flash[data-element="earth"] { background:var(--earth); bottom:-10%; left:5%; --tx:25vw; --ty:-40vh; }
.turn-flash[data-element="nature"] { background:var(--nature); bottom:-10%; right:-5%; --tx:-35vw; --ty:-40vh; }
.turn-flash[data-element="electric"] { background:var(--electric); top:15%; right:-10%; --tx:-45vw; --ty:25vh; }
.turn-flash[data-element="tech"] { background:var(--tech); bottom:15%; left:25%; --tx:5vw; --ty:-25vh; }
.turn-text { position:relative; z-index:2; font-family:var(--font-body); font-style:italic; font-size:clamp(1.4rem,5.5vw,2.5rem); line-height:1.5; text-align:center; color:var(--parchment); max-width:85vw; opacity:0; transform:scale(0.92); transition:opacity 1.2s ease 0.3s,transform 1.2s ease 0.3s; }
.turn.in-view .turn-text { opacity:1; transform:scale(1); }
.turn-text em { font-style:normal; font-weight:600; background:linear-gradient(135deg,var(--fire),var(--water),var(--nature),var(--electric),var(--tech)); background-size:300% 300%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:gradientShift 5s ease-in-out infinite; }
@keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* ============================================================ ROLES */
.role { --role-progress:0; --role-opacity:0; position:relative; z-index:3; min-height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; }

.role-landscape { position:absolute; inset:-15% 0; width:100%; height:calc(100% + 30%); object-fit:cover; object-position:center center; pointer-events:none; z-index:0; opacity:calc(var(--role-opacity) * 0.55); will-change:transform,opacity; transform:translateY(calc((var(--role-progress) - 0.5) * -50px)); filter:brightness(0.35) saturate(0.7); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 30%,transparent 80%); mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 30%,transparent 80%); }
[data-role="guardian"] .role-landscape { object-position:center 50%; }
[data-role="fighter"] .role-landscape { object-position:center 40%; filter:brightness(0.35) saturate(0.65); }
[data-role="ranger"] .role-landscape { object-position:center 30%; filter:brightness(0.30) saturate(0.8); }
[data-role="rogue"] .role-landscape { object-position:center 35%; filter:brightness(0.28) saturate(0.6); }
[data-role="wizard"] .role-landscape { object-position:center 40%; filter:brightness(0.30) saturate(0.8); }
[data-role="bard"] .role-landscape { object-position:center 50%; filter:brightness(0.35) saturate(0.8); }

.role-bg { position:absolute; inset:-10% 0; z-index:1; opacity:var(--role-opacity); will-change:transform; transform:translateY(calc((var(--role-progress) - 0.5) * -30px)); }
[data-role="guardian"] .role-bg { background:radial-gradient(ellipse at 50% 60%,var(--guardian-deep) 0%,transparent 55%),linear-gradient(to top,rgba(138,155,181,0.06),transparent 40%); }
[data-role="fighter"] .role-bg { background:radial-gradient(ellipse at 50% 50%,var(--fighter-deep) 0%,transparent 55%),linear-gradient(to bottom,rgba(196,149,106,0.05),transparent 40%); }
[data-role="ranger"] .role-bg { background:radial-gradient(ellipse at 40% 50%,var(--ranger-deep) 0%,transparent 55%); }
[data-role="rogue"] .role-bg { background:radial-gradient(ellipse at 60% 40%,var(--rogue-deep) 0%,transparent 55%),linear-gradient(to top,rgba(138,138,158,0.05),transparent 30%); }
[data-role="wizard"] .role-bg { background:radial-gradient(ellipse at 50% 40%,var(--wizard-deep) 0%,transparent 50%); }
[data-role="bard"] .role-bg { background:radial-gradient(ellipse at 50% 60%,var(--bard-deep) 0%,transparent 55%),linear-gradient(to top,rgba(196,160,84,0.06),transparent 40%); }

.role-orbs { position:absolute; inset:-10% 0; z-index:1; pointer-events:none; opacity:var(--role-opacity); will-change:transform; transform:translateY(calc((var(--role-progress) - 0.5) * -60px)); }
[data-role="guardian"] .orb-1 { width:45vw; height:45vw; background:var(--guardian-glow); top:15%; left:-10%; }
[data-role="guardian"] .orb-2 { width:30vw; height:30vw; background:rgba(138,155,181,0.3); bottom:20%; right:-5%; }
[data-role="fighter"] .orb-1 { width:40vw; height:40vw; background:var(--fighter-glow); top:20%; right:-10%; }
[data-role="fighter"] .orb-2 { width:35vw; height:35vw; background:rgba(196,149,106,0.3); bottom:15%; left:-10%; }
[data-role="ranger"] .orb-1 { width:45vw; height:45vw; background:var(--ranger-glow); top:10%; left:-15%; }
[data-role="ranger"] .orb-2 { width:30vw; height:30vw; background:rgba(107,143,94,0.3); bottom:25%; right:5%; }
[data-role="rogue"] .orb-1 { width:35vw; height:35vw; background:var(--rogue-glow); top:25%; right:-5%; }
[data-role="rogue"] .orb-2 { width:30vw; height:30vw; background:rgba(138,138,158,0.25); bottom:20%; left:10%; }
[data-role="wizard"] .orb-1 { width:40vw; height:40vw; background:var(--wizard-glow); top:15%; left:15%; }
[data-role="wizard"] .orb-2 { width:35vw; height:35vw; background:rgba(154,122,200,0.3); bottom:15%; right:-5%; }
[data-role="bard"] .orb-1 { width:40vw; height:40vw; background:var(--bard-glow); top:20%; right:-10%; }
[data-role="bard"] .orb-2 { width:30vw; height:30vw; background:rgba(196,160,84,0.3); bottom:20%; left:5%; }

.role-content { position:relative; z-index:2; text-align:center; padding:0 2rem; max-width:90vw; will-change:transform,opacity; opacity:var(--role-opacity); transform:translateY(calc((var(--role-progress) - 0.5) * -20px)); }
.role-name { font-family:var(--font-display); font-size:clamp(2rem,8vw,7rem); font-weight:800; letter-spacing:0.04em; line-height:1; margin-bottom:1.5rem; }
[data-role="guardian"] .role-name { color:var(--guardian); text-shadow:0 0 80px var(--guardian-glow),0 0 160px rgba(138,155,181,0.3); }
[data-role="fighter"] .role-name { color:var(--fighter); text-shadow:0 0 80px var(--fighter-glow),0 0 160px rgba(196,149,106,0.3); }
[data-role="ranger"] .role-name { color:var(--ranger); text-shadow:0 0 80px var(--ranger-glow),0 0 160px rgba(107,143,94,0.3); }
[data-role="rogue"] .role-name { color:var(--rogue); text-shadow:0 0 80px var(--rogue-glow),0 0 160px rgba(138,138,158,0.25); }
[data-role="wizard"] .role-name { color:var(--wizard); text-shadow:0 0 80px var(--wizard-glow),0 0 160px rgba(154,122,200,0.3); }
[data-role="bard"] .role-name { color:var(--bard); text-shadow:0 0 80px var(--bard-glow),0 0 160px rgba(196,160,84,0.3); }
.role-text { font-family:var(--font-body); font-style:italic; font-size:clamp(1.15rem,4.5vw,1.6rem); line-height:1.6; max-width:500px; margin:0 auto; }

/* ============================================================ BRIDGE */
.bridge { position:relative; z-index:3; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:clamp(5rem,12vw,9rem) 2rem; text-align:center; overflow:hidden; }
.bridge-text { font-family:var(--font-display); font-size:clamp(1.4rem,5vw,2.2rem); font-weight:600; letter-spacing:0.04em; color:var(--parchment); line-height:1.4; opacity:0; transform:translateY(30px); transition:opacity 1s ease,transform 1s ease; }
.bridge-text.visible { opacity:1; transform:translateY(0); }

/* ============================================================ CONVERGENCE */
.convergence { position:relative; z-index:3; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:clamp(6rem,15vw,10rem) 2rem; overflow:hidden; }
.convergence-landscape { position:absolute; inset:-10% 0; width:100%; height:calc(100% + 20%); object-fit:cover; object-position:center center; pointer-events:none; z-index:0; opacity:0; filter:brightness(0.25) saturate(0.6); transition:opacity 3s ease,filter 2.5s ease; will-change:opacity,filter; -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 20%,transparent 75%); mask-image:radial-gradient(ellipse 90% 80% at 50% 50%,black 20%,transparent 75%); }
.convergence-landscape.visible { opacity:0.45; filter:brightness(0.35) saturate(0.7); }

.convergence-aurora { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; opacity:0.6; }
.convergence-aurora .aurora { opacity:0.25; width:50vw; height:50vw; }
.convergence-content { position:relative; z-index:2; text-align:center; max-width:700px; padding:0 1.5rem; }
.conv-line { font-family:var(--font-body); font-style:italic; font-size:clamp(1.2rem,4.5vw,1.8rem); line-height:1.6; color:var(--parchment); margin-bottom:1.5rem; opacity:0; transform:translateY(25px); transition:opacity 0.8s ease,transform 0.8s ease; }
.conv-line.visible { opacity:1; transform:translateY(0); }

/* ============================================================ GALLERY */
.gallery { position:relative; z-index:3; padding:clamp(4rem,10vw,8rem) 0; overflow:hidden; scroll-snap-align:start; }
.gallery-header { margin-bottom:clamp(2rem,5vw,3rem); opacity:0; transform:translateY(30px); transition:opacity 1s ease,transform 1s ease; }
.gallery-header.visible { opacity:1; transform:translateY(0); }
.gallery-filters { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem; padding:0 1rem; margin-bottom:clamp(2rem,5vw,3rem); }
.filter-btn { font-family:var(--font-display); font-size:clamp(0.6rem,2.2vw,0.75rem); letter-spacing:0.1em; text-transform:uppercase; padding:0.5rem 0.9rem; border:1px solid rgba(244,236,216,0.15); border-radius:100px; background:rgba(255,255,255,0.03); color:var(--ink-dim); cursor:pointer; transition:all 0.3s ease; -webkit-tap-highlight-color:transparent; }
.filter-btn:hover,.filter-btn.active { color:var(--parchment); border-color:rgba(244,236,216,0.4); background:rgba(255,255,255,0.08); }
.filter-btn[data-element="fire"].active { border-color:var(--fire); color:var(--fire); box-shadow:0 0 20px rgba(232,137,12,0.25); }
.filter-btn[data-element="water"].active { border-color:var(--water); color:var(--water); box-shadow:0 0 20px rgba(74,155,229,0.25); }
.filter-btn[data-element="air"].active { border-color:var(--air); color:var(--air); box-shadow:0 0 20px rgba(200,238,247,0.2); }
.filter-btn[data-element="earth"].active { border-color:var(--earth); color:var(--earth); box-shadow:0 0 20px rgba(196,68,68,0.25); }
.filter-btn[data-element="nature"].active { border-color:var(--nature); color:var(--nature); box-shadow:0 0 20px rgba(63,168,63,0.25); }
.filter-btn[data-element="electric"].active { border-color:var(--electric); color:var(--electric); box-shadow:0 0 20px rgba(240,224,64,0.25); }
.filter-btn[data-element="tech"].active { border-color:var(--tech); color:var(--tech); box-shadow:0 0 20px rgba(168,85,217,0.25); }
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(0.6rem,2vw,1rem); padding:0 clamp(0.6rem,2vw,1rem); max-width:800px; margin:0 auto; }
.gallery-card { position:relative; aspect-ratio:5/7; overflow:hidden; border-radius:8px; cursor:pointer; background:#0a0612; opacity:0; transform:translateY(40px) scale(0.92); transition:opacity 0.6s ease,transform 0.6s ease; -webkit-tap-highlight-color:transparent; }
.gallery-card.visible { opacity:1; transform:translateY(0) scale(1); }
.gallery-card.filtered-out { display:none; }
.gallery-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s ease; }
.gallery-card:active img { transform:scale(1.03); }
.gallery-card[data-element="fire"] { box-shadow:0 0 0 1px rgba(232,137,12,0.25),0 4px 25px rgba(232,137,12,0.2); }
.gallery-card[data-element="water"] { box-shadow:0 0 0 1px rgba(74,155,229,0.25),0 4px 25px rgba(74,155,229,0.2); }
.gallery-card[data-element="air"] { box-shadow:0 0 0 1px rgba(200,238,247,0.25),0 4px 25px rgba(200,238,247,0.15); }
.gallery-card[data-element="earth"] { box-shadow:0 0 0 1px rgba(196,68,68,0.25),0 4px 25px rgba(196,68,68,0.2); }
.gallery-card[data-element="nature"] { box-shadow:0 0 0 1px rgba(63,168,63,0.25),0 4px 25px rgba(63,168,63,0.2); }
.gallery-card[data-element="electric"] { box-shadow:0 0 0 1px rgba(240,224,64,0.25),0 4px 25px rgba(240,224,64,0.2); }
.gallery-card[data-element="tech"] { box-shadow:0 0 0 1px rgba(168,85,217,0.25),0 4px 25px rgba(168,85,217,0.2); }
.gallery-card-name { position:absolute; left:0; right:0; bottom:0; padding:2.5rem 0.75rem 0.75rem; font-family:var(--font-display); font-size:clamp(0.6rem,2.5vw,0.8rem); letter-spacing:0.12em; text-transform:uppercase; color:var(--parchment); text-align:center; background:linear-gradient(to top,rgba(0,0,0,0.9),transparent); pointer-events:none; }
.gallery-empty { grid-column:1/-1; text-align:center; padding:3rem; color:var(--ink-muted); font-style:italic; }

/* ============================================================ FINALE */
.finale { position:relative; z-index:3; min-height:100svh; display:flex; align-items:center; justify-content:center; padding:clamp(4rem,10vw,8rem) 2rem; overflow:hidden; background:linear-gradient(to bottom,transparent,var(--bg-deep)); }
.finale-aurora { position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0.5; }
.finale-aurora .aurora { opacity:0.25; animation-duration:30s; }
.finale-content { position:relative; z-index:2; text-align:center; max-width:700px; opacity:0; transform:translateY(30px); transition:opacity 1.2s ease,transform 1.2s ease; }
.finale-content.visible { opacity:1; transform:translateY(0); }
.finale-line { font-family:var(--font-display); font-size:clamp(1.6rem,6vw,3rem); font-weight:500; letter-spacing:0.06em; color:var(--parchment); margin-bottom:0.8rem; line-height:1.3; }
.finale-highlight { background:linear-gradient(135deg,var(--gold),#fff,var(--gold)); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 5s ease-in-out infinite; margin-bottom:clamp(3rem,8vw,5rem); }
.finale-signature { display:flex; flex-direction:column; gap:1rem; padding-top:2.5rem; border-top:1px solid rgba(244,236,216,0.1); }
.finale-names { font-family:var(--font-display); font-size:clamp(1.5rem,5vw,2.5rem); font-weight:500; letter-spacing:0.1em; color:var(--parchment); }
.finale-date { font-family:var(--font-display); font-size:clamp(0.7rem,2.5vw,0.9rem); letter-spacing:0.4em; text-transform:uppercase; color:var(--ink-muted); }

/* ============================================================ LIGHTBOX */
.lightbox { position:fixed; inset:0; background:rgba(3,1,8,0.97); backdrop-filter:blur(20px); z-index:200; display:none; align-items:center; justify-content:center; padding:1rem; -webkit-tap-highlight-color:transparent; }
.lightbox.active { display:flex; animation:fadeIn 0.3s ease-out; }
.lightbox-content { position:relative; max-width:92vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:1rem; animation:lightboxZoom 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
@keyframes lightboxZoom { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
.lightbox-image { max-width:100%; max-height:82vh; object-fit:contain; border-radius:8px; box-shadow:0 25px 80px rgba(0,0,0,0.8); }
.lightbox-caption { font-family:var(--font-display); font-size:clamp(0.85rem,3vw,1rem); letter-spacing:0.2em; text-transform:uppercase; color:var(--parchment); text-align:center; }
.lightbox-close,.lightbox-nav { position:absolute; background:rgba(255,255,255,0.06); border:1px solid rgba(244,236,216,0.15); color:var(--parchment); cursor:pointer; font-family:var(--font-display); line-height:1; transition:all 0.2s ease; -webkit-tap-highlight-color:transparent; }
.lightbox-close { top:max(1rem,env(safe-area-inset-top,1rem)); right:1rem; width:44px; height:44px; border-radius:50%; font-size:1.4rem; display:flex; align-items:center; justify-content:center; z-index:10; }
.lightbox-nav { top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; font-size:1.8rem; display:flex; align-items:center; justify-content:center; z-index:10; }
.lightbox-prev { left:0.5rem; } .lightbox-next { right:0.5rem; }
.lightbox-close:active,.lightbox-nav:active { background:rgba(255,255,255,0.15); }

/* ============================================================ MOBILE PERFORMANCE */
@media (max-width: 768px) {
    .aurora { filter: blur(40px); }
    .orb { filter: blur(30px); }
    [data-element="air"] .orb-1 { filter: blur(50px); }
    [data-element="air"] .orb-2 { filter: blur(40px); }
    [data-element="earth"] .orb-1 { filter: blur(40px); }
    .turn-flash { filter: blur(35px); }
    .grain { display: none; }
    .lightbox { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(3,1,8,0.98); }
    [data-element="fire"] .realm-name { text-shadow: 0 0 40px var(--fire-glow); }
    [data-element="water"] .realm-name { text-shadow: 0 0 40px var(--water-glow); }
    [data-element="air"] .realm-name { text-shadow: 0 0 40px var(--air-glow); }
    [data-element="earth"] .realm-name { text-shadow: 0 0 30px var(--earth-glow), 0 2px 4px rgba(0,0,0,0.6); }
    [data-element="nature"] .realm-name { text-shadow: 0 0 40px var(--nature-glow); }
    [data-element="electric"] .realm-name { text-shadow: 0 0 50px var(--electric-glow); }
    [data-element="tech"] .realm-name { text-shadow: 0 0 40px var(--tech-glow); }
    [data-role="guardian"] .role-name { text-shadow: 0 0 40px var(--guardian-glow); }
    [data-role="fighter"] .role-name { text-shadow: 0 0 40px var(--fighter-glow); }
    [data-role="ranger"] .role-name { text-shadow: 0 0 40px var(--ranger-glow); }
    [data-role="rogue"] .role-name { text-shadow: 0 0 40px var(--rogue-glow); }
    [data-role="wizard"] .role-name { text-shadow: 0 0 40px var(--wizard-glow); }
    [data-role="bard"] .role-name { text-shadow: 0 0 40px var(--bard-glow); }
    @keyframes fireFlicker { 0%,100%{opacity:1} 33%{opacity:0.85} 66%{opacity:0.95} }
    @keyframes earthSettle { 0%,100%{transform:translateY(0)} 30%{transform:translateY(2px)} 50%{transform:translateY(3px)} 52%{transform:translate(1px,3px)} 54%{transform:translate(-1px,2.5px)} 56%{transform:translateY(3px)} 80%{transform:translateY(1px)} }
    .realm-bg, .realm-orbs, .role-bg, .role-orbs { will-change: auto; }
}

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion:reduce) {
    html { scroll-snap-type:none !important; }
    *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.2s !important; }
    .aurora { animation:none; }
    #particleCanvas { display:none; }
    .nav-next { animation:none; opacity:0.6; }
    .nav-next-chevron { animation:none; }
    .genesis { height:auto; }
    .genesis-phrases { position:relative; height:auto; flex-direction:column; gap:3rem; padding:4rem 2rem; }
    .genesis-phrase { position:relative; opacity:1; transform:none; }
    .realm { min-height:80vh; }
    .realm-landscape,.convergence-landscape { transform:none !important; opacity:0.3 !important; filter:brightness(0.3) saturate(0.6) !important; transition:none !important; }
    .realm-content,.realm-bg,.realm-orbs,.realm-atmosphere { transform:none !important; opacity:1 !important; }
    .hero-content,.hero-aurora { transform:none !important; opacity:1 !important; }
    .role { min-height:80vh; }
    .role-landscape { transform:none !important; opacity:0.3 !important; filter:brightness(0.3) saturate(0.6) !important; transition:none !important; }
    .role-content,.role-bg,.role-orbs { transform:none !important; opacity:1 !important; }
    .bridge-text,.conv-line,.finale-content { opacity:1; transform:none; }
    .turn-text { opacity:1; transform:none; }
}