/* The cinema opens the homepage. The frame ornaments stay outside the video. */
.home-trailer {
  --trailer-ink: #fff6e9;
  --trailer-muted: #d4d3e5;
  --trailer-gold: #ffcf92;
  --trailer-cyan: #b6efff;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(36px, 5.5vw, 86px) 0;
  border-block: 1px solid #453856;
  scroll-margin-top: 76px;
  color: var(--trailer-ink);
  background:
    radial-gradient(ellipse at 78% 18%, #2c3965, transparent 53%),
    radial-gradient(ellipse at 67% 106%, #134553, transparent 55%),
    radial-gradient(ellipse at 20% 81%, #3b223b, transparent 45%),
    linear-gradient(128deg, #171221, #100f21 62%, #101726);
}
.home-trailer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 12% 18%, #ffdcad 0 1px, transparent 2px),
    radial-gradient(circle at 18% 71%, #aeecff 0 1px, transparent 2px),
    radial-gradient(circle at 31% 22%, #c7b4ff 0 1px, transparent 2px),
    radial-gradient(circle at 34% 80%, #ffd5a6 0 1px, transparent 2px),
    radial-gradient(circle at 40% 33%, #f7d1ff 0 1px, transparent 2px),
    radial-gradient(circle at 82% 11%, #b8dcff 0 1px, transparent 2px),
    radial-gradient(circle at 89% 91%, #d1deff 0 1px, transparent 2px),
    radial-gradient(circle at 94% 17%, #ffdcad 0 1px, transparent 2px),
    radial-gradient(circle at 96% 60%, #b1dfff 0 1px, transparent 2px),
    linear-gradient(143deg, transparent 39%, #b2d3ff13 48%, transparent 58%);
  pointer-events: none;
}
.home-trailer-wrap {
  display: grid;
  grid-template-columns: minmax(0, .44fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(25px, 4vw, 68px);
  width: min(1296px, calc(100% - 76px));
  margin-inline: auto;
}
.home-trailer-heading {
  min-width: 0;
  container-type: inline-size;
}
.home-trailer-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--trailer-gold);
  font: 750 11px/1.25 Inter, system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.home-trailer-kicker img {
  display: block;
  width: 32px;
  height: 32px;
  border: 1px solid #ffbe8175;
  border-radius: 7px;
  box-shadow: 0 0 20px #ffae6630;
}
.home-trailer-heading h1 {
  margin: 0;
  color: var(--trailer-gold);
  font: 800 clamp(18px, 2.35vw, 44px)/1.07 Syne, Inter, system-ui, sans-serif;
  font-size: clamp(18px, 9.05cqi, 54px);
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #6d4126, 0 4px 24px #ffad5630;
}
@supports (background-clip: text) {
  .home-trailer-heading h1 {
    background: linear-gradient(#fff0ca, #ffdca4 42%, #e1a06f 46%, #ffe2af 55%, #d88e64);
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 0 #593c39) drop-shadow(0 4px 14px #ffad562e);
  }
}
.home-trailer-credit {
  margin: 10px 0 0;
  color: var(--trailer-ink);
  font-size: clamp(13px, 1.18vw, 16px);
  font-weight: 700;
  line-height: 1.45;
}
.home-trailer-description {
  max-width: 34ch;
  margin: 15px 0 0;
  color: var(--trailer-muted);
  font-size: clamp(13px, 1.12vw, 16px);
  line-height: 1.65;
}
.home-trailer-listen {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  color: var(--trailer-cyan);
  font: 650 11px/1.35 Inter, system-ui, sans-serif;
}
.home-trailer-listen svg { width: 19px; height: 19px; flex: none; }
.home-trailer-projection {
  position: relative;
  min-width: 0;
}
.home-trailer-projection::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  width: 104%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid #afbadb38;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 59%, #a4b3e135 59.2% 59.4%, transparent 59.6% 65%, #c5a4ed26 65.2% 65.4%, transparent 65.6%),
    repeating-conic-gradient(from 8deg, #b1c4ed46 0 .25deg, transparent .25deg 10deg);
  box-shadow: 0 0 65px #b6b0fa1d, inset 0 0 42px #b6b0fa12;
  mask-image: radial-gradient(circle, transparent 57%, #000 60% 69%, transparent 72%);
  pointer-events: none;
}
.home-trailer-frame {
  --trailer-rail: clamp(14px, 2vw, 28px);
  position: relative;
  padding: 0 var(--trailer-rail);
  border: 1px solid #cba174;
  border-radius: 17px;
  background:
    repeating-linear-gradient(104deg, transparent 0 2px, #f2dcff09 3px 4px, transparent 5px 7px),
    radial-gradient(ellipse at 0% 0%, #694b4f, transparent 42%),
    radial-gradient(ellipse at 97% 100%, #285361, transparent 46%),
    linear-gradient(125deg, #272235, #1d1a32 63%, #222e47);
  box-shadow:
    inset 0 0 0 3px #161628,
    inset 0 0 0 4px #f5cc9854,
    0 0 0 4px #10101d,
    0 0 0 5px #86789e70,
    0 0 42px #8bb8ff30,
    0 19px 52px #050511a6;
}
.home-trailer-frame::before, .home-trailer-frame::after {
  content: "";
  position: absolute;
  inset-block: 72px 67px;
  width: 5px;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, currentColor 0 1px, transparent 1px 7px, currentColor 7px 8px, transparent 8px 16px);
  pointer-events: none;
}
.home-trailer-frame::before { left: 9px; color: #ffcf9299; }
.home-trailer-frame::after { right: 9px; color: #b6efffa6; }
.home-trailer-rim, .home-trailer-nameplate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 45px;
  color: #f0e6ef;
  font: 700 10px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-trailer-reel, .home-trailer-duration {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-trailer-reel > span {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border: 1px solid var(--trailer-gold);
  background: #a85d2d;
  box-shadow: 0 0 12px #ffc18c;
}
.home-trailer-duration time {
  padding: 4px 7px;
  border: 1px solid #b6efff4d;
  border-radius: 3px;
  color: var(--trailer-cyan);
  background: #14192c;
  font-variant-numeric: tabular-nums;
}
.home-trailer-screen {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  background: #03060b;
  box-shadow: 0 0 0 3px #0a0c1a, 0 0 0 4px #b0a0b4, 0 0 0 6px #ffffff14;
}
.home-trailer-poster, .home-trailer-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #03060b;
  object-fit: contain;
}
.home-trailer-launch {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, #03041045 0%, transparent 60%);
  text-decoration: none;
}
.home-trailer-play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 10px 17px 10px 12px;
  border: 1px solid #ffd3a6;
  border-radius: 100px;
  background: linear-gradient(130deg, #ffcc98, #fa9858);
  color: #27110a;
  box-shadow: inset 0 1px #fff9, 0 3px #914a30, 0 10px 34px #04040ad9;
  font: 800 14px/1.2 Inter, system-ui, sans-serif;
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-trailer-launch:hover .home-trailer-play {
  transform: translateY(-2px);
  box-shadow: inset 0 1px #fff9, 0 5px #914a30, 0 11px 38px #04040ad9;
}
.home-trailer-launch:focus-visible, .home-trailer-video:focus-visible {
  outline: 3px solid var(--trailer-cyan);
  outline-offset: -6px;
  border-radius: 0;
}
.home-trailer-status {
  margin: 14px 0 0;
  color: var(--trailer-gold);
  font-size: 13px;
}
.home-trailer-status:empty {
  position: absolute;
  overflow: hidden;
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: 0;
}
.home-trailer-frame:has(.home-trailer-video:not([hidden])) .home-trailer-screen { z-index: 3; }
.home-trailer-corners { position: absolute; }
.home-trailer-ornaments {
  position: absolute;
  z-index: 2;
  inset: 32px 12px;
  pointer-events: none;
}
.home-trailer-ornaments svg {
  position: absolute;
  display: block;
  width: clamp(29px, 4.7vw, 67px);
  height: auto;
  overflow: visible;
  color: var(--trailer-gold);
  filter: drop-shadow(0 0 5px #ffd7a36b);
}
.home-trailer-ornaments svg:nth-child(1) { inset: 0 auto auto 0; }
.home-trailer-ornaments svg:nth-child(2) { inset: 0 0 auto auto; transform: scaleX(-1); }
.home-trailer-ornaments svg:nth-child(3) { inset: auto auto 0 0; transform: scaleY(-1); }
.home-trailer-ornaments svg:nth-child(4) { inset: auto 0 0 auto; transform: rotate(180deg); }
.home-trailer-ornaments svg:nth-child(2), .home-trailer-ornaments svg:nth-child(3) {
  color: var(--trailer-cyan);
  filter: drop-shadow(0 0 5px #b6efff6b);
}
.home-trailer-nameplate {
  justify-content: center;
  min-height: 43px;
  color: var(--trailer-gold);
}
.home-trailer-nameplate strong {
  padding: 4px 10px;
  border: 1px solid #ffbb7c59;
  border-radius: 4px;
  background: #161524;
  box-shadow: inset 0 1px #f0d2af20;
  font: 800 clamp(10px, 1.2vw, 13px)/1.2 Syne, Inter, sans-serif;
  letter-spacing: .14em;
}
.home-trailer-vent {
  display: flex;
  align-items: center;
  width: clamp(23px, 8vw, 92px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #d0a88799);
}
.home-trailer-vent::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-left: auto;
  transform: rotate(45deg);
  background: var(--trailer-gold);
}
.home-trailer-vent:last-child { transform: scaleX(-1); }

.home-experience .experience-hero .home-universe-title {
  max-width: 650px;
  margin: 0 0 22px;
  color: var(--hx-ink);
  font: 700 clamp(58px, 6.9vw, 94px)/1.02 Inter, system-ui, sans-serif;
  letter-spacing: -.067em;
  text-transform: none;
}
.home-universe-title em {
  color: var(--hx-violet);
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  letter-spacing: -.055em;
}
@media (max-width: 1000px) {
  .home-experience .experience-hero .home-universe-title { font-size: clamp(54px, 7.4vw, 72px); }
}
@media (max-width: 920px) {
  .home-trailer { padding-block: 24px 37px; }
  .home-trailer-wrap { grid-template-columns: minmax(0, 1fr); gap: 16px; width: min(690px, calc(100% - 42px)); }
  .home-trailer-kicker { margin-bottom: 9px; }
  .home-trailer-heading h1 {
    font-size: clamp(21px, 8.4vw, 43px);
    font-size: clamp(21px, 8.9cqi, 43px);
  }
  .home-trailer-credit { margin-top: 5px; }
  .home-trailer-description { max-width: 62ch; margin-top: 7px; }
  .home-trailer-listen { margin-top: 9px; }
  .home-trailer-projection::before { width: 106%; }
}
@media (max-width: 800px) {
  .home-experience .experience-hero .home-universe-title {
    max-width: 500px;
    margin-bottom: 20px;
    font-size: clamp(51px, 12.5vw, 72px);
    line-height: 1.04;
  }
}
@media (max-width: 500px) {
  .home-trailer-wrap { width: calc(100% - 34px); }
  .home-trailer-kicker { font-size: 10px; }
  .home-trailer-kicker img { width: 27px; height: 27px; }
  .home-trailer-listen svg { width: 16px; height: 16px; }
  .home-trailer-frame { --trailer-rail: 10px; border-radius: 12px; }
  .home-trailer-frame::before, .home-trailer-frame::after { width: 2px; inset-block: 49px 43px; }
  .home-trailer-frame::before { left: 4px; }
  .home-trailer-frame::after { right: 4px; }
  .home-trailer-rim { min-height: 36px; }
  .home-trailer-nameplate { min-height: 34px; }
  .home-trailer-ornaments { inset: 28px 4px; }
  .home-trailer-play { min-height: 46px; font-size: 13px; }
}
@media (forced-colors: active) {
  .home-trailer-heading h1 { background: none; color: CanvasText; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-trailer-play { transition: none; }
  .home-trailer-launch:hover .home-trailer-play { transform: none; }
}