:root {
    --intro-ink: #050506;
    --intro-void: #09090b;
    --intro-paper: #f3eee3;
    --intro-muted: #aaa49a;
    --intro-gold: #d9b765;
    --intro-gold-pale: #f2daa0;
    --intro-amber: #8d6129;
    --intro-violet: #8d61ff;
    --intro-cyan: #7ee7ff;
    --intro-line: rgba(217, 183, 101, .24);
    --intro-font-display: "Cinzel", Georgia, serif;
    --intro-font-body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--intro-ink);
}

body.eter-intro-page {
    margin: 0;
    color: var(--intro-paper);
    background: var(--intro-ink);
    font-family: var(--intro-font-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}

body.eter-intro-page::selection {
    color: #111;
    background: var(--intro-gold-pale);
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.intro-skip-link {
    position: fixed;
    z-index: 1000;
    top: 1rem;
    left: 1rem;
    padding: .8rem 1rem;
    color: #111;
    background: var(--intro-gold-pale);
    transform: translateY(-180%);
    transition: transform .2s ease;
}

.intro-skip-link:focus { transform: translateY(0); }

.intro-shell { position: relative; overflow: clip; }

.intro-ambient,
.intro-stars,
.intro-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.intro-ambient { z-index: 20; overflow: hidden; }

.intro-fx-canvas {
    position: fixed;
    z-index: 24;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .88;
    contain: strict;
}

.intro-energy-vignette {
    position: fixed;
    z-index: 22;
    inset: 0;
    pointer-events: none;
    opacity: .32;
    background:
        radial-gradient(circle at var(--fx-x, 72%) var(--fx-y, 38%), rgba(141,97,255,.13), transparent 18%),
        radial-gradient(circle at 50% 110%, rgba(217,183,101,.08), transparent 42%);
    transition: opacity .4s ease;
}

.intro-scroll-charge {
    position: fixed;
    z-index: 102;
    top: 50%;
    right: 14px;
    width: 1px;
    height: min(36vh, 320px);
    background: rgba(217,183,101,.12);
    transform: translateY(-50%);
    pointer-events: none;
}

.intro-scroll-charge span {
    display: block;
    width: 100%;
    height: var(--scroll-charge, 0%);
    background: linear-gradient(180deg, var(--intro-gold-pale), var(--intro-violet), var(--intro-cyan));
    box-shadow: 0 0 12px var(--intro-violet);
    transition: height .12s linear;
}

.intro-cursor-aura {
    position: fixed;
    z-index: 210;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 1px solid rgba(242,218,160,.3);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) scale(.8);
    transition: width .22s ease, height .22s ease, margin .22s ease, opacity .25s ease, border-color .22s ease;
}

.intro-cursor-aura::before,
.intro-cursor-aura::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(141,97,255,.36);
    transform: rotate(45deg);
}

.intro-cursor-aura::after {
    inset: 18px;
    border: 0;
    border-radius: 50%;
    background: var(--intro-gold-pale);
    box-shadow: 0 0 14px var(--intro-gold-pale), 0 0 30px var(--intro-violet);
}

.intro-cursor-aura.is-active { opacity: .86; }
.intro-cursor-aura.is-link {
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border-color: rgba(242,218,160,.64);
}

.intro-stars {
    opacity: .22;
    background-image:
        radial-gradient(circle at 14% 28%, #fff 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 18%, #ddbfff 0 1px, transparent 1.5px),
        radial-gradient(circle at 84% 69%, #ffe7ae 0 1px, transparent 1.5px),
        radial-gradient(circle at 38% 81%, #fff 0 1px, transparent 1.5px);
    background-size: 230px 190px, 310px 270px, 380px 330px, 290px 240px;
    animation: intro-stars-drift 36s linear infinite;
}

.intro-grain {
    opacity: .07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.intro-orb {
    position: absolute;
    width: 32rem;
    height: 32rem;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .09;
}

.intro-orb-one { top: 18vh; right: -18rem; background: var(--intro-violet); }
.intro-orb-two { bottom: 8vh; left: -20rem; background: var(--intro-amber); }

.intro-gate {
    display: none;
    position: fixed;
    z-index: 999;
    inset: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    isolation: isolate;
    color: var(--intro-paper);
    background: #030304;
    transition: opacity .8s ease, visibility .8s ease;
}

.has-js .intro-gate { display: flex; }
.intro-ready .intro-gate { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-gate-scene { position: absolute; z-index: -2; inset: 0; overflow: hidden; }
.intro-gate-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(3,3,4,.96),rgba(3,3,4,.54) 46%,rgba(3,3,4,.18) 70%,rgba(3,3,4,.72)), linear-gradient(180deg,rgba(3,3,4,.42),transparent 50%,#030304);
}
.intro-gate-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% center;
    opacity: .68;
    animation: intro-gate-character 2.55s cubic-bezier(.16,.78,.2,1) both;
}
.intro-gate-scene i {
    position: absolute;
    z-index: 1;
    top: -25%;
    left: 63%;
    width: 2px;
    height: 150%;
    background: linear-gradient(transparent,rgba(255,255,255,.8),var(--intro-violet),transparent);
    box-shadow: 0 0 28px var(--intro-violet), 0 0 80px rgba(141,97,255,.45);
    opacity: 0;
    transform: rotate(18deg);
    animation: intro-gate-light 2.55s .2s ease-out both;
}
.intro-gate-scene i:nth-child(3) { left: 69%; height: 118%; transform: rotate(-12deg); animation-delay: .42s; }

.intro-gate::before,
.intro-gate::after {
    content: "";
    position: absolute;
    left: 8vw;
    right: 8vw;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--intro-line), transparent);
}

.intro-gate::before { top: 15vh; }
.intro-gate::after { bottom: 15vh; }

.intro-gate-aura {
    position: absolute;
    z-index: -1;
    width: min(68vw, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(130, 86, 255, .16), rgba(217, 183, 101, .07) 32%, transparent 67%);
    animation: intro-gate-pulse 2.2s ease-in-out infinite;
}

.intro-gate-sigil {
    position: absolute;
    z-index: -1;
    width: min(72vw, 660px);
    aspect-ratio: 1;
    border: 1px solid rgba(217,183,101,.12);
    border-radius: 50%;
    animation: intro-ring 24s linear infinite;
}

.intro-gate-sigil::before,
.intro-gate-sigil::after,
.intro-gate-sigil i {
    content: "";
    position: absolute;
    inset: 10%;
    border: 1px solid rgba(141,97,255,.15);
    border-radius: 50%;
}

.intro-gate-sigil::after { inset: 24%; border-style: dashed; border-color: rgba(126,231,255,.14); }
.intro-gate-sigil i:nth-child(1) { inset: 2% 46%; border-radius: 0; border-color: rgba(217,183,101,.18); }
.intro-gate-sigil i:nth-child(2) { inset: 46% 2%; border-radius: 0; border-color: rgba(217,183,101,.18); }
.intro-gate-sigil i:nth-child(3) { inset: 14%; border-radius: 3%; transform: rotate(45deg); }

.intro-gate-copy {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    width: min(760px, calc(100% - 2rem));
    text-align: center;
}

.intro-gate-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 0 28px rgba(141,97,255,.42));
    animation: intro-logo-awake 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.intro-gate-copy > small {
    margin: .7rem 0 1rem;
    color: var(--intro-gold-pale);
    font: 700 .54rem/1 var(--intro-font-body);
    letter-spacing: .42em;
    text-transform: uppercase;
    animation: intro-gate-copy .7s .35s both;
}
.intro-gate-copy strong {
    display: grid;
    font: 600 clamp(2.9rem,7vw,7.2rem)/.82 var(--intro-font-display);
    letter-spacing: -.065em;
    text-transform: uppercase;
}
.intro-gate-copy strong span,
.intro-gate-copy strong em { display: block; padding-inline-end: .14em; margin-inline-end: -.14em; font-style: normal; animation: intro-gate-title .8s .55s cubic-bezier(.16,.78,.2,1) both; }
.intro-gate-copy strong em { color: var(--intro-gold-pale); animation-delay: .75s; }
.intro-gate-copy p {
    margin: 1.35rem 0 1rem;
    color: rgba(243,238,227,.64);
    font: 600 .56rem/1 var(--intro-font-body);
    letter-spacing: .46em;
    text-transform: uppercase;
    animation: intro-gate-copy .65s 1.05s both;
}

.intro-gate-track {
    position: relative;
    z-index: 2;
    width: min(55vw, 360px);
    height: 1px;
    overflow: hidden;
    background: rgba(255,255,255,.1);
}

.intro-gate-track span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--intro-amber), var(--intro-gold-pale), var(--intro-violet));
    transform-origin: left;
    animation: intro-gate-progress 2.35s cubic-bezier(.65,0,.2,1) both;
}

.intro-gate button {
    position: relative;
    z-index: 2;
    margin-top: 2rem;
    padding: .55rem;
    border: 0;
    color: rgba(255,255,255,.5);
    background: transparent;
    font: 600 .58rem/1 var(--intro-font-body);
    letter-spacing: .28em;
    cursor: pointer;
    transition: color .2s ease;
}

.intro-gate button:hover,
.intro-gate button:focus-visible { color: var(--intro-gold-pale); }

.intro-nav {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 92px;
    padding: 0 clamp(1.25rem, 4vw, 5rem);
    border-bottom: 1px solid transparent;
    transition: min-height .35s ease, background .35s ease, border-color .35s ease;
}

.intro-nav.is-scrolled {
    min-height: 72px;
    border-color: var(--intro-line);
    background: rgba(5, 5, 6, .96);
}

.intro-nav-brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .7rem;
    text-decoration: none;
}

.intro-nav-brand img { width: 48px; height: 48px; object-fit: contain; }
.intro-nav-brand span { display: grid; line-height: 1; }
.intro-nav-brand b { font: 700 .82rem/1 var(--intro-font-display); letter-spacing: .17em; }
.intro-nav-brand small { margin-top: .38rem; color: #8d887f; font-size: .48rem; letter-spacing: .22em; text-transform: uppercase; }

.intro-nav nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3.5rem); }
.intro-nav nav a {
    position: relative;
    color: #bbb5aa;
    font: 600 .6rem/1 var(--intro-font-body);
    letter-spacing: .24em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s ease;
}
.intro-nav nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -.7rem;
    left: 0;
    height: 1px;
    background: var(--intro-gold);
    transform: scaleX(0);
    transition: transform .25s ease;
}
.intro-nav nav a:hover { color: var(--intro-paper); }
.intro-nav nav a:hover::after { transform: scaleX(1); }

.intro-nav-enter {
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.2rem;
    border: 1px solid var(--intro-line);
    color: var(--intro-gold-pale);
    background: rgba(8,8,9,.42);
    font: 600 .58rem/1 var(--intro-font-body);
    letter-spacing: .2em;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
.intro-nav-enter b { font-size: 1rem; font-weight: 400; }
.intro-nav-enter:hover { border-color: var(--intro-gold); background: rgba(217,183,101,.1); }

.intro-nav-actions {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: .65rem;
}

.intro-language { position: relative; }
.intro-language > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 48px;
    min-height: 43px;
    padding: .65rem .7rem;
    border: 1px solid var(--intro-line);
    color: var(--intro-gold-pale);
    background: rgba(8,8,9,.58);
    font: 700 .52rem/1 var(--intro-font-body);
    letter-spacing: .15em;
    list-style: none;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.intro-language > summary::-webkit-details-marker { display: none; }
.intro-language > summary:hover,
.intro-language > summary:focus-visible,
.intro-language[open] > summary {
    border-color: var(--intro-gold);
    color: #fff1bd;
    background: rgba(217,183,101,.1);
}
.intro-language__menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + .65rem);
    right: 0;
    width: 178px;
    padding: .6rem;
    border: 1px solid rgba(217,183,101,.34);
    background: rgba(5,5,6,.98);
    box-shadow: 0 22px 55px rgba(0,0,0,.55);
}
.intro-language__menu > small {
    display: block;
    padding: .35rem .55rem .55rem;
    color: #736d65;
    font: 700 .45rem/1 var(--intro-font-body);
    letter-spacing: .22em;
}
.intro-language__menu a {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: .55rem;
    padding: .65rem .55rem;
    color: #969087;
    text-decoration: none;
    border-left: 1px solid transparent;
}
.intro-language__menu a b {
    color: var(--intro-gold-pale);
    font: 700 .55rem/1 var(--intro-font-body);
    letter-spacing: .12em;
}
.intro-language__menu a span { font-size: .7rem; }
.intro-language__menu a:hover,
.intro-language__menu a.is-active {
    color: var(--intro-paper);
    border-left-color: var(--intro-gold);
    background: rgba(217,183,101,.07);
}

.intro-audio-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 43px;
    padding: .65rem .75rem;
    border: 1px solid rgba(217,183,101,.2);
    color: #928c82;
    background: rgba(5,5,6,.48);
    font: 700 .46rem/1 var(--intro-font-body);
    letter-spacing: .16em;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.intro-audio-toggle:hover,
.intro-audio-toggle:focus-visible,
.intro-audio-toggle[aria-pressed="true"] { color: var(--intro-gold-pale); border-color: rgba(217,183,101,.5); background: rgba(217,183,101,.08); }
.intro-audio-bars { display: flex; align-items: end; gap: 2px; width: 12px; height: 12px; }
.intro-audio-bars i { width: 2px; height: 4px; background: currentColor; transform-origin: bottom; }
.intro-audio-bars i:nth-child(2) { height: 9px; }
.intro-audio-bars i:nth-child(3) { height: 6px; }
.intro-audio-toggle[aria-pressed="true"] .intro-audio-bars i { animation: intro-audio-bar .72s ease-in-out infinite alternate; }
.intro-audio-toggle[aria-pressed="true"] .intro-audio-bars i:nth-child(2) { animation-delay: -.28s; }
.intro-audio-toggle[aria-pressed="true"] .intro-audio-bars i:nth-child(3) { animation-delay: -.5s; }

.intro-fx-toggle {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 43px;
    padding: .7rem .8rem;
    border: 1px solid rgba(141,97,255,.22);
    color: #989189;
    background: rgba(5,5,6,.4);
    font: 600 .48rem/1 var(--intro-font-body);
    letter-spacing: .16em;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, background .25s ease;
}

.intro-fx-toggle > span { display: flex; align-items: end; gap: 2px; height: 12px; }
.intro-fx-toggle i { display: block; width: 2px; background: var(--intro-violet); box-shadow: 0 0 6px var(--intro-violet); animation: intro-fx-bars .9s ease-in-out infinite alternate; }
.intro-fx-toggle i:nth-child(1) { height: 5px; }
.intro-fx-toggle i:nth-child(2) { height: 12px; animation-delay: -.3s; }
.intro-fx-toggle i:nth-child(3) { height: 8px; animation-delay: -.55s; }
.intro-fx-toggle:hover { color: var(--intro-gold-pale); border-color: rgba(217,183,101,.44); }
.intro-fx-toggle[aria-pressed="false"] { opacity: .56; }
.intro-fx-toggle[aria-pressed="false"] i { animation-play-state: paused; background: #68635c; box-shadow: none; }

.intro-hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 100svh;
    overflow: hidden;
    border-bottom: 1px solid var(--intro-line);
    background: var(--intro-ink);
}

.intro-hero-media,
.intro-hero-shade { position: absolute; inset: 0; }
.intro-hero-media { inset: -2.5%; }
.intro-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro-hero-shade {
    background:
        linear-gradient(90deg, rgba(3,3,4,.97) 0%, rgba(3,3,4,.82) 31%, rgba(3,3,4,.18) 67%, rgba(3,3,4,.58) 100%),
        linear-gradient(180deg, rgba(3,3,4,.36) 0%, transparent 28%, rgba(3,3,4,.5) 78%, #050506 100%);
}

.intro-aurora {
    position: absolute;
    z-index: 1;
    inset: -20%;
    pointer-events: none;
    opacity: .52;
    filter: blur(22px);
    mix-blend-mode: screen;
}

.intro-aurora i {
    position: absolute;
    width: 60%;
    height: 16%;
    border-radius: 50%;
    transform: rotate(-14deg);
    animation: intro-aurora-flow 12s ease-in-out infinite alternate;
}
.intro-aurora i:nth-child(1) { top: 12%; left: 32%; background: rgba(141,97,255,.13); }
.intro-aurora i:nth-child(2) { top: 22%; left: 45%; background: rgba(126,231,255,.07); animation-delay: -4s; }
.intro-aurora i:nth-child(3) { top: 36%; left: 24%; background: rgba(217,183,101,.07); animation-delay: -8s; }

.intro-divine-rays {
    position: absolute;
    z-index: 1;
    inset: -20% -10% 0 24%;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
}

.intro-divine-rays i {
    position: absolute;
    top: -24%;
    width: 11%;
    height: 130%;
    background: linear-gradient(180deg, rgba(242,218,160,.2), rgba(141,97,255,.05) 46%, transparent 82%);
    filter: blur(8px);
    transform: rotate(17deg) translateX(-40%);
    transform-origin: top;
    animation: intro-ray-breathe 6s ease-in-out infinite alternate;
}
.intro-divine-rays i:nth-child(1) { left: 18%; width: 7%; }
.intro-divine-rays i:nth-child(2) { left: 37%; width: 14%; animation-delay: -2s; }
.intro-divine-rays i:nth-child(3) { left: 61%; width: 9%; animation-delay: -4.5s; }
.intro-divine-rays i:nth-child(4) { left: 78%; width: 5%; animation-delay: -1s; }

.intro-celestial-sigil {
    position: absolute;
    z-index: 1;
    top: 51%;
    left: 55%;
    width: min(45vw, 600px);
    aspect-ratio: 1;
    opacity: .34;
    pointer-events: none;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
}

.sigil-ring,
.sigil-core {
    position: absolute;
    border-radius: 50%;
}
.sigil-ring { border: 1px solid rgba(217,183,101,.32); }
.sigil-ring::before,
.sigil-ring::after { content: ""; position: absolute; inset: 8%; border: 1px dashed rgba(141,97,255,.3); border-radius: 50%; }
.sigil-ring::after { inset: 20%; border-color: rgba(126,231,255,.2); }
.sigil-ring-a { inset: 0; animation: intro-ring 34s linear infinite; }
.sigil-ring-b { inset: 12%; border-style: dashed; animation: intro-ring-reverse 22s linear infinite; }
.sigil-ring-c { inset: 28%; border-color: rgba(242,218,160,.52); animation: intro-sigil-pulse 4s ease-in-out infinite; }
.sigil-core { inset: 43%; background: radial-gradient(circle,#fff,rgba(242,218,160,.7) 12%,rgba(141,97,255,.28) 38%,transparent 70%); box-shadow: 0 0 50px rgba(141,97,255,.5); }
.intro-celestial-sigil b { position: absolute; color: var(--intro-gold-pale); font: 400 1rem/1 var(--intro-font-display); text-shadow: 0 0 12px var(--intro-violet); }
.intro-celestial-sigil b:nth-of-type(1) { top: -8px; left: calc(50% - 8px); }
.intro-celestial-sigil b:nth-of-type(2) { top: calc(50% - 8px); right: -8px; }
.intro-celestial-sigil b:nth-of-type(3) { bottom: -8px; left: calc(50% - 8px); }
.intro-celestial-sigil b:nth-of-type(4) { top: calc(50% - 8px); left: -8px; }

.intro-floating-shards { position: absolute; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
.intro-floating-shards i {
    position: absolute;
    width: 7px;
    height: 18px;
    opacity: .42;
    clip-path: polygon(50% 0,100% 35%,72% 100%,22% 82%,0 30%);
    background: linear-gradient(140deg,var(--intro-gold-pale),var(--intro-violet));
    filter: drop-shadow(0 0 7px var(--intro-violet));
    animation: intro-shard-float 7s ease-in-out infinite;
}
.intro-floating-shards i:nth-child(1) { top: 18%; left: 12%; animation-delay: -1s; }
.intro-floating-shards i:nth-child(2) { top: 23%; left: 43%; width: 4px; height: 11px; animation-delay: -4s; }
.intro-floating-shards i:nth-child(3) { top: 14%; left: 67%; animation-delay: -2.4s; }
.intro-floating-shards i:nth-child(4) { top: 34%; left: 78%; width: 9px; height: 24px; animation-delay: -6s; }
.intro-floating-shards i:nth-child(5) { top: 56%; left: 49%; animation-delay: -3.2s; }
.intro-floating-shards i:nth-child(6) { top: 72%; left: 72%; width: 5px; height: 14px; animation-delay: -5.2s; }
.intro-floating-shards i:nth-child(7) { top: 64%; left: 17%; animation-delay: -1.8s; }
.intro-floating-shards i:nth-child(8) { top: 82%; left: 37%; width: 4px; height: 12px; animation-delay: -4.7s; }
.intro-floating-shards i:nth-child(9) { top: 42%; left: 91%; animation-delay: -3.8s; }
.intro-floating-shards i:nth-child(10) { top: 76%; left: 89%; width: 9px; height: 21px; animation-delay: -2s; }
.intro-floating-shards i:nth-child(11) { top: 9%; left: 27%; width: 3px; height: 9px; animation-delay: -5.7s; }
.intro-floating-shards i:nth-child(12) { top: 89%; left: 61%; animation-delay: -.4s; }
.intro-floating-shards i:nth-child(13) { top: 48%; left: 29%; width: 4px; height: 10px; animation-delay: -6.4s; }
.intro-floating-shards i:nth-child(14) { top: 29%; left: 57%; width: 10px; height: 26px; animation-delay: -2.9s; }
.intro-floating-shards i:nth-child(n+11) { display: none; }

.intro-hero-rune {
    position: absolute;
    right: -1vw;
    bottom: -8vh;
    color: transparent;
    -webkit-text-stroke: 1px rgba(217,183,101,.08);
    font: 900 clamp(9rem, 23vw, 28rem)/.7 var(--intro-font-display);
    letter-spacing: -.12em;
    pointer-events: none;
}

.intro-hero-content {
    position: relative;
    z-index: 2;
    width: min(1460px, calc(100% - clamp(2.5rem, 9vw, 11rem)));
    margin: 0 auto;
    padding: 9rem 0 6rem;
}

.intro-hero-copy { width: min(700px, 56vw); }

.intro-eyebrow,
.intro-kicker {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    color: var(--intro-gold-pale);
    font: 600 .62rem/1.3 var(--intro-font-body);
    letter-spacing: .34em;
    text-transform: uppercase;
}
.intro-eyebrow i { width: 2.2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--intro-gold)); }
.intro-eyebrow i:last-child { background: linear-gradient(90deg, var(--intro-gold), transparent); }

.intro-hero h1 {
    max-width: 760px;
    margin: 1.8rem 0 1.4rem;
    font: 600 clamp(4.2rem, 7.4vw, 8.4rem)/.83 var(--intro-font-display);
    letter-spacing: -.065em;
    text-transform: uppercase;
    text-wrap: balance;
}
.intro-hero h1 em {
    color: var(--intro-gold-pale);
    font-style: normal;
    text-shadow: 0 0 35px rgba(217,183,101,.2);
}

.intro-hero h1 span,
.intro-hero h1 em {
    display: inline-block;
    padding-inline-end: .14em;
    margin-inline-end: -.14em;
    overflow: visible;
    color: transparent;
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}
.intro-hero h1 span { background-image: linear-gradient(110deg,#f3eee3 8%,#fff 34%,#bcb5a9 48%,#fff 62%,#f3eee3 88%); }
.intro-hero h1 em { background-image: linear-gradient(110deg,#a87a35 2%,#f2daa0 28%,#fff4c9 48%,#c79743 68%,#f2daa0 96%); }
.intro-ready .intro-hero h1 span { animation: intro-title-arrive 1.1s cubic-bezier(.16,.78,.2,1) both, intro-text-shimmer 8s 1.4s linear 2; }
.intro-ready .intro-hero h1 em { animation: intro-title-arrive 1.25s .13s cubic-bezier(.16,.78,.2,1) both, intro-text-shimmer 8s 2s linear 2; }
.intro-hero-copy > p {
    max-width: 620px;
    margin: 0;
    color: #c0bab0;
    font-size: clamp(.98rem, 1.2vw, 1.15rem);
    line-height: 1.85;
}

.intro-fps-showcase {
    width: min(620px,100%);
    margin-top: 1.35rem;
    display: grid;
    min-height: 64px;
    grid-template-columns: 165px minmax(0,1fr);
    grid-template-areas: "label modes" "label note";
    align-items: center;
    gap: .35rem 1.1rem;
    padding: .9rem 1.15rem;
    border: 1px solid rgba(218,163,255,.58);
    background: linear-gradient(110deg,rgba(8,7,10,.97),rgba(70,34,96,.84),rgba(8,7,10,.94));
    box-shadow: inset 0 0 30px rgba(161,97,226,.15),0 0 34px -20px rgba(197,142,255,.9);
}
.intro-fps-showcase > span,
.intro-fps-showcase > small { color: rgba(224,193,121,.72); font: 700 .52rem/1.35 var(--intro-font-display); letter-spacing: .14em; text-transform: uppercase; }
.intro-fps-showcase > span { grid-area: label; align-self: stretch; display: flex; align-items: center; padding-right: 1rem; border-right: 1px solid rgba(236,196,105,.24); }
.intro-fps-showcase > small { grid-area: note; color: #b0a79a; text-align: left; }
.intro-fps-showcase strong { grid-area: modes; display: flex; align-items: center; gap: .8rem; color: #fff0c4; font: 800 1rem/1 var(--intro-font-display); letter-spacing: .08em; white-space: nowrap; }
.intro-fps-showcase strong b { color: inherit; font: inherit; }
.intro-fps-showcase strong b:last-child { color: #d5a6ff; text-shadow: 0 0 16px rgba(157,87,225,.65); }
.intro-fps-showcase strong i { width: 4px; height: 4px; border-radius: 50%; background: var(--intro-violet); box-shadow: 0 0 10px var(--intro-violet); }

.intro-hero-actions,
.intro-world-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }

.intro-btn {
    position: relative;
    display: grid;
    min-width: 230px;
    min-height: 68px;
    align-content: center;
    padding: .9rem 1.55rem;
    overflow: hidden;
    border: 1px solid var(--intro-line);
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease, color .25s ease;
}
.intro-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.32), transparent 80%);
    transform: translateX(-120%);
    transition: transform .6s ease;
}
.intro-btn:hover { transform: translateY(-3px); }
.intro-btn:hover::after { transform: translateX(120%); }
.intro-btn span { font: 700 .67rem/1 var(--intro-font-display); letter-spacing: .16em; }
.intro-btn small { margin-top: .45rem; font: 500 .52rem/1 var(--intro-font-body); letter-spacing: .12em; opacity: .65; text-transform: uppercase; }
.intro-btn-primary { color: #15110a; border-color: #ecd58f; background: linear-gradient(135deg, #8b632b, #efd58c 48%, #9c7134); box-shadow: 0 15px 45px rgba(139,99,43,.22); }
.intro-btn-ghost { color: var(--intro-paper); background: rgba(5,5,6,.82); }
.intro-btn-ghost:hover { border-color: rgba(242,218,160,.72); color: var(--intro-gold-pale); }

.intro-hero-hooks {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    max-width: 700px;
    margin-top: 1.45rem;
    border-top: 1px solid rgba(217,183,101,.2);
    border-bottom: 1px solid rgba(217,183,101,.13);
    background: linear-gradient(90deg,rgba(13,11,15,.86),rgba(13,11,15,.28));
}

.intro-hero-hooks a {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: .75rem;
    min-height: 68px;
    padding: .78rem .85rem;
    border-right: 1px solid rgba(217,183,101,.13);
    text-decoration: none;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.intro-hero-hooks a:last-child { border-right: 0; }
.intro-hero-hooks a::after { content: "↗"; position: absolute; top: .55rem; right: .65rem; color: rgba(242,218,160,.28); font-size: .58rem; transition: color .25s ease, transform .25s ease; }
.intro-hero-hooks small { color: rgba(217,183,101,.58); font: 600 .52rem/1 var(--intro-font-display); }
.intro-hero-hooks span { display: grid; min-width: 0; gap: .28rem; }
.intro-hero-hooks b { overflow: hidden; color: var(--intro-paper); font: 700 .57rem/1.2 var(--intro-font-display); letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
.intro-hero-hooks em { overflow: hidden; color: #817b73; font: 500 .47rem/1.25 var(--intro-font-body); letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.intro-hero-hooks .is-live em::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 .42rem .05rem 0; border-radius: 50%; background: var(--intro-violet); box-shadow: 0 0 9px var(--intro-violet); }
.intro-hero-hooks a:hover,
.intro-hero-hooks a:focus-visible { color: var(--intro-gold-pale); background: linear-gradient(135deg,rgba(217,183,101,.1),rgba(141,97,255,.05)); transform: translateY(-2px); }
.intro-hero-hooks a:hover::after,
.intro-hero-hooks a:focus-visible::after { color: var(--intro-gold-pale); transform: translate(2px,-2px); }

.intro-scroll {
    position: absolute;
    z-index: 3;
    bottom: 1.8rem;
    left: 50%;
    display: grid;
    justify-items: center;
    gap: .7rem;
    color: rgba(255,255,255,.52);
    font-size: .5rem;
    letter-spacing: .28em;
    text-decoration: none;
    transform: translateX(-50%);
}
.intro-scroll i { width: 1px; height: 2rem; background: linear-gradient(var(--intro-gold), transparent); animation: intro-scroll 1.7s ease-in-out infinite; }
.intro-hero-index { position: absolute; z-index: 3; right: clamp(1rem,3vw,4rem); bottom: 2rem; display: flex; align-items: center; gap: .65rem; font-family: var(--intro-font-display); }
.intro-hero-index b { color: var(--intro-gold-pale); font-size: .8rem; }
.intro-hero-index span { width: 60px; height: 1px; background: var(--intro-line); }
.intro-hero-index small { color: #6b675f; font-size: .65rem; }

.intro-ready .intro-hero-media img { animation: intro-hero-awaken 1.35s cubic-bezier(.16,.78,.2,1) both; }
.intro-ready .intro-eyebrow { animation: intro-content-arrive .7s .12s both; }
.intro-ready .intro-hero-copy > p { animation: intro-content-arrive .75s .38s both; }
.intro-ready .intro-hero-actions { animation: intro-content-arrive .75s .52s both; }
.intro-ready .intro-hero-hooks { animation: intro-content-arrive .75s .64s both; }

.intro-section-wrap { position: relative; z-index: 2; width: min(1380px, calc(100% - clamp(2.5rem, 9vw, 10rem))); margin: 0 auto; }

.intro-chapter-marker {
    position: absolute;
    z-index: 8;
    top: 1.65rem;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    pointer-events: none;
}
.intro-chapter-marker b,
.intro-chapter-marker small { font: 700 .5rem/1 var(--intro-font-body); letter-spacing: .24em; }
.intro-chapter-marker b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(217,183,101,.3); color: var(--intro-gold-pale); transform: rotate(45deg); }
.intro-chapter-marker b span { display: block; padding-left: .2em; transform: rotate(-45deg); }
.intro-chapter-marker i { width: 54px; height: 1px; background: linear-gradient(90deg,var(--intro-gold),transparent); }
.intro-chapter-marker small { color: rgba(243,238,227,.42); }
.is-fx-current .intro-chapter-marker b { color: #111; border-color: var(--intro-gold-pale); background: var(--intro-gold-pale); box-shadow: 0 0 28px rgba(217,183,101,.18); }

.intro-discovery {
    position: relative;
    z-index: 1;
    padding: clamp(7rem, 10vw, 10rem) 0;
    overflow: hidden;
    border-bottom: 1px solid var(--intro-line);
    background:
        radial-gradient(circle at 72% 14%, rgba(141,97,255,.1), transparent 28%),
        linear-gradient(180deg, #050506, #0a090c 50%, #050506);
    content-visibility: auto;
    contain-intrinsic-block-size: 1320px;
}

.intro-discovery::before {
    content: "VI";
    position: absolute;
    top: 2rem;
    right: -1rem;
    color: transparent;
    -webkit-text-stroke: 1px rgba(217,183,101,.055);
    font: 700 clamp(15rem, 32vw, 34rem)/.8 var(--intro-font-display);
    pointer-events: none;
}

.intro-discovery-aura {
    position: absolute;
    inset: 18% auto auto 50%;
    width: min(70vw, 900px);
    aspect-ratio: 1;
    border: 1px solid rgba(141,97,255,.08);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(141,97,255,.06), transparent 66%);
    transform: translateX(-50%);
    pointer-events: none;
}

.intro-discovery-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(275px, auto);
    gap: .7rem;
}

.intro-discovery-card {
    position: relative;
    min-height: 300px;
    grid-column: span 4;
    overflow: hidden;
    border: 1px solid rgba(217,183,101,.18);
    background: #0c0a0e;
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.intro-discovery-card.is-featured {
    min-height: 610px;
    grid-column: span 7;
    grid-row: span 2;
}

.intro-discovery-card:nth-child(2),
.intro-discovery-card:nth-child(3) { grid-column: span 5; }

.intro-discovery-card:nth-last-child(-n+2) { grid-column: span 6; }

.intro-discovery-card > a {
    position: absolute;
    inset: 0;
    display: block;
    color: inherit;
    text-decoration: none;
}

.intro-discovery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.84) brightness(.82);
    transition: transform .75s cubic-bezier(.2,.72,.2,1), filter .45s ease;
}

.intro-discovery-card:nth-child(2) img { object-position: 58% center; }
.intro-discovery-card:nth-child(5) img { object-position: 62% center; }

.intro-discovery-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4,4,6,.05) 18%, rgba(4,4,6,.28) 48%, rgba(4,4,6,.96) 100%),
        linear-gradient(90deg, rgba(4,4,6,.64), transparent 72%);
}

.intro-discovery-card.is-featured .intro-discovery-shade {
    background:
        linear-gradient(180deg, rgba(4,4,6,.03) 20%, rgba(4,4,6,.18) 45%, rgba(4,4,6,.97) 100%),
        linear-gradient(90deg, rgba(4,4,6,.82), transparent 68%);
}

.intro-discovery-number {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    color: rgba(242,218,160,.6);
    font: 600 .72rem/1 var(--intro-font-display);
    letter-spacing: .16em;
}

.intro-discovery-number::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + .65rem);
    width: 24px;
    height: 1px;
    background: var(--intro-line);
}

.intro-discovery-copy {
    position: absolute;
    z-index: 1;
    right: clamp(1.3rem, 3vw, 2.7rem);
    bottom: clamp(1.3rem, 3vw, 2.7rem);
    left: clamp(1.3rem, 3vw, 2.7rem);
}

.intro-discovery-copy > small {
    color: var(--intro-gold);
    font: 700 .52rem/1.3 var(--intro-font-body);
    letter-spacing: .25em;
}

.intro-discovery-copy h3 {
    max-width: 680px;
    margin: .62rem 0 .55rem;
    font: 600 clamp(1.45rem, 2.25vw, 2.35rem)/1.04 var(--intro-font-display);
    letter-spacing: -.035em;
    text-transform: uppercase;
    text-wrap: balance;
}

.intro-discovery-card.is-featured .intro-discovery-copy h3 {
    font-size: clamp(2.6rem, 5vw, 5.3rem);
    line-height: .92;
}

.intro-discovery-copy p {
    max-width: 570px;
    margin: 0;
    color: #b8b1a7;
    font-size: .78rem;
    line-height: 1.65;
}

.intro-discovery-card:not(.is-featured) .intro-discovery-copy p { max-width: 430px; }

.intro-discovery-link {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    color: var(--intro-gold-pale);
    font: 700 .5rem/1 var(--intro-font-body);
    letter-spacing: .18em;
}

.intro-discovery-link b {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid var(--intro-line);
    font-size: .75rem;
    transition: color .25s ease, border-color .25s ease, transform .25s ease;
}

.intro-discovery-card:hover,
.intro-discovery-card:focus-within {
    z-index: 2;
    border-color: rgba(242,218,160,.62);
    box-shadow: 0 28px 70px rgba(0,0,0,.38), inset 0 0 45px rgba(141,97,255,.04);
    transform: translateY(-5px);
}

.intro-discovery-card:hover img,
.intro-discovery-card:focus-within img { filter: saturate(1) brightness(.96); transform: scale(1.035); }
.intro-discovery-card:hover .intro-discovery-link b,
.intro-discovery-card:focus-within .intro-discovery-link b { color: #111; border-color: var(--intro-gold-pale); background: var(--intro-gold-pale); transform: translate(2px,-2px); }
.intro-discovery-card[data-tilt] > a { transform: perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transform-style: preserve-3d; transition: transform .22s ease-out; }

.intro-equipment {
    position: relative;
    z-index: 1;
    padding: clamp(8rem,11vw,11rem) 0 9rem;
    overflow: hidden;
    border-bottom: 1px solid var(--intro-line);
    background:
        linear-gradient(180deg,rgba(5,5,6,.2),#070708 82%),
        radial-gradient(circle at 50% 25%,rgba(141,97,255,.12),transparent 31%),
        linear-gradient(120deg,rgba(217,183,101,.04),transparent 34%),
        #060607;
    content-visibility: auto;
    contain-intrinsic-block-size: 1750px;
}
.intro-equipment::before {
    content: "72 / EQUIPMENT ARCHIVE";
    position: absolute;
    top: 6%;
    left: 50%;
    color: rgba(255,255,255,.014);
    font: 800 clamp(4.5rem,11vw,11rem)/1 var(--intro-font-display);
    letter-spacing: -.07em;
    white-space: nowrap;
    transform: translateX(-50%);
}
.intro-equipment-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 3rem 0 1rem; border: 1px solid var(--intro-line); background: rgba(5,5,7,.76); }
.intro-equipment-summary div { display: flex; align-items: center; gap: .85rem; min-height: 84px; padding: 1rem 1.3rem; border-right: 1px solid var(--intro-line); }
.intro-equipment-summary div:last-child { border-right: 0; }
.intro-equipment-summary b { color: var(--intro-gold-pale); font: 600 1.7rem/1 var(--intro-font-display); }
.intro-equipment-summary span { color: #777169; font: 700 .45rem/1.4 var(--intro-font-body); letter-spacing: .18em; }
.intro-equipment-catalog { position: relative; border: 1px solid rgba(217,183,101,.2); background: rgba(5,5,7,.9); box-shadow: 0 34px 90px rgba(0,0,0,.4); }
.intro-equipment-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-bottom: 1px solid var(--intro-line); }
.intro-equipment-tabs button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; min-width: 0; min-height: 72px; padding: .75rem 1rem; border: 0; border-right: 1px solid var(--intro-line); color: #777169; background: #070708; text-align: left; cursor: pointer; transition: color .24s ease, background .24s ease; }
.intro-equipment-tabs button:last-child { border-right: 0; }
.intro-equipment-tabs button:hover,
.intro-equipment-tabs button:focus-visible { color: var(--intro-paper); background: rgba(217,183,101,.055); }
.intro-equipment-tabs button[aria-selected="true"] { color: var(--intro-gold-pale); background: linear-gradient(180deg,rgba(217,183,101,.12),rgba(141,97,255,.04)); box-shadow: inset 0 -2px var(--intro-gold); }
.intro-equipment-tabs b { font: 700 .68rem/1 var(--intro-font-display); letter-spacing: .1em; }
.intro-equipment-tabs span { overflow: hidden; font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
.intro-equipment-tabs small { color: rgba(217,183,101,.52); font: 700 .42rem/1 var(--intro-font-body); }
.intro-equipment-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; background: var(--intro-line); }
.intro-equipment-slot { position: relative; display: grid; grid-template-rows: 190px auto auto; min-width: 0; min-height: 330px; padding: 1.2rem; overflow: hidden; border: 0; color: var(--intro-paper); background: linear-gradient(155deg,#101013,#060607 72%); text-align: left; cursor: pointer; isolation: isolate; transition: background .3s ease, box-shadow .3s ease; }
.intro-equipment-slot[hidden] { display: none !important; }
.intro-equipment-slot::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 36%,rgba(141,97,255,.16),transparent 36%); opacity: .45; transition: opacity .3s ease; }
.intro-equipment-slot:hover,
.intro-equipment-slot:focus-visible { z-index: 1; outline: 1px solid rgba(242,218,160,.64); outline-offset: -1px; background: linear-gradient(155deg,#17131c,#080709 72%); box-shadow: inset 0 0 42px rgba(141,97,255,.08); }
.intro-equipment-slot:hover::before,
.intro-equipment-slot:focus-visible::before { opacity: 1; }
.intro-equipment-mannequin { position: relative; display: block; width: 92px; height: 164px; margin: .25rem auto 0; filter: drop-shadow(0 14px 18px rgba(0,0,0,.65)); }
.intro-equipment-mannequin::before { content: ""; position: absolute; top: 2px; left: 50%; width: 30px; height: 34px; border: 1px solid rgba(217,183,101,.42); border-radius: 48% 48% 38% 38%; background: linear-gradient(145deg,#1e1b22,#070709); transform: translateX(-50%); }
.intro-equipment-mannequin::after { content: ""; position: absolute; top: 35px; left: 50%; width: 88px; height: 83px; border: 1px solid rgba(217,183,101,.38); background: linear-gradient(120deg,rgba(217,183,101,.14),rgba(141,97,255,.13) 45%,rgba(4,4,6,.95)); clip-path: polygon(19% 5%,37% 0,42% 12%,58% 12%,63% 0,81% 5%,100% 27%,82% 40%,73% 100%,27% 100%,18% 40%,0 27%); transform: translateX(-50%); }
.intro-equipment-mannequin i { position: absolute; top: 47px; left: 50%; z-index: 1; width: 18px; height: 18px; border: 1px solid rgba(242,218,160,.55); background: radial-gradient(circle,#8d61ff 0 18%,#17131c 22% 58%,transparent 60%); transform: translateX(-50%) rotate(45deg); }
.intro-equipment-mannequin b,
.intro-equipment-mannequin em { position: absolute; top: 105px; width: 26px; height: 56px; border: 1px solid rgba(217,183,101,.3); background: linear-gradient(165deg,rgba(141,97,255,.12),#09090b 62%); clip-path: polygon(10% 0,90% 0,72% 100%,22% 100%); }
.intro-equipment-mannequin b { left: 19px; }
.intro-equipment-mannequin em { right: 19px; }
.intro-equipment-slot-copy { display: grid; align-content: start; gap: .48rem; min-width: 0; }
.intro-equipment-slot-copy small { color: var(--intro-gold); font: 700 .43rem/1 var(--intro-font-body); letter-spacing: .18em; }
.intro-equipment-slot-copy strong { font: 600 1.03rem/1.15 var(--intro-font-display); text-transform: uppercase; }
.intro-equipment-slot-copy > span { color: #716c65; font-size: .54rem; letter-spacing: .09em; }
.intro-equipment-open { display: flex; justify-content: space-between; align-items: center; align-self: end; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--intro-line); color: #9a9389; font: 700 .43rem/1 var(--intro-font-body); letter-spacing: .17em; }
.intro-equipment-open b { color: var(--intro-gold-pale); font-size: .75rem; transition: transform .24s ease; }
.intro-equipment-slot:hover .intro-equipment-open b,
.intro-equipment-slot:focus-visible .intro-equipment-open b { transform: translate(2px,-2px); }
.intro-equipment-disclaimer { max-width: 900px; margin: 2rem auto 0; color: #777169; font-size: .68rem; line-height: 1.7; text-align: center; }
.intro-equipment-dialog { width: min(920px,calc(100vw - 2rem)); max-height: min(780px,calc(100vh - 2rem)); padding: 0; overflow: auto; border: 1px solid rgba(242,218,160,.38); color: var(--intro-paper); background: #08080a; box-shadow: 0 48px 130px rgba(0,0,0,.82),0 0 70px rgba(141,97,255,.1); }
.intro-equipment-dialog::backdrop { background: rgba(2,2,3,.86); }
.intro-equipment-dialog > form { position: absolute; z-index: 3; top: 1rem; right: 1rem; }
.intro-equipment-dialog > form button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(217,183,101,.32); color: var(--intro-gold-pale); background: rgba(5,5,7,.9); font-size: 1.25rem; cursor: pointer; }
.intro-equipment-dialog-grid { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1fr); min-height: 610px; }
.intro-equipment-dialog-stage { position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--intro-line); background: radial-gradient(circle at 50% 42%,rgba(141,97,255,.18),transparent 37%),linear-gradient(160deg,#111015,#050506); }
.intro-equipment-dialog-stage::before { content: ""; position: absolute; width: 72%; aspect-ratio: 1; border: 1px solid rgba(217,183,101,.13); transform: rotate(45deg); }
.intro-equipment-dialog-stage .intro-equipment-mannequin { width: 138px; height: 246px; margin: 0; transform: scale(1.35); }
.intro-equipment-dialog-stage > small { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; color: #79736b; font: 700 .45rem/1.4 var(--intro-font-body); letter-spacing: .2em; text-align: center; }
.intro-equipment-dialog-copy { display: flex; justify-content: center; flex-direction: column; padding: clamp(2.5rem,6vw,5rem); }
.intro-equipment-dialog-copy h3 { margin: 1rem 0 1.2rem; font: 600 clamp(2.25rem,4vw,4rem)/.95 var(--intro-font-display); text-transform: uppercase; }
.intro-equipment-dialog-copy > p { margin: 0; color: #9a9389; line-height: 1.75; }
.intro-equipment-dialog-copy dl { margin: 2rem 0 1.4rem; border-top: 1px solid var(--intro-line); border-bottom: 1px solid var(--intro-line); }
.intro-equipment-dialog-copy dl div { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--intro-line); }
.intro-equipment-dialog-copy dl div:last-child { border-bottom: 0; }
.intro-equipment-dialog-copy dt { color: #736d65; font: 700 .44rem/1.5 var(--intro-font-body); letter-spacing: .18em; }
.intro-equipment-dialog-copy dd { margin: 0; color: #ddd4c5; font-size: .68rem; }
.intro-equipment-parts { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border: 1px solid var(--intro-line); }
.intro-equipment-parts span { padding: .72rem .2rem; border-right: 1px solid var(--intro-line); color: #706a63; font: 700 .38rem/1 var(--intro-font-body); text-align: center; }
.intro-equipment-parts span:last-child { border-right: 0; }
.equipment-modal-open { overflow: hidden; }

.intro-market {
    position: relative;
    z-index: 1;
    min-height: 920px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--intro-line);
    background: #070708;
    content-visibility: auto;
    contain-intrinsic-block-size: 920px;
}
.intro-market-media,
.intro-market-shade { position: absolute; inset: 0; }
.intro-market-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.intro-market-shade {
    background:
        linear-gradient(90deg, #070708 2%, rgba(7,7,8,.9) 38%, rgba(7,7,8,.18) 70%, rgba(7,7,8,.72) 100%),
        linear-gradient(180deg, #050506, transparent 18%, transparent 78%, #070708);
}

.intro-market-lightning { position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: .34; mix-blend-mode: screen; }
.intro-market-lightning i { position: absolute; width: 1px; height: 42%; top: 4%; right: 30%; background: linear-gradient(transparent,rgba(141,97,255,.62),rgba(126,231,255,.28),transparent); filter: drop-shadow(0 0 7px var(--intro-violet)); transform: rotate(27deg); animation: intro-energy-flash 6s steps(1,end) infinite; }
.intro-market-lightning i:nth-child(2) { right: 21%; height: 31%; transform: rotate(-18deg); animation-delay: -2.1s; }
.intro-market-lightning i:nth-child(3) { top: 43%; right: 39%; height: 27%; transform: rotate(48deg); animation-delay: -4.3s; }
.intro-market-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr); align-items: center; gap: clamp(3rem, 8vw, 9rem); padding: 9rem 0; }
.intro-section-copy h2,
.intro-section-heading h2,
.intro-world-copy h2 {
    margin: 1.1rem 0 1.4rem;
    font: 600 clamp(2.5rem, 4.7vw, 5.4rem)/1 var(--intro-font-display);
    letter-spacing: -.045em;
    text-transform: uppercase;
    text-wrap: balance;
}
.intro-section-copy > p { max-width: 650px; margin: 0 0 1.1rem; color: #b4aea4; font-size: 1rem; line-height: 1.8; }
.intro-market-note { padding-left: 1rem; border-left: 2px solid var(--intro-gold); color: #89847c !important; font-size: .78rem !important; }
.intro-text-link { display: inline-flex; align-items: center; gap: .85rem; margin-top: 1rem; color: var(--intro-gold-pale); font: 700 .62rem/1 var(--intro-font-body); letter-spacing: .18em; text-decoration: none; }
.intro-text-link span { font-size: 1.2rem; transition: transform .2s ease; }
.intro-text-link:hover span { transform: translateX(.35rem); }

.intro-market-panel {
    position: relative;
    min-height: 590px;
    padding: 1.3rem;
    border: 1px solid rgba(217,183,101,.34);
    background: linear-gradient(145deg, rgba(18,15,12,.97), rgba(6,6,8,.96));
    box-shadow: 0 35px 90px rgba(0,0,0,.55), inset 0 0 80px rgba(141,97,255,.04);
}
.intro-market-panel::before,
.intro-market-panel::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    border-color: var(--intro-gold-pale);
    opacity: .72;
}
.intro-market-panel::before { top: 8px; left: 8px; border-top: 1px solid; border-left: 1px solid; }
.intro-market-panel::after { right: 8px; bottom: 8px; border-right: 1px solid; border-bottom: 1px solid; }
.intro-panel-energy { position: absolute; inset: -1px; overflow: hidden; pointer-events: none; }
.intro-panel-energy::before { content: ""; position: absolute; top: 0; left: -35%; width: 28%; height: 1px; background: linear-gradient(90deg,transparent,#fff,var(--intro-violet),transparent); box-shadow: 0 0 14px var(--intro-violet); animation: intro-panel-scan 4.2s ease-in-out infinite; }
.intro-panel-energy::after { content: ""; position: absolute; right: 0; bottom: -35%; width: 1px; height: 28%; background: linear-gradient(transparent,var(--intro-cyan),transparent); box-shadow: 0 0 12px var(--intro-cyan); animation: intro-panel-scan-vertical 5.1s 1s ease-in-out infinite; }
.intro-panel-top { display: flex; justify-content: space-between; align-items: center; padding: .65rem .6rem 1rem; border-bottom: 1px solid var(--intro-line); color: #888278; font-size: .52rem; letter-spacing: .2em; }
.intro-panel-top span { display: flex; align-items: center; gap: .6rem; color: var(--intro-gold-pale); }
.intro-panel-top i { width: 7px; height: 7px; border-radius: 50%; background: var(--intro-violet); box-shadow: 0 0 12px var(--intro-violet); }
.intro-item-visual { position: relative; display: grid; place-items: center; height: 280px; overflow: hidden; }
.intro-item-halo { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(141,97,255,.24), rgba(217,183,101,.08) 38%, transparent 68%); filter: blur(3px); animation: intro-gate-pulse 3s ease-in-out infinite; }
.intro-item-rings { position: absolute; width: 210px; height: 210px; border: 1px solid rgba(217,183,101,.25); border-radius: 50%; box-shadow: inset 0 0 0 28px rgba(217,183,101,.02), 0 0 0 28px rgba(141,97,255,.025); animation: intro-ring 15s linear infinite; }
.intro-item-rings::before,
.intro-item-rings::after { content: ""; position: absolute; inset: 18px; border: 1px dashed rgba(126,231,255,.18); border-radius: 50%; }
.intro-item-rings::after { inset: -14px; border-color: rgba(217,183,101,.12); }
.intro-item-crystal {
    position: relative;
    width: 78px;
    height: 138px;
    clip-path: polygon(50% 0, 91% 25%, 78% 83%, 50% 100%, 18% 82%, 7% 27%);
    background: linear-gradient(118deg, #2b174e 4%, #8d61ff 27%, #f2daa0 49%, #7645ff 67%, #182244 96%);
    filter: drop-shadow(0 0 22px rgba(141,97,255,.7));
    animation: intro-crystal-float 3.4s ease-in-out infinite;
}
.intro-item-crystal::after { content: ""; position: absolute; inset: 8px 28px 16px 12px; clip-path: polygon(35% 0, 100% 20%, 72% 100%, 0 70%); background: rgba(255,255,255,.35); mix-blend-mode: screen; }
.intro-panel-copy { padding: 0 1rem 1.3rem; }
.intro-panel-copy small { color: var(--intro-gold); font-size: .5rem; letter-spacing: .22em; }
.intro-panel-copy h3 { margin: .55rem 0 .65rem; font: 600 1.55rem/1.2 var(--intro-font-display); }
.intro-panel-copy p { margin: 0; color: #969087; font-size: .78rem; line-height: 1.7; }
.intro-panel-tags { display: flex; flex-wrap: wrap; gap: .45rem; padding: 1rem; border-top: 1px solid var(--intro-line); }
.intro-panel-tags span { padding: .45rem .55rem; border: 1px solid rgba(217,183,101,.2); color: #8e887f; font-size: .45rem; letter-spacing: .14em; }

.intro-journey { position: relative; z-index: 1; padding: 9rem 0; background: linear-gradient(180deg,#070708,#0b0a0b 52%,#070708); content-visibility: auto; contain-intrinsic-block-size: 900px; }
.intro-journey-energy { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .28; }
.intro-journey-energy i { position: absolute; width: 42vw; aspect-ratio: 1; border: 1px solid rgba(141,97,255,.18); border-radius: 50%; filter: blur(.2px); animation: intro-ring 30s linear infinite; }
.intro-journey-energy i::before { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(217,183,101,.17); border-radius: 50%; }
.intro-journey-energy i:nth-child(1) { top: -31vw; left: -13vw; }
.intro-journey-energy i:nth-child(2) { right: -19vw; bottom: -30vw; animation-direction: reverse; animation-duration: 38s; }
.intro-journey-energy i:nth-child(3) { top: 27%; left: 37%; width: 24vw; opacity: .45; animation-duration: 24s; }
.intro-section-heading { max-width: 850px; margin-bottom: 3.5rem; }
.intro-section-heading > p { margin: 0; color: var(--intro-muted); }
.intro-steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--intro-line); border-bottom: 1px solid var(--intro-line); }
.intro-steps article { position: relative; min-height: 370px; padding: 3.2rem clamp(1.4rem,2.5vw,2.6rem); border-right: 1px solid var(--intro-line); background: rgba(255,255,255,.012); transition: background .35s ease, transform .35s ease; }
.intro-steps article:last-child { border-right: 0; }
.intro-steps article:hover { z-index: 2; background: linear-gradient(145deg, rgba(217,183,101,.09), rgba(141,97,255,.04)); transform: translateY(-8px); }
.intro-steps article:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 50%; right: -12px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--intro-line); color: var(--intro-gold); background: #09090a; font-size: .65rem; transform: translateY(-50%) rotate(-45deg); }
.intro-step-number { position: absolute; top: 1.2rem; right: 1.3rem; color: rgba(217,183,101,.28); font: 600 3rem/1 var(--intro-font-display); }
.intro-step-icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 3.5rem; border: 1px solid var(--intro-line); color: var(--intro-gold-pale); font-size: 1.8rem; transform: rotate(45deg); }
.intro-step-icon::first-line { transform: rotate(-45deg); }
.intro-steps small { color: var(--intro-gold); font-size: .52rem; letter-spacing: .24em; }
.intro-steps h3 { margin: .7rem 0 1rem; font: 600 1.45rem/1.2 var(--intro-font-display); }
.intro-steps p { margin: 0; color: #8e8981; font-size: .88rem; }

.intro-classes { position: relative; z-index: 1; padding: 8.5rem 0 10rem; border-top: 1px solid rgba(255,255,255,.03); background: #070708; content-visibility: auto; contain-intrinsic-block-size: 930px; }
.intro-section-heading-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.42fr); align-items: end; gap: 3rem; max-width: none; }
.intro-section-heading-split > p { padding: 0 0 .8rem 2rem; border-left: 1px solid var(--intro-line); }
.intro-pvp-compare { border: 1px solid rgba(217,183,101,.2); background: #09090b; box-shadow: 0 32px 90px rgba(0,0,0,.38); }
.intro-class-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-bottom: 1px solid var(--intro-line); }
.intro-class-tabs button { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .6rem; min-width: 0; min-height: 74px; padding: .75rem 1rem; border: 0; border-right: 1px solid var(--intro-line); color: #7d776f; background: #070708; text-align: left; cursor: pointer; transition: color .25s ease, background .25s ease; }
.intro-class-tabs button:last-child { border-right: 0; }
.intro-class-tabs button:hover,
.intro-class-tabs button:focus-visible { color: var(--intro-paper); background: rgba(217,183,101,.055); }
.intro-class-tabs button[aria-selected="true"] { color: var(--intro-gold-pale); background: linear-gradient(180deg,rgba(217,183,101,.12),rgba(141,97,255,.035)); box-shadow: inset 0 -2px var(--intro-gold); }
.intro-class-tabs small { color: rgba(217,183,101,.46); font: 600 .44rem/1 var(--intro-font-body); }
.intro-class-tabs b { font: 700 .72rem/1 var(--intro-font-display); letter-spacing: .12em; }
.intro-class-tabs span { overflow: hidden; font-size: .52rem; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.intro-class-stage { display: grid; grid-template-columns: minmax(360px,.82fr) minmax(0,1fr); min-height: 620px; overflow: hidden; }
.intro-class-stage figure { position: relative; min-height: 620px; margin: 0; overflow: hidden; border-right: 1px solid var(--intro-line); background: #070708; }
.intro-class-stage figure > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.9) brightness(.82); transform: scale(1.015); transition: opacity .22s ease, transform .65s cubic-bezier(.2,.72,.2,1), filter .35s ease; }
.intro-class-stage.is-switching figure > img { opacity: .28; transform: scale(1.045); }
.intro-class-stage-shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 34%,rgba(5,5,6,.16) 58%,rgba(5,5,6,.94)),linear-gradient(90deg,transparent 58%,rgba(5,5,6,.52)); }
.intro-class-stage figcaption { position: absolute; right: 1.2rem; bottom: 1.15rem; left: 1.2rem; display: flex; justify-content: space-between; align-items: center; color: var(--intro-gold-pale); }
.intro-class-stage figcaption small { font: 700 .47rem/1 var(--intro-font-body); letter-spacing: .2em; }
.intro-class-stage figcaption b { font: 600 .62rem/1 var(--intro-font-display); letter-spacing: .12em; }
.intro-class-profile { position: relative; display: flex; justify-content: center; flex-direction: column; padding: clamp(2.5rem,6vw,6rem); background: radial-gradient(circle at 100% 0,rgba(141,97,255,.09),transparent 30%); }
.intro-class-profile::before { content: "PVP"; position: absolute; right: -1rem; bottom: -.12em; color: rgba(255,255,255,.018); font: 800 clamp(9rem,20vw,20rem)/.8 var(--intro-font-display); pointer-events: none; }
.intro-class-profile h3 { position: relative; margin: 1rem 0 1.1rem; font: 600 clamp(2.7rem,5vw,5.3rem)/.92 var(--intro-font-display); letter-spacing: -.055em; text-transform: uppercase; }
.intro-class-profile > p { position: relative; max-width: 650px; margin: 0; color: #aaa399; line-height: 1.78; }
.intro-class-profile dl { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 2.5rem 0 1rem; border-top: 1px solid var(--intro-line); border-bottom: 1px solid var(--intro-line); }
.intro-class-profile dl div { min-width: 0; padding: 1.25rem 1rem; border-right: 1px solid var(--intro-line); }
.intro-class-profile dl div:first-child { padding-left: 0; }
.intro-class-profile dl div:last-child { border-right: 0; }
.intro-class-profile dt { color: #736d65; font: 700 .44rem/1 var(--intro-font-body); letter-spacing: .2em; }
.intro-class-profile dd { margin: .55rem 0 0; color: #e0d8ca; font-size: .76rem; }

.intro-world { position: relative; z-index: 1; min-height: 880px; display: grid; place-items: center; overflow: hidden; border-top: 1px solid var(--intro-line); content-visibility: auto; contain-intrinsic-block-size: 880px; }
.intro-world > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-world-shade { position: absolute; inset: 0; background: linear-gradient(180deg,#070708,rgba(4,5,9,.18) 32%,rgba(4,5,9,.44) 68%,#050506), radial-gradient(circle at 50% 42%, transparent, rgba(4,5,9,.48) 72%); }
.intro-world-portal { position: absolute; z-index: 1; top: 48%; left: 50%; width: min(78vw,820px); aspect-ratio: 1; opacity: .46; transform: translate(-50%,-50%); pointer-events: none; mix-blend-mode: screen; }
.intro-world-portal i { position: absolute; border-radius: 50%; border: 1px solid rgba(217,183,101,.28); box-shadow: inset 0 0 40px rgba(141,97,255,.05),0 0 30px rgba(141,97,255,.04); }
.intro-world-portal i:nth-child(1) { inset: 0; border-style: dashed; animation: intro-ring 46s linear infinite; }
.intro-world-portal i:nth-child(2) { inset: 12%; border-color: rgba(141,97,255,.35); animation: intro-ring-reverse 30s linear infinite; }
.intro-world-portal i:nth-child(3) { inset: 26%; border-style: dashed; border-color: rgba(126,231,255,.22); animation: intro-ring 19s linear infinite; }
.intro-world-portal b { position: absolute; inset: 38%; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.18),rgba(141,97,255,.12) 24%,transparent 68%); filter: blur(4px); animation: intro-sigil-pulse 3.6s ease-in-out infinite; }
.intro-world-copy { position: relative; z-index: 2; width: min(900px, calc(100% - 2.5rem)); text-align: center; }
.intro-world-copy > img { width: min(430px, 70vw); height: 260px; margin-bottom: -3.8rem; object-fit: contain; filter: drop-shadow(0 20px 38px rgba(0,0,0,.45)); }
.intro-world-copy h2 { margin-left: auto; margin-right: auto; }
.intro-world-copy > p { max-width: 660px; margin: 0 auto; color: #c1bbb0; }
.intro-world-actions { justify-content: center; }
.intro-final-oath { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 2.1rem auto 0; color: var(--intro-gold-pale); font: 700 .5rem/1 var(--intro-font-body); letter-spacing: .22em; }
.intro-final-oath i { width: 28px; height: 1px; background: linear-gradient(90deg,var(--intro-gold),var(--intro-violet)); }
.intro-final-note { display: block; margin-top: 1.35rem; color: rgba(243,238,227,.48); font: 700 .48rem/1.5 var(--intro-font-body); letter-spacing: .2em; }
.intro-world-copy .intro-btn-primary { position: relative; overflow: hidden; }
.intro-world-copy .intro-btn-primary::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -35%; width: 24%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.44),transparent); transform: skewX(-18deg); transition: left .75s cubic-bezier(.2,.72,.2,1); }
.intro-world-copy .intro-btn-primary:hover::after,
.intro-world-copy .intro-btn-primary:focus-visible::after { left: 116%; }

.intro-footer { position: relative; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; min-height: 120px; padding: 1.5rem clamp(1.25rem,4vw,5rem); border-top: 1px solid var(--intro-line); color: #6f6a62; background: #040405; font-size: .57rem; letter-spacing: .13em; text-transform: uppercase; }
.intro-footer > a { justify-self: start; }
.intro-footer img { width: 48px; height: 48px; object-fit: contain; opacity: .72; }
.intro-footer p { margin: 0; text-align: center; }
.intro-footer > span { justify-self: end; max-width: 380px; text-align: right; }

[data-reveal] { opacity: 1; transform: none; }
.has-js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.has-js [data-reveal][data-delay="2"] { transition-delay: .14s; }
.has-js [data-reveal][data-delay="3"] { transition-delay: .28s; }
.has-js [data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes intro-stars-drift { to { transform: translate3d(-110px,70px,0); } }
@keyframes intro-gate-pulse { 50% { opacity: .7; transform: scale(1.08); } }
@keyframes intro-logo-awake { from { opacity: 0; transform: scale(.86); filter: blur(10px) drop-shadow(0 0 0 transparent); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-gate-character { from { opacity: 0; transform: scale(1.09) translate3d(2.5%,1%,0); filter: brightness(.42) saturate(.55) blur(5px); } 36% { opacity: .5; } to { opacity: .78; transform: scale(1.025); filter: brightness(.78) saturate(.9); } }
@keyframes intro-gate-light { 0%,12% { opacity: 0; transform: rotate(18deg) scaleY(.1); } 28% { opacity: .8; } 55% { opacity: .22; } 100% { opacity: 0; transform: rotate(14deg) scaleY(1); } }
@keyframes intro-gate-copy { from { opacity: 0; transform: translateY(18px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-gate-title { from { opacity: 0; transform: translateY(48px) skewY(4deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-gate-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes intro-hero-awaken { from { opacity: .35; transform: scale(1.075); filter: brightness(.56) saturate(.62); } to { opacity: 1; transform: scale(1); filter: none; } }
@keyframes intro-content-arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes intro-audio-bar { to { height: 12px; opacity: .55; } }
@keyframes intro-pulse { 50% { opacity: .45; box-shadow: 0 0 0 9px rgba(141,97,255,0), 0 0 24px var(--intro-violet); } }
@keyframes intro-scroll { 0%,100% { transform: scaleY(.55); transform-origin: top; opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes intro-ring { to { transform: rotate(360deg); } }
@keyframes intro-crystal-float { 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes intro-ring-reverse { to { transform: rotate(-360deg); } }
@keyframes intro-fx-bars { to { height: 3px; opacity: .42; } }
@keyframes intro-aurora-flow { 0% { transform: translate3d(-8%,-4%,0) rotate(-14deg) scale(.86); opacity: .32; } 100% { transform: translate3d(10%,9%,0) rotate(-8deg) scale(1.14); opacity: .82; } }
@keyframes intro-ray-breathe { 0% { opacity: .15; transform: rotate(17deg) translateX(-55%) scaleX(.6); } 100% { opacity: .68; transform: rotate(13deg) translateX(25%) scaleX(1.25); } }
@keyframes intro-sigil-pulse { 50% { opacity: .48; transform: scale(1.08); box-shadow: 0 0 60px rgba(141,97,255,.24); } }
@keyframes intro-shard-float { 0%,100% { transform: translate3d(0,12px,0) rotate(0deg); opacity: .12; } 42% { opacity: .7; } 50% { transform: translate3d(18px,-28px,0) rotate(170deg); } }
@keyframes intro-title-arrive { from { opacity: 0; transform: translate3d(0,72px,0) skewY(5deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes intro-text-shimmer { 0%,72% { background-position: 100% 50%; } 100% { background-position: -80% 50%; } }
@keyframes intro-energy-flash { 0%,7%,11%,100% { opacity: 0; } 8% { opacity: .24; } 9% { opacity: .9; } 10% { opacity: .16; } }
@keyframes intro-panel-scan { 0%,18% { left: -35%; opacity: 0; } 30% { opacity: 1; } 72% { opacity: 1; } 84%,100% { left: 108%; opacity: 0; } }
@keyframes intro-panel-scan-vertical { 0%,20% { bottom: -35%; opacity: 0; } 34% { opacity: .8; } 76% { opacity: .8; } 90%,100% { bottom: 108%; opacity: 0; } }

/* Só a seção no centro da tela mantém seus efeitos contínuos em movimento. */
main > section:not(.is-fx-current) *,
main > section:not(.is-fx-current) *::before,
main > section:not(.is-fx-current) *::after {
    animation-play-state: paused !important;
}

/* Após 8 s sem interação o quadro permanece vivo em baixa cadência, mas as
   animações CSS param. Após 45 s o canvas também congela até nova atividade. */
.intro-idle *,
.intro-idle *::before,
.intro-idle *::after,
.intro-suspended *,
.intro-suspended *::before,
.intro-suspended *::after {
    animation-play-state: paused !important;
}
.intro-idle .intro-cursor-aura,
.intro-suspended .intro-cursor-aura { opacity: 0; }
.intro-deep-idle .intro-fx-canvas { opacity: .76; }

.fx-paused .intro-fx-canvas,
.fx-paused .intro-energy-vignette { opacity: 0; }
.fx-paused .intro-aurora,
.fx-paused .intro-divine-rays,
.fx-paused .intro-celestial-sigil,
.fx-paused .intro-floating-shards,
.fx-paused .intro-market-lightning,
.fx-paused .intro-panel-energy,
.fx-paused .intro-journey-energy,
.fx-paused .intro-world-portal { opacity: 0; }
.fx-paused *,
.fx-paused *::before,
.fx-paused *::after { animation-play-state: paused !important; }

@media (max-width: 1100px) {
    .intro-nav { grid-template-columns: 1fr auto; }
    .intro-nav nav { display: none; }
    .intro-hero-copy { width: min(660px, 68vw); }
    .intro-discovery-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
    .intro-discovery-card.is-featured { min-height: 500px; grid-column: span 6; grid-row: auto; }
    .intro-discovery-card,
    .intro-discovery-card:nth-child(2),
    .intro-discovery-card:nth-child(3) { grid-column: span 3; }
    .intro-discovery-card:nth-last-child(-n+2) { grid-column: span 3; }
    .intro-market-grid { grid-template-columns: minmax(0,1fr) minmax(360px,.78fr); gap: 3rem; }
    .intro-equipment-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .intro-equipment-tabs span { display: none; }
    .intro-class-tabs span { display: none; }
    .intro-class-stage { grid-template-columns: minmax(330px,.72fr) minmax(0,1fr); }
    .intro-fx-toggle { display: none; }
    .intro-celestial-sigil { left: 63%; width: 58vw; }
}

@media (max-width: 760px) {
    .intro-nav { min-height: 70px; padding: 0 1rem; }
    .intro-nav-brand img { width: 42px; height: 42px; }
    .intro-nav-brand small { display: none; }
    .intro-nav-enter { padding: .72rem .8rem; }
    .intro-nav-enter span { font-size: .5rem; }
    .intro-audio-toggle { min-width: 40px; justify-content: center; padding: .62rem; }
    .intro-audio-toggle > b { display: none; }
    .intro-cursor-aura { display: none; }
    .intro-scroll-charge { right: 5px; opacity: .7; }
    .intro-divine-rays { inset: -20% -30% 0 2%; opacity: .5; }
    .intro-celestial-sigil { top: 31%; left: 72%; width: 90vw; opacity: .21; }
    .intro-floating-shards i:nth-child(n+9) { display: none; }
    .intro-hero { min-height: 900px; align-items: flex-end; }
    .intro-hero-media { inset: 0; }
    .intro-hero-media img { object-position: 62% center; }
    .intro-hero-shade { background: linear-gradient(180deg,rgba(3,3,4,.3),rgba(3,3,4,.82) 52%,#050506 96%), linear-gradient(90deg,rgba(3,3,4,.62),transparent 75%); }
    .intro-hero-content { width: calc(100% - 2rem); padding: 8rem 0 6rem; }
    .intro-hero-copy { width: 100%; }
    .intro-eyebrow { font-size: .52rem; letter-spacing: .22em; }
    .intro-eyebrow i:last-child { display: none; }
    .intro-hero h1 { margin-top: 1.4rem; font-size: clamp(3.25rem,17vw,5rem); }
    .intro-hero-copy > p { font-size: .9rem; line-height: 1.7; }
    .intro-fps-showcase { grid-template-columns: 1fr; grid-template-areas: "label" "modes" "note"; gap: .65rem; text-align: center; }
    .intro-fps-showcase > span { justify-content: center; padding-right: 0; border-right: 0; }
    .intro-fps-showcase > small { text-align: center; }
    .intro-fps-showcase strong { justify-content: center; font-size: .88rem; }
    .intro-btn { width: 100%; min-width: 0; }
    .intro-hero-index { display: none; }
    .intro-scroll { left: auto; right: 1rem; transform: none; }
    .intro-hero-hooks { display: flex; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .intro-hero-hooks::-webkit-scrollbar { display: none; }
    .intro-hero-hooks a { flex: 0 0 min(78vw,230px); scroll-snap-align: start; }
    .intro-section-wrap { width: calc(100% - 2rem); }
    .intro-discovery { padding: 7rem 0; contain-intrinsic-block-size: 2350px; }
    .intro-discovery-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: .65rem; }
    .intro-discovery-card,
    .intro-discovery-card:nth-child(2),
    .intro-discovery-card:nth-child(3),
    .intro-discovery-card:last-child { min-height: 340px; grid-column: 1; }
    .intro-discovery-card.is-featured { min-height: 470px; grid-column: 1; }
    .intro-discovery-card.is-featured .intro-discovery-copy h3 { font-size: clamp(2.6rem,13vw,4.1rem); }
    .intro-discovery-copy p { font-size: .76rem; }
    .intro-equipment { contain-intrinsic-block-size: 2600px; }
    .intro-equipment-summary div { justify-content: center; flex-direction: column; gap: .4rem; padding: .8rem .35rem; text-align: center; }
    .intro-equipment-summary span { font-size: .38rem; letter-spacing: .1em; }
    .intro-equipment-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .intro-equipment-tabs::-webkit-scrollbar { display: none; }
    .intro-equipment-tabs button { flex: 0 0 96px; grid-template-columns: 1fr auto; scroll-snap-align: start; }
    .intro-equipment-tabs span { display: none; }
    .intro-equipment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .intro-equipment-slot { grid-template-rows: 165px auto auto; min-height: 305px; padding: .85rem; }
    .intro-equipment-mannequin { transform: scale(.88); transform-origin: center top; }
    .intro-equipment-dialog-grid { grid-template-columns: 1fr; }
    .intro-equipment-dialog-stage { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--intro-line); }
    .intro-equipment-dialog-stage .intro-equipment-mannequin { transform: scale(1); }
    .intro-equipment-dialog-copy { padding: 2.5rem 1.25rem; }
    .intro-market { min-height: 0; }
    .intro-market-media img { object-position: 68% center; opacity: .6; }
    .intro-market-shade { background: linear-gradient(180deg,#070708 4%,rgba(7,7,8,.72) 24%,rgba(7,7,8,.55) 58%,#070708 96%); }
    .intro-market-grid { grid-template-columns: 1fr; padding: 7rem 0; }
    .intro-section-copy h2,
    .intro-section-heading h2,
    .intro-world-copy h2 { font-size: clamp(2.35rem,11vw,3.8rem); }
    .intro-market-panel { min-height: 540px; }
    .intro-journey { padding: 7rem 0; }
    .intro-steps { grid-template-columns: 1fr; }
    .intro-steps article { min-height: 330px; border-right: 0; border-bottom: 1px solid var(--intro-line); }
    .intro-steps article:last-child { border-bottom: 0; }
    .intro-steps article:not(:last-child)::after { top: auto; right: 50%; bottom: -12px; transform: translateX(50%) rotate(45deg); }
    .intro-classes { padding: 7rem 0; }
    .intro-section-heading-split { grid-template-columns: 1fr; gap: 1rem; }
    .intro-section-heading-split > p { padding: 0; border: 0; }
    .intro-class-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .intro-class-tabs::-webkit-scrollbar { display: none; }
    .intro-class-tabs button { flex: 0 0 108px; grid-template-columns: auto 1fr; scroll-snap-align: start; }
    .intro-class-tabs span { display: none; }
    .intro-class-stage { grid-template-columns: 1fr; }
    .intro-class-stage figure { min-height: 480px; border-right: 0; border-bottom: 1px solid var(--intro-line); }
    .intro-class-profile { padding: 2.5rem 1.35rem 3rem; }
    .intro-class-profile dl { grid-template-columns: 1fr; }
    .intro-class-profile dl div,
    .intro-class-profile dl div:first-child { padding: 1rem 0; border-right: 0; border-bottom: 1px solid var(--intro-line); }
    .intro-class-profile dl div:last-child { border-bottom: 0; }
    .intro-world { min-height: 780px; }
    .intro-world > img { object-position: 52% center; }
    .intro-world-copy > img { margin-bottom: -2.8rem; }
    .intro-final-oath { flex-wrap: wrap; gap: .65rem; line-height: 1.7; }
    .intro-final-oath i { width: 14px; }
    .intro-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .intro-footer > a,
    .intro-footer > span { justify-self: center; text-align: center; }
}

@media (max-width: 420px) {
    .intro-nav-brand span { display: none; }
    .intro-nav-enter { gap: .5rem; }
    .intro-language__menu { right: -4.4rem; }
    .intro-gate-logo { width: 68px; height: 68px; }
    .intro-gate-copy strong { font-size: clamp(2.65rem,14vw,4rem); }
    .intro-gate-copy p { font-size: .47rem; letter-spacing: .27em; }
    .intro-hero-actions { display: grid; }
    .intro-discovery-card,
    .intro-discovery-card:nth-child(2),
    .intro-discovery-card:nth-child(3),
    .intro-discovery-card:last-child { min-height: 370px; }
    .intro-discovery-card.is-featured { min-height: 500px; }
    .intro-market-panel { padding: .85rem; }
    .intro-item-visual { height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .has-js [data-reveal] { opacity: 1; transform: none; }
    .intro-hero-media { transform: none !important; }
    .intro-cursor-aura { display: none; }
    .eter-intro-page *,
    .eter-intro-page *::before,
    .eter-intro-page *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   AS 4 LINHAGENS NOVAS EM BETA (25/09/2026) -- partials/classes-beta.phtml
   Cada cartao usa a COR DE ENERGIA da linhagem no jogo (--ebc-cor = "r, g, b").
   ========================================================================== */
.eter-beta-classes {
    margin: 34px auto 0;
    max-width: 1180px;
    padding: 22px 22px 24px;
    border: 1px solid rgba(201, 162, 39, .28);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20, 14, 34, .92), rgba(9, 6, 16, .96));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 210, 140, .06);
}
.eter-beta-classes .ebc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.eter-beta-classes .ebc-head strong {
    display: block; font-family: "Cinzel", serif; font-size: 20px; letter-spacing: .06em; color: #F3E6C4;
}
.eter-beta-classes .ebc-head p { margin: 4px 0 0; color: #B9B2CC; font-size: 14px; line-height: 1.5; }
.eter-beta-classes .ebc-badge {
    flex: 0 0 auto; padding: 7px 14px; border-radius: 6px;
    font: 800 13px/1 "Cinzel", serif; letter-spacing: .18em; color: #fff;
    background: linear-gradient(180deg, #E1332A, #8E1414);
    box-shadow: 0 0 18px rgba(225, 51, 42, .55);
    animation: ebc-pulso 2.2s ease-in-out infinite;
}
.eter-beta-classes .ebc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.eter-beta-classes .ebc-card {
    position: relative; overflow: hidden; padding: 18px 16px 16px; border-radius: 10px;
    border: 1px solid rgba(var(--ebc-cor), .38);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--ebc-cor), .20), transparent 60%),
        linear-gradient(180deg, rgba(16, 11, 26, .95), rgba(7, 5, 12, .98));
}
.eter-beta-classes .ebc-card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--ebc-cor), .9), transparent);
}
.eter-beta-classes .ebc-tag {
    position: absolute; top: 12px; right: 12px; padding: 3px 7px; border-radius: 4px;
    font: 800 10px/1 "Cinzel", serif; letter-spacing: .14em; color: #fff; background: #B3231C;
}
.eter-beta-classes .ebc-sigla {
    display: block; font: 800 30px/1 "Cinzel", serif; letter-spacing: .08em;
    color: rgb(var(--ebc-cor)); text-shadow: 0 0 18px rgba(var(--ebc-cor), .55);
}
.eter-beta-classes .ebc-card h4 { margin: 10px 0 2px; font-family: "Cinzel", serif; font-size: 16px; color: #F3E6C4; }
.eter-beta-classes .ebc-card small {
    display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ebc-cor), .95);
}
.eter-beta-classes .ebc-card p { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #B9B2CC; }
@keyframes ebc-pulso { 0%, 100% { box-shadow: 0 0 10px rgba(225, 51, 42, .4); } 50% { box-shadow: 0 0 24px rgba(225, 51, 42, .85); } }
@media (max-width: 900px) { .eter-beta-classes .ebc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    .eter-beta-classes { padding: 16px; }
    .eter-beta-classes .ebc-grid { grid-template-columns: 1fr; }
    .eter-beta-classes .ebc-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .eter-beta-classes .ebc-badge { animation: none; } }