/* build: site-live-v3 (ada-016c), integrated by Avi S275 2026-09-12, deploy after 591929d1 */
/* DJs ON GOLD — live-stream page, INTERIM SKIN (ada-016 / ada-016b).
 *
 * ada-016b: identical to the ada-016 skin except the video pane, which now holds
 * our own native <video> (HLS) instead of a third-party embed iframe. Only the
 * .lv-video child selector changed (see "player"); the rest is byte-for-byte v1.
 *
 * Swappable: the logic (live.js) depends only on the data-* hooks in README.md,
 * never on these class names. Replace this file (and the markup inside the hooks)
 * with Merlin's design component and the logic keeps working.
 *
 * Palette + fonts mirror the site (css/main.css "Key of Gold" + Google Fonts
 * Suez One / Frank Ruhl Libre) so the page reads as the brand while standing
 * alone (no dependency on main.css).
 */

/* ============================ tokens ============================= */
:root {
  --gold:   #E8B84B;  --gold-rgb: 232,184,75;
  --coral:  #E58461;  --coral-rgb: 229,132,97;
  --jade:   #4ED0B2;  --jade-rgb: 78,208,178;
  --violet: #9B80E5;  --violet-rgb: 155,128,229;
  --moon:   #A9B1DA;
  --orchid: #C98CE8;  --orchid-rgb: 201,140,232;
  --cream:  #F4E9D2;
  --ink:    #08060B;

  --f-display: 'Suez One', Georgia, serif;
  --f-body: 'Frank Ruhl Libre', Georgia, serif;

  --col: 1040px;           /* desktop content column */
  --edge: rgba(var(--gold-rgb), .55);   /* one fine gold edge */
  --glow: rgba(var(--gold-rgb), .16);   /* soft surrounding glow */
}

/* ============================ base ============================== */
* { box-sizing: border-box; }
/* The HTML `hidden` attribute (how live.js toggles the message overlay, greeting
 * card/affordances, retry, event, etc.) is overridden by any author `display`
 * value, so make it authoritative. Without this the message overlay (z4,
 * backdrop-filter blur) keeps painting while "hidden" and blurs the frame.
 * cosmic-room.css declares the same rule for the garden skin. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { margin: 0; overflow-x: hidden; }         /* never horizontal-scroll */
body {
  background: radial-gradient(120% 90% at 50% -10%, #17111f 0%, #0c0910 42%, #08060B 100%);
  color: var(--cream);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: #F6D98A; }
::selection { background: rgba(var(--gold-rgb), .3); color: var(--cream); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ===================== decorative cosmos ======================= */
.lv-cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lv-ring {
  position: absolute; left: 50%; top: 42%;
  width: 132vmax; height: 132vmax; margin: -66vmax 0 0 -66vmax;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 61%, rgba(var(--gold-rgb), .06) 62%, transparent 64%),
    radial-gradient(closest-side, transparent 70%, rgba(var(--violet-rgb), .05) 71%, transparent 73%);
  animation: lvOrbit 180s linear infinite;
}
.lv-spores {
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(var(--orchid-rgb), .5), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(var(--gold-rgb), .45), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(var(--violet-rgb), .5), transparent),
    radial-gradient(1.5px 1.5px at 85% 25%, rgba(var(--jade-rgb), .4), transparent),
    radial-gradient(2px 2px at 55% 15%, rgba(var(--orchid-rgb), .4), transparent);
  background-repeat: no-repeat;
  animation: lvDrift 42s ease-in-out infinite alternate;
  opacity: .8;
}
.lv-ambient {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: min(760px, 90vw); height: min(760px, 90vw);
  background: radial-gradient(closest-side, rgba(var(--violet-rgb), .16), rgba(var(--gold-rgb), .05) 55%, transparent 72%);
  animation: lvBreathe 14s ease-in-out infinite;
}
@keyframes lvOrbit { to { transform: rotate(360deg); } }
@keyframes lvDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-24px, -30px, 0); } }
@keyframes lvBreathe { 0%,100% { opacity: .55; } 50% { opacity: .95; } }

/* Pause decorative motion when tab hidden (JS sets body.is-hidden) or reduced-motion. */
body.is-hidden .lv-ring,
body.is-hidden .lv-spores,
body.is-hidden .lv-ambient { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lv-ring, .lv-spores, .lv-ambient,
  .lv-audio-ring, .lv-dot { animation: none !important; }
}

/* ============================ shell ============================ */
.lv-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 20px;
  max-width: var(--col); margin: 0 auto;
}
.lv-brand { display: flex; align-items: center; gap: 10px; }
.lv-seal { width: 30px; height: 30px; }
.lv-wordmark {
  font-family: var(--f-display); font-size: 17px; letter-spacing: .14em;
  color: var(--cream);
}
.lv-back {
  font-family: var(--f-body); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(var(--gold-rgb), .8);
}

.lv-main { position: relative; z-index: 2; }
.lv-column {
  max-width: var(--col); margin: 0 auto;
  padding: 8px 20px 48px;      /* 20px phone side padding */
}

/* ============================ head ============================= */
.lv-head { text-align: center; margin: 8px 0 18px; }
.lv-eyebrow {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); opacity: .9;
}
.lv-title {
  margin: 0; font-family: var(--f-display); font-weight: 400;
  font-size: clamp(28px, 8vw, 46px); line-height: 1.05; color: var(--cream);
  text-shadow: 0 0 30px rgba(var(--violet-rgb), .3);
}
.lv-sub { margin: 10px 0 0; font-size: 14px; letter-spacing: .04em; color: rgba(244,233,210,.8); }

/* ============================ status ========================== */
.lv-statuswrap { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; }
.lv-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(244,233,210,.4); flex: none;
}
.lv-main.is-live .lv-dot {
  background: #ff4d5e;
  box-shadow: 0 0 0 0 rgba(255,77,94,.6);
  animation: lvPulse 1.6s ease-out infinite;
}
@keyframes lvPulse { to { box-shadow: 0 0 0 10px rgba(255,77,94,0); } }
.lv-status {
  margin: 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244,233,210,.9);
}

/* ============================ switch ========================== */
.lv-switch {
  display: flex; justify-content: center; gap: 4px;
  width: fit-content; margin: 0 auto 20px; padding: 4px;
  border: 1px solid rgba(var(--gold-rgb), .3); border-radius: 999px;
  background: rgba(255,255,255,.03);
}
.lv-switch-btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 999px;
  background: transparent; color: rgba(244,233,210,.7);
  font-family: var(--f-body); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.lv-switch-btn.is-on {
  background: rgba(var(--gold-rgb), .16); color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .5);
}
.lv-switch-ico { font-size: 11px; }

/* ============================ stage =========================== */
.lv-stage {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  align-items: start;
}
@media (min-width: 900px) {
  .lv-stage { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ---------------------------- player -------------------------- */
.lv-playerwrap { min-width: 0; }
.lv-player {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden;
  background: #050308;
  border: 1px solid var(--edge);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .15), 0 24px 80px -20px var(--glow),
              0 0 120px -30px rgba(var(--violet-rgb), .4);
}
/* the picture stays the brightest, most active element */
.lv-player > * { position: absolute; inset: 0; }

.lv-video { z-index: 2; background: #000; display: none; }
/* our own native <video> fills the frame; contain keeps portrait/odd ratios clean */
.lv-video video, .lv-video-el { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }

.lv-audio { z-index: 2; display: none; }
.lv-audio-face {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px;
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), .1), transparent 70%), #070510;
}
.lv-audio-ring {
  width: 92px; height: 92px; border-radius: 50%;
  border: 2px solid rgba(var(--gold-rgb), .6);
  box-shadow: 0 0 40px rgba(var(--gold-rgb), .4), inset 0 0 30px rgba(var(--gold-rgb), .2);
  animation: lvRingPulse 3.4s ease-in-out infinite;
}
@keyframes lvRingPulse { 0%,100% { transform: scale(.94); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
.lv-audio-label { margin: 0; font-family: var(--f-display); font-size: 20px; color: var(--gold); letter-spacing: .04em; }
.lv-audio-hint { margin: 0; font-size: 12px; letter-spacing: .1em; color: rgba(244,233,210,.7); }
.lv-audio-controls { position: static; width: 100%; max-width: 320px; display: flex; justify-content: center; }
.lv-audio-el { width: 100%; }

.lv-poster { z-index: 1; background: #0a0712 center/cover no-repeat; display: block; }
.lv-poster { background-image: url('/assets/img/founders-bg.jpg'); }   /* root-absolute (ada-016c) */
.lv-poster-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 20%, transparent 30%, rgba(8,6,11,.55) 100%),
              linear-gradient(180deg, rgba(8,6,11,.15), rgba(8,6,11,.7));
}

.lv-message {
  z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  background: rgba(6,4,10,.72); backdrop-filter: blur(3px);
}
.lv-message-text { margin: 0; font-size: 15px; letter-spacing: .04em; color: var(--cream); max-width: 34ch; }
.lv-message-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lv-btn {
  appearance: none; cursor: pointer; font-family: var(--f-body);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  padding: 11px 22px; border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), .6);
  background: rgba(var(--gold-rgb), .12); color: #F6D98A;
}
.lv-btn:hover { background: rgba(var(--gold-rgb), .2); }
.lv-btn-ghost { border-color: rgba(244,233,210,.35); background: transparent; color: rgba(244,233,210,.85); }

.lv-nosync { margin: 10px 2px 0; font-size: 11px; letter-spacing: .04em; color: rgba(244,233,210,.5); text-align: center; }

/* ---------------------- pre-show greeting (ada-016c) ---------- */
/* The Shana Tova film sits in the player frame (a direct .lv-player child, so it
 * inherits position:absolute; inset:0). The outer frame stays 16:9 at all times;
 * the portrait film is object-fit:contain over a quiet ink surround (the gold edge
 * is the frame's own border). Shown only while data-greeting is playing/ended. */
.lv-greeting { z-index: 3; display: none; background: #050308; }
.lv-main[data-greeting="playing"] .lv-greeting,
.lv-main[data-greeting="ended"]   .lv-greeting { display: block; }
.lv-greeting-mount { position: absolute; inset: 0; }
.lv-greeting-mount video, .lv-greeting-el {
  width: 100%; height: 100%; display: block; border: 0;
  object-fit: contain;               /* portrait film never cropped inside the 16:9 frame */
  background: #050308;               /* pillarbox bars are quiet ink, not blurred video */
}
/* the film's last frame is black, so on `ended` the card sits over this still */
.lv-greeting-still {
  position: absolute; inset: 0; z-index: 1;
  background: #050308 center center / contain no-repeat;   /* still-26s set inline by live.js */
}
.lv-greeting-card {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 22px;
  /* strong, even scrim so the gold/cream copy is legible over the golden still */
  background: linear-gradient(180deg, rgba(8,6,11,.66) 0%, rgba(8,6,11,.80) 100%);
}
.lv-greeting-he {
  margin: 0; direction: rtl; font-family: var(--f-display); font-weight: 400;
  font-size: clamp(22px, 6vw, 34px); line-height: 1.15; color: var(--gold);
  text-shadow: 0 2px 6px rgba(8,6,11,.95), 0 0 22px rgba(8,6,11,.6);
}
.lv-greeting-en {
  margin: 0; font-family: var(--f-display); font-weight: 400;
  font-size: clamp(16px, 4.4vw, 22px); line-height: 1.2; color: var(--cream);
  text-shadow: 0 2px 6px rgba(8,6,11,.95), 0 0 18px rgba(8,6,11,.6);
}
.lv-greeting-soon {
  margin: 4px 0 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244,233,210,.78);
}
.lv-greeting-sound, .lv-greeting-play {
  position: absolute; z-index: 3; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #F6D98A; border: 1px solid rgba(var(--gold-rgb), .6);
  background: rgba(6,4,10,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border-radius: 999px; padding: 10px 18px; min-height: 40px;
}
.lv-greeting-sound { left: 50%; bottom: 14px; transform: translateX(-50%); }
.lv-greeting-play  { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 13px 24px; }
.lv-greeting-sound:hover, .lv-greeting-play:hover { background: rgba(var(--gold-rgb), .18); }
.lv-greeting-ico { font-size: 11px; }

/* ------------------------ state visibility -------------------- */
/* Which pane is shown is driven purely by data-state — skin concern only. */
.lv-main[data-state="video"] .lv-video { display: block; }
.lv-main[data-state="audio"] .lv-audio { display: block; }
.lv-main[data-state="before"] .lv-poster,
.lv-main[data-state="after"] .lv-poster,
.lv-main[data-state="unavailable"] .lv-poster { display: block; }
/* poster hidden behind a live transport */
.lv-main[data-state="video"] .lv-poster,
.lv-main[data-state="audio"] .lv-poster { display: none; }
/* nosync note only meaningful while a transport is live */
.lv-nosync { display: none; }
.lv-main[data-state="video"] .lv-nosync,
.lv-main[data-state="audio"] .lv-nosync { display: block; }

/* ---------------------------- room ---------------------------- */
.lv-room {
  border: 1px solid rgba(var(--violet-rgb), .3); border-radius: 16px;
  background: rgba(16,12,26,.6); overflow: hidden;
  box-shadow: inset 0 0 40px rgba(var(--violet-rgb), .08);
}
.lv-room-toggle {
  width: 100%; appearance: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: transparent; color: var(--cream);
  font-family: var(--f-body); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
}
.lv-room-chev { transition: transform .2s ease; color: var(--orchid); }
.lv-main.room-open .lv-room-chev { transform: rotate(180deg); }
.lv-room-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.lv-main.room-open .lv-room-body { max-height: 520px; }
.lv-room-mount { padding: 8px 16px 18px; min-height: 90px; }
.lv-room-placeholder { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(244,233,210,.6); }

/* On desktop the room sits open beside the player. */
@media (min-width: 900px) {
  .lv-room-toggle { cursor: default; pointer-events: none; }
  .lv-room-chev { display: none; }
  .lv-room-body { max-height: none; overflow: visible; }
  .lv-room-mount { min-height: 220px; }
}

/* ---------------------------- event --------------------------- */
.lv-event { margin: 18px auto 0; text-align: center; }
.lv-event-when { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--gold); }

/* ---------------------------- footer -------------------------- */
.lv-foot { position: relative; z-index: 2; text-align: center; padding: 24px; }
.lv-foot p { margin: 0; font-family: var(--f-display); font-size: 13px; letter-spacing: .2em; color: rgba(244,233,210,.4); }

/* ============================ phone tuning ==================== */
@media (max-width: 420px) {
  .lv-column { padding-left: 16px; padding-right: 16px; }   /* 16px side padding */
  .lv-top { padding-left: 16px; padding-right: 16px; }
  .lv-back { display: none; }
  .lv-switch-btn { padding: 9px 14px; }
}