/* The opening is a single cinematic frame, cut into six moving image strips.
   Only the strips move. The stage remains flat and full bleed throughout. */
.cinema-stage { perspective: none; isolation: isolate; background: var(--black); }
.cinema-frame { transform: none; clip-path: none; z-index: 1; }
.cinema-image { transform: none; }
.hero-underlay, .hero-shutters { display: none; }

.cinematic-motion .cinema-opening {
  height: 205svh;
  min-height: calc(640px + 105svh);
  background: var(--brand-blue);
}
.cinematic-motion .cinema-frame { background: transparent; }
.cinematic-motion .cinema-image { visibility: hidden; }
.cinematic-motion .cinema-shade { display: none; }
.cinematic-motion .hero-underlay {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #061529;
  pointer-events: none;
}
.brand-aperture {
  position: absolute;
  inset: 0;
  background: var(--brand-blue);
  color: white;
  overflow: hidden;
  clip-path: inset(var(--brand-aperture-y, 16%) var(--brand-aperture-x, 48%));
  will-change: clip-path;
  isolation: isolate;
}
.brand-logo-stage {
  position: absolute;
  inset: 88px 0 auto;
  height: calc(100svh - 146px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}
.hero-monogram.hero-brandmark {
  display: block;
  width: min(82vw, 90svh);
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 120px);
  object-fit: contain;
  padding: 0;
  margin: 0;
  transform: translate3d(0, var(--hero-mark-y, 70px), 0) scale(var(--hero-mark-scale, 1.24));
  opacity: var(--hero-mark-opacity, 0);
  transform-origin: center;
  will-change: transform, opacity;
}
.brand-light {
  position: absolute;
  inset: -20% -40%;
  z-index: 2;
  background: linear-gradient(115deg, transparent 30%, #ffffff0a 46%, #ffffff17 50%, transparent 68%);
  transform: translate3d(var(--brand-light-x, -90%), 0, 0);
  mix-blend-mode: screen;
  pointer-events: none;
}
.brand-registration {
  position: absolute;
  inset: 120px var(--space) auto;
  height: calc(100svh - 196px);
  z-index: 3;
  transform: scale(var(--brand-frame-scale, 1.12));
  opacity: var(--brand-detail-opacity, 0);
}
.brand-registration i { position: absolute; width: 25px; height: 25px; border-color: #ffffff7a; }
.brand-registration i:nth-child(1) { top: 0; left: 0; border-top: 1px solid #ffffff7a; border-left: 1px solid #ffffff7a; }
.brand-registration i:nth-child(2) { top: 0; right: 0; border-top: 1px solid #ffffff7a; border-right: 1px solid #ffffff7a; }
.brand-registration i:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid #ffffff7a; border-left: 1px solid #ffffff7a; }
.brand-registration i:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid #ffffff7a; border-right: 1px solid #ffffff7a; }
.brand-caption-line {
  position: absolute;
  left: var(--space);
  right: var(--space);
  top: calc(100svh - 56px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #ffffffb8;
  font-size: 8px;
  letter-spacing: .15em;
  opacity: var(--brand-detail-opacity, 0);
}
/* The next section naturally passes over the blue frame; scrolling stays native. */
.cinematic-motion .home-page .manifesto {
  margin-top: -44px;
  z-index: 2;
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -18px 70px #04132918;
}
.cinematic-motion .hero-shutters {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-shutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--strip) * 100% / 6);
  /* One-pixel overlap avoids bright hairlines at fractional pixel boundaries. */
  width: calc(100% / 6 + 1px);
  overflow: hidden;
  will-change: transform;
}
.hero-shutter > img, .hero-shutter::after {
  position: absolute;
  inset: 0 auto 0 calc(var(--strip) * var(--hero-width, 100vw) / -6);
  width: var(--hero-width, 100vw);
  max-width: none;
  height: 100%;
}
.hero-shutter > img {
  object-fit: cover;
  object-position: var(--featured-focus, 50% 50%) !important;
  filter: saturate(.62) brightness(.88);
}
.hero-shutter::after {
  content: '';
  background: linear-gradient(0deg,#080d0bcf 1%,#080d0b80 32%,transparent 77%),linear-gradient(90deg,#080d0b59,transparent 70%);
}
.hero-shutter:nth-child(1) { transform: translate3d(0, var(--shutter-0, 0%), 0); }
.hero-shutter:nth-child(2) { transform: translate3d(0, var(--shutter-1, 0%), 0); }
.hero-shutter:nth-child(3) { transform: translate3d(0, var(--shutter-2, 0%), 0); }
.hero-shutter:nth-child(4) { transform: translate3d(0, var(--shutter-3, 0%), 0); }
.hero-shutter:nth-child(5) { transform: translate3d(0, var(--shutter-4, 0%), 0); }
.hero-shutter:nth-child(6) { transform: translate3d(0, var(--shutter-5, 0%), 0); }
.cinematic-motion .cinema-frame > :is(.cinema-title, .cinema-kicker, .cinema-bottom, .scroll-cue, .frame-corner) {
  z-index: 2;
  opacity: var(--hero-content-opacity, 1);
  transform: translate3d(0, var(--hero-content-y, 0px), 0);
}
.cinema-frame[inert] { pointer-events: none; }

@media (max-width: 700px) {
  .cinematic-motion .cinema-opening { height: 175svh; min-height: calc(690px + 75svh); }
  .cinema-title { font-size: 20.6vw; line-height: .9; }
  .hero-shutter > img { object-position: var(--featured-focus, 50% 50%) !important; }
  .hero-shutter::after { background: linear-gradient(0deg,#080d0bf5 0,#080d0bb3 30%,transparent 83%); }
  .brand-logo-stage { inset: 80px 0 auto; height: calc(100svh - 160px); }
  .hero-monogram.hero-brandmark { width: min(108vw, 72svh); max-width: none; max-height: 72svh; }
  .brand-registration { inset: 108px 22px auto; height: calc(100svh - 204px); }
  .brand-registration i { width: 16px; height: 16px; }
  .brand-caption-line { top: calc(100svh - 80px); left: 22px; right: 22px; font-size: 7px; letter-spacing: .08em; }
  .cinematic-motion .home-page .manifesto { margin-top: -24px; border-radius: 24px 24px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-underlay, .hero-shutters { display: none !important; }
  .cinematic-motion .cinema-image { visibility: visible; }
  .cinematic-motion .cinema-shade { display: block; }
  .cinematic-motion .home-page .manifesto { margin-top: 0; border-radius: 0; box-shadow: none; }
}

/* Featured-film layout; all layers share one crop so the image stays aligned. */
.cinema-opening .cinema-image img { object-position: var(--featured-focus, 50% 50%) !important; }
.cinema-title.hero-film-title { font-size: clamp(112px, 18.4vw, 300px); bottom: 222px; }
.hero-video { color: var(--paper); text-align: left; background: none; border: 0; border-top: 1px solid #fff6; cursor: pointer; }
.hero-video strong { transition: color .25s; }
.hero-video:hover strong { color: #9cccff; }
.hero-video > span:last-child svg { width: 14px; height: 14px; fill: currentColor; stroke: none; transform: none; }
.hero-premiere time { white-space: nowrap; }
@media (max-width: 700px) {
  .cinema-title.hero-film-title { font-size: 22vw; bottom: 255px; }
  .hero-intent .hero-premiere { font-size: 12px; line-height: 1.75; }
  .hero-video { width: 108px; }
  .hero-video .eyebrow { font-size: 7px; line-height: 1.7; }
  .hero-video strong { font-size: 24px; line-height: 1.05; margin: 7px 0; }
  .hero-video > span:last-child { display: flex; gap: 10px; }
  .hero-video > span:last-child svg { display: block; width: 10px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video strong { transition: none; }
}