/* A single poster composition, with space reserved for title and controls. */
.poster-opening {
  height: max(100svh, 40rem);
  min-height: min-content;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr);
}
.poster-opening .masthead {
  width: 100%;
  max-width: 1600px;
  padding: 1rem 5%;
  margin: 0 auto;
  gap: 1rem;
}
.poster-opening .wordmark { font-size: .75rem; letter-spacing: .1em; }
.poster-opening .wordmark span:last-child { min-width: 0; overflow-wrap: anywhere; }
.poster-opening nav { font-size: .875rem; gap: 1.75rem; }
.poster-opening .nav-cta {
  padding: .75rem 1rem;
  background: var(--gold);
  color: #172127;
  border-color: transparent;
  font-weight: 600;
}
.poster-opening .nav-cta:hover { background: #f2c586; }
.poster-opening .hero-film {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(240px, 1fr) auto auto;
}
.poster-title { padding: 1.1rem 1rem 1rem; text-align: center; z-index: 1; }
.poster-title h1 {
  max-width: 1400px;
  margin: 0 auto;
  font-size: clamp(2rem, 3.8vw, 4rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.poster-title h1 em { display: inline; color: var(--gold); font-style: normal; }
.poster-title .h1-end {
  font-size: clamp(1.125rem, 1.7vw, 1.75rem);
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-top: .4rem;
}
.poster-art-slot {
  contain: size;
  min-width: 0;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
}
.poster-opening .hero-film .hero-art {
  width: min(100%, calc(var(--poster-art-height, 400px) * 969 / 1623), 560px);
  max-width: none;
  min-width: 0;
  margin: 0;
  flex: 0 1 auto;
}
.poster-opening .film-toolbar {
  min-height: 5.75rem;
  padding: .65rem 1rem;
  gap: .6rem 1rem;
  align-content: center;
}
.poster-opening .film-replay {
  display: inline-flex;
  background: transparent;
  color: var(--ink);
  border-color: #e9b36555;
  font-size: .875rem;
  padding: .6rem 1rem;
  gap: .75rem;
  min-height: 44px;
}
.poster-opening .film-replay:hover { background: #e9b36512; border-color: var(--gold); }
.poster-opening .film-controls { flex-basis: auto; }
.poster-opening .film-controls button { font-size: .875rem; min-height: 44px; }
.poster-opening #film-time { font-size: .75rem; margin-left: 0; }
.poster-opening .film-status { font-size: .875rem; padding-bottom: .75rem; }
.hero { padding-top: 3rem; padding-bottom: 3rem; }
.hero-copy .eyebrow { font-size: .75rem; }
.hero-copy .hero-lead { margin-top: 0; font-size: 1rem; overflow-wrap: anywhere; hyphens: auto; }
.hero-copy .text-link { font-size: .875rem; }
.hero-copy .sound-note { font-size: .75rem; }

@media (max-width: 700px) {
  .poster-opening { height: max(100svh, 38.75rem); }
  .poster-opening .masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: .65rem 1rem .5rem;
    gap: .35rem;
  }
  .poster-opening .wordmark { justify-content: center; font-size: .75rem; }
  .poster-opening .brand-sign { font-size: 1.7rem; }
  .poster-opening nav { justify-content: center; gap: .4rem; flex-wrap: wrap; }
  .poster-opening nav > a:not(.nav-cta) { display: inline-flex; padding: .65rem 0; }
  .poster-opening .nav-cta { font-size: .875rem; padding: .65rem .7rem; }
  .poster-title { padding: .85rem 1rem .75rem; }
  .poster-title h1 { font-size: clamp(1.75rem, 6.6vw, 2.875rem); letter-spacing: -.035em; }
  .poster-title h1 em { display: inline; }
  .poster-title .h1-end { font-size: 1.125rem; margin-top: .35rem; }
  .poster-opening .film-toolbar { min-height: 7rem; padding: .5rem .75rem; gap: .35rem; }
  .poster-opening .film-controls { flex-basis: 100%; gap: .5rem; }
  .poster-opening .film-controls button { padding: .5rem .75rem; }
}

@media (max-width: 380px) {
  .poster-title h1 em { display: block; }
}

@media (forced-colors: active) {
  .poster-opening .nav-cta, .poster-opening .film-replay { border: 1px solid ButtonText; }
}

/* Desktop titles are decorative duplicates of the complete, accessible H1. */
.side-title { display: none; }
@media (min-width: 1024px), (min-width: 701px) and (any-hover: hover) and (any-pointer: fine) {
  .poster-opening .hero-film { grid-template-rows: minmax(18rem, 1fr) auto auto; }
  .poster-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .poster-art-slot {
    --desktop-art-width: min(560px, calc(var(--poster-art-height, 400px) * 969 / 1623), 42vw);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--desktop-art-width) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 3rem);
    padding: 0 clamp(1rem, 4vw, 5rem);
  }
  .poster-opening .hero-film .hero-art { grid-column: 2; grid-row: 1; width: 100%; }
  /* Size the artwork from its actual grid row before JavaScript is available. */
  @supports (width: 1cqh) {
    .poster-art-slot {
      container-type: size;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    .poster-opening .hero-film .hero-art {
      width: min(560px, calc(100cqh * 969 / 1623), 42vw);
    }
  }
  .side-title {
    display: block;
    position: relative;
    isolation: isolate;
    min-width: 0;
    text-align: center;
    font-family: 'Manrope', sans-serif;
    color: var(--title-colour);
    pointer-events: none;
    grid-row: 1;
  }
  .side-title::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -2rem -1rem;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(5, 9, 14, .28) 0%, rgba(5, 9, 14, .18) 38%, transparent 72%);
    opacity: 0;
  }
  .side-title:not(.is-sequenced)::before,
  .side-title:has(.type-letter.is-visible)::before { opacity: 1; }
  .side-title-chance {
    --title-colour: var(--gold);
    --title-light: #f7d49b;
    --title-depth: #b67a32;
    --title-rgb: 233, 179, 101;
    grid-column: 1;
  }
  .side-title-danger {
    --title-colour: #ff2028;
    --title-light: #ff7478;
    --title-depth: #c90818;
    --title-rgb: 255, 32, 40;
    grid-column: 3;
  }
  .side-kicker {
    display: block;
    font-size: clamp(1.25rem, 1.5vw, 1.75rem);
    line-height: 1.5;
    margin-bottom: .75rem;
    color: var(--title-colour);
    text-shadow: 0 2px 4px rgba(5, 9, 14, .8), 0 0 .2em rgba(var(--title-rgb), .45), 0 0 .5em rgba(var(--title-rgb), .16);
    white-space: pre-wrap;
  }
  .side-title strong {
    filter: drop-shadow(0 2px 3px rgba(5, 9, 14, .8));
    position: relative;
    display: block;
    font-size: clamp(2rem, 3.5vw, 4.5rem);
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-shadow: 0 .025em .015em var(--title-depth), 0 0 .12em rgba(var(--title-rgb), .5), 0 0 .4em rgba(var(--title-rgb), .22);
  }
  .type-letter { position: relative; }
  html[data-hero-titles="pending"] .side-title { opacity: 0; }
  .side-title.is-sequenced .type-letter { visibility: hidden; }
  .side-title.is-sequenced .type-letter.is-visible { visibility: visible; }
  .type-letter.is-visible.letter-flash { animation: letter-light .22s ease-out; }
  .type-letter.is-current::after {
    content: '';
    position: absolute;
    bottom: .06em;
    right: -.13em;
    width: 2px;
    height: .8em;
    background: currentColor;
  }
}

/* Light moves across the completed words; the existing letter reveal stays intact. */
.title-spark { display: none; }
@media (min-width: 1024px), (min-width: 701px) and (any-hover: hover) and (any-pointer: fine) {
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .side-title strong .type-letter {
      background: linear-gradient(180deg, var(--title-light) 0%, var(--title-colour) 30%, var(--title-colour) 49%, var(--title-depth) 53%, var(--title-colour) 77%, var(--title-light) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .side-title.has-finish strong::after {
      content: attr(data-title-text);
      position: absolute;
      inset: 0;
      pointer-events: none;
      color: transparent;
      -webkit-text-fill-color: transparent;
      text-shadow: none;
      background-image: linear-gradient(110deg, transparent 43%, rgba(255,255,255,.12) 47%, rgba(255,255,255,.88) 49.5%, rgba(255,255,255,.2) 52%, transparent 55%);
      background-size: 250% 100%;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      animation: title-sheen 6s linear infinite;
    }
  }
  .side-title.has-finish strong { animation: title-glow 4s ease-in-out infinite; }
  .side-title.has-finish .title-spark {
    display: block;
    position: absolute;
    width: .13em;
    height: .13em;
    top: .08em;
    right: -.025em;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 .1em #fff, 0 0 .24em var(--title-light);
    opacity: 0;
    transform: scale(.2) rotate(0deg);
    animation: title-sparkle 6s ease-in-out var(--spark-delay) infinite;
    pointer-events: none;
    z-index: 2;
  }
  .title-spark::before, .title-spark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: .4em;
    height: 1px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transform: translate(-50%, -50%);
  }
  .title-spark::after { transform: translate(-50%, -50%) rotate(90deg); }
  .hero-film[data-paused="true"] .side-title strong,
  .hero-film[data-paused="true"] .side-title strong::after,
  .hero-film[data-paused="true"] .type-letter,
  .hero-film[data-paused="true"] .title-spark { animation-play-state: paused; }
  .hero-film:not([data-phase="titles"]):not([data-phase="complete"]) .side-title strong { animation: none; }
  .hero-film:not([data-phase="titles"]):not([data-phase="complete"]) .side-title strong::after,
  .hero-film:not([data-phase="titles"]):not([data-phase="complete"]) .title-spark { display: none; }
}
@keyframes title-glow {
  0%, 100% { text-shadow: 0 .025em .015em var(--title-depth), 0 0 .12em rgba(var(--title-rgb), .5), 0 0 .4em rgba(var(--title-rgb), .22); }
  50% { text-shadow: 0 .025em .015em var(--title-depth), 0 0 .17em rgba(var(--title-rgb), .7), 0 0 .55em rgba(var(--title-rgb), .32); }
}
@keyframes title-sheen {
  0% { background-position: 150% 0; opacity: 0; }
  2% { opacity: .8; }
  15% { opacity: .8; }
  16.667%, 100% { background-position: -50% 0; opacity: 0; }
}
@keyframes title-sparkle {
  0%, 7%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  3% { opacity: .95; transform: scale(1) rotate(35deg); }
}
@media (max-width: 1023px) {
  .poster-title h1, .poster-title h1 em {
    color: #155dff;
    text-shadow: 0 0 .22em #155dff88, 0 0 .65em #155dff40;
  }
  .poster-title .h1-end {
    color: #ff2028;
    text-shadow: 0 0 .22em #ff202888, 0 0 .65em #ff202840;
  }
}
/* Soft separation on tablets; phone colours and shadows remain untouched. */
@media (min-width: 701px) and (max-width: 1023px) {
  .poster-title { position: relative; isolation: isolate; }
  .poster-title::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -.5rem 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(5, 9, 14, .28) 0%, rgba(5, 9, 14, .18) 38%, transparent 72%);
  }
  .poster-title h1, .poster-title h1 em {
    text-shadow: 0 2px 5px rgba(5, 9, 14, .8), 0 0 .15em #155dff70, 0 0 .4em #155dff30;
  }
  .poster-title .h1-end {
    text-shadow: 0 2px 5px rgba(5, 9, 14, .8), 0 0 .15em #ff202870, 0 0 .4em #ff202830;
  }
}
/* Restore the original gold/cream palette on phones only. */
/* A mouse-operated computer can have a narrow CSS viewport despite a large monitor. */
@media (min-width: 701px) and (max-width: 1023px) and (any-hover: hover) and (any-pointer: fine) {
  .poster-title { position: absolute; }
  .side-title strong { font-size: clamp(1.1rem, 2.75vw, 2rem); }
  .side-kicker { font-size: clamp(.9rem, 1.8vw, 1.25rem); margin-bottom: .5rem; }
}

@media (max-width: 700px) {
  .poster-title h1, .poster-title .h1-end {
    color: var(--ink);
    text-shadow: none;
  }
  .poster-title h1 em {
    color: var(--gold);
    text-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .side-title strong, .side-title strong::after, .title-spark { animation: none !important; }
  .side-title strong::after, .title-spark { display: none !important; }
}
@keyframes letter-light {
  from { text-shadow: 0 0 .3em currentColor, 0 0 .8em currentColor; }
  to { text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .type-letter { animation: none !important; } }
@media (forced-colors: active) {
  .side-title::before, .poster-title::before { display: none; }
  .side-title, .side-kicker, .poster-title h1, .poster-title h1 em, .poster-title .h1-end { color: CanvasText; text-shadow: none; }
  .side-title strong, .side-title strong .type-letter { filter: none; background: none; -webkit-text-fill-color: CanvasText; text-shadow: none; animation: none !important; }
  .side-title strong::after, .title-spark { display: none !important; }
}