/* =========================================================
   Singularborn — studio website
   Dark cinematic layout, red accent, Oswald + Inter
   ========================================================= */

:root {
  --black: #080808;
  --dark: #111111;
  --card: #161616;
  --border: #2b2b2b;
  --border-soft: rgba(255, 255, 255, .1);
  --muted: #929296;
  --white: #ffffff;
  --red: #e60012;
  --font-heading: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --container: 1600px;
  --nav-h: 64px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font: 300 16px/1.65 var(--font-body);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--white);
}

p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

::selection { background: var(--red); color: #fff; }

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 400;
  padding: 11px 18px;
  background: var(--red);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.skip-link:focus { top: 14px; }

/* ---------- shared type ---------- */

.kicker {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red);
}

.section-title {
  margin-bottom: 22px;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  text-wrap: balance;
}

.tick {
  flex: none;
  color: var(--red);
  font-weight: 700;
}

/* ---------- navigation ---------- */

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: rgba(8, 8, 8, .82);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .3s ease, box-shadow .3s ease;
}

.site-nav.is-scrolled {
  background: rgba(8, 8, 8, .96);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container);
  height: var(--nav-h);
  margin-inline: auto;
  padding-inline: 24px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-logo-mark {
  width: 34px;
  height: auto;
  flex: none;
  color: #8a2122;
  transition: transform .5s var(--ease), color .3s ease;
}
.nav-logo:hover .nav-logo-mark { transform: rotate(-14deg) scale(1.06); color: var(--red); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-links { display: flex; align-items: center; gap: 30px; }

.nav-links a {
  position: relative;
  padding: 4px 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .25s ease;
}
.nav-links a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  transition: right .35s var(--ease);
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.is-active::after { right: 0; }

.nav-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, .2);
}

.nav-socials { display: flex; align-items: center; gap: 16px; }
.nav-socials a {
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: color .2s ease, transform .25s var(--ease);
}
.nav-socials a:hover { color: var(--white); transform: translateY(-2px); }
.nav-socials svg { width: 17px; height: 17px; }

.nav-sound {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease;
}
.nav-sound:hover,
.nav-sound.is-on { color: var(--white); }

.nav-sound-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.nav-sound-icon { width: 19px; height: 19px; overflow: visible; }

.nav-sound-wave {
  opacity: 0;
  transform-origin: 9px 12px;
  transform: scale(.7);
  transition: opacity .3s ease, transform .4s var(--ease);
}
.nav-sound-slash { transition: opacity .25s ease; }
/* Dark halo under the slash so it cuts cleanly through the speaker */
.nav-sound-slash-gap { stroke: #0a0a0a; stroke-width: 3.8; }

.nav-sound.is-on .nav-sound-wave { stroke: var(--red); }
.nav-sound.is-on .nav-sound-wave { opacity: 1; transform: none; animation: soundWave 2.4s ease-in-out infinite; }
.nav-sound.is-on .nav-sound-wave-2 { animation-delay: .3s; }
.nav-sound.is-on .nav-sound-slash { opacity: 0; }

@keyframes soundWave {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 38px;
  padding: 9px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease,
    transform .3s var(--ease), box-shadow .3s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
}
.btn:hover { transform: translateY(-3px); }
.btn:hover::before { transform: translateX(110%); transition: transform .7s var(--ease); }
.btn:active { transform: translateY(-1px) scale(.98); transition-duration: .1s; }

.btn-solid {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}
.btn-solid:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 14px 34px rgba(230, 0, 18, .35);
}

.btn-outline {
  background: rgba(0, 0, 0, .18);
  border-color: var(--border);
  color: var(--white);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, .04);
  border-color: var(--white);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.steam-icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn-arrow {
  display: inline-block;
  transition: transform .25s var(--ease);
}
.btn:hover .btn-arrow { transform: translateY(3px); }

/* ---------- hero ---------- */

/* The hero is driven by shared custom properties so the background and the
   image inside the logo stay in lockstep: --cam-* push and pan the camera,
   --shake-* add a handheld wobble, --gx/--gy jump the film grain and
   --flick dims the exposure. Pans are fractions of the hero size and stay
   within what the zoom keeps covered, so the image edge never shows. */
@property --cam-s { syntax: "<number>"; inherits: true; initial-value: 1.08; }
@property --cam-x { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --cam-y { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --shake-x { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --shake-y { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --flick { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --gx { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --gy { syntax: "<length>"; inherits: true; initial-value: 0px; }

.hero {
  --scale: var(--cam-s);
  --tx: calc(var(--hw, 100vw) * (var(--cam-x) + var(--shake-x)));
  --ty: calc(var(--hh, 100vh) * (var(--cam-y) + var(--shake-y)));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 120px 24px 90px;
  overflow: hidden;
  text-align: center;
  animation:
    heroCamera 22s ease-in-out infinite,
    heroShake 6.5s ease-in-out infinite,
    heroGrain .5s steps(1) infinite,
    heroFlicker 3.2s steps(1) infinite;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("assets/img/hero.jpg") center / cover no-repeat;
  filter: brightness(.25);
  transform: scale(var(--scale)) translate3d(var(--tx), var(--ty), 0);
}

/* An operator working the shot: push in, drift, ease back, push in again */
@keyframes heroCamera {
  0%, 100% { --cam-s: 1.08; --cam-x: 0; --cam-y: 0; }
  22% { --cam-s: 1.24; --cam-x: -.03; --cam-y: -.015; }
  40% { --cam-s: 1.17; --cam-x: .025; --cam-y: -.008; }
  62% { --cam-s: 1.32; --cam-x: .004; --cam-y: -.025; }
  80% { --cam-s: 1.14; --cam-x: -.02; --cam-y: .01; }
}

@keyframes heroShake {
  0%, 100% { --shake-x: 0; --shake-y: 0; }
  15% { --shake-x: .0025; --shake-y: -.002; }
  31% { --shake-x: -.0015; --shake-y: .0025; }
  48% { --shake-x: .003; --shake-y: .001; }
  64% { --shake-x: -.0025; --shake-y: -.0015; }
  82% { --shake-x: .001; --shake-y: .003; }
}

@keyframes heroGrain {
  0% { --gx: 0px; --gy: 0px; }
  10% { --gx: -38px; --gy: -71px; }
  20% { --gx: -109px; --gy: 32px; }
  30% { --gx: 54px; --gy: -125px; }
  40% { --gx: -23px; --gy: 117px; }
  50% { --gx: -101px; --gy: 62px; }
  60% { --gx: 101px; --gy: 0px; }
  70% { --gx: 0px; --gy: 86px; }
  80% { --gx: 23px; --gy: 148px; }
  90% { --gx: -70px; --gy: 47px; }
}

@keyframes heroFlicker {
  0% { --flick: 0; }
  7% { --flick: .07; }
  9% { --flick: .02; }
  31% { --flick: .05; }
  33% { --flick: 0; }
  52% { --flick: .09; }
  54% { --flick: .03; }
  56% { --flick: 0; }
  78% { --flick: .06; }
  80% { --flick: 0; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to bottom, rgba(8, 8, 8, .6) 0%, transparent 45%, var(--black) 100%);
}

/* Film grain and exposure flicker so the still reads like footage */
.hero-grain {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.hero-grain::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .1;
  transform: translate3d(var(--gx), var(--gy), 0);
}
.hero-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 100%), #000;
  opacity: var(--flick);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1400px;
  opacity: var(--hero-fade, 1);
  transform: translate3d(0, var(--hero-shift, 0px), 0);
}

.hero-logo { animation: heroLogoIn 1.6s var(--ease) both; }
.hero-sub { animation: heroIn 1.1s var(--ease) .35s both; }

/* Opacity only: moving the logo box would knock its image out of register */
@keyframes heroLogoIn {
  from { opacity: 0; }
}

@keyframes heroIn {
  from { opacity: 0; transform: translateY(24px); }
}

.hero-logo {
  margin: 0;
  font-size: clamp(4rem, 14.5vw, 14rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.035em;
  white-space: nowrap;
  color: var(--white);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .8));
}

/* The letters show hero.jpg exactly where .hero-bg draws it, at full
   brightness, with the same camera move, a coarser grain and the same flicker.
   main.js measures --hw/--hh (hero), --cw/--ch (cover size) and --lx/--ly
   (logo offset inside the hero). */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-logo {
    --img-x: calc(var(--hw, 100vw) / 2 + var(--scale) * (var(--tx) - var(--cw, 100vw) / 2) - var(--lx, 0px));
    --img-y: calc(var(--hh, 100vh) / 2 + var(--scale) * (var(--ty) - var(--ch, 100vh) / 2) - var(--ly, 0px) - var(--hero-shift, 0px));
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .4 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(rgba(0, 0, 0, var(--flick)), rgba(0, 0, 0, var(--flick))),
      url("assets/img/hero.jpg");
    background-size:
      340px 340px,
      auto,
      calc(var(--cw, 100vw) * var(--scale)) calc(var(--ch, 100vh) * var(--scale));
    background-position:
      var(--gx) var(--gy),
      0 0,
      var(--img-x) var(--img-y);
    background-repeat: repeat, no-repeat, no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Same type as .game-kicker, set larger */
.hero-sub {
  max-width: 760px;
  margin: 26px 0 0;
  font-family: var(--font-heading);
  font-size: clamp(14px, 1.45vw, 20px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--red);
}

.hero-scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transform: translateX(-50%);
  color: var(--muted);
  opacity: .72;
  transition: opacity .25s ease, color .25s ease;
}
.hero-scroll:hover { opacity: 1; color: var(--white); }

.hero-scroll-text {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.hero-scroll-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, #fff, transparent);
  animation: scrollPulse 1.9s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: .28; transform: scaleY(.72); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ---------- section heading ---------- */

.section-head {
  margin-bottom: 56px;
  padding-left: 16px;
  border-left: 4px solid var(--red);
}
.section-head .kicker { margin-bottom: 10px; }
.js .section-head.reveal { border-left-color: transparent; transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .8s ease .2s; }
.js .section-head.reveal.is-visible { border-left-color: var(--red); }
.section-head h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: .01em;
}
.section-head > p:last-child {
  margin: 7px 0 0;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- games ---------- */

.games {
  position: relative;
  z-index: 2;
  max-width: 1700px;
  margin-inline: auto;
  padding: 96px 24px 40px;
}

/* Games carousel: every slide sits in the same grid cell, so the stage keeps
   the height of the tallest slide and switching never makes the page jump. */
.games-carousel { position: relative; }

.games-slides { display: grid; }

.games-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, transform .75s var(--ease), visibility 0s linear .75s;
}
.games-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease .08s, transform .75s var(--ease), visibility 0s;
}

.games-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}

.games-dots { display: flex; align-items: center; gap: 30px; }

.games-dot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease;
}
.games-dot::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  transition: width .5s var(--ease), background .3s ease;
}
.games-dot-num { color: var(--red); font-weight: 600; }
.games-dot:hover { color: var(--white); }
.games-dot.is-active { color: var(--white); }
.games-dot.is-active::before { width: 46px; background: var(--red); }

.games-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .35s var(--ease);
}
.games-arrow svg { width: 12px; height: 24px; }
.games-arrow:hover { color: var(--white); border-color: var(--red); background: var(--red); }

/* Stacked layouts: slides keep their own height (a short teaser shouldn't
   stretch to the tall Dead Mile card); main.js scrolls back to the top. */
@media (max-width: 1200px) {
  .games-slides { position: relative; }
  .games-slide:not(.is-active) { position: absolute; top: 0; right: 0; left: 0; }
  .game-block.game-soon { min-height: 520px; }
}

/* Wide screens: thin chevrons in the gutters beside the card */
@media (min-width: 1201px) {
  .games-carousel { padding-inline: 76px; }
  .games-arrow {
    position: absolute;
    top: calc(50% - 40px);
    width: 56px;
    height: 120px;
    margin-top: -60px;
    background: none;
    border: 0;
    border-radius: var(--radius);
  }
  .games-arrow svg { width: 22px; height: 44px; }
  .games-arrow-prev { left: 4px; }
  .games-arrow-next { right: 4px; }
  .games-arrow:hover { color: var(--red); background: none; }
  .games-arrow-prev:hover { transform: translateX(-5px); }
  .games-arrow-next:hover { transform: translateX(5px); }
}

/* Next project teaser (doubled class to beat the base .game-block grid) */
.game-block.game-soon {
  flex: 1;
  grid-template-columns: 1fr;
  place-items: center;
  margin-bottom: 0;
  isolation: isolate;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 115%, rgba(230, 0, 18, .16), transparent 70%),
    #0c0c0c;
}

.game-soon-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.game-soon-bg::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07;
  animation: grainJump .5s steps(1) infinite;
}

.game-soon-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(68%, 720px);
  color: var(--white);
  opacity: .035;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: soonBreathe 7s ease-in-out infinite;
}

@keyframes soonBreathe {
  0%, 100% { opacity: .03; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  50% { opacity: .07; transform: translate(-50%, -50%) rotate(-6deg) scale(1.04); }
}

.game-soon-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  padding: 56px 28px;
}

.game-soon-title {
  margin-bottom: 20px;
  font-size: clamp(3rem, 7vw, 6.2rem);
  font-weight: 700;
  letter-spacing: .01em;
  animation: soonFlicker 5s steps(1) infinite;
}

@keyframes soonFlicker {
  0%, 100% { opacity: 1; }
  41% { opacity: .55; }
  42% { opacity: 1; }
  44% { opacity: .7; }
  45% { opacity: 1; }
}

.game-soon-text {
  max-width: 42ch;
  margin-bottom: 36px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

.game-soon-follow { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.game-soon-follow-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.game-soon .contact-socials { justify-content: center; }

.game-block {
  display: grid;
  grid-template-columns: 7fr 5fr;
  min-height: 560px;
  margin-bottom: 44px;
  overflow: hidden;
  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .35);
}

.game-media {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  overflow: hidden;
  background: #0b0b0b;
}

.game-viewer {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  overflow: hidden;
  cursor: zoom-in;
}

.game-viewer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.9) saturate(.92);
  transition: filter .4s ease, transform 1.2s var(--ease);
}
.game-viewer:hover img { filter: brightness(.98) saturate(1); transform: scale(1.025); }

.game-media-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(4, 4, 4, .68) 0%, transparent 28%);
}

.game-expand {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: rgba(8, 8, 8, .68);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, border-color .2s ease, scale .25s var(--ease);
}
.game-expand:hover {
  background: var(--red);
  border-color: var(--red);
  scale: 1.08;
}
.game-expand:active { scale: .96; }
.game-expand svg { width: 17px; height: 17px; }

/* Screenshot dots; the active one stretches into a pill that fills with the
   autoplay timer */
.game-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  background: rgba(8, 8, 8, .5);
  border-radius: 999px;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.game-dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, .38);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: width .45s var(--ease), background .25s ease;
}
/* Bigger hit area than the visible dot */
.game-dot::before {
  content: "";
  position: absolute;
  inset: -8px -4px;
}
.game-dot:hover { background: rgba(255, 255, 255, .8); }
.game-dot.is-active { width: 30px; background: rgba(255, 255, 255, .25); }
.game-dot:focus-visible { outline-offset: 4px; }

/* main.js moves this into the active dot and advances when it ends */
.game-progress {
  position: absolute;
  inset: 0;
  background: var(--red);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.game-progress.is-running { animation: shotProgress 3s linear forwards; }
.games-carousel.is-paused .game-progress { animation-play-state: paused; }
@media (hover: hover) {
  .game-viewer:hover .game-progress { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .game-progress { transform: none; }
}

@keyframes shotProgress {
  to { transform: scaleX(1); }
}

.game-badges {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* keep clear of the expand button in the top-right corner */
  max-width: calc(100% - 96px);
}
.game-badges span {
  padding: 7px 12px;
  background: rgba(0, 0, 0, .74);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.game-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  padding: clamp(28px, 4vw, 64px);
}

.game-kicker {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--red);
}

.game-title {
  margin-bottom: 10px;
  font-size: clamp(2.2rem, 4.4vw, 4rem);
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .3s ease;
}
.game-block:hover .game-title { color: var(--red); }
.game-block { transition: transform .6s var(--ease), border-color .4s ease, box-shadow .4s ease; }

/* 3D tilt: main.js sets --rx/--ry (degrees) and --mx/--my (pointer, %) */
.game-block[data-tilt] { position: relative; }
.game-block.is-tilting {
  transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
  transition: transform .18s ease-out, border-color .4s ease, box-shadow .4s ease;
}
.game-block[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .1), transparent 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.game-block.is-tilting::after { opacity: 1; }
.game-block.is-tilting .game-viewer img {
  transform: scale(1.06) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: filter .4s ease, transform .25s ease-out;
}
.game-block:hover {
  border-color: #3a3a3a;
  box-shadow: 0 40px 110px rgba(0, 0, 0, .5);
}

.game-sub {
  margin: 0 0 22px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}

.game-desc {
  max-width: 54ch;
  margin: 0 0 24px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
}
.game-desc em { font-style: normal; font-weight: 500; color: var(--white); }

.game-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.game-points li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}
.game-points .tick { margin-top: 2px; font-size: 12px; }
.game-points li { transition: color .3s ease; }
.game-points li:hover { color: #c4c4c8; }

.game-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.game-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--white);
  transition: color .25s ease;
}
.game-cta:hover { color: var(--red); }
.game-cta:hover .btn-arrow { transform: translateX(6px); }

.game-meta {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- about ---------- */

.about {
  position: relative;
  margin-top: 90px;
  padding: 110px 24px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--dark);
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
  max-width: 1400px;
  margin-inline: auto;
}

.about-lead {
  margin: 0 0 34px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
}

/* Developer card */
.dev {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.dev-photo {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.dev-name {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}
.dev-role {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.story p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--muted);
}
.story p + p { margin-top: 14px; }

.philosophy {
  padding: clamp(26px, 3vw, 44px);
  background: #090909;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.philosophy h3 {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .1em;
}

.philosophy ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.philosophy li {
  display: flex;
  gap: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.philosophy li strong { font-weight: 600; color: var(--white); }
.philosophy li { transition: transform .35s var(--ease), color .35s ease; }
.philosophy li:hover { transform: translateX(6px); color: #c4c4c8; }
.philosophy .tick { margin-top: 2px; font-size: 12px; }

/* ---------- contact ---------- */

.contact {
  max-width: var(--container);
  margin-inline: auto;
  padding: 110px 24px 60px;
}

.contact-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--border);
}

.contact-text {
  max-width: 460px;
  margin: 0 0 30px;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--muted);
}

.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.social {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s var(--ease);
}
.social svg { width: 21px; height: 21px; }
.social:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translateY(-4px);
}

.contact-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 26px;
}

.contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease;
}
.contact-mail:hover { color: var(--red); }

.mail-icon {
  width: clamp(24px, 2.6vw, 34px);
  height: clamp(24px, 2.6vw, 34px);
  flex: none;
  color: var(--red);
  transition: transform .25s var(--ease);
}
.contact-mail:hover .mail-icon { transform: translateX(6px); }

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.contact-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 28px;
}
.contact-bottom p {
  font-size: 12.5px;
  color: var(--muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}
.footer-links a {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.footer-links a:hover { color: var(--white); }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 48px;
  background: rgba(4, 4, 4, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: min(1500px, 90vw);
  max-height: 78vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox-caption {
  max-width: min(1500px, 90vw);
  margin-top: 18px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--muted);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--red);
  border-color: var(--red);
}

.lightbox-close {
  top: 22px;
  right: 22px;
  width: 46px;
  height: 46px;
  font-size: 26px;
  line-height: 1;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  width: 50px;
  height: 64px;
  font-size: 30px;
  line-height: 1;
  transform: translateY(-50%);
}
.lightbox-prev { left: 22px; }
.lightbox-next { right: 22px; }

/* ---------- cursor smoke ----------
   z-index -1 puts the canvas above the page backgrounds (body, .hero-bg,
   .hero-scrim, .about::before at -3/-2) but below all in-flow content,
   cards and buttons. Keep .hero and .about free of their own stacking
   context and opaque background, or the smoke will disappear behind them. */

.cursor-smoke {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .9;
}

/* ---------- reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
  .game-block { grid-template-columns: 1fr; min-height: 0; }
  .game-media { height: auto; min-height: 0; }
  .game-viewer { flex: none; height: clamp(300px, 46vw, 470px); min-height: 0; }
  .game-title { font-size: clamp(2.2rem, 7vw, 4rem); }
  .about-grid { grid-template-columns: 1fr; gap: 44px; align-items: start; }
  .about-text { max-width: 820px; }
}

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .nav-divider { display: none; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    left: 0;
    z-index: 2;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    background: rgba(8, 8, 8, .98);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateY(-120%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .38s var(--ease), visibility .38s var(--ease);
  }
  .nav-links.is-open {
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links a {
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    color: var(--white);
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a::after { display: none; }
  .nav-links a:hover,
  .nav-links a.is-active { color: var(--red); }


  .contact-top { grid-template-columns: 1fr; gap: 44px; align-items: start; }
  .contact-right { align-items: flex-start; }
}

@media (max-width: 760px) {
  :root { --nav-h: 60px; }

  .nav-inner { padding-inline: 16px; }
  .nav-logo { font-size: 15px; letter-spacing: .07em; }
  .nav-logo-mark { width: 30px; }
  .nav-right { gap: 18px; }
  .nav-socials { display: none; }
  .nav-sound-label { display: none; }

  .hero { padding: 120px 16px 90px; }
  .hero-logo { font-size: 15vw; }
  .hero-sub { max-width: 460px; font-size: 13px; letter-spacing: .2em; }
  .hero-scroll { bottom: 18px; }

  .games { padding: 78px 16px 32px; }
  .section-head { padding-left: 16px; margin-bottom: 38px; }
  .section-head h2 { font-size: clamp(1.85rem, 7vw, 2.6rem); }

  .game-viewer { height: 300px; }
  .game-body { padding: 26px 22px; gap: 28px; }
  .game-title { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .game-sub { font-size: 11px; letter-spacing: .24em; }
  .game-desc { font-size: 14.5px; }
  .game-points li { font-size: 13.5px; }
  .game-foot { align-items: flex-start; flex-direction: column; }
  .game-badges { top: 14px; left: 14px; }
  .game-badges span { padding: 6px 10px; font-size: 9px; }
  .game-expand { top: 12px; right: 12px; width: 34px; height: 34px; }
  .game-expand svg { width: 15px; height: 15px; }
  .game-dots { bottom: 12px; gap: 7px; padding: 8px 11px; }

  .game-block.game-soon { min-height: 460px; }
  .game-soon-body { padding: 44px 22px; }
  .games-dots { gap: 18px; }
  .games-dot { font-size: 11px; letter-spacing: .14em; }
  .games-dot::before { width: 14px; }
  .games-dot.is-active::before { width: 26px; }
  .games-dot:not(.is-active) .games-dot-name { display: none; }


  .about { padding: 80px 16px; }
  .about-grid { gap: 38px; }
  .about-lead { font-size: 16px; }
  .philosophy { padding: 26px 22px; }

  .contact { padding: 80px 16px 36px; }
  .contact-mail {
    font-size: clamp(1.35rem, 6.2vw, 2rem);
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .contact-buttons { width: 100%; flex-direction: column; }
  .contact-buttons .btn { width: 100%; }
  .contact-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { gap: 18px; }

  .lightbox { padding: 70px 14px 24px; }
  .lightbox img { max-height: 70vh; }
  .lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .lightbox-prev,
  .lightbox-next { width: 42px; height: 54px; font-size: 26px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

@media (max-width: 420px) {
  .nav-logo { font-size: 14px; letter-spacing: .06em; }
  .hero-logo { font-size: 15vw; }
  .game-title { font-size: 2.3rem; }
  .contact-mail { font-size: 1.22rem; }
}

/* Touch devices: the shared-variable hero restyles the whole section and
   repaints the logo every frame, which phones can't keep up with. Here the
   camera holds still, grain and flicker run as plain compositor animations
   on the background only, and blur effects and the sound toggle are off. */
@media (hover: none) and (pointer: coarse) {
  .hero { animation: none; }
  .hero-grain::before { animation: grainJump .5s steps(1) infinite; }
  .hero-grain::after { animation: flickerFade 3.2s steps(1) infinite; }
  .hero-logo { filter: none; }
  .hero-content { opacity: 1; transform: none; }

  .site-nav,
  .nav-links,
  .game-dots,
  .game-expand,
  .game-badges span {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-nav { background: rgba(8, 8, 8, .95); }

  .nav-sound { display: none; }
}

@keyframes grainJump {
  0% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(-38px, -71px, 0); }
  20% { transform: translate3d(-109px, 32px, 0); }
  30% { transform: translate3d(54px, -125px, 0); }
  40% { transform: translate3d(-23px, 117px, 0); }
  50% { transform: translate3d(-101px, 62px, 0); }
  60% { transform: translate3d(101px, 0, 0); }
  70% { transform: translate3d(0, 86px, 0); }
  80% { transform: translate3d(23px, 148px, 0); }
  90% { transform: translate3d(-70px, 47px, 0); }
}

@keyframes flickerFade {
  0% { opacity: 0; }
  7% { opacity: .07; }
  9% { opacity: .02; }
  31% { opacity: .05; }
  33% { opacity: 0; }
  52% { opacity: .09; }
  54% { opacity: .03; }
  56% { opacity: 0; }
  78% { opacity: .06; }
  80% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
}