/* Monty Marsh hero: the cold open.
   Every color, type size, space and radius below is a Monty Marsh design system token.
   The hero always renders in Darkroom, so this block pins the Darkroom values even on a page set in Gallery. */

.mm-hero {
  /* Design system tokens, Darkroom values */
  --ground: #1A0A0F;
  --ink: #F6E6EA;
  --ink-soft: #C9B6BC;
  --ink-mute: #9A8891;
  --gold: #C9962A;
  --voice: #8A2A3D;
  --voice-hover: #A23A4F;
  --voice-on: #F6E6EA;
  --voice-line: #B4485E;
  --focus: #C9962A;
  --scrim: rgba(26, 10, 15, 0.72);
  --glow-voice: 0 8px 22px rgba(138, 42, 61, 0.38);
  --glow-voice-hover: 0 10px 26px rgba(138, 42, 61, 0.52);
  --radius-m: 10px;
  --radius-round: 999px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;
  --space-8: 88px;
  --font-display: "Syne", "Arial Black", sans-serif;
  --font-body: "Outfit", system-ui, sans-serif;

  /* Hero layout */
  --bar-top: var(--space-8);
  --bar-bottom: calc(var(--space-8) * 2);
  --gutter: var(--space-7);
  --frame-w: min(100%, calc((var(--mm-viewport-height, 100svh) - var(--bar-top) - var(--bar-bottom)) * 2.39));

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--mm-viewport-height, 100svh);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  color-scheme: dark;
}

/* Grain: film grain on the picture and the ground, jumping 24 times a second like film.
   Every live element sits above it: the nav, the captions, the cue mark, the chip and the credits.
   Two layers carry it. The one at the foot of the section sits under everything, on the ground.
   The one inside the frame sits over the film, under the captions, cue mark and chip.
   It never takes clicks, and it stops with the site's Motion switch or Reduced Motion. */
.mm-hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.mm-hero__grain--film { z-index: auto; }
.mm-hero__grain::before {
  content: "";
  position: absolute;
  inset: -180px;
  background: url("media/grain.png") repeat 0 0 / 180px 180px;
  opacity: 0.12;
  mix-blend-mode: screen;
  animation: mm-hero-grain 1s steps(1, end) infinite;
}
@keyframes mm-hero-grain {
  0% { transform: translate(0px, 0px); }
  4.1667% { transform: translate(-36px, -138px); }
  8.3333% { transform: translate(-144px, 12px); }
  12.5% { transform: translate(120px, -120px); }
  16.6667% { transform: translate(90px, 102px); }
  20.8333% { transform: translate(6px, -12px); }
  25% { transform: translate(114px, -48px); }
  29.1667% { transform: translate(-174px, 174px); }
  33.3333% { transform: translate(-96px, -132px); }
  37.5% { transform: translate(-24px, -72px); }
  41.6667% { transform: translate(-138px, -24px); }
  45.8333% { transform: translate(84px, -156px); }
  50% { transform: translate(42px, 174px); }
  54.1667% { transform: translate(102px, -144px); }
  58.3333% { transform: translate(-30px, 66px); }
  62.5% { transform: translate(-144px, -36px); }
  66.6667% { transform: translate(-42px, 6px); }
  70.8333% { transform: translate(96px, 96px); }
  75% { transform: translate(30px, -138px); }
  79.1667% { transform: translate(-96px, -6px); }
  83.3333% { transform: translate(-24px, 84px); }
  87.5% { transform: translate(-156px, -60px); }
  91.6667% { transform: translate(-24px, 156px); }
  95.8333% { transform: translate(-138px, 42px); }
  100% { transform: translate(0px, 0px); }
}

/* Aperture: as the film starts, the frame opens from a thin slit to its full shape. hero.js adds is-opening. */
@keyframes mm-hero-aperture {
  0%, 30% { clip-path: inset(49.4% 0 49.4% 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.mm-hero.is-opening .mm-hero__frame { animation: mm-hero-aperture 1s cubic-bezier(0.72, 0, 0.18, 1) both; }

.mm-hero *, .mm-hero *::before, .mm-hero *::after { box-sizing: border-box; }

/* Top bar: the site nav sits here. */
.mm-hero__top {
  flex: none;
  width: var(--frame-w);
  height: var(--bar-top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--gutter);
}

/* The film frame, 2.39:1 on desktop. On tall screens the frame and credits center in the space under the top bar. */
.mm-hero__frame {
  position: relative;
  flex: none;
  width: var(--frame-w);
  max-width: 100%;
  aspect-ratio: 2.39 / 1;
  margin-top: auto;
  overflow: hidden;
  background: var(--ground);
  container-type: inline-size;
  cursor: pointer;
}
.mm-hero[data-state="credits"] .mm-hero__frame,
.mm-hero[data-state="static"] .mm-hero__frame { cursor: default; }

.mm-hero__still,
.mm-hero__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mm-hero__still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-hero__still { opacity: 0; transition: opacity 0.6s ease; }
.mm-hero__film { opacity: 1; transition: opacity 0.6s ease; }
.mm-hero[data-state="credits"] .mm-hero__still,
.mm-hero[data-state="static"] .mm-hero__still { opacity: 1; }
.mm-hero[data-state="credits"] .mm-hero__film,
.mm-hero[data-state="static"] .mm-hero__film { opacity: 0; }

/* A shade under the captions: scrim at the bottom of the frame, clear by the middle.
   It keeps the captions at 4.5:1 or better over any frame, and fades away with the film. */
.mm-hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--scrim) 0%, var(--scrim) 20%, transparent 52%);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.mm-hero[data-state="credits"] .mm-hero__shade,
.mm-hero[data-state="static"] .mm-hero__shade { opacity: 0; }

/* Captions on the picture, in the same place for every shot. Type: subtitle, sized to the frame: 34px on large
   frames, 21px on phones. The width leaves room for the chip at the bottom right. */
.mm-hero__sub {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: max-content;
  max-width: calc(100% - 320px);
  margin: 0;
  transform: translateX(-50%);
  font: 500 34px / 1.3 var(--font-body);
  font-size: clamp(21px, 2.1vw, 34px);
  font-size: clamp(21px, 2.3cqi, 34px);
  text-align: center;
  text-wrap: balance;
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(26, 10, 15, 0.6), 0 0 18px rgba(26, 10, 15, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.mm-hero__sub.is-on { opacity: 1; }

/* The cue mark: a gold point that flashes before each change of beat, top right, like the changeover cue on a film print. */
.mm-hero__cue {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background: var(--gold);
  opacity: 0;
  pointer-events: none;
}
.mm-hero__cue.is-on { opacity: 1; }

/* Skip during the film, Watch the open afterwards. Type: label. */
.mm-hero__chip {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-round);
  background: var(--scrim);
  color: var(--ink);
  font: 600 14px / 20px var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mm-hero__chip:hover { box-shadow: inset 0 0 0 1px var(--ink-mute); }

/* Bottom bar: the credit block builds here when the film ends. */
.mm-hero__bottom {
  flex: none;
  width: var(--frame-w);
  min-height: var(--bar-bottom);
  margin-bottom: auto;
  container-type: inline-size;
  display: flex;
  align-items: center;
  padding: var(--space-5) var(--gutter);
}

.mm-hero__credit {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
}
/* The name block grows to fill the row. Its basis is the name at 40px, so the buttons drop below only when the row runs out of room. */
.mm-hero__id { position: relative; isolation: isolate; flex: 1 1 520px; min-width: 0; }

/* Safelight: a wine glow behind the name, like the red light in a darkroom. It comes up with the credits
   and breathes once every eight seconds. It sits behind the name, never behind the buttons. */
.mm-hero__id::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -12%;
  right: -12%;
  top: -70%;
  bottom: -70%;
  background: radial-gradient(closest-side, rgba(138, 42, 61, 0.56), rgba(138, 42, 61, 0) 100%);
  opacity: 0.6;
  pointer-events: none;
  animation: mm-hero-safelight 8s ease-in-out infinite;
}
@keyframes mm-hero-safelight { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.9; } }

/* Type: overline, in gold. */
.mm-hero__roles {
  margin: 0 0 var(--space-2);
  font: 700 12px / 16px var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.mm-hero__roles span { white-space: nowrap; }

/* Type: name-xl. 60px on large screens, 40px on phones. It scales with the frame, so the credit block stays on one line wherever it fits. */
.mm-hero__name {
  margin: 0;
  font: 800 60px / 1 var(--font-display);
  font-size: clamp(40px, 3.5vw, 60px);
  font-size: clamp(40px, 4.2cqi, 60px);
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.mm-hero__actions { flex: none; display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Action buttons. Type: label. */
.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-m);
  font: 600 14px / 20px var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.mm-btn--primary { background: var(--voice); color: var(--voice-on); box-shadow: var(--glow-voice); }
/* The wine glow holds steady and lifts with the button on hover. It never pulses. */
.mm-btn--primary:hover { background: var(--voice-hover); box-shadow: var(--glow-voice-hover); transform: translateY(-1px); }
.mm-btn--secondary { border: 1.5px solid var(--voice-line); color: var(--ink); }
.mm-btn--secondary:hover { border-color: var(--voice-hover); }

.mm-hero a:focus-visible,
.mm-hero button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Credit block: hidden during the open, built when the film ends. */
.mm-hero__id, .mm-hero__actions {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mm-hero[data-state="intro"] .mm-hero__credit { pointer-events: none; }
.mm-hero[data-state="credits"] .mm-hero__id,
.mm-hero[data-state="static"] .mm-hero__id { opacity: 1; transform: none; transition-delay: 0.2s; }
.mm-hero[data-state="credits"] .mm-hero__actions,
.mm-hero[data-state="static"] .mm-hero__actions { opacity: 1; transform: none; transition-delay: 0.7s; }

/* Focus pull: when the film ends, the name pulls from soft to sharp, like a lens finding focus. */
@keyframes mm-hero-focus {
  0% { opacity: 0; filter: blur(16px); transform: scale(1.02); }
  35% { opacity: 0.7; }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
.mm-hero[data-state="credits"] .mm-hero__name {
  transform-origin: 0 50%;
  animation: mm-hero-focus 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

/* Static start (reduced motion, Save-Data, a return visit, or autoplay refused): no transitions. */
.mm-hero--instant *, .mm-hero--instant *::before, .mm-hero--instant *::after { transition: none !important; }

/* The site's Motion switch (motion.js) sets data-motion="off" on the html element. The loops hold still and the
   one-time moves are skipped. Reduced Motion does the same, unless the reader turned motion on with the switch. */
:root[data-motion="off"] .mm-hero__grain::before,
:root[data-motion="off"] .mm-hero__id::before { animation-play-state: paused; }
:root[data-motion="off"] .mm-hero.is-opening .mm-hero__frame,
:root[data-motion="off"] .mm-hero[data-state="credits"] .mm-hero__name { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) .mm-hero__grain::before,
  :root:not([data-motion="on"]) .mm-hero__id::before,
  :root:not([data-motion="on"]) .mm-hero.is-opening .mm-hero__frame,
  :root:not([data-motion="on"]) .mm-hero[data-state="credits"] .mm-hero__name { animation: none; }
}

.mm-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Phones: a square frame. Captions sit at the foot of the picture, the chip moves to the top left, and the credits stack under the frame. */
@media (max-width: 767px) {
  .mm-hero {
    --bar-top: var(--space-7);
    --gutter: var(--space-4);
    --frame-w: 100%;
    min-height: 0;
  }
  .mm-hero__frame { aspect-ratio: 1 / 1; }
  .mm-hero__shade { background: linear-gradient(to top, var(--scrim) 0%, var(--scrim) 16%, transparent 44%); }
  .mm-hero__sub { bottom: var(--space-4); max-width: calc(100% - 2 * var(--space-4)); font-size: 21px; }
  .mm-hero__cue { top: var(--space-4); right: var(--space-4); width: 8px; height: 8px; }
  .mm-hero__chip { top: var(--space-3); left: var(--space-3); right: auto; bottom: auto; }
  .mm-hero__bottom { min-height: 0; padding: var(--space-4) var(--gutter) var(--space-6); }
  .mm-hero__credit { flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .mm-hero__id { flex: none; }
  .mm-hero__name { font-size: 40px; white-space: normal; }
  .mm-hero__actions { flex-direction: column; }
  .mm-btn { width: 100%; min-height: 48px; }
}