:root {
  --spray-transition-duration: 980ms;
  --spray-transition-easing: cubic-bezier(0.76, 0, 0.24, 1);
}

html.spray-transition-running {
  overflow: hidden;
}

.spray-transition {
  position: fixed;
  inset: 0;
  z-index: 300;
  overflow: hidden;
  background: rgba(17, 24, 32, 0.88);
  backdrop-filter: blur(2px) saturate(0.95);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.spray-transition.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.spray-transition.is-fading {
  opacity: 0;
}

.spray-transition.is-home-reveal {
  background: transparent;
  backdrop-filter: none;
}

.spray-transition__foam,
.spray-transition__coating,
.spray-transition__grain,
.spray-transition__boundary,
.spray-transition__mist,
.spray-transition__gun {
  position: absolute;
}

.spray-transition__foam,
.spray-transition__coating,
.spray-transition__grain {
  inset: 0;
}

.spray-transition__foam {
  background:
    radial-gradient(circle at 12px 15px, rgba(97, 196, 237, 0.12) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 34px 33px, rgba(255, 255, 255, 0.12) 0 2.2px, transparent 3.7px),
    radial-gradient(circle at 43px 8px, rgba(57, 89, 107, 0.22) 0 1.8px, transparent 2.7px),
    linear-gradient(rgba(97, 196, 237, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(97, 196, 237, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, rgba(17, 24, 32, 0.9), rgba(26, 39, 49, 0.88));
  background-size: 54px 48px, 62px 58px, 48px 44px, 38px 38px, 38px 38px, auto;
}

.spray-transition__grain {
  background:
    repeating-linear-gradient(7deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.2), transparent 30%);
  mix-blend-mode: soft-light;
  opacity: 0.62;
}

.spray-transition__coating {
  background:
    linear-gradient(rgba(97, 196, 237, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(97, 196, 237, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 78% 20%, rgba(97, 196, 237, 0.18), transparent 28rem),
    linear-gradient(135deg, #111820, #1a2731);
  background-size: 38px 38px, 38px 38px, auto, auto;
  box-shadow: 0 16px 28px rgba(8, 14, 18, 0.28);
  transform: scaleY(0);
  transform-origin: top;
}

.spray-transition__boundary {
  right: 0;
  left: 0;
  top: 0;
  height: 9px;
  background: linear-gradient(90deg, rgba(97, 196, 237, 0.12), rgba(97, 196, 237, 0.74) 36%, rgba(57, 89, 107, 0.48));
  box-shadow: 0 9px 18px rgba(8, 14, 18, 0.24);
  opacity: 0;
  transform: translate3d(0, -50%, 0);
}

.spray-transition__mist {
  top: 0;
  right: clamp(168px, 25vw, 390px);
  width: clamp(180px, 26vw, 380px);
  height: 86px;
  background: radial-gradient(ellipse at right center, rgba(205, 235, 242, 0.68), rgba(97, 196, 237, 0.18) 52%, transparent 74%);
  filter: blur(12px);
  opacity: 0;
  transform: translate3d(0, -50%, 0);
}

.spray-transition__gun {
  top: 0;
  right: clamp(-18px, 3vw, 42px);
  width: clamp(250px, 31vw, 470px);
  max-width: 58vw;
  filter: drop-shadow(0 18px 22px rgba(30, 34, 34, 0.26));
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -44%, 0);
}

.spray-transition__label {
  position: absolute;
  right: 28px;
  bottom: 24px;
  color: rgba(255, 255, 255, 0.54);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.spray-transition.is-covering .spray-transition__coating {
  animation: sprayCoatingReveal var(--spray-transition-duration) var(--spray-transition-easing) forwards;
}

.spray-transition.is-covering .spray-transition__boundary {
  animation: sprayBoundaryMove var(--spray-transition-duration) var(--spray-transition-easing) forwards;
}

.spray-transition.is-covering .spray-transition__mist {
  animation: sprayMistMove var(--spray-transition-duration) var(--spray-transition-easing) forwards;
}

.spray-transition.is-covering .spray-transition__gun {
  animation: sprayGunMove var(--spray-transition-duration) var(--spray-transition-easing) forwards;
}

.spray-transition.is-home-reveal .spray-transition__foam {
  background:
    radial-gradient(circle at 12px 15px, rgba(97, 196, 237, 0.15) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 34px 33px, rgba(255, 255, 255, 0.34) 0 2.4px, transparent 3.8px),
    radial-gradient(circle at 43px 8px, rgba(57, 89, 107, 0.15) 0 1.8px, transparent 2.7px),
    linear-gradient(rgba(97, 196, 237, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(97, 196, 237, 0.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(232, 239, 242, 0.88), rgba(177, 196, 205, 0.72));
  background-size: 54px 48px, 62px 58px, 48px 44px, 38px 38px, 38px 38px, auto;
  backdrop-filter: blur(10px) saturate(0.78);
  clip-path: inset(0 0 0 0);
  animation: sprayPageReveal var(--spray-transition-duration) var(--spray-transition-easing) forwards;
}

.spray-transition.is-home-reveal .spray-transition__coating {
  display: none;
}

.spray-transition.is-home-reveal .spray-transition__grain {
  background:
    repeating-linear-gradient(6deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.42), transparent 30%);
  clip-path: inset(0 0 0 0);
  opacity: 0.42;
  animation: sprayPageReveal var(--spray-transition-duration) var(--spray-transition-easing) forwards;
}

.spray-transition.is-home-reveal .spray-transition__boundary {
  animation: sprayBoundaryMove var(--spray-transition-duration) var(--spray-transition-easing) forwards;
}

.spray-transition.is-home-reveal .spray-transition__mist {
  background: radial-gradient(ellipse at right center, rgba(239, 249, 250, 0.82), rgba(97, 196, 237, 0.22) 52%, transparent 74%);
  animation: sprayMistMove var(--spray-transition-duration) var(--spray-transition-easing) forwards;
}

.spray-transition.is-home-reveal .spray-transition__gun {
  animation: sprayGunMove var(--spray-transition-duration) var(--spray-transition-easing) forwards;
}

.spray-transition.is-home-reveal .spray-transition__label {
  color: rgba(21, 27, 35, 0.5);
}

.spray-transition.is-returning .spray-transition__coating {
  transform: scaleY(1);
}

.spray-transition.is-returning .spray-transition__boundary,
.spray-transition.is-returning .spray-transition__mist,
.spray-transition.is-returning .spray-transition__gun {
  opacity: 0;
}

.spray-transition.is-reduced {
  background: #17232c;
  transition-duration: 180ms;
}

.spray-transition.is-reduced .spray-transition__foam,
.spray-transition.is-reduced .spray-transition__coating,
.spray-transition.is-reduced .spray-transition__grain,
.spray-transition.is-reduced .spray-transition__boundary,
.spray-transition.is-reduced .spray-transition__mist,
.spray-transition.is-reduced .spray-transition__gun,
.spray-transition.is-reduced .spray-transition__label {
  display: none;
}

@keyframes sprayCoatingReveal {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes sprayPageReveal {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(100% 0 0 0); }
}

@keyframes sprayBoundaryMove {
  0% { opacity: 0; transform: translate3d(0, -50%, 0); }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, calc(100vh - 50%), 0); }
}

@keyframes sprayMistMove {
  0% { opacity: 0; transform: translate3d(0, -50%, 0); }
  10% { opacity: 0.72; }
  88% { opacity: 0.54; }
  100% { opacity: 0; transform: translate3d(0, calc(100vh - 50%), 0); }
}

@keyframes sprayGunMove {
  0% { opacity: 0; transform: translate3d(0, -44%, 0); }
  7% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, calc(100vh - 56%), 0); }
}

@media (max-width: 640px) {
  :root {
    --spray-transition-duration: 780ms;
  }

  .spray-transition__gun {
    right: -22px;
    width: min(310px, 76vw);
    max-width: none;
  }

  .spray-transition__mist {
    right: 148px;
    width: 190px;
    height: 66px;
  }

  .spray-transition__label {
    right: 16px;
    bottom: 16px;
    font-size: 9px;
  }
}