/* ============================================
   LIGHT LAB HAWAIʻI — Design System
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&family=Space+Mono:wght@400;700&display=swap');

/* ─── COLOR VARIABLES ────────────────────────────────────────── */
:root {
  --black:       #080808;
  --black-soft:  #0a0a0a;
  --black-mid:   #0e0e0e;
  --black-card:  #111111;
  --white:       #F0EDE8;
  --white-dim:   rgba(240, 237, 232, 0.65);
  --white-muted: rgba(240, 237, 232, 0.5);
  --white-ghost: rgba(240, 237, 232, 0.08);

  --teal:        #00E5CC;
  --teal-dim:    rgba(0, 229, 204, 0.4);
  --teal-ghost:  rgba(0, 229, 204, 0.08);
  --magenta:     #FF3DA0;
  --orange:      #FF7A3D;
  --amber:       #FFB830;

  /* Bioluminescent palette — matches nav link hues */
  --coral:       #FF7AB2;
  --violet:      #A882FF;
  --sky:         #7ADCFF;
  --algae:       #8AE8A8;

  /* Neutral structural borders — page-specific accents read clearer against these */
  --border:      rgba(240, 237, 232, 0.06);
  --border-mid:  rgba(240, 237, 232, 0.14);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  --section-pad: 96px 48px;
  --max-width:   1200px;

  /* Button sizing token — keeps all buttons the same height */
  --btn-pad-v: 14px;
  --btn-pad-h: 28px;
}

/* ─── DYNAMIC NIGHT MODE OVERRIDES (Phase 8) ─────────────── */
:root.night-mode {
  --black:       #000000;
  --black-soft:  #030303;
  --black-mid:   #060606;
  --black-card:  #080808;

  --white-dim:   rgba(255, 255, 255, 0.85);

  --teal:        #00FFE4;
  --magenta:     #FF007F;
  --orange:      #FF5E00;

  --border:      rgba(255, 61, 160, 0.15); /* Magenta tinted borders for night */
  --border-mid:  rgba(255, 61, 160, 0.3);
}

/* ─── RAVE MODE ANIMATIONS ──────────────────────────────────── */
@keyframes rave-breathe {
  0%, 100% { background-color: #000000; }
  50%      { background-color: #020204; }
}

@keyframes rave-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 255, 228, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(0, 255, 228, 0.6), 0 0 80px rgba(255, 61, 160, 0.15); }
}

@keyframes btn-shimmer {
  0%   { left: -100%; }
  100% { left: 200%; }
}

@keyframes btn-glow-breathe {
  0%, 100% { box-shadow: 0 0 20px rgba(var(--btn-glow, 0,229,204),.35), 0 0 40px rgba(var(--btn-glow, 0,229,204),.1), inset 0 0 20px rgba(255,255,255,.05); }
  50%      { box-shadow: 0 0 30px rgba(var(--btn-glow, 0,229,204),.55), 0 0 60px rgba(var(--btn-glow, 0,229,204),.2), 0 0 90px rgba(var(--btn-glow, 0,229,204),.08), inset 0 0 20px rgba(255,255,255,.08); }
}

@keyframes btn-border-glow {
  0%, 100% { border-color: rgba(var(--btn-glow-bright, 0,255,228),.5); }
  50%      { border-color: rgba(var(--btn-glow-bright, 0,255,228),.9); }
}

@keyframes rave-border-cycle {
  0%   { border-color: rgba(0, 255, 228, 0.4); }
  33%  { border-color: rgba(255, 61, 160, 0.4); }
  66%  { border-color: rgba(255, 122, 61, 0.4); }
  100% { border-color: rgba(0, 255, 228, 0.4); }
}

@keyframes rave-text-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(255, 61, 160, 0.4); }
  50%      { text-shadow: 0 0 40px rgba(255, 61, 160, 0.7), 0 0 80px rgba(0, 255, 228, 0.2); }
}

@keyframes rave-nav-glow {
  0%, 100% { box-shadow: 0 1px 0 rgba(0, 255, 228, 0.2); }
  50%      { box-shadow: 0 1px 20px rgba(255, 61, 160, 0.15), 0 1px 0 rgba(0, 255, 228, 0.3); }
}

/* Body breathing pulse */
:root.night-mode body {
  animation: rave-breathe 8s ease-in-out infinite, page-fade-in 0.4s ease forwards;
}

/* Nav glow */
:root.night-mode .nav {
  animation: rave-nav-glow 6s ease-in-out infinite;
  border-bottom: 1px solid rgba(0, 255, 228, 0.1);
}

/* Heading glow */
:root.night-mode .display em {
  animation: rave-text-glow 4s ease-in-out infinite;
}

:root.night-mode .section-title em {
  text-shadow: 0 0 24px rgba(255, 61, 160, 0.5);
}

/* CTA buttons pulse */
:root.night-mode .btn-primary {
  animation: rave-glow-pulse 3s ease-in-out infinite;
}

:root.night-mode .btn-primary::after {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,61,160,.3) 50%,
    transparent 70%
  );
}

:root.night-mode .btn-primary:hover {
  animation: none;
  box-shadow: 0 0 50px rgba(0, 255, 228, 0.7), 0 0 100px rgba(255, 61, 160, 0.3);
  transform: translateY(-2px);
}

/* Outline buttons get cycling borders */
:root.night-mode .btn-outline {
  animation: rave-border-cycle 6s linear infinite;
}

:root.night-mode .btn-outline:hover {
  animation: none;
  border-color: var(--teal);
  box-shadow: 0 0 30px rgba(0, 255, 228, 0.3);
}

/* Cards and grid cells get subtle glow borders */
:root.night-mode .grid-2 > *,
:root.night-mode .grid-3 > *,
:root.night-mode .grid-4 > * {
  border: 1px solid rgba(255, 61, 160, 0.1);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}

:root.night-mode .grid-2 > *:hover,
:root.night-mode .grid-3 > *:hover,
:root.night-mode .grid-4 > *:hover {
  border-color: rgba(0, 255, 228, 0.25);
  box-shadow: 0 0 30px rgba(0, 255, 228, 0.08), inset 0 0 30px rgba(0, 255, 228, 0.02);
}

/* Eyebrow labels glow */
:root.night-mode .eyebrow {
  color: var(--magenta);
  text-shadow: 0 0 12px rgba(255, 61, 160, 0.3);
}

/* Images get a subtle hue boost */
:root.night-mode img:not([src*="og-"]) {
  filter: saturate(1.2) contrast(1.05);
  transition: filter 0.4s ease;
}

/* Videos get a slight boost too */
:root.night-mode video {
  filter: saturate(1.15) contrast(1.05) brightness(1.05);
}

/* Scrollbar goes magenta */
:root.night-mode ::-webkit-scrollbar-thumb {
  background: rgba(255, 61, 160, 0.3);
}
:root.night-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 61, 160, 0.5);
}

/* Selection highlight */
:root.night-mode ::selection {
  background: rgba(255, 61, 160, 0.3);
}

/* Nav links get magenta bioluminescence in rave mode */
:root.night-mode .nav-links a:hover {
  text-shadow: 0 0 12px rgba(255,61,160,.5), 0 0 24px rgba(255,61,160,.2);
}
:root.night-mode .nav-links a:hover::after {
  background: var(--magenta);
  box-shadow: 0 2px 12px rgba(255,61,160,.5), 0 4px 24px rgba(255,61,160,.2), 0 0 4px rgba(255,61,160,.6);
}
:root.night-mode .nav-links a:hover::before {
  background: var(--magenta);
  box-shadow: 0 0 6px rgba(255,61,160,.6), 0 0 12px rgba(255,61,160,.3);
}
:root.night-mode .nav-links a.active {
  text-shadow: 0 0 10px rgba(255,61,160,.3);
}
:root.night-mode .nav-links a.active::after {
  background: var(--magenta);
  box-shadow: 0 2px 10px rgba(255,61,160,.35), 0 4px 20px rgba(255,61,160,.12);
}
:root.night-mode .nav-links a.active::before {
  background: var(--magenta);
  box-shadow: 0 0 6px rgba(255,61,160,.5), 0 0 10px rgba(255,61,160,.2);
}

/* Nav CTA button gets magenta in rave mode */
:root.night-mode .nav-cta {
  background: var(--magenta);
  box-shadow: 0 0 16px rgba(255, 61, 160, 0.3);
}

:root.night-mode .nav-cta:hover {
  box-shadow: 0 0 30px rgba(255, 61, 160, 0.5);
}

/* Focus ring goes magenta */
:root.night-mode *:focus-visible {
  outline-color: var(--magenta);
}

/* ─── RAVE MODE: ENHANCED EFFECTS ──────────────────────────── */

/* Full-screen laser sweep overlay */
:root.night-mode body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 61, 160, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 100%, rgba(0, 255, 228, 0.08) 0%, transparent 45%);
  mix-blend-mode: screen;
  animation: rave-aurora 12s ease-in-out infinite alternate;
}

/* Scanlines layer — subtle, like CRT */
:root.night-mode body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.015) 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.6;
  mix-blend-mode: overlay;
}

@keyframes rave-aurora {
  0%   { background-position: 0% 0%, 100% 100%; opacity: 0.7; }
  50%  { background-position: 30% 20%, 70% 80%; opacity: 1; }
  100% { background-position: 60% 40%, 40% 60%; opacity: 0.8; }
}

/* Chromatic aberration on display headings */
@keyframes rave-chroma {
  0%, 100% {
    text-shadow:
      0 0 20px rgba(255, 61, 160, 0.5),
      -1px 0 0 rgba(0, 255, 228, 0.35),
      1px 0 0 rgba(255, 61, 160, 0.35);
  }
  25% {
    text-shadow:
      0 0 28px rgba(0, 255, 228, 0.5),
      -2px 0 0 rgba(0, 255, 228, 0.55),
      2px 0 0 rgba(255, 61, 160, 0.35);
  }
  50% {
    text-shadow:
      0 0 36px rgba(255, 184, 48, 0.4),
      0 0 60px rgba(255, 61, 160, 0.3),
      -1px 0 0 rgba(0, 255, 228, 0.25),
      1px 0 0 rgba(255, 61, 160, 0.45);
  }
  75% {
    text-shadow:
      0 0 28px rgba(255, 61, 160, 0.6),
      -2px 0 0 rgba(255, 61, 160, 0.5),
      2px 0 0 rgba(0, 255, 228, 0.35);
  }
}

:root.night-mode .display em {
  animation: rave-chroma 6s ease-in-out infinite;
}

/* Stat numbers pulse in cycling hues */
@keyframes rave-stat-cycle {
  0%   { color: var(--teal);    text-shadow: 0 0 24px rgba(0, 255, 228, 0.5); }
  33%  { color: var(--magenta); text-shadow: 0 0 24px rgba(255, 61, 160, 0.6); }
  66%  { color: var(--amber);   text-shadow: 0 0 24px rgba(255, 184, 48, 0.5); }
  100% { color: var(--teal);    text-shadow: 0 0 24px rgba(0, 255, 228, 0.5); }
}
:root.night-mode .stat-num {
  animation: rave-stat-cycle 9s ease-in-out infinite;
}

/* Feature dots throb */
@keyframes rave-dot-throb {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 currentColor; }
  50%      { transform: scale(1.3); box-shadow: 0 0 12px 4px currentColor, 0 0 24px 2px currentColor; }
}
:root.night-mode .feature-dot {
  animation: rave-dot-throb 2.5s ease-in-out infinite;
}

/* Stronger saturation on images/video in rave mode */
:root.night-mode img:not([src*="og-"]) {
  filter: saturate(1.45) contrast(1.1) hue-rotate(-4deg);
}

:root.night-mode video {
  filter: saturate(1.4) contrast(1.1) brightness(1.08);
}

/* Eyebrow flicker */
@keyframes rave-eyebrow-flicker {
  0%, 92%, 100% { opacity: 1; }
  93%, 96%      { opacity: 0.5; }
  94%           { opacity: 1;   text-shadow: 0 0 18px rgba(255, 61, 160, 0.9); }
}
:root.night-mode .eyebrow {
  animation: rave-eyebrow-flicker 7s ease-in-out infinite;
}

/* Nav wordmark gets cycling accent */
@keyframes rave-wordmark-cycle {
  0%, 100% { color: var(--magenta); text-shadow: 0 0 14px rgba(255, 61, 160, 0.7); }
  50%      { color: var(--teal);    text-shadow: 0 0 14px rgba(0, 255, 228, 0.7); }
}
:root.night-mode .nav-wordmark span {
  animation: rave-wordmark-cycle 4s ease-in-out infinite;
}

/* Pricing numbers pulse */
:root.night-mode .section [style*="font-size:clamp(48px,5vw,72px)"] {
  animation: rave-stat-cycle 7s ease-in-out infinite;
}

/* Section hover gets a stronger glow */
:root.night-mode .grid-2 > *:hover,
:root.night-mode .grid-3 > *:hover,
:root.night-mode .grid-4 > *:hover {
  border-color: rgba(255, 61, 160, 0.45);
  box-shadow: 0 0 40px rgba(255, 61, 160, 0.15), 0 0 80px rgba(0, 255, 228, 0.08), inset 0 0 30px rgba(255, 61, 160, 0.04);
}

/* Theme toggle itself glows when in rave mode */
@keyframes rave-toggle-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 61, 160, 0.5), 0 0 30px rgba(255, 61, 160, 0.2); }
  50%      { box-shadow: 0 0 28px rgba(0, 255, 228, 0.6), 0 0 50px rgba(255, 61, 160, 0.3); }
}
:root.night-mode .theme-toggle {
  animation: rave-toggle-pulse 3s ease-in-out infinite;
}

/* ─── RAVE MODE: LASER PROJECTIONS ──────────────────────────── */
/* Floating laser-projected emblems (mushroom, jellyfish, wordmark) that only appear in rave mode */

/* ─── RAVE MODE: LASER PROJECTIONS ──────────────────────────── */
/* Floating laser-projected creatures (mushroom, jellyfish, wordmark) that only appear in rave mode */

.rave-projection {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: none;
  z-index: 9997;
  mix-blend-mode: screen;
  filter: blur(0.3px) drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);
  transition: opacity 0.6s ease;
}

:root.night-mode .rave-projection {
  opacity: 0.85;
  visibility: visible;
  display: block;
}

/* ───── JELLYFISH: drifting swimmers, long organic paths ───── */
/* Paths hug the viewport edges and avoid the center hero column.
   Each jellyfish has its own personality — speed, path, pulse rhythm. */

@keyframes jelly-swim-1 {
  /* Slow drifter — left edge → top → right edge, skirting the center */
  0%   { transform: translate(-15vw, 25vh) rotate(-4deg); }
  20%  { transform: translate(8vw, 8vh) rotate(3deg); }
  40%  { transform: translate(2vw, 42vh) rotate(-6deg); }
  60%  { transform: translate(88vw, 18vh) rotate(5deg); }
  80%  { transform: translate(92vw, 55vh) rotate(-2deg); }
  100% { transform: translate(115vw, 30vh) rotate(-3deg); }
}
@keyframes jelly-swim-2 {
  /* Playful zigzagger — bottom band right→left, wavy path */
  0%   { transform: translate(110vw, 68vh) rotate(8deg); }
  25%  { transform: translate(85vw, 78vh) rotate(-5deg); }
  50%  { transform: translate(60vw, 88vh) rotate(12deg); }
  75%  { transform: translate(25vw, 80vh) rotate(-8deg); }
  100% { transform: translate(-20vw, 72vh) rotate(-4deg); }
}
@keyframes jelly-swim-3 {
  /* Lazy floater — small loops in lower-left quadrant */
  0%, 100% { transform: translate(12vw, 68vh) rotate(0deg); }
  25%      { transform: translate(22vw, 58vh) rotate(6deg); }
  50%      { transform: translate(18vw, 82vh) rotate(-4deg); }
  75%      { transform: translate(6vw, 72vh) rotate(8deg); }
}

/* Jellyfish body pulse — the "swim" contraction */
@keyframes jelly-pulse-slow {
  0%, 100% { transform: scaleY(1)    scaleX(1);    }
  50%      { transform: scaleY(0.82) scaleX(1.12); }
}
@keyframes jelly-pulse-fast {
  0%, 100% { transform: scaleY(1)    scaleX(1);    }
  50%      { transform: scaleY(0.75) scaleX(1.18); }
}
@keyframes jelly-pulse-erratic {
  0%, 100% { transform: scaleY(1)    scaleX(1);    }
  30%      { transform: scaleY(0.88) scaleX(1.08); }
  60%      { transform: scaleY(0.78) scaleX(1.15); }
}

/* ───── MUSHROOM: bobbing in place, different personalities ───── */

@keyframes shroom-breathe {
  /* Big calm mushroom — slow deep breath */
  0%, 100% { transform: translateY(0)   scale(1);    }
  50%      { transform: translateY(-8px) scale(1.05); }
}
@keyframes shroom-bounce {
  /* Excited little one — quick perky bounces */
  0%, 100% { transform: translateY(0)    scale(1);    }
  40%      { transform: translateY(-14px) scale(1.06); }
  50%      { transform: translateY(-16px) scale(1.08); }
  60%      { transform: translateY(-14px) scale(1.06); }
}
@keyframes shroom-sway {
  /* Sleepy swayer — leans side to side */
  0%, 100% { transform: rotate(-4deg) translateY(0);   }
  25%      { transform: rotate(2deg)  translateY(-4px); }
  50%      { transform: rotate(5deg)  translateY(0);    }
  75%      { transform: rotate(-2deg) translateY(-4px); }
}
@keyframes shroom-wobble {
  /* Tipsy one — off-center wobble */
  0%, 100% { transform: translate(0, 0)      rotate(0deg);  }
  25%      { transform: translate(3px, -6px) rotate(3deg);  }
  50%      { transform: translate(-2px, -9px) rotate(-2deg); }
  75%      { transform: translate(4px, -3px) rotate(4deg);  }
}

/* Laser color cycling — each creature gets its own unique palette */
@keyframes laser-teal-magenta {
  0%, 100% { color: #00FFE4; }
  50%      { color: #FF3DA0; }
}
@keyframes laser-sunset {
  /* Warm: amber → orange → magenta → amber */
  0%, 100% { color: #FFB830; }
  33%      { color: #FF5E00; }
  66%      { color: #FF3DA0; }
}
@keyframes laser-ocean {
  /* Cool: teal → aqua → deep-cyan → teal */
  0%, 100% { color: #00FFE4; }
  33%      { color: #7DFFD4; }
  66%      { color: #00A8FF; }
}
@keyframes laser-plasma {
  /* Vivid: violet → magenta → hot-pink → violet */
  0%, 100% { color: #B347FF; }
  33%      { color: #FF3DA0; }
  66%      { color: #FF69B4; }
}
@keyframes laser-citrus {
  /* Bright: lime → amber → teal → lime */
  0%, 100% { color: #CCFF00; }
  50%      { color: #FFB830; }
}
@keyframes laser-galaxy {
  /* Dreamy: indigo → magenta → amber → cyan → indigo */
  0%, 100% { color: #7B3FFF; }
  25%      { color: #FF3DA0; }
  50%      { color: #FFB830; }
  75%      { color: #00FFE4; }
}
@keyframes laser-rainbow-cycle {
  /* Full spectrum slow sweep */
  0%, 100% { color: #00FFE4; }
  16%      { color: #7B3FFF; }
  33%      { color: #FF3DA0; }
  50%      { color: #FF5E00; }
  66%      { color: #FFB830; }
  83%      { color: #CCFF00; }
}

/* Keep a default alias in case anything else references it */
@keyframes laser-color-cycle {
  0%, 100% { color: #00FFE4; }
  33%      { color: #FF3DA0; }
  66%      { color: #FFB830; }
}

/* ───── PLACEMENTS ─────
   Positioning rules:
   - Avoid the hero's center vertical band (~30vw–70vw at top of page)
     so creatures never block the headline or primary CTA.
   - Spread across the viewport so you always see 2–3 at once.
   - Each creature gets its own color palette. */

/* JELLYFISH — the `.jelly-N` wrapper handles the swim path;
   the inner SVG handles the body pulse. */

.rave-projection.jelly-1 {
  /* Classic dome — slow diagonal drifter, ocean palette */
  top: 0; left: 0; width: 100px;
  animation: jelly-swim-1 52s linear infinite, laser-ocean 11s ease-in-out infinite;
}
.rave-projection.jelly-1 svg {
  animation: jelly-pulse-slow 3.4s ease-in-out infinite;
  transform-origin: center top;
}

.rave-projection.jelly-2 {
  /* Bell jelly — quick zigzagger, plasma palette */
  top: 0; left: 0; width: 72px;
  animation: jelly-swim-2 42s linear infinite, laser-plasma 9s ease-in-out infinite reverse;
  animation-delay: -15s, 0s;
}
.rave-projection.jelly-2 svg {
  animation: jelly-pulse-fast 2.1s ease-in-out infinite;
  transform-origin: center top;
}

.rave-projection.jelly-3 {
  /* Moon jelly — lazy orbiter, galaxy palette */
  top: 0; left: 0; width: 115px;
  animation: jelly-swim-3 36s ease-in-out infinite, laser-galaxy 18s linear infinite;
  animation-delay: -10s, 0s;
}
.rave-projection.jelly-3 svg {
  animation: jelly-pulse-erratic 2.7s ease-in-out infinite;
  transform-origin: center top;
}

/* MUSHROOMS — fixed positions in page corners/edges, each with own bob personality.
   Positioned to hug the viewport edges, never covering hero content. */

/* (Old per-creature blocks removed — see consolidated definitions further
   down in the LASER CREATURES section.) */

/* Reduced motion — creatures freeze but stay visible */
@media (prefers-reduced-motion: reduce) {
  .rave-projection,
  .rave-projection svg { animation: none !important; }
}

/* ─── RAVE MODE: REDUCED MOTION OVERRIDE ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root.night-mode body,
  :root.night-mode body::before,
  :root.night-mode .nav,
  :root.night-mode .display em,
  :root.night-mode .stat-num,
  :root.night-mode .feature-dot,
  :root.night-mode .eyebrow,
  :root.night-mode .nav-wordmark span,
  :root.night-mode .theme-toggle,
  :root.night-mode .btn-primary,
  :root.night-mode .btn-outline {
    animation: none !important;
  }
  .btn-primary,
  .btn-primary::before {
    animation: none !important;
  }
  .btn-primary {
    box-shadow: 0 0 24px rgba(0,229,204,.4), 0 0 50px rgba(0,229,204,.15);
  }
  :root.night-mode .display em {
    text-shadow: 0 0 24px rgba(255, 61, 160, 0.5);
  }
  :root.night-mode .btn-primary {
    box-shadow: 0 0 20px rgba(0, 255, 228, 0.4);
  }
}

/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Crisp text rendering on Mac / iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  overflow-x: hidden;
  animation: page-fade-in 0.4s ease forwards;

  /* Page transition: JS adds this class on link click to fade out */
  transition: opacity 0.4s ease;
}

img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ─── SELECTION ──────────────────────────────────────────────── */
::selection {
  background: rgba(255, 122, 178, 0.28);
  color: var(--white);
}

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: var(--black); }
::-webkit-scrollbar-thumb  { background: rgba(168,130,255,.22); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(168,130,255,.4); }

/* ─── FOCUS ──────────────────────────────────────────────────── */
/* Global keyboard-focus ring */
*:focus { outline: none; }
*:focus-visible {
  outline: 1.5px solid var(--sky);
  outline-offset: 3px;
}

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.display-lg { font-size: clamp(52px, 7vw, 88px); }
.display-md { font-size: clamp(32px, 4vw, 52px); }
.display-sm { font-size: clamp(24px, 3vw, 40px); }

.display em       { font-style: italic; color: var(--amber); }
.display .pink    { color: var(--magenta); }
.display .teal    { color: var(--teal); }
.display .amber   { color: var(--amber); }
.display .magenta { color: var(--magenta); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-muted);
  margin-bottom: 12px;
}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section {
  padding: var(--section-pad);
  border-top: 1px solid var(--border);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-mid);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-mid);
}

/* ─── BUTTONS ────────────────────────────────────────────────── */

/* Shared base */
.btn-primary,
.btn-outline,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  border: none;
  transition:
    background   0.22s ease,
    color        0.22s ease,
    box-shadow   0.28s ease,
    transform    0.18s ease,
    border-color 0.22s ease;
}

/* Primary — hue-themable. Default = teal; override --btn-h1/--btn-h2/--btn-glow per instance */
.btn-primary {
  --btn-h1: #00E5CC;
  --btn-h2: #00CFBA;
  --btn-h1-bright: #00FFE4;
  --btn-glow: 0,229,204;
  --btn-glow-bright: 0,255,228;

  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--btn-h1) 0%, var(--btn-h2) 50%, var(--btn-h1) 100%);
  color: var(--black);
  padding: 18px 42px;
  border: 2px solid rgba(var(--btn-glow-bright), .5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(var(--btn-glow),.28), 0 2px 10px rgba(0,0,0,.35);
}

/* Hue variants — drop next to .btn-primary like `class="btn-primary amber"` */
.btn-primary.amber {
  --btn-h1: #FFB85C;
  --btn-h2: #E89A3D;
  --btn-h1-bright: #FFD089;
  --btn-glow: 255,184,92;
  --btn-glow-bright: 255,208,137;
}
.btn-primary.coral {
  --btn-h1: #FF7AB2;
  --btn-h2: #E55A99;
  --btn-h1-bright: #FF95C5;
  --btn-glow: 255,122,178;
  --btn-glow-bright: 255,149,197;
}
.btn-primary.magenta {
  --btn-h1: #FF3DA0;
  --btn-h2: #D6287F;
  --btn-h1-bright: #FF5BB0;
  --btn-glow: 255,61,160;
  --btn-glow-bright: 255,91,176;
}
.btn-primary.violet {
  --btn-h1: #A882FF;
  --btn-h2: #8B65E6;
  --btn-h1-bright: #BA9CFF;
  --btn-glow: 168,130,255;
  --btn-glow-bright: 186,156,255;
}
.btn-primary.algae {
  --btn-h1: #8AE8A8;
  --btn-h2: #6CCB8A;
  --btn-h1-bright: #A4F0BD;
  --btn-glow: 138,232,168;
  --btn-glow-bright: 164,240,189;
}

/* Shimmer sweep */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.5) 50%,
    transparent 80%
  );
  opacity: 0;
  transition: none;
  pointer-events: none;
}
.btn-primary:hover::before {
  opacity: 1;
  animation: btn-shimmer 0.9s ease-out;
}

/* Bottom edge glow line */
.btn-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  pointer-events: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--btn-h1-bright) 0%, var(--btn-h1) 50%, var(--btn-h1-bright) 100%);
  border-color: rgba(var(--btn-glow-bright),1);
  box-shadow:
    0 0 40px rgba(var(--btn-glow),.6),
    0 0 80px rgba(var(--btn-glow),.25),
    0 0 120px rgba(var(--btn-glow),.1),
    0 4px 16px rgba(0,0,0,.4);
  transform: translateY(-3px);
  animation: none;
}



.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 0 20px rgba(var(--btn-glow),.4);
}

/* Outline — teal border */
.btn-outline {
  background: transparent;
  color: var(--teal);
  padding: var(--btn-pad-v) var(--btn-pad-h);
  border: 1px solid rgba(0,229,204,.4);
}

.btn-outline:hover {
  background: var(--teal-ghost);
  border-color: rgba(0,229,204,.7);
  box-shadow: 0 0 20px rgba(0,229,204,.18);
  transform: translateY(-1px);
}

.btn-outline:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Ghost — text only */
.btn-ghost {
  background: transparent;
  color: var(--white-muted);
  padding: var(--btn-pad-v) 0;
  border: 1px solid transparent;
  letter-spacing: 0.1em;
}

.btn-ghost:hover {
  color: var(--white);
}

.btn-ghost:active {
  color: var(--white-dim);
}

/* ─── SECTION TITLES ─────────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 48px;
}

.section-title em        { font-style: italic; color: var(--magenta); }
.section-title em.teal   { color: var(--teal); }
.section-title .teal     { color: var(--teal); }
.section-title .magenta  { color: var(--magenta); }
.section-title .amber    { color: var(--amber); }

/* ─── STAT BLOCKS ────────────────────────────────────────────── */
.stat-num {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 300;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-num.teal { color: var(--teal); }

.stat-num.magenta { color: var(--magenta); }
.stat-num.orange  { color: var(--orange); }
.stat-num.amber   { color: var(--amber); }

.stat-unit {
  font-family: var(--font-display);
  font-size: 22px;
  color: rgba(0,229,204,.55);
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white-muted);
  line-height: 1.4;
  margin-top: 4px;
}

/* ─── FEATURE LIST ───────────────────────────────────────────── */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 32px;
}

.feature-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--white-ghost);
  background: rgba(255,255,255,.018);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.feature-item:hover {
  border-color: rgba(138,232,168,.2);
  background: rgba(138,232,168,.03);
}

.feature-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--magenta);
  flex-shrink: 0;
  margin-top: 8px;
}

.feature-text {
  font-size: 14px;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.65;
}

.feature-text strong {
  color: var(--white);
  font-weight: 500;
}

/* ─── PHOTO PLACEHOLDERS ─────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.photo-placeholder {
  background: var(--black-card);
  background-image: linear-gradient(
    90deg,
    var(--black-card) 25%,
    rgba(255,255,255,.03) 50%,
    var(--black-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease infinite;
  border: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(240,237,232,.2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  min-height: 160px;
}

/* ─── FORMS ──────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Wrapper div inside form (used in contact.html for label+input pairs) */
.form-group > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(240,237,232,.1);
  color: var(--white);
  padding: 13px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  outline: none;
  border-radius: 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: rgba(122,220,255,.5);
  background: rgba(122,220,255,.035);
  box-shadow: 0 0 0 3px rgba(122,220,255,.08);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(240,237,232,.22);
}

.form-group select {
  /* Custom chevron arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(240,237,232,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-group select option {
  background: #1a1a1a;
  color: var(--white);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.7;
}

/* ─── UTILITIES ──────────────────────────────────────────────── */
.text-teal    { color: var(--teal); }
.text-magenta { color: var(--magenta); }
.text-orange  { color: var(--orange); }
.text-amber   { color: var(--amber); }
.text-muted   { color: var(--white-muted); }
.text-dim     { color: var(--white-dim); }

.mt-sm  { margin-top: 20px; }
.mt-md  { margin-top: 40px; }
.mt-lg  { margin-top: 64px; }
.mb-sm  { margin-bottom: 20px; }
.mb-md  { margin-bottom: 40px; }
.mb-lg  { margin-bottom: 64px; }

/* ─── FAQ / DETAILS ──────────────────────────────────────────── */
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; }

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero: fires on load (above-fold elements only) */
.fade-up {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-up:nth-child(1) { animation-delay: 0.08s; }
.fade-up:nth-child(2) { animation-delay: 0.22s; }
.fade-up:nth-child(3) { animation-delay: 0.38s; }
.fade-up:nth-child(4) { animation-delay: 0.52s; }

/* Initial state */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* Visible state triggered by IntersectionObserver */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }

/* No-JS fallback */
.no-js .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .fade-up, .reveal {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}


/* ─── RESPONSIVE: TABLET 960px ───────────────────────────────── */
@media (max-width: 960px) {
  :root {
    --section-pad: 80px 36px;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── RESPONSIVE: MOBILE 768px ───────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --section-pad: 64px 20px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
    gap: 40px;
    background: transparent;
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
    gap: 0;
    background: transparent;
  }

  /* Restore divider lines between collapsed cells */
  .grid-3 > *,
  .grid-4 > * {
    border-bottom: 1px solid var(--border-mid);
  }

  .grid-3 > *:last-child,
  .grid-4 > *:last-child {
    border-bottom: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .display-lg { font-size: clamp(40px, 11vw, 60px); }
  .display-md { font-size: clamp(28px, 8vw, 44px); }
}

/* ============================================
   RAVE MODE (:root.night-mode) — disco ball + laser creatures
   ============================================ */

/* ─── DISCO CREATURE (mushroom OR jellyfish — IS the disco ball) ─── */
/* Drop point: top-right corner under the nav. Hero copy is bottom-aligned in
   the hero section so this corner is visually empty. */
.disco-ball {
  position: fixed;
  top: 80px;
  right: 32px;
  left: auto;
  width: 110px;
  height: 130px;
  z-index: 9996;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: none;
}
:root.night-mode .disco-ball {
  opacity: 1;
  visibility: visible;
  display: block;
  animation: disco-descend 1.4s cubic-bezier(.34,1.56,.64,1) both;
  pointer-events: auto;
  cursor: pointer;
}
@keyframes disco-descend {
  0%   { transform: translateY(-220px) scale(0.5); opacity: 0; }
  60%  { transform: translateY(10px)   scale(1.08); opacity: 1; }
  100% { transform: translateY(0)      scale(1);   opacity: 1; }
}

/* The single SVG that IS the disco ball */
.disco-creature-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(0, 229, 204, 0.55))
          drop-shadow(0 0 36px rgba(255, 61, 160, 0.35));
  animation: disco-sway 3.6s ease-in-out infinite;
  transform-origin: 50% 0%;
}
:root.night-mode .disco-ball:hover .disco-creature-svg {
  filter: drop-shadow(0 0 24px rgba(0, 229, 204, 0.85))
          drop-shadow(0 0 56px rgba(255, 61, 160, 0.6));
}
@keyframes disco-sway {
  0%, 100% { rotate: -3deg; }
  50%      { rotate:  3deg; }
}

/* The cap/bell group spins like a real disco ball — using hue-rotate so the
   chrome surface picks up changing colors of the rave around it */
.dc-spinner {
  transform-origin: 60px 60px;
  animation: disco-spin-hue 6s linear infinite;
}
@keyframes disco-spin-hue {
  0%   { filter: hue-rotate(0deg)   brightness(1); }
  50%  { filter: hue-rotate(180deg) brightness(1.15); }
  100% { filter: hue-rotate(360deg) brightness(1); }
}
:root.night-mode .disco-ball:hover .dc-spinner {
  animation-duration: 1.8s;
}

/* Click-me tooltip dangling under the creature */
.disco-hint {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FFB830;
  text-shadow: 0 0 6px #FFB830, 0 0 12px #FF3DA0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: disco-hint-pulse 2.4s ease-in-out infinite 2s;
}
@keyframes disco-hint-pulse {
  0%, 100% { opacity: 0;   transform: translateX(-50%) translateY(-12px); }
  50%      { opacity: 0.9; transform: translateX(-50%) translateY(-6px); }
}

/* Ambient color beams sweeping out from the creature — kept subtle */
.disco-ball::after {
  content: '';
  position: absolute;
  inset: -55vw -55vw -55vh -55vw;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    rgba(255, 61, 160, 0.08) 10deg, transparent 22deg,
    transparent 58deg, rgba(0, 255, 228, 0.08) 70deg, transparent 82deg,
    transparent 118deg, rgba(255, 184, 48, 0.08) 130deg, transparent 142deg,
    transparent 178deg, rgba(123, 63, 255, 0.08) 190deg, transparent 202deg,
    transparent 238deg, rgba(0, 255, 228, 0.06) 250deg, transparent 262deg,
    transparent 298deg, rgba(255, 61, 160, 0.08) 310deg, transparent 322deg);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: disco-beams-spin 8s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes disco-beams-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (max-width: 768px) {
  /* Mobile: tuck creature into the top-right corner, smaller, but still big
     enough to read as a creature/disco-ball hybrid. Sits OUTSIDE the nav row
     so it doesn't crowd the wordmark + theme toggle. */
  .disco-ball {
    top: 64px;
    right: 8px;
    left: auto;
    width: 78px;
    height: 92px;
    z-index: 110;
  }
  .disco-hint { display: none; }
  /* The full-screen rave overlays must NEVER intercept taps on mobile */
  :root.night-mode body::before,
  :root.night-mode body::after {
    pointer-events: none !important;
  }
}

/* Even tighter on phones <400px */
@media (max-width: 400px) {
  .disco-ball {
    left: 130px;        /* slightly closer to wordmark on small phones */
    width: 32px;
    height: 32px;
  }
}

/* ─── LASER CREATURES ─── */
.rave-projection {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  display: none;
  z-index: 9997;
  mix-blend-mode: screen;
  filter: blur(0.3px) drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);
  transition: opacity 0.6s ease;
}
:root.night-mode .rave-projection {
  opacity: 0.85;
  visibility: visible;
  display: block;
}

/* JELLY paths: long drifts that hug the LEFT and BOTTOM edges only, never
   crossing the center or right-side body content (which holds copy + the
   disco creature in the top-right). */
@keyframes jelly-swim-1 {
  /* Slow drifter: bottom-left → top-left → bottom-left, full vertical sweep on the LEFT edge */
  0%   { transform: translate(-12vw, 88vh) rotate(-6deg); }
  18%  { transform: translate(2vw, 68vh) rotate(4deg); }
  36%  { transform: translate(-4vw, 42vh) rotate(-8deg); }
  54%  { transform: translate(4vw, 18vh) rotate(6deg); }
  72%  { transform: translate(-6vw, 38vh) rotate(-4deg); }
  88%  { transform: translate(2vw, 70vh) rotate(8deg); }
  100% { transform: translate(-12vw, 92vh) rotate(-6deg); }
}
@keyframes jelly-swim-2 {
  /* Zigzag drifter along the BOTTOM edge, right→left→right wave */
  0%   { transform: translate(108vw, 88vh) rotate(8deg); }
  20%  { transform: translate(78vw, 92vh) rotate(-6deg); }
  40%  { transform: translate(52vw, 84vh) rotate(10deg); }
  60%  { transform: translate(28vw, 94vh) rotate(-8deg); }
  80%  { transform: translate(8vw, 86vh) rotate(6deg); }
  100% { transform: translate(-18vw, 90vh) rotate(-4deg); }
}
@keyframes jelly-swim-3 {
  /* Big looper in the lower-LEFT corner — figure-eight orbit */
  0%   { transform: translate(8vw, 60vh) rotate(0deg); }
  20%  { transform: translate(20vw, 72vh) rotate(8deg); }
  40%  { transform: translate(14vw, 88vh) rotate(-6deg); }
  60%  { transform: translate(2vw, 78vh) rotate(10deg); }
  80%  { transform: translate(10vw, 65vh) rotate(-4deg); }
  100% { transform: translate(8vw, 60vh) rotate(0deg); }
}
@keyframes jelly-pulse-slow   { 0%,100%{transform:scaleY(1) scaleX(1);} 50%{transform:scaleY(0.82) scaleX(1.12);} }
@keyframes jelly-pulse-fast   { 0%,100%{transform:scaleY(1) scaleX(1);} 50%{transform:scaleY(0.75) scaleX(1.18);} }
@keyframes jelly-pulse-erratic{ 0%,100%{transform:scaleY(1) scaleX(1);} 30%{transform:scaleY(0.88) scaleX(1.08);} 60%{transform:scaleY(0.78) scaleX(1.15);} }

/* SHROOM motion paths — each shroom DRIFTS across an edge band, with its
   own internal breathe/sway happening at the SVG level. The container moves
   along long, slow paths that stay clear of the center hero column. */

/* shroom-1: drifts along the LEFT edge, top → middle → top */
@keyframes shroom-drift-1 {
  0%   { transform: translate(-2vw, 6vh) rotate(-3deg); }
  25%  { transform: translate(3vw, 22vh) rotate(2deg); }
  50%  { transform: translate(-3vw, 38vh) rotate(-4deg); }
  75%  { transform: translate(4vw, 22vh) rotate(3deg); }
  100% { transform: translate(-2vw, 6vh) rotate(-3deg); }
}
/* shroom-2: hops across the BOTTOM-RIGHT corner */
@keyframes shroom-drift-2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-6vw, -4vh) rotate(-5deg); }
  50%  { transform: translate(-12vw, 2vh) rotate(4deg); }
  75%  { transform: translate(-4vw, -2vh) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
/* shroom-3: drifts down the LEFT edge, middle → bottom */
@keyframes shroom-drift-3 {
  0%   { transform: translate(-1vw, 0) rotate(-2deg); }
  33%  { transform: translate(4vw, 12vh) rotate(4deg); }
  66%  { transform: translate(-2vw, 22vh) rotate(-5deg); }
  100% { transform: translate(-1vw, 0) rotate(-2deg); }
}
/* shroom-4: small drift confined to the RIGHT edge (no horizontal swing
   that would push it left into the hero column or up into the disco zone). */
@keyframes shroom-drift-4 {
  0%   { transform: translate(0, 0) rotate(2deg); }
  25%  { transform: translate(-2vw, 4vh) rotate(-4deg); }
  50%  { transform: translate(0, 8vh) rotate(5deg); }
  75%  { transform: translate(-2vw, 4vh) rotate(-3deg); }
  100% { transform: translate(0, 0) rotate(2deg); }
}

/* Internal SVG-level animations — the shroom body breathes/sways while the
   container drifts. Combined motion = the shroom feels alive. */
@keyframes shroom-breathe { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-6px) scale(1.06);} }
@keyframes shroom-bounce  { 0%,100%{transform:translateY(0) scale(1);} 40%{transform:translateY(-10px) scale(1.05);} 50%{transform:translateY(-12px) scale(1.07);} 60%{transform:translateY(-10px) scale(1.05);} }
@keyframes shroom-sway    { 0%,100%{transform:rotate(-5deg) translateY(0);} 25%{transform:rotate(3deg) translateY(-3px);} 50%{transform:rotate(6deg) translateY(0);} 75%{transform:rotate(-3deg) translateY(-3px);} }
@keyframes shroom-wobble  { 0%,100%{transform:translate(0,0) rotate(0deg);} 25%{transform:translate(2px,-5px) rotate(4deg);} 50%{transform:translate(-3px,-7px) rotate(-3deg);} 75%{transform:translate(3px,-2px) rotate(5deg);} }

@keyframes laser-teal-magenta { 0%,100%{color:#00FFE4;} 50%{color:#FF3DA0;} }
@keyframes laser-sunset       { 0%,100%{color:#FFB830;} 33%{color:#FF5E00;} 66%{color:#FF3DA0;} }
@keyframes laser-ocean        { 0%,100%{color:#00FFE4;} 33%{color:#7DFFD4;} 66%{color:#00A8FF;} }
@keyframes laser-plasma       { 0%,100%{color:#B347FF;} 33%{color:#FF3DA0;} 66%{color:#FF69B4;} }
@keyframes laser-citrus       { 0%,100%{color:#CCFF00;} 50%{color:#FFB830;} }
@keyframes laser-galaxy       { 0%,100%{color:#7B3FFF;} 25%{color:#FF3DA0;} 50%{color:#FFB830;} 75%{color:#00FFE4;} }
@keyframes laser-rainbow-cycle{ 0%,100%{color:#00FFE4;} 16%{color:#7B3FFF;} 33%{color:#FF3DA0;} 50%{color:#FF5E00;} 66%{color:#FFB830;} 83%{color:#CCFF00;} }

.rave-projection.jelly-1 { top:0; left:0; width:100px; animation: jelly-swim-1 52s linear infinite, laser-ocean 11s ease-in-out infinite; }
.rave-projection.jelly-1 svg { animation: jelly-pulse-slow 3.4s ease-in-out infinite; transform-origin:center top; }
.rave-projection.jelly-2 { top:0; left:0; width:72px; animation: jelly-swim-2 42s linear infinite, laser-plasma 9s ease-in-out infinite reverse; animation-delay:-15s,0s; }
.rave-projection.jelly-2 svg { animation: jelly-pulse-fast 2.1s ease-in-out infinite; transform-origin:center top; }
.rave-projection.jelly-3 { top:0; left:0; width:115px; animation: jelly-swim-3 36s ease-in-out infinite, laser-galaxy 18s linear infinite; animation-delay:-10s,0s; }
.rave-projection.jelly-3 svg { animation: jelly-pulse-erratic 2.7s ease-in-out infinite; transform-origin:center top; }

/* Shroom anchor positions (anchored at viewport edges; drift animation moves
   them around their anchor without crossing into the hero column). All four
   live in the LEFT or BOTTOM bands so they never crowd hero copy or the
   top-right disco creature. */
.rave-projection.shroom-1 {
  /* Top-left corner drifter */
  top: 8vh; left: 2vw; width: 90px;
  animation: shroom-drift-1 24s ease-in-out infinite,
             laser-sunset 13s ease-in-out infinite;
}
.rave-projection.shroom-1 svg { animation: shroom-breathe 4.8s ease-in-out infinite; transform-origin:center bottom; }

.rave-projection.shroom-2 {
  /* Bottom-right hopper */
  top: 78vh; right: 4vw; width: 76px;
  animation: shroom-drift-2 18s ease-in-out infinite,
             laser-citrus 7s ease-in-out infinite;
}
.rave-projection.shroom-2 svg { animation: shroom-bounce 1.6s ease-in-out infinite; transform-origin:center bottom; }

.rave-projection.shroom-3 {
  /* Mid-left drifter */
  top: 44vh; left: 1vw; width: 86px;
  animation: shroom-drift-3 22s ease-in-out infinite,
             laser-teal-magenta 10s ease-in-out infinite;
  animation-delay: -8s, 0s;
}
.rave-projection.shroom-3 svg { animation: shroom-sway 6.5s ease-in-out infinite; transform-origin:center bottom; }

.rave-projection.shroom-4 {
  /* Mid-RIGHT edge tipsy — sits well below the disco creature (which lives
     at top:80px right:32px, ~210px tall) and well above the bottom band
     where CTAs live. Drifts within a small box on the right edge. */
  top: 38vh; right: 1vw; left: auto; bottom: auto; width: 84px;
  animation: shroom-drift-4 26s ease-in-out infinite,
             laser-rainbow-cycle 16s ease-in-out infinite;
  animation-delay: -12s, 0s;
}
.rave-projection.shroom-4 svg { animation: shroom-wobble 3.2s ease-in-out infinite; transform-origin:center bottom; }

@keyframes wordmark-drift-1 { 0%,100%{transform:translate(0,0) rotate(-2deg); opacity:0.8;} 50%{transform:translate(12px,-14px) rotate(2deg); opacity:1;} }
@keyframes wordmark-drift-2 { 0%,100%{transform:translate(0,0) rotate(3deg); opacity:0.7;} 50%{transform:translate(-10px,10px) rotate(-2deg); opacity:0.95;} }

.rave-projection.wordmark {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 0 12px currentColor, 0 0 24px currentColor, 0 0 40px currentColor;
  filter: blur(0.2px);
}
/* Wordmarks: anchored to the LEFT and RIGHT mid-edges (vertically centered
   strip) where the hero's center column and bottom CTAs never reach. */
.rave-projection.wordmark.pos-w1 { top: 28vh; right: 2vw; left: auto; bottom: auto; font-size: 28px; animation: wordmark-drift-1 11s ease-in-out infinite, laser-sunset 13s ease-in-out infinite; }
.rave-projection.wordmark.pos-w2 { top: 18vh; left: 2vw; right: auto; bottom: auto; font-size: 22px; animation: wordmark-drift-2 9s ease-in-out infinite, laser-plasma 10s ease-in-out infinite reverse; }

@media (prefers-reduced-motion: reduce) {
  .rave-projection, .rave-projection svg,
  :root.night-mode .disco-ball,
  .disco-ball-sphere, .disco-ball-sphere::after, .disco-ball::after { animation: none !important; }
}

/* ============================================
   ULTRA RAVE MODE — "DO NOT PRESS" button + the drop
   ============================================ */

/* ─── THE DROP ───
   Only active when .ultra-rave is on <html>. Everything goes wild. */

:root.ultra-rave {
  animation: ultra-bg-strobe 0.35s steps(4, end) infinite;
}
@keyframes ultra-bg-strobe {
  0%   { background-color: #FF3DA0; }
  25%  { background-color: #00FFE4; }
  50%  { background-color: #FFB830; }
  75%  { background-color: #7B3FFF; }
  100% { background-color: #FF3DA0; }
}

/* Body: intense shake, hue spin, hard contrast */
:root.ultra-rave body {
  animation:
    ultra-body-shake 0.18s ease-in-out infinite,
    ultra-body-hue 1.2s linear infinite;
}
@keyframes ultra-body-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10%  { transform: translate(-4px, 2px) rotate(-0.4deg); }
  20%  { transform: translate(3px, -3px) rotate(0.3deg); }
  30%  { transform: translate(-3px, 4px) rotate(-0.2deg); }
  40%  { transform: translate(4px, 1px) rotate(0.5deg); }
  50%  { transform: translate(-2px, -3px) rotate(-0.3deg); }
  60%  { transform: translate(2px, 3px) rotate(0.4deg); }
  70%  { transform: translate(-3px, -2px) rotate(-0.5deg); }
  80%  { transform: translate(3px, 2px) rotate(0.2deg); }
  90%  { transform: translate(-2px, -1px) rotate(-0.3deg); }
}
@keyframes ultra-body-hue {
  from { filter: hue-rotate(0deg) saturate(1.8) contrast(1.2); }
  to   { filter: hue-rotate(360deg) saturate(1.8) contrast(1.2); }
}

/* Disco creature: spin & sway 10x faster */
:root.ultra-rave .disco-creature-svg {
  animation: disco-sway 0.6s ease-in-out infinite !important;
}
:root.ultra-rave .dc-spinner {
  animation: disco-spin-hue 0.5s linear infinite !important;
}
:root.ultra-rave .disco-ball::after {
  animation: disco-beams-spin 1s linear infinite !important;
  filter: blur(3px) brightness(1.6) !important;
}

/* Creatures: faster everything */
:root.ultra-rave .rave-projection.jelly-1 { animation-duration: 8s, 1.8s !important; }
:root.ultra-rave .rave-projection.jelly-2 { animation-duration: 6s, 1.4s !important; }
:root.ultra-rave .rave-projection.jelly-3 { animation-duration: 5s, 2s !important; }
:root.ultra-rave .rave-projection.jelly-1 svg,
:root.ultra-rave .rave-projection.jelly-2 svg,
:root.ultra-rave .rave-projection.jelly-3 svg {
  animation-duration: 0.4s !important;
}
:root.ultra-rave .rave-projection.shroom-1 svg,
:root.ultra-rave .rave-projection.shroom-2 svg,
:root.ultra-rave .rave-projection.shroom-3 svg,
:root.ultra-rave .rave-projection.shroom-4 svg {
  animation-duration: 0.4s !important;
}
:root.ultra-rave .rave-projection.shroom-1,
:root.ultra-rave .rave-projection.shroom-2,
:root.ultra-rave .rave-projection.shroom-3,
:root.ultra-rave .rave-projection.shroom-4 {
  animation-duration: 1.5s !important;
}
:root.ultra-rave .rave-projection {
  filter:
    blur(0.3px)
    drop-shadow(0 0 12px currentColor)
    drop-shadow(0 0 24px currentColor)
    drop-shadow(0 0 48px currentColor) !important;
  opacity: 1 !important;
}

/* Disco ball goes absolutely feral */
:root.ultra-rave .disco-ball {
  animation: disco-chaos 0.3s linear infinite !important;
}
@keyframes disco-chaos {
  0%   { transform: scale(1.1) translateY(0);    }
  25%  { transform: scale(1.25) translateY(8px); }
  50%  { transform: scale(0.95) translateY(-6px);}
  75%  { transform: scale(1.2) translateY(10px); }
  100% { transform: scale(1.1) translateY(0);    }
}

/* Giant screen-wide strobe overlay */
.ultra-strobe {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9995;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%),
    rgba(255, 61, 160, 0.35) 0%,
    rgba(0, 255, 228, 0.25) 30%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
:root.ultra-rave .ultra-strobe {
  opacity: 1;
  animation: ultra-strobe-flash 0.15s steps(2, end) infinite;
}
@keyframes ultra-strobe-flash {
  0%, 49%   { opacity: 0.9; }
  50%, 100% { opacity: 0.2; }
}

/* Massive "BASS DROP" burst when the button is clicked */
.bass-drop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 10000;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: clamp(80px, 18vw, 260px);
  letter-spacing: -0.02em;
  color: #FFF;
  text-shadow:
    -4px 0 0 #FF3DA0,
    4px 0 0 #00FFE4,
    0 0 30px #FFB830,
    0 0 60px #FF3DA0;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  line-height: 0.9;
}
.bass-drop.go {
  animation: bass-drop-in 2.2s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes bass-drop-in {
  0%   { transform: translate(-50%, -50%) scale(0)    rotate(-20deg); opacity: 0; }
  15%  { transform: translate(-50%, -50%) scale(1.3)  rotate(6deg);   opacity: 1; }
  25%  { transform: translate(-50%, -50%) scale(1)    rotate(-3deg);  opacity: 1; }
  80%  { transform: translate(-50%, -50%) scale(1.05) rotate(2deg);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2)    rotate(0deg);   opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root.ultra-rave, :root.ultra-rave body,
  .ultra-strobe, .bass-drop, .disco-hint {
    animation: none !important;
  }
}

/* ============================================
   ACCESSIBILITY UTILITIES
   ============================================ */

/* Visually hidden but readable by screen readers */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — appears on focus, jumps past nav */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--teal);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

/* ─── FOCUS RINGS ─── */
/* Hide outline only when not keyboard-focused */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(122, 220, 255, 0.22);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 1px;
  border-color: var(--sky) !important;
}

/* Night-mode focus uses magenta to stay visible against teal accents */
:root.night-mode *:focus-visible {
  outline-color: #FF3DA0;
  box-shadow: 0 0 0 4px rgba(255, 61, 160, 0.25);
}

/* ============================================
   MOBILE POLISH (375px and up)
   ============================================ */
@media (max-width: 480px) {
  /* Tighter section padding */
  :root {
    --section-pad: 56px 16px;
  }

  /* Wizard form: kill the 40px inline padding via more specific selector */
  #inquiry-form {
    margin: 0 -16px; /* extend to viewport edges */
  }
  .wizard-form,
  form#inquiry-form {
    /* parent div has padding:40px inline — can't override without !important */
  }
  /* Instead, target the parent container of #inquiry-form */
  #inquiry-form-container,
  .form-card-mobile {
    padding: 24px 16px !important;
  }

  /* iOS zoom prevention: inputs must be ≥16px */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Wizard progress dots — shrink slightly on tiny screens */
  .wizard-progress {
    gap: 8px !important;
  }
  .w-dot {
    width: 20px !important;
    height: 20px !important;
    font-size: 11px !important;
  }

  /* Hero headlines a touch smaller */
  .display-lg { font-size: clamp(34px, 9.5vw, 48px); }
  .display-md { font-size: clamp(26px, 7vw, 40px); }

  /* Photo strip on homepage: 3 across instead of 6 */
  .photo-strip-mobile,
  [style*="grid-template-columns:repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Creature projections on tiny screens — fewer + smaller so they don't crowd */
  .rave-projection {
    transform: scale(0.7);
  }
}

/* All viewports: ensure tap targets are ≥44px (WCAG) */
@media (max-width: 768px) {
  button,
  .btn,
  a.btn,
  .nav-cta,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }
}

/* ============================================
   SHARED TOP NAV — sculpture pages + all pages
   ============================================ */
.ll-nav { display: flex; align-items: center; gap: 24px; }
.ll-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  padding: 9px 18px;
  border-radius: 8px;
  isolation: isolate;
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}
/* Soft gradient aura — a round bloom of the link's own hue, no edges */
.ll-nav a::before {
  content: '';
  position: absolute;
  inset: -50% -25%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, currentColor 0%, transparent 70%);
  opacity: 0;
  z-index: -2;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* faint round inner haze so the word lifts off the bg */
.ll-nav a::after {
  content: '';
  position: absolute;
  inset: -20% -10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, currentColor 0%, transparent 75%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ll-nav a:hover {
  transform: translateY(-1px);
}
/* Resting pill affordance on the two sculpture links so they read as tappable.
   Stacked signifiers at REST (not just hover): tinted border + matching fill +
   colored text + a strong hover bloom. */
.ll-nav a:nth-child(1),
.ll-nav a:nth-child(2) {
  transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease,
              border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.ll-nav a:nth-child(1) { border: 1px solid rgba(168, 130, 255, 0.45); background: rgba(168, 130, 255, 0.07); }
.ll-nav a:nth-child(2) { border: 1px solid rgba(255, 91, 176, 0.45); background: rgba(255, 91, 176, 0.07); }
.ll-nav a:nth-child(1):hover,
.ll-nav a:nth-child(1).is-active { border-color: rgba(168, 130, 255, 0.9); background: rgba(168, 130, 255, 0.15); box-shadow: 0 4px 18px rgba(168,130,255,0.28); }
.ll-nav a:nth-child(2):hover,
.ll-nav a:nth-child(2).is-active { border-color: rgba(255, 91, 176, 0.9); background: rgba(255, 91, 176, 0.15); box-shadow: 0 4px 18px rgba(255,91,176,0.28); }
.ll-nav a:hover::before,
.ll-nav a.is-active::before { opacity: 0.26; }
.ll-nav a:hover::after,
.ll-nav a.is-active::after  { opacity: 0.16; }
.ll-nav a.is-active::before { opacity: 0.2; }

/* Bioluminescent per-link hues — soft tint at rest, full bloom on hover/active */
.ll-nav a:nth-child(1)            { color: rgba(196, 174, 255, 0.92); }
.ll-nav a:nth-child(1):hover,
.ll-nav a:nth-child(1).is-active  { color: var(--violet); text-shadow: 0 0 16px rgba(168,130,255,0.55); }
.ll-nav a:nth-child(2)            { color: rgba(255, 158, 205, 0.92); }
.ll-nav a:nth-child(2):hover,
.ll-nav a:nth-child(2).is-active  { color: #FF5BB0;      text-shadow: 0 0 16px rgba(255,91,176,0.55); }
/* Inquire — persistent glowing CTA chip */
.ll-nav a:nth-child(3)            { color: var(--algae); animation: ll-inquire-glow 3.4s ease-in-out infinite; }
.ll-nav a:nth-child(3)::after     { opacity: 0.12; }
.ll-nav a:nth-child(3):hover,
.ll-nav a:nth-child(3).is-active  { color: #BFF7D2; text-shadow: 0 0 16px rgba(138,232,168,0.6); }
@keyframes ll-inquire-glow {
  0%, 100% { text-shadow: 0 0 6px rgba(138,232,168,0.30), 0 0 14px rgba(138,232,168,0.14); }
  50%      { text-shadow: 0 0 12px rgba(138,232,168,0.6), 0 0 24px rgba(138,232,168,0.34); }
}

@media (max-width: 600px) {
  .ll-nav { gap: 10px; }
  .ll-nav a { font-size: 10px; letter-spacing: 0.06em; padding: 7px 11px; }
}
@media (max-width: 380px) {
  .ll-nav { gap: 8px; }
  .ll-nav a { font-size: 9.5px; letter-spacing: 0.03em; padding: 6px 9px; }
}

/* Inquire pre-fill chip (set by ?piece= on inquire.html) */
.ll-piece-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--white);
  background: rgba(255,122,178,0.10);
  border: 1px solid rgba(255,122,178,0.35);
  padding: 8px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.ll-piece-chip .k {
  color: var(--white-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 10px;
}
.ll-piece-chip b { font-weight: 700; color: #FF95C5; }