.ross-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 34%, rgba(245, 177, 45, 0.08) 100%),
    linear-gradient(135deg, #061a13 0%, #0f3326 52%, #091914 100%);
  opacity: 1;
  transform: translateZ(0);
  isolation: isolate;
}

.ross-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 12px solid rgba(255, 255, 255, 0.035);
  pointer-events: none;
}

.ross-intro.is-active {
  animation: ross-intro-exit 2800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ross-intro__mark {
  position: relative;
  z-index: 1;
  width: clamp(224px, 44vw, 390px);
  max-width: 78vw;
  height: auto;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.94);
  transform-origin: 50% 50%;
  filter: blur(12px) saturate(0.98) drop-shadow(0 18px 46px rgba(0, 0, 0, 0.32));
  will-change: transform, opacity, filter;
}

.ross-intro.is-active .ross-intro__mark {
  animation: ross-intro-mark 2500ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

.ross-intro.is-finished {
  pointer-events: none;
}

html.ross-intro-lock,
html.ross-intro-lock body {
  overflow: hidden;
}

@keyframes ross-intro-mark {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.94);
    filter: blur(12px) saturate(0.98);
  }

  20% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) saturate(1.04);
  }

  46% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.015);
    filter: blur(0) saturate(1.04);
  }

  72% {
    opacity: 0.95;
    transform: translate3d(0, 0, 0) scale(9.5);
    filter: blur(12px) saturate(1.02);
  }

  86% {
    opacity: 0.22;
    transform: translate3d(0, 0, 0) scale(19);
    filter: blur(28px) saturate(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(28);
    filter: blur(40px) saturate(0.96);
  }
}

@keyframes ross-intro-exit {
  0%,
  54% {
    opacity: 1;
  }

  72% {
    opacity: 0.84;
  }

  88% {
    opacity: 0.16;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ross-intro,
  .ross-intro__mark {
    animation: none;
    transform: none;
  }

  .ross-intro.is-active {
    animation: ross-intro-reduced 520ms ease-out forwards;
  }

  .ross-intro.is-active .ross-intro__mark {
    animation: ross-intro-mark-reduced 420ms ease-out forwards;
  }
}

@keyframes ross-intro-reduced {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes ross-intro-mark-reduced {
  from {
    opacity: 0;
    transform: scale(0.98);
    filter: blur(8px);
  }

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