/* Final timing pass for the five-part opening sequence. */
.portal {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background: linear-gradient(115deg, #090711 0%, #130d20 48%, #050309 49%);
  z-index: 4;
  transition: none;
  will-change: transform;
}

.portal::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background: repeating-linear-gradient(89deg, transparent 0 12vw, rgba(255,255,255,.03) 12.1vw 12.2vw);
}

.portal span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(transparent, var(--magenta), var(--cyan), transparent);
  box-shadow: 0 0 35px var(--magenta), 0 0 80px var(--cyan);
}

.portal-left {
  left: 0;
  transform: translateX(calc(var(--progress) * -102%));
}

.portal-left span {
  right: 0;
}

.portal-right {
  right: 0;
  transform: translateX(calc(var(--progress) * 102%));
}

.portal-right span {
  left: 0;
}

.hero-copy {
  position: absolute;
  z-index: 8;
  left: 6vw;
  bottom: 10vh;
  opacity: calc(1 - var(--progress) * 1.75);
  transform: translateY(calc(var(--progress) * -42px));
}

.hero-copy h1 {
  max-width: 1000px;
  font-size: clamp(3.6rem, 8.8vw, 9rem);
  text-shadow: 0 8px 50px rgba(0,0,0,.45);
}

.kinetic-stage {
  z-index: 3;
  opacity: clamp(0, calc((var(--progress) - .18) * 4.5), 1);
  transform: translateY(calc((1 - var(--progress)) * 28px)) scale(calc(.92 + var(--progress) * .08));
}

.kinetic-scene {
  animation-play-state: paused;
}

.kinetic-stage.is-open .kinetic-scene {
  animation-play-state: running;
}

.silver-word,
.final-mark,
.micro-word,
.sub-impact,
.word-ring span,
.ring-core {
  font-family: Orbitron, Syne, sans-serif;
}

.split-word {
  animation-duration: 2.4s;
}

@keyframes sceneCycle {
  0% {
    opacity: 0;
    filter: blur(28px);
    transform: translateZ(-260px) scaleX(1.7) rotateX(10deg);
  }
  2.5%, 14.5% {
    opacity: 1;
    filter: blur(0);
    transform: translateZ(0) scaleX(1) rotateX(0);
  }
  19% {
    opacity: 0;
    filter: blur(18px);
    transform: translateZ(260px) scaleX(.74) rotateX(-5deg);
  }
  20%, 100% {
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .hero-copy {
    left: 1.2rem;
    right: 1.2rem;
    bottom: 12vh;
  }

  .hero-copy h1 {
    font-size: clamp(3.25rem, 15vw, 6rem);
  }
}


@media (prefers-reduced-motion: reduce) {
  .portal {
    transform: none;
  }
}

/* High-fidelity poster typography. The video remains unscaled and unfiltered. */
.entry-sticky {
  --hero-a: #ff8a16;
  --hero-b: #ffd36a;
  --hero-glow: rgba(255, 106, 22, .72);
  --hero-edge: rgba(255, 222, 152, .95);
}

.entry-sticky[data-hero-tone="neon"] {
  --hero-a: #18e8ff;
  --hero-b: #ff2bd6;
  --hero-glow: rgba(195, 37, 255, .64);
  --hero-edge: rgba(126, 239, 255, .96);
}

.entry-sticky[data-hero-tone="violet"] {
  --hero-a: #a535ff;
  --hero-b: #f056ff;
  --hero-glow: rgba(135, 32, 255, .7);
  --hero-edge: rgba(229, 182, 255, .98);
}

.entry-sticky .hero-video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none !important;
  filter: none !important;
  will-change: auto;
}

.entry-sticky .video-wash {
  opacity: .46;
  background:
    radial-gradient(circle at 50% 45%, transparent 10%, rgba(2, 1, 8, .09) 54%, rgba(2, 1, 8, .48) 100%),
    linear-gradient(180deg, rgba(2, 1, 8, .25), transparent 24%, transparent 70%, rgba(2, 1, 8, .56));
}

.kinetic-stage {
  z-index: 3;
  perspective: 1200px;
  --hero-text-depth: -2200px;
  --hero-text-punch: 96px;
  --hero-text-punch-scale: 1.02;
  opacity: clamp(0, calc((var(--progress) - .18) * 4.5), 1);
  transform: none;
}

.kinetic-scene {
  width: min(96vw, 1500px);
  animation-name: heroPosterCycle;
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  filter: none !important;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.kinetic-stage.is-open .kinetic-scene {
  animation-play-state: running;
}

.silver-word,
.final-mark,
.ring-core {
  position: relative;
  display: block;
  color: #f5f7ff;
  font-family: "Oxanium", "Orbitron", sans-serif;
  font-size: clamp(5.5rem, 14.5vw, 15rem);
  font-weight: 800;
  font-style: normal;
  line-height: .76;
  letter-spacing: -.075em;
  white-space: nowrap;
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #858b98 10%,
      #ffffff 21%,
      var(--hero-edge) 27%,
      #333641 36%,
      #fbfcff 49%,
      #747b89 61%,
      #ffffff 72%,
      var(--hero-a) 80%,
      #242630 100%);
  background-size: 100% 185%;
  background-position: 50% 12%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.72);
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    0 3px 0 rgba(34,35,43,.92),
    0 6px 0 rgba(5,5,10,.95),
    0 12px 24px rgba(0,0,0,.62),
    0 0 20px var(--hero-glow),
    7px 0 24px color-mix(in srgb, var(--hero-a) 46%, transparent),
    -7px 0 24px color-mix(in srgb, var(--hero-b) 36%, transparent);
  animation: chromeLight 2.4s ease-in-out infinite alternate;
}

.silver-word::before {
  content: attr(data-word);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px rgba(4, 4, 12, .92);
  transform: translate3d(5px, 8px, -1px);
  text-shadow: 4px 4px 0 rgba(0,0,0,.5), 0 12px 22px rgba(0,0,0,.48);
}

.poster-fire .silver-word {
  font-family: "Oxanium", "Orbitron", sans-serif;
  letter-spacing: -.08em;
}

.poster-neon .silver-word,
.poster-neon .ring-core {
  font-family: "Audiowide", "Orbitron", sans-serif;
  letter-spacing: -.06em;
}

.poster-violet .silver-word {
  font-family: "Fugaz One", "Oxanium", sans-serif;
  font-style: italic;
  letter-spacing: -.055em;
}

.micro-word,
.sub-impact,
.word-ring span,
.kinetic-scene em {
  font-family: "Oxanium", "Orbitron", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.micro-word {
  margin-bottom: .9rem;
  color: #fff;
  font-size: clamp(.78rem, 1.45vw, 1.25rem);
  font-weight: 700;
  letter-spacing: .72em;
  text-shadow: 0 0 12px var(--hero-glow), 0 2px 4px rgba(0,0,0,.82);
}

.sub-impact {
  margin-top: 1.25rem;
  color: #f8f8ff;
  font-size: clamp(1rem, 2.55vw, 2.45rem);
  font-weight: 700;
  letter-spacing: .4em;
  text-shadow: 0 3px 8px rgba(0,0,0,.9), 0 0 16px var(--hero-glow);
}

.sub-impact b {
  color: var(--hero-a);
  text-shadow: 0 0 12px var(--hero-glow), 0 0 28px var(--hero-glow);
}

.kinetic-scene em {
  margin-top: 1.25rem;
  color: #fff;
  font-size: clamp(1rem, 2vw, 1.9rem);
  font-weight: 600;
  font-style: normal;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 0 16px var(--hero-glow);
}

.split-word {
  animation: chromeLight 2.4s ease-in-out infinite alternate;
}

.split-word::after {
  content: attr(data-word);
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, var(--hero-a), #fff 42%, var(--hero-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  clip-path: polygon(0 45%,100% 39%,100% 58%,0 64%);
  transform: translate3d(-9px,0,18px);
  filter: none;
  text-shadow: 5px 0 0 color-mix(in srgb, var(--hero-a) 62%, transparent);
}

.stretch-word {
  font-style: normal;
  animation: chromeLight 2.4s ease-in-out infinite alternate;
}

.impact-word {
  transform: skewX(-9deg);
  animation: violetStrike 2.4s cubic-bezier(.18,.78,.18,1) infinite;
}

.scene-three {
  width: min(72vw, 760px);
  height: min(72vw, 760px);
}

.word-ring {
  animation: ringTurn 2.4s cubic-bezier(.18,.72,.2,1) infinite;
}

.word-ring span {
  color: #f8f8ff;
  text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 0 12px var(--hero-glow);
}

.ring-core {
  font-size: clamp(4.5rem, 10.5vw, 10.5rem);
  letter-spacing: -.07em;
  transform: skewX(-9deg);
}

.final-mark {
  font-family: "Audiowide", "Orbitron", sans-serif;
  font-size: clamp(4.5rem, 11.5vw, 11.5rem);
  letter-spacing: -.075em;
}

.final-mark span {
  background: linear-gradient(180deg,#fff 0%,var(--hero-edge) 28%,var(--hero-a) 54%,var(--hero-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--hero-a);
  letter-spacing: -.13em;
  text-shadow: 0 0 18px var(--hero-glow), 0 0 34px var(--hero-glow);
}

@keyframes heroPosterCycle {
  0% {
    opacity: .08;
    transform: perspective(1200px) translate3d(0, 14px, var(--hero-text-depth)) scale(.72) rotateX(10deg);
    animation-timing-function: cubic-bezier(.16,1,.3,1);
  }
  2% {
    opacity: 1;
    transform: perspective(1200px) translate3d(0, 0, var(--hero-text-punch)) scale(var(--hero-text-punch-scale)) rotateX(-2deg);
    animation-timing-function: cubic-bezier(.45,0,.55,1);
  }
  3%, 15% {
    opacity: 1;
    transform: perspective(1200px) translate3d(0, 0, 0) scale(1) rotateX(0);
    animation-timing-function: cubic-bezier(.6,0,.9,.25);
  }
  17.5% {
    opacity: .16;
    transform: perspective(1200px) translate3d(0, 14px, var(--hero-text-depth)) scale(.72) rotateX(10deg);
  }
  20%, 100% {
    opacity: 0;
    transform: perspective(1200px) translate3d(0, 14px, var(--hero-text-depth)) scale(.72) rotateX(10deg);
  }
}

@keyframes chromeLight {
  from { background-position: 50% 4%; }
  to { background-position: 50% 72%; }
}

@keyframes violetStrike {
  0% { transform: skewX(-9deg) translate3d(-22px,0,0); }
  16%, 78% { transform: skewX(-9deg) translate3d(0,0,0); }
  100% { transform: skewX(-9deg) translate3d(18px,0,0); }
}

@keyframes ringTurn {
  0% { transform: rotate(-75deg) scale(.86); }
  20%, 76% { transform: rotate(0) scale(1); }
  100% { transform: rotate(72deg) scale(1.05); }
}

@media (max-width: 900px) {
  .entry-sticky .hero-video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    transform: none !important;
  }

  .kinetic-stage { inset: 0 .75rem; }
  .kinetic-scene { width: 100%; }
  .silver-word { font-size: clamp(4rem, 21vw, 7rem); }
  .final-mark { font-size: clamp(2.8rem, 14.2vw, 5.2rem); }
  .micro-word { font-size: clamp(.68rem, 3vw, .9rem); letter-spacing: .55em; }
  .sub-impact { font-size: clamp(.88rem, 4.6vw, 1.4rem); letter-spacing: .25em; }
  .scene-three { width: 88vw; height: 88vw; }
  .ring-core { font-size: 21vw; }
  .kinetic-scene em { font-size: clamp(.7rem, 3vw, .9rem); letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-scene,
  .silver-word,
  .final-mark,
  .ring-core,
  .word-ring,
  .impact-word {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Glass cards share the headline's clock; no independent CSS orbit loop. */
.kinetic-scene { z-index: 3; }
.hero-word-stage {
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-items:center;
  pointer-events:none;
}

.hero-card-orbit {
  position: absolute;
  z-index: 1;
  top: min(72%, calc(100% - 158px));
  left: 50%;
  width: 1px;
  height: 1px;
  opacity: 0;
  perspective: 1100px;
  transform-style: preserve-3d;
  transition: opacity .65s ease .12s;
}

.kinetic-stage.is-open .hero-card-orbit { opacity: 1; }

.hero-orbit-card {
  --card-neon: #28eaff;
  --card-neon-soft: rgba(40,234,255,.28);
  --line-weight: 1;
  --orbit-x: 0vw;
  --tour-y: 0px;
  --tour-z: 0px;
  --tour-yaw: 0deg;
  position: absolute;
  top: 0;
  left: 0;
  width: min(22vw, 340px);
  min-height: clamp(92px, 8vw, 122px);
  padding: 1rem 1.05rem .9rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-neon) 56%, rgba(255,255,255,.5));
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.015) 48%, color-mix(in srgb, var(--card-neon) 8%, transparent)),
    rgba(7,5,20,.045);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 1px 0 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 12px 28px rgba(0,0,0,.22),
    0 0 12px color-mix(in srgb, var(--card-neon) 13%, transparent);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform: translate3d(calc(-50% + var(--line-x) * var(--line-weight) + var(--orbit-x)), calc(var(--line-y,0px) + var(--tour-y)), var(--tour-z)) rotateY(var(--tour-yaw));
  animation: none;
  will-change: transform, opacity;
}

.hero-orbit-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 15%, rgba(255,255,255,.04) 37%, rgba(255,255,255,.18) 39%, rgba(255,255,255,.025) 41%, transparent 59%),
    linear-gradient(180deg, rgba(255,255,255,.13), transparent 25%);
}

.hero-orbit-card::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.08);
  background: transparent;
  pointer-events: none;
}

.hero-orbit-card > * { position: relative; z-index: 2; }
.hero-orbit-card span,
.hero-orbit-card small {
  display: block;
  color: rgba(242,247,255,.76);
  font: 700 clamp(.48rem,.52vw,.62rem)/1 "Oxanium",sans-serif;
  letter-spacing: .18em;
}
.hero-orbit-card span {
  color: var(--card-neon);
  text-shadow: 0 0 8px var(--card-neon-soft);
}
.hero-orbit-card strong {
  display: block;
  white-space:nowrap;
  margin: .55rem 0 .6rem;
  color: #fff;
  font: 800 clamp(.86rem,1.05vw,1.15rem)/.95 "Orbitron",sans-serif;
  letter-spacing: -.035em;
  text-shadow: 0 0 8px var(--card-neon-soft), 0 1px 2px rgba(0,0,0,.5);
}

.orbit-card-one { --line-x:-34.5vw; --card-neon:#20e8ff; --card-neon-soft:rgba(32,232,255,.28); }
.orbit-card-two { --line-x:-11.5vw; --card-neon:#ff32d3; --card-neon-soft:rgba(255,50,211,.27); }
.orbit-card-three { --line-x:11.5vw; --card-neon:#a94cff; --card-neon-soft:rgba(169,76,255,.28); }
.orbit-card-four { --line-x:34.5vw; --card-neon:#ff8a21; --card-neon-soft:rgba(255,138,33,.26); }

/* A distinct palette identifies the music/VIP set while keeping the same glass. */
.kinetic-stage[data-card-content="music"] .orbit-card-one { --card-neon:#409cff; --card-neon-soft:rgba(64,156,255,.24); }
.kinetic-stage[data-card-content="music"] .orbit-card-two { --card-neon:#ff5b76; --card-neon-soft:rgba(255,91,118,.28); }
.kinetic-stage[data-card-content="music"] .orbit-card-three { --card-neon:#ffc857; --card-neon-soft:rgba(255,200,87,.28); }
.kinetic-stage[data-card-content="music"] .orbit-card-four { --card-neon:#e9f1ff; --card-neon-soft:rgba(233,241,255,.28); }
.kinetic-stage[data-card-content="music"] .hero-orbit-card strong {
  color:var(--card-neon);
  text-shadow:0 0 8px var(--card-neon-soft),0 1px 2px rgba(0,0,0,.5);
}
.kinetic-stage[data-card-content="music"] .hero-orbit-card small {
  color:rgba(247,250,255,.9);
  line-height:1.3;
  letter-spacing:.035em;
  white-space:normal;
}

@media (max-width:900px) {
  .kinetic-stage { inset:0; --hero-text-depth:-1600px; --hero-text-punch:36px; --hero-text-punch-scale:1.006; }
  .hero-word-stage { inset:0 0 14%; }
  .hero-word-stage .kinetic-scene { left:0; right:0; width:100%; margin-inline:auto; text-align:center; }
  .micro-word { padding-inline-start:.55em; }
  .sub-impact { padding-inline-start:.25em; }
  .kinetic-scene em { padding-inline-start:.18em; }
  .hero-card-orbit { top:min(68%, calc(100% - 242px)); }
  .hero-orbit-card {
    width:44vw;
    max-width:320px;
    min-height:76px;
    padding:.52rem .45rem .48rem;
    border-radius:11px;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .hero-orbit-card strong { margin:.34rem 0 .36rem; font-size:clamp(.625rem,2.8vw,.95rem); }
  .hero-orbit-card span,.hero-orbit-card small { font-size:clamp(.5rem,1.8vw,.65rem); letter-spacing:.11em; }
  .orbit-card-one { --line-x:-23vw; --line-y:0px; }
  .orbit-card-two { --line-x:23vw; --line-y:0px; }
  .orbit-card-three { --line-x:-23vw; --line-y:88px; }
  .orbit-card-four { --line-x:23vw; --line-y:88px; }
}
@media(max-width:900px) and (max-height:600px) {
  .hero-word-stage { inset:0 0 32%; }
}
@media(max-width:900px) and (max-height:480px) {
  .hero-word-stage { inset:74px 0 auto; height:74px; }
  .hero-card-orbit { top:calc(100% - 226px); }
  .hero-word-stage .silver-word,.hero-word-stage .final-mark { font-size:min(17vw,14svh); }
  .hero-word-stage .sub-impact,.hero-word-stage .kinetic-scene em { font-size:.625rem; margin-top:.5rem; }
  .hero-word-stage .micro-word { font-size:.625rem; margin-bottom:.4rem; }
}