/* V2.1 opening sequence. Every selector is confined to the home-page hero. */
.hero.hero-cinema {
  min-height: 720px;
  height: 100svh;
  max-height: 1150px;
  background: #102224;
  color: #f1f3ec;
}

/* The poster remains beneath the film while its first frame loads. */
.hero-cinema .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
}
.hero-cinema .hero-poster,
.hero-cinema .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-cinema .hero-poster { z-index: -1; }
.hero-cinema .hero-layer {
  z-index: 0;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.25, .1, .25, 1);
}
.hero-cinema .hero-layer.is-active { opacity: 1; }
.hero.hero-cinema::after {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, #07171099 0%, #0717103d 46%, #0717100a 80%),
    linear-gradient(0deg, #07120ff0 0%, #07120f96 20%, #07120f08 66%, #07120f42 100%);
}

.hero-cinema .hero-content {
  position: relative;
  z-index: 2;
  width: min(100% - var(--page-gutter) * 2, 1600px);
  height: 100%;
  padding-top: 132px;
  padding-bottom: clamp(165px, 20svh, 210px);
}


.hero-cinema h1.display {
  max-width: 900px;
  font-size: clamp(82px, 9.2vw, 140px);
  line-height: .94;
  letter-spacing: -.022em;
  text-wrap: initial;
}
.hero-cinema h1.display span { white-space: nowrap; }
.hero-cinema .hero-copy-row {
  align-items: flex-end;
  margin-top: 29px;
  gap: 35px;
}
.hero-cinema .hero-description {
  max-width: 335px;
  font-size: 16px;
  line-height: 1.6;
  color: #e2e9e1;
}
.hero-cinema .hero-play {
  flex-shrink: 0;
  gap: 17px;
  min-height: 84px;
  padding: 10px 23px 10px 10px;
  border: 1px solid #f1f3ec59;
  border-radius: 3px;
  background: #0a160e3d;
  transition: border-color .25s, background .25s;
}
.hero-cinema .hero-play .round-button {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  font-size: 17px;
  background: #d6f373;
  color: #15200b;
}
.hero-cinema .hero-play strong {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.2;
}
.hero-cinema .hero-play small { font-size: 11px; color: #d9e1d7; }
.hero-cinema .hero-play:hover {
  border-color: #d6f373;
  background: #0a160e80;
}
.hero-cinema .hero-play:hover .round-button { transform: scale(1.04); }

.hero-cinema .hero-bottom {
  z-index: 3;
  bottom: 28px;
  gap: 28px;
  padding-top: 16px;
  border-top: 1px solid #f1f3ec38;
}
.hero-cinema .hero-switches { gap: 24px; align-items: stretch; }
.hero-cinema .hero-scene {
  gap: 10px;
  padding: 7px 0 12px;
  min-height: 58px;
  color: #c4d0c4;
  transition: color .2s;
}
.hero-cinema .hero-scene img {
  width: 61px;
  height: 37px;
  margin: 0;
  opacity: .56;
  transition: opacity .25s;
}
.hero-cinema .hero-scene:hover,
.hero-cinema .hero-scene[aria-pressed=true] { color: #f1f3ec; }
.hero-cinema .hero-scene:hover img,
.hero-cinema .hero-scene[aria-pressed=true] img { opacity: 1; }
.hero-cinema .hero-scene[aria-pressed=true]::after { content: none; }
.hero-cinema .scene-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  background: #f1f3ec24;
}
.hero-cinema .scene-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #d6f373;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .24s linear;
}
.hero-cinema .hero-scene[aria-pressed=true] .scene-progress { background: #d6f37366; }




.hero-cinema .media-fallback { z-index: 4; }

@media (prefers-reduced-motion: no-preference) {
  
  .hero-cinema h1.display {
    animation: cinema-content-in .95s .14s cubic-bezier(.22, 1, .36, 1) both;
  }
  .hero-cinema .hero-copy-row {
    animation: cinema-content-in .95s .25s cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes cinema-content-in {
    from { opacity: 0; transform: translateY(13px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 1023px) {
  .hero.hero-cinema { min-height: 690px; }
  .hero-cinema h1.display { font-size: clamp(78px, 10.6vw, 108px); }
  .hero-cinema .hero-content { padding-bottom: 164px; }
  .hero-cinema .hero-copy-row { gap: 26px; }
  .hero-cinema .hero-description { max-width: 300px; }
  .hero-cinema .hero-play { padding-right: 17px; gap: 13px; }
  .hero-cinema .hero-play .round-button { width: 56px; height: 56px; }
  .hero-cinema .hero-switches { gap: 19px; }
  .hero-cinema .hero-scene img { width: 49px; height: 32px; }
}

@media (max-width: 767px) {
  .hero.hero-cinema { min-height: 680px; max-height: 1050px; }
  .hero-cinema .hero-media,
  .hero-cinema .hero-poster { object-position: 53% center; }
  .hero.hero-cinema::after {
    background:
      linear-gradient(90deg, #07171045 0%, #0717100a 100%),
      linear-gradient(0deg, #07120ff2 0%, #07120fb8 25%, #07120f2e 69%, #07120f59 100%);
  }
  .hero-cinema .hero-content { padding-top: 128px; padding-bottom: 156px; }
  
  
  .hero-cinema h1.display { font-size: clamp(56px, 15.8vw, 108px); line-height: .96; }
  .hero-cinema .hero-copy-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
    margin-top: 23px;
  }
  .hero-cinema .hero-description { font-size: 14px; line-height: 1.6; max-width: 305px; }
  .hero-cinema .hero-play { min-height: 69px; padding: 8px 17px 8px 8px; gap: 13px; }
  .hero-cinema .hero-play .round-button { width: 51px; height: 51px; font-size: 15px; }
  .hero-cinema .hero-play strong { font-size: 14px; margin-bottom: 5px; }
  .hero-cinema .hero-play small { font-size: 10px; }
  .hero-cinema .hero-bottom { bottom: 25px; gap: 14px; padding-top: 14px; align-items: flex-end; }
  .hero-cinema .hero-switches { flex: 1; gap: 16px; }
  .hero-cinema .hero-scene {
    display: block;
    min-width: 0;
    width: 70px;
    padding: 0 0 10px;
    font-size: 10px;
    line-height: 1.35;
  }
  .hero-cinema .hero-scene img { width: 70px; height: 41px; margin-bottom: 8px; }
  
  
}

@media (max-width: 374px) {
  .hero-cinema .hero-content { padding-bottom: 153px; }
  
  .hero-cinema h1.display { font-size: 56px; }
  .hero-cinema .hero-description { max-width: 270px; }
  .hero-cinema .hero-switches { gap: 12px; }
  .hero-cinema .hero-scene { width: 62px; font-size: 9px; }
  .hero-cinema .hero-scene img { width: 62px; height: 37px; }
  .hero-cinema .hero-bottom { bottom: 21px; gap: 10px; }
}

/* Compact laptop and phone landscape: retain space for the film and controls. */
@media (max-height: 700px) and (min-width: 768px) {
  .hero.hero-cinema { min-height: 580px; }
  .hero-cinema .hero-content { padding-top: 120px; padding-bottom: 140px; }
  .hero-cinema h1.display { font-size: clamp(78px, 8.4vw, 108px); }
  
  .hero-cinema .hero-copy-row { margin-top: 22px; }
  .hero-cinema .hero-play { min-height: 74px; }
  .hero-cinema .hero-play .round-button { width: 52px; height: 52px; }
  .hero-cinema .hero-bottom { bottom: 22px; }
}
@media (max-height: 500px) and (min-width: 568px) {
  .hero.hero-cinema { min-height: 550px; }
  .hero-cinema .hero-content { padding-top: 116px; padding-bottom: 138px; }
  .hero-cinema h1.display { font-size: 76px; }
  
  .hero-cinema .hero-copy-row { flex-direction: row; align-items: flex-end; gap: 20px; margin-top: 20px; }
  .hero-cinema .hero-description { max-width: 245px; font-size: 13px; }
  .hero-cinema .hero-play { min-height: 64px; gap: 10px; padding: 7px 12px 7px 7px; }
  .hero-cinema .hero-play .round-button { width: 48px; height: 48px; }
  .hero-cinema .hero-play strong { font-size: 13px; }
  .hero-cinema .hero-play small { font-size: 9px; }
  .hero-cinema .hero-bottom { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinema *,
  .hero-cinema *::before,
  .hero-cinema *::after { animation: none !important; transition: none !important; }
  .hero-cinema h1.display,
  .hero-cinema .hero-copy-row { opacity: 1; transform: none; }
}
@media print {
  .hero.hero-cinema { height: auto; min-height: 550px; max-height: none; }
  .hero-cinema .hero-content { padding-block: 100px; }
}