/* ============================================================
   SINGULARITY · overlay styles
   Matches the site chrome: near-black, off-white, strict grey,
   monospace technical labels, faint grid, thin frame.
   ============================================================ */

:root {
  --bg: #0A0A0A; --bg-1: #0E0E0E; --bg-2: #131313; --bg-3: #181818;
  /* Ink hierarchy nudged up for WCAG AA on the dark canvas (matches styles.css):
     ink-3 #757575 -> #969696, ink-4 #525252 -> #808080, ink-5 #343434 -> #666666. */
  --ink: #F2F2F2; --ink-2: #A7A7A7; --ink-3: #969696; --ink-4: #808080; --ink-5: #666666;
  --line: rgba(242,242,242,0.11); --line-2: rgba(242,242,242,0.06);
  --ok: #4ADE9E; --warn: #E6B450; --idle: #6B6B6B; --bad: #EC5A5F;
  --sans: "Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono: "Geist Mono","SFMono-Regular",ui-monospace,"JetBrains Mono",monospace;
  --orb: 24px;                 /* docked logo orb diameter */
  --gap: 7px;                  /* gap between orb and wordmark */
  --focus: #F2F2F2;            /* keyboard focus ring */
}

/* ---- Focus visibility (WCAG 2.4.7) ----
   Clearly visible keyboard-focus ring for the overlay's interactive controls. */
.sing-ui :focus-visible,
.sing-skip:focus-visible,
.sing-enter:focus-visible,
.sing-sr:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(10,10,10,0.9);
}
:focus:not(:focus-visible) { outline: none; }

* { box-sizing: border-box; }

/* ---- host scaffold: real site beneath, overlay above ---- */
.sing-root {
  position: fixed; inset: 0; overflow: hidden;
  font-family: var(--sans); color: var(--ink);
}
.sing-beneath {
  position: absolute; inset: 0; z-index: 0; border: 0; width: 100%; height: 100%;
  background: var(--bg);
}
.sing-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: var(--bg);
  transition: opacity 420ms ease;
}
.sing-overlay.is-revealing { pointer-events: none; }
.sing-overlay.is-gone { opacity: 0; pointer-events: none; }

#sing-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: 1; }

/* ---- atmosphere: grid + vignette ---- */
/* The depth grid is a faint far-background field: it sits behind the canvas
   (z-index 0, below the orb + nodes) and is masked OUT of the very center so
   it never reads as co-planar with the orb. */
.sing-grid {
  position: absolute; inset: -2px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(242,242,242,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,242,242,0.028) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at 50% 47%, transparent 5%, #000 34%, #000 66%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 47%, transparent 5%, #000 34%, #000 66%, transparent 100%);
}
.sing-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 47%,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%,
    rgba(4,4,4,0.08) 46%, rgba(3,3,3,0.22) 58%,
    rgba(2,2,2,0.42) 70%, rgba(1,1,1,0.64) 82%,
    rgba(0,0,0,0.84) 93%, rgba(0,0,0,0.94) 100%);
}
/* faint noise dither over the vignette so the falloff reads brushed, not banded */
.sing-noise {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.085; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- UI layer ---- */
.sing-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sing-ui button, .sing-ui a { pointer-events: auto; }

/* mono technical label */
.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.slash { color: var(--ink-5); }

/* ---- header lockup: orb slot + wordmark ----
   Positioned to coincide EXACTLY with the revealed site's masthead brand
   (.frame-top .brand: left = --pad-x, 12px top padding, 18px orb, 10px gap,
   15px/600 wordmark) so the logo does not move when the intro hands off. */
.sing-header {
  position: absolute; top: 22px; left: clamp(20px, 4vw, 72px);
  display: flex; align-items: center; gap: var(--gap);
  height: var(--orb);
}
.sing-orbslot {
  width: var(--orb); height: var(--orb); flex: none; position: relative;
}
/* DOM orb used for the final docked lockup (3D core crossfades into this):
   a soft, fuzzy glow with no hard rim (matches the logo brief). */
.sing-orb {
  position: absolute; inset: -40%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.95) 0%, rgba(228,228,228,0.62) 20%,
    rgba(165,165,165,0.30) 44%, rgba(95,95,95,0.10) 68%, rgba(0,0,0,0) 100%);
  opacity: 0; transform: scale(0.4); transition: opacity .3s ease, transform .3s ease;
}
.sing-orb.is-docked { opacity: 1; transform: scale(1); }
/* reform: both orbs grow from the collapse (0.46) up to the pulse floor (0.94),
   then the steady pulse continues the growth to 1.1, identical on overlay + site */
@keyframes singOrbReform { from { transform: scale(0.46); } to { transform: scale(0.94); } }
@keyframes singOrbPulse { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.1); } }
.sing-wordmark {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center;
  will-change: transform;
}
/* superposition ghost copies, overlaid exactly on the wordmark */
.sing-wordmark.ghost {
  position: absolute; left: calc(var(--orb) + var(--gap)); top: 50%;
  transform: translateY(-50%); opacity: 0; pointer-events: none;
}
.sing-wordmark .g {
  display: inline-block; will-change: transform;
  transform: translate(0,0) rotate(0deg);
}

/* ---- skip / replay top-right ---- */
.sing-skip {
  position: absolute; top: 24px; right: clamp(20px, 4vw, 48px);
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 8px 13px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.sing-skip:hover { color: var(--ink); border-color: rgba(242,242,242,0.28); background: var(--bg-2); }

/* ---- card stack under the wordmark ---- */
.sing-cards {
  position: absolute; top: 96px; left: clamp(20px, 4vw, 72px);
  display: flex; flex-direction: column; gap: 12px; width: min(310px, 78vw);
}
.sing-card {
  border: 1px solid var(--line); background: rgba(14,14,14,0.66);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 15px 17px 16px; position: relative; border-radius: 2px;
  opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.sing-card.in { opacity: 1; transform: none; }
/* The --t-* type tokens are defined once in styles.css :root and shared here so
   this rail and the masthead strip use one scale. */
.sing-card .lab { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.sing-card .val { font-size: var(--t-figure); font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin-top: 11px; font-variant-numeric: tabular-nums; }
/* The liveliness date (last card) steps down to match the masthead date step. */
.sing-card:last-child .val { font-size: var(--t-date); letter-spacing: -0.02em; }
.sing-card .val .unit { font-size: var(--t-unit); color: var(--ink-4); letter-spacing: 0; margin-left: 7px; font-weight: 400; }
.sing-card .sub { color: var(--ink-4); font-size: var(--t-sub); margin-top: 9px; font-family: var(--mono); letter-spacing: 0.02em; }
.sing-card .idx { position: absolute; top: 13px; right: 14px; font-family: var(--mono); font-size: 10px; color: var(--ink-5); }
.sing-card.is-open .val { color: var(--ok); }

/* ---- legend (appears at colorize) ---- */
.sing-legend {
  position: absolute; left: clamp(20px, 4vw, 72px); bottom: 30px;
  display: flex; gap: 18px; align-items: center;
  opacity: 0; transition: opacity .5s ease;
}
.sing-legend.in { opacity: 1; }
.sing-legend .li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.sing-legend .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---- progress rail (right): per-stage emanating icons ---- */
.sing-progress {
  position: absolute; right: clamp(18px, 3vw, 34px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 22px; align-items: center;
}
.sing-progress::before {
  content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
  transform: translateX(-50%); z-index: -1;
}
.prog-item {
  position: relative; width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--ink-5); transition: color .35s ease; cursor: default;
}
.prog-item .pi { width: 17px; height: 17px; display: block; overflow: visible; }
.prog-item.past { color: var(--ink-3); }
.prog-item.on { color: var(--ink); }
.prog-ring {
  position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--ink-3);
  opacity: 0; pointer-events: none;
}
.prog-item.on .prog-ring { animation: singPulse 2.2s ease-out infinite; }
.prog-label {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.prog-item.on .prog-label, .prog-item:hover .prog-label { opacity: 1; }

/* ---- scroll hint (rest) ---- */
.sing-hint {
  position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  transition: opacity .4s ease;
}
.sing-hint .ring {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  position: relative;
}
.sing-hint .ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink-3);
  animation: singPulse 2.1s ease-out infinite;
}
@keyframes singPulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---- advance cue 1: bottom-center chevron + label (after detonate) ---- */
.sing-advance {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
.sing-advance.in { opacity: 1; }
.sing-advance .chev {
  width: 11px; height: 11px;
  border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
  transform: rotate(45deg); animation: singChevBob 1.6s ease-in-out infinite;
}
@keyframes singChevBob {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.5; }
  50%      { transform: translateY(4px) rotate(45deg); opacity: 1; }
}

/* ---- blob source tooltip ---- */
.sing-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -130%);
  border: 1px solid var(--line); background: rgba(19,19,19,0.92); border-radius: 2px;
  padding: 7px 11px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink);
  white-space: nowrap; opacity: 0; transition: opacity .18s ease;
}
.sing-tip .c { color: var(--ink-3); margin-left: 8px; }
.sing-tip.in { opacity: 1; }

/* ---- ripple ---- */
.sing-ripple {
  position: absolute; z-index: 8; border-radius: 50%; pointer-events: none;
  width: 10px; height: 10px;
  background: radial-gradient(circle, rgba(242,242,242,0.0) 52%, rgba(242,242,242,0.30) 60%, rgba(242,242,242,0.0) 70%);
  transform: translate(-50%, -50%) scale(0); opacity: 0;
}

/* ---- reduced-motion / fallback static hero ---- */
.sing-static {
  position: absolute; inset: 0; z-index: 6; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 30px;
  text-align: center; padding: 40px;
}
.sing-static.show { display: flex; }
.sing-static .hero-orb {
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffffff 0%, #cfcfcf 30%, #6f6f6f 64%, #2a2a2a 100%);
  box-shadow: 0 0 50px rgba(242,242,242,0.25);
}
.sing-static .hero-stats { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 760px; }
.sing-static .hero-stats .sing-card { opacity: 1; transform: none; width: 170px; }
.sing-enter {
  background: var(--ink); color: #0A0A0A; border: 1px solid var(--ink); border-radius: 2px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 13px 26px; cursor: pointer; font-weight: 500;
}
.sing-enter:hover { background: #fff; }

/* visually hidden skip-to-content */
.sing-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sing-sr:focus {
  position: absolute; width: auto; height: auto; clip: auto; z-index: 99; top: 8px; left: 8px;
  background: var(--ink); color: #0A0A0A; padding: 8px 12px; font-family: var(--mono); font-size: 12px;
}

@media (max-width: 720px) {
  .sing-cards { width: min(260px, 70vw); top: 76px; }
  .sing-legend { gap: 12px; }
}

/* Short viewports: the four cards stack downward, so shrink them by available
   height to keep them from getting cut off (progressively more compact). */
@media (max-height: 780px) {
  .sing-cards { top: 84px; gap: 9px; }
  .sing-card { padding: 12px 15px 13px; }
  .sing-card .val { font-size: clamp(22px, 4.2vh, 34px); margin-top: 8px; }
  .sing-card .sub { margin-top: 7px; }
}
@media (max-height: 640px) {
  .sing-cards { top: 66px; gap: 7px; width: min(264px, 74vw); }
  .sing-card { padding: 9px 13px 10px; }
  .sing-card .lab { font-size: 9.5px; }
  .sing-card .val { font-size: clamp(18px, 3.6vh, 26px); margin-top: 5px; }
  .sing-card .sub { font-size: 9px; margin-top: 4px; }
}
@media (max-height: 520px) {
  .sing-cards { top: 52px; gap: 5px; }
  .sing-card { padding: 7px 11px 8px; }
  .sing-card .val { font-size: clamp(16px, 3.2vh, 22px); margin-top: 4px; }
  .sing-card .sub { display: none; }
}

/* ============================================================
   REDUCED MOTION  (WCAG 2.3.3)
   The intro ships a JS static-hero fallback; this query is the CSS guarantee.
   It stops the looping decorative motion (orb pulse, pulses, chevron/think
   bob) and collapses transitions to near-instant so any reveal state still
   applies and content stays visible, just without animation.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sing-orb,
  .prog-ring,
  .prog-item.on .prog-ring,
  .sing-hint .ring::after,
  .sing-advance .chev {
    animation: none !important;
  }
}