/* Vaporwave margins — static “album cover” look; reading column stays opaque (#vapor-reading-shelf) */

:root {
  --vapor-paper-solid: #fffdfa;
  --vapor-cyan: #01cdfe;
  --vapor-magenta: #ff71ce;
  --vapor-violet: #8b5cf6;
  --vapor-dawn: #f9a8d4;
  --vapor-grid: rgba(216, 180, 254, 0.38);
  --vapor-grid-line: rgba(255, 113, 206, 0.22);
  --vapor-shelf-max: 56rem;
  --vapor-fx-z: 0;
  --vapor-margin-mask: linear-gradient(
    to right,
    #000 0,
    #000 max(0px, calc(50% - var(--vapor-shelf-max) / 2 - 1.25rem)),
    transparent max(0px, calc(50% - var(--vapor-shelf-max) / 2)),
    transparent min(100%, calc(50% + var(--vapor-shelf-max) / 2)),
    #000 min(100%, calc(50% + var(--vapor-shelf-max) / 2 + 1.25rem))
  );
}

html.has-vapor-theme {
  min-height: 100%;
}

/* Theme backdrop is always static (no drifting sky, no floating decor) */
html.has-vapor-theme::before,
html.has-vapor-theme::after,
body.has-vapor-theme > .vapor-decor {
  animation: none !important;
  animation-name: none !important;
}

/* Static purple sunrise — no animation; soft sun bloom in the margin */
html.has-vapor-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--vapor-fx-z);
  pointer-events: none;
  transform: translateZ(0);
  contain: strict;
  background:
    radial-gradient(
      ellipse 95% 55% at 82% 14%,
      rgba(255, 214, 165, 0.55) 0%,
      rgba(255, 113, 206, 0.35) 28%,
      rgba(139, 92, 246, 0.12) 52%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 120% 40% at 50% 100%,
      rgba(192, 132, 252, 0.35) 0%,
      rgba(88, 28, 135, 0.2) 45%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #12082a 0%,
      #2d1b69 12%,
      #5b21b6 26%,
      #7c3aed 38%,
      #c026d3 52%,
      #f472b6 64%,
      #fdba74 76%,
      #e9d5ff 88%,
      #6d28d9 100%
    );
  -webkit-mask-image: var(--vapor-margin-mask);
  mask-image: var(--vapor-margin-mask);
}

/* Perspective grid — fixed, margin-only (same look as early “home” build) */
html.has-vapor-theme::after {
  content: "";
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: -18%;
  height: 52%;
  z-index: var(--vapor-fx-z);
  pointer-events: none;
  transform: perspective(320px) rotateX(58deg) translateZ(0);
  transform-origin: center bottom;
  contain: strict;
  opacity: 0.78;
  background-image: linear-gradient(var(--vapor-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vapor-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to top, black 38%, transparent 94%), var(--vapor-margin-mask);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to top, black 38%, transparent 94%), var(--vapor-margin-mask);
  -webkit-mask-composite: source-in;
}

body.has-vapor-theme {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background-color: transparent !important;
}

body.has-vapor-theme > .vapor-decor {
  z-index: var(--vapor-fx-z);
  pointer-events: none;
  contain: layout style paint;
}

.vapor-decor {
  position: fixed;
}

/* Scan-striped sun — purple sunrise disk in the right margin */
.vapor-sun {
  width: 132px;
  height: 132px;
  top: calc(var(--site-nav-total-h, var(--site-nav-h, 3rem)) + 1.25rem);
  right: max(0.75rem, calc((100vw - var(--vapor-shelf-max)) / 2 - 7rem));
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    #fff1c9 0%,
    #fde68a 18%,
    #f9a8d4 42%,
    #e879f9 68%,
    #a855f7 100%
  );
  box-shadow:
    0 0 64px rgba(232, 121, 249, 0.55),
    0 0 120px rgba(124, 58, 237, 0.35),
    inset 0 -8px 24px rgba(88, 28, 135, 0.25);
  opacity: 0.58;
}

.vapor-sun::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 5px,
    rgba(255, 255, 255, 0.42) 5px,
    rgba(255, 255, 255, 0.42) 9px
  );
}

/* CRT scanlines — left/right margin strips only (no full-screen overlay) */
.vapor-scanlines {
  top: var(--site-nav-total-h, var(--site-nav-h, 3rem));
  bottom: 0;
  width: max(0px, calc((100vw - var(--vapor-shelf-max)) / 2 - 0.5rem));
  opacity: 0.055;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(46, 16, 84, 0.35) 2px,
    rgba(46, 16, 84, 0.35) 3px
  );
}

.vapor-scanlines.vapor-scanlines-left {
  left: 0;
}

.vapor-scanlines.vapor-scanlines-right {
  right: 0;
}

#vapor-reading-shelf {
  position: relative;
  z-index: 2;
  isolation: isolate;
  max-width: var(--vapor-shelf-max);
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - var(--site-nav-total-h, var(--site-nav-h, 3rem)));
  background-color: var(--vapor-paper-solid) !important;
  box-sizing: border-box;
}

#vapor-reading-shelf > main,
#vapor-reading-shelf > .wrap {
  background: transparent !important;
  box-shadow: none !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}

body.has-vapor-theme[data-vapor-family="experiment"],
body.has-vapor-theme[data-vapor-family="montreal"],
body.has-vapor-theme[data-vapor-family="theory"],
body.has-vapor-theme[data-vapor-family="legacy"] {
  background: transparent !important;
  max-width: none !important;
  box-shadow: none !important;
}

#vapor-reading-shelf .viz-box {
  background-color: #fafafa !important;
  border-color: #d4cfc4 !important;
}

#vapor-reading-shelf .viz-head {
  background: #f1efe9 !important;
}

#vapor-reading-shelf .viz-box canvas,
#vapor-reading-shelf .viz-stage {
  background: #fff !important;
}

#vapor-reading-shelf .viz-stage {
  background: #faf8f4 !important;
}

body.has-vapor-theme .embed-back,
body.has-vapor-theme p.site-trail {
  text-shadow: none;
}

body.has-vapor-theme #site-nav-bar {
  background: linear-gradient(90deg, #12082a 0%, #4c1d95 42%, #7e22ce 58%, #12082a 100%);
  border-bottom-color: var(--vapor-dawn);
}

body.has-vapor-theme #site-nav-drawer header {
  background: linear-gradient(135deg, #2e1065, #7c3aed 55%, #db2777);
  border-bottom-color: #f0abfc;
}

html.has-vapor-theme:has(body[data-vapor-family="legacy"])::before {
  filter: saturate(0.75) hue-rotate(4deg);
}

html.vapor-theme-off::before,
html.vapor-theme-off::after,
html.vapor-theme-off .vapor-decor,
html:not(.has-vapor-theme)::before,
html:not(.has-vapor-theme)::after {
  display: none !important;
}

html.vapor-theme-off body.has-vapor-theme {
  background: #f7f4ef !important;
}

html.vapor-theme-off #vapor-reading-shelf {
  background: transparent !important;
  min-height: 0;
  isolation: auto;
  z-index: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.has-vapor-theme::before,
  html.has-vapor-theme::after {
    animation: none !important;
  }
}

@media print {
  html.has-vapor-theme::before,
  html.has-vapor-theme::after,
  .vapor-decor {
    display: none !important;
  }
  #vapor-reading-shelf {
    background: #fff !important;
  }
}

@media (max-width: 720px) {
  .vapor-sun {
    width: 88px;
    height: 88px;
    opacity: 0.38;
    right: 0.5rem;
  }
  .vapor-scanlines {
    display: none;
  }
}