@font-face{font-family:'PublicPixel';src:url('../assets/fonts/PublicPixel.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Brushot';src:url('../skinator/assets/fonts/Brushot-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --green:#25db29;
  --pink:#dc50e3;
  --ink:#07080c;
  --ink-2:#0d0f16;
  --bone:#efeaf5;
  --bone-dim:#a9a3b8;
  --f-pix:'PublicPixel',monospace;
  --f-brush:'Brushot','PublicPixel',sans-serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.6rem;background:rgba(7,8,12,.7);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-brand img{height:30px;width:auto}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nav-links a{
  font-family:var(--f-pix);font-size:.55rem;letter-spacing:.08em;color:var(--bone-dim);
  transition:color .2s;
}
.nav-links a:hover{color:var(--pink)}
.nav-links a.is-on{color:var(--pink)}
/* the game links only exist for the mobile dropdown menu — desktop
   keeps just THE TEAM / CONTACT, unchanged. */
.nav-link-game{display:none}
.nav-burger{display:none}

/* ---------- THE TEAM ---------- */
.team{padding:9rem 1.6rem 5rem}
.team-wrap{max-width:1080px;margin-inline:auto}
.team-h1{
  font-family:var(--f-pix);font-size:clamp(1.6rem,4.4vw,2.4rem);color:var(--pink);
  text-shadow:3px 3px 0 var(--green);margin:0 0 4rem;
}
.team-member{
  display:grid;grid-template-columns:170px 1fr 300px;gap:2.4rem;align-items:center;
  margin-bottom:6rem;animation:teamIn .6s var(--ease) both;
}
@keyframes teamIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.team-voxel{width:100%;filter:drop-shadow(0 14px 26px rgba(0,0,0,.6))}
.team-copy h2{font-family:var(--f-pix);font-size:1.05rem;line-height:1.5;color:var(--pink);margin:0 0 1.1rem}
.team-copy p{color:var(--bone-dim);line-height:1.75;font-size:.95rem;margin:0 0 1rem}
.team-copy em{color:var(--bone);font-style:italic}
.team-photo{width:100%;aspect-ratio:1;object-fit:cover;border-radius:22px;box-shadow:0 24px 50px -22px rgba(0,0,0,.85)}

@media (max-width:860px){
  .team-member{grid-template-columns:1fr;text-align:center;gap:1.2rem}
  .team-voxel{width:140px;margin-inline:auto}
  .team-photo{width:220px;margin-inline:auto}
}

/* ---------- CAROUSEL ---------- */
.carousel{position:relative;height:100svh;overflow:hidden;background:#000}
.carousel-track{display:flex;width:300%;height:100%;transition:transform .6s var(--ease)}
.slide{position:relative;width:33.3333%;height:100%;flex:none;overflow:hidden}

.slide-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(7,8,12,.15) 0%,transparent 30%,transparent 65%,rgba(7,8,12,.85) 100%);
}
.slide-scrim-dark{background:linear-gradient(to bottom,rgba(0,0,0,.1) 0%,transparent 35%,transparent 60%,rgba(0,0,0,.9) 100%)}

.slide-content{
  position:absolute;left:0;right:0;bottom:9%;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center;
}
.btn-learn{
  font-family:var(--f-pix);font-size:.62rem;letter-spacing:.1em;
  background:var(--bone);color:#1a0a1c;padding:1rem 1.8rem;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7);
  transition:transform .2s var(--ease),background .2s;
}
.btn-learn:hover{transform:translateY(-3px);background:var(--pink);color:var(--bone)}
.btn-learn.is-soon{opacity:.55;cursor:not-allowed}
.btn-learn.is-soon:hover{transform:none;background:var(--bone);color:#1a0a1c}
.slide-skinator .btn-learn{background:#e01b16;color:var(--bone)}
.slide-skinator .btn-learn:hover{background:#ff2a22}

/* -- Skinator slide: the LearnMore Steam-capsule art, stacked edge-to-edge
      like Photoshop layers — background, creature, enemies x2, logo -- */
.slide-skinator .slide-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hl{position:absolute;object-fit:contain;object-position:bottom center}
.hl-skin-bg,.hl-skin-creature,.hl-skin-enemies2,.hl-skin-enemies1,.hl-skin-logo{
  inset:0;width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(.8);
}
.hl-skin-bg{z-index:1}
.hl-skin-creature{z-index:2;filter:brightness(1.75) contrast(1.05)}
.hl-skin-enemies2{z-index:3;filter:brightness(1.28) contrast(1.05)}
.hl-skin-enemies1{z-index:4;filter:brightness(1.28) contrast(1.05)}
.hl-skin-logo{z-index:5}
/* mobile-only vertical banner (see the max-width:720px block) — hidden
   here so it never affects desktop layout/paint. */
.slide-skinator .stage-mobile{display:none}
.slide-tag{
  font-family:var(--f-brush);font-size:clamp(1.3rem,3.2vw,2.2rem);line-height:1;color:var(--bone);
  text-shadow:0 3px 18px rgba(0,0,0,.9);
}
.slide-tag em{color:#e01b16;font-style:normal;text-shadow:0 0 26px rgba(224,27,22,.65),0 3px 18px rgba(0,0,0,.9)}

/* -- Tokyo's Neon Monsters slide: separate layers so the mech and dragoon
      can be nudged independently by the pointer, same idea as Skinator's -- */
.slide-tnm .slide-stage{position:absolute;inset:0}
.hl-tnm-bg,.hl-tnm-mech,.hl-tnm-dragoon,.hl-tnm-buildings{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;
}
.hl-tnm-buildings{z-index:2}
.hl-tnm-mech,.hl-tnm-dragoon{z-index:1}
.hl-tnm-logo{
  position:absolute;z-index:3;top:12%;left:50%;translate:-50% 0;
  width:min(50vw,340px);filter:drop-shadow(0 10px 24px rgba(0,0,0,.85));
}

/* ---------- CAROUSEL ARROWS + DOTS ---------- */
.carousel-arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:var(--bone);font-size:1.3rem;
  display:grid;place-items:center;backdrop-filter:blur(4px);
  transition:background .2s,transform .2s;
}
.carousel-arrow:hover{background:rgba(255,255,255,.28);transform:scale(1.06)}
.carousel-arrow-l{left:2rem}
.carousel-arrow-r{right:2rem}

.carousel-dots{
  position:absolute;left:50%;translate:-50% 0;bottom:2.4rem;z-index:3;
  display:flex;gap:.6rem;
}
.carousel-dots button{
  width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:transparent;padding:0;cursor:pointer;transition:background .2s,transform .2s;
}
.carousel-dots button.is-on{background:var(--pink);border-color:var(--pink);transform:scale(1.2)}

/* ================= POLISH ================= */

/* -- a faint vignette + grain sits over everything so the flat art reads
      like a printed poster rather than a raw export -- */
.grain{
  position:fixed;inset:0;z-index:15;pointer-events:none;
  box-shadow:inset 0 0 22vw rgba(0,0,0,.55);
}
.grain::after{
  content:'';position:absolute;inset:-50%;opacity:.035;
  background-image:radial-gradient(rgba(255,255,255,.9) .5px,transparent .5px);
  background-size:3px 3px;animation:grainShift .6s steps(3,end) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}33%{transform:translate(-2px,1px)}66%{transform:translate(1px,-2px)}100%{transform:translate(0,0)}
}

/* -- scroll progress, matched to the logo's green -- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--green),var(--pink));
  box-shadow:0 0 14px rgba(37,219,41,.7);
  transform:scaleX(0);transform-origin:0 50%;
}

/* -- the brand mark glows the way the voxel logo does in-engine -- */
.nav-brand img{transition:filter .3s var(--ease),transform .3s var(--ease)}
.nav-brand:hover img{filter:drop-shadow(0 0 10px rgba(37,219,41,.75));transform:scale(1.03)}

/* -- TSTW slide: just the video loop, scaled down 10% -- */
.slide-bg{transform:scale(.9)}
/* only windows narrower/taller than the video's own 16:9 (most windows
   that aren't a maximized wide monitor) are the problem: object-fit:
   cover crops the sides to fill the height there, cropping right
   through the title. contain never crops (pillarboxing instead, which
   blends into the video's own black background) — but only apply it in
   that narrower case, so a normal/wide desktop keeps the original
   full-bleed crop with no visible side bars. Mobile has its own real
   vertical video and stays on cover (see the max-width:720px block). */
@media (min-width:721px) and (max-aspect-ratio:16/9){
  .slide-tstw .slide-bg{object-fit:contain}
}

/* the copy re-enters each time its slide becomes the live one */
.slide-content{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease) .12s,transform .55s var(--ease) .12s}
.slide.is-active .slide-content{opacity:1;transform:none}

/* -- arrows read as interactive before you touch them -- */
.carousel-arrow{border:1px solid rgba(255,255,255,.18)}
.carousel-arrow:hover{
  background:rgba(255,255,255,.3);border-color:var(--pink);
  box-shadow:0 0 22px -4px rgba(220,80,227,.8);
}
.carousel-arrow:active{transform:scale(.94)}

/* -- dots grow into pills so the active one is obvious at a glance -- */
.carousel-dots button{transition:background .25s,border-color .25s,width .25s var(--ease)}
.carousel-dots button.is-on{width:24px;border-radius:5px;transform:none}

/* -- learn-more button gets a sheen sweep -- */
.btn-learn{position:relative;overflow:hidden}
.btn-learn::after{
  content:'';position:absolute;top:0;bottom:0;width:40%;left:-55%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  animation:sheen 5s ease-in-out infinite;
}
.btn-learn.is-soon::after{display:none}
@keyframes sheen{0%,74%{left:-55%}90%,100%{left:130%}}

/* -- team: the voxel avatars float, the photos lift on hover -- */
.team-voxel{animation:float 6s ease-in-out infinite}
.team-member:nth-child(odd) .team-voxel{animation-delay:-2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.team-photo{transition:transform .4s var(--ease),box-shadow .4s var(--ease),filter .4s var(--ease);filter:grayscale(1) contrast(1.05)}
.team-photo:hover{transform:translateY(-6px) scale(1.02);filter:grayscale(.15) contrast(1.05);box-shadow:0 30px 60px -20px rgba(220,80,227,.35)}
.team-copy h2{position:relative;display:inline-block}
.team-copy h2::after{
  content:'';position:absolute;left:0;right:0;bottom:-.5rem;height:2px;
  background:linear-gradient(90deg,var(--green),transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) .2s;
}
.team-member.is-in h2::after{transform:scaleX(1)}

/* stagger the team blocks in on scroll instead of all at load */
.team-member{opacity:0;transform:translateY(24px);animation:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.team-member.is-in{opacity:1;transform:none}

/* -- TV power-on flash, same recipe as Skinator's -- */
.tv-power{
  position:fixed;left:0;right:0;top:50%;height:2px;z-index:999;pointer-events:none;
  background:#fff;box-shadow:0 0 60px 12px rgba(255,255,255,.85);opacity:0;
}
.tv-power.is-live{animation:tvPowerOn .5s var(--ease) forwards}
@keyframes tvPowerOn{
  0%{opacity:1;transform:scaleX(.2) scaleY(1)}
  45%{opacity:1;transform:scaleX(1) scaleY(1)}
  100%{opacity:0;transform:scaleX(1) scaleY(320)}
}

@media (prefers-reduced-motion:reduce){
  .grain::after,.team-voxel,.btn-learn::after{animation:none}
  .slide-content,.team-member{opacity:1;transform:none;transition:none}
  .progress{display:none}
  .tv-power{display:none}
}

/* ---------- CONTACT ---------- */
.contact{
  padding:clamp(4rem,10vw,7rem) 1.6rem;text-align:center;
  background:radial-gradient(60% 60% at 50% 30%,rgba(220,80,227,.08),transparent 70%);
  border-top:1px solid rgba(255,255,255,.08);
}
.contact-h2{
  font-family:var(--f-pix);font-size:clamp(1.3rem,3.2vw,1.9rem);color:var(--pink);
  text-shadow:2px 2px 0 var(--green);margin:0 0 1rem;
}
.contact-lede{color:var(--bone-dim);max-width:46ch;margin:0 auto 2rem}
.contact-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.contact-btn{
  font-family:var(--f-pix);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--bone);color:#1a0a1c;padding:1rem 1.6rem;border-radius:999px;
  display:inline-flex;align-items:center;transition:transform .2s var(--ease),background .2s,box-shadow .2s;
}
.contact-btn:hover{transform:translateY(-2px);background:var(--pink);color:var(--bone);box-shadow:0 12px 30px -10px rgba(220,80,227,.6)}
.contact-btn-ghost{background:rgba(255,255,255,.03);color:var(--bone);border:1px solid rgba(255,255,255,.12)}
.contact-btn-ghost:hover{border-color:var(--bone);background:rgba(255,255,255,.06);transform:translateY(-2px)}

/* ---------- FOOTER ---------- */
.foot{
  padding:1.4rem 1.6rem;display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-pix);font-size:.5rem;color:var(--bone-dim);
  background:var(--ink-2);border-top:1px solid rgba(255,255,255,.08);
}

@media (max-width:720px){
  /* centered-in-slide arrows get lost over busy full-bleed art — pin
     them to the same baseline as the LEARN MORE button instead, so
     they always land somewhere readable. */
  .carousel-arrow{width:42px;height:42px;font-size:1.05rem;top:auto;bottom:9%;translate:0}
  .carousel-arrow-l{left:.8rem}
  .carousel-arrow-r{right:.8rem}
  .nav{padding:.7rem 1rem}
  .nav-brand img{height:22px}

  /* THE TEAM / CONTACT alone already crowded the top bar; adding the
     3 game links on top of that would overflow it, so all 5 collapse
     into a burger dropdown instead — mobile only, desktop is untouched. */
  .nav-burger{display:block;background:none;border:0;color:var(--bone);font-size:1.7rem;line-height:1;padding:0}
  .nav-link-game{display:block}
  .nav-links{
    position:fixed;inset:48px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink-2);border-bottom:1px solid rgba(255,255,255,.08);
    padding:.6rem 1.2rem;display:none;
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:.85rem 0;font-size:.7rem;text-align:right;border-top:1px solid rgba(255,255,255,.06)}
  .nav-links a:first-child{border-top:0}

  /* the desktop Skinator slide art (the 5-layer LearnMore composite) is a
     wide 16:9-ish canvas that doesn't suit a tall phone frame — hide it
     and show the Skinator subpage's own vertical hero stack instead
     (same files, referenced directly — see the markup). */
  .slide-skinator .slide-stage{display:none}
  .slide-skinator .stage-mobile{
    display:block;position:absolute;top:0;left:0;width:100%;
    aspect-ratio:3240/4608;overflow:hidden;z-index:0;
    /* the slide-content stack below (gap + 2-line tagline + gap + button,
       ~216px) plus room for the carousel dots (which sit at a fixed
       bottom:2.4rem and would otherwise land on top of the button) is a
       fixed ~274px regardless of screen height — on a short phone (e.g.
       iPhone SE, 667px tall) a width-driven 142.2vw banner plus that
       fixed stack overflows the fixed-height (100svh) slide, pushing
       the button below the clipped bottom edge (off-screen) or under
       the dots. Capping the banner's height crops a bit more off its
       (already bottom-trimmed) empty backdrop instead, on short phones
       only — taller phones have room to spare and never hit this cap. */
    max-height:calc(100svh - 274px);
  }
  .slide-skinator .hlm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
  .slide-skinator .hlm-bg{z-index:1}
  .slide-skinator .hlm-enemies-left{z-index:2}
  .slide-skinator .hlm-enemies-right{z-index:3}
  .slide-skinator .hlm-creature{z-index:4}
  .slide-skinator .hlm-fog{z-index:5}
  .slide-skinator .hlm-logo{z-index:6}
  /* sit the tagline/button under the banner — 142.2vw is that banner's
     own height (aspect-ratio 3240/4608 against a 100vw-wide slide), so
     this tracks correctly across every phone's viewport height instead
     of a fixed % of the slide (which the banner's height has no fixed
     relationship to). The added rem pushes the button down far enough
     to land at the same spot as the other two slides' buttons — the
     two-line tagline below does some of that work, this covers the
     rest. min() mirrors .stage-mobile's own max-height cap, so this
     still tracks the banner's *actual* rendered height on a short
     phone instead of the uncapped 142.2vw. */
  .slide-skinator .slide-content{top:calc(min(142.2vw, 100svh - 274px) + 3.75rem);bottom:auto;gap:3.75rem}
  /* two lines instead of one, and bigger — sized and gapped so the
     block still lands on the button position shared with the other two
     slides, with the tagline centered in the space above it rather than
     glued to either the banner or the button. */
  .slide-skinator .slide-tag{font-size:1.7rem;margin:0}
  .slide-skinator .slide-tag em{display:block}

  /* the mobile loop is a proper 9:16 vertical shoot (unlike the desktop
     16:9 one), so plain cover already fills the frame edge to edge with
     only a slight, natural side-crop — no extra scale/shift hack needed.
     Just clear the desktop-only 10%-shrink so it's truly full-bleed. */
  .slide-tstw .slide-bg{transform:none}

  /* the TNM mech/dragoon layers are wide full-canvas exports with the
     character sitting off-center in a lot of empty space — object-fit:
     cover on a tall phone box crops based on height and centers
     horizontally, which cuts straight through both characters. Swapped
     (via <picture>) for tightly-trimmed mobile versions instead, sized
     by intrinsic aspect (object-fit doesn't apply once nothing needs
     cropping) and pushed slightly past the left/right edges so they
     read as closing in from off-screen rather than pinned inside the
     frame. */
  .hl-tnm-mech,.hl-tnm-dragoon{
    inset:auto;top:38%;bottom:auto;translate:0 -50%;
    width:62vw;height:auto;object-fit:contain;
  }
  .hl-tnm-mech{left:-14vw}
  .hl-tnm-dragoon{right:-14vw}
  /* the title moves down to sit between the characters and the button,
     instead of pinned near the top where it competed with the nav. */
  .hl-tnm-logo{top:auto;bottom:16%;width:min(72vw,320px)}
  /* fills more of the tall frame instead of reading as a thin strip
     with empty sky above and below it. */
  .hl-tnm-buildings{transform:scale(1.4) translateY(-20%)}
}