/* Shadow Development: shared styles. "Moonlit ink": a quiet monochrome studio, so each game brings its own colour.
   Game pages restyle the same tokens (expanse.css .tge, teleran.css .tel). Self-hosted fonts, no external requests. */

@font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
/* The games' faces, used by their pages and cards. */
@font-face { font-family: "Chakra Petch"; src: url("../assets/fonts/chakra-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../assets/fonts/chakra-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../assets/fonts/chakra-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("../assets/fonts/pixelify.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "VT323"; src: url("../assets/fonts/vt323.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../assets/fonts/cinzel-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --void: #0a0a0c;
  --ink: #101013;
  --panel: #151519;
  --panel-2: #1b1b20;
  --line: rgba(236, 235, 230, .1);
  --line-2: rgba(236, 235, 230, .2);
  --text: #ecebe6;
  --muted: #a5a39c;
  --faint: #706e68;
  --ice: #c9d2e3;
  --frost: #f4f3ef;
  --violet: #8e98b3;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --pixel: "Pixelify Sans", "Chakra Petch", system-ui, sans-serif;
  --mono: "VT323", ui-monospace, "Cascadia Mono", monospace;

  /* Themeable type: headings, body, small labels, buttons and nav. */
  --display: var(--serif);
  --display-weight: 400;
  --display-track: -.01em;
  --body: var(--sans);
  --label-font: 500 11.5px/1.3 var(--sans);
  --label-track: .28em;
  --btn-font: 500 14px/1 var(--sans);
  --btn-case: none;
  --btn-track: .01em;
  --btn-radius: 999px;
  --btn-clip: none;
  --nav-font: 500 12px/1 var(--sans);
  --nav-track: .2em;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --cut: 14px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --nav-h: 68px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--text);
  font: 400 clamp(15px, .3vw + 14px, 17px)/1.65 var(--body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: var(--display-weight); line-height: 1.04; letter-spacing: var(--display-track); text-wrap: balance; }
::selection { background: var(--ice); color: var(--void); }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  padding: 10px 16px; background: var(--ice); color: var(--void); font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Film grain over everything: cheap texture that keeps flat black from feeling empty. */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* Pointer spotlight (desktop). */
.spot {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--ice) 6%, transparent), transparent 60%);
}

/* ---------- Boot loader (game pages) ---------- */
.boot {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center;
  background: var(--void); transition: opacity .5s var(--ease), visibility .5s;
}
.boot[hidden] { display: none; }
.boot.is-done { opacity: 0; visibility: hidden; }
.boot__inner { width: min(280px, 80vw); font: var(--label-font); letter-spacing: var(--label-track); color: var(--muted); }
.boot__mark { width: 64px; margin: 0 0 18px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ice) 50%, transparent)); animation: bootPulse 1s var(--ease) infinite alternate; }
.boot__bar { height: 2px; margin-top: 10px; background: var(--line); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ice), #fff); box-shadow: 0 0 12px var(--ice); animation: bootBar .9s var(--ease) forwards; }
@keyframes bootBar { to { width: 100%; } }
@keyframes bootPulse { from { opacity: .7; } to { opacity: 1; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .35s var(--ease), border-color .35s, transform .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: color-mix(in srgb, var(--void) 74%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The studio's signature stays the same on every page. */
.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; }
.brand img { width: 36px; height: 36px; filter: drop-shadow(0 0 10px rgba(244, 243, 239, .25)); transition: transform .5s var(--ease), filter .3s; }
.brand:hover img { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 0 16px rgba(244, 243, 239, .55)); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text b { font: 600 12.5px/1 var(--sans); letter-spacing: .34em; }
.brand__text span { font: italic 400 16px/1.1 var(--serif); letter-spacing: .01em; color: var(--muted); margin-top: 3px; }

.nav__links { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  font: var(--nav-font); letter-spacing: var(--nav-track); text-transform: uppercase; text-decoration: none; color: var(--muted);
  transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 1px;
  background: var(--ice); box-shadow: 0 0 8px var(--ice); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.burger { display: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; position: relative; z-index: 2; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: transform .4s var(--ease), opacity .2s, top .4s var(--ease); }
.burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 23px; right: 18px; } .burger span:nth-child(3) { top: 29px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 23px; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .burger { display: block; }
  .nav__links {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 4px;
    padding: var(--nav-h) var(--gutter) 40px; background: var(--void);
    clip-path: circle(0 at calc(100% - 40px) 34px); visibility: hidden;
    transition: clip-path .6s var(--ease), visibility 0s .6s;
  }
  .nav.is-open .nav__links { clip-path: circle(150% at calc(100% - 40px) 34px); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
  .nav__links a { font: var(--display-weight) clamp(34px, 11vw, 52px)/1 var(--display); letter-spacing: 0; text-transform: none; padding: 8px 0; min-height: 64px; color: var(--text); opacity: 0; transform: translateY(18px); transition: opacity .4s, transform .5s var(--ease); }
  .nav__links a::after { left: 0; right: auto; width: 40px; bottom: 6px; }
  .nav.is-open .nav__links a { opacity: 1; transform: none; }
  .nav.is-open .nav__links li:nth-child(2) a { transition-delay: .06s; }
  .nav.is-open .nav__links li:nth-child(3) a { transition-delay: .12s; }
  .nav.is-open .nav__links li:nth-child(4) a { transition-delay: .18s; }
  .nav.is-open { background: transparent; border-color: transparent; }
  body.menu-open { overflow: hidden; }
  /* Mobile GPUs flicker when a blurred or blended layer sits over canvases and animations that repaint every frame
     (Android Chrome especially). So on phones the bar is solid, and the open menu is opaque with the page under it
     hidden, leaving nothing to composite. site.js also pauses the canvas loops while it's open. */
  .nav.is-scrolled { background: color-mix(in srgb, var(--void) 94%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.menu-open main, body.menu-open .footer, body.menu-open .scan, body.menu-open .spot { visibility: hidden; }
  body.menu-open::after { animation-play-state: paused; }
}
@media (max-width: 360px) { .brand__text span { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--frost); --fg: var(--void);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 0; cursor: pointer; border-radius: var(--btn-radius);
  font: var(--btn-font); letter-spacing: var(--btn-track); text-transform: var(--btn-case); text-decoration: none;
  color: var(--fg); background: var(--bg);
  clip-path: var(--btn-clip);
  transition: transform .35s var(--ease), box-shadow .3s, background .3s;
  overflow: hidden; isolation: isolate;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); clip-path: none; }
.btn--ghost::before { background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--ice) 18%, transparent) 50%, transparent 70%); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ice), 0 0 24px color-mix(in srgb, var(--ice) 15%, transparent); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ice);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; }

.h-xl { font-size: clamp(52px, 10.5vw, 138px); line-height: .9; letter-spacing: -.02em; }
.h-l { font-size: clamp(36px, 5.6vw, 76px); line-height: .98; }
.h-m { font-size: clamp(26px, 3.2vw, 42px); }
.lede { font-size: clamp(17px, 1.2vw + 12px, 21px); color: var(--muted); max-width: 46ch; }
em.soft { font-style: italic; color: var(--ice); }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="soft"] { transform: translateY(16px); filter: blur(8px); }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.no-js [data-reveal] { opacity: 1; transform: none; filter: none; }

/* ---------- Home hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding: calc(var(--nav-h) + 24px) 0 96px; overflow: hidden; isolation: isolate;
}
.hero__field { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 52% at 72% 42%, rgba(201, 210, 227, .1), transparent 70%),
    radial-gradient(50% 40% at 18% 78%, rgba(201, 210, 227, .045), transparent 70%),
    linear-gradient(to bottom, transparent 60%, var(--void));
}
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero__title { margin: 0 0 26px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); animation: rise 1.2s var(--ease) forwards; animation-delay: calc(var(--i) * .14s + var(--boot, 0s)); }
.hero__title .line--italic { font-style: italic; color: var(--ice); padding-left: .04em; }
@keyframes rise { to { transform: none; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__mark { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 1; }
.hero__mark svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.hero__mark .ring { position: absolute; inset: 4%; border: 1px solid var(--line); border-radius: 50%; animation: spin 50s linear infinite; }
.hero__mark .ring::before, .hero__mark .ring::after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--frost); box-shadow: 0 0 14px var(--frost); top: -3px; left: calc(50% - 3px); }
.hero__mark .ring::after { top: auto; bottom: -3px; background: var(--violet); box-shadow: 0 0 14px var(--violet); }
.hero__mark .ring--2 { inset: 14%; border-style: dashed; border-color: rgba(236, 235, 230, .08); animation-duration: 70s; animation-direction: reverse; }
.hero__mark .ring--2::before, .hero__mark .ring--2::after { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.dragon-line { fill: none; stroke: var(--frost); stroke-width: .6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s var(--ease) forwards; animation-delay: calc(.2s + var(--boot, 0s)); }
.dragon-fill, .dragon-facets { opacity: 0; animation: fade 1.2s var(--ease) forwards; animation-delay: calc(1.6s + var(--boot, 0s)); }
.dragon-body { filter: drop-shadow(0 0 22px rgba(244, 243, 239, .28)); }
.dragon-eye { opacity: 0; animation: fade .3s forwards, blink 5s infinite; animation-delay: calc(2.4s + var(--boot, 0s)), calc(4s + var(--boot, 0s)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes blink { 0%, 92%, 100% { opacity: 1; } 95% { opacity: .1; } }
.dragon-glint { opacity: .0; animation: glint 6s 3.4s var(--ease) infinite; }
@keyframes glint { 0% { opacity: 0; transform: translateX(-60%); } 8% { opacity: .75; } 22% { opacity: 0; transform: translateX(60%); } 100% { opacity: 0; transform: translateX(60%); } }

.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font: var(--label-font); letter-spacing: var(--label-track); color: var(--faint); text-decoration: none; }
.scroll-cue i { width: 1px; height: 38px; background: linear-gradient(var(--ice), transparent); animation: cue 2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__mark { order: -1; width: min(62vw, 300px); margin-bottom: -8px; }
}

/* ---------- Marquee ---------- */
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--ink); padding: 20px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; font: 500 clamp(12px, 1vw, 14px)/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.marquee__track span b { font: italic 400 clamp(20px, 1.8vw, 26px)/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--text); }
.marquee__track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(80px, 12vw, 160px) 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(36px, 5vw, 64px); }
.section__head .lede { margin: 0; }
.section__num { margin: 0 0 18px; font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--faint); }

/* ---------- Game cards: each wears its own game's colours ---------- */
.games { display: grid; gap: 28px; }
.gcard {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%;
  position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  text-decoration: none; color: inherit;
  background: linear-gradient(135deg, #140f2a, #0a0816 60%);
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--ease);
  isolation: isolate;
}
.gcard.is-tilting { transition: transform .12s linear; }
.gcard::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
  background: radial-gradient(600px circle at var(--gx) var(--gy), rgba(255, 255, 255, .5), transparent 45%);
}
.gcard:hover::before { opacity: 1; }
.gcard__frame { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.gcard__frame rect, .gcard__frame path { fill: none; stroke: rgba(255, 63, 142, .35); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .4s; }
.gcard:hover .gcard__frame path { stroke: rgba(45, 226, 230, .8); }
.gcard__art { position: relative; min-height: 420px; overflow: hidden; background: #07060d; view-transition-name: tge-art; }
.gcard__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transform: scale(1.06); transition: transform 1.2s var(--ease), filter .6s; filter: saturate(1.1) contrast(1.05); }
.gcard:hover .gcard__art img { transform: scale(1.12); }
.gcard__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, #120e26), repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); pointer-events: none; }
.gcard__phone {
  position: absolute; right: 10%; bottom: -8%; z-index: 2; width: clamp(120px, 34%, 210px); aspect-ratio: 720 / 1560;
  border-radius: 22px; padding: 6px; background: #0d0b18; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px rgba(0, 0, 0, .6), 0 0 50px rgba(255, 63, 142, .25);
  transform: rotate(6deg) translateZ(40px); transition: transform .9s var(--ease);
}
.gcard:hover .gcard__phone { transform: rotate(2deg) translateY(-14px); }
.gcard__phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 17px; position: static; transform: none; }
.gcard__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 56px); }
.gcard__status { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 6px 12px; font: 400 18px/1 var(--mono); letter-spacing: .1em; color: #ffd27a; background: rgba(255, 179, 71, .08); box-shadow: inset 0 0 0 1px rgba(255, 179, 71, .35); }
.gcard__status i { width: 8px; height: 8px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 10px #ffb347; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.gcard__title { font-family: var(--pixel); font-weight: 700; font-size: clamp(34px, 4.6vw, 64px); line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
.gcard__title span { display: block; color: #2de2e6; text-shadow: 0 0 22px rgba(45, 226, 230, .6); }
.gcard__desc { color: var(--muted); margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tags li { padding: 7px 11px; font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }
.gcard__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 12px; font: 600 12.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #2de2e6; min-height: 44px; }
.gcard__cta svg { width: 22px; transition: transform .4s var(--ease); }
.gcard:hover .gcard__cta svg { transform: translateX(8px); }
.gcard:focus-visible { outline: 2px solid #2de2e6; outline-offset: 4px; }

/* Project Teleran's card: art on the right, lantern gold, a landscape screen instead of a phone. */
.gcard--tel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: linear-gradient(225deg, #1c150c, #0a0b12 60%); }
.gcard--tel .gcard__art { order: 2; view-transition-name: tel-art; }
.gcard--tel .gcard__art img { object-position: center 40%; filter: saturate(1.15) contrast(1.05); }
.gcard--tel .gcard__art::after { background: linear-gradient(270deg, transparent 55%, #140f0a), radial-gradient(60% 50% at 70% 40%, transparent, rgba(5, 6, 11, .35)); }
.gcard--tel .gcard__frame path { stroke: rgba(242, 196, 106, .35); }
.gcard--tel:hover .gcard__frame path { stroke: rgba(242, 196, 106, .85); }
.gcard__screen {
  position: absolute; left: 8%; bottom: 8%; z-index: 2; width: clamp(150px, 46%, 300px); aspect-ratio: 16 / 9; padding: 5px;
  background: linear-gradient(160deg, #3a2d18, #120e08); box-shadow: 0 0 0 1px rgba(242, 196, 106, .35), 0 30px 60px rgba(0, 0, 0, .6), 0 0 50px rgba(242, 160, 60, .25);
  transform: rotate(-4deg) translateZ(40px); transition: transform .9s var(--ease);
}
.gcard--tel:hover .gcard__screen { transform: rotate(-1deg) translateY(-12px); }
.gcard__screen img { position: static; width: 100%; height: 100%; object-fit: cover; transform: none; }
.gcard--tel:hover .gcard__screen img { transform: none; }
.gcard--tel .gcard__status { font: 700 11px/1 "Cinzel", Georgia, serif; letter-spacing: .22em; padding: 8px 12px; color: #f2c46a; background: rgba(242, 196, 106, .08); box-shadow: inset 0 0 0 1px rgba(242, 196, 106, .35); }
.gcard--tel .gcard__status i { background: #f2c46a; box-shadow: 0 0 10px #f2c46a; }
.gcard--tel .gcard__title { font-family: "Cinzel", Georgia, serif; text-transform: none; font-size: clamp(30px, 3.8vw, 54px); line-height: 1; }
.gcard--tel .gcard__title span { color: transparent; background: linear-gradient(180deg, #fff4d2, #f2c46a 55%, #b06f27); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 18px rgba(242, 170, 70, .35)); font-size: 1.3em; }
.gcard--tel .gcard__cta { color: #f2c46a; }
.gcard--tel:focus-visible { outline-color: #f2c46a; }

@media (max-width: 860px) {
  .gcard--tel .gcard__art { order: 0; }
  .gcard--tel .gcard__art::after { background: linear-gradient(180deg, transparent 55%, #140f0a); }
  .gcard { grid-template-columns: 1fr; clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
  .gcard__art { min-height: 0; aspect-ratio: 4 / 3.4; }
  .gcard__art::after { background: linear-gradient(180deg, transparent 55%, #120e26), repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
  .gcard__phone { right: 8%; bottom: 6%; width: clamp(96px, 30%, 160px); }
}

/* ---------- Screenshot gallery + lightbox (site.js gallery) ---------- */
.gallery { position: relative; }
.gallery__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 62vw, 760px); gap: clamp(14px, 2vw, 28px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 30px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 40px; cursor: grab;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.gallery__track.is-drag * { pointer-events: none; }
.shot { scroll-snap-align: center; margin: 0; }
.shot button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; }
.shot figcaption { margin-top: 16px; }
.shot figcaption b { display: block; font: 600 14px/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.shot figcaption span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.gallery__nav { display: flex; gap: 10px; }
.gallery__nav button { width: 52px; height: 52px; display: grid; place-items: center; border: 0; color: var(--text); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; transition: background .3s, box-shadow .3s, color .3s; }
.gallery__nav button:hover { background: color-mix(in srgb, var(--ice) 12%, transparent); box-shadow: inset 0 0 0 1px var(--ice); color: var(--ice); }
.gallery__nav button:disabled { opacity: .35; cursor: default; }
.gallery__nav svg { width: 22px; height: 22px; }
.gallery__progress { height: 2px; margin: 0 var(--gutter); max-width: calc(var(--max) - 2 * var(--gutter)); background: var(--line); }
@media (min-width: 1240px) { .gallery__progress { margin: 0 auto; } }
.gallery__progress i { display: block; height: 100%; width: 20%; background: var(--ice); box-shadow: 0 0 10px var(--ice); transform-origin: left; }

.lightbox { width: min(94vw, 1500px); max-height: 94svh; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.lightbox::backdrop { background: rgba(4, 3, 9, .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lightbox[open] { animation: lbIn .45s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: scale(.92) translateY(20px); } }
.lightbox img { width: auto; max-width: 100%; max-height: calc(94svh - 70px); margin: 0 auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 80px color-mix(in srgb, var(--ice) 20%, transparent); }
.lightbox p { margin: 14px 0 0; text-align: center; font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.lightbox__close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 52px; height: 52px; border: 0; background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 30px/1 var(--sans); cursor: pointer; }

/* ---------- Studio ---------- */
.studio { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.studio__copy p { color: var(--muted); max-width: 54ch; }
.studio__copy p strong { color: var(--text); font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 32px; }
.stat { background: var(--void); padding: 22px 20px; }
.stat b { display: block; font: 400 clamp(48px, 5vw, 72px)/.9 var(--display); color: var(--frost); }
.stat span { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.pillars { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: p; border-top: 1px solid var(--line); }
.pillar {
  position: relative; padding: 26px 8px 26px 70px; border-bottom: 1px solid var(--line); counter-increment: p;
  transition: background .4s, padding .5s var(--ease);
}
.pillar::before { content: "0" counter(p); position: absolute; left: 8px; top: 24px; font: italic 400 28px/1 var(--display); color: var(--ice); }
.pillar:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--ice) 6%, transparent), transparent); padding-left: 78px; }
.pillar h3 { font-size: 26px; margin-bottom: 6px; }
.pillar p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .studio { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .stats { grid-template-columns: 1fr; } .stat { display: flex; align-items: baseline; gap: 14px; } .pillar { padding-left: 56px; } .pillar::before { left: 4px; } }

/* ---------- CTA band ---------- */
.cta {
  position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 72px);
  background: radial-gradient(70% 120% at 85% 50%, rgba(201, 210, 227, .09), transparent 65%), linear-gradient(120deg, #141418, #0c0c0f);
  border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(236, 235, 230, .035) 0 1px, transparent 1px 72px); mask-image: radial-gradient(circle at 85% 50%, #000, transparent 70%); -webkit-mask-image: radial-gradient(circle at 85% 50%, #000, transparent 70%); animation: gridDrift 24s linear infinite; }
@keyframes gridDrift { to { background-position: 72px 0; } }
.cta > * { position: relative; }
.cta h2 { margin-bottom: 10px; }
.cta p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* ---------- Page header (inner pages) ---------- */
.page-head { position: relative; padding: calc(var(--nav-h) + clamp(56px, 10vw, 120px)) 0 clamp(40px, 6vw, 72px); overflow: hidden; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 82% 0%, rgba(201, 210, 227, .1), transparent 70%), radial-gradient(40% 60% at 8% 10%, rgba(201, 210, 227, .05), transparent 70%); }
.page-head .lede { margin-top: 20px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.mailbox { position: relative; padding: clamp(28px, 4vw, 48px); background: linear-gradient(140deg, var(--panel), var(--ink)); border: 1px solid var(--line); overflow: hidden; }
.mailbox::after { content: ""; position: absolute; inset: auto -20% -60% 30%; height: 120%; background: radial-gradient(closest-side, rgba(201, 210, 227, .12), transparent); pointer-events: none; }
.mailbox__label { font: var(--label-font); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--ice); }
.mailbox__email { display: block; margin: 14px 0 26px; font: 400 clamp(26px, 3.6vw, 46px)/1.1 var(--display); color: var(--text); text-decoration: none; overflow-wrap: anywhere; transition: color .3s, text-shadow .3s; }
.mailbox__email:hover { color: var(--frost); text-shadow: 0 0 30px rgba(244, 243, 239, .35); }
.mailbox__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.copied { display: inline-flex; align-items: center; font: var(--label-font); letter-spacing: .12em; color: var(--ice); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.copied.is-on { opacity: 1; transform: none; }
.topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-top: 24px; }
.topic { padding: 22px; border: 1px solid var(--line); background: var(--ink); transition: border-color .3s, transform .4s var(--ease); }
.topic:hover { border-color: var(--line-2); transform: translateY(-3px); }
.topic h3 { font-size: 24px; margin-bottom: 6px; }
.topic p { margin: 0; color: var(--muted); font-size: 14px; }
.details { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.details li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.details li span:first-child { font: var(--label-font); letter-spacing: .2em; color: var(--faint); text-transform: uppercase; padding-top: 3px; }
.details a { color: var(--frost); text-underline-offset: 3px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .details li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Legal ---------- */
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.legal__toc { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 2px; font-size: 14px; }
.legal__toc a { padding: 8px 12px; color: var(--muted); text-decoration: none; border-left: 1px solid var(--line); transition: color .2s, border-color .2s; }
.legal__toc a:hover { color: var(--text); border-color: var(--ice); }
.prose { max-width: 70ch; color: #c9c7c0; }
.prose h2 { font-size: clamp(26px, 2.8vw, 34px); margin: 1.9em 0 .55em; color: var(--text); scroll-margin-top: calc(var(--nav-h) + 20px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font: 600 15px/1.3 var(--sans); letter-spacing: .02em; margin: 1.6em 0 .5em; color: var(--text); }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--ice); }
.prose a { color: var(--frost); text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose .meta { font: var(--label-font); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.callout { padding: 18px 20px; margin: 0 0 1.5em; border-left: 2px solid var(--ice); background: color-mix(in srgb, var(--ice) 5%, transparent); color: var(--text); }
@media (max-width: 860px) { .legal { grid-template-columns: 1fr; } .legal__toc { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); } }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 2; padding: clamp(56px, 8vw, 96px) 0 32px; border-top: 1px solid var(--line); background: linear-gradient(var(--void), color-mix(in srgb, var(--void) 70%, #000)); overflow: hidden; }
.footer__big { font: var(--display-weight) clamp(64px, 17vw, 260px)/.8 var(--display); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(236, 235, 230, .14); white-space: nowrap; margin: 0 0 clamp(32px, 5vw, 56px); user-select: none; }
.footer__big span { transition: color .6s var(--ease), -webkit-text-stroke-color .6s; }
.footer__big:hover span { color: color-mix(in srgb, var(--ice) 6%, transparent); -webkit-text-stroke-color: color-mix(in srgb, var(--ice) 40%, transparent); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; }
.footer h3 { font: var(--label-font); letter-spacing: var(--label-track); color: var(--faint); text-transform: uppercase; margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer ul a { display: inline-flex; align-items: center; min-height: 36px; color: var(--muted); text-decoration: none; transition: color .2s; overflow-wrap: anywhere; }
.footer ul a:hover { color: var(--text); }
.footer__about { color: var(--muted); font-size: 14px; max-width: 38ch; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
.footer__grid > * { min-width: 0; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 400px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--nav-h) var(--gutter); }
.lost__code { margin: 0; font: italic 400 clamp(130px, 34vw, 300px)/.85 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(236, 235, 230, .3); background: radial-gradient(circle at 50% 40%, rgba(244, 243, 239, .9), rgba(201, 210, 227, .2) 45%, transparent 70%) center / 160% 160% no-repeat; -webkit-background-clip: text; background-clip: text; animation: moonDrift 9s ease-in-out infinite alternate; }
@keyframes moonDrift { from { background-position: 30% 30%; } to { background-position: 70% 60%; } }

/* ---------- Page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .45s var(--ease-in) both; }
::view-transition-new(root) { animation: vtIn .7s var(--ease) both; }
::view-transition-group(tge-art), ::view-transition-group(tel-art) { animation-duration: .75s; animation-timing-function: var(--ease); }
@keyframes vtOut { to { opacity: 0; transform: scale(.98); filter: blur(6px); } }
@keyframes vtIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .hero__title .line > span { transform: none; }
  body::after { animation: none; }
  .marquee__track { animation: none; }
}