:root { color-scheme: dark; --ink: #faf8ff; --muted: #ded7ed; --accent: #a8f5ee; --scene-a: #142754; --scene-b: #592b91; --scene-c: #226f96; --art-hue: 0deg; font-family: 'DM Sans', sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #151040; color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus { position: fixed; z-index: 20; padding: 16px; background: #151040; }
.intro { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; background: #171537; }
.intro[data-scene="strike"] { --scene-a: #303157; --scene-b: #98523a; --scene-c: #87702b; --accent: #ffdf95; --art-hue: 185deg; }
.intro[data-scene="valorant"] { --scene-a: #24123f; --scene-b: #962660; --scene-c: #5846b6; --accent: #ffb8cd; --art-hue: 72deg; }
.scene-wash { position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse at 84% 24%, var(--scene-c), transparent 61%), radial-gradient(ellipse at 35% 100%, var(--scene-b), transparent 70%), linear-gradient(125deg, var(--scene-a), #1b103e); transition: background 600ms; }
.scene-wash::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, #100e2a55, transparent 65%), radial-gradient(ellipse at 72% 67%, #8cd5e52e, transparent 36%); }
.scene-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.38' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.intro-header { display: flex; align-items: center; gap: 24px; padding: 12px 5vw 0; min-height: 116px; z-index: 2; }
.intro-brand { display: block; flex: 0 0 auto; }
.intro-brand img { display: block; width: 180px; height: 100px; object-fit: contain; }
.brand-note { border-left: 1px solid #ffffff30; padding-left: 24px; font-size: 10px; line-height: 1.7; letter-spacing: 2px; color: #eee9f1bd; }
.intro-nav { margin-left: auto; display: flex; align-items: center; gap: 36px; font-size: 13px; font-weight: 600; }
.intro-nav a { padding: 13px 0; }
.intro-nav a span { display: inline-block; margin-left: 10px; transition: transform 200ms; }
.intro-nav a:hover span { transform: translate(2px, -2px); }
.intro-nav .nav-login { border-bottom: 1px solid #ffffff50; }
.intro-main { flex: 1; position: relative; display: flex; align-items: center; padding: 35px 7vw 64px; min-height: 640px; outline: none; }
.intro-copy { position: relative; z-index: 1; width: 64%; }
.intro-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; color: #edeaf5; font-size: 10px; font-weight: 600; letter-spacing: 2.7px; }
.kicker-line { display: block; width: 35px; height: 2px; background: var(--accent); }
h1 { margin: 0 0 34px; font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 800; font-size: clamp(100px, 12.4vw, 190px); line-height: .84; letter-spacing: -.035em; }
h1 > span { display: inline-block; }
.title-outline { color: transparent; -webkit-text-stroke: 1.5px #faf8ff; }
.title-dot { color: var(--accent); -webkit-text-stroke: 0; }
.intro-story { display: flex; align-items: flex-start; gap: 22px; max-width: 425px; }
.story-index { padding-top: 4px; font-family: monospace; color: var(--accent); font-size: 11px; white-space: nowrap; }
.intro-story p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.intro-actions { display: flex; align-items: center; gap: 28px; margin-top: 25px; }
.enter-link { display: inline-flex; align-items: center; gap: 20px; font-weight: 700; font-size: 14px; white-space: nowrap; }
.enter-arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #1a1730; font-size: 23px; transition: transform 200ms; }
.enter-link:hover .enter-arrow { transform: rotate(45deg); }
.join-link { font-size: 12px; color: #e8e1f2; border-bottom: 1px solid #ffffff40; padding: 8px 0; white-space: nowrap; }
.join-link span { margin-left: 8px; }
.scene-art { position: absolute; width: min(65vw, 950px); height: 680px; top: 50%; right: -1vw; transform: translateY(-52%); pointer-events: none; }
.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid #e4f3ff24; border-radius: 50%; }
.orbit-outer { width: 560px; height: 560px; transform: translate(-50%, -50%) rotate(-22deg) scaleX(1.18); }
.orbit-inner { width: 430px; height: 430px; transform: translate(-50%, -50%); border-style: dashed; border-color: #dceaff25; }
.orbit-label { position: absolute; font-size: 9px; letter-spacing: 2px; color: #e6e6ff8c; }
.orbit-label-top { top: 44px; left: 40%; transform: rotate(7deg); }
.orbit-label-bottom { bottom: 146px; right: 19%; }
.art-cross { position: absolute; font: 300 25px monospace; color: #ddedff80; }
.art-cross-one { left: 15%; top: 14%; }.art-cross-two { right: 12%; bottom: 18%; }
.controller-float { position: absolute; inset: 0; display: grid; place-items: center; animation: levitate 7s ease-in-out infinite; }
.controller { width: 94%; height: auto; max-height: 660px; object-fit: contain; filter: hue-rotate(var(--art-hue)) drop-shadow(0 36px 36px #08092350); transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px)) rotate(-12deg); transition: filter 500ms, transform 350ms ease-out; }
.art-word { position: absolute; right: 9%; bottom: 84px; font: 800 112px/.8 'Barlow Condensed', sans-serif; letter-spacing: .1em; color: #ffffff09; z-index: -1; }
.art-signal { position: absolute; right: 19%; bottom: 45px; display: flex; align-items: center; gap: 4px; height: 20px; }
.art-signal span { width: 2px; height: 6px; background: var(--accent); opacity: .55; }.art-signal span:nth-child(2n) { height: 13px; }.art-signal span:nth-child(3n) { height: 20px; }
.scene-caption { position: absolute; right: 5vw; bottom: 25px; display: flex; flex-direction: column; gap: 8px; text-align: right; font-size: 9px; letter-spacing: 2px; color: #f5ecffb5; }
.scene-caption strong { font: 600 25px 'Barlow Condensed', sans-serif; letter-spacing: 1px; color: var(--ink); }.caption-rule { width: 40px; height: 1px; background: var(--accent); align-self: flex-end; margin: 3px 0; }
.intro-footer { position: relative; z-index: 2; display: flex; align-items: center; min-height: 110px; gap: 30px; padding: 24px 5vw; border-top: 1px solid #ffffff25; margin: 0 2vw; }
.scene-tabs { display: flex; align-items: center; gap: 36px; }
.scene-tab { background: transparent; border: 0; padding: 14px 0; color: #d4d0e2a8; font-size: 9px; letter-spacing: 1.6px; text-align: left; position: relative; }
.scene-tab span { margin-right: 10px; font-family: monospace; color: #ede7fa88; }.scene-tab.is-active { color: var(--ink); }.scene-tab.is-active span { color: var(--accent); }
.scene-tab::after { content: ''; position: absolute; left: 0; bottom: 3px; width: 0; height: 2px; background: var(--accent); transition: width 250ms; }.scene-tab.is-active::after { width: 30px; }
.scene-navigation { margin-left: auto; display: flex; align-items: center; gap: 12px; }.slide-count { display: flex; gap: 10px; align-items: center; margin-right: 24px; }.slide-count b { font: 500 47px/.8 'Barlow Condensed', sans-serif; }.slide-count > span { font: 11px monospace; color: #ede7f9a3; }
.scene-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff45; background: transparent; font-size: 23px; transition: background 200ms; }.scene-arrow:hover { background: #ffffff18; }
.footer-note { margin-left: 25px; color: #ddd7ed9e; font-size: 8px; letter-spacing: 2px; writing-mode: vertical-rl; }
.intro.is-changing .intro-copy { animation: copy-in 450ms ease both; }
@keyframes levitate { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(9px); } }
@keyframes copy-in { from { opacity: .35; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1700px) { .intro-main { max-width: 1850px; width: 100%; margin-inline: auto; }.scene-art { right: 1vw; } }
@media (max-width: 1100px) { .brand-note, .footer-note { display: none; }.intro-main { min-height: 600px; padding-left: 6vw; }.scene-art { right: -11vw; width: 75vw; }.orbit-outer { width: 440px; height: 440px; }.orbit-inner { width: 340px; height: 340px; }.scene-tabs { gap: 22px; }.scene-tab { letter-spacing: .9px; }.scene-caption { bottom: 30px; }.intro-copy { width: 70%; } }
@media (max-width: 760px) { .intro-header { min-height: 90px; padding: 0 5vw; }.intro-brand img { width: 136px; height: 80px; }.intro-nav { gap: 20px; font-size: 11px; }.intro-nav a span { margin-left: 4px; }.intro-main { padding: 30px 7vw 30px; min-height: 760px; align-items: flex-start; }.intro-copy { width: 100%; }.intro-kicker { font-size: 8px; letter-spacing: 1.8px; margin-bottom: 22px; }h1 { font-size: clamp(88px, 18vw, 138px); margin-bottom: 24px; }.intro-story { max-width: 380px; gap: 15px; }.intro-story p { font-size: 13px; }.intro-actions { margin-top: 17px; gap: 24px; }.scene-art { top: auto; bottom: 0; right: -12%; transform: none; width: 100%; height: 430px; }.controller { width: 85%; max-height: 420px; }.orbit-outer { width: 320px; height: 320px; }.orbit-inner { width: 250px; height: 250px; }.orbit-label-top { top: 28px; left: 38%; font-size: 7px; }.orbit-label-bottom { bottom: 45px; right: 27%; font-size: 7px; }.art-word { font-size: 80px; bottom: 40px; right: 25%; }.art-signal { bottom: 30px; right: 14%; }.scene-caption { text-align: left; left: 7vw; right: auto; bottom: 28px; font-size: 8px; max-width: 120px; line-height: 1.5; }.scene-caption strong { font-size: 20px; }.caption-rule { align-self: flex-start; }.scene-caption > span:last-child { display: none; }.intro-footer { padding: 15px 5vw; min-height: 130px; gap: 15px; flex-wrap: wrap; }.scene-tabs { width: 100%; justify-content: space-between; gap: 10px; }.scene-tab { font-size: 8px; letter-spacing: .5px; }.scene-tab span { margin-right: 5px; }.scene-navigation { width: 100%; justify-content: flex-end; }.slide-count { margin-right: auto; }.slide-count b { font-size: 34px; }.scene-arrow { width: 38px; height: 38px; } }
@media (max-width: 380px) { .intro-nav { gap: 12px; }.intro-brand img { width: 110px; }h1 { font-size: 24vw; }.intro-kicker { letter-spacing: 1px; }.intro-story { gap: 10px; }.intro-main { min-height: 760px; }.scene-tabs { gap: 5px; }.scene-tab { font-size: 7px; } }
@media (max-width: 760px) { .orbit-label-top { top: 75px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; }.controller { transform: rotate(-12deg); } }