/* ============================================================ Kazzpe — "Glass Arcade" design system Pixel-arcade identity rendered through iOS Liquid Glass. ============================================================ */ :root{ /* palette — "arcade night": neon cyan/magenta over deep navy-violet */ --cy:#21e0e6; --cy-deep:#0c5a60; --mg:#ff3db4; --mg-deep:#9c1166; --vio:#8c78ff; --ink:#e9edff; --muted:#a6b0d4; --line:#2b3457; --screen:#06070c; --bezel:#0b0c10; --bg-top:#141936; --bg-bot:#0a0d1e; /* layout */ --maxw:1280px; --radius:24px; --radius-sm:14px; --radius-lg:28px; /* fonts */ --pixel:'Press Start 2P', system-ui, monospace; --sans:'Outfit', system-ui, -apple-system, Segoe UI, sans-serif; /* glass */ --glass-fill:linear-gradient(145deg, rgba(52,62,110,.58), rgba(16,20,42,.4) 55%, rgba(38,46,88,.52)); --glass-solid:#161c36; /* motion */ --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.32,.72,0,1); --ease-soft:cubic-bezier(.16,1,.3,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth; background:linear-gradient(180deg,var(--bg-top),var(--bg-bot)) var(--bg-bot)} body{ margin:0; font-family:var(--sans); color:var(--ink); font-size:16.5px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background:linear-gradient(180deg,var(--bg-top),var(--bg-bot)); background-attachment:fixed; font-feature-settings:"ss01" on, "cv11" on; } body::before{ content:""; position:fixed; inset:-30px; z-index:1; pointer-events:none; background-image: linear-gradient(rgba(160,180,255,.055) 1px,transparent 1px), linear-gradient(90deg, rgba(160,180,255,.055) 1px,transparent 1px); background-size:28px 28px; } /* film grain — fixed, pointer-none, breaks digital flatness */ body::after{ content:""; position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml;utf8,"); background-size:180px 180px; mix-blend-mode:overlay; } .bg-aurora{ position:fixed; inset:-15%; z-index:0; pointer-events:none; background: radial-gradient(32% 40% at 12% 6%, rgba(33,224,230,.32), transparent 62%), radial-gradient(36% 44% at 90% 12%, rgba(255,61,180,.3), transparent 62%), radial-gradient(42% 48% at 50% 48%, rgba(140,120,255,.22), transparent 62%), radial-gradient(40% 46% at 10% 88%, rgba(255,61,180,.2), transparent 60%), radial-gradient(40% 46% at 92% 90%, rgba(33,224,230,.22), transparent 60%); } /* WebGL aurora (fx.js) — sits where the CSS aurora is; CSS version stays as fallback until fx.js confirms a context and stamps .fx-on on */ .fx-aurora{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease-soft)} .fx-on .fx-aurora{opacity:1} .fx-on .bg-aurora{opacity:0; animation:none} /* 3D voxel ZZ intro minigame (fx.js) — full-viewport smashable wordmark */ .zz-intro{position:relative; z-index:2; min-height:100vh; min-height:100dvh; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; --zz-shake-x:0px; --zz-shake-y:0px; transform:translate3d(var(--zz-shake-x), var(--zz-shake-y), 0); transition:transform .05s linear} .zz-intro.is-hit{--zz-shake-x:0; --zz-shake-y:0} .zz-intro.is-clear .zz-stage{pointer-events:none} .zz-stage{position:absolute; inset:0; cursor:crosshair; touch-action:pan-y} .zz-stage canvas{width:100%; height:100%; display:block} /* arcade HUD */ .zz-hud{ position:absolute; top:max(18px, env(safe-area-inset-top)); left:0; right:0; z-index:3; display:flex; flex-direction:column; align-items:center; gap:12px; pointer-events:none; padding:0 20px; opacity:0; transform:translateY(-8px); transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft); } .zz-intro.is-ready .zz-hud{opacity:1; transform:none} .zz-hud__row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:center; } .zz-stat{ font-family:var(--pixel); font-size:.52rem; letter-spacing:1px; color:#c9d2f5; padding:10px 14px; border-radius:999px; background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border:1px solid rgba(160,180,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(2,4,14,.35); min-width:7.5rem; text-align:center; } .zz-stat b{color:#fff; font-weight:400} .zz-stat--score b{color:var(--cy); text-shadow:0 0 12px rgba(33,224,230,.55)} .zz-stat--combo{opacity:0; transform:scale(.85); transition:opacity .2s ease, transform .25s var(--ease-spring), border-color .2s ease, box-shadow .2s ease} .zz-stat--combo.is-on{opacity:1; transform:scale(1); border-color:rgba(255,61,180,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 0 22px rgba(255,61,180,.35)} .zz-stat--combo b{color:var(--mg); text-shadow:0 0 12px rgba(255,61,180,.6)} .zz-stat--left b{color:#eef1ff} .zz-hp{ width:min(280px, 62vw); height:10px; border-radius:4px; overflow:hidden; border:1px solid rgba(160,180,255,.28); background:rgba(0,0,0,.35); box-shadow:inset 0 1px 2px rgba(0,0,0,.4); } .zz-hp__fill{ height:100%; width:100%; transform-origin:left center; background:linear-gradient(90deg, var(--cy), var(--mg)); box-shadow:0 0 14px rgba(33,224,230,.45); transition:transform .28s var(--ease-out); } .zz-hint{position:relative; z-index:3; pointer-events:none; margin:0 0 max(28px, env(safe-area-inset-bottom)); font-family:var(--pixel); font-size:.55rem; letter-spacing:1px; color:var(--muted); text-align:center; padding:0 16px; animation:hintBob 2.2s ease-in-out infinite; transition:opacity .4s ease, transform .4s var(--ease-soft)} .zz-intro.is-playing .zz-hint, .zz-intro.is-clear .zz-hint{opacity:0; transform:translateY(8px); animation:none} @keyframes hintBob{0%,100%{transform:translateY(0); opacity:.7}50%{transform:translateY(6px); opacity:1}} /* floating smash popups */ .zz-pop{ position:absolute; z-index:4; pointer-events:none; font-family:var(--pixel); font-size:.62rem; letter-spacing:1px; color:#fff; text-shadow:0 0 10px rgba(33,224,230,.8), 0 2px 0 rgba(0,0,0,.35); animation:zzPop 700ms var(--ease-out) forwards; white-space:nowrap; } .zz-pop--combo{color:#ff9ad8; font-size:.72rem; text-shadow:0 0 14px rgba(255,61,180,.9), 0 2px 0 rgba(0,0,0,.35)} .zz-pop--big{font-size:.85rem; color:#c9fbfd} @keyframes zzPop{ 0%{opacity:0; transform:translate(-50%,-40%) scale(.6)} 18%{opacity:1; transform:translate(-50%,-70%) scale(1.12)} 100%{opacity:0; transform:translate(-50%,-140%) scale(.9)} } /* click shockwave rings */ .zz-ring{ position:absolute; z-index:2; pointer-events:none; border-radius:50%; border:2px solid rgba(33,224,230,.7); box-shadow:0 0 18px rgba(33,224,230,.45), inset 0 0 12px rgba(255,61,180,.2); animation:zzRing 520ms var(--ease-out) forwards; } @keyframes zzRing{ 0%{opacity:.9; transform:translate(-50%,-50%) scale(.15)} 100%{opacity:0; transform:translate(-50%,-50%) scale(1)} } /* spark particles */ .zz-spark{ position:absolute; z-index:3; pointer-events:none; width:6px; height:6px; border-radius:1px; background:var(--cy); box-shadow:0 0 8px currentColor; animation:zzSpark 480ms var(--ease-out) forwards; } .zz-spark--mg{background:var(--mg); color:var(--mg)} .zz-spark--cy{color:var(--cy)} @keyframes zzSpark{ 0%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0)} } /* CLEAR banner */ .zz-clear{ position:absolute; inset:0; z-index:5; pointer-events:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; opacity:0; transform:scale(.9); transition:opacity .35s var(--ease-soft), transform .45s var(--ease-spring); background:radial-gradient(50% 40% at 50% 48%, rgba(8,10,24,.35), transparent 70%); } .zz-intro.is-clear .zz-clear{opacity:1; transform:scale(1)} .zz-clear__title{ font-family:var(--pixel); font-size:clamp(1.1rem,5vw,1.8rem); letter-spacing:2px; color:#fff; text-shadow:0 0 18px rgba(33,224,230,.9), 0 0 36px rgba(255,61,180,.55), 0 3px 0 rgba(0,0,0,.4); animation:zzClearPulse 1.1s ease-in-out infinite; } .zz-clear__sub{font-family:var(--pixel); font-size:.55rem; letter-spacing:1px; color:var(--muted)} .zz-clear__score{font-family:var(--pixel); font-size:.7rem; color:var(--cy); text-shadow:0 0 12px rgba(33,224,230,.6)} @keyframes zzClearPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} /* flash on hit */ .zz-flash{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--fx,50%) var(--fy,50%), rgba(255,255,255,.22), transparent 42%); mix-blend-mode:screen; transition:opacity .08s ease; } .zz-intro.is-flash .zz-flash{opacity:1} /* while the intro is on screen the fixed nav backdrop strip stays out of the way */ .zz-live .site-nav::before{opacity:0} @media (max-width:820px){ .zz-stat{font-size:.46rem; padding:9px 12px; min-width:6.2rem} .zz-hint{font-size:.48rem; margin-bottom:max(20px, env(safe-area-inset-bottom))} } /* neon cursor glow (hover devices, fx.js) */ .fx-cursor{position:fixed; left:0; top:0; z-index:3; pointer-events:none; width:380px; height:380px; margin:-190px 0 0 -190px; border-radius:50%; mix-blend-mode:screen; opacity:0; background:radial-gradient(circle, rgba(33,224,230,.16), rgba(255,61,180,.08) 42%, transparent 70%); transition:opacity .5s var(--ease-soft)} .fx-cursor.is-active{opacity:.75} /* background motion is homepage-only — privacy keeps the static mesh */ body.home::before{will-change:transform; animation:gridDrift 28s linear infinite} body.home .bg-aurora{will-change:transform; animation:auroraDrift 42s ease-in-out infinite} @keyframes gridDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(28px,28px,0)}} @keyframes auroraDrift{ 0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1.05)} 33%{transform:translate3d(2%,-1.5%,0) rotate(2deg) scale(1.12)} 66%{transform:translate3d(-1.5%,1.5%,0) rotate(-2deg) scale(1.08)} } @keyframes floatBob{0%,100%{translate:0 0}50%{translate:0 -8px}} img{max-width:100%; display:block} a{color:inherit; text-decoration:none} h1,h2,h3{margin:0; line-height:1.1; letter-spacing:-.02em} :focus-visible{outline:2px solid var(--cy); outline-offset:3px} .skip-link{position:absolute; top:-80px; left:16px; z-index:60; font-family:var(--pixel); font-size:.55rem; padding:12px 16px; border-radius:var(--radius-sm); color:#053b3f; background:#eaf9fa; border:1px solid var(--cy); box-shadow:0 8px 20px rgba(24,14,48,.25); transition:top .2s var(--ease-out)} .skip-link:focus-visible{top:16px} .container{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px} section{padding:88px 0; position:relative; z-index:2} section[id]{scroll-margin-top:110px} .section--flush{padding-top:0} .kicker{font-family:var(--pixel); font-size:.58rem; letter-spacing:1.5px; color:var(--mg); display:inline-flex; align-items:center; gap:10px} .kicker::before{content:""; width:18px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--mg),transparent); flex:none} .kicker--cy{color:var(--cy)} .kicker--cy::before{background:linear-gradient(90deg,var(--cy),transparent)} .sans-h{font-weight:700; font-size:clamp(1.85rem,4.2vw,3rem); letter-spacing:-.035em; text-wrap:balance; color:#f4f6ff} .kicker + .sans-h{margin-top:14px} .sans-h--narrow{max-width:720px} .lead{max-width:58ch; margin-top:16px; color:var(--muted); text-wrap:pretty; font-size:1.05rem; line-height:1.7} .muted{color:var(--muted)} /* ---- pixel wordmark ---- */ .mark{font-family:var(--pixel); line-height:1; letter-spacing:1px; display:inline-block} .mark .cy{color:var(--cy)} .mark .mg{color:var(--mg)} .mark--glow .cy{text-shadow:-2px 0 #06070c,2px 0 #06070c,0 -2px #06070c,0 2px #06070c,-2px -2px #06070c,2px -2px #06070c,-2px 2px #06070c,2px 2px #06070c,0 0 8px var(--cy),0 0 24px rgba(33,224,230,.85)} .mark--glow .mg{text-shadow:-2px 0 #06070c,2px 0 #06070c,0 -2px #06070c,0 2px #06070c,-2px -2px #06070c,2px -2px #06070c,-2px 2px #06070c,2px 2px #06070c,0 0 8px var(--mg),0 0 24px rgba(255,61,180,.85)} /* ---- logo (pixel KAZZPE wordmark, assets/logo.svg) ---- */ .logo{display:block; width:auto} .nav-bar .logo{height:28px} /* ---- sparkles ---- */ .spark{position:absolute; z-index:1; pointer-events:none; clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); animation:sparkle 2.6s ease-in-out infinite; filter:drop-shadow(0 0 6px currentColor)} .spark--1{top:6px; left:5%; width:24px; height:24px; background:var(--mg); color:var(--mg)} .spark--2{top:64px; right:7%; width:30px; height:30px; background:var(--cy); color:var(--cy); animation-delay:.7s} .spark--3{bottom:-6px; left:16%; width:18px; height:18px; background:var(--vio); color:var(--vio); animation-delay:1.2s} .spark--4{top:30px; right:22%; width:16px; height:16px; background:var(--cy); color:var(--cy); animation-delay:1.7s} .spark--5{bottom:10px; right:12%; width:22px; height:22px; background:var(--mg); color:var(--mg); animation-delay:.4s} @keyframes sparkle{ 0%,100%{transform:translate(0,0) scale(.6) rotate(0);opacity:.5} 50%{transform:translate(6px,-8px) scale(1.2) rotate(15deg);opacity:1} } /* ---- LIQUID GLASS ---- */ .glass{position:relative; isolation:isolate; border-radius:var(--radius); overflow:hidden; background:var(--glass-fill); -webkit-backdrop-filter:blur(22px) saturate(170%); backdrop-filter:blur(22px) saturate(170%); border:1px solid rgba(180,200,255,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -2px 14px rgba(0,0,0,.38), 0 1px 0 rgba(255,255,255,.06), 0 22px 50px rgba(2,4,14,.55)} .glass::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.18) 0%, transparent 24%, transparent 68%, rgba(255,255,255,.09) 100%); mix-blend-mode:screen} .glass--sheen::after{content:""; position:absolute; top:0; bottom:0; width:55%; left:-70%; z-index:-1; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform:skewX(-18deg); animation:sheen 7s ease-in-out infinite} @keyframes sheen{0%{left:-70%}50%{left:130%}100%{left:130%}} .glass--calm{background:linear-gradient(135deg, rgba(24,30,58,.78), rgba(14,18,38,.66)); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%)} /* double-bezel shell for premium cards */ .bezel{ padding:3px; border-radius:calc(var(--radius) + 4px); background:linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 40%, rgba(33,224,230,.12) 70%, rgba(255,61,180,.1)); box-shadow:0 24px 56px rgba(2,4,14,.45), 0 0 0 1px rgba(160,180,255,.08); } .bezel > .glass,.bezel > .cart,.bezel > .tile{border-radius:var(--radius); height:100%} /* higher specificity than .reveal so the hover transition (incl. box-shadow) wins */ .glass.lift{transition:opacity .65s var(--ease-soft), transform .4s var(--ease-spring), box-shadow .35s var(--ease-out), border-color .3s ease} .lift:hover{transform:translateY(-12px) scale(1.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 14px rgba(0,0,0,.35), 0 32px 68px rgba(2,4,14,.68), 0 0 36px rgba(33,224,230,.22), 0 0 48px rgba(255,61,180,.1); border-color:rgba(180,200,255,.42)} /* pointer-tracked glass highlight (JS sets --px/--py; hover devices only) */ @media (hover:hover){ .lift::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; opacity:0; background:radial-gradient(280px circle at var(--px,50%) var(--py,50%), rgba(200,230,255,.16), transparent 62%); mix-blend-mode:screen; transition:opacity .35s var(--ease-soft)} .lift:hover::after{opacity:1} } /* JS 3D tilt (fx.js drives an inline transform; the shorter transition smooths it) */ .fx-tilt.lift{transform-style:preserve-3d; will-change:transform; transition:opacity .65s var(--ease-soft), transform .18s ease-out, box-shadow .35s var(--ease-out), border-color .3s ease} @supports not ((-webkit-backdrop-filter:blur(2px)) or (backdrop-filter:blur(2px))){ .glass{background:var(--glass-solid)} .glass--calm{background:#131938} } /* ---- buttons ---- */ .gbtn{font-family:var(--pixel); font-size:.55rem; letter-spacing:.4px; display:inline-flex; align-items:center; gap:10px; padding:14px 18px 14px 20px; border-radius:999px; cursor:pointer; color:#e9edff; border:1px solid rgba(160,180,255,.35); background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px rgba(2,4,14,.4); transition:transform .2s var(--ease-spring), box-shadow .3s var(--ease-out), border-color .25s ease, background .25s ease; position:relative; isolation:isolate; overflow:hidden} .gbtn:hover{transform:translateY(-2px)} .gbtn:active{transform:translateY(0) scale(.97); transition-duration:.06s} .gbtn:focus-visible{outline:2px solid #fff; outline-offset:3px} .gbtn--sm{padding:9px 12px 9px 14px; font-size:.5rem; gap:8px} .gbtn__ico{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; flex:none; background:rgba(255,255,255,.12); font-size:.7rem; line-height:1; transition:transform .3s var(--ease-spring), background .25s ease; box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} .gbtn--sm .gbtn__ico{width:22px; height:22px; font-size:.6rem} .gbtn:hover .gbtn__ico{transform:translate(2px,-1px) scale(1.06); background:rgba(255,255,255,.2)} /* magnetic pull (fx.js sets --magx/--magy on hover devices) */ .fx-mag{transform:translate(var(--magx,0), var(--magy,0))} .fx-mag:hover{transform:translate(var(--magx,0), var(--magy,0)) translateY(-2px)} .fx-mag:active{transform:translate(var(--magx,0), var(--magy,0)) scale(.97)} .gbtn--cy{border-color:rgba(33,224,230,.7); color:#d4fcfe; background:linear-gradient(160deg, rgba(33,224,230,.34), rgba(33,224,230,.1)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 28px rgba(33,224,230,.5), 0 10px 24px rgba(2,4,14,.4)} .gbtn--cy .gbtn__ico{background:rgba(33,224,230,.22); color:#eafdff} .gbtn--mg{border-color:rgba(255,61,180,.85); color:#fff; background:linear-gradient(160deg, rgba(255,61,180,.9), rgba(224,37,154,.72)); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 0 28px rgba(255,61,180,.55), 0 10px 24px rgba(2,4,14,.4)} .gbtn--mg .gbtn__ico{background:rgba(0,0,0,.18); color:#fff} .gbtn::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.24) 50%, transparent 60%); transform:translateX(-130%) skewX(-18deg); animation:btnShimmer 5.5s ease-in-out infinite} .gbtn--cy{animation:ctaGlow 2.4s ease-in-out infinite} .gbtn--cy::after{animation-delay:1.2s} .gbtn--mg{animation:ctaGlowMg 2.8s ease-in-out infinite} .gbtn--mg::after{animation-delay:2.4s} @keyframes btnShimmer{0%{transform:translateX(-130%) skewX(-18deg)}55%,100%{transform:translateX(230%) skewX(-18deg)}} @keyframes ctaGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(33,224,230,.55))}50%{filter:drop-shadow(0 0 18px rgba(33,224,230,1))}} @keyframes ctaGlowMg{0%,100%{filter:drop-shadow(0 0 6px rgba(255,61,180,.5))}50%{filter:drop-shadow(0 0 16px rgba(255,61,180,.95))}} /* ---- nav ---- */ .site-nav{position:sticky; top:16px; z-index:30; margin-top:16px} .site-nav::before{content:""; position:fixed; inset:0 0 auto 0; height:96px; z-index:-1; pointer-events:none; -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); background:linear-gradient(180deg, rgba(10,13,30,.82), rgba(10,13,30,0)); -webkit-mask-image:linear-gradient(180deg,#000 50%, transparent); mask-image:linear-gradient(180deg,#000 50%, transparent); transition:opacity .4s var(--ease-soft)} .site-nav .container{position:relative} .nav-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px 10px 16px; border-radius:999px; /* beat .glass overflow:hidden so the logo outline and mobile menu aren't clipped */ overflow:visible} .nav-bar.glass{overflow:visible} .nav-bar::before{border-radius:999px} .nav-bar > a[aria-label]{display:flex; align-items:center; flex:none; line-height:0; border-radius:8px} .nav-bar .logo{height:26px; width:auto} .nav-bar .mark{font-size:.95rem} .nav__links{display:flex; gap:6px; align-items:center} /* desktop: plain text links; mobile extras hide until the sheet opens */ .nav__sheet-kicker,.nav__item-idx,.nav__item-go{display:none} .nav__item{ font-weight:500; font-size:.95rem; color:#c7cfef; position:relative; padding:8px 12px; border-radius:999px; transition:color .2s ease, background .2s ease; display:inline-flex; align-items:center} .nav__item:hover{color:#fff; background:rgba(255,255,255,.06)} .nav__item::after{content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--cy),var(--mg)); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease-out)} .nav__item:hover::after,.nav__item:focus-visible::after{transform:scaleX(1)} .nav__links .gbtn--mg,.nav__play{color:#fff; margin-left:4px} /* hamburger */ .nav__toggle{ display:none; position:relative; width:40px; height:40px; padding:0; cursor:pointer; background:transparent; border-radius:999px; border:1px solid transparent; color:var(--ink); flex:none; z-index:6; transition:background .25s var(--ease-out), border-color .25s ease, box-shadow .25s ease, transform .15s var(--ease-spring)} .nav__toggle:hover,.nav__toggle:focus-visible{ background:rgba(255,255,255,.08); border-color:rgba(160,180,255,.22)} .nav__toggle:active{transform:scale(.94)} .nav__toggle-box{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px} .nav__toggle-bar{ display:block; height:1.5px; border-radius:2px; background:#e9edff; width:18px; transform-origin:center; transition:transform .4s var(--ease-spring), opacity .25s ease, width .35s var(--ease-spring), background .25s ease; box-shadow:0 0 6px rgba(33,224,230,.15)} /* staggered widths for a less generic closed state */ .nav__toggle-bar:nth-child(1){width:18px} .nav__toggle-bar:nth-child(2){width:12px} .nav__toggle-bar:nth-child(3){width:16px} .nav__toggle[aria-expanded="true"]{ background:rgba(255,61,180,.14); border-color:rgba(255,61,180,.4); box-shadow:0 0 18px rgba(255,61,180,.25), inset 0 1px 0 rgba(255,255,255,.1)} .nav__toggle[aria-expanded="true"] .nav__toggle-bar{width:18px; background:#fff; box-shadow:0 0 8px rgba(255,61,180,.45)} .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2){opacity:0; transform:scaleX(.2)} .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* dim page behind open menu */ .nav-scrim{ position:fixed; inset:0; z-index:28; pointer-events:none; background:rgba(6,8,18,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; transition:opacity .3s var(--ease-soft)} .nav-scrim.is-visible{opacity:1; pointer-events:auto} body.nav-open{overflow:hidden; touch-action:none} /* ---- hero ---- */ .hero{padding:48px 0 12px; min-height:min(72dvh, 720px); display:flex; align-items:center} .hero .container{display:flex; justify-content:center; width:100%} /* arcade cabinet bezel around the glass screen */ .screen-shell{ position:relative; max-width:980px; width:100%; padding:10px; border-radius:34px; background: linear-gradient(160deg, rgba(255,255,255,.14), transparent 35%), linear-gradient(340deg, rgba(33,224,230,.18), transparent 40%), linear-gradient(200deg, rgba(255,61,180,.14), transparent 45%), linear-gradient(180deg, #1a2038, #0c0f1c); box-shadow: 0 0 0 1px rgba(160,180,255,.12), 0 30px 80px rgba(2,4,14,.65), 0 0 60px rgba(33,224,230,.16), 0 0 90px rgba(255,61,180,.1); animation:floatBob 6.5s ease-in-out infinite; } .screen-shell::before, .screen-shell::after{ content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #6a7399, #2a3148 70%); box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.4); z-index:2; pointer-events:none; } .screen-shell::before{top:14px; left:14px; box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.4), 0 0 0 0 transparent} .screen-shell::after{top:14px; right:14px} .screen-shell .rivet-bl, .screen-shell .rivet-br{ position:absolute; width:10px; height:10px; border-radius:50%; z-index:2; pointer-events:none; background:radial-gradient(circle at 35% 35%, #6a7399, #2a3148 70%); box-shadow:inset 0 1px 1px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.4); } .screen-shell .rivet-bl{bottom:14px; left:14px} .screen-shell .rivet-br{bottom:14px; right:14px} .screen{position:relative; width:100%; padding:56px 48px 50px; text-align:center; border-radius:26px; display:flex; flex-direction:column; align-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 18px rgba(0,0,0,.45), 0 0 40px rgba(33,224,230,.12); /* animated conic rim */ --rim-angle:0deg; } .screen > *{position:relative; z-index:1} /* inner CRT vignette */ .screen .crt-vignette{ position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background: radial-gradient(90% 80% at 50% 40%, transparent 40%, rgba(0,0,0,.35) 100%), repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px); opacity:.55; mix-blend-mode:multiply; } .chip{display:inline-flex; align-items:center; gap:10px; font-family:var(--pixel); font-size:.5rem; color:#b9f5f7; padding:9px 14px; border-radius:999px; margin-bottom:28px; background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border:1px solid rgba(160,180,255,.28); box-shadow:0 0 20px rgba(33,224,230,.12), inset 0 1px 0 rgba(255,255,255,.12)} .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--mg); box-shadow:0 0 0 0 rgba(255,61,180,.55); animation:dotPulse 1.8s ease-in-out infinite} @keyframes dotPulse{ 0%{opacity:1; box-shadow:0 0 0 0 rgba(255,61,180,.55)} 70%{opacity:.85; box-shadow:0 0 0 8px rgba(255,61,180,0)} 100%{opacity:1; box-shadow:0 0 0 0 rgba(255,61,180,0)} } .tagline{ font-weight:750; letter-spacing:-.04em; line-height:.98; font-size:clamp(2.4rem,7vw,4.6rem); color:#f7f8ff; margin:4px 0 0; text-wrap:balance; max-width:14ch; } .tagline .accent{ display:inline-block; background:linear-gradient(105deg, var(--cy) 0%, #8ef0f4 35%, var(--mg) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 28px rgba(33,224,230,.25)); } .hero .sub{color:var(--muted); max-width:42ch; margin:20px auto 32px; font-size:1.08rem; line-height:1.65; text-wrap:pretty} .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap} /* ---- kinetic ticker ---- */ .ticker{ position:relative; z-index:2; overflow:hidden; margin:8px 0 0; border-block:1px solid rgba(160,180,255,.12); background:linear-gradient(90deg, rgba(33,224,230,.06), rgba(255,61,180,.05), rgba(33,224,230,.06)); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker__track{ display:flex; width:max-content; gap:0; animation:tickerScroll 32s linear infinite; } .ticker__track span{ font-family:var(--pixel); font-size:.52rem; letter-spacing:1.5px; color:var(--muted); padding:16px 28px; white-space:nowrap; display:inline-flex; align-items:center; gap:28px; } .ticker__track span::after{ content:""; width:6px; height:6px; border-radius:1px; flex:none; background:linear-gradient(135deg,var(--cy),var(--mg)); opacity:.7; box-shadow:0 0 8px rgba(33,224,230,.4); } @keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---- studio tiles (asymmetric bento) ---- */ .tiles{ display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:auto auto; gap:18px; margin-top:40px; } .tile{padding:28px 26px; border-radius:22px; animation:floatBob 5s ease-in-out infinite} .tiles .tile:nth-child(1){ grid-row:1 / 3; display:flex; flex-direction:column; justify-content:flex-end; min-height:300px; background: radial-gradient(90% 70% at 85% 8%, rgba(33,224,230,.16), transparent 52%), radial-gradient(60% 50% at 10% 90%, rgba(255,61,180,.08), transparent 55%), var(--glass-fill); } .tiles .tile:nth-child(2){animation-duration:4.6s; animation-delay:.5s} .tiles .tile:nth-child(3){animation-duration:5.6s; animation-delay:1s} .tile .ic{font-family:var(--pixel); font-size:.9rem; color:var(--cy); margin-bottom:16px; width:fit-content; padding:10px 12px; border-radius:12px; background:rgba(33,224,230,.08); border:1px solid rgba(33,224,230,.18); animation:iconIdle 3.2s ease-in-out infinite} @keyframes iconIdle{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-2px) rotate(-3deg)}75%{transform:translateY(-1px) rotate(3deg)}} .tiles .tile:nth-child(3) .ic{animation:heartBeat 2.4s ease-in-out infinite} @keyframes heartBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}60%{transform:scale(1)}} .tile .ic--mg{color:var(--mg); background:rgba(255,61,180,.08); border-color:rgba(255,61,180,.2)} .tile h3{font-size:1.15rem; margin-bottom:8px; color:#f0f3ff; letter-spacing:-.02em} .tile p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.55; max-width:36ch} .tiles .tile:nth-child(1) h3{font-size:clamp(1.25rem,2.2vw,1.55rem)} .tiles .tile:nth-child(1) p{font-size:1rem} /* ---- games cartridges (featured bento) ---- */ .games{ display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:auto auto; gap:20px; margin-top:40px; } .cart{border-radius:22px; overflow:hidden; display:flex; flex-direction:column; animation:floatBob 5.2s ease-in-out infinite} .games .cart:nth-child(1){grid-row:1 / 3} .games .cart:nth-child(2){animation-duration:4.8s; animation-delay:.6s} .games .cart:nth-child(3){animation-duration:5.6s; animation-delay:1s} .cart__art{position:relative; flex:none; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden; background: radial-gradient(70% 70% at 55% 30%, rgba(33,224,230,.12), transparent 60%), radial-gradient(80% 80% at 60% 25%, #1b2233, #06070c); border-bottom:1px solid rgba(160,180,255,.16)} .games .cart:nth-child(1) .cart__art{aspect-ratio:1/1; min-height:280px} .cart__art::after{content:""; position:absolute; inset:-3px 0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); animation:scanlineScroll 1s linear infinite; opacity:.7} @keyframes scanlineScroll{from{transform:translateY(0)}to{transform:translateY(3px)}} .cart__icon{width:clamp(120px,34%,180px); aspect-ratio:1; display:flex;align-items:center;justify-content:center; font-family:var(--pixel); font-size:1.3rem; color:#fff} .games .cart:nth-child(1) .cart__icon{width:clamp(150px,42%,220px)} .cart__icon img{width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 0 28px var(--icon-glow, rgba(255,61,180,.5))); animation:iconIdle 3.6s ease-in-out infinite} .cart__body{padding:22px 24px; flex:1; display:flex; flex-direction:column} .cart__body h3{font-size:1.2rem; margin-bottom:8px; color:#f0f3ff; letter-spacing:-.02em} .games .cart:nth-child(1) .cart__body h3{font-size:1.4rem} .cart__body p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.55} .store-badges--card{margin-top:auto; padding-top:18px; gap:12px} .store-badges--card img{height:34px; transition:transform .25s var(--ease-spring), filter .25s ease} .store-badges--card a:hover img{transform:translateY(-2px); filter:brightness(1.08)} .cart--soon .cart__art{background:linear-gradient(160deg, #161c36, #0c1022)} .cart--soon .cart__icon{background:linear-gradient(160deg,#2a3358,#1a2240); color:#9aa4cc; border-radius:28px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 24px rgba(140,120,255,.15); animation:qBlink 1.8s ease-in-out infinite} @keyframes qBlink{0%,100%{opacity:1}50%{opacity:.4}} .pixbar{height:12px; border:1px solid rgba(160,180,255,.25); border-radius:4px; margin-top:14px; position:relative; overflow:hidden; background:rgba(255,255,255,.06)} .pixbar::before{content:""; position:absolute; left:0; top:0; bottom:0; width:62%; background:repeating-linear-gradient(90deg,var(--mg) 0 7px, #ff7ac6 7px 11px); animation:loadMarch .55s linear infinite} .pixbar::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.65) 50%, transparent 60%); transform:translateX(-100%); animation:loadSweep 2.4s ease-in-out infinite} @keyframes loadMarch{from{background-position:0 0}to{background-position:22px 0}} @keyframes loadSweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(120%)}} /* ---- spotlight (dark glass) ---- */ .spot-band{padding:48px 0 72px} .spot{position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:52px 48px; background:linear-gradient(145deg, rgba(8,10,22,.78), rgba(10,14,32,.52)); -webkit-backdrop-filter:blur(24px) saturate(160%); backdrop-filter:blur(24px) saturate(160%); border:1px solid rgba(120,140,200,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 36px 80px rgba(10,6,28,.55), 0 0 60px rgba(33,224,230,.14), 0 0 80px rgba(255,61,180,.08)} .spot::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(rgba(33,224,230,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,61,180,.055) 1px,transparent 1px); background-size:28px 28px; -webkit-mask-image:radial-gradient(90% 90% at 50% 40%,#000,transparent 85%); mask-image:radial-gradient(90% 90% at 50% 40%,#000,transparent 85%)} .spot::after{content:""; position:absolute; inset:-3px 0; z-index:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); animation:scanlineScroll 1.1s linear infinite; opacity:.55} .spot__inner{position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .95fr; gap:48px; align-items:center} .spot h2{color:#fff; margin-top:12px} .spot .desc{color:#a3acc6; margin-top:16px; font-size:1.05rem; line-height:1.65; max-width:48ch} .flist{list-style:none; padding:0; margin:26px 0 30px; display:grid; gap:12px} .flist li{display:flex; gap:12px; color:#b8c0d4; font-size:.98rem; align-items:flex-start} .flist li::before{content:""; flex:none; width:8px; height:8px; margin-top:.45em; border-radius:2px; background:linear-gradient(135deg,var(--cy),var(--mg)); box-shadow:0 0 10px rgba(33,224,230,.45); animation:arrowPulse 2.4s ease-in-out infinite} @keyframes arrowPulse{0%,100%{opacity:.55; transform:scale(.9)}50%{opacity:1; transform:scale(1.15)}} .flist li:nth-child(2)::before{animation-delay:.3s} .flist li:nth-child(3)::before{animation-delay:.6s} .flist li:nth-child(4)::before{animation-delay:.9s} .flist li:nth-child(5)::before{animation-delay:1.2s} .store-badges{display:flex; gap:16px; flex-wrap:wrap; align-items:center} .store-badges img{height:48px; width:auto; transition:transform .25s var(--ease-spring), filter .25s ease} .store-badges a:hover img{transform:translateY(-3px) scale(1.03); filter:brightness(1.08) drop-shadow(0 8px 16px rgba(0,0,0,.35))} .spot__art{aspect-ratio:4/3; border-radius:20px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background: radial-gradient(60% 60% at 50% 40%, rgba(255,61,180,.15), transparent 70%), radial-gradient(80% 80% at 60% 25%, #1b2233, #04050a); border:1px solid rgba(120,140,200,.35); box-shadow:inset 0 0 60px rgba(33,224,230,.14), 0 0 36px rgba(255,61,180,.16), inset 0 1px 0 rgba(255,255,255,.1)} .spot__art img{width:168px;height:168px; filter:drop-shadow(0 0 24px rgba(255,61,180,.5)); animation:floatBob 5s ease-in-out infinite, glowBreatheMg 3s ease-in-out infinite} @keyframes glowBreatheMg{0%,100%{filter:drop-shadow(0 0 14px rgba(255,61,180,.45))}50%{filter:drop-shadow(0 0 32px rgba(255,61,180,.9))}} /* ---- footer ---- */ .footer{padding:20px 0 56px; position:relative; z-index:2} .footer__bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px 24px; border-radius:999px} .footer .muted{font-size:.9rem} .footer a{font-weight:500; color:var(--muted); transition:color .2s ease} .footer a:hover{color:var(--mg)} /* ---- legal / privacy (calm + readable) ---- */ .legal{position:relative; z-index:2; max-width:940px; margin:0 auto; padding:40px 24px 80px} .legal-card{padding:42px 48px; border-radius:22px} .legal h1{font-size:clamp(1.9rem,5vw,2.7rem); font-weight:750; letter-spacing:-.03em} .legal h2{font-size:1.3rem; margin:36px 0 10px; color:#eef1ff; letter-spacing:-.02em} .legal h3{margin:22px 0 8px; font-size:1.05rem} .legal p,.legal li{color:#b9c2e2} .legal ul{padding-left:20px} .legal a{color:#ff8ccc; text-decoration:underline} .legal .effective{color:var(--muted); font-size:.95rem; margin-top:8px} .legal .note{background:rgba(255,255,255,.05); border:1px solid var(--line); border-left:3px solid var(--mg); border-radius:14px; padding:16px 18px; margin:26px 0; color:var(--muted); font-size:.92rem} /* ---- 404 ---- */ .err .screen{max-width:100%} .err .screen-shell{max-width:680px} .err-code{font-family:var(--pixel); font-size:clamp(2.4rem,9vw,4rem); color:#f0f3ff; margin:6px 0 0; text-shadow:0 0 16px rgba(33,224,230,.75), 0 0 34px rgba(255,61,180,.5)} /* ---- reveal-on-scroll ---- */ .reveal{opacity:0; transform:translateY(28px) scale(.985); filter:blur(6px); transition:opacity .75s var(--ease-soft), transform .75s var(--ease-soft), filter .75s var(--ease-soft)} .reveal.is-visible{opacity:1; transform:none; filter:none} .no-js .reveal{opacity:1; transform:none; filter:none} /* ---- responsive ---- */ @media (max-width:820px){ section{padding:64px 0} .site-nav{top:10px; margin-top:10px; width:100%} .site-nav .container{ width:100%; max-width:100%; padding:0 12px; box-sizing:border-box} /* full-width mobile header — logo left, menu right, spans content width */ .nav-bar{ display:flex; width:100%; max-width:100%; min-width:0; margin:0; box-sizing:border-box; gap:12px; padding:8px 8px 8px 14px; border-radius:16px; justify-content:space-between; align-items:center; border-color:rgba(160,180,255,.28); background:linear-gradient(145deg, rgba(52,62,110,.72), rgba(16,20,42,.62) 55%, rgba(38,46,88,.68)); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -2px 12px rgba(0,0,0,.38), 0 14px 36px rgba(2,4,14,.55), 0 0 0 1px rgba(160,180,255,.12)} .nav-bar::before{border-radius:16px} .nav-bar .logo{height:24px} .nav-bar > a[aria-label]{min-width:0} .nav__toggle{display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 auto; margin-left:auto; background:rgba(255,255,255,.08); border-color:rgba(160,180,255,.2)} .nav__toggle-bar:nth-child(1){width:17px} .nav__toggle-bar:nth-child(2){width:11px} .nav__toggle-bar:nth-child(3){width:14px} .nav__toggle[aria-expanded="true"] .nav__toggle-bar{width:17px} .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .nav__links{display:none} /* sheet matches full header width */ .nav__links.is-open,.nav__links.is-open.is-closing{ display:flex; position:absolute; z-index:5; top:calc(100% + 10px); left:0; right:0; width:100%; box-sizing:border-box; flex-direction:column; gap:2px; align-items:stretch; padding:12px 10px 10px; border-radius:18px; background: radial-gradient(120% 80% at 100% 0%, rgba(255,61,180,.12), transparent 50%), radial-gradient(100% 70% at 0% 100%, rgba(33,224,230,.1), transparent 50%), linear-gradient(165deg, rgba(24,30,58,.98), rgba(10,13,28,.99)); -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%); border:1px solid rgba(160,180,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 24px 56px rgba(2,4,14,.7), 0 0 48px rgba(33,224,230,.08), 0 0 32px rgba(255,61,180,.06); transform:none; animation:navSheetIn .34s var(--ease-spring) both} .nav__links.is-open.is-closing{animation:navSheetOut .2s var(--ease-out) both} @keyframes navSheetIn{ from{opacity:0; transform:translateY(-10px) scale(.98)} to{opacity:1; transform:none}} @keyframes navSheetOut{ from{opacity:1; transform:none} to{opacity:0; transform:translateY(-6px) scale(.98)}} .nav__sheet-kicker{ display:block; margin:0 8px 10px; padding:0 0 10px; font-family:var(--pixel); font-size:.48rem; letter-spacing:1.5px; color:var(--mg); border-bottom:1px solid rgba(160,180,255,.12); animation:navItemIn .4s var(--ease-soft) both} .nav__item-idx,.nav__item-go{display:inline-flex} .nav__links.is-open .nav__item{ display:flex; align-items:center; gap:12px; padding:14px 12px; border-radius:14px; font-size:1.05rem; font-weight:600; color:#e8ecff; background:transparent; animation:navItemIn .42s var(--ease-soft) both; animation-delay:calc(0.05s + var(--i, 0) * 0.055s)} .nav__links.is-open .nav__item::after{display:none} .nav__links.is-open .nav__item-idx{ font-family:var(--pixel); font-size:.42rem; letter-spacing:1px; color:var(--cy); opacity:.7; min-width:1.6rem; flex:none} .nav__links.is-open .nav__item-label{flex:1; letter-spacing:-.015em} .nav__links.is-open .nav__item-go{ font-size:.95rem; color:rgba(160,180,255,.45); transition:transform .3s var(--ease-spring), color .2s ease; flex:none} .nav__links.is-open .nav__item:hover, .nav__links.is-open .nav__item:active, .nav__links.is-open .nav__item:focus-visible{ background:rgba(255,255,255,.07); color:#fff} .nav__links.is-open .nav__item:hover .nav__item-go, .nav__links.is-open .nav__item:active .nav__item-go{ color:var(--mg); transform:translateX(3px)} .nav__links.is-open .nav__item:hover .nav__item-idx{opacity:1} .nav__links.is-open .nav__item[aria-current="page"]{ background:rgba(33,224,230,.08); border:1px solid rgba(33,224,230,.18)} .nav__links.is-open .nav__item[aria-current="page"] .nav__item-idx{color:var(--mg); opacity:1} .nav__links.is-open .nav__play, .nav__links.is-open a.gbtn{ display:inline-flex; justify-content:center; margin:8px 0 0; width:100%; padding:15px 16px; border-radius:14px; animation:navItemIn .42s var(--ease-soft) both; animation-delay:calc(0.05s + var(--i, 3) * 0.055s)} @keyframes navItemIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}} .hero{min-height:auto; padding:28px 0 8px} .screen-shell{padding:7px; border-radius:26px} .screen{padding:36px 22px 34px; border-radius:20px} .tagline{font-size:clamp(2rem,10vw,2.8rem); max-width:none} .tiles,.games{grid-template-columns:1fr; grid-template-rows:none} .tiles .tile:nth-child(1),.games .cart:nth-child(1){grid-row:auto; min-height:0} .games .cart:nth-child(1) .cart__art{aspect-ratio:16/10; min-height:0} .games .cart:nth-child(1) .cart__icon{width:clamp(120px,34%,168px)} .spot{padding:32px 22px} .spot__inner{grid-template-columns:1fr; gap:28px} .spot__art{order:-1} .legal-card{padding:28px 22px} .footer__bar{border-radius:18px} .ticker__track span{padding:14px 20px; font-size:.48rem} } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .spark,.glass--sheen::after, .bg-aurora,body::before, .screen-shell,.chip .dot, .gbtn,.gbtn::after,.gbtn--cy,.gbtn--mg, .tile,.tile .ic,.tiles .tile:nth-child(3) .ic, .cart,.cart__art::after,.cart__icon img,.cart--soon .cart__icon, .pixbar::before,.pixbar::after, .spot::after,.spot__art img,.flist li::before, .ticker__track {animation:none!important} .lift:hover,.gbtn:hover{transform:none} .reveal{opacity:1; transform:none; filter:none; transition:none} /* fx.js never boots under reduced motion; hide its layers in case it already did */ .fx-aurora,.fx-cursor,.zz-intro{display:none} .zz-hint,.zz-clear__title,.zz-pop,.zz-ring,.zz-spark{animation:none} .nav__links.is-open,.nav__links.is-open .nav__item,.nav__links.is-open .nav__play, .nav__links.is-open a.gbtn,.nav__sheet-kicker,.nav-scrim{animation:none!important; transition:none} .fx-on .bg-aurora{opacity:1} .lift::after{display:none} body::after{opacity:.03} }