/* ════════════════════════════════════════════════════════════════
   Circuit Cinema — the "Motus Moves" generative cinematic.
   Woven straight into the page: no frame, no border, no card. The heavy
   animation lives in a TRANSPARENT iframe (circuit-cinema.html) whose
   top/bottom edges feather into the page backdrop, so it reads as part of
   the site — not a bolted-on widget. A living megaphone broadcasts the
   signal; a mute toggle keeps it gentle; a live counter shows lifetime
   plays + views across everyone.
   ════════════════════════════════════════════════════════════════ */

.cinema{
  --cy:#22e0f0; --vi:#b48bff; --gr:#2ce36b; --gold:#ffe6a3;
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:min(100% - 1rem, 1200px);   /* wider stage → the ~720px card + its glow sit well inside, never reaching an edge */
  margin:clamp(1.2rem,5vw,3.4rem) auto;
  padding:0;
}

/* ── stage: the cinematic viewport (no chrome — it merges into the page) ── */
.cinema__stage{
  position:relative; width:100%;
  height:clamp(480px, 72vh, 860px);   /* room for the card glow + rings to fade out (not clip), without excess empty space */
  isolation:isolate;
  background:transparent; border:0; border-radius:0; box-shadow:none;
  /* off-screen: skip rendering this region entirely (height is fixed, so no layout shift) */
  content-visibility:auto;
  contain-intrinsic-size:auto clamp(480px,72vh,860px);
}
/* the iframe itself is feathered into the page — controls above it stay crisp */
.cinema__frame{
  position:absolute; inset:0; width:100%; height:100%;
  border:0; display:block; background:transparent; /* TRANSPARENT — the host page backdrop shows straight through, so the cinematic blends in (no dark rectangle / visible edge) */
  color-scheme:dark;
  /* auto-driven cinematic — every control is a host overlay, so the frame
     needs no pointer input; passing touches through means a drag over it
     scrolls the page normally on mobile (no scroll-trap). */
  pointer-events:none;
  /* feather ALL FOUR edges WIDE + SOFT so the animation dissolves into the page — nothing ever looks cut off */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg, transparent 0, #000 17%, #000 83%, transparent 100%), linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-composite:intersect;
}
/* ── FEED mode: the stage grows tall (height set inline by cinema.js) as cards generate,
   so the page scrolls through the FULL history of cards in every mode. Drop the feather +
   off-screen culling so the whole scrollable history is fully visible. ── */
.cinema__stage.is-feed{ content-visibility:visible; }
.cinema__stage.is-feed .cinema__frame{
  -webkit-mask-image:none; mask-image:none;
}

/* ── idle veil (covers the stage until play) ── */
.cinema__veil{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  padding:1.4rem;
  background:radial-gradient(58% 56% at 50% 46%, rgba(8,12,24,.10), rgba(5,7,14,.40) 80%);
  transition:opacity .55s ease, visibility .55s ease;
}
.cinema__stage.is-playing .cinema__veil,
.cinema__stage.is-done    .cinema__veil{ opacity:0; visibility:hidden; pointer-events:none; }

/* ── the living megaphone — broadcasts the signal ── */
.cinema__mega{
  position:relative; display:grid; place-items:center;
  width:clamp(150px,42vw,212px); height:clamp(150px,42vw,212px);
  border:0; background:transparent; cursor:pointer; padding:0;
  transition:transform .26s cubic-bezier(.34,1.5,.5,1), filter .26s ease;
  animation:cmegaIn .9s cubic-bezier(.2,.9,.3,1) both;
}
.cinema__mega:hover{ transform:scale(1.06); }
.cinema__mega:active{ transform:scale(.97); }
.cinema__mega:focus-visible{ outline:2px solid rgba(34,224,240,.7); outline-offset:8px; border-radius:24px; }
@keyframes cmegaIn{ from{ opacity:0; transform:scale(.82); } to{ opacity:1; transform:scale(1); } }

.cinema__mega-aura{
  position:absolute; inset:-14%; z-index:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(34,224,240,.34), rgba(180,139,255,.12) 54%, transparent 72%);
  filter:blur(6px);
  animation:cmegaAura 3.6s ease-in-out infinite;
}
@keyframes cmegaAura{ 0%,100%{ opacity:.62; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.06); } }

.cinema__mega-svg{
  position:relative; z-index:1; width:72%; height:72%; overflow:visible;
  transform:rotate(-10deg);
  filter:drop-shadow(0 0 12px rgba(34,224,240,.55));
  animation:cmegaBob 3.4s ease-in-out infinite;
}
@keyframes cmegaBob{ 0%,100%{ transform:rotate(-10deg) translateY(0); } 50%{ transform:rotate(-7deg) translateY(-3px); } }

.cmega-horn{ filter:drop-shadow(0 0 5px rgba(34,224,240,.7)); }
.cmega-cone,.cmega-cap{ fill:rgba(34,224,240,.10); stroke:#bdf6ff; stroke-width:2.6; stroke-linejoin:round; }
.cmega-rim{ fill:none; stroke:#eafdff; stroke-width:2.6; stroke-linecap:round; }
.cmega-handle{ fill:none; stroke:#bdf6ff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.cmega-dia{ stroke:rgba(120,232,255,.6); stroke-width:1.5; }

/* concentric broadcast pulses ripple outward (inner → outer) */
.cmw{ fill:none; stroke:#7fe9ff; stroke-width:2.4; stroke-linecap:round; opacity:0;
  animation:cmwEmit 2.2s ease-in-out infinite; }
.cmw1{ animation-delay:0s; }
.cmw2{ animation-delay:.30s; }
.cmw3{ animation-delay:.60s; stroke:#cfe1ff; }
@keyframes cmwEmit{ 0%{ opacity:0; } 22%{ opacity:.95; } 58%{ opacity:.18; } 100%{ opacity:0; } }

.cinema__mega-tx{
  font-family:'Sora',system-ui,sans-serif; font-weight:600;
  font-size:clamp(13px,3.4vw,16px); letter-spacing:.16em; text-transform:uppercase;
  color:#dcecff; text-shadow:0 0 20px rgba(34,224,240,.4); /* soft glow, never a hard highlight */
}

/* ── mute toggle — FIXED to the viewport (top-right) while the cinema is on screen + playing,
   not pinned to the top of the tall feed stage ── */
.cinema__mute{
  position:fixed; z-index:43; top:calc(env(safe-area-inset-top) + 64px); right:14px;
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; cursor:pointer;
  border:1px solid rgba(34,224,240,.34);
  background:rgba(7,11,20,.62);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  box-shadow:0 0 22px -10px rgba(34,224,240,.6);
  opacity:0; pointer-events:none; transform:translateY(-4px);
  transition:opacity .35s ease, transform .35s ease, border-color .2s ease, background .2s ease;
}
.cinema__mute.show{ opacity:1; pointer-events:auto; transform:none; }
.cinema__mute:hover{ border-color:rgba(34,224,240,.7); background:rgba(10,16,28,.7); }
.cinema__mute svg{ width:21px; height:21px; }
.cmute-spk{ fill:#dff4ff; }
.cmute-wave{ fill:none; stroke:#9fe4ff; stroke-width:1.8; stroke-linecap:round; }
.cmute-x line{ stroke:#ff9bae; stroke-width:2; stroke-linecap:round; }
.cinema__mute:not(.is-muted) .cmute-x{ display:none; }
.cinema__mute.is-muted .cmute-wave{ display:none; }
.cinema__mute.is-muted .cmute-spk{ fill:#9aa6bb; }
.cinema__mute.is-muted{ border-color:rgba(255,155,174,.4); }

/* ── HUD (Rapid-fire / Skip / Replay) — FIXED to the bottom of the viewport (just above the
   dock) so it sits right by the cards you're watching, NOT at the bottom of the tall feed stage ── */
.cinema__hud{
  position:fixed; z-index:42; left:50%; bottom:calc(env(safe-area-inset-bottom) + 92px); transform:translateX(-50%);
  display:flex; gap:.5rem; padding:.4rem;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(12,16,28,.78), rgba(8,11,20,.88));
  border:1px solid rgba(58,86,128,.4);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 16px 40px -16px #000;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.cinema__hud.show{ opacity:1; pointer-events:auto; }
.cinema__hudbtn{
  font-family:'Sora',system-ui,sans-serif; font-weight:600;
  font-size:clamp(11px,3vw,13px); letter-spacing:.02em; white-space:nowrap;
  color:#dfe9f7; cursor:pointer;
  padding:.5rem .8rem; border-radius:10px;
  border:1px solid rgba(74,104,150,.4);
  background:linear-gradient(135deg, rgba(34,224,240,.12), rgba(180,139,255,.08));
  transition:.2s ease;
}
.cinema__hudbtn:hover{
  border-color:rgba(34,224,240,.6); color:#fff;
  background:linear-gradient(135deg, rgba(34,224,240,.22), rgba(180,139,255,.14));
  box-shadow:0 0 26px -8px rgba(34,224,240,.7); transform:translateY(-1px);
}
.cinema__hudbtn:active{ transform:translateY(0); }
.cinema__hudbtn[data-replay]{
  border-color:rgba(44,227,107,.5);
  background:linear-gradient(135deg, rgba(44,227,107,.16), rgba(34,224,240,.08));
}
.cinema__hudbtn[data-replay]:hover{ box-shadow:0 0 26px -8px rgba(44,227,107,.7); }

/* ── "tap for sound" nudge (autoplay starts muted until a gesture) ── */
.cinema__sound{
  position:absolute; z-index:4; left:50%; top:14px; transform:translateX(-50%);
  font-family:'Sora',system-ui,sans-serif; font-weight:600;
  font-size:clamp(10px,2.8vw,12px); letter-spacing:.06em; color:#cfe9ff;
  padding:.42rem .8rem; border-radius:999px;
  background:rgba(8,12,22,.62); border:1px solid rgba(34,224,240,.4);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 0 26px -10px rgba(34,224,240,.6);
  animation:cinBob 2.2s ease-in-out infinite;
}
@keyframes cinBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}

/* ── live counter: lifetime plays + views, always current ── */
.cinema__kpi{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
  margin-top:clamp(.6rem,2.4vw,1.15rem);
  font-family:'Sora',system-ui,sans-serif;
  opacity:0; transform:translateY(4px);
  transition:opacity .6s ease, transform .6s ease;
}
.cinema__kpi.is-on{ opacity:1; transform:none; }
.cinema__kpi-item{ display:inline-flex; align-items:baseline; gap:.36rem; }
.cinema__kpi-num{
  font-weight:700; font-size:clamp(15px,4vw,19px);
  color:#eaf9ff; font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(34,224,240,.5); /* soft glow */
}
.cinema__kpi-lbl{
  font-size:clamp(10px,2.6vw,12px); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(178,196,224,.66);
}
.cinema__kpi-dot{
  width:4px; height:4px; border-radius:50%; background:rgba(34,224,240,.6);
  box-shadow:0 0 9px rgba(34,224,240,.8);
}
/* a freshly-incremented number gives one soft pulse */
.cinema__kpi-num.bump{ animation:cinKpiBump .6s ease; }
@keyframes cinKpiBump{ 0%,100%{ text-shadow:0 0 18px rgba(34,224,240,.5); }
  40%{ text-shadow:0 0 26px rgba(34,224,240,.95), 0 0 44px rgba(124,233,245,.6); transform:translateY(-1px); } }

/* ── desktop polish ── */
@media (min-width:720px){
  .cinema__hud{ gap:.6rem; }
}

@media (prefers-reduced-motion:reduce){
  .cinema__mega,.cinema__mega-aura,.cinema__mega-svg,.cmw,.cinema__sound{ animation:none; }
  .cinema__stage,.cinema__veil,.cinema__hud,.cinema__mega,.cinema__mute,.cinema__kpi{ transition:none; }
}