.someido-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(240, 146, 31, 0.09), transparent 34%),
    radial-gradient(circle at 20% 18%, rgba(201, 168, 76, 0.045), transparent 28%),
    linear-gradient(145deg, #151817 0%, #202321 54%, #121514 100%);
  isolation: isolate;
  animation: someido-intro-release 2.85s cubic-bezier(0.55, 0.02, 0.23, 1) both;
}

.someido-intro::before,
.someido-intro::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.someido-intro::before {
  inset: -28%;
  z-index: -1;
  background:
    repeating-linear-gradient(
      112deg,
      transparent 0,
      transparent 13%,
      rgba(255, 255, 255, 0.018) 13.3%,
      transparent 13.8%,
      transparent 24%
    );
  opacity: 0;
  transform: translate3d(-7%, 4%, 0);
  animation: someido-intro-air 2.45s ease-out 0.25s both;
}

.someido-intro::after {
  top: 0;
  bottom: 0;
  left: -36%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 239, 203, 0.12), transparent);
  filter: blur(18px);
  transform: skewX(-13deg);
  animation: someido-intro-glint 1.35s cubic-bezier(0.4, 0, 0.2, 1) 0.48s both;
}

.someido-intro__logo {
  display: block;
  width: min(42vw, 360px);
  max-width: 360px;
  height: auto;
  align-self: center;
  justify-self: center;
  translate: 0 -1.5%;
  opacity: 0;
  transform: scale(0.955);
  filter: blur(18px) contrast(1.025);
  -webkit-mask-image: radial-gradient(ellipse 72% 29% at 50% 50%, #000 56%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 29% at 50% 50%, #000 56%, transparent 100%);
  animation: someido-logo-reveal 1.58s cubic-bezier(0.2, 0.72, 0.2, 1) 0.14s both;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes someido-logo-reveal {
  0% {
    opacity: 0;
    transform: scale(0.955);
    filter: blur(18px) contrast(1.025);
    clip-path: inset(0 46% 0 46%);
  }
  34% {
    opacity: 0.76;
  }
  76%,
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) contrast(1.025);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes someido-intro-glint {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-13deg);
  }
  22% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateX(560%) skewX(-13deg);
  }
}

@keyframes someido-intro-air {
  0% {
    opacity: 0;
    transform: translate3d(-7%, 4%, 0) scale(1);
  }
  28% {
    opacity: 0.36;
  }
  100% {
    opacity: 0;
    transform: translate3d(9%, -7%, 0) scale(1.07);
  }
}

@keyframes someido-intro-release {
  0%,
  66% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    filter: blur(0);
  }
  82% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.035);
    filter: blur(18px);
    pointer-events: none;
  }
}

@media (max-width: 560px) {
  .someido-intro {
    background:
      radial-gradient(circle at 50% 50%, rgba(240, 146, 31, 0.07), transparent 28%),
      linear-gradient(145deg, #151817 0%, #202321 54%, #121514 100%);
  }

  .someido-intro::before {
    inset: 50% auto auto 50%;
    z-index: -1;
    width: min(58vw, 220px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(42, 45, 43, 0.9) 0 36%, rgba(240, 146, 31, 0.055) 55%, transparent 74%);
    opacity: 0.82;
    translate: -50% -50%;
    transform: none;
    filter: blur(22px);
    animation: none;
  }

  .someido-intro__logo {
    position: relative;
    inset: auto;
    width: min(38vw, 150px);
    max-width: 150px;
    height: auto;
    margin: auto;
    align-self: center;
    justify-self: center;
    translate: 0 0;
    border-radius: 16%;
    -webkit-mask-image: radial-gradient(ellipse 80% 24% at 50% 50%, #000 48%, rgba(0, 0, 0, 0.88) 64%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 24% at 50% 50%, #000 48%, rgba(0, 0, 0, 0.88) 64%, transparent 100%);
    animation: someido-logo-reveal 1.58s cubic-bezier(0.2, 0.72, 0.2, 1) 0.14s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .someido-intro {
    animation: someido-intro-reduced 0.7s ease-out both;
  }

  .someido-intro::before,
  .someido-intro::after {
    display: none;
  }

  .someido-intro__logo {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    animation: none;
  }
}

@keyframes someido-intro-reduced {
  0%,
  58% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}