.cinema {
  --header: 84px;
  --travel: 0;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --ice: var(--palette-signal-light);
  --gate-size: clamp(180px, 25vw, 390px);
  background: var(--palette-cinema);
  color: #f6f7ff;
}
.cinema--motion {
  min-height: 200svh;
}
.cinema__stage {
  position: relative;
}
.cinema--motion .cinema__stage {
  position: sticky;
  top: var(--header);
}
.cinema__layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: min(750px, calc(100svh - var(--header)));
  padding-block: clamp(2rem, 5vw, 5rem);
}
.cinema__eyebrow {
  color: var(--ice);
  font-size: .875rem;
  font-weight: 650;
  margin-bottom: 1rem;
}
.cinema h1 {
  max-width: 13ch;
  font-size: clamp(2.5rem, 5.1vw, 5rem);
  line-height: 1.07;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.cinema__copy > p:not(.cinema__eyebrow) {
  color: #c3cee2;
  max-width: 36ch;
  margin-top: 1.3rem;
}
.cinema__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) 1rem;
  margin-top: 1.5rem;
}
.cinema__actions .button {
  background: var(--ice);
  border-color: var(--ice);
  color: var(--palette-cinema);
}
.cinema__actions .button:hover {
  background: #e6faff;
  border-color: #e6faff;
}
.cinema__link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  font-size: .88rem;
  font-weight: 650;
}
.cinema__link:hover {
  text-decoration: underline;
  text-underline-offset: .25em;
}
.cinema :focus-visible {
  outline-color: var(--ice);
}
.cinema__figure {
  min-width: 0;
  margin: 0;
}
.cinema__viewport {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: clamp(280px, 39vw, 550px);
  border-radius: 12px;
  border: 1px solid #354563;
  background: radial-gradient(ellipse at 56% 47%, #26214a, #101a31 48%, #080d1b 76%);
  perspective: 710px;
}
.cinema__light {
  position: absolute;
  inset: -14%;
  background: conic-gradient(from 132deg at 54% 53%, transparent 0 20%, #8449ff42 26%, transparent 39% 56%, #53c7ff38 67%, transparent 76%);
  transform: translateX(calc(var(--travel) * 10%)) rotate(calc(var(--travel) * 26deg));
  mask-image: radial-gradient(ellipse, var(--palette-black) 20%, transparent 65%);
}
.cinema__space {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(7deg + var(--tilt-x))) rotateY(calc(-13deg + var(--tilt-y) + var(--travel) * 20deg));
}
.cinema__floor {
  position: absolute;
  inset: 44% -45% -82%;
  transform: translateY(12%) rotateX(67deg);
  transform-origin: center top;
  background: repeating-linear-gradient(90deg, transparent 0 55px, #83aafa30 56px 57px),
              repeating-linear-gradient(0deg, transparent 0 36px, #83aafa29 37px 38px);
  mask-image: linear-gradient(transparent, var(--palette-black) 25%, transparent 77%);
}
.cinema__gate {
  position: absolute;
  width: var(--gate-size);
  height: calc(var(--gate-size) * .9);
  left: 50%;
  top: 48%;
  border: 2px solid var(--gate-color);
  border-radius: 11px;
  box-shadow: 0 0 20px color-mix(in srgb, var(--gate-color) 43%, transparent), inset 0 0 25px color-mix(in srgb, var(--gate-color) 30%, transparent);
  transform: translate(-50%, -50%) translateX(var(--gate-x)) translateZ(calc(var(--gate-z) + var(--travel) * 330px));
  opacity: .76;
}
.cinema__gate::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  opacity: .28;
  border-radius: 5px;
}
.cinema__gate span {
  position: absolute;
  left: 13px;
  top: 12px;
  color: #f2f5ff;
  background: #11182f;
  padding: .25rem .55rem;
  font: 650 clamp(.65rem, 1.1vw, .95rem)/1.3 var(--font-body);
}
.cinema__gate--search {
  --gate-color: #b4a0ff;
  --gate-z: 65px;
  --gate-x: -20%;
  color: var(--gate-color);
}
.cinema__gate--program {
  --gate-color: #8cb7ff;
  --gate-z: -140px;
  --gate-x: 4%;
  color: var(--gate-color);
}
.cinema__gate--admissions {
  --gate-color: #85f0ff;
  --gate-z: -335px;
  --gate-x: 28%;
  color: var(--gate-color);
}
.cinema[data-beat="0"] .cinema__gate--search,
.cinema[data-beat="1"] .cinema__gate--program,
.cinema[data-beat="2"] .cinema__gate--admissions {
  opacity: 1;
}
.cinema__caption {
  padding-top: .9rem;
}
.cinema__caption ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #bbc9e5;
  font-size: .78rem;
}
.cinema[data-beat="0"] li:nth-child(1),
.cinema[data-beat="1"] li:nth-child(2),
.cinema[data-beat="2"] li:nth-child(3) {
  color: var(--ice);
  font-weight: 750;
}
.cinema__meter {
  display: block;
  height: 2px;
  background: #334364;
  margin-top: .65rem;
}
.cinema__meter::after {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #b4a0ff, var(--ice));
  transform: scaleX(calc(.12 + var(--travel) * .88));
  transform-origin: left;
}
@media (max-width: 900px) {
  .cinema {
    --gate-size: clamp(145px, 30vw, 270px);
  }
  .cinema__layout {
    gap: 1.5rem;
  }
}
@media (max-width: 680px) {
  .cinema {
    --gate-size: clamp(140px, 44vw, 250px);
  }
  .cinema--motion {
    min-height: 165svh;
  }
  .cinema__layout {
    grid-template-columns: 1fr;
    gap: 1.05rem;
    min-height: 0;
    padding-block: 1.4rem;
  }
  .cinema h1 {
    max-width: 16ch;
    font-size: clamp(2rem, 8vw, 3.4rem);
  }
  .cinema__eyebrow {
    margin-bottom: .55rem;
  }
  .cinema__copy > p:not(.cinema__eyebrow) {
    margin-top: .6rem;
  }
  .cinema__actions {
    margin-top: .75rem;
  }
  .cinema__actions .button {
    min-height: 46px;
    gap: .6rem;
    padding-inline: .75rem;
  }
  .cinema__viewport {
    height: clamp(180px, 46vw, 300px);
  }
}
@media (max-width: 620px) {
  .cinema {
    --header: 72px;
  }
}
@media (max-height: 620px) and (orientation: landscape) {
  .cinema--motion {
    min-height: 0;
  }
  .cinema--motion .cinema__stage {
    position: relative;
    top: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinema--motion {
    min-height: 0;
  }
  .cinema--motion .cinema__stage {
    position: relative;
    top: auto;
  }
  .cinema__meter {
    display: none;
  }
}
.cinema__gate svg {
  position: absolute;
  inset: 25% 26%;
  width: 48%;
  height: 50%;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}
.cinema__gate--search {
  opacity: clamp(0, calc(1.35 - var(--travel) * 2.65), .86);
}
.cinema__gate--program {
  opacity: clamp(.08, calc(2.5 - var(--travel) * 2.5), .86);
}
.cinema__gate--admissions {
  opacity: calc(.6 + var(--travel) * .4);
}
@media (min-width: 681px) {
  .cinema--motion .cinema__layout {
    min-height: calc(100svh - var(--header));
  }
}