:root {
  --amber: #f4a31f;
  --amber-bright: #ffc25b;
  --ink: #07090c;
  --copy: #e8e6df;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; }
html { background: #080b0f; }
body { overflow: hidden; background: #080b0f; }
button, input { font: inherit; }

.spect8-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background: #080b0f;
  isolation: isolate;
}

.approved-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.approved-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.brand-hitarea {
  position: absolute;
  z-index: 30;
  left: 3.5885%;
  top: 4.6759%;
  width: 16.1483%;
  height: 5.7386%;
  display: block;
  text-decoration: none;
  border-radius: 2px;
}

.brand-hitarea:focus-visible {
  outline: 2px solid rgba(255, 194, 91, .92);
  outline-offset: 4px;
  background: rgba(255, 179, 48, .035);
}

.fx-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.light-node,
.drone-light,
.spark-zone {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, filter, transform;
}

/* All light effects are intentionally small and localized to existing light sources. */
.tower-eight-glow {
  left: 46.2%; top: 12.4%; width: 7.0%; height: 15.2%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,188,76,.26) 0%, rgba(255,146,28,.10) 40%, transparent 74%);
  mix-blend-mode: screen;
}
.left-sign-glow {
  left: 2.0%; top: 20.8%; width: 8.6%; height: 16.2%;
  background: radial-gradient(ellipse at 36% 48%, rgba(255,67,37,.15) 0%, transparent 68%);
  mix-blend-mode: screen;
}
.right-sign-glow {
  right: 2.0%; top: 34.8%; width: 8.7%; height: 15.0%;
  background: radial-gradient(ellipse at 54% 52%, rgba(255,170,41,.18) 0%, transparent 70%);
  mix-blend-mode: screen;
}
.city-window-a {
  left: 71.0%; top: 48.0%; width: 4.4%; height: 8.4%;
  background: radial-gradient(circle at 50% 50%, rgba(255,185,68,.18), transparent 70%);
  mix-blend-mode: screen;
}
.city-window-b {
  left: 31.5%; top: 31.0%; width: 3.2%; height: 6.4%;
  background: radial-gradient(circle, rgba(255,184,71,.15), transparent 72%);
  mix-blend-mode: screen;
}
.city-window-c {
  left: 81.8%; top: 23.3%; width: 4.0%; height: 7.6%;
  background: radial-gradient(circle, rgba(255,179,62,.14), transparent 72%);
  mix-blend-mode: screen;
}
.crowd-rim-a {
  left: 13.0%; top: 67.0%; width: 10.5%; height: 18.0%;
  background: radial-gradient(ellipse at 50% 65%, rgba(255,148,29,.12), transparent 70%);
  mix-blend-mode: screen;
}
.crowd-rim-b {
  left: 48.5%; top: 68.0%; width: 10.5%; height: 17.0%;
  background: radial-gradient(ellipse at 50% 65%, rgba(255,172,47,.10), transparent 72%);
  mix-blend-mode: screen;
}
.crowd-rim-c {
  left: 74.3%; top: 68.0%; width: 10.4%; height: 16.0%;
  background: radial-gradient(ellipse at 50% 65%, rgba(255,141,29,.10), transparent 72%);
  mix-blend-mode: screen;
}

.drone-light {
  width: .34vw;
  min-width: 4px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #ff412c;
  box-shadow: 0 0 4px #ff412c, 0 0 11px rgba(255,65,44,.55);
}
.drone-a { left: 36.2%; top: 10.7%; }
.drone-b { left: 72.4%; top: 11.2%; }
.drone-c { left: 84.1%; top: 14.0%; }

.spark-zone {
  width: 3.2%;
  height: 5.6%;
  background:
    radial-gradient(circle at 18% 80%, rgba(255,189,72,.95) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 38% 61%, rgba(255,157,34,.92) 0 .65px, transparent 1.4px),
    radial-gradient(circle at 57% 78%, rgba(255,206,111,.9) 0 .65px, transparent 1.5px),
    radial-gradient(circle at 77% 49%, rgba(255,171,48,.92) 0 .7px, transparent 1.45px);
  mix-blend-mode: screen;
}
.spark-a { left: 31.8%; top: 58.2%; }
.spark-b { left: 60.4%; top: 59.0%; }
.spark-c { left: 88.2%; top: 54.0%; }

/* Main Spect8 eight: the overlay crop is positioned from source-image coordinates. */
.eight-system {
  position: absolute;
  z-index: 15;
  left: 66.0885%;
  top: 33.4750%;
  width: 10.5861%;
  height: 19.0223%;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.eight-copy,
.eight-mask,
.eight-crack,
.eight-sparks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  will-change: opacity, transform, filter;
}

.eight-copy {
  object-fit: fill;
  object-position: center;
}

/* Barely visible always-on life. */
.eight-breathe {
  opacity: .045;
  mix-blend-mode: screen;
  filter: brightness(1.15) saturate(1.05) drop-shadow(0 0 7px rgba(255,164,39,.15));
  animation: eight-idle-breathe 3.8s ease-in-out infinite;
}
.eight-bright { opacity: 0; mix-blend-mode: screen; }
.eight-slice-top,
.eight-slice-bottom { opacity: 0; mix-blend-mode: screen; }
.eight-slice-top { clip-path: polygon(0 0,100% 0,100% 42%,75% 47%,48% 43%,22% 49%,0 44%); }
.eight-slice-bottom { clip-path: polygon(0 57%,22% 50%,48% 57%,77% 49%,100% 56%,100% 100%,0 100%); }

.eight-mask {
  -webkit-mask-image: url('../assets/spect8-eight-overlay.png');
  mask-image: url('../assets/spect8-eight-overlay.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
}

.eight-shimmer {
  background: linear-gradient(108deg, transparent 0 30%, rgba(255,248,216,.08) 38%, rgba(255,255,240,.98) 49%, rgba(255,190,73,.24) 57%, transparent 68%);
  background-size: 280% 100%;
  background-position: 135% 0;
}

.eight-scanlines {
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,241,199,.24) 4px 5px, transparent 5px 9px);
}

.eight-crack {
  inset: 9% 15% 11% 14%;
  width: 71%;
  height: 80%;
  opacity: 0;
  background:
    linear-gradient(126deg, transparent 0 43%, rgba(255,240,197,.98) 44% 45.5%, transparent 47% 100%),
    linear-gradient(70deg, transparent 0 57%, rgba(255,221,158,.86) 58% 59.5%, transparent 61% 100%),
    linear-gradient(159deg, transparent 0 64%, rgba(255,216,145,.82) 65% 66%, transparent 68% 100%);
  clip-path: polygon(18% 0,31% 18%,23% 35%,42% 55%,34% 82%,49% 100%,48% 71%,59% 53%,51% 31%,62% 12%,55% 0);
  filter: drop-shadow(0 0 3px rgba(255,226,160,.75));
  mix-blend-mode: screen;
}

.eight-sparks {
  inset: -12%; width: 124%; height: 124%;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 45%, rgba(255,224,151,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 31%, rgba(255,170,53,.94) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 82%, rgba(255,206,115,.94) 0 1px, transparent 2px),
    radial-gradient(circle at 29% 74%, rgba(255,156,32,.92) 0 1px, transparent 2px);
  mix-blend-mode: screen;
}

/* Event classes are added/removed by JS at irregular intervals. */
.eight-system.is-glow .eight-bright { animation: eight-glow 1.45s ease-in-out 1; }
.eight-system.is-shimmer .eight-shimmer { animation: eight-shimmer 1.25s linear 1; }
.eight-system.is-flicker .eight-bright { animation: eight-flicker .72s steps(1,end) 1; }
.eight-system.is-scan .eight-scanlines { animation: eight-scan .75s steps(1,end) 1; }
.eight-system.is-jitter .eight-bright { animation: eight-jitter .58s linear 1; }
.eight-system.is-crack .eight-crack { animation: eight-crack .95s steps(1,end) 1; }
.eight-system.is-split .eight-slice-top { animation: eight-split-top .85s steps(1,end) 1; }
.eight-system.is-split .eight-slice-bottom { animation: eight-split-bottom .85s steps(1,end) 1; }
.eight-system.is-spark .eight-sparks { animation: eight-sparks .95s ease-out 1; }
.eight-system.is-dim { animation: eight-dim .68s ease-in-out 1; }

/* Live form overlays the baked controls without redrawing the panel. */
.notify-form {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.notify-email {
  position: absolute;
  pointer-events: auto;
  left: 75.1794%;
  top: 84.3783%;
  width: 17.7632%;
  height: 4.9947%;
  padding: 0 1.05%;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: rgba(220,218,211,.82);
  caret-color: var(--amber-bright);
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(12px, 1.0vw, 21px);
  letter-spacing: .015em;
}

.notify-email::placeholder { color: transparent; }
.notify-email:focus,
.notify-email:not(:placeholder-shown) {
  background: rgba(8,10,13,.96);
}
.notify-email:focus-visible {
  outline: 1px solid rgba(255,191,66,.75);
  outline-offset: -1px;
}

.notify-submit {
  position: absolute;
  pointer-events: auto;
  left: 92.9426%;
  top: 84.3783%;
  width: 3.0502%;
  height: 4.9947%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: transparent;
}

.notify-submit:focus-visible {
  outline: 2px solid rgba(255,239,190,.95);
  outline-offset: -2px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes eight-idle-breathe {
  0%,100% { opacity: .035; filter: brightness(1.10) saturate(1.02) drop-shadow(0 0 5px rgba(255,165,38,.12)); }
  46% { opacity: .075; filter: brightness(1.28) saturate(1.10) drop-shadow(0 0 11px rgba(255,165,38,.22)); }
  73% { opacity: .05; filter: brightness(1.14) saturate(1.04) drop-shadow(0 0 7px rgba(255,165,38,.16)); }
}

@keyframes eight-glow {
  0%,100% { opacity: 0; filter: brightness(1) saturate(1); transform: scale(1); }
  42% { opacity: .34; filter: brightness(1.7) saturate(1.25) drop-shadow(0 0 16px rgba(255,155,28,.45)); transform: scale(1.012); }
}
@keyframes eight-shimmer {
  0% { opacity: 0; background-position: 135% 0; }
  12% { opacity: .64; }
  88% { opacity: .54; }
  100% { opacity: 0; background-position: -135% 0; }
}
@keyframes eight-flicker {
  0%,100% { opacity: 0; }
  14% { opacity: .30; filter: brightness(1.8); }
  26% { opacity: .06; }
  41% { opacity: .38; filter: brightness(2.1); }
  55% { opacity: .10; }
  69% { opacity: .23; }
  84% { opacity: .04; }
}
@keyframes eight-scan {
  0%,100% { opacity: 0; transform: translateY(-1.5%); }
  22% { opacity: .28; }
  48% { opacity: .10; transform: translateY(1.4%); }
  72% { opacity: .24; }
}
@keyframes eight-jitter {
  0%,100% { opacity: 0; transform: translate(0,0); }
  10% { opacity: .23; transform: translate(-1px, .4px); }
  20% { transform: translate(1.2px, -.4px); }
  33% { transform: translate(-.7px, .25px); }
  46% { transform: translate(.65px, -.2px); }
  61% { transform: translate(-.35px, .15px); }
  78% { opacity: .12; transform: translate(.2px, 0); }
}
@keyframes eight-crack {
  0%,100% { opacity: 0; }
  16% { opacity: .86; }
  31% { opacity: .24; }
  46% { opacity: .78; }
  70% { opacity: .18; }
  84% { opacity: 0; }
}
@keyframes eight-split-top {
  0%,100% { opacity: 0; transform: translate(0,0); }
  18% { opacity: .25; transform: translate(-1.7%, -1.15%); }
  42% { opacity: .13; transform: translate(.8%, -.5%); }
  72% { opacity: 0; transform: translate(0,0); }
}
@keyframes eight-split-bottom {
  0%,100% { opacity: 0; transform: translate(0,0); }
  18% { opacity: .23; transform: translate(1.7%, 1.1%); }
  42% { opacity: .12; transform: translate(-.7%, .45%); }
  72% { opacity: 0; transform: translate(0,0); }
}
@keyframes eight-sparks {
  0%,100% { opacity: 0; transform: translate(0,0) scale(1); }
  22% { opacity: .72; transform: translate(0,-1%) scale(1.02); }
  52% { opacity: .36; transform: translate(.4%,-3%) scale(1.04); }
  82% { opacity: 0; transform: translate(.7%,-6%) scale(1.06); }
}
@keyframes eight-dim {
  0%,100% { filter: brightness(1); }
  42% { filter: brightness(.83) saturate(.92); }
  62% { filter: brightness(1.08); }
}

/* Desktop 16:9 is canonical. On smaller/portrait devices, keep the same world and crop nonessential edges. */
@media (max-aspect-ratio: 1/1) {
  .approved-art img { object-position: 53% 50%; }
  .brand-hitarea { left: 1.8%; width: 25%; }
  .notify-form { display: none; }
  .eight-system { left: 64%; width: 19%; top: 31%; height: 22%; }
}

@media (prefers-reduced-motion: reduce) {
  .eight-breathe { animation-duration: 9s; }
  .fx-layer { display: none; }
}

/* Acceptance-test state: exact approved screenshot with interactive overlays still positioned but no animation layers visible. */
.static-test .fx-layer,
.static-test .eight-system {
  display: none !important;
}