/* Retro matrix demo — visual overlay only */

:root {
  --retro-green: #39ff14;
  --retro-green-soft: #70ff70;
  --retro-bg: #19191e;
  --crt-red: rgb(218, 49, 49);
  --crt-green: rgb(112, 159, 115);
  --crt-blue: rgb(40, 129, 206);
}

/* Progressive retro layers (cumulative — retro-l1 … retro-l8 on body) */

body.retro-l1 ::selection,
body.retro-mode ::selection {
  background: rgba(57, 255, 20, 0.45);
  color: #0a0a0a;
}

body.retro-l1 ::-moz-selection,
body.retro-mode ::-moz-selection {
  background: rgba(57, 255, 20, 0.45);
  color: #0a0a0a;
}

body.retro-l2,
body.retro-mode {
  font-family: "Courier New", Courier, monospace;
}

body.retro-l3 {
  --floa-blue: var(--retro-green);
  --floa-blue-dark: #2ecc40;
}

body.retro-l3 .site-header__logo img,
body.retro-l3 .site-footer__logo img,
body.retro-mode .site-header__logo img,
body.retro-mode .site-footer__logo img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(52%) saturate(1200%) hue-rotate(65deg);
}

body.retro-l4 h1,
body.retro-l4 h2,
body.retro-l4 h3,
body.retro-l4 p,
body.retro-l4 li,
body.retro-l4 span,
body.retro-l4 blockquote,
body.retro-l4 label,
body.retro-l4 .form-label,
body.retro-mode h1,
body.retro-mode h2,
body.retro-mode h3,
body.retro-mode p,
body.retro-mode li,
body.retro-mode span,
body.retro-mode blockquote,
body.retro-mode label,
body.retro-mode .form-label {
  text-shadow:
    0 0 0.2em currentColor,
    1px 1px rgba(255, 0, 255, 0.35),
    -1px -1px rgba(0, 255, 255, 0.3);
}

/* Glitch phase */
@keyframes retroGlitchShake {
  0%, 100% { transform: translate(0, 0); filter: none; }
  10% { transform: translate(-4px, 2px); filter: invert(0.08); }
  20% { transform: translate(4px, -2px); filter: invert(0.15); }
  30% { transform: translate(-3px, -1px); filter: hue-rotate(90deg); }
  40% { transform: translate(3px, 1px); filter: invert(0.2); }
  50% { transform: translate(-2px, 2px); filter: saturate(2); }
  60% { transform: translate(2px, -2px); filter: invert(0.1); }
  70% { transform: translate(-1px, 0); }
  80% { transform: translate(1px, 1px); filter: hue-rotate(120deg); }
}

body.retro-glitch {
  animation: retroGlitchShake 1s steps(10) forwards;
}

/* Full white flash between glitch and shut-off (legacy class — kept for resetRetro) */
body.retro-flash-white {
  overflow: hidden;
}

body.retro-flash-white::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #fff;
  pointer-events: none;
}

html:has(body.retro-shutoff),
html:has(body.retro-blank),
html:has(body.retro-boot) {
  background: #000;
}

/*
 * CRT power-off — white plane collapses via clip-path:
 * full screen → horizontal line → bright center dot → gone
 */
@keyframes retroShutoffCollapse {
  0%, 14% {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
    filter: brightness(1);
    box-shadow: none;
  }
  40% {
    clip-path: inset(49.35% 0% 49.35% 0%);
    opacity: 1;
    filter: brightness(1.2);
    box-shadow: 0 0 36px 6px rgba(255, 255, 255, 0.85);
  }
  54% {
    clip-path: inset(49.35% 0% 49.35% 0%);
    opacity: 1;
    filter: brightness(1.45);
    box-shadow: 0 0 48px 10px #fff;
  }
  70% {
    clip-path: inset(49.55% 49.55% 49.55% 49.55%);
    opacity: 1;
    filter: brightness(1.75);
    box-shadow: 0 0 28px 14px #fff;
  }
  84% {
    clip-path: inset(49.88% 49.88% 49.88% 49.88%);
    opacity: 1;
    filter: brightness(2);
    box-shadow: 0 0 20px 16px #fff;
  }
  100% {
    clip-path: inset(50% 50% 50% 50%);
    opacity: 0;
    filter: brightness(1);
    box-shadow: none;
  }
}

body.retro-shutoff {
  overflow: hidden;
  background: #000 !important;
}

body.retro-shutoff > * {
  visibility: hidden !important;
  animation: none !important;
}

body.retro-shutoff::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: #fff;
  pointer-events: none;
  will-change: clip-path, opacity, filter;
  animation: retroShutoffCollapse 1s linear forwards;
}

/* Solid black hold before rebuild (1s) */
body.retro-blank {
  background: #000 !important;
  overflow: hidden;
}

body.retro-blank > * {
  visibility: hidden !important;
}

body.retro-blank::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: #000;
  pointer-events: none;
}

/* CRT power-on — black curtain lifts to reveal pre-styled dark page (no white flash) */
@keyframes retroBootCurtainLift {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

body.retro-boot {
  overflow: hidden;
  background-color: #000 !important;
  font-family: "Courier New", Courier, monospace;
  color: var(--retro-green-soft);
  --floa-blue: var(--retro-green);
  --text-primary: var(--retro-green-soft);
  --text-muted: rgba(112, 255, 112, 0.65);
  --bg-page: #1a1a1a;
  --bg-section: #141414;
  --border: rgba(57, 255, 20, 0.25);
  --footer-bg: #0a0a0a;
}

body.retro-boot > * {
  visibility: visible !important;
}

body.retro-boot .view:not([data-view="landing"]) {
  display: none !important;
}

body.retro-boot::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100003;
  background: #000;
  pointer-events: none;
  animation: retroBootCurtainLift 0.85s ease-out forwards;
}

body.retro-boot .site-header {
  background: #0d0d0d;
  border-bottom-color: rgba(57, 255, 20, 0.3);
  color: var(--retro-green-soft);
}

body.retro-boot .site-header__logo img,
body.retro-boot .site-footer__logo img {
  filter: brightness(0) saturate(100%) invert(78%) sepia(52%) saturate(1200%) hue-rotate(65deg);
}

body.retro-boot .hero,
body.retro-boot .section,
body.retro-boot .section--alt,
body.retro-boot .cta-section {
  background: #141414;
}

body.retro-boot .section--alt {
  background: #111;
}

body.retro-boot .site-footer {
  background: #050505;
  color: rgba(112, 255, 112, 0.75);
}

body.retro-boot .info-card,
body.retro-boot .fact-card,
body.retro-boot .timeline__item {
  background: #1a1a1a;
  border-color: rgba(57, 255, 20, 0.25);
}

body.retro-boot .hero__vision {
  border-left-color: var(--retro-green);
  background: #111;
}

body.retro-boot .btn--primary {
  background: transparent;
  color: var(--retro-green);
  border-color: var(--retro-green);
}

body.retro-boot .info-card__number {
  background: var(--retro-green);
  color: #0a0a0a;
}

body.retro-boot .phase-breadcrumb__item {
  background: #111;
  border-color: rgba(57, 255, 20, 0.3);
  color: var(--retro-green-soft);
}

/* CRT active mode (level 7+ and full sequence end state) */
body.retro-mode {
  background-color: var(--retro-bg);
  color: rgba(255, 255, 255, 0.75);
  --floa-blue: var(--retro-green);
  --floa-blue-dark: #2ecc40;
  --text-primary: var(--retro-green-soft);
  --text-muted: rgba(112, 255, 112, 0.65);
  --bg-page: #1a1a1a;
  --bg-section: #141414;
  --border: rgba(57, 255, 20, 0.25);
  --footer-bg: #0a0a0a;
}

body.retro-mode ::selection {
  background: rgba(57, 255, 20, 0.45);
  color: #0a0a0a;
}

body.retro-mode ::-moz-selection {
  background: rgba(57, 255, 20, 0.45);
  color: #0a0a0a;
}

/*
 * CRT overlays on html (above curtain during boot, above all content in retro-mode).
 * ::after  — vignette + lensing (normal blend: tints text/UI, not just background)
 * ::before — scanlines + RGB mask (overlay blend)
 */
html:has(body.retro-l6)::after,
html:has(body.retro-boot)::after,
html:has(body.retro-mode)::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100004;
  mix-blend-mode: normal;
  background:
    radial-gradient(
      ellipse 72% 66% at 50% 46%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.018) 48%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 84% 78% at 50% 50%,
      transparent 28%,
      rgba(0, 0, 0, 0.16) 52%,
      rgba(0, 0, 0, 0.3) 68%,
      rgba(0, 0, 0, 0.38) 100%
    ),
    radial-gradient(
      ellipse 100% 96% at 50% 50%,
      transparent 24%,
      rgba(0, 0, 0, 0.18) 58%,
      rgba(0, 0, 0, 0.34) 100%
    );
}

html:has(body.retro-l5)::before,
html:has(body.retro-boot)::before,
html:has(body.retro-mode)::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100005;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.18) 0px,
      rgba(0, 0, 0, 0.18) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      var(--crt-red) 0px,
      var(--crt-green) 2px,
      var(--crt-blue) 4px
    ),
    repeating-linear-gradient(
      90deg,
      var(--crt-red) 1px,
      var(--crt-green) 2px,
      var(--crt-blue) 3px
    );
  mix-blend-mode: overlay;
  opacity: 0.68;
}

body.retro-boot::after,
body.retro-mode::before,
body.retro-mode::after {
  content: none;
}

body.retro-mode .site-header {
  z-index: 50;
  background: #0d0d0d;
  border-bottom: 1px solid rgba(57, 255, 20, 0.3);
  color: var(--retro-green-soft);
}

body.retro-mode .site-header__nav a:not(.btn) {
  color: rgba(112, 255, 112, 0.85);
  font-family: inherit;
  text-shadow:
    0 0 0.2em currentColor,
    1px 1px rgba(255, 0, 255, 0.25),
    -1px -1px rgba(0, 255, 255, 0.2);
}

body.retro-mode .site-header__nav a:not(.btn):hover {
  color: var(--retro-green);
}

body.retro-mode .site-header__nav .btn--sm {
  font-family: inherit;
  text-shadow:
    0 0 0.2em currentColor,
    1px 1px rgba(255, 0, 255, 0.25),
    -1px -1px rgba(0, 255, 255, 0.2);
}

body.retro-mode .hero {
  background: #141414;
  border-bottom-color: rgba(57, 255, 20, 0.2);
}

body.retro-mode .section--alt {
  background: #111;
}

body.retro-mode .info-card,
body.retro-mode .fact-card,
body.retro-mode .timeline__item {
  background: #1a1a1a;
  border-color: rgba(57, 255, 20, 0.25);
}

body.retro-mode .hero__vision {
  border-left-color: var(--retro-green);
  background: #111;
}

body.retro-mode .btn--primary {
  background: transparent;
  color: var(--retro-green);
  border-color: var(--retro-green);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.2);
}

body.retro-mode .btn--primary:hover {
  background: rgba(57, 255, 20, 0.1);
}

body.retro-mode .phase-breadcrumb__item {
  background: #111;
  border-color: rgba(57, 255, 20, 0.3);
  color: var(--retro-green-soft);
}

body.retro-mode .info-card__number {
  background: var(--retro-green);
  color: #0a0a0a;
}

body.retro-mode .site-footer {
  position: relative;
  z-index: 1;
  background: #050505;
  border-top: 1px solid rgba(57, 255, 20, 0.2);
  color: rgba(112, 255, 112, 0.75);
}

body.retro-mode .site-footer p,
body.retro-mode .site-footer__legal,
body.retro-mode .site-footer a {
  color: rgba(112, 255, 112, 0.55);
  text-shadow:
    0 0 0.15em currentColor,
    1px 1px rgba(255, 0, 255, 0.2),
    -1px -1px rgba(0, 255, 255, 0.15);
}

body.retro-mode .site-footer__legal {
  border-top-color: rgba(57, 255, 20, 0.2);
}

body.retro-mode .btn--ghost,
body.retro-mode .btn--secondary {
  background: transparent;
  color: var(--retro-green-soft);
  border-color: rgba(57, 255, 20, 0.35);
  text-shadow: 0 0 0.15em currentColor;
}

body.retro-mode .btn--ghost:hover,
body.retro-mode .btn--secondary:hover {
  background: rgba(57, 255, 20, 0.08);
  border-color: var(--retro-green);
  color: var(--retro-green);
}

body.retro-mode .wizard {
  background: var(--retro-bg);
}

body.retro-mode .wizard__back {
  font-family: inherit;
}

/* Form readability in CRT mode */
body.retro-mode .form-panel {
  background: #141414;
  border-color: rgba(57, 255, 20, 0.2);
}

body.retro-mode .form-panel h1,
body.retro-mode .form-panel h2,
body.retro-mode .form-panel h3,
body.retro-mode .form-panel p,
body.retro-mode .form-panel li,
body.retro-mode .form-panel span,
body.retro-mode .form-panel label,
body.retro-mode .form-panel .form-label,
body.retro-mode .form-panel .form-help,
body.retro-mode .form-panel .radio-option span {
  text-shadow: 0 0 0.15em currentColor;
}

body.retro-mode .wizard__title {
  font-size: 26px;
}

body.retro-mode .form-group .form-label {
  font-size: 16px;
}

body.retro-mode .form-group .form-help {
  font-size: 15px;
}

body.retro-mode .radio-option span {
  font-size: 16px;
}

body.retro-mode .form-group input[type="text"],
body.retro-mode .form-group input[type="email"],
body.retro-mode .form-group select,
body.retro-mode .form-group textarea {
  font-size: 15px;
  background: #1a1a1a;
  border-color: rgba(57, 255, 20, 0.25);
  color: var(--retro-green-soft);
}

body.retro-mode .radio-option {
  border-color: rgba(57, 255, 20, 0.25);
  background: #1a1a1a;
}

body.retro-mode .radio-option:hover {
  border-color: rgba(57, 255, 20, 0.45);
  background: rgba(57, 255, 20, 0.06);
}

body.retro-mode .radio-option:has(input:checked) {
  border-color: var(--retro-green);
  background: rgba(57, 255, 20, 0.1);
}

/* Typewriter helpers */
.retro-typing--single {
  overflow: hidden;
  white-space: nowrap;
}

.retro-typing--block {
  overflow: visible;
  white-space: normal;
}

.retro-typing-done {
  white-space: normal;
  overflow: visible;
}

.retro-cursor::after {
  content: "_";
  animation: retroBlinkCursor 500ms infinite;
  margin-left: 1px;
}

@keyframes retroBlinkCursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.retro-glitch {
    animation: none;
  }

  body.retro-shutoff::after {
    animation: none;
    clip-path: inset(50% 50% 50% 50%);
    opacity: 0;
  }

  body.retro-boot::before {
    animation: none;
    opacity: 0;
  }
}