.studio-trailer {
  grid-column: 1 / -1;
  position: relative;
  min-width: 0;
  margin: 0;
  scroll-margin-top: 96px;
  border: 1px solid rgba(192, 174, 255, .30);
  background: #0b0c1e;
  box-shadow: 0 24px 80px rgba(2, 2, 11, .55), 0 0 45px rgba(116, 74, 242, .13);
}

.studio-trailer[hidden],
.studio-trailer [hidden] { display: none; }

.trailer-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: #050510;
}

.trailer-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.trailer-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(18, 7, 31, .12), rgba(9, 7, 22, .37));
}

.trailer-start {
  display: grid;
  place-items: center;
  width: clamp(58px, 10vw, 104px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #ffd99b;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, rgba(96, 58, 140, .96), rgba(21, 15, 43, .96) 76%);
  color: #fff1d9;
  box-shadow: inset 0 0 24px rgba(179, 122, 255, .30), 0 0 0 7px rgba(12, 9, 32, .48), 0 0 42px rgba(169, 105, 251, .55);
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}

.trailer-start svg { width: 44%; height: auto; margin-inline-start: 3%; }

@media (hover: hover) {
  .trailer-start:hover {
    transform: scale(1.07);
    box-shadow: inset 0 0 30px rgba(179, 122, 255, .47), 0 0 0 7px rgba(12, 9, 32, .54), 0 0 52px rgba(169, 105, 251, .75);
  }
}

.trailer-caption {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, .8fr);
  align-items: center;
  gap: 22px;
  padding: 18px clamp(16px, 3.3vw, 48px);
  border-top: 1px solid rgba(192, 174, 255, .26);
  background: linear-gradient(106deg, #17112c, #111326 55%, #0d1021);
}

.trailer-caption::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: min(33%, 340px);
  height: 1px;
  background: linear-gradient(90deg, var(--amber), #a879ff 56%, transparent);
}

.trailer-title h3 {
  margin: 5px 0 0;
  font-size: clamp(21px, 3vw, 40px);
  font-weight: 760;
  line-height: 1.06;
  letter-spacing: -.05em;
}

.trailer-title .kicker {
  font-size: 10px;
  letter-spacing: .19em;
}

.trailer-controls {
  display: grid;
  grid-template-columns: 44px minmax(24px, 1fr) auto 44px 44px;
  align-items: center;
  gap: 7px;
}

.trailer-controls:has([data-trailer="fullscreen"][hidden]) {
  grid-template-columns: 44px minmax(24px, 1fr) auto 44px;
}

.trailer-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(190, 171, 251, .27);
  border-radius: 9px;
  background: rgba(185, 162, 255, .07);
  color: var(--text);
  cursor: pointer;
}

.trailer-control:hover { color: #ffdaa8; border-color: rgba(255, 205, 145, .58); }
.trailer-control svg { display: block; }
.studio-trailer button:focus-visible,
.studio-trailer input:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.trailer-progress {
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.trailer-progress:disabled { cursor: default; }
.trailer-progress::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 9px;
  background: linear-gradient(to right, #dbb3ff 0%, var(--amber) var(--progress, 0%), #4f4669 var(--progress, 0%));
}
.trailer-progress::-moz-range-track { height: 4px; border-radius: 9px; background: #4f4669; }
.trailer-progress::-moz-range-progress { height: 4px; border-radius: 9px; background: var(--amber); }
.trailer-progress::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border: 1px solid #ffe2b7;
  border-radius: 50%;
  background: var(--amber);
}
.trailer-progress::-moz-range-thumb { width: 12px; height: 12px; border: 1px solid #ffe2b7; border-radius: 50%; background: var(--amber); }
.trailer-time { color: #dbd3ed; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trailer-status { grid-column: 1 / -1; margin: 0; color: #f6d5a7; font-size: 14px; }
.trailer-status a { text-decoration: underline; }

.studio-trailer:fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 0;
  background: #050510;
}

.studio-trailer:fullscreen .trailer-stage { flex: 1; min-height: 0; aspect-ratio: auto; }
.studio-trailer:fullscreen .trailer-video { position: absolute; inset: 0; }

@media (max-width: 720px) {
  .trailer-caption { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 13px 14px; }
  .trailer-title h3 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .trailer-start { transition: none; }
  .trailer-start:hover { transform: none; }
}