:root {
  --page: #000000;
  --ink: #ffffff;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 100%;
  min-height: 100%;
  background: var(--page);
}

body {
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  overscroll-behavior: none;
}

.stage {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}

.ambient {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  width: min(82vw, 980px);
  aspect-ratio: 5 / 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    rgb(255 255 255 / 0.085) 0%,
    rgb(255 255 255 / 0.025) 42%,
    transparent 72%
  );
  filter: blur(28px);
  transform: translate(-50%, -50%) scale(0.72);
  pointer-events: none;
}

.brand {
  position: relative;
  width: min(86vw, 920px);
  aspect-ratio: 3444 / 279;
  margin: 0;
  line-height: 0;
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.35));
}

.brand__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.brand__base {
  opacity: 1;
}

.brand__slice {
  position: absolute;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.brand__slice--top {
  clip-path: inset(0 0 66% 0);
}

.brand__slice--middle {
  clip-path: inset(35% 0 32% 0);
}

.brand__slice--bottom {
  clip-path: inset(69% 0 0 0);
}

.signal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.is-animating .brand__base {
  animation: brand-lock 2.35s var(--ease-out) 260ms both;
}

.is-animating .brand__slice--top {
  animation: slice-top 1.35s var(--ease-out) 460ms both;
}

.is-animating .brand__slice--middle {
  animation: slice-middle 1.5s var(--ease-out) 400ms both;
}

.is-animating .brand__slice--bottom {
  animation: slice-bottom 1.25s var(--ease-out) 520ms both;
}

.is-animating .ambient {
  animation: ambient-rise 2.8s var(--ease-out) 100ms both;
}

.is-animating .signal {
  opacity: 1;
}

.is-settled .signal {
  opacity: 0;
  transition: opacity 320ms ease-out;
}

@keyframes brand-lock {
  0% {
    opacity: 0;
    transform: scaleX(0.9);
  }

  38% {
    opacity: 0.16;
  }

  68% {
    opacity: 1;
    transform: scaleX(1.002);
  }

  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes slice-top {
  0% {
    opacity: 0;
    transform: translate3d(-7.5%, -3px, 0) scaleX(1.04);
  }

  18% {
    opacity: 0.8;
  }

  72% {
    opacity: 0.42;
    transform: translate3d(0.6%, 0, 0) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

@keyframes slice-middle {
  0% {
    opacity: 0;
    transform: translate3d(9%, 2px, 0) scaleX(0.96);
  }

  16% {
    opacity: 0.92;
  }

  68% {
    opacity: 0.5;
    transform: translate3d(-0.45%, 0, 0) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

@keyframes slice-bottom {
  0% {
    opacity: 0;
    transform: translate3d(-5%, 4px, 0) scaleX(1.03);
  }

  20% {
    opacity: 0.74;
  }

  70% {
    opacity: 0.36;
    transform: translate3d(0.35%, 0, 0) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

@keyframes ambient-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  48% {
    opacity: 1;
  }

  100% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 480px) {
  .brand {
    width: min(88vw, 420px);
  }

  .ambient {
    width: 94vw;
    filter: blur(20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand__base {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .brand__slice,
  .signal {
    display: none;
  }

  .ambient {
    opacity: 0.28;
    filter: blur(24px);
    transform: translate(-50%, -50%);
    animation: none;
  }
}