/* ============================================================
   SPEAKER REEL — small inline card next to portrait;
   click to expand into a centered modal; close to return.
   ============================================================ */

/* The card sits in the portrait column, beneath the portrait. */
/* slot beside the name */
.sd-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 66px; flex-wrap: nowrap; }
.sd-name-row .sd-name { flex: 1 1 auto; min-width: 0; }

/* hide the latin block — felt redundant against the abstract */
.sd-latin-block { display: none; }

.reel-card {
  position: relative;
  margin-top: -8px;
  width: 240px;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  background: #F0E5CB;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 12px 12px 10px;
  box-shadow: 0 6px 18px rgba(26,18,8,0.10), inset 0 0 0 1px rgba(200,169,97,0.15);
  transition:
    transform .35s cubic-bezier(.3,.9,.4,1.05),
    box-shadow .35s ease,
    background .3s ease;
}
.reel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(26,18,8,0.18), inset 0 0 0 1px rgba(200,169,97,0.3);
}

/* Stage = the SVG illustration; the modal video lives inside it too. */
.reel-card-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: transparent;
  overflow: visible;
}
.reel-card-stage svg.clapper-svg {
  position: absolute;
  inset: -30%;
  width: 160%;
  height: 160%;
  transform: translateY(20px);
  display: block;
  transition: opacity .5s ease, transform .8s cubic-bezier(.4,0,.2,1);
}

/* Meta row below the SVG */
.reel-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
}
.reel-card-cta { color: var(--filament); font-weight: 500; }
.reel-card.is-armed .reel-card-cta { color: var(--gilt); }

/* clap arm tilts on hover */
.clap-arm { transform-origin: 14px 16px; transition: transform .42s cubic-bezier(.3,.9,.4,1.05); }
.reel-card.is-armed .clap-arm { transform: rotate(-14deg); }
.reel-card.is-playing .clap-arm { transform: rotate(0deg) translateY(-1px); }

/* reel rotation */
@keyframes reel-spin { to { transform: rotate(-360deg); } }
.reel-spokes { transform-origin: 0 0; animation: reel-spin 14s linear infinite; }

/* REC pip glow (no movement) */
@keyframes rec-glow {
  0%,100% { filter: drop-shadow(0 0 2px rgba(255,106,46,0.5)) drop-shadow(0 0 6px rgba(255,106,46,0.25)); }
  50%     { filter: drop-shadow(0 0 5px rgba(255,106,46,0.95)) drop-shadow(0 0 14px rgba(255,106,46,0.6)) drop-shadow(0 0 22px rgba(255,180,120,0.35)); }
}
.rec-dot { animation: rec-glow 2s ease-in-out infinite; }

/* ============================================================
   VIDEO PANEL — sits behind the SVG; transitions to a centered
   modal when card.is-playing.
   ============================================================ */
.reel-video {
  position: absolute;
  inset: 0;
  background: #0a0604;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .4s ease .25s;
}
.reel-video::after {
  /* faux video — replace with <iframe>/<video> when files arrive */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,214,107,0.18), transparent 55%),
    radial-gradient(ellipse at 75% 65%, rgba(92,26,42,0.4), transparent 60%),
    linear-gradient(135deg, #1a1208 0%, #2a1b0a 50%, #0a0604 100%);
}
.reel-video .play-glyph {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(244,236,218,0.94);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 1;
}
.reel-video .play-glyph::before {
  content: ''; display: block;
  width: 0; height: 0;
  border-left: 18px solid #1a1208;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}

/* Close button — sits OUTSIDE the stage (top-right, off the corner)
   so it's always clearly visible against the page backdrop. */
.reel-close {
  position: absolute;
  top: -22px; right: -22px;
  width: 48px; height: 48px;
  border: 1.5px solid #C8A961;
  background: #F4ECDA;
  color: #1A1208;
  font: 400 26px/1 'Newsreader', Georgia, serif;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 4px rgba(244,236,218,0.15);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .35s ease .35s, transform .35s cubic-bezier(.3,1.4,.5,1) .35s, background .2s ease;
}
.reel-card.is-playing .reel-close {
  opacity: 1;
  transform: scale(1);
}
.reel-close:hover { background: #C8A961; color: #F4ECDA; }

.reel-video-caption {
  position: absolute; left: 22px; bottom: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(244,236,218,0.85);
  display: flex; align-items: center; gap: 10px;
  z-index: 2;
}
.reel-video-caption em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; text-transform: none; letter-spacing: 0.01em;
  color: rgba(255,214,107,0.85);
}
.reel-video-caption .dot { opacity: 0.5; }

/* Hand-drawn marginalia note pointing at the clapperboard */
.reel-card-note {
  position: absolute;
  top: calc(100% + 32px);
  right: 96px;
  width: 156px;
  pointer-events: none;
  z-index: 3;
  font-family: 'Caveat', cursive;
  color: #5C3618;
  transform: rotate(-6deg);
  transition: opacity .25s ease, transform .35s ease;
}
.reel-card-note svg { display: block; width: 100%; height: auto; overflow: visible; }
.reel-card-note .scribble {
  fill: none; stroke: #5C3618; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.85;
}
.reel-card-note .note-text {
  font-family: 'Caveat', cursive; font-size: 26px; fill: #5C3618; opacity: 0.92;
}
.reel-card:hover ~ * .reel-card-note,
.reel-card:hover .reel-card-note { transform: rotate(-4deg) translate(-2px, -2px); }
.reel-card.is-playing .reel-card-note,
body.reel-is-open .reel-card-note { opacity: 0; }

/* ============================================================
   PLAYING STATE — modal expansion
   The card stays in flow (its slot reserves space). Only the
   .reel-card-stage gets pulled into a fixed, centered overlay.
   ============================================================ */
.reel-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,6,4,0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: opacity .45s ease;
}
body.reel-is-open .reel-backdrop {
  opacity: 1; pointer-events: auto;
}

.reel-card.is-playing {
  cursor: default;
  transform: none;
  box-shadow: 0 6px 18px rgba(26,18,8,0.10);
}

/* Pluck the stage out into a fixed centered container — same 16:9 ratio,
   just larger. No aspect-ratio animation = no jumpiness. */
.reel-card.is-playing .reel-card-stage {
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  width: min(78vw, 760px);
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,169,97,0.3) inset;
  background: #0a0604;
  transform-origin: top left;
  transform: translate(-50%, -50%);
  transition: transform .55s cubic-bezier(.4,0,.2,1), box-shadow .55s ease;
}

/* Fade out the illustration once expansion is mostly done */
.reel-card.is-playing svg.clapper-svg { opacity: 0; }

/* Reveal the video */
.reel-card.is-playing .reel-video {
  opacity: 1;
  pointer-events: auto;
}

/* keep the card's footprint in place when stage is fixed —
   the stage's natural height is preserved by aspect-ratio on
   .reel-card-stage's normal flow rules; once .is-playing flips
   it to position:fixed we need the original slot to NOT collapse.
   We achieve that with a ::before placeholder that maintains
   the aspect ratio. */
.reel-card-stage::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.reel-card-stage > svg,
.reel-card-stage > .reel-video {
  position: absolute; inset: 0;
}

/* Hide the card meta + body when modal-open so the page is calm */
body.reel-is-open .reel-card .reel-card-meta { opacity: 0.4; }

/* Mobile */
@media (max-width: 720px) {
  .reel-card { max-width: 240px; margin-top: 14px; }
  .reel-card.is-playing .reel-card-stage {
    width: 94vw;
  }
}