/* Index (landing) — page-specific styles. Shared tokens/components: site.css */

/* hero */
.hero{position:relative;overflow-x:clip;padding:clamp(48px,9vh,110px) 0 clamp(40px,7vh,84px)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;text-align:left}}
.hero h1{margin:26px 0 0;font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;font-size:clamp(48px,8.2vw,104px)}
.hero h1 .g{color:transparent;background:linear-gradient(96deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text}
.hero .lede{max-width:520px;margin:26px 0 0;font-size:clamp(16px,1.9vw,19px);color:var(--ink2);line-height:1.6}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-art{position:relative;justify-self:center}
.hero-art .em{width:100%;max-width:460px;height:auto;filter:drop-shadow(0 40px 80px rgba(47,123,255,.4));animation:float 7s ease-in-out infinite}
.hero-art .ring{position:absolute;inset:-6% -6% -6% -6%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(55,229,255,.16),transparent 60%)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:900px){.hero-art{margin-top:20px;max-width:340px}.hero-art .em{max-width:340px}}

/* marquee */
.marq{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);overflow:hidden;padding:16px 0;margin-top:clamp(30px,5vw,54px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.marq-t{display:inline-flex;gap:0;white-space:nowrap;animation:scroll 34s linear infinite;font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.marq-t span{padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.marq-t span::after{content:"◆";color:var(--cyan);font-size:9px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* manifesto + stats */
.manif{font-family:var(--disp);font-weight:600;text-transform:uppercase;line-height:1.04;letter-spacing:-.01em;font-size:clamp(28px,4.8vw,56px);max-width:16ch;margin:24px 0 0}
.manif .g{color:transparent;background:linear-gradient(96deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text}
.stats{display:flex;flex-wrap:wrap;gap:clamp(30px,6vw,84px);margin-top:52px;padding-top:38px;border-top:1px solid var(--line2)}
.stat .n{font-family:var(--disp);font-weight:700;font-size:clamp(40px,6vw,68px);line-height:1;background:linear-gradient(180deg,#fff,#9fb4d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{margin-top:8px;font-size:14px;color:var(--mut);letter-spacing:.02em}

/* game showcase */
.game-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3.5vw,44px);align-items:end;margin-top:22px}
@media(max-width:760px){.game-head{grid-template-columns:1fr}}
.game-ico{width:clamp(96px,14vw,132px);height:auto;aspect-ratio:1;border-radius:22px;border:1px solid var(--line);box-shadow:0 26px 60px -22px rgba(55,229,255,.5)}
.game-name{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.94;font-size:clamp(40px,7vw,86px);margin:0}
.game-sub{font-family:var(--disp);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-size:clamp(13px,1.6vw,16px);margin-top:10px}
.game-desc{max-width:60ch;margin:26px 0 0;color:var(--ink2);font-size:clamp(16px,1.7vw,18px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{font-family:var(--disp);font-weight:500;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding:9px 16px;border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.03);display:inline-flex;gap:9px;align-items:center}
.chip .d{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.chip.soon{color:var(--cyan)}
.chip.live{color:var(--on-cyan);background:linear-gradient(100deg,var(--cyan),var(--blue));border-color:transparent;font-weight:600;text-decoration:none;box-shadow:0 8px 26px -10px rgba(55,229,255,.55);transition:transform .18s,box-shadow .18s}
.chip.live .d{background:var(--on-cyan);box-shadow:none}
.chip.live:hover{transform:translateY(-1px);box-shadow:0 12px 32px -10px rgba(55,229,255,.85)}

/* gallery: shared base in site.css; landing adds the drag-slider affordances */
.gal{padding-top:44px;cursor:grab;user-select:none;-webkit-user-select:none}
.gal.drag{cursor:grabbing;scroll-behavior:auto}
.gal .shot img{-webkit-user-drag:none;pointer-events:none;user-select:none}
.slider{position:relative;margin-top:8px}
.snav{position:absolute;top:calc(50% - 12px);transform:translateY(-50%);z-index:5;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:28px;line-height:0;color:var(--ink);cursor:pointer;font-family:var(--body);border:1px solid var(--line);background:rgba(4,6,13,.66);backdrop-filter:blur(8px);transition:border-color .2s,color .2s,box-shadow .25s,opacity .2s}
.snav:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 30px -8px var(--cyan)}
.snav.s-prev{left:-6px}.snav.s-next{right:-6px}
.snav[disabled]{opacity:.25;pointer-events:none}
@media(max-width:720px){.snav{display:none}}
.dots{display:flex;gap:9px;justify-content:center;margin-top:24px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;transition:width .25s,background .25s,box-shadow .25s}
.dot.on{background:var(--cyan);width:24px;border-radius:5px;box-shadow:0 0 12px -2px var(--cyan)}

/* coming next */
.next{margin-top:22px;padding:clamp(28px,4vw,44px);border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(47,123,255,.07),transparent 55%);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.next h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(24px,3.4vw,40px);margin:0;line-height:1}
.next p{margin:12px 0 0;color:var(--mut);max-width:44ch}
.next .tag{font-family:var(--disp);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--cyan);border:1px solid rgba(55,229,255,.32);padding:9px 16px;border-radius:2px;white-space:nowrap}

/* contact — shared .band base in site.css; landing uses roomier padding */
.band{padding:clamp(56px,9vw,110px) clamp(24px,5vw,64px)}
.band p{max-width:48ch;margin-bottom:34px}

@media(prefers-reduced-motion:reduce){.hero-art .em,.marq-t{animation:none}}