.teaser {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #f5f5f7;
  overflow: hidden;
}

.teaser.is-on {
  display: flex !important;
}

.teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.teaser-glow {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 34% at 50% 44%, rgb(10 47 110 / 0.55), transparent 64%),
    radial-gradient(ellipse 24% 18% at 50% 78%, rgb(196 165 116 / 0.16), transparent 58%);
  animation: teaser-breathe 8s ease-in-out infinite alternate;
}

@keyframes teaser-breathe {
  from {
    transform: scale(1);
    opacity: 0.85;
  }

  to {
    transform: scale(1.08);
    opacity: 1;
  }
}

.teaser-film {
  position: relative;
  width: min(92vw, 58rem);
  min-height: min(78vh, 38rem);
  z-index: 1;
  animation: teaser-ken 22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes teaser-ken {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.035);
  }
}

.teaser-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.teaser-scene.is-live {
  animation: teaser-in 1.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.teaser-scene.is-leaving {
  animation: teaser-out 0.7s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes teaser-in {
  from {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(12px);
  }

  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes teaser-out {
  from {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  to {
    opacity: 0;
    transform: scale(0.96);
    filter: blur(8px);
  }
}

.teaser-logo {
  width: min(48vw, 13.5rem);
  animation: teaser-bloom 4.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  filter: drop-shadow(0 28px 50px rgb(0 0 0 / 0.5));
}

@keyframes teaser-bloom {
  from {
    transform: scale(1.22);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.teaser-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.42);
  margin-bottom: 1.5rem;
}

.teaser-scene h2 {
  font-size: clamp(3.2rem, 9vw, 6.4rem);
  font-weight: 560;
  letter-spacing: -0.055em;
  line-height: 1.02;
  max-width: none;
}

.teaser-line {
  font-size: clamp(1.45rem, 3.4vw, 2.35rem);
  letter-spacing: -0.04em;
  font-weight: 500;
  color: rgba(245, 245, 247, 0.92);
  margin: 0.35rem 0;
}

.teaser-scene[data-scene="doors"].is-live .teaser-line:nth-child(1) {
  animation: teaser-stagger 1.15s 0.08s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.teaser-scene[data-scene="doors"].is-live .teaser-line:nth-child(2) {
  animation: teaser-stagger 1.15s 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.teaser-scene[data-scene="doors"].is-live .teaser-line:nth-child(3) {
  animation: teaser-stagger 1.15s 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes teaser-stagger {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.teaser-scene-ui .digital-id,
.teaser-scene-ui .ui-mmqr {
  width: min(86vw, 22.5rem);
  box-shadow: 0 48px 90px rgb(0 0 0 / 0.5);
  animation: teaser-float 4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.teaser-scene-ui .digital-id {
  max-width: 22.5rem;
}

.teaser-scene-ui .digital-id-qr img {
  width: 11.25rem;
  height: 11.25rem;
}

.teaser-wave {
  width: fit-content;
  max-width: 100%;
}

.teaser-wave .wave-plate {
  --wave-mark: 76px;
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 8.2rem;
  padding: 1.55rem 1.7rem;
  overflow: visible;
  box-shadow: 0 40px 80px rgb(0 0 0 / 0.48);
  animation: teaser-float 4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.teaser-wave .wave-plate-row {
  width: fit-content;
  max-width: 100%;
  gap: 1.15rem;
  align-items: center;
}

.teaser-wave .wave-mark {
  width: var(--wave-mark);
  height: var(--wave-mark);
  overflow: hidden;
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
}

.teaser-wave .wave-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(0.78);
}

.teaser-wave .wave-strip {
  flex: 0 1 var(--wave-strip-w);
  width: var(--wave-strip-w);
  min-width: 0;
  height: var(--wave-mark);
}

.teaser-wave .wave-strip svg {
  display: block;
  width: 100%;
  height: var(--wave-mark);
  transform-origin: left center;
}

.teaser.is-on[data-beat="wave"] .teaser-wave .wave-strip svg {
  animation: teaser-wave-draw 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes teaser-wave-draw {
  from {
    transform: scaleX(0.12);
    opacity: 0.25;
  }

  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

.teaser-wave .wave-caption {
  color: rgba(245, 245, 247, 0.88);
  margin-top: 1.15rem;
  font-size: 0.95rem;
}

@keyframes teaser-float {
  from {
    transform: translateY(36px) scale(0.92);
  }

  to {
    transform: translateY(0) scale(1);
  }
}

.teaser-stat {
  font-size: clamp(6.2rem, 16vw, 9.5rem);
  font-weight: 590;
  letter-spacing: -0.08em;
  line-height: 0.86;
  color: #c4a574;
  margin: 0;
}

.teaser-sub {
  margin-top: 1.1rem;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: -0.03em;
  color: rgba(245, 245, 247, 0.55);
}

.teaser-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: #c4a574;
}

.teaser.is-on .teaser-progress {
  animation: teaser-bar 21.4s linear both;
}

@keyframes teaser-bar {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.teaser-skip {
  position: absolute;
  right: clamp(1.4rem, 4vw, 3rem);
  bottom: 1.45rem;
  z-index: 2;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 245, 247, 0.28);
}