/* A single brand lockup travels from the opening screen into the poster. */
.v03 .intro-stage { position: relative; }
.v03.intro-active .concept { position: sticky; top: 0; }
.v03.intro-active .content > header { z-index: 4; }
.v03.intro-active .content > header,
.v03.intro-active .night-heading,
.v03.intro-active .night-bottom * { animation: none; }
.intro-brand-slot { position: relative; flex: none; }
.v03.intro-active .intro-brand-slot > .brands { position: absolute; top: 0; left: 0; width: max-content; transform-origin: 0 0; will-change: auto; }
.v03.intro-active .night-heading,
.v03.intro-active .night-bottom,
.v03.intro-active .live-dot {
  opacity: var(--intro-content, 0);
  transform: translate3d(0, var(--intro-lift, 18px), 0);
}
.v03.intro-active .backdrop img {
  transform: scale(var(--intro-photo-scale, 1.035));
  transform-origin: 65% 45%;
}
.intro-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #0a2d21;
  opacity: var(--intro-cover, 1);
  pointer-events: none;
}
.intro-caption, .intro-scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  color: #c3cec1;
  font: 500 10px/1.5 Manrope, Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: var(--intro-cue, 1);
}
.intro-caption { pointer-events: none; }
.intro-scroll {
  border: 0;
  padding: 16px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  letter-spacing: .12em;
  font-size: 9px;
}
.intro-scroll svg { width: 15px; height: 24px; color: var(--lime); }
.intro-ball {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 14px 14px #041a1426);
}
.intro-ball canvas { display: none; width: 100%; height: 100%; }
.intro-ball.is-rendered canvas { display: block; }
.intro-ball.is-rendered .intro-ball-fallback { display: none; }
.intro-ball-fallback {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 30% 26%, #d3e242, #a5c022 50%, #4f6508 95%);
  box-shadow: inset -2px -3px 8px #42530860;
}
.intro-ball-fallback:after {
  content: '';
  position: absolute;
  width: 77%;
  height: 115%;
  left: 30%;
  top: -16%;
  border: 2px solid #e3e5a9;
  border-radius: 50%;
  transform: rotate(-30deg);
}
.intro-pending .v03 .concept { background: #0a2d21; }
.intro-pending .v03 .content { visibility: hidden; }
.intro-pending .v03 .backdrop { opacity: 0; }
@media (min-width:700px) {
  .intro-caption { font-size: 11px; letter-spacing: .28em; }
  .intro-scroll { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .v03.intro-active .brands { will-change: auto; }
}