/* VERTPIX — site styles.
   Fonts are self-hosted (assets/fonts); unicode-range means browsers only
   download the subsets a page actually uses. */

/* ---------- Fonts ---------- */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/geist-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/geist-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/geist-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/geist-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/geist-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 300 600; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/martian-mono-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 300 600; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/martian-mono-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 300 600; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/martian-mono-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 300 600; font-stretch: 100%; font-display: swap; src: url("../assets/fonts/martian-mono-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 600; font-display: swap; src: url("../assets/fonts/unbounded-cyrillic-ext.woff2") format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 600; font-display: swap; src: url("../assets/fonts/unbounded-cyrillic.woff2") format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 600; font-display: swap; src: url("../assets/fonts/unbounded-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 600; font-display: swap; src: url("../assets/fonts/unbounded-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 600; font-display: swap; src: url("../assets/fonts/unbounded-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --ink: #1b1e24;
  --ink-soft: #50566a;
  --muted: #a0a5af;
  --panel: #eceef1;
  --panel-2: #e3e6eb;
  --pill: #2a2c31;
  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Martian Mono', monospace;
  --font-display: 'Unbounded', sans-serif;
  --raised: -7px -7px 16px rgba(255,255,255,.95), 9px 9px 20px rgba(150,160,178,.6);
  --raised-white: -7px -7px 16px rgba(255,255,255,1), 9px 9px 20px rgba(150,160,178,.55);
  --chip: -4px -4px 10px rgba(255,255,255,1), 5px 5px 12px rgba(150,160,178,.5);
  --inset-dark: inset 3px 3px 7px rgba(0,0,0,.5), inset -2px -2px 6px rgba(255,255,255,.08);
  --inset-light: inset 3px 3px 7px rgba(150,160,178,.5), inset -3px -3px 7px rgba(255,255,255,.95);
}

/* ---------- Base ---------- */
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #000; }
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
button { margin: 0; border: 0; font: inherit; color: inherit; text-align: inherit; }
:focus-visible { outline: 2px solid #8ab4ff; outline-offset: 3px; }

/* ---------- Stage (fixed 1280x780 design, scaled to fit by main.js) ---------- */
/* overflow: clip (not hidden) so focusing a button can never scroll the scaled stage */
.stage { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; overflow: clip; background: #000;
  touch-action: none; /* swipes drive the strip (main.js) instead of panning/zooming the page */
  -webkit-tap-highlight-color: transparent; }
.fit-box { position: absolute; left: 0; top: 0; width: 1280px; height: 780px; transform-origin: 0 0; }
.scene {
  width: 100%; height: 100%; position: relative; overflow: hidden; overflow: clip;
  background: linear-gradient(270deg, #ffffff 0%, #f4f4f4 18%, #d9d9d9 32%, #a6a6a6 42%, #6b6b6b 50%, #333333 58%, #121212 68%, #000000 82%, #000000 100%);
}

/* ---------- Floating service card ---------- */
.svc-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; overflow: clip; }
.svc-panel {
  position: absolute; left: 0; top: 0; width: 400px; height: 372px;
  opacity: 0; visibility: hidden; will-change: transform, opacity;
  padding: 14px; box-sizing: border-box; border-radius: 28px;
  background: var(--panel); color: var(--ink); font-family: var(--font-sans);
  box-shadow: -10px -10px 26px rgba(255,255,255,.85), 14px 14px 34px rgba(0,0,0,.4);
}
.svc { position: absolute; inset: 14px; display: flex; flex-direction: column; gap: 16px; opacity: 0; transition: opacity .5s ease; }
.svc-media {
  height: 196px; border-radius: 18px; overflow: hidden; position: relative; background: var(--panel-2);
  box-shadow: inset 5px 5px 12px rgba(150,160,178,.5), inset -5px -5px 12px rgba(255,255,255,.85);
}
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; display: block; }
.slot {
  position: absolute; inset: 0; border-radius: 12px;
  background: rgba(127,127,127,.08) url("../assets/img/slot-icon.svg") center / 28px 28px no-repeat;
}
.slot::after { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--ink); border-radius: 12px; opacity: .35; }
.svc-body { display: flex; flex-direction: column; gap: 10px; padding: 0 8px; }
.svc-meta { display: flex; justify-content: space-between; font: 400 10.5px var(--font-mono); letter-spacing: .12em; color: var(--ink-soft); }
.svc-name { font: 300 30px/1.08 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.svc-spec { font: 400 10.5px var(--font-mono); letter-spacing: .1em; color: var(--ink-soft); }

/* ---------- Strip canvas + "about" hotspot ---------- */
.strip { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: default; touch-action: none; }
.about-btn {
  position: absolute; left: 0; top: 0; z-index: 0;
  opacity: 0; visibility: hidden; pointer-events: none; cursor: pointer;
  display: flex; align-items: center; padding: 14px; border-radius: 999px;
  background: var(--panel); color: var(--ink); font-family: var(--font-sans);
  box-shadow: -8px -8px 20px rgba(255,255,255,.95), 10px 10px 24px rgba(150,160,178,.55);
}
.about-btn-arrow {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 500 18px var(--font-sans);
  box-shadow: inset 4px 4px 9px rgba(150,160,178,.5), inset -4px -4px 9px rgba(255,255,255,.95);
}

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; font-family: var(--font-sans); }
.hud-top { display: grid; grid-template-columns: 1fr 1fr; padding: 28px 40px; align-items: center; }
.logo { height: 13px; width: auto; display: block; }

.hero { position: relative; margin: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 48px; font-weight: 300; }
.hero-pins { position: absolute; left: 0; top: -70px; width: 100%; height: calc(100% + 140px); }
.hero-word { position: relative; font: 300 120px/1 var(--font-display); letter-spacing: -.04em; color: transparent; }
.hero-meets {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  padding: 9px 14px; border-radius: 999px; font: 400 11px var(--font-mono); letter-spacing: .2em;
  color: #fff; background: var(--pill); box-shadow: var(--inset-dark);
}

.scroll-ui { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.status {
  font: 400 10.5px var(--font-mono); letter-spacing: .16em; color: #fff;
  padding: 8px 14px; border-radius: 999px; background: var(--pill); box-shadow: var(--inset-dark);
}
.progress-track {
  width: 180px; height: 6px; border-radius: 999px; background: var(--pill); overflow: hidden;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,.55), inset -1px -1px 3px rgba(255,255,255,.08);
}
.progress-fill { width: 0%; height: 100%; border-radius: 999px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.7); }

.intro { display: grid; grid-template-columns: 1fr 1fr; padding: 0 56px 52px; align-items: end; }
.intro-col { display: flex; flex-direction: column; gap: 22px; max-width: 420px; }
.intro p { margin: 0; font: 400 17px/1.55 var(--font-sans); color: var(--ink-soft); text-wrap: pretty; }
/* "scroll" vs "swipe": same touch test as the status hints in main.js */
.verb-swipe { display: none; }
@media (pointer: coarse) { .verb-scroll { display: none; } .verb-swipe { display: inline; } }

.cta {
  align-self: flex-start; pointer-events: auto; padding: 18px 28px; border-radius: 18px;
  font: 500 15px var(--font-sans); color: var(--ink); background: var(--panel-2); box-shadow: var(--raised);
}
.cta--light { align-self: auto; pointer-events: none; background: #fff; box-shadow: var(--raised-white); }

/* ---------- About screen ---------- */
.about {
  position: absolute; inset: 0; z-index: 20; visibility: hidden;
  user-select: none; -webkit-user-select: none;
  clip-path: circle(0px at 85% 85%); font-family: var(--font-sans);
  background: linear-gradient(90deg, #000000 0%, #000000 calc(50% - 128px), #262626 calc(50% - 26px), #b8b8b8 calc(50% + 77px), #f2f2f2 calc(50% + 179px), #ffffff 100%);
}
.waves { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; touch-action: none; }
.about-inner { position: absolute; top: 0; bottom: 0; left: 50%; width: 1280px; margin-left: -640px; pointer-events: none; }
.portrait-wrap { position: absolute; left: 0; top: 0; width: 680px; height: 100%; pointer-events: none; transform-origin: 50% 50%; mix-blend-mode: screen; }
.portrait {
  position: absolute; left: 60px; top: 60px; width: 560px; height: calc(100% - 120px);
  object-fit: contain; opacity: .92; display: block;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
.waves-hint {
  position: absolute; left: 530px; bottom: 40px; width: 200px; display: flex; justify-content: center;
  pointer-events: none; font: 400 10px var(--font-mono); letter-spacing: .16em; color: #8a8f99; text-align: center;
}
.about-text {
  position: absolute; left: 752px; right: 72px; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  color: var(--ink); transform-origin: 20% 50%; will-change: transform, opacity, filter;
}
.chip-label {
  align-self: flex-start; padding: 9px 14px; border-radius: 999px;
  font: 400 11px var(--font-mono); letter-spacing: .18em; color: var(--ink-soft); box-shadow: var(--inset-light);
}
.about h2 { margin: 0; font: 300 48px/1.06 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.about p { margin: 0; font: 400 17px/1.6 var(--font-sans); color: var(--ink-soft); text-wrap: pretty; }
.skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; font: 400 10.5px var(--font-mono); letter-spacing: .1em; color: var(--ink); }
.skills li { padding: 11px 16px; border-radius: 999px; background: #fff; box-shadow: var(--chip); }
.about-foot { display: flex; align-items: center; gap: 22px; padding-top: 6px; }
.signature { display: flex; flex-direction: column; gap: 4px; }
.signature-name { font: 400 15px var(--font-display); }
.signature-role { font: 400 10.5px var(--font-mono); letter-spacing: .1em; color: var(--ink-soft); }
.back-btn {
  position: absolute; top: 28px; right: 40px; z-index: 3; cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px;
  font: 500 11px var(--font-mono); letter-spacing: .12em; color: var(--ink); background: #fff;
  box-shadow: -5px -5px 12px rgba(255,255,255,1), 6px 6px 14px rgba(150,160,178,.5);
}

/* ---------- Phone layout ----------
   main.js switches to a 430-unit-wide stage at this width (keep COMPACT_MQ in sync).
   The dark "vertex" side is on top and the light "pixel" side below. */
@media (max-width: 760px) {
  .scene { background: linear-gradient(0deg, #ffffff 0%, #f4f4f4 24%, #d9d9d9 38%, #a6a6a6 48%, #6b6b6b 56%, #333333 64%, #121212 74%, #000000 88%, #000000 100%); }

  /* service card */
  .svc-panel { width: 300px; height: 296px; padding: 12px; border-radius: 24px; }
  .svc { inset: 12px; gap: 12px; }
  .svc-media { height: 150px; border-radius: 14px; }
  .svc-body { gap: 8px; padding: 0 6px; }
  .svc-meta, .svc-spec { font-size: 9.5px; }
  .svc-name { font-size: 24px; }

  /* HUD */
  .hud-top { padding: 22px 24px; }
  .hero {
    position: absolute; left: 0; right: 0; top: 44%; margin-top: -127px; /* centred on the seam (COMPACT_SEAM) */
    flex-direction: column; align-items: stretch; padding: 0 24px;
  }
  .hero-word { font-size: 72px; }
  .hero-word:first-of-type { align-self: flex-start; }
  .hero-word--right { align-self: flex-end; }
  .hero-meets { position: relative; left: auto; top: auto; transform: none; align-self: center; margin: 40px 0; }

  .scroll-ui { bottom: 28px; }
  .status { white-space: nowrap; }
  .intro { grid-template-columns: 1fr; padding: 0 24px 96px; }
  .intro-col { gap: 16px; max-width: none; }
  .intro p { font-size: 15px; line-height: 1.5; }
  .cta { padding: 14px 22px; border-radius: 16px; font-size: 14px; }

  /* About: portrait on top, string band at 43%, text below */
  .about { background: linear-gradient(180deg, #000000 0%, #000000 calc(43% - 60px), #262626 calc(43% - 12px), #b8b8b8 calc(43% + 36px), #f2f2f2 calc(43% + 84px), #ffffff 100%); }
  .about-inner { left: 0; width: 100%; margin-left: 0; }
  .portrait-wrap { width: 100%; height: calc(43% - 76px); }
  .portrait { left: 24px; top: 56px; width: calc(100% - 48px); height: calc(100% - 56px); }
  .waves-hint { left: 0; width: 100%; top: calc(43% - 72px); bottom: auto; }
  .about-text { left: 24px; right: 24px; top: 51%; bottom: 16px; justify-content: flex-start; gap: 14px; transform-origin: 50% 20%; }
  .chip-label { padding: 7px 12px; font-size: 10px; }
  .about h2 { font-size: 28px; }
  .about p { font-size: 14px; line-height: 1.5; }
  .skills { gap: 8px; font-size: 9.5px; }
  .skills li { padding: 8px 11px; }
  .about-foot { gap: 16px; padding-top: 2px; }
  .back-btn { top: 16px; right: 16px; padding: 11px 16px; font-size: 10px; }
}