/* slide-embed.css — Webflow tokens, film-panel character
   Restores the cinematic video-strip chrome on top of the Webflow
   design system (white canvas, #080808 ink, layered shadow, 8px card).
*/

.film-panel {
  margin-block: clamp(48px, 6vw, 96px);
}

.film-panel__shell {
  position: relative;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  overflow: hidden;
  /* Brand's 5-stop layered drop-shadow */
  box-shadow:
    0 84px 24px rgba(0,0,0,0),
    0 54px 22px rgba(0,0,0,0.01),
    0 30px 18px rgba(0,0,0,0.04),
    0 13px 13px rgba(0,0,0,0.08),
    0 3px  7px rgba(0,0,0,0.09);
}

/* Top bar — dark cinema strip on ink-black */
.film-panel__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: #080808;                        /* ink */
  color: #ffffff;
  font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01";
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}
.film-panel__dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: #ee1d36;                        /* accent-red: recording */
  box-shadow: 0 0 0 0 rgba(238, 29, 54, 0.55);
  animation: filmPanelPulse 1.6s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes filmPanelPulse {
  0%   { box-shadow: 0 0 0 0 rgba(238, 29, 54, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(238, 29, 54, 0); }
  100% { box-shadow: 0 0 0 0 rgba(238, 29, 54, 0); }
}
.film-panel__chip {
  margin-left: auto;
  font-family: "Inconsolata", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0;
}

/* 16:9 embed body */
.film-slide {
  position: relative;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
}
.film-slide__sizer { width: 100%; }
.film-slide__canvas { will-change: transform; }

/* Bottom caption — single hairline on canvas */
.film-slide__chrome {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border-top: 1px solid #ececec;
  font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "ss01";
}
.film-slide__num {
  font-family: "Inconsolata", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  color: #898989;                              /* mute */
}
.film-slide__sep {
  width: 1px; height: 12px;
  background: #d8d8d8;
  align-self: center;
}
.film-slide__label {
  font-size: 14px;
  font-weight: 500;
  color: #080808;
  letter-spacing: 0;
}
.film-slide__caption {
  margin-left: auto;
  font-size: 14px;
  font-weight: 400;
  color: #5a5a5a;                              /* body-mid */
  text-align: right;
  letter-spacing: -0.01em;
}
@media (max-width: 720px) {
  .film-slide__caption { display: none; }
  .film-panel__chip   { display: none; }
}