/* Animisha.dev — shared vaporwave scene + base tokens */
:root {
  --navy: #0a0a1a;
  --navy-mid: rgba(12, 18, 42, 0.85);
  --navy-light: #1a1040;
  --teal: #00f5d4;
  --teal-dim: #00c9a7;
  --green-wave: #1de9b6;
  --blue-wave: #2979ff;
  --magenta: #ff2a6d;
  --purple: #9d4edd;
  --gold: #f5e642;
  --gold-soft: #ffe566;
  --text: #e8f4ff;
  --muted: #8ba8d4;
  --border: rgba(0, 245, 212, 0.25);
  --neon-cyan: 0 0 20px rgba(0, 245, 212, 0.5), 0 0 40px rgba(0, 245, 212, 0.2);
  --neon-pink: 0 0 20px rgba(255, 42, 109, 0.5);
  --anim-dur-sun: 12.6s;
  --anim-dur-slow: 14s;
  --anim-dur-grid-ghost: 15.4s;
  --anim-dur-haze: 21s;
  --anim-dur-wave: 9s;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: "DM Sans", system-ui, sans-serif;
  background: var(--navy);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: clamp(3.25rem, 9vw, 4.25rem);
  padding-bottom: 3rem;
}

/* layout rhythm in site-responsive.css */

/* —— Vaporwave Earth scene —— */
.vapor-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #0a0520 0%,
    #1a0a3e 35%,
    #2d1b69 55%,
    #0d3d5c 75%,
    #062a2a 100%
  );
  animation: scene-breathe var(--anim-dur-haze) ease-in-out infinite alternate;
}

@keyframes scene-breathe {
  0% { filter: hue-rotate(0deg) saturate(1); }
  50% { filter: hue-rotate(4deg) saturate(1.06); }
  100% { filter: hue-rotate(-3deg) saturate(0.98); }
}

/* Distant duplicate horizon — déjà vu haze */
.vapor-scene::before {
  content: "";
  position: absolute;
  left: -80%;
  right: -80%;
  bottom: 8%;
  height: 42%;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 42, 109, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 212, 0.15) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(420px) rotateX(74deg) scale(1.08);
  transform-origin: center top;
  mask-image: linear-gradient(to top, black 8%, transparent 88%);
  animation: grid-scroll var(--anim-dur-grid-ghost) linear infinite;
  filter: blur(0.6px);
}

.vapor-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 35% at 50% 72%, rgba(157, 78, 221, 0.14), transparent 70%),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 120px,
      rgba(0, 245, 212, 0.03) 120px,
      rgba(0, 245, 212, 0.03) 121px
    );
  animation: deja-drift var(--anim-dur-haze) ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

@keyframes deja-drift {
  0% { transform: translateX(-1.5%) scale(1); opacity: 0.85; }
  100% { transform: translateX(1.5%) scale(1.02); opacity: 1; }
}

.vapor-sun {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(280px, 40vw);
  height: min(280px, 40vw);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe566 0%, #ff2a6d 45%, #9d4edd 100%);
  box-shadow: 0 0 80px rgba(255, 42, 109, 0.4);
  opacity: 0.35;
  overflow: hidden;
}

/* CRT scanlines drifting down the sun — slow, resilient */
.vapor-sun::after {
  content: "";
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 7px,
    rgba(10, 5, 32, 0.42) 7px,
    rgba(10, 5, 32, 0.42) 13px
  );
  background-size: 100% 26px;
  animation: sun-scan var(--anim-dur-sun) linear infinite;
}

@keyframes sun-scan {
  from { transform: translateY(-26px); }
  to { transform: translateY(0); }
}

/* Perspective floor grid — infinite scroll toward horizon */
.grid-floor {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: -12%;
  height: 58%;
  background-image:
    linear-gradient(rgba(0, 245, 212, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 42, 109, 0.22) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(340px) rotateX(68deg);
  transform-origin: center top;
  mask-image: linear-gradient(to top, black 18%, transparent 96%);
  animation: grid-scroll var(--anim-dur-slow) linear infinite;
}

/* Ghost grid — half-phase offset, uncanny repeat */
.grid-floor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(157, 78, 221, 0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 121, 255, 0.18) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: 24px 12px;
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: grid-scroll-ghost var(--anim-dur-grid-ghost) linear infinite;
}

@keyframes grid-scroll-ghost {
  from { background-position: 24px 12px; }
  to { background-position: 24px 60px; }
}

/* Mirrored reflection — same loop phase as waves */
.grid-floor-mirror {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: 28%;
  height: 22%;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(157, 78, 221, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41, 121, 255, 0.2) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(340px) rotateX(72deg) scaleY(-1);
  transform-origin: center bottom;
  mask-image: linear-gradient(to bottom, transparent 0%, black 40%, transparent 100%);
  animation: grid-mirror-drift var(--anim-dur-grid-ghost) linear infinite reverse;
  filter: blur(0.4px);
}

@keyframes grid-mirror-drift {
  from { background-position: 0 0; transform: perspective(340px) rotateX(72deg) scaleY(-1) translateX(0); }
  to { background-position: 0 48px; transform: perspective(340px) rotateX(72deg) scaleY(-1) translateX(2%); }
}

@keyframes grid-scroll {
  from { background-position: 0 0; }
  to { background-position: 0 48px; }
}

.waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  opacity: 0.55;
}

.wave {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 120px;
  border-radius: 45%;
  animation: wave-drift var(--anim-dur-wave) ease-in-out infinite;
}

.wave-1 {
  bottom: 8%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(41, 121, 255, 0.5),
    rgba(29, 233, 182, 0.45),
    transparent
  );
  animation-duration: 9s;
}

.wave-2 {
  bottom: 14%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(29, 233, 182, 0.4),
    rgba(0, 245, 212, 0.35),
    transparent
  );
  animation-duration: 11s;
  animation-delay: -2s;
}

.wave-3 {
  bottom: 20%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(157, 78, 221, 0.25),
    rgba(41, 121, 255, 0.3),
    transparent
  );
  animation-duration: 13s;
  animation-delay: -4s;
}

@keyframes wave-drift {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50% { transform: translateX(3%) scaleY(1.08); }
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(255, 42, 109, 0.12), transparent),
    radial-gradient(ellipse 50% 30% at 80% 60%, rgba(0, 245, 212, 0.08), transparent),
    radial-gradient(ellipse 60% 25% at 20% 70%, rgba(157, 78, 221, 0.06), transparent);
  animation: glow-pulse var(--anim-dur-haze) ease-in-out infinite alternate;
}

@keyframes glow-pulse {
  0% { opacity: 0.75; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.03); }
}

header,
.sprint-strip,
main,
footer,
#page-root {
  position: relative;
  z-index: 2;
}

h1, h2, .logo {
  /* voice defined in site-type.css */
}

.logo {
  font-size: 1.1rem;
}

.logo-sub {
  margin-top: 0.15rem;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 1.5rem;
}

header:not(.site-topbar) {
  display: none;
}

nav a:hover,
nav a.is-active {
  color: var(--teal);
}

footer {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

footer a { color: var(--teal); }

.site-credits {
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.65;
}

.site-credits a {
  color: var(--teal);
  text-decoration: none;
}

.site-credits a:hover {
  color: var(--gold-soft);
}

.site-credits-sub {
  display: block;
  font-size: 0.74rem;
  opacity: 0.85;
  margin-top: 0.2rem;
}

code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85rem;
  background: var(--navy-light);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

/* Ahimsa: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --anim-dur-slow: 1ms;
    --anim-dur-wave: 1ms;
  }

  .vapor-sun::after,
  .vapor-scene,
  .vapor-scene::before,
  .vapor-scene::after,
  .grid-floor,
  .grid-floor::before,
  .grid-floor-mirror,
  .glow,
  .wave {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}