/* ==========================================================================
   GP.OS shell styles — georgepeyrouton.org
   Layout, shared presentational classes, reveal system, boot screen, nav,
   mobile menu, HUD, home hero, next-view blocks, footer, page transitions
   and the custom cursor. Builds on the tokens in core.css.
   ========================================================================== */

/* ------------------------------------------------------------------- base */
html {
  scrollbar-color: rgba(var(--accent-rgb), 0.35) var(--bg);
  scrollbar-width: thin;
  /* keep the scrollbar's space reserved so overlays that lock scrolling never shift the layout */
  scrollbar-gutter: stable;
}

html.is-booting,
html.menu-open {
  overflow: hidden;
}

body {
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.25);
  border: 2px solid var(--bg);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.5);
}

#app {
  position: relative;
  z-index: var(--z-content);
  min-height: 100vh;
}
@supports (overflow: clip) {
  #app {
    overflow-x: clip;
  }
}
#app:focus {
  outline: none;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: calc(var(--z-boot) + 1);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #04050d;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus {
  transform: none;
}

/* text scramble glyphs (GP.ui.scramble) */
.scramble-char {
  color: var(--accent);
  opacity: 0.75;
}

/* ================================================== SHARED CLASSES (public) */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
/* nested containers collapse so views can wrap their own content safely */
.container .container {
  max-width: none;
  padding-inline: 0;
}

/* view heading block: .view-head > .view-index, .view-kicker, h2.view-title, p.view-sub */
.view-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 10px;
  margin: 0 0 clamp(32px, 6vw, 64px);
}
.view-index {
  justify-self: start;
  padding: 4px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}
.view-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  line-height: 1.5;
  text-transform: uppercase;
}
.view-kicker::after {
  content: '';
  flex: 1 1 24px;
  min-width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55), transparent);
}
.view-title {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 88px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-shadow:
    -0.03em 0 rgba(var(--accent-2-rgb), 0.55),
    0.03em 0 rgba(var(--accent-rgb), 0.55),
    0 0 30px rgba(var(--accent-rgb), 0.25);
  overflow-wrap: break-word;
}
.view-sub {
  grid-column: 1 / -1;
  max-width: 62ch;
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
}

/* glass panel with neon corner brackets */
.panel {
  position: relative;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.panel::before,
.panel::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent);
  opacity: 0.85;
  pointer-events: none;
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), opacity 0.3s;
}
.panel::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: var(--radius);
}
.panel::after {
  right: -1px;
  bottom: -1px;
  border-top: 0;
  border-left: 0;
  border-bottom-right-radius: var(--radius);
}
.panel:hover::before,
.panel:hover::after {
  width: 34px;
  height: 34px;
  opacity: 1;
}
.panel--glow {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.08), 0 18px 60px rgba(0, 0, 0, 0.35), 0 0 40px rgba(var(--accent-rgb), 0.12);
}

/* buttons (also for links styled as buttons) */
.btn {
  --tick: var(--accent);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  min-height: 50px;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.35s var(--ease-out);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.28) 45%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--ease-out);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  pointer-events: none;
  background:
    linear-gradient(var(--tick), var(--tick)) top left / 8px 1.5px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top left / 1.5px 8px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 8px 1.5px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 1.5px 8px no-repeat;
  opacity: 0.9;
  transition: inset 0.35s var(--ease-out);
}
.btn:hover,
.btn:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.9);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 10px 32px rgba(var(--accent-rgb), 0.22), inset 0 0 22px rgba(var(--accent-rgb), 0.12);
}
.btn:hover::before {
  transform: translateX(120%);
}
.btn:hover::after {
  inset: 7px;
}
.btn:active {
  filter: brightness(1.15);
}
.btn__arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.btn:hover .btn__arrow {
  transform: translateX(5px);
}
.btn--primary {
  --tick: rgba(4, 5, 13, 0.55);
  border-color: transparent;
  background-color: var(--accent);
  background-image: linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #ffffff));
  color: #04050d;
  box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  border-color: transparent;
  color: #04050d;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.5), 0 0 42px rgba(var(--accent-rgb), 0.6), 0 12px 40px rgba(var(--accent-rgb), 0.3);
}
.btn--ghost {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.025);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(var(--accent-rgb), 0.08);
}
.btn--sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.btn[disabled],
.btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* small pill tag */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

/* mono tiny uppercase letter-spaced label */
.hud-label {
  color: rgba(var(--accent-rgb), 0.85);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* accent gradient text */
.grad-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* status dot (pulsing) */
.status-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: gp-pulse 1.6s ease-in-out infinite;
}

/* tilt glare (GP.ui.tilt) */
.tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.16), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.is-tilting > .tilt-glare {
  opacity: 1;
}

/* ================================================================ REVEALS */
:where(.gp-js) [data-reveal] {
  transition:
    opacity 0.9s var(--ease-out),
    transform 1s var(--ease-out),
    filter 0.9s var(--ease-out),
    clip-path 1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.gp-js [data-reveal]:not(.is-revealed) {
  opacity: 0;
}
.gp-js [data-reveal='up']:not(.is-revealed) {
  transform: translate3d(0, 42px, 0);
}
.gp-js [data-reveal='down']:not(.is-revealed) {
  transform: translate3d(0, -42px, 0);
}
.gp-js [data-reveal='left']:not(.is-revealed) {
  transform: translate3d(-56px, 0, 0);
}
.gp-js [data-reveal='right']:not(.is-revealed) {
  transform: translate3d(56px, 0, 0);
}
.gp-js [data-reveal='zoom']:not(.is-revealed) {
  transform: scale(0.88);
}
.gp-js [data-reveal='blur']:not(.is-revealed) {
  filter: blur(16px);
  transform: translate3d(0, 16px, 0) scale(1.02);
}
/* glitch is hidden by opacity only: a clip-path here would make IntersectionObserver
   report a zero-area intersection, so the element would never be revealed */
.gp-js [data-reveal='glitch'].is-revealed {
  animation: gp-reveal-glitch 0.7s steps(1, end) var(--reveal-delay, 0ms) both;
}

/* ================================================================== VIEWS */
.view {
  position: relative;
  display: none;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + 56px);
  padding-bottom: 24px;
}
.view.is-active {
  display: block;
}
.view:focus {
  outline: none;
}
.view-inner {
  position: relative;
}

/* arcade view header (shell) */
.arcade-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin: calc(clamp(32px, 6vw, 64px) * -0.5) 0 clamp(24px, 4vw, 40px);
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), rgba(8, 12, 30, 0.4));
}
.arcade-coin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.arcade-coin .hud-label {
  animation: gp-blink-soft 2.4s steps(1) infinite;
}

/* =================================================================== BOOT */
#boot {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  display: grid;
  place-items: center;
  padding: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.boot-panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  transition: transform 0.85s var(--ease-in-out) 0.28s;
}
.boot-panel--top {
  top: 0;
  background-position: 0 0;
}
.boot-panel--bottom {
  bottom: 0;
  background-position: 0 100%;
}
.boot-panel--top::after,
.boot-panel--bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  box-shadow: 0 0 18px var(--accent);
  opacity: 0;
  transition: opacity 0.3s 0.2s;
}
.boot-panel--top::after {
  bottom: 0;
}
.boot-panel--bottom::after {
  top: 0;
}
.boot-seam {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  margin-top: -1px;
  background: #fff;
  box-shadow: 0 0 14px var(--accent), 0 0 40px var(--accent), 0 0 80px rgba(var(--accent-rgb), 0.6);
  opacity: 0;
  transform: scaleX(0);
  pointer-events: none;
}
.boot-scan {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
  pointer-events: none;
  transition: opacity 0.3s;
}
.boot-inner {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-out), filter 0.4s ease;
}
.boot-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.boot-emblem {
  flex: none;
  width: clamp(72px, 20vw, 96px);
  height: clamp(72px, 20vw, 96px);
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.75));
}
.boot-emblem path {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.be-hex {
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linejoin: round;
}
.be-hex--inner {
  stroke: rgba(var(--accent-2-rgb), 0.55);
  stroke-width: 1;
}
.be-letter {
  stroke: var(--text);
  stroke-width: 3.8;
  stroke-linecap: square;
}
.be-comet {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}
#boot.is-drawing .be-hex {
  animation: gp-draw 1.3s var(--ease-out) forwards;
}
#boot.is-drawing .be-hex--inner {
  animation-delay: 0.25s;
}
#boot.is-drawing .be-letter {
  animation: gp-draw 1s var(--ease-out) 0.55s forwards;
}
#boot.is-drawing .be-p {
  animation-delay: 0.75s;
}
#boot.is-drawing .be-comet {
  stroke-dasharray: 0.12 0.88;
  stroke-dashoffset: 0;
  animation: gp-comet 1.6s linear 1.2s infinite, gp-fade-in 0.4s ease 1.2s forwards;
}
#boot.is-express.is-drawing .be-hex,
#boot.is-express.is-drawing .be-letter {
  animation-duration: 0.5s;
  animation-delay: 0s;
}
#boot.is-express.is-drawing .be-comet {
  animation-delay: 0.3s, 0.3s;
}
.boot-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.boot-meta__title {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(15px, 4.4vw, 20px);
  font-weight: 900;
  letter-spacing: 0.12em;
}
.boot-meta__title em {
  color: var(--accent);
  font-style: normal;
}
.boot-meta__sub {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
#boot-mem {
  color: var(--accent);
}
.boot-log {
  /* 7 log lines (+ the granted line's top margin) */
  min-height: calc(7 * 1.75em + 6px);
  font-family: var(--font-mono);
  font-size: clamp(11px, 3.3vw, 13.5px);
  line-height: 1.75;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}
.boot-line {
  min-height: 1.75em;
}
.boot-line:last-child:not(.boot-line--granted)::after {
  content: '\2588';
  margin-left: 2px;
  color: var(--accent);
  animation: gp-blink 0.8s steps(1) infinite;
}
.boot-ok {
  color: var(--lime);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}
.boot-line--granted {
  margin-top: 6px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.boot-hi {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
  animation: gp-flicker 0.5s steps(2) 3;
}
.boot-tail {
  color: var(--accent-2);
  text-shadow: 0 0 10px rgba(var(--accent-2-rgb), 0.6);
}
/* the granted line wraps onto a second row on phones */
@media (max-width: 600px) {
  .boot-log {
    min-height: calc(8 * 1.75em + 6px);
  }
}
.boot-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.boot-bar {
  position: relative;
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.12);
}
.boot-bar__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.boot-pct {
  min-width: 4ch;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.boot-skip {
  margin: 18px 0 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  animation: gp-blink-soft 1.8s ease-in-out infinite;
}
.boot-skip--touch {
  display: none;
}
@media (pointer: coarse) {
  .boot-skip--fine {
    display: none;
  }
  .boot-skip--touch {
    display: inline;
  }
}

/* exit: content blooms away, a seam flashes, the two halves split open */
#boot.is-exiting {
  pointer-events: none;
}
#boot.is-exiting .boot-inner {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(6px);
}
#boot.is-exiting .boot-scan {
  opacity: 0;
}
#boot.is-exiting .boot-seam {
  animation: gp-seam 0.75s var(--ease-out) forwards;
}
#boot.is-exiting .boot-panel--top {
  transform: translateY(-101%);
}
#boot.is-exiting .boot-panel--bottom {
  transform: translateY(101%);
}
#boot.is-exiting .boot-panel::after {
  opacity: 1;
}
#boot.is-express .boot-panel {
  transition-duration: 0.55s;
  transition-delay: 0.12s;
}
#boot.is-express.is-exiting .boot-seam {
  animation-duration: 0.45s;
}

/* ==================================================================== NAV */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-nav) + 2);
  height: 2px;
  pointer-events: none;
}
.scroll-progress__bar {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
  transform: scaleX(0);
  transform-origin: left;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top);
  transition: transform 0.9s var(--ease-out) 0.25s;
}
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(4, 5, 13, 0.78), rgba(4, 5, 13, 0.5));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  transition: background-color 0.4s, opacity 0.4s;
}
.site-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.75), rgba(var(--accent-2-rgb), 0.6), transparent);
  opacity: 0.45;
  transition: opacity 0.4s;
  pointer-events: none;
}
.site-nav.is-scrolled::before {
  background: linear-gradient(180deg, rgba(4, 5, 13, 0.92), rgba(4, 5, 13, 0.78));
}
.site-nav.is-scrolled::after {
  opacity: 0.9;
}
html.is-booting .site-nav {
  transform: translateY(-110%);
}

.nav-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1480px;
  height: var(--nav-h);
  margin: 0 auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.nav-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.logo-svg {
  width: 42px;
  height: 42px;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.7));
  transition: transform 0.6s var(--ease-back), filter 0.4s;
}
.logo-svg path {
  fill: none;
}
.logo-hex {
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.logo-hex--inner {
  stroke: rgba(var(--accent-2-rgb), 0.6);
  stroke-width: 1.2;
  stroke-dasharray: 0.035 0.03;
  transform-box: fill-box;
  transform-origin: center;
  animation: gp-spin 16s linear infinite;
}
.logo-letter {
  stroke: var(--text);
  stroke-width: 3.8;
  stroke-linecap: square;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.logo-comet {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.12 0.88;
  animation: gp-comet 3.4s linear infinite;
}
html.is-booted .logo-hex--outer {
  animation: gp-draw 1.4s var(--ease-out) 0.35s both;
}
html.is-booted .logo-letter {
  animation: gp-draw 1s var(--ease-out) 0.8s both;
}
.nav-logo:hover .logo-svg {
  transform: rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.95));
}
.nav-logo:hover .logo-letter {
  animation: gp-redraw 0.8s var(--ease-out) both;
}
.nav-logo:active .logo-svg {
  transform: scale(0.9);
}
.nav-logo__text {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.nav-logo__os {
  color: var(--accent);
  font-weight: 500;
}

.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nav-links > li {
  position: relative;
  z-index: 1;
}
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 7px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s;
}
.nav-link__num {
  color: var(--text-faint);
  font-size: 10px;
  transition: color 0.25s;
}
.nav-link:hover,
.nav-link.is-active {
  color: var(--text);
}
.nav-link:hover .nav-link__num,
.nav-link.is-active .nav-link__num {
  color: var(--accent);
}
.nav-links > .nav-indicator {
  position: absolute;
  top: calc(50% - 20px);
  left: 0;
  z-index: 0;
  width: 0;
  height: 40px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 7px;
  background: rgba(var(--accent-rgb), 0.08);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out), opacity 0.3s;
}
.nav-indicator::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(var(--accent-rgb), 0.6);
}

.nav-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
}
.theme-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
.theme-dot {
  --dot: var(--accent);
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--dot);
  opacity: 0.6;
  transform: scale(0.85);
  transition: transform 0.35s var(--ease-back), opacity 0.25s, box-shadow 0.3s;
}
.theme-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
.theme-dot:hover {
  opacity: 1;
  transform: scale(1.15);
}
.theme-dot.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--dot), 0 0 14px var(--dot);
}

.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  white-space: nowrap;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
.sound-toggle:hover {
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--text);
}
.eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.eq i {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7);
  transform-origin: bottom;
  animation: gp-eq 0.9s ease-in-out infinite alternate;
}
.eq i:nth-child(2) {
  animation-duration: 0.65s;
  animation-delay: -0.3s;
}
.eq i:nth-child(3) {
  animation-duration: 1.1s;
  animation-delay: -0.5s;
}
.eq i:nth-child(4) {
  animation-duration: 0.75s;
  animation-delay: -0.15s;
}
.sound-toggle.is-off .eq i {
  background: var(--text-faint);
  box-shadow: none;
  animation: none;
  transform: scaleY(0.2);
}

.nav-burger {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.45s var(--ease-out), opacity 0.3s, top 0.45s var(--ease-out), right 0.45s var(--ease-out);
}
.nav-burger span:nth-child(1) {
  top: 14px;
}
.nav-burger span:nth-child(2) {
  top: 20px;
  right: 18px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.nav-burger span:nth-child(3) {
  top: 26px;
}
.nav-burger[aria-expanded='true'] {
  border-color: rgba(var(--accent-rgb), 0.6);
}
.nav-burger[aria-expanded='true'] span:nth-child(1) {
  top: 20px;
  transform: rotate(45deg);
}
.nav-burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
  right: 12px;
}
.nav-burger[aria-expanded='true'] span:nth-child(3) {
  top: 20px;
  transform: rotate(-45deg);
}

/* Nav width budget, 8 links. JetBrains Mono is 0.6em wide, so at 11.5px + 0.14em a label char is
   exactly 8.51px: the 8 labels (53 chars) = 451px.
     links  with "[0n]" nums: 451 + 8 × (24 pad + 36 num/gap) + 7 × 2 gap ≈ 942px
            without nums:     451 + 8 × 24 + 14                          ≈ 657px
            compact (9px pad, 0.1em, no nums)                            ≈ 585px
     logo 42px (+ ~86px "GP.OS" text) · tools: 7 dots 126 + 14 + "SFX OFF" toggle 101 = 241px
     (36px with the label hidden) · bar gaps 36px · side gutters 2 × min(4vw, 48px).
   Every step keeps >= 17px for a classic scrollbar plus a safety margin, so the bar never wraps:
     >= 1500  everything             ~1443 + 17 = 1460
     1420-1499 no logo text           1357 + 17 = 1374
     1180-1419 no [0n] numbers        1063 + 17 = 1080 (at 1180)
     1024-1179 compact, SFX icon only  921 + 17 =  938 (at 1024)
     <= 1023  burger menu
   The JS twin of the burger breakpoint is matchMedia('(min-width: 1024px)') in main.js. */
@media (max-width: 1499px) {
  .nav-logo__text {
    display: none;
  }
}
@media (max-width: 1419px) {
  .nav-link__num {
    display: none;
  }
}
@media (max-width: 1179px) {
  .nav-link {
    padding: 0 9px;
    letter-spacing: 0.1em;
  }
  .sound-toggle__label {
    display: none;
  }
  .nav-bar .sound-toggle {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}
@media (max-width: 1023px) {
  .nav-links,
  .nav-bar .theme-dots,
  .nav-bar .sound-toggle {
    display: none;
  }
  .nav-burger {
    display: block;
  }
  .nav-tools {
    margin-left: auto;
  }
}

/* ============================================================ MOBILE MENU */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: calc(var(--nav-h) + 28px + env(safe-area-inset-top)) max(var(--gutter), 20px) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(var(--accent-rgb), 0.16), transparent 60%),
    radial-gradient(100% 50% at 0% 100%, rgba(var(--accent-2-rgb), 0.12), transparent 60%),
    var(--bg);
  clip-path: circle(0px at calc(100% - 38px) calc(36px + env(safe-area-inset-top)));
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-in-out), visibility 0s linear 0.7s;
}
.mobile-menu.is-open {
  clip-path: circle(150% at calc(100% - 38px) calc(36px + env(safe-area-inset-top)));
  visibility: visible;
  transition: clip-path 0.7s var(--ease-in-out), visibility 0s;
}
.mobile-menu__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.mobile-menu__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  padding: 6px 0;
  color: var(--text);
  font-family: var(--font-display);
  /* 8 entries: "ACHIEVEMENTS" (~9.2em) must fit one line at 320px, and the list a 667px-tall phone */
  font-size: clamp(23px, 7.2vw, 56px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.08;
  text-decoration: none;
  opacity: 0;
  transform: translate3d(0, 28px, 0) skewY(4deg);
  transition: opacity 0.4s var(--ease-out), transform 0.6s var(--ease-out), color 0.25s, text-shadow 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu.is-open .mobile-link {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.14s + var(--i, 0) * 0.05s), calc(0.14s + var(--i, 0) * 0.05s), 0s, 0s;
}
.mobile-link__num {
  flex: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.mobile-link__text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mobile-link:hover,
.mobile-link:focus-visible,
.mobile-link.is-active {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.55);
}
.mobile-link.is-active .mobile-link__text::after {
  content: '\25C0';
  margin-left: 0.3em;
  font-size: 0.4em;
  vertical-align: middle;
}
.mobile-menu__foot {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  opacity: 0;
  transition: opacity 0.4s;
}
.mobile-menu.is-open .mobile-menu__foot {
  opacity: 1;
  transition-delay: 0.5s;
}
.mobile-menu__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mobile-menu__row .theme-dots {
  gap: 12px;
}
.mobile-menu__row .theme-dot {
  width: 18px;
  height: 18px;
}
.mobile-menu__hint {
  margin: 4px 0 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}

/* ==================================================================== HUD */
.hud-view,
.hud-clock {
  position: fixed;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: var(--z-hud);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(4, 5, 13, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  line-height: 1.4;
  white-space: nowrap;
  transition: opacity 0.6s, transform 0.7s var(--ease-out);
}
.hud-view {
  /* sits to the right of the secrets chip (.sec-chip, ~110px wide) */
  left: calc(max(14px, env(safe-area-inset-left)) + 126px);
  bottom: calc(23px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.hud-view::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  vertical-align: 1px;
}
.hud-clock {
  right: max(14px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  -webkit-user-select: none;
}
.hud-time {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
  font-variant-numeric: tabular-nums;
}
.hud-date {
  color: var(--text-faint);
}
html.is-booting .hud-view,
html.is-booting .hud-clock {
  opacity: 0;
  transform: translateY(24px);
}
html.is-booted .hud-view,
html.is-booted .hud-clock {
  transition-delay: 0.5s, 0.5s;
}
html.menu-open .hud-view,
html.menu-open .hud-clock,
html.menu-open .sec-chip {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
/* the secrets chip is a <button>: keep it out of the tab order while it is hidden behind the menu */
html.menu-open .sec-chip {
  visibility: hidden;
}
@media (max-width: 600px) {
  .hud-date {
    display: none;
  }
  .hud-view,
  .hud-clock {
    bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 5px 8px;
    font-size: 9.5px;
  }
}
@media (max-width: 480px) {
  .hud-view {
    display: none;
  }
}

/* =================================================================== HERO */
#view-home {
  padding-top: var(--nav-h);
  padding-bottom: 0;
}
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  /* minmax(0, 1fr): the nowrap name must never widen the column past the viewport */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  /* a floor, not a cage: the hero grows with its content (marquee at the fold on tall screens) */
  min-height: calc(100vh - var(--nav-h) - 58px);
  min-height: calc(100svh - var(--nav-h) - 58px);
  /* top padding clears the two-line [ BASE ] HUD corner */
  padding: 76px 0 clamp(96px, 13vh, 130px);
  overflow: hidden;
  overflow: clip;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 15%, transparent 72%);
}
.hero-floor {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  z-index: -3;
  height: 46%;
  overflow: hidden;
  transform: perspective(520px) rotateX(68deg);
  transform-origin: 50% 100%;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 65%);
  mask-image: linear-gradient(180deg, transparent, #000 65%);
  pointer-events: none;
}
.hero-floor__grid {
  position: absolute;
  left: 0;
  right: 0;
  top: -60px;
  bottom: 0;
  background-image:
    linear-gradient(rgba(var(--accent-2-rgb), 0.55) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.45) 1.5px, transparent 1.5px);
  background-size: 60px 60px;
  animation: gp-floor 2.2s linear infinite;
}

/* holographic orbit — circles the portrait. Sized from --pw (portrait width, set on .hero-visual);
   --px / --py (mouse parallax, -0.5..0.5) are set on #hero-visual by main.js. The hero clips it. */
.hero-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: calc(var(--pw, 240px) * 1.8);
  height: calc(var(--pw, 240px) * 1.8);
  perspective: 1400px;
  transform: translate(-50%, -50%) translate3d(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -16px), 0);
  transition: transform 1.2s var(--ease-out);
  pointer-events: none;
}
/* a copy of the outer ring cut to its near (lower) half, stacked above the portrait, so the ring
   reads as passing in front of George and behind him */
.hero-orbit--front {
  z-index: 2;
  -webkit-clip-path: inset(50% 0 0 0);
  clip-path: inset(50% 0 0 0);
}
.orbit-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.orbit-ring--1 {
  transform: rotateX(74deg);
}
.orbit-ring--2 {
  inset: 8%;
  transform: rotateX(66deg) rotateY(-30deg);
}
.orbit-ring--3 {
  inset: 16%;
  transform: rotateX(78deg) rotateY(28deg);
}
.orbit-spin {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 50%;
  animation: gp-spin 22s linear infinite;
}
.orbit-spin::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 64%, rgba(var(--accent-rgb), 0.95) 99.4%, transparent 99.6%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.orbit-ring--2 .orbit-spin {
  border-color: rgba(var(--accent-2-rgb), 0.24);
  animation-duration: 30s;
  animation-direction: reverse;
}
.orbit-ring--2 .orbit-spin::before {
  background: conic-gradient(from 0deg, rgba(var(--accent-2-rgb), 0.95) 0%, transparent 34%);
}
.orbit-ring--3 .orbit-spin {
  animation-duration: 14s;
}
.orbit-dot {
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px var(--accent), 0 0 26px var(--accent);
}
.orbit-ring--2 .orbit-dot {
  box-shadow: 0 0 10px var(--accent-2), 0 0 26px var(--accent-2);
}
.orbit-dot--b {
  top: auto;
  bottom: -4px;
  width: 7px;
  height: 7px;
  left: calc(50% - 3.5px);
}
/* reticle: radius ~0.7 × portrait width, so it peeks out around the frame */
.orbit-dial {
  position: absolute;
  inset: 11%;
  border: 1px dashed rgba(var(--accent-rgb), 0.22);
  border-radius: 50%;
  animation: gp-spin 70s linear infinite reverse;
}
.orbit-dial::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(var(--accent-rgb), 0.5) 0 0.6deg, transparent 0.6deg 6deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  opacity: 0.45;
}
/* halo glowing out from behind the frame */
.orbit-core {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-2-rgb), 0.12) 45%, transparent 70%);
  filter: blur(14px);
  animation: gp-core 4.5s ease-in-out infinite;
}

/* hero HUD corners */
.hero-hud {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  pointer-events: none;
}
.hero-hud b {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hero-hud::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.65);
}
.hero-hud--tl {
  top: 24px;
  left: max(var(--gutter), env(safe-area-inset-left));
}
.hero-hud--tl::before {
  top: -9px;
  left: -10px;
  border-right: 0;
  border-bottom: 0;
}
.hero-hud--tr {
  top: 24px;
  right: max(var(--gutter), env(safe-area-inset-right));
  align-items: flex-end;
}
.hero-hud--tr::before {
  top: -9px;
  right: -10px;
  border-left: 0;
  border-bottom: 0;
}
.hero-hud--bl {
  bottom: 28px;
  left: max(var(--gutter), env(safe-area-inset-left));
}
.hero-hud--bl::before {
  bottom: -9px;
  left: -10px;
  border-right: 0;
  border-top: 0;
}
.hero-hud--br {
  bottom: 28px;
  right: max(var(--gutter), env(safe-area-inset-right));
  align-items: flex-end;
}
.hero-hud--br::before {
  bottom: -9px;
  right: -10px;
  border-left: 0;
  border-top: 0;
}
.hero-coords {
  white-space: nowrap;
}
.hero-coords .hud-label {
  font-size: inherit;
  letter-spacing: inherit;
}
/* George's base, under the real coordinates */
.hero-base {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.24em;
  white-space: nowrap;
}
.hero-base::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
}
/* last coordinate digit: flickers like a live fix (opacity only, the value is always the real one) */
.hud-flick {
  font-style: normal;
  animation: gp-flick 3.6s steps(1, end) infinite;
}
.signal {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.signal i {
  width: 3px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6);
  animation: gp-signal 2.6s ease-in-out infinite;
}
.signal i:nth-child(1) { height: 20%; }
.signal i:nth-child(2) { height: 40%; animation-delay: 0.15s; }
.signal i:nth-child(3) { height: 60%; animation-delay: 0.3s; }
.signal i:nth-child(4) { height: 80%; animation-delay: 0.45s; }
.signal i:nth-child(5) { height: 100%; animation-delay: 0.6s; opacity: 0.35; animation-name: gp-signal-weak; }
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lime);
  white-space: nowrap;
}
.neon-meter {
  display: inline-flex;
  gap: 3px;
}
.neon-meter i {
  width: 6px;
  height: 10px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.6);
}
.neon-meter i:nth-child(n + 9) {
  background: rgba(var(--accent-rgb), 0.18);
  box-shadow: none;
}
.neon-meter i:nth-child(8) {
  animation: gp-blink-soft 1.2s steps(1) infinite;
}

/* hero layout: stacked (portrait first) below 960px, split text | portrait from 960px */
.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: clamp(30px, 7vw, 44px);
  width: 100%;
  min-width: 0;
  max-width: var(--maxw);
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* hero content */
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  text-align: center;
}
.hero-kicker {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin: 0 0 clamp(14px, 2.6vh, 28px);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.7vw, 12px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.hero-kicker__sys {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
}
.hero-name {
  width: 100%;
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--name-size, clamp(52px, 13vw, 180px));
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero-line {
  position: relative;
  display: block;
  width: max-content;
  max-width: none;
  margin-inline: auto;
  white-space: nowrap;
  text-shadow:
    -0.035em 0 rgba(var(--accent-2-rgb), 0.7),
    0.035em 0 rgba(var(--accent-rgb), 0.7),
    0 0 0.3em rgba(var(--accent-rgb), 0.35);
}
.hero-line--2 {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  -webkit-text-stroke: max(1.5px, 0.016em) var(--accent);
  text-shadow: none;
  filter: drop-shadow(0 0 0.12em rgba(var(--accent-rgb), 0.55));
}
.hero-line::before,
.hero-line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 100% 0);
  text-shadow: none;
  -webkit-text-stroke: 0;
  pointer-events: none;
}
.hero-line::before {
  color: var(--accent);
  animation: gp-slice-a 5.5s steps(1, end) infinite;
}
.hero-line::after {
  color: var(--accent-2);
  animation: gp-slice-b 5.5s steps(1, end) infinite;
}
.hero-line--2::before,
.hero-line--2::after {
  animation-delay: 1.8s;
}
.hero-name.is-decoding .hero-line::before,
.hero-name.is-decoding .hero-line::after {
  display: none;
}
/* FOUNDER & CEO // PODCAST HOST // RIDGEWOOD, NJ (rebuilt from content.js by main.js) */
.hero-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
  max-width: 100%;
  margin: clamp(16px, 2.4vh, 24px) 0 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 13.5px);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
}
.hero-role__item {
  white-space: nowrap;
}
.hero-role__sep {
  color: var(--accent-2);
  letter-spacing: 0;
  text-shadow: 0 0 10px rgba(var(--accent-2-rgb), 0.9), 0 0 22px rgba(var(--accent-2-rgb), 0.45);
}
.hero-role__sep:nth-of-type(4n) {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9), 0 0 22px rgba(var(--accent-rgb), 0.45);
}
.hero-tagline {
  min-height: 3.3em;
  max-width: 46ch;
  margin: clamp(14px, 2.4vh, 24px) 0 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 1.65;
}
.hero-tagline__prompt {
  margin-right: 0.6em;
  color: var(--accent);
}
.caret {
  display: inline-block;
  width: 0.6em;
  height: 1.15em;
  margin-left: 3px;
  vertical-align: -0.2em;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: gp-blink 1s steps(1) infinite;
}
.hero-intro {
  max-width: 58ch;
  margin: 8px 0 0;
  color: var(--text-dim);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
}
.hero-intro:empty {
  display: none;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(22px, 3.6vh, 36px);
}
/* small text link next to the buttons */
.hero-tour {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s;
}
.hero-tour::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 11px;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.hero-tour__arrow {
  display: inline-block;
  color: var(--accent);
  transition: transform 0.4s var(--ease-out);
}
.hero-tour:hover,
.hero-tour:focus-visible {
  color: var(--text);
}
.hero-tour:hover::after,
.hero-tour:focus-visible::after {
  transform: scaleX(1);
}
.hero-tour:hover .hero-tour__arrow {
  transform: translateX(4px);
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 760px);
  margin: clamp(32px, 5vh, 56px) 0 0;
}
.hero-stat {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(8, 12, 30, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.hero-stat dt {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
}
.hero-stat dd {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
  font-variant-numeric: tabular-nums;
}
.hero-stat--inf dd {
  color: var(--accent);
}

/* ------------------------------------------------------------ holo portrait */
/* --pw = portrait width; the frame is 4:5 (height = 1.25 × --pw) and the orbit is 1.8 × --pw */
.hero-visual {
  --pw: clamp(200px, 58vw, 240px);
  position: relative;
  z-index: 0;
  order: -1; /* stacked layout: the portrait comes first */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--pw);
  max-width: 100%;
}
.hero-stage {
  position: relative;
  width: 100%;
}
.hero-portrait {
  position: relative;
  z-index: 1;
  /* counter-parallax to the orbit (depth) */
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0);
  transition: transform 1.2s var(--ease-out);
}
/* GP.ui.tilt target */
.hero-portrait__frame {
  position: relative;
  height: calc(var(--pw) * 1.25);
  border-radius: 16px;
}
/* chromatic edge: a magenta and a cyan outline a hair apart, glitching now and then */
.hero-portrait__frame::before,
.hero-portrait__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  transition: transform 0.5s var(--ease-out);
  animation: gp-chroma 6.5s steps(1, end) infinite;
}
.hero-portrait__frame::before {
  border: 1px solid rgba(var(--accent-2-rgb), 0.65);
  transform: translate(-2px, 1px);
}
.hero-portrait__frame::after {
  border: 1px solid rgba(var(--accent-rgb), 0.65);
  transform: translate(2px, -1px);
  animation-delay: -2.2s;
}
/* the clipped "screen": photo + tint + scanlines + sweep */
.hero-portrait__screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  border-radius: inherit;
  background: var(--bg-2);
  box-shadow:
    -8px 0 30px -8px rgba(var(--accent-2-rgb), 0.6),
    8px 0 30px -8px rgba(var(--accent-rgb), 0.6),
    0 0 70px rgba(var(--accent-rgb), 0.16),
    0 36px 80px -24px rgba(0, 0, 0, 0.75);
}
.hero-portrait__screen > .hero-portrait__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-portrait__photo > img {
  filter: saturate(1.06) contrast(1.04);
}
.hero-portrait__tint,
.hero-portrait__lines,
.hero-portrait__scan {
  position: absolute;
  pointer-events: none;
}
/* cyan / magenta wash */
.hero-portrait__tint {
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, rgba(var(--accent-rgb), 0.34), transparent 44%, transparent 56%, rgba(var(--accent-2-rgb), 0.36));
  mix-blend-mode: overlay;
}
/* scanlines + faint grid + vignette */
.hero-portrait__lines {
  inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(var(--accent-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 1px, transparent 1px),
    radial-gradient(130% 100% at 50% 36%, transparent 55%, rgba(4, 5, 13, 0.72));
  background-size: auto, 26px 26px, 26px 26px, auto;
}
/* slow scan sweep, top to bottom, then a pause */
.hero-portrait__scan {
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.08) 55%, rgba(var(--accent-rgb), 0.34) 96%, rgba(255, 255, 255, 0.7) 99%, transparent);
  mix-blend-mode: screen;
  transform: translateY(-110%);
  animation: gp-portrait-scan 6.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* empty slot (no photo yet): a hologram bust with the GP badge on its chest */
.hero-portrait__photo.is-empty {
  background:
    radial-gradient(80% 55% at 50% 34%, rgba(var(--accent-rgb), 0.2), transparent 70%),
    radial-gradient(90% 50% at 50% 100%, rgba(var(--accent-2-rgb), 0.16), transparent 70%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
}
.hero-portrait__photo.is-empty::before,
.hero-portrait__photo.is-empty::after {
  content: '';
  position: absolute;
  left: 50%;
  border: 1.5px solid rgba(var(--accent-rgb), 0.55);
  background:
    repeating-linear-gradient(0deg, rgba(var(--accent-rgb), 0.2) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.03));
  box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.28), inset 0 0 22px rgba(var(--accent-rgb), 0.2);
  transform: translateX(-50%);
  pointer-events: none;
  animation: gp-holo 4.8s steps(1, end) infinite;
}
/* head: a circle (36% of the width = 28.8% of the 4:5 height) */
.hero-portrait__photo.is-empty::before {
  top: 13%;
  width: 36%;
  height: 28.8%;
  border-radius: 50%;
}
/* shoulders */
.hero-portrait__photo.is-empty::after {
  bottom: -3%;
  width: 86%;
  height: 52%;
  border-radius: 50% 50% 14% 14% / 60% 60% 10% 10%;
  animation-delay: -1.7s;
}
.hero-portrait__photo .gp-photo__slot {
  z-index: 1;
  place-content: end center;
  gap: 0.55em;
  padding-bottom: 11%;
}
.hero-portrait__photo .gp-photo__mono {
  font-size: 34px;
  font-size: clamp(22px, 15cqi, 60px);
  -webkit-text-stroke-color: rgba(var(--accent-rgb), 0.95);
}
.hero-portrait__photo .gp-photo__label {
  padding: 4px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 4px;
  background: rgba(4, 5, 13, 0.62);
  color: var(--accent);
  font-size: 9.5px;
  white-space: nowrap;
  animation: gp-blink-soft 2.4s steps(1) infinite;
}

/* neon corner brackets: cyan on top, magenta below */
.hero-portrait__corner {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: 2px solid var(--accent);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.85));
  pointer-events: none;
  transition: transform 0.5s var(--ease-out);
}
.hero-portrait__corner--tl {
  top: -9px;
  left: -9px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}
.hero-portrait__corner--tr {
  top: -9px;
  right: -9px;
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: 6px;
}
.hero-portrait__corner--bl,
.hero-portrait__corner--br {
  border-color: var(--accent-2);
  filter: drop-shadow(0 0 6px rgba(var(--accent-2-rgb), 0.85));
}
.hero-portrait__corner--bl {
  bottom: -9px;
  left: -9px;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: 6px;
}
.hero-portrait__corner--br {
  right: -9px;
  bottom: -9px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 6px;
}
@media (hover: hover) {
  .hero-portrait__frame:hover .hero-portrait__corner--tl { transform: translate(-5px, -5px); }
  .hero-portrait__frame:hover .hero-portrait__corner--tr { transform: translate(5px, -5px); }
  .hero-portrait__frame:hover .hero-portrait__corner--bl { transform: translate(-5px, 5px); }
  .hero-portrait__frame:hover .hero-portrait__corner--br { transform: translate(5px, 5px); }
  .hero-portrait__frame:hover::before { transform: translate(-4px, 2px); }
  .hero-portrait__frame:hover::after { transform: translate(4px, -2px); }
}

/* studio "ON AIR" light (red = the universal recording signal, independent of the theme) */
.hero-onair {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 9px;
  border: 1px solid rgba(255, 56, 96, 0.7);
  border-radius: 999px;
  background: rgba(4, 5, 13, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 16px rgba(255, 56, 96, 0.35), inset 0 0 10px rgba(255, 56, 96, 0.15);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(255, 56, 96, 0.9);
  pointer-events: none;
}
.hero-onair__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px var(--red), 0 0 14px var(--red);
  animation: gp-onair 1.6s ease-in-out infinite;
}
/* live audio level, top-right */
.hero-portrait__eq {
  position: absolute;
  top: 17px;
  right: 16px;
  z-index: 4;
  height: 14px;
  pointer-events: none;
}
.hero-portrait__eq i {
  width: 3px;
}

/* name plate */
.hero-plate {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  margin-top: 22px;
  padding: 11px 12px 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), rgba(8, 12, 30, 0.62));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
  text-transform: uppercase;
}
.hero-plate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7);
}
.hero-plate__name {
  max-width: 100%;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(11px, 1.15vw, 15px);
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.hero-plate__role {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}
/* tiny HUD caption: the Ridgewood coordinates */
.hero-geo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 10px;
  max-width: 100%;
  margin: 10px 0 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}
.hero-geo__coords {
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hero-geo__coords::before {
  content: '\25CE';
  margin-right: 6px;
  color: var(--accent);
}
.hero-geo__label {
  color: var(--accent);
  white-space: nowrap;
}

/* staggered hero entrance after boot (replays each time home is shown) */
html.is-booted #view-home .hero-kicker,
html.is-booted #view-home .hero-role,
html.is-booted #view-home .hero-tagline,
html.is-booted #view-home .hero-intro,
html.is-booted #view-home .hero-ctas,
html.is-booted #view-home .hero-stats,
html.is-booted #view-home .hero-hud {
  animation: gp-rise 0.9s var(--ease-out) both;
}
html.is-booted #view-home .hero-kicker { animation-delay: 0.1s; }
html.is-booted #view-home .hero-role { animation-delay: 0.35s; }
html.is-booted #view-home .hero-tagline { animation-delay: 0.45s; }
html.is-booted #view-home .hero-intro { animation-delay: 0.55s; }
html.is-booted #view-home .hero-ctas { animation-delay: 0.65s; }
html.is-booted #view-home .hero-stats { animation-delay: 0.78s; }
html.is-booted #view-home .hero-hud { animation-name: gp-fade-in; animation-delay: 0.9s; }
html.is-booted #view-home .hero-orbit {
  animation: gp-orbit-in 1.6s var(--ease-out) both;
}
html.is-booted #view-home .hero-visual {
  animation: gp-portrait-in 1.25s var(--ease-out) 0.15s both;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--text-dim);
  transform: translateX(-50%);
  -webkit-tap-highlight-color: transparent;
}
.hero-scroll__mouse {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 12px;
}
.hero-scroll__mouse span {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: gp-scrollwheel 1.8s var(--ease-in-out) infinite;
}
.hero-scroll__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
}
.hero-scroll:hover {
  color: var(--accent);
}

/* infinite marquee ticker */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  overflow: clip;
  border-block: 1px solid rgba(var(--accent-rgb), 0.5);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-2-rgb), 0.08));
  box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.12), inset 0 0 20px rgba(var(--accent-rgb), 0.06);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: gp-marquee 46s linear infinite;
}
/* hover-capable only: on touch screens a tap leaves a sticky :hover that froze the ticker */
@media (hover: hover) {
  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }
}
.marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 26px;
  padding: 15px 26px 15px 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(12px, 1.5vw, 16px);
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.mq-star {
  color: var(--accent);
  text-shadow: 0 0 10px var(--accent);
}
.mq-star:nth-of-type(4n + 3) {
  color: var(--accent-2);
  text-shadow: 0 0 10px var(--accent-2);
}

/* split hero: text left, holo portrait right */
@media (min-width: 960px) {
  .hero {
    padding: clamp(84px, 11vh, 120px) 0 clamp(88px, 11vh, 120px);
  }
  .hero-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    align-items: center;
    column-gap: clamp(32px, 4vw, 72px);
  }
  .hero-content {
    align-items: flex-start;
    text-align: left;
  }
  .hero-kicker,
  .hero-role,
  .hero-ctas {
    justify-content: flex-start;
  }
  /* fitName() then shrinks it to the column width */
  .hero-name {
    font-size: var(--name-size, clamp(44px, 6.4vw, 112px));
  }
  .hero-line {
    margin-inline: 0;
  }
  .hero-stats {
    width: min(100%, 640px);
  }
  .hero-stat {
    padding-inline: 6px;
  }
  .hero-stat dt {
    letter-spacing: 0.14em;
  }
  /* portrait width: 30vw, but short enough that frame + plate fit the first screen; 260–420px */
  .hero-visual {
    --pw: clamp(260px, min(30vw, calc((100vh - var(--nav-h) - 250px) * 0.8)), 420px);
    order: 0;
  }
  .hero-plate__name {
    letter-spacing: 0.2em;
  }
}
@supports (height: 100svh) {
  @media (min-width: 960px) {
    .hero-visual {
      --pw: clamp(260px, min(30vw, calc((100svh - var(--nav-h) - 250px) * 0.8)), 420px);
    }
  }
}
@media (max-width: 900px) {
  .hero-hud--bl,
  .hero-hud--br {
    display: none;
  }
}
@media (max-width: 640px) {
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .hero-hud {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
  .hero-hud--tl,
  .hero-hud--tr {
    top: 18px;
  }
  .hero-floor {
    height: 34%;
  }
}
@media (max-width: 480px) {
  /* the longest tagline wraps to three lines on a phone: reserve them so nothing jumps */
  .hero-tagline {
    min-height: 5em;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
  }
  .hero-ctas .btn {
    width: 100%;
    padding-inline: 18px;
  }
  .hero-tour {
    align-self: center;
  }
  .hero-hud--tl .hud-label {
    display: none;
  }
}

/* ======================================================= NEXT-VIEW BLOCK */
.next-view-wrap {
  margin-top: clamp(64px, 10vw, 120px);
  padding-bottom: clamp(40px, 6vw, 72px);
}
#view-home .next-view-wrap {
  margin-top: clamp(48px, 8vw, 96px);
}
.next-view {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 20px;
  padding: clamp(22px, 4vw, 40px) clamp(20px, 4vw, 44px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.07), rgba(var(--accent-2-rgb), 0.04));
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.4s, box-shadow 0.5s var(--ease-out), color 0.35s;
  -webkit-tap-highlight-color: transparent;
}
.next-view::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out);
}
.next-view::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.06) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.next-view:hover,
.next-view:focus-visible {
  border-color: transparent;
  color: #04050d;
  box-shadow: var(--glow);
}
.next-view:hover::before,
.next-view:focus-visible::before {
  transform: scaleX(1);
}
.next-view__kicker {
  grid-column: 1;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  transition: color 0.3s;
}
.next-view:hover .next-view__kicker,
.next-view:focus-visible .next-view__kicker {
  color: #04050d;
}
.next-view__title {
  grid-column: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 6.4vw, 76px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.next-view__arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 72px);
  line-height: 1;
  transition: transform 0.5s var(--ease-out);
}
.next-view:hover .next-view__arrow {
  transform: translateX(10px);
}
.next-view--reboot:hover .next-view__arrow {
  transform: rotate(-200deg);
}

/* ================================================================= FOOTER */
.site-footer {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0 calc(76px + env(safe-area-inset-bottom));
  overflow: hidden;
  overflow: clip;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.045));
}
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6);
}
.footer-mark {
  color: transparent;
  font-family: var(--font-display);
  font-size: clamp(120px, 34vw, 400px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: 0.04em;
  text-align: center;
  -webkit-text-stroke: 1.5px rgba(var(--accent-rgb), 0.42);
  background: linear-gradient(90deg, transparent 0 40%, rgba(var(--accent-rgb), 0.3) 50%, transparent 60% 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  -webkit-user-select: none;
}
.site-footer.is-inview .footer-mark {
  animation: gp-footer-sweep 7s linear infinite;
}
.hidden-star {
  position: absolute;
  top: clamp(36px, 7vw, 92px);
  right: 17%;
  z-index: 2;
  display: block;
  width: 7px;
  height: 7px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 7px;
  line-height: 7px;
  text-align: center;
  opacity: 0.16;
  cursor: default;
  transition: opacity 0.3s, transform 0.3s, color 0.3s, text-shadow 0.3s;
}
.hidden-star:hover,
.hidden-star:focus-visible {
  color: var(--gold);
  opacity: 1;
  transform: scale(1.6);
  text-shadow: 0 0 6px var(--gold);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: clamp(28px, 4vw, 48px);
}
.footer-copy {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.footer-built {
  margin: 6px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}
.footer-fact {
  min-height: 72px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 12px;
  background: rgba(8, 12, 30, 0.5);
}
.footer-fact__text {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
  transition: opacity 0.35s, transform 0.35s var(--ease-out);
}
.footer-fact__text.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}
.footer-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.terminal-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
  font-family: var(--font-mono);
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.terminal-btn:hover,
.terminal-btn:focus-visible {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: var(--glow);
}
.terminal-btn__glyph {
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7);
}
.terminal-btn__cursor {
  animation: gp-blink 1s steps(1) infinite;
}
.terminal-btn__label {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.secret-counter {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.secret-counter:empty {
  display: none;
}
.back-to-top {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  transition: border-color 0.3s, color 0.3s;
}
.back-to-top:hover,
.back-to-top:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--text);
}
@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .footer-tools {
    justify-content: flex-start;
  }
}

/* ======================================================= PAGE TRANSITIONS */
#transition-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  overflow: hidden;
  pointer-events: none;
}
#transition-layer.is-active {
  pointer-events: auto;
}
.tx-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85), rgba(var(--accent-rgb), 0.45) 26%, rgba(4, 5, 13, 0.55) 62%, rgba(4, 5, 13, 0.9));
  opacity: 0;
}
.tx-shutter {
  position: absolute;
  top: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--bg-3), var(--bg) 60%, var(--bg-2));
  border-right: 1px solid rgba(var(--accent-rgb), 0.55);
  box-shadow: inset -1px 0 12px rgba(var(--accent-rgb), 0.18);
  will-change: transform;
}
.tx-shutter::before,
.tx-shutter::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 30px rgba(var(--accent-rgb), 0.6);
}
.tx-shutter::before {
  top: 0;
}
.tx-shutter::after {
  bottom: 0;
}
.tx-shutter:nth-child(even)::after,
.tx-shutter:nth-child(even)::before {
  background: var(--accent-2);
  box-shadow: 0 0 12px var(--accent-2), 0 0 30px rgba(var(--accent-2-rgb), 0.6);
}
.tx-slice {
  position: absolute;
  left: 0;
  width: 100%;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    var(--bg-2);
  box-shadow: -10px 0 0 rgba(var(--accent-2-rgb), 0.8), 10px 0 0 rgba(var(--accent-rgb), 0.8);
  will-change: transform;
}
.tx-slice--hot {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.3), var(--bg-2) 30%, var(--bg-2) 70%, rgba(var(--accent-2-rgb), 0.3));
}
.tx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tx-iris {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 200vmax var(--bg),
    inset 0 0 0 2px var(--accent),
    inset 0 0 40px rgba(var(--accent-rgb), 0.5),
    inset 0 0 90px rgba(var(--accent-2-rgb), 0.18);
}
.tx-fade {
  position: absolute;
  inset: 0;
  background: var(--bg);
}
.tx-label {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tx-label__k {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
}
.tx-label__t {
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(20px, 5vw, 44px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: -2px 0 rgba(var(--accent-2-rgb), 0.85), 2px 0 rgba(var(--accent-rgb), 0.85), 0 0 24px rgba(var(--accent-rgb), 0.4);
}
.tx-label__bar {
  position: relative;
  width: 160px;
  height: 2px;
  overflow: hidden;
  background: rgba(var(--accent-rgb), 0.2);
}
.tx-label__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transform-origin: left;
  animation: gp-txbar 0.7s var(--ease-out) forwards;
}

/* ================================================================= CURSOR */
html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}
html.has-cursor :is(input:not([type='range']):not([type='checkbox']):not([type='radio']), textarea, [contenteditable='true']) {
  cursor: text !important;
}
.gp-cursor-dot,
.gp-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}
.gp-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent), 0 0 2px #fff;
  transition: opacity 0.2s, width 0.2s, height 0.2s;
}
.gp-cursor-ring {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0);
  transition:
    opacity 0.25s,
    width 0.35s var(--ease-out),
    height 0.35s var(--ease-out),
    background-color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.gp-cursor-dot.is-visible,
.gp-cursor-ring.is-visible {
  opacity: 1;
}
.gp-cursor-dot.is-hidden {
  opacity: 0;
}
.gp-cursor-ring.is-hover {
  width: 56px;
  height: 56px;
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
}
.gp-cursor-ring.has-label {
  width: 84px;
  height: 84px;
  border-color: transparent;
  background: rgba(var(--accent-rgb), 0.92);
  box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.55);
}
.gp-cursor-ring.is-down {
  width: 26px;
  height: 26px;
}
.gp-cursor-ring.has-label.is-down {
  width: 72px;
  height: 72px;
}
.gp-cursor-label {
  color: #04050d;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.3s var(--ease-back);
}
.gp-cursor-ring.has-label .gp-cursor-label {
  opacity: 1;
  transform: none;
}

/* ============================================================= KEYFRAMES */
@keyframes gp-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes gp-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes gp-redraw {
  0% {
    stroke-dashoffset: 0;
  }
  45% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes gp-comet {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -1;
  }
}
@keyframes gp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gp-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gp-orbit-in {
  from {
    opacity: 0;
    scale: 0.55;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes gp-portrait-in {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.94);
    filter: blur(10px) brightness(1.8);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
/* the scan band is 34% of the frame: -110% → 310% carries it fully across, then it rests below */
@keyframes gp-portrait-scan {
  0% {
    transform: translateY(-110%);
  }
  70%,
  100% {
    transform: translateY(310%);
  }
}
/* individual `translate` composes with the outlines' static transform offsets */
@keyframes gp-chroma {
  0%,
  88%,
  100% {
    translate: 0 0;
  }
  90% {
    translate: -3px 0;
  }
  92% {
    translate: 3px 1px;
  }
  94% {
    translate: -1px 0;
  }
}
@keyframes gp-holo {
  0%,
  100% {
    opacity: 1;
  }
  46% {
    opacity: 0.55;
  }
  48% {
    opacity: 1;
  }
  82% {
    opacity: 0.7;
  }
  84% {
    opacity: 1;
  }
}
@keyframes gp-onair {
  50% {
    opacity: 0.3;
    transform: scale(0.75);
  }
}
@keyframes gp-flick {
  0%,
  100% {
    opacity: 1;
  }
  90% {
    opacity: 0.2;
  }
  92% {
    opacity: 1;
  }
  95% {
    opacity: 0.4;
  }
  97% {
    opacity: 1;
  }
}
@keyframes gp-blink {
  50% {
    opacity: 0;
  }
}
@keyframes gp-blink-soft {
  50% {
    opacity: 0.45;
  }
}
@keyframes gp-flicker {
  50% {
    opacity: 0.35;
  }
}
@keyframes gp-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.55), 0 0 8px var(--lime);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(57, 255, 20, 0), 0 0 8px var(--lime);
  }
}
@keyframes gp-eq {
  from {
    transform: scaleY(0.25);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes gp-signal {
  0%,
  100% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes gp-signal-weak {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  70% {
    opacity: 0.9;
  }
}
@keyframes gp-core {
  50% {
    opacity: 0.65;
    transform: scale(1.15);
  }
}
@keyframes gp-floor {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 60px, 0);
  }
}
@keyframes gp-scrollwheel {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes gp-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes gp-footer-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -150% 0;
  }
}
@keyframes gp-seam {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  35% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1) scaleY(0.4);
  }
}
@keyframes gp-txbar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes gp-slice-a {
  0%,
  86%,
  95%,
  100% {
    clip-path: inset(0 0 100% 0);
    transform: none;
  }
  87% {
    clip-path: inset(12% 0 64% 0);
    transform: translateX(-0.06em);
  }
  89% {
    clip-path: inset(52% 0 30% 0);
    transform: translateX(0.05em);
  }
  91% {
    clip-path: inset(78% 0 6% 0);
    transform: translateX(-0.03em);
  }
  93% {
    clip-path: inset(30% 0 52% 0);
    transform: translateX(0.07em);
  }
}
@keyframes gp-slice-b {
  0%,
  87%,
  96%,
  100% {
    clip-path: inset(0 0 100% 0);
    transform: none;
  }
  88% {
    clip-path: inset(64% 0 18% 0);
    transform: translateX(0.06em);
  }
  90% {
    clip-path: inset(8% 0 76% 0);
    transform: translateX(-0.05em);
  }
  92% {
    clip-path: inset(40% 0 44% 0);
    transform: translateX(0.04em);
  }
  94% {
    clip-path: inset(84% 0 2% 0);
    transform: translateX(-0.07em);
  }
}
@keyframes gp-reveal-glitch {
  0% {
    clip-path: inset(0 0 100% 0);
    transform: translateX(-10px);
  }
  15% {
    clip-path: inset(0 0 68% 0);
    transform: translateX(8px);
  }
  30% {
    clip-path: inset(42% 0 18% 0);
    transform: translateX(-6px);
  }
  45% {
    clip-path: inset(0 0 32% 0);
    transform: translateX(4px);
  }
  60% {
    clip-path: inset(12% 0 0 0);
    transform: translateX(-2px);
  }
  75%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

/* ========================================================= REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .hero-line::before,
  .hero-line::after,
  .hero-floor,
  .orbit-dot {
    display: none;
  }
  .marquee__track {
    animation: none;
  }
  .hero-orbit,
  .hero-portrait {
    transition: none;
  }
  .hero-portrait__scan {
    display: none;
  }
}