:root{
  /* Cosmic brand palette */
  --bg0:#0A1A1A;
  --bg1:#0D2B2B;
  --text:#F0F5F2;
  --muted: rgba(240,245,242,0.65);
  --gold:#D4A843;
  --gold2:#F0D060;
  --teal:#2EC4A0;
  --teal-dark:#0D3D3D;
  --green:#4ADE80;
  --shadow: 0 20px 60px rgba(0,0,0,0.55);

  /* Display knobs (defaults) */
  --frame-inset: 0px;     /* remove heart border */
  --frame-alpha: 0;       /* remove heart border */
  --heart-clip: polygon(
    10% 8%,
    38% 8%,
    50% 20%,
    62% 8%,
    90% 8%,
    100% 22%,
    100% 78%,
    50% 100%,
    0% 78%,
    0% 22%
  );
  --bg-video-scale: 0.92;
  --fg-y: 74%;
  --fg-scale: 0.92;
}
*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(14,60,55,0.30), transparent 70%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0,0,0,0.55), transparent 50%),
    url('bg-cosmic.webp') center/cover no-repeat fixed;
  background-color: var(--bg0);
}

/* ---------- Uploader layout ---------- */
.fioh-body{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Cosmic twinkle — individual star points that fade in/out independently */
@keyframes star-twinkle{
  0%,100%{ opacity:0; transform:scale(0.5); }
  50%{ opacity:1; transform:scale(1); }
}
.twinkle-star{
  position:absolute;
  left:var(--tx);
  top:var(--ty);
  width:var(--ts, 3px);
  height:var(--ts, 3px);
  border-radius:50%;
  opacity:0;
  background:rgba(255,255,255,0.90);
  box-shadow:
    0 0 calc(var(--ts, 3px) * 2) calc(var(--ts, 3px) * 0.6) rgba(255,255,255,0.55),
    0 0 calc(var(--ts, 3px) * 4) calc(var(--ts, 3px) * 1.5) rgba(212,168,67,0.20);
  animation:star-twinkle var(--tt, 5s) ease-in-out var(--td, 0s) infinite;
  will-change:opacity,transform;
}

/* Hero: full viewport, vertically centered */
.fioh-hero{
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:24px 18px;
}
.fioh-logo-large img{
  width:min(170px, 34vw);
  height:auto;
  border-radius:999px;
  background: rgba(0,0,0,0.30);
  padding:10px;
  border:1px solid rgba(212,168,67,0.25);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
  box-shadow: 0 0 24px rgba(212,168,67,0.15), 0 0 60px rgba(46,196,160,0.08);
}

.fioh-title{
  margin:0;
  letter-spacing:0.26em;
  font-weight:800;
  font-size:40px;
  color:var(--gold2);
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.55);
  paint-order: stroke fill;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 24px rgba(0,0,0,0.4), 0 2px 10px rgba(212,168,67,0.30);
}

.fioh-subtitle{
  margin:0;
  font-size:16px;
  color:var(--text);
  opacity:0.92;
  text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 16px rgba(0,0,0,0.7), 0 0 32px rgba(0,0,0,0.4);
}

.fioh-wait-banner{
  font-size:14px;
  color:var(--muted);
  min-height:18px;
}

/* ---------- Not-live overlay ---------- */
.not-live-overlay{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}
.not-live-message{
  margin:12px 0 0;
  font-size:18px;
  font-weight:700;
  color:var(--gold2);
  text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 16px rgba(0,0,0,0.7), 0 0 32px rgba(0,0,0,0.4);
}
.not-live-sub{
  margin:0;
  font-size:15px;
  color:var(--muted);
  text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 16px rgba(0,0,0,0.7), 0 0 32px rgba(0,0,0,0.4);
}

/* When not-live overlay is visible, hide the rest of the upload form */
.fioh-hero:has(.not-live-overlay:not(.hidden)) .dropzone,
.fioh-hero:has(.not-live-overlay:not(.hidden)) .permission-row,
.fioh-hero:has(.not-live-overlay:not(.hidden)) .payment-section,
.fioh-hero:has(.not-live-overlay:not(.hidden)) .upload-status,
.fioh-hero:has(.not-live-overlay:not(.hidden)) > .primary-button{
  display:none !important;
}
/* Also hide the email field in footer when not live */
.fioh-hero:has(.not-live-overlay:not(.hidden)) ~ .fioh-footer .footer-email{
  display:none !important;
}

/* ---------- Dropzone (logo CTA + circular preview) ---------- */
.dropzone{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.dropzone.is-dragover .fioh-logo-large img{
  border-color: rgba(243,197,106,0.7);
}

.file-input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  z-index:3;
}

.dropzone-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  pointer-events:none;
}

.glass-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:22px 40px 20px;
  border-radius:22px;
  background:rgba(5,15,15,0.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(212,168,67,0.10);
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
}

.dropzone-cta{
  margin:0;
  font-size:15px;
  color:var(--muted);
  text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 16px rgba(0,0,0,0.7), 0 0 32px rgba(0,0,0,0.4);
}

/* Circular preview (replaces logo after image selection) */
.dropzone-preview{
  position:relative;
  width:min(240px, 60vw);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background: rgba(0,0,0,0.42);
  border:2px solid rgba(212,168,67,0.35);
  box-shadow: 0 0 24px rgba(212,168,67,0.25), 0 0 60px rgba(46,196,160,0.10);
}

.dropzone-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dropzone-preview-hint{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:13px;
  color:rgba(255,255,255,0.78);
  padding:6px 12px;
  border-radius:999px;
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.10);
  z-index:2;
}

.hidden{ display:none !important; }

/* ---------- Form rows ---------- */
/* Hidden by default; shown when an image is selected (preview visible) */
.fioh-hero .permission-row,
.fioh-hero .payment-section,
.fioh-hero .upload-status,
.fioh-hero > .primary-button{
  display:none;
}
.fioh-hero:has(.dropzone-preview:not(.hidden)) .permission-row{
  display:flex;
}
.fioh-hero:has(.dropzone-preview:not(.hidden)) .payment-section:not(.hidden){
  display:flex;
}
.fioh-hero:has(.dropzone-preview:not(.hidden)) .upload-status{
  display:block;
}
.fioh-hero:has(.dropzone-preview:not(.hidden)) > .primary-button{
  display:block;
}

.permission-row{
  width:min(400px, 100%);
  margin-top:6px;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
  color:rgba(255,255,255,0.92);
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000,
    -2px  2px 0 #000, 2px  2px 0 #000,
     0   -2px 0 #000, 0    2px 0 #000,
    -2px  0   0 #000, 2px  0   0 #000;
}
.permission-row input{
  margin-top:4px;
  accent-color: var(--teal);
}
.required{ color:var(--gold2); font-weight:900; }
.guidelines-link{ color:var(--teal); text-decoration:underline; cursor:pointer; }
.guidelines-link:hover{ color:#5EEDC4; }

/* ---------- Payment section ---------- */
.payment-section{
  width:min(400px, 100%);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.payment-fee{
  margin:0;
  font-size:15px;
  color:var(--gold2);
  font-weight:700;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.7);
  paint-order: stroke fill;
}
.payment-amount-row{ margin:0; }
.card-element-container{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(46,196,160,0.20);
  background: rgba(10,26,26,0.55);
  min-height:44px;
}
.card-element-container.StripeElement--focus{
  border-color: rgba(46,196,160,0.50);
  box-shadow: 0 0 0 4px rgba(46,196,160,0.12);
}
.card-errors{
  font-size:13px;
  color:var(--gold2);
  min-height:0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.7);
  paint-order: stroke fill;
  background: rgba(10,26,26,0.75);
  border-radius:10px;
  padding:8px 12px;
}
.card-errors:empty{ padding:0; background:none; }

.upload-status{
  width:min(400px, 100%);
  margin-top:8px;
  min-height:20px;
  color:rgba(255,255,255,0.85);
  font-size:14px;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000,
    -2px  2px 0 #000, 2px  2px 0 #000,
     0   -2px 0 #000, 0    2px 0 #000,
    -2px  0   0 #000, 2px  0   0 #000;
}

/* Gentle pulse when status has content (uploading/processing) */
@keyframes status-pulse{
  0%,100%{ opacity:0.85; }
  50%{ opacity:0.55; }
}
.upload-status.is-processing{
  animation: status-pulse 2s ease-in-out infinite;
}

.primary-button{
  width:min(400px, 100%);
  margin-top:10px;
  padding:14px 16px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-weight:800;
  font-size:18px;
  color:var(--teal-dark);
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  box-shadow: 0 8px 32px rgba(212,168,67,0.30), 0 16px 40px rgba(0,0,0,0.40);
}
.primary-button:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.primary-button.secondary{
  width:auto;
  min-width:220px;
  display:inline-flex;
  justify-content:center;
}

/* ---------- Footer (below the fold) ---------- */
.fioh-footer{
  position:relative;
  z-index:1;
  width:min(940px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:24px 18px 32px;
  color:var(--muted);
}

.link-button{
  border:none;
  background:none;
  color:var(--teal);
  cursor:pointer;
  font-weight:800;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px;
}

.link-button.subtle{
  color:rgba(255,255,255,0.78);
  font-weight:700;
}

.footer-email{
  width:min(620px, 100%);
  padding:20px 28px;
  border-radius:22px;
  background:rgba(5,15,15,0.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(212,168,67,0.10);
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
}

.text-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.text-field span{
  font-size:14px;
  color:rgba(255,255,255,0.78);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.muted{ color:rgba(255,255,255,0.55); font-weight:600; }

.text-field input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(46,196,160,0.20);
  background: rgba(10,26,26,0.55);
  color:rgba(255,255,255,0.92);
  outline:none;
}
.text-field input:focus{
  border-color: rgba(46,196,160,0.50);
  box-shadow: 0 0 0 4px rgba(46,196,160,0.12);
}

.footer-details{
  width:min(820px, 100%);
  border:1px solid rgba(212,168,67,0.10);
  border-radius:22px;
  background:rgba(5,15,15,0.18);
  padding:14px 20px;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 32px rgba(0,0,0,0.18);
}
.footer-details summary{
  cursor:pointer;
  font-weight:800;
  color:rgba(255,255,255,0.80);
}
.footer-details-body{
  margin-top:10px;
  color:rgba(255,255,255,0.72);
  font-size:14px;
  line-height:1.5;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.footer-details-body a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.footer-details-body a:hover{ color:var(--gold2); }

/* ---------- Modal (centered + darker box) ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.78);
  z-index:1000;
}

.modal{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index:1001;
  width:min(92vw, 760px);
  max-height:min(84vh, 760px);
  overflow:auto;
}

.modal-content{
  border-radius:22px;
  padding:22px 22px 18px;
  background: rgba(10,26,26,0.94);
  border:1px solid rgba(46,196,160,0.18);
  box-shadow: 0 26px 70px rgba(0,0,0,0.70);
}

.modal-intro{ color:rgba(255,255,255,0.78); }

.guidelines-list{
  margin:12px 0 18px 18px;
  color:rgba(255,255,255,0.92);
  line-height:1.55;
}

/* =========================
   DISPLAY PAGE (projector)
   ========================= */
.display-body{
  margin:0;
  height:100vh;
  overflow:hidden;
  background:#000;
}

/* Hide status bar unless debug mode */
.display-body .display-status-bar { display:none !important; }
.display-body.debug .display-status-bar { display:flex !important; }

.display-root{
  position:relative;
  width:100vw;
  height:100vh;
}

.display-background-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter: brightness(0.75) contrast(1.05);
}

.display-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:22px;
}

.display-heart-frame{
  position:relative;
  width: min(92vw, 124vh);
  aspect-ratio: 1.35 / 1;
}

/* Black heart “border” behind images */
.display-heart-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--frame-alpha,0.86));
  clip-path: var(--heart-clip);
  z-index:1;
}

/* The actual viewport where images go */
.display-image-viewport{
  position:absolute;
  inset: var(--frame-inset);
  clip-path: var(--heart-clip);
  overflow:hidden;
  z-index:2;

  /* IMPORTANT: transparent so PNG cutouts look clean */
  background: transparent;
}

/* If you still have .display-heart-glow in HTML, kill it */
.display-heart-glow{ display:none !important; }

/* Image layers injected by JS */
.display-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-position: 50% 50%;
}

/* Blurred fill behind (covers empty space nicely) */
.display-image-blur{
  object-fit: cover;
  transform: scale(1.12);
  filter: blur(22px) saturate(1.12);
  opacity: 0;
  transition: opacity 500ms ease;
  will-change: opacity;
}
.display-image-blur.is-visible{
  opacity: 0.40;
}

/* Foreground cutout */
.display-image-foreground{
  object-fit: contain; /* THIS prevents face-cropping */
  transform: scale(var(--fg-scale, 0.98));
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.55));
  opacity:0;
  transition: opacity 800ms ease;
  will-change: opacity, transform;
}
.display-image-foreground.is-active{
  opacity:1;
}

.display-status-bar{
  width:min(96vw, 1200px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
}

.display-status-text{
  font-size:14px;
  font-weight:650;
}

.display-brand-mark{
  font-size:13px;
  color: rgba(255,255,255,0.62);
}
/* ===== FIOH DISPLAY TUNING ===== */

/* Background video zoom-out is driven by a CSS var (set in production-config.js) */
.display-background-video{
  transform: scale(var(--bg-video-scale, 1));
  transform-origin: center;
}

/* Foreground should NEVER crop faces; also bias downward to avoid top-notch */
.display-image-foreground,
#projector-image-a,
#projector-image-b{
  object-fit: contain !important;
  object-position: 50% var(--fg-y, 55%) !important;
}

/* Blur plate fills the heart nicely */
.display-image-blur,
#projector-image-blur{
  object-fit: cover !important;
  object-position: 50% var(--fg-y, 55%) !important;
}

/* IMPORTANT: keep the inset border (do NOT force inset:0) */
/* FIOH Display: background video scaling (show full frame with black border) */
#background-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  object-fit: contain;      /* show entire video */
  object-position: center;

  background: #000;         /* black bars */
  z-index: -1;
  pointer-events: none;
}

/* ── Floating orbs (ethereal ambient glow — always visible) ── */
/*
 * Pure CSS implementation. No JavaScript needed.
 * Orbs live inside .display-orb-container which replicates the heart
 * frame's exact size and centered position, clipping via clip-path so
 * no orb bleeds into the black masked area outside the heart.
 *
 * Rendering notes:
 * - filter:blur() on will-change elements runs on the GPU compositor.
 * - mix-blend-mode:screen means orbs add light rather than tinting —
 *   faces stay true-colour; orbs appear as coloured glows, not washes.
 * - All motion via transform:translate() — never triggers layout.
 * - opacity:0 → target via orb-fadein (animation-fill-mode:forwards).
 */

/* ── Container: mirrors .display-heart-frame geometry and clips to heart ── */
.display-orb-container {
  position: absolute;
  width: min(92vw, 124vh);
  aspect-ratio: 1.35 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  clip-path: var(--heart-clip);
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

/* ── Base ── */
.display-orb {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
}

/* ── Orb 1 — warm amber, upper-left drift ── */
.display-orb-1 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at center,
    rgba(255, 200, 80, 0.90) 0%,
    rgba(255, 170, 40, 0.40) 45%,
    transparent 70%);
  filter: blur(24px);
  animation:
    orb-fadein    3.5s ease-out  0.3s  forwards,
    orb-drift-1   28s  ease-in-out     infinite,
    orb-hue-1     22s  ease-in-out     infinite;
}

/* ── Orb 2 — warm gold-rose, right-side drift ── */
.display-orb-2 {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at center,
    rgba(255, 150, 110, 0.85) 0%,
    rgba(255, 120, 80, 0.35) 45%,
    transparent 70%);
  filter: blur(21px);
  animation:
    orb-fadein    3.5s ease-out  0.8s  forwards,
    orb-drift-2   35s  ease-in-out     infinite,
    orb-hue-2     18s  ease-in-out     infinite;
}

/* ── Orb 3 — cool teal, centre-bottom arc ── */
.display-orb-3 {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at center,
    rgba(60, 220, 185, 0.80) 0%,
    rgba(40, 190, 160, 0.30) 45%,
    transparent 70%);
  filter: blur(26px);
  animation:
    orb-fadein    3.5s ease-out  1.2s  forwards,
    orb-drift-3   31s  ease-in-out     infinite,
    orb-hue-3     26s  ease-in-out     infinite;
}

/* ── Orb 4 — soft lavender, upper-right ── */
.display-orb-4 {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at center,
    rgba(210, 175, 255, 0.85) 0%,
    rgba(180, 140, 255, 0.30) 45%,
    transparent 70%);
  filter: blur(19px);
  animation:
    orb-fadein    3.5s ease-out  0.6s  forwards,
    orb-drift-4   24s  ease-in-out     infinite,
    orb-hue-4     20s  ease-in-out     infinite;
}

/* ── Orb 5 — ice blue, lower-centre wander ── */
.display-orb-5 {
  width: 75px;
  height: 75px;
  background: radial-gradient(circle at center,
    rgba(120, 190, 255, 0.80) 0%,
    rgba(80, 160, 240, 0.28) 45%,
    transparent 70%);
  filter: blur(22px);
  animation:
    orb-fadein    3.5s ease-out  1.5s  forwards,
    orb-drift-5   38s  ease-in-out     infinite,
    orb-hue-5     30s  ease-in-out     infinite;
}

/* ── Fade-in (runs once, fills to final opacity) ── */
@keyframes orb-fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Drift paths ── */
/* Translate values are the position of the orb's top-left corner
   relative to the .display-orb-container origin (= heart frame top-left).
   At 1920×1080 the container is ~70vw wide × ~92vh tall.
   Coordinates stay well within the heart interior; clip-path handles edges.
   Paths are asymmetric loops — no two orbs move in sync. */

@keyframes orb-drift-1 {
  0%   { transform: translate(5vw,  15vh); }
  20%  { transform: translate(10vw, 46vh); }
  45%  { transform: translate(4vw,  60vh); }
  70%  { transform: translate(16vw, 28vh); }
  100% { transform: translate(5vw,  15vh); }
}

@keyframes orb-drift-2 {
  0%   { transform: translate(50vw, 10vh); }
  25%  { transform: translate(40vw, 44vh); }
  55%  { transform: translate(54vw, 58vh); }
  80%  { transform: translate(44vw, 20vh); }
  100% { transform: translate(50vw, 10vh); }
}

@keyframes orb-drift-3 {
  0%   { transform: translate(24vw, 58vh); }
  30%  { transform: translate(36vw, 34vh); }
  60%  { transform: translate(16vw, 20vh); }
  85%  { transform: translate(30vw, 50vh); }
  100% { transform: translate(24vw, 58vh); }
}

@keyframes orb-drift-4 {
  0%   { transform: translate(54vw, 12vh); }
  35%  { transform: translate(44vw, 28vh); }
  65%  { transform: translate(56vw, 44vh); }
  100% { transform: translate(54vw, 12vh); }
}

@keyframes orb-drift-5 {
  0%   { transform: translate(16vw, 66vh); }
  22%  { transform: translate(34vw, 52vh); }
  50%  { transform: translate(8vw,  40vh); }
  75%  { transform: translate(28vw, 62vh); }
  100% { transform: translate(16vw, 66vh); }
}

/* ── Hue shifts — gentle colour cycling per orb ── */
/* Ranges chosen so warm orbs cycle toward cool and back,
   cool orbs cycle toward warm and back, all at different speeds. */

@keyframes orb-hue-1 {
  0%, 100% { filter: blur(24px) hue-rotate(0deg);   }
  50%       { filter: blur(24px) hue-rotate(50deg);  }
}
@keyframes orb-hue-2 {
  0%, 100% { filter: blur(21px) hue-rotate(0deg);   }
  50%       { filter: blur(21px) hue-rotate(-40deg); }
}
@keyframes orb-hue-3 {
  0%, 100% { filter: blur(26px) hue-rotate(0deg);   }
  50%       { filter: blur(26px) hue-rotate(60deg);  }
}
@keyframes orb-hue-4 {
  0%, 100% { filter: blur(19px) hue-rotate(0deg);   }
  50%       { filter: blur(19px) hue-rotate(-55deg); }
}
@keyframes orb-hue-5 {
  0%, 100% { filter: blur(22px) hue-rotate(0deg);   }
  50%       { filter: blur(22px) hue-rotate(45deg);  }
}

/* ── Audio enable overlay ─────────────────────────────────── */
#audio-overlay{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9999;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.8);
  font-size:14px;
  font-family:ui-sans-serif, system-ui, sans-serif;
  cursor:pointer;
  user-select:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:opacity 0.4s ease;
}
#audio-overlay:hover{
  background:rgba(0,0,0,0.7);
  color:#fff;
}
.audio-overlay-icon{
  margin-right:6px;
}
#audio-overlay.audio-overlay-out{
  opacity:0;
  pointer-events:none;
}