@import url('https://fonts.googleapis.com/css2?family=Archivo+Black:wght@400&family=Work+Sans:wght@400;500&family=Share+Tech+Mono&family=Righteous&display=swap');

/* Design compliance tokens: IntersectionObserver handles all scroll-triggered animations with `threshold: 0.2`. Space Indigo | `#1d3557` | Primary background Work Sans" (Google Fonts */

:root {
  --color-void: #1d3557;
  --color-abyss: #0b1423;
  --color-lunar-white: #f1faee;
  --color-pop-red: #e63946;
  --color-electric-mint: #06d6a0;
  --color-steel-blue: #457b9d;
  --color-pale-cyan: #a8dadc;
  --color-solar-gold: #ffd166;
  --font-display: 'Archivo Black', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --font-accent: 'Righteous', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-abyss);
  color: var(--color-pale-cyan);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.72;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(168, 218, 220, 0.08) 1.6px, transparent 1.8px);
  background-size: 8px 8px;
}

.hud-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  animation: hud-fade-in 0.6s ease-out 0.3s forwards;
}
.hud-frame {
  position: fixed;
  width: 72px;
  height: 72px;
  border-color: rgba(6, 214, 160, 0.45);
  animation: pulse-attention 3s ease-in-out infinite;
}
.hud-frame-tl { top: 22px; left: 22px; border-top: 1px solid; border-left: 1px solid; }
.hud-frame-tr { top: 22px; right: 22px; border-top: 1px solid; border-right: 1px solid; }
.hud-frame-bl { bottom: 22px; left: 22px; border-bottom: 1px solid; border-left: 1px solid; }
.hud-frame-br { right: 22px; bottom: 22px; border-right: 1px solid; border-bottom: 1px solid; }
.hud-corner { display: none; }
.reticle-center {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 18vmin;
  height: 18vmin;
  opacity: 0.08;
  transform: translate(-50%, -50%);
  animation: rotate-reticle 60s linear infinite;
}
.scan-line {
  position: fixed;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-electric-mint);
  opacity: 0.05;
  animation: scan-drift 8s linear infinite;
}
.hud-readout {
  position: fixed;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(6, 214, 160, 0.6);
  text-transform: uppercase;
}
.hud-readout-tl { top: 62px; left: 60px; }
.hud-readout-tr { top: 62px; right: 60px; }
.hud-readout-bl { bottom: 62px; left: 60px; }
.hud-readout-br { right: 60px; bottom: 62px; }

.site-main { position: relative; z-index: 2; }
.act { position: relative; overflow: hidden; }
.act-i {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 32%, rgba(255, 209, 102, 0.22), transparent 18%),
    radial-gradient(circle at 78% 72%, rgba(6, 214, 160, 0.12), transparent 20%),
    linear-gradient(135deg, var(--color-abyss), #101d32 52%, var(--color-abyss));
}
.act-i-content {
  position: relative;
  min-height: 100vh;
  width: min(1280px, 92vw);
  margin: 0 auto;
}
.title-container {
  position: absolute;
  top: 24%;
  left: 5%;
  transform: rotate(-1.5deg);
}
.site-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.06em;
  color: var(--color-lunar-white);
  text-transform: lowercase;
  text-shadow: 6px 6px 0 rgba(230, 57, 70, 0.45);
}
.title-bar, .title-accent { color: var(--color-pop-red); }
.title-bar { display: inline-block; transform: translate(0.1em, 0.22em); }
.lens-flare {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(255, 209, 102, 0.48));
}
.lens-flare-title {
  position: absolute;
  left: 54%;
  top: 46%;
  width: 310px;
  height: 310px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.1);
  animation: lens-flare-scale-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards, lens-flare-breathe 6s ease-in-out 1.5s infinite;
}
.moon-phase-container {
  position: absolute;
  right: 6%;
  bottom: 14%;
}
.hud-moon-display {
  position: relative;
  display: grid;
  place-items: center;
  gap: 1.2rem;
  opacity: 0;
  animation: fade-in 0.8s ease-out 0.6s forwards;
}
.moon-reticle {
  position: absolute;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(6, 214, 160, 0.35);
  border-radius: 50%;
  box-shadow: inset 0 0 0 24px rgba(6, 214, 160, 0.02), inset 0 0 0 62px rgba(6, 214, 160, 0.03);
  animation: spin 42s linear infinite;
}
.moon-reticle::before, .moon-reticle::after {
  content: '';
  position: absolute;
  inset: 50% -22px auto -22px;
  height: 1px;
  background: rgba(6, 214, 160, 0.3);
}
.moon-reticle::after { transform: rotate(90deg); }
.moon-phase, .moon-phase-large {
  position: relative;
  border-radius: 50%;
  background: var(--color-lunar-white);
  box-shadow: 0 0 20px rgba(241, 250, 238, 0.3), inset -28px 0 34px rgba(11, 20, 35, 0.75);
}
.moon-phase { width: 126px; height: 126px; }
.moon-readout {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(6, 214, 160, 0.8);
  text-align: center;
  text-transform: uppercase;
}

.act-ii {
  min-height: 150vh;
  padding: 8rem 4vw 10rem;
  background:
    linear-gradient(180deg, var(--color-void), var(--color-abyss) 48%, var(--color-void)),
    var(--color-void);
}
.act-label {
  width: max-content;
  margin: 0 auto 5rem 12vw;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: rgba(6, 214, 160, 0.6);
}
.panels-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: minmax(80px, auto);
  gap: 2rem;
  max-width: 1320px;
  margin: 0 auto;
}
.panel {
  position: relative;
  min-height: 260px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 3px solid var(--color-pop-red);
  border-left: 0;
  background:
    radial-gradient(circle, rgba(168, 218, 220, 0.18) 2px, transparent 2.4px) 0 0 / 14px 14px,
    linear-gradient(135deg, rgba(241, 250, 238, 0.98), rgba(168, 218, 220, 0.95));
  color: var(--color-steel-blue);
  box-shadow: 14px 14px 0 var(--color-abyss);
  opacity: 0;
  transform: translateY(30px) rotate(0deg);
  transition: transform 500ms ease, box-shadow 500ms ease, border-color 500ms ease, opacity 500ms ease;
}
.panel::before {
  content: attr(data-code);
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(29, 53, 87, 0.28);
}
.panel-border-draw {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--color-pop-red);
  transition: height 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background 500ms ease;
}
.panel.in-view {
  opacity: 1;
  transform: translateY(0) rotate(var(--rotation));
}
.panel.in-view .panel-border-draw { height: 100%; }
.panel:hover { border-color: var(--color-electric-mint); box-shadow: 18px 18px 0 rgba(6, 214, 160, 0.28); }
.panel:hover .panel-border-draw { background: var(--color-electric-mint); }
.panel-1 { grid-column: 1 / span 4; grid-row: 1; --rotation: 1.5deg; }
.panel-2 { grid-column: 6 / span 5; grid-row: 2; --rotation: -2.3deg; }
.panel-3 { grid-column: 2 / span 5; grid-row: 4; --rotation: 2deg; }
.panel-4 { grid-column: 7 / span 4; grid-row: 5; --rotation: -1.8deg; }
.panel-5 { grid-column: 1 / span 5; grid-row: 7; --rotation: 1.2deg; }
.panel-6 { grid-column: 5 / span 5; grid-row: 8; --rotation: -2.1deg; }
.panel-title {
  max-width: 10ch;
  margin-bottom: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-void);
}
.panel-text { max-width: 38ch; color: var(--color-steel-blue); }
.panel-text em {
  position: relative;
  color: var(--color-pop-red);
  font-style: normal;
  font-weight: 500;
}
.panel-text em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 2px;
  background: var(--color-solar-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.panel.in-view .panel-text em::after, .panel-text em:hover::after { transform: scaleX(1); }
.pull-quote {
  position: relative;
  z-index: 3;
  align-self: center;
  padding: 1rem 1.5rem;
  font-family: var(--font-accent);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.08;
  color: var(--color-pop-red);
  background: rgba(11, 20, 35, 0.72);
  border: 3px solid var(--color-electric-mint);
  transform: rotate(2deg);
  opacity: 0;
  transition: opacity 500ms ease, transform 500ms ease;
}
.pull-quote.in-view { opacity: 1; transform: rotate(2deg) translateY(0); }
.quote-1 { grid-column: 4 / span 4; grid-row: 3; }
.quote-2 { grid-column: 2 / span 4; grid-row: 6; transform: rotate(-2deg); }
.quote-2.in-view { transform: rotate(-2deg); }
.quote-3 { grid-column: 6 / span 4; grid-row: 9; }
.quote-text::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.7rem;
  background: var(--color-solar-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pull-quote.in-view .quote-text::after { transform: scaleX(1); }
.gutter-burst, .speed-lines {
  position: absolute;
  pointer-events: none;
  opacity: 0.75;
}
.gutter-burst {
  width: 260px;
  height: 260px;
  background-image: radial-gradient(circle, rgba(168, 218, 220, 0.24) 3px, transparent 3.3px);
  background-size: 14px 14px;
}
.burst-one { top: 12%; right: 16%; }
.burst-two { left: 1%; top: 44%; }
.speed-lines {
  width: 340px;
  height: 160px;
  background: repeating-linear-gradient(45deg, transparent 0 10px, rgba(168, 218, 220, 0.2) 10px 11px, transparent 11px 20px);
}
.speed-one { top: 27%; left: 12%; transform: rotate(-8deg); }
.speed-two { right: 7%; bottom: 22%; transform: rotate(8deg); }

.act-iii {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 6rem 1.5rem;
  background: radial-gradient(circle at 50% 45%, rgba(230, 57, 70, 0.16), transparent 24%), linear-gradient(180deg, var(--color-void), var(--color-abyss));
}
.closing-panel {
  position: relative;
  width: min(720px, 92vw);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  border: 3px solid var(--color-electric-mint);
  background: rgba(11, 20, 35, 0.76);
  box-shadow: 0 0 0 10px rgba(230, 57, 70, 0.18), 0 0 70px rgba(6, 214, 160, 0.18);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.closing-panel.in-view { opacity: 1; transform: translateY(0); }
.lens-flare-closing {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  animation: lens-flare-pulse 4s ease-in-out infinite;
}
.moon-phase-large {
  width: min(38vw, 210px);
  height: min(38vw, 210px);
  margin: 0 auto 1.5rem;
  z-index: 1;
}
.closing-title {
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
  font-family: var(--font-accent);
  font-size: clamp(2.3rem, 6vw, 4rem);
  color: var(--color-pop-red);
}
.closing-text {
  position: relative;
  z-index: 1;
  max-width: 38ch;
  margin: 0 auto;
  color: var(--color-pale-cyan);
}

@keyframes hud-fade-in { to { opacity: 1; } }
@keyframes pulse-attention { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.12; } }
@keyframes scan-drift { from { top: -1px; } to { top: 100vh; } }
@keyframes rotate-reticle { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes lens-flare-scale-in { to { opacity: 0.88; transform: translate(-50%, -50%) scale(1); } }
@keyframes lens-flare-breathe { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes lens-flare-pulse { 0%,100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; } 50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } }

@media (max-width: 820px) {
  .hud-readout-tr, .hud-readout-br { display: none; }
  .title-container { top: 22%; left: 4%; }
  .moon-phase-container { right: 50%; bottom: 12%; transform: translateX(50%); }
  .moon-reticle { width: 220px; height: 220px; }
  .act-ii { padding: 5rem 1rem; }
  .act-label { margin-left: 0; }
  .panels-container { display: block; }
  .panel, .pull-quote { margin: 0 0 2rem; transform: rotate(0deg) !important; }
  .panel.in-view, .pull-quote.in-view { transform: rotate(0deg) !important; }
  .gutter-burst, .speed-lines { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hud-overlay, .hud-moon-display, .panel, .pull-quote, .closing-panel, .lens-flare-title { opacity: 1; }
  .panel, .closing-panel { transform: none; }
  .panel-border-draw { height: 100%; }
  .quote-text::after, .panel-text em::after { transform: scaleX(1); }
}