/* ── Official trailer: a full-bleed cinema, not a framed embed ── */
html body .trailer-section.tr-cinema { position: relative; display: grid; place-items: center; width: 100%; min-height: 100svh !important; padding: 0 !important; margin: 0; overflow: hidden; background: #050505; isolation: isolate; border: 0; }
.tr-bg { position: absolute; inset: -10%; z-index: -2; width: 120%; height: 120%; object-fit: cover; filter: grayscale(.35) brightness(.38) blur(26px) saturate(1.1); transform: scale(1.04); }
.tr-cinema::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 35%, rgba(0, 0, 0, .85) 100%), linear-gradient(180deg, #050505 0, transparent 18%, transparent 70%, #050505 100%); }
/* the picture: fits the screen at the film's 4:3, edge to edge on phones */
.tr-frame { position: relative; z-index: 1; width: min(100vw, calc(100svh * 4 / 3)); aspect-ratio: 4 / 3; overflow: hidden; background: #000; box-shadow: 0 60px 160px rgba(0, 0, 0, .9); transition: transform 1.2s var(--k-ease, cubic-bezier(.2, .7, .2, 1)), filter .8s; }
.tr-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15) contrast(1.08) brightness(.72); transform: scale(1.06); transition: transform 2.4s cubic-bezier(.2, .7, .2, 1), filter .8s; }
.tr-cinema:hover .tr-cover { transform: scale(1.02); filter: grayscale(0) contrast(1.08) brightness(.82); }
.tr-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent 45%), linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 50%); transition: opacity .6s; }
.tr-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
/* type: huge, condensed, sitting on the picture */
.tr-copy { position: absolute; z-index: 3; left: clamp(20px, 5vw, 80px); bottom: clamp(26px, 7vh, 80px); pointer-events: none; transition: opacity .6s, transform .8s; }
.tr-kicker { display: block; margin-bottom: 14px; font: 400 11px/1 var(--k-font-mono, 'IBM Plex Mono', monospace); letter-spacing: .32em; text-transform: uppercase; color: rgba(242, 242, 242, .7); }
.tr-title { margin: 0 !important; display: grid; font: 600 clamp(64px, 13.5vw, 230px)/.82 var(--k-font-display, 'Barlow Condensed', sans-serif) !important; text-transform: uppercase; letter-spacing: -.02em; color: #f2f2f2 !important; text-shadow: 0 10px 80px rgba(0, 0, 0, .55); }
.tr-title span:last-child { color: transparent; -webkit-text-stroke: 1.5px rgba(242, 242, 242, .9); }
/* play: a large ring that breathes */
.tr-play { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 16px; min-height: 0; padding: 0; border: 0; background: none; color: #f2f2f2; cursor: pointer; }
.tr-play i { position: relative; display: grid; place-items: center; width: clamp(84px, 9vw, 128px); aspect-ratio: 1; border-radius: 50%; background: rgba(242, 242, 242, .1); border: 1px solid rgba(242, 242, 242, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .5s cubic-bezier(.2, .7, .2, 1), background .4s, color .4s; }
.tr-play i::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(242, 242, 242, .5); animation: tr-ring 2.6s cubic-bezier(.2, .7, .2, 1) infinite; }
.tr-play svg { width: 34%; height: 34%; margin-left: 6%; fill: currentColor; }
.tr-play span { font: 400 11px/1 var(--k-font-mono, monospace); letter-spacing: .32em; text-transform: uppercase; text-shadow: 0 1px 10px #000; }
.tr-play:hover i, .tr-play:focus-visible i { transform: scale(1.08); background: #f2f2f2; color: #070707; }
@keyframes tr-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.tr-close { position: absolute; z-index: 5; top: 22px; right: 22px; min-height: 0; padding: 10px 16px; border: 1px solid rgba(242, 242, 242, .35); border-radius: 999px; background: rgba(0, 0, 0, .4); color: #f2f2f2; font: 400 11px/1 var(--k-font-mono, monospace); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s; }
/* playing */
.tr-cinema.is-playing .tr-copy, .tr-cinema.is-playing .tr-play { opacity: 0; pointer-events: none; }
.tr-cinema.is-playing .tr-copy { transform: translateY(20px); }
.tr-cinema.is-playing .tr-frame::after { opacity: 0; }
.tr-cinema.is-playing .tr-close { opacity: 1; pointer-events: auto; }
.tr-cinema.is-playing .tr-bg { filter: brightness(.12) blur(30px); }
@media (max-width: 760px) {
  html body .trailer-section.tr-cinema { display: block; min-height: 0 !important; padding: 0 0 28px !important; }
  .tr-frame { width: 100vw; }
  .tr-copy { position: relative; left: auto; bottom: auto; padding: 22px 20px 0; }
  .tr-title { font-size: 22vw !important; }
  .tr-play { top: calc(100vw * 3 / 8); }
  .tr-play span { display: none; }
}
@media all { :where(html[data-koan-motion="reduced"]) .tr-play i::after { animation: none; } }
html body .tr-cinema .tr-bg { max-width: none !important; }
@media (max-width: 760px) { html body .tr-cinema .tr-copy { left: 0 !important; margin: 0 !important; padding: 22px 20px 0 !important; max-width: none; } }
@media (max-width: 760px) { html body .tr-cinema .tr-copy { inset: auto !important; width: 100% !important; box-sizing: border-box; transform: none !important; } }

/* title in the KOΛN serif, not the condensed sans */
html body .tr-title { font: 400 clamp(48px, 7vw, 120px)/.95 var(--k-font-logo, 'Libre Caslon Display', Georgia, serif) !important; text-transform: none !important; letter-spacing: -.01em !important; }
html body .tr-title span:last-child { color: #f2f2f2 !important; -webkit-text-stroke: 0 !important; font-style: italic; padding-left: .6em; }
.tr-cover { object-position: 50% 55%; }
@media (max-width: 760px) { html body .tr-title { font-size: 16vw !important; } }

/* the trailer is widescreen: full width, 2.39:1 */
html body .tr-frame { width: 100vw !important; max-width: none; aspect-ratio: 2.39 / 1 !important; }
html body .trailer-section.tr-cinema { min-height: 0 !important; }
.tr-cover { object-position: 50% 50%; }
@media (max-width: 760px) { .tr-play { top: calc(100vw / 2.39 / 2) !important; } html body .tr-play i { width: 64px; } }

/* phone: a clean dark band — title, then the widescreen picture; no blurred copy behind */
@media (max-width: 760px) {
  html body .trailer-section.tr-cinema { display: flex !important; flex-direction: column; padding: 56px 0 0 !important; background: #070707; }
  html body .tr-cinema .tr-bg, .tr-cinema::before { display: none !important; }
  html body .tr-cinema .tr-copy { order: -1; padding: 0 20px 22px !important; }
  html body .tr-title { font-size: 13vw !important; display: block; }
  html body .tr-title span { display: inline; }
  html body .tr-title span:last-child { padding-left: .25em; }
  .tr-frame { box-shadow: none; }
  .tr-frame::after { background: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 50%) !important; }
  html body .tr-play { top: auto !important; bottom: calc(100vw / 2.39 / 2); transform: translate(-50%, 50%); }
  html body .tr-play i::after { display: none; }
  html body .tr-cinema .tr-close { top: 12px; right: 12px; }
}
@media (max-width: 760px) {
  html body .trailer-section.tr-cinema { padding: 56px 0 !important; }
  html body .tr-cinema .tr-copy { padding: 0 20px 28px !important; }
  .tr-cinema::after { content: ''; display: block; height: 0; }
}
@media (max-width: 760px) { html body .tr-play { bottom: calc(56px + 100vw / 2.39 / 2) !important; } }

/* the trailer is 16:9: full width at every screen size, height follows */
html body .tr-frame { width: 100vw !important; aspect-ratio: 16 / 9 !important; }
.tr-frame iframe { color-scheme: light; background: #000; }
@media (max-width: 760px) {
  html body .tr-play { bottom: calc(56px + 100vw * 9 / 32) !important; }
  .tr-cinema.is-playing .tr-copy { display: none; }
  html body .trailer-section.tr-cinema.is-playing { padding-top: 0 !important; }
  html body .tr-cinema.is-playing .tr-close { top: 12px; }
}

/* phone: the title band never changes — the same layout before and while playing; Close sits in the band, off the player */
@media (max-width: 760px) {
  html body .tr-cinema.is-playing .tr-copy { display: block !important; opacity: 1 !important; transform: none !important; }
  html body .trailer-section.tr-cinema.is-playing { padding: 56px 0 !important; }
  html body .tr-cinema .tr-close { top: 16px !important; right: 16px; }
}
.tr-cover { transform: scale(1.015); filter: contrast(1.04) brightness(.8); } .tr-cinema:hover .tr-cover { transform: scale(1); filter: contrast(1.04) brightness(.9); }

.tr-alt { position: absolute; z-index: 6; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 10px 16px; border: 1px solid rgba(242,242,242,.4); border-radius: 999px; background: rgba(0,0,0,.65); color: #f2f2f2; font: 400 11px/1 var(--k-font-mono, monospace); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }

/* While the teaser plays, the rest of the page goes still so the phone's GPU is all the video's */
html.k-media-live .hero-film-grain, html.k-media-live #particles, html.k-media-live .reading-progress { display: none !important; }
html.k-media-live body *:not(.tr-cinema):not(.tr-cinema *) { animation-play-state: paused !important; }