/* ─────────────────────────────────────────────
   Mochee's Garden — Landing Page Styles
   landing/landing.css
────────────────────────────────────────────── */

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

:root {
  --bg:           #0c1910;
  --cream:        #ede8d8;
  --amber:        #f0a832;
  --panel-bg:     rgba(8, 18, 10, 0.95);
  --panel-border: rgba(80, 140, 50, 0.4);
  --green-hi:     rgba(200, 240, 180, 0.9);
  --green-dim:    rgba(160, 200, 130, 0.55);
}

html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }

.scene { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }

/* ──────────────────────────────────────
   PARALLAX WRAPPER
   base position → top / left (vmin-based, centred on viewport)
   JS writes transform: translate(Xpx, Ypx) via data-dx / data-dy
────────────────────────────────────── */
.p { position: absolute; will-change: transform; }
.p img { display: block; user-select: none; -webkit-user-drag: none; }

/* BG */
.p-bg     { inset: -10% 0; z-index: 0; }
.p-bg img { width: 100%; height: 100%; object-fit: cover; }

/* Grid — multiply blend removes white, keeps lines */
.p-grid     { inset: 0; z-index: 1; mix-blend-mode: multiply; opacity: 0.68; }
.p-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* SVG scribbles */
.scribbles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* ──────────────────────────────────────
   ELEMENT POSITIONS  (centred on 50%/50%)
────────────────────────────────────── */

/* Cat paw */
.e-cat-paw { top: -1%; left: calc(50% - 8vmin); z-index: 22; }
.e-cat-paw img {
  width: clamp(90px, 14vmin, 180px);
  transform-origin: top center;
  animation: sway 5s ease-in-out infinite;
  cursor: pointer;
}
@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50%       { transform: rotate(5deg);  }
}
@keyframes paw-hide {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-160px); }
}
.e-cat-paw.is-hiding img { animation: paw-hide 0.45s ease-in forwards !important; }
.e-cat-paw.is-hidden     { visibility: hidden; pointer-events: none; }

/* Cat tail — slides in from left edge */
.cat-tail {
  position: fixed;
  top: 54%; left: 0;
  z-index: 22;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s;
  pointer-events: none;
}
.cat-tail.is-visible { transform: translateX(0); opacity: 1; pointer-events: auto; }
@keyframes tail-slide {
  0%   { transform: translateX(0);     opacity: 1; }
  85%  { transform: translateX(95vw);  opacity: 1; }
  100% { transform: translateX(115vw); opacity: 0; }
}
@keyframes tail-spin {
  from { rotate: 0deg;    scale: 1.18; }
  to   { rotate: 1080deg; scale: 1.18; }
}
.cat-tail.is-running             { animation: tail-slide 2.2s ease-in forwards; pointer-events: none; transition: none; }
.cat-tail.is-running img         { animation: tail-spin 2.2s linear forwards !important; }
.cat-tail img {
  width: clamp(70px, 11vmin, 160px);
  display: block;
  cursor: pointer;
  transition: filter 0.2s;
}
.cat-tail img:hover { filter: brightness(1.12); }

/* Halftone eye */
.e-eye { top: calc(50% - 30vmin); left: calc(50% - 32vmin); z-index: 8; }
.e-eye img { width: clamp(110px, 20vmin, 270px); }

/* Ear */
.e-ear { top: calc(50% - 35vmin); left: calc(50% - 6vmin); z-index: 7; }
.e-ear img { width: clamp(55px, 8vmin, 115px); transform: rotate(-20deg); opacity: 0.85; }

/* Radio */
.e-radio { top: calc(50% - 30vmin); left: calc(50% + 18vmin); z-index: 8; }
.e-radio img { width: clamp(95px, 15vmin, 210px); transform: rotate(8deg); }

/* Kid photo right */
.e-kid2 { top: calc(50% - 16vmin); left: calc(50% + 24vmin); z-index: 6; }
.e-kid2 img { width: clamp(80px, 13vmin, 180px); transform: rotate(6deg); }

/* Teal cartoon eyes */
.e-eyes-teal { top: calc(50% + 4vmin); left: calc(50% - 30vmin); z-index: 9; }
.e-eyes-teal img { width: clamp(40px, 7vmin, 95px); }

/* Camera */
.e-camera { top: calc(50% + 12vmin); left: calc(50% - 22vmin); z-index: 9; }
.e-camera img { width: clamp(26px, 4.5vmin, 60px); transform: rotate(-12deg); }

/* CD + hand */
.e-cd { top: calc(50% + 20vmin); left: calc(50% - 34vmin); z-index: 8; }
.e-cd img { width: clamp(90px, 15vmin, 210px); transform: rotate(-5deg); }

/* Barcode — fixed bottom-left */
.e-barcode {
  position: fixed;
  bottom: 1.4rem; left: 1.6rem;
  z-index: 20;
  cursor: pointer;
}
.e-barcode img {
  width: clamp(70px, 9vmin, 120px);
  opacity: 0.85;
  filter: invert(1) brightness(1.6);
  mix-blend-mode: screen;
  transition: opacity 0.2s;
}
.e-barcode:hover img { opacity: 1; }

.barcode-panel {
  position: fixed;
  bottom: calc(1.4rem + clamp(70px, 9vmin, 120px) + 0.6rem);
  left: 1.6rem;
  z-index: 21;
  background: var(--panel-bg);
  border: 1px solid rgba(80, 140, 50, 0.35);
  border-radius: 4px;
  padding: 0.9rem 1.1rem;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
}
.barcode-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.barcode-panel-title {
  font-family: 'Space Mono', monospace;
  font-size: 0.4rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(120, 200, 80, 0.4);
  margin-bottom: 0.55rem;
}
.barcode-panel a {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  color: rgba(210, 235, 195, 0.85);
  text-decoration: none;
}
.barcode-panel a:hover { color: #fff; }
.barcode-panel .bp-icon { opacity: 0.55; font-size: 0.85rem; }
.barcode-panel .bp-sub {
  display: block;
  font-size: 0.38rem;
  letter-spacing: 0.12em;
  color: rgba(120, 180, 80, 0.45);
  margin-top: 0.18rem;
}

/* Mouth */
.e-boca { top: calc(50% + 24vmin); left: calc(50% + 24vmin); z-index: 8; }
.e-boca img { width: clamp(65px, 11vmin, 150px); transform: rotate(-8deg); }

/* Paw trail */
.e-paws { top: calc(50% + 32vmin); left: calc(50% + 6vmin); z-index: 7; }
.e-paws img { width: clamp(70px, 11vmin, 150px); opacity: 0.32; }

/* Cardinal */
.e-cardinal { top: calc(50% - 22vmin); left: calc(50% - 44vmin); z-index: 9; }
.e-cardinal img {
  width: clamp(55px, 9vmin, 130px);
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}
.e-cardinal img:hover { transform: scale(1.08); filter: brightness(1.15); }
@keyframes cardinal-bob {
  0%, 100% { transform: translateY(0)    rotate(0deg);  }
  30%       { transform: translateY(-6px) rotate(-4deg); }
  65%       { transform: translateY(3px)  rotate(3deg);  }
}
.e-cardinal.is-singing img { animation: cardinal-bob 0.5s ease-in-out 3; }

/* Butterfly */
.e-butterfly { top: calc(50% + 18vmin); left: calc(50% + 16vmin); z-index: 25; }
.e-butterfly img {
  width: clamp(22px, 3.8vmin, 52px);
  animation: flutter 7s ease-in-out infinite;
}
@keyframes flutter {
  0%, 100% { transform: translateY(0)     rotate(0deg);  }
  30%       { transform: translateY(-10px) rotate(8deg);  }
  70%       { transform: translateY(5px)   rotate(-5deg); }
}
@keyframes fly-away {
  0%   { transform: translate(0,0)         rotate(0deg)   scale(1);    }
  6%   { transform: translate(20px,-35px)   rotate(22deg)  scale(0.93); }
  13%  { transform: translate(75px,-15px)   rotate(-14deg) scale(1.06); }
  21%  { transform: translate(110px,-70px)  rotate(28deg)  scale(0.88); }
  29%  { transform: translate(60px,-115px)  rotate(-8deg)  scale(1.07); }
  37%  { transform: translate(-15px,-90px)  rotate(32deg)  scale(0.91); }
  45%  { transform: translate(-85px,-45px)  rotate(-20deg) scale(1.04); }
  53%  { transform: translate(-120px,10px)  rotate(16deg)  scale(0.94); }
  61%  { transform: translate(-70px,60px)   rotate(-25deg) scale(1.05); }
  69%  { transform: translate(20px,80px)    rotate(18deg)  scale(0.92); }
  77%  { transform: translate(80px,45px)    rotate(-12deg) scale(1.03); }
  86%  { transform: translate(50px,-10px)   rotate(8deg)   scale(0.97); }
  93%  { transform: translate(15px,-25px)   rotate(-5deg)  scale(1.01); }
  100% { transform: translate(0,0)         rotate(0deg)   scale(1);    }
}
.e-butterfly.is-flying img { animation: fly-away 5s cubic-bezier(0.45,0,0.55,1) forwards !important; cursor: default; }

/* Pixel cursor */
.e-cursor { top: calc(50% + 28vmin); left: calc(50% + 2vmin); z-index: 19; }
.e-cursor img {
  width: clamp(38px, 6vmin, 82px);
  animation: blink 5s step-end infinite;
}
@keyframes blink {
  0%, 68%, 100% { opacity: 1;   }
  72%            { opacity: 0.1; }
  78%            { opacity: 1;   }
}

/* ──────────────────────────────────────
   INTERACTIVE — hover scale + label
────────────────────────────────────── */
.p a { display: block; position: relative; cursor: pointer; text-decoration: none; }
.p a img { transition: transform 0.22s ease, filter 0.22s ease; }
.p a:hover img { transform: scale(1.07) !important; filter: brightness(1.15); }

.p button { background: none; border: none; padding: 0; cursor: pointer; display: block; position: relative; }
.p button img { transition: transform 0.22s ease, filter 0.22s ease; }
.p button:hover img { transform: scale(1.07) !important; filter: brightness(1.15); }
.p button:hover .nav-tip { opacity: 1; }

.nav-tip {
  position: absolute;
  bottom: -1.8rem; left: 50%;
  transform: translateX(-50%);
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.p a:hover .nav-tip { opacity: 1; }

/* ──────────────────────────────────────
   CENTER STAGE
────────────────────────────────────── */
.e-center { top: 50%; left: 50%; z-index: 15; }

.center-inner {
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title-block { position: relative; display: inline-block; }

/* Mate — behind logo */
.mate-img {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 46%;
  z-index: 2;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.65));
  animation: mate-tint 11s ease-in-out infinite;
}
@keyframes mate-tint {
  0%,  30%  { filter: drop-shadow(0 10px 28px rgba(0,0,0,0.65))
                      hue-rotate(0deg)   saturate(1)   brightness(1); }
  45%        { filter: drop-shadow(0 8px 26px rgba(110,40,220,0.55))
                      hue-rotate(248deg) saturate(2.4) brightness(0.92); }
  55%        { filter: drop-shadow(0 8px 26px rgba(110,40,220,0.55))
                      hue-rotate(248deg) saturate(2.4) brightness(0.92); }
  70%, 100%  { filter: drop-shadow(0 10px 28px rgba(0,0,0,0.65))
                      hue-rotate(0deg)   saturate(1)   brightness(1); }
}

/* Mochee face — emerges from green yerba area of mate */
.mochee-face {
  position: absolute;
  top: -6%; left: 50%;
  transform: translateX(-50%);
  width: 22%;
  z-index: 1;
}

/* Logo — in-flow, on top of mate */
.logo-img {
  display: block;
  position: relative;
  width: clamp(270px, 48vmin, 640px);
  margin-top: 22%;
  z-index: 3;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.8));
}

.logo-link { display: block; position: relative; z-index: 3; }
.logo-link img { transition: filter 0.25s; }
.logo-link:hover img { filter: brightness(1.1); }

/* ──────────────────────────────────────
   CRT SCANLINES
────────────────────────────────────── */
.scene::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 50;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0, 0, 0, 0.028) 3px, rgba(0, 0, 0, 0.028) 4px
  );
  pointer-events: none;
}

/* ──────────────────────────────────────
   CLICK SHOCKWAVE
────────────────────────────────────── */
#shock-canvas {
  position: fixed; inset: 0;
  z-index: 150;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes scene-shake {
  0%   { transform: translate(0,0);   }
  20%  { transform: translate(-4px, 2px); }
  45%  { transform: translate(4px, -3px); }
  70%  { transform: translate(-2px, 4px); }
  90%  { transform: translate(2px, -1px); }
  100% { transform: translate(0,0);   }
}
.scene.is-shaking { animation: scene-shake 0.22s ease-out; }

/* ──────────────────────────────────────
   RSS TICKER + PANEL
────────────────────────────────────── */
.rss-ticker {
  position: fixed;
  bottom: 1.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(8, 18, 10, 0.78);
  border: 1px solid rgba(80, 140, 50, 0.3);
  border-radius: 3px;
  padding: 0.28rem 0.8rem;
  cursor: pointer;
  max-width: 44vw;
  overflow: hidden;
  transition: border-color 0.3s;
}
.rss-ticker:hover { border-color: rgba(120, 200, 80, 0.55); }
.rss-ticker.is-new { border-color: rgba(120, 220, 80, 0.8); animation: ticker-pulse 1.8s ease-in-out 3; }
@keyframes ticker-pulse {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 10px rgba(120, 220, 80, 0.4); }
}

.ticker-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(120, 220, 80, 0.7);
  flex-shrink: 0;
  animation: dot-blink 2s step-end infinite;
}
@keyframes dot-blink {
  0%, 60%, 100% { opacity: 1;   }
  65%            { opacity: 0.1; }
}
.ticker-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(120, 220, 80, 0.6);
  flex-shrink: 0;
}
.ticker-title {
  font-family: 'Space Mono', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  color: rgba(220, 240, 200, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-arrow {
  font-size: 0.5rem;
  color: rgba(120, 220, 80, 0.5);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.rss-ticker.panel-open .ticker-arrow { transform: rotate(180deg); }

.rss-panel {
  position: fixed;
  bottom: calc(1.4rem + 2.2rem + 0.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: clamp(260px, 44vw, 520px);
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel-bg);
  border: 1px solid rgba(80, 140, 50, 0.35);
  border-radius: 4px;
  padding: 0.6rem 0;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 140, 50, 0.3) transparent;
}
.rss-panel.is-open { display: block; }
.rss-panel-header {
  font-family: 'Space Mono', monospace;
  font-size: 0.42rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(120, 220, 80, 0.45);
  padding: 0 0.9rem 0.5rem;
  border-bottom: 1px solid rgba(80, 140, 50, 0.2);
  margin-bottom: 0.3rem;
}
.rss-item {
  display: block;
  padding: 0.38rem 0.9rem;
  text-decoration: none;
  transition: background 0.15s;
}
.rss-item:hover { background: rgba(80, 140, 50, 0.1); }
.rss-item-title {
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  color: rgba(210, 235, 195, 0.85);
  display: block;
  margin-bottom: 0.12rem;
}
.rss-item-date {
  font-family: 'Space Mono', monospace;
  font-size: 0.44rem;
  letter-spacing: 0.12em;
  color: rgba(120, 180, 80, 0.7);
  display: block;
}

/* ──────────────────────────────────────
   CORNER PHRASE
────────────────────────────────────── */
.corner-phrase {
  position: fixed;
  bottom: 1.4rem; right: 1.8rem;
  z-index: 20;
  font-family: 'Space Mono', monospace;
  font-size: clamp(0.45rem, 0.7vmin, 0.6rem);
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  text-align: right;
}

/* ──────────────────────────────────────
   TORUS MANIFOLD
────────────────────────────────────── */
.e-torus { top: calc(50% - 38vmin); left: calc(50% + 30vmin); z-index: 7; }
.e-torus canvas {
  width:  clamp(160px, 28vmin, 380px);
  height: clamp(160px, 28vmin, 380px);
  display: block;
  cursor: grab;
}
.e-torus canvas:active { cursor: grabbing; }

/* ──────────────────────────────────────
   GHOST LAYER  (below grid)
   Three depth levels: deep / mid / near
   Opacity lives in the animation via --op
────────────────────────────────────── */
.ghost-img {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.gd { filter: blur(10.8px); }
.gm { filter: blur(6.3px);  }
.gn { filter: blur(2.7px);  }

@keyframes drift-a {
  0%   { transform: rotate(var(--r,0deg)) translate(0px,  0px);   opacity: calc(var(--op,.1) * 0.2); }
  22%  { transform: rotate(calc(var(--r,0deg) + 2deg)) translate(7px,-22px);  opacity: var(--op,.1); }
  50%  { transform: rotate(calc(var(--r,0deg) - 2deg)) translate(-5px,-12px); opacity: calc(var(--op,.1) * 0.15); }
  75%  { transform: rotate(calc(var(--r,0deg) + 1deg)) translate(4px, 16px);  opacity: calc(var(--op,.1) * 0.6); }
  100% { transform: rotate(var(--r,0deg)) translate(0px,  0px);   opacity: calc(var(--op,.1) * 0.2); }
}
@keyframes drift-b {
  0%   { transform: rotate(var(--r,0deg)) translate(0px,  0px);   opacity: var(--op,.1); }
  30%  { transform: rotate(calc(var(--r,0deg) - 3deg)) translate(-9px,-26px); opacity: calc(var(--op,.1) * 0.2); }
  58%  { transform: rotate(calc(var(--r,0deg) + 2deg)) translate(6px, 18px);  opacity: calc(var(--op,.1) * 0.7); }
  82%  { transform: rotate(calc(var(--r,0deg) - 1deg)) translate(-3px,-8px);  opacity: calc(var(--op,.1) * 0.35); }
  100% { transform: rotate(var(--r,0deg)) translate(0px,  0px);   opacity: var(--op,.1); }
}
@keyframes drift-c {
  0%   { transform: rotate(var(--r,0deg)) translate(0px,  0px);   opacity: calc(var(--op,.1) * 0.5); }
  18%  { transform: rotate(calc(var(--r,0deg) + 4deg)) translate(10px,-18px); opacity: calc(var(--op,.1) * 0.1); }
  48%  { transform: rotate(calc(var(--r,0deg) - 2deg)) translate(-7px,-30px); opacity: var(--op,.1); }
  78%  { transform: rotate(calc(var(--r,0deg) + 1deg)) translate(5px, 10px);  opacity: calc(var(--op,.1) * 0.3); }
  100% { transform: rotate(var(--r,0deg)) translate(0px,  0px);   opacity: calc(var(--op,.1) * 0.5); }
}
@keyframes drift-d {
  0%   { transform: rotate(var(--r,0deg)) translate(0px,  0px);   opacity: calc(var(--op,.1) * 0.4); }
  38%  { transform: rotate(calc(var(--r,0deg) - 2deg)) translate(-11px,-20px); opacity: var(--op,.1); }
  65%  { transform: rotate(calc(var(--r,0deg) + 3deg)) translate(8px, 24px);   opacity: calc(var(--op,.1) * 0.15); }
  88%  { transform: rotate(calc(var(--r,0deg) - 1deg)) translate(-4px, 8px);   opacity: calc(var(--op,.1) * 0.55); }
  100% { transform: rotate(var(--r,0deg)) translate(0px,  0px);   opacity: calc(var(--op,.1) * 0.4); }
}
.da { animation: drift-a var(--dur,26s) ease-in-out infinite; }
.db { animation: drift-b var(--dur,26s) ease-in-out infinite; }
.dc { animation: drift-c var(--dur,26s) ease-in-out infinite; }
.dd { animation: drift-d var(--dur,26s) ease-in-out infinite; }

/* ──────────────────────────────────────
   RADIO MODAL
────────────────────────────────────── */
.radio-modal {
  position: fixed; inset: 0;
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.radio-modal.is-open { opacity: 1; pointer-events: auto; }

.radio-modal-inner {
  background: var(--panel-bg);
  border: 1px solid rgba(80, 140, 50, 0.45);
  border-radius: 6px;
  padding: 2.2rem 3rem;
  text-align: center;
  position: relative;
  max-width: 380px; width: 90vw;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}

/* Noise + binary canvases fill the full modal backdrop */
#radio-noise {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 0;
}
#radio-binary {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

.radio-modal-close {
  position: absolute;
  top: 0.6rem; right: 0.9rem;
  background: none; border: none; cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: 1.1rem;
  color: rgba(200, 240, 180, 0.5);
}
.radio-modal-close:hover { color: #fff; }

.radio-modal-title {
  font-family: 'VT323', monospace;
  font-size: 1.9rem;
  letter-spacing: 0.08em;
  color: rgba(200, 240, 180, 0.95);
  margin: 0 0 0.4rem;
}
.radio-modal-sub {
  font-family: 'Space Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-dim);
  margin: 0;
}

/* Sound wave bars */
.radio-waves {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 4px; height: 32px;
  margin: 1.2rem 0 0.4rem;
}
.radio-waves span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: rgba(140, 210, 100, 0.7);
  animation: wave-bar 1.1s ease-in-out infinite;
  transform-origin: bottom;
}
.radio-waves span:nth-child(1)  { height: 8px;  animation-delay: 0s;    animation-duration: 1.0s;  }
.radio-waves span:nth-child(2)  { height: 18px; animation-delay: 0.10s; animation-duration: 0.85s; }
.radio-waves span:nth-child(3)  { height: 26px; animation-delay: 0.20s; animation-duration: 1.15s; }
.radio-waves span:nth-child(4)  { height: 32px; animation-delay: 0.05s; animation-duration: 0.90s; }
.radio-waves span:nth-child(5)  { height: 20px; animation-delay: 0.30s; animation-duration: 1.05s; }
.radio-waves span:nth-child(6)  { height: 28px; animation-delay: 0.15s; animation-duration: 0.95s; }
.radio-waves span:nth-child(7)  { height: 14px; animation-delay: 0.25s; animation-duration: 1.20s; }
.radio-waves span:nth-child(8)  { height: 22px; animation-delay: 0.08s; animation-duration: 1.0s;  }
.radio-waves span:nth-child(9)  { height: 30px; animation-delay: 0.18s; animation-duration: 0.88s; }
.radio-waves span:nth-child(10) { height: 10px; animation-delay: 0.35s; animation-duration: 1.10s; }
.radio-waves span:nth-child(11) { height: 24px; animation-delay: 0.12s; animation-duration: 0.92s; }
.radio-waves span:nth-child(12) { height: 16px; animation-delay: 0.28s; animation-duration: 1.08s; }
@keyframes wave-bar {
  0%, 100% { transform: scaleY(0.25); opacity: 0.4; }
  50%       { transform: scaleY(1);    opacity: 1;   }
}

/* ──────────────────────────────────────
   BOCA LINKS PANEL
────────────────────────────────────── */
.boca-panel {
  position: fixed;
  /* top/left set by JS on open */
  transform: translateX(-50%);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  padding: 0.8rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.45rem;
  white-space: nowrap;
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
.boca-panel.is-open { opacity: 1; pointer-events: auto; }
.boca-panel::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--panel-border);
}
.boca-panel a {
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--green-hi);
  text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem;
}
.boca-panel a:hover { color: #fff; }
.boca-panel a .pl-icon { opacity: 0.6; font-size: 0.9rem; }
.boca-panel-title {
  font-family: 'Space Mono', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(160, 200, 130, 0.4);
  margin-bottom: 0.2rem;
}

/* ──────────────────────────────────────
   ACCESSIBILITY
────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .e-cat-paw img, .e-butterfly img, .e-cursor img { animation: none !important; }
}