.brand-intro {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  z-index: 100000;
  display: none;
  place-items: center;
  overflow: hidden;
  direction: ltr;
  background: #030303;
  opacity: 1;
  visibility: visible;
  isolation: isolate;
}

.cp-intro-pending .brand-intro {
  display: grid;
}

.cp-intro-pending,
.cp-intro-pending body {
  overflow: hidden;
  background: #030303;
}

.brand-intro::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 112, 15, .12), transparent 22%),
    radial-gradient(circle at 50% 50%, #15100d 0, #060504 28%, #030303 58%);
  opacity: 0;
  transform: scale(.7);
  animation: cp-intro-room 5.4s cubic-bezier(.2, .7, .2, 1) forwards;
}

.brand-intro__ambient {
  position: absolute;
  width: min(78vw, 880px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 0, .14), rgba(255, 107, 0, .035) 34%, transparent 68%);
  filter: blur(18px);
  opacity: 0;
  animation: cp-intro-ambient 5.2s .3s ease-out forwards;
}

.brand-intro__beam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(94vw, 1120px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 0, .15), #ff710f, rgba(255,255,255,.75), #ff710f, rgba(255, 107, 0, .15), transparent);
  box-shadow: 0 0 13px #ff6b00, 0 0 38px rgba(255, 107, 0, .5);
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(.02);
  animation: cp-intro-beam 2s .7s cubic-bezier(.16, 1, .3, 1) forwards;
}

.brand-intro__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(250px, 48vw, 680px);
  max-width: calc(100dvw - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.brand-intro__logo-wrap {
  position: relative;
  width: 100%;
  overflow: visible;
  opacity: 0;
  transform: scale(.86);
  filter: blur(9px);
  animation: cp-intro-logo 2.35s 1.05s cubic-bezier(.16, 1, .3, 1) forwards;
}

.brand-intro__logo {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 24px rgba(255,255,255,.08));
}

.brand-intro__shine {
  position: fixed;
  z-index: -1;
  top: -25vh;
  bottom: -25vh;
  left: -45vw;
  width: clamp(120px, 18vw, 360px);
  background: linear-gradient(100deg, transparent, rgba(255, 113, 15, .12), rgba(255,255,255,.18), rgba(255, 113, 15, .1), transparent);
  filter: blur(22px);
  transform: skewX(-12deg);
  opacity: 0;
  animation: cp-intro-shine 3.2s 1.65s cubic-bezier(.4, 0, .2, 1) forwards;
}

.brand-intro.is-leaving {
  pointer-events: none;
  animation: cp-intro-exit .72s cubic-bezier(.65, 0, .35, 1) forwards;
}

.brand-intro.is-leaving .brand-intro__stage {
  animation: cp-intro-logo-exit .8s cubic-bezier(.4, 0, 1, 1) forwards;
}

@keyframes cp-intro-room { 35% { opacity: 1; transform: scale(.9); } 100% { opacity: .82; transform: scale(1); } }
@keyframes cp-intro-ambient { 20% { opacity: .2; } 65% { opacity: 1; } 100% { opacity: .55; transform: scale(1.14); } }
@keyframes cp-intro-beam { 0% { opacity: 0; transform: translate(-50%, -50%) scaleX(.02); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1); } }
@keyframes cp-intro-logo { 0% { opacity: 0; transform: scale(.86); filter: blur(9px); } 58% { opacity: 1; filter: blur(0); } 78% { transform: scale(1.025); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes cp-intro-shine { 0% { left: -45vw; opacity: 0; } 22% { opacity: .9; } 78% { opacity: .75; } 100% { left: 125vw; opacity: 0; } }
@keyframes cp-intro-exit { 0% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes cp-intro-logo-exit {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.08); filter: blur(7px); }
}

@media (max-width: 600px) {
  .brand-intro__stage {
    width: min(84vw, 440px);
    max-width: calc(100dvw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-intro::before,
  .brand-intro__ambient,
  .brand-intro__logo-wrap { animation-duration: .01ms; animation-delay: 0s; }
  .brand-intro__beam,
  .brand-intro__shine { display: none; }
  .brand-intro.is-leaving { animation-duration: .2s; }
}