/* STAGE MORPH — additive morphing-stage styles.
 * Linked by podcast.html (audience page) AND bigscreen.html (projector).
 * Only the reshape / cross-fade / kind-frame pieces live here; the base stage
 * chrome stays in podcast.css (audience) and an inline block in bigscreen.html.
 * Everything is .sm-* namespaced (or a .pod-stage modifier) so it can never
 * collide with the existing .pod-* / .rl-* components. */

/* The morph transition fires only while a stage clip owns the frame; the idle
 * 16:9 stage never animates. */
.pod-stage{will-change:width,height}
.pod-stage.sm-active{
  transition:width .55s cubic-bezier(.4,0,.2,1),height .55s cubic-bezier(.4,0,.2,1);
}
/* Once the stage matches the clip's native aspect, fill edge-to-edge. */
.pod-stage.sm-active video{object-fit:cover}

/* "Reframe" flash — sells the physical reshape each time the clip changes. */
@keyframes smReframe{
  0%{transform:scale(.985);filter:brightness(1.55) saturate(1.3) contrast(1.05)}
  60%{transform:scale(1.004)}
  100%{transform:scale(1);filter:none}
}
.pod-stage.sm-reframe{animation:smReframe .55s cubic-bezier(.4,0,.2,1)}

/* kind chip (REEL / VIDEO / SQUARE) — overlays top-left of the stage */
.sm-chip{
  position:absolute;top:16px;left:16px;z-index:6;
  font-family:var(--font-head,"Bebas Neue",sans-serif);
  font-size:12px;letter-spacing:.24em;font-weight:800;
  padding:6px 14px;border-radius:8px;
  color:#04121a;background:linear-gradient(135deg,#baf4ff,var(--tt-cyn,#00e5ff));
  box-shadow:0 0 20px rgba(0,229,255,.5);
}
.sm-chip[hidden]{display:none}

/* kind frames — portrait LED (reel), cinematic (video), square */
.sm-kind-reel{border:1px solid var(--tt-mag,#ff3df2)!important;
  box-shadow:0 0 46px rgba(255,61,242,.35),0 30px 90px rgba(0,0,0,.7)!important}
.sm-kind-reel .sm-chip{color:#1a0014;background:linear-gradient(135deg,#ffb3f9,var(--tt-mag,#ff3df2));
  box-shadow:0 0 22px rgba(255,61,242,.55)}
.sm-kind-video{border:1px solid var(--pod-gold,#d4af37)!important;
  box-shadow:0 0 46px rgba(212,175,55,.28),0 30px 90px rgba(0,0,0,.7)!important}
.sm-kind-video .sm-chip{color:#1a1406;background:linear-gradient(135deg,var(--pod-gold-2,#f0d47a),var(--pod-gold,#d4af37));
  box-shadow:0 0 22px rgba(212,175,55,.5)}
.sm-kind-square{border:1px solid var(--tt-lime,#c8ff2d)!important;
  box-shadow:0 0 46px rgba(200,255,45,.28),0 30px 90px rgba(0,0,0,.7)!important}
.sm-kind-square .sm-chip{color:#04121a;background:linear-gradient(135deg,#e6ff9f,var(--tt-lime,#c8ff2d));
  box-shadow:0 0 22px rgba(200,255,45,.5)}

/* "TAP FOR SOUND" hint — shown only when audible autoplay was blocked. */
.sm-sound{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:1001;cursor:pointer;font-family:var(--font-head,"Bebas Neue",sans-serif);
  font-size:14px;letter-spacing:.18em;font-weight:800;color:#04121a;
  padding:12px 22px;border:none;border-radius:999px;
  background:linear-gradient(135deg,#c8ff2d,#8ee000);
  box-shadow:0 0 30px rgba(200,255,45,.55),0 12px 30px rgba(0,0,0,.5);
  animation:smSound 1.4s ease-in-out infinite;
}
.sm-sound:active{transform:translateX(-50%) scale(.97)}
@keyframes smSound{0%,100%{box-shadow:0 0 22px rgba(200,255,45,.4)}50%{box-shadow:0 0 44px rgba(200,255,45,.85)}}

@media(prefers-reduced-motion:reduce){
  .pod-stage.sm-active{transition:none}
  .pod-stage.sm-reframe{animation:none}
}