/* Depth Digital — one continuous water handoff from Project Ocean to a case. */

html.depth-case-wave-active {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* The destination has already been shown inside the handoff. Keep its first
   top-level paint stable while the normal reveal timelines finish invisibly. */
html.depth-case-handoff-arrival .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

.depth-case-wave {
  --depth-wave-x: -18vw;
  --depth-wave-edge-opacity: 0;
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  cursor: progress;
  touch-action: none;
  background: transparent;
}

.depth-case-wave__target {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: #031720;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transform: translateZ(0);
  will-change: clip-path;
}

.depth-case-wave__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #031720;
  color-scheme: dark;
  pointer-events: none;
}

.depth-case-wave__canvas {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.depth-case-wave__fallback {
  --depth-wave-flip: 1;
  position: absolute;
  z-index: 4;
  top: -16%;
  left: var(--depth-wave-x);
  display: none;
  width: clamp(190px, 34vw, 520px);
  height: 132%;
  opacity: var(--depth-wave-edge-opacity);
  border-radius: 44% 33% 48% 36% / 7% 12% 8% 11%;
  background:
    radial-gradient(ellipse at 46% 12%, rgba(244, 255, 254, .72) 0 2%, transparent 8%),
    radial-gradient(ellipse at 57% 29%, rgba(222, 255, 252, .68) 0 3%, transparent 10%),
    radial-gradient(ellipse at 43% 47%, rgba(247, 255, 254, .74) 0 2%, transparent 9%),
    radial-gradient(ellipse at 56% 68%, rgba(213, 252, 249, .66) 0 3%, transparent 11%),
    radial-gradient(ellipse at 45% 86%, rgba(242, 255, 253, .7) 0 2%, transparent 9%),
    repeating-radial-gradient(ellipse at 49% 50%, rgba(210, 255, 252, .18) 0 1px, transparent 2px 12px),
    linear-gradient(90deg, transparent 0%, rgba(8, 80, 94, .2) 27%, rgba(179, 247, 242, .72) 49%, rgba(238, 255, 253, .86) 54%, rgba(37, 133, 145, .22) 72%, transparent 100%);
  box-shadow: inset 0 0 54px rgba(214, 255, 252, .2), 0 0 52px rgba(79, 213, 208, .2);
  filter: blur(.45px) saturate(1.27);
  pointer-events: none;
  transform: translate3d(-50%, 0, 0) scaleX(var(--depth-wave-flip));
  will-change: left, opacity;
}

.depth-case-wave__fallback::before {
  content: '';
  position: absolute;
  top: 0;
  right: 46%;
  width: min(42vw, 560px);
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(4, 57, 72, .28));
  opacity: .82;
}

.depth-case-wave[data-direction="left"] .depth-case-wave__fallback {
  --depth-wave-flip: -1;
}

.depth-case-wave--fallback .depth-case-wave__canvas {
  display: none;
}

.depth-case-wave--fallback .depth-case-wave__fallback {
  display: block;
}

.depth-case-wave__ripple {
  position: absolute;
  z-index: 6;
  top: var(--depth-wave-origin-y, 50%);
  left: var(--depth-wave-origin-x, 50%);
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.depth-case-wave__ripple i {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(72px, 10vw, 148px);
  aspect-ratio: 1;
  border: 1px solid rgba(199, 255, 251, .42);
  border-radius: 48% 52% 46% 54%;
  box-shadow: 0 0 28px rgba(126, 238, 232, .13), inset 0 0 20px rgba(255, 255, 255, .04);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.16);
  animation: depth-case-wave-ripple .52s cubic-bezier(.2, .72, .2, 1) forwards;
}

.depth-case-wave__ripple i:nth-child(2) { animation-delay: .09s; }
.depth-case-wave__ripple i:nth-child(3) { animation-delay: .18s; }

@keyframes depth-case-wave-ripple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.16); }
  18% { opacity: .48; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.25); }
}

.depth-case-wave.is-settled .depth-case-wave__target {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.depth-case-wave--calm .depth-case-wave__target {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  opacity: 0;
  transition: opacity .22s ease;
}

.depth-case-wave--calm.is-revealed .depth-case-wave__target {
  opacity: 1;
}

.depth-case-wave--calm .depth-case-wave__canvas,
.depth-case-wave--calm .depth-case-wave__fallback,
.depth-case-wave--calm .depth-case-wave__ripple {
  display: none !important;
}

@media (max-width: 780px) {
  .depth-case-wave__fallback {
    width: clamp(155px, 52vw, 250px);
  }

  .depth-case-wave__ripple i {
    width: clamp(62px, 22vw, 104px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .depth-case-wave__canvas,
  .depth-case-wave__fallback,
  .depth-case-wave__ripple {
    display: none !important;
  }
}

@media (forced-colors: active) {
  .depth-case-wave__canvas,
  .depth-case-wave__fallback,
  .depth-case-wave__ripple {
    display: none !important;
  }

  .depth-case-wave__target,
  .depth-case-wave__frame {
    background: Canvas;
  }
}