/* Ownership section: automatic, locally clipped underwater light depth. */
.ownership-depth {
  --ownership-far-x: 0px;
  --ownership-far-y: 0px;
  --ownership-near-x: 0px;
  --ownership-near-y: 0px;
  --ownership-glint-x: 0px;
  --ownership-glint-y: 0px;
  --ownership-content-x: 0px;
  --ownership-content-y: 0px;
  isolation: isolate;
}

/* Keep the existing sheet-edge foam line above the locally clipped scene. */
.panel--light.ownership-depth::before {
  z-index: 3;
  pointer-events: none;
}

.ownership-depth__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  overflow: clip;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  contain: paint;
  transition: opacity 1.4s cubic-bezier(.2, .65, .3, 1);
}

.ownership-depth.is-depth-ready .ownership-depth__scene {
  opacity: 1;
}

.ownership-depth__scene > span {
  position: absolute;
  display: block;
  pointer-events: none;
  backface-visibility: hidden;
}

.ownership-depth__far {
  inset: -8%;
  background:
    radial-gradient(ellipse 44% 38% at 30% 35%, rgba(101, 228, 220, .24) 0%, rgba(165, 255, 244, .13) 38%, transparent 74%),
    radial-gradient(ellipse 38% 42% at 82% 70%, rgba(24, 130, 162, .13) 0%, rgba(11, 112, 121, .07) 45%, transparent 76%),
    radial-gradient(ellipse 30% 26% at 58% 18%, rgba(121, 183, 255, .08), transparent 72%);
  filter: blur(18px) saturate(.88);
  transform: translate3d(var(--ownership-far-x), var(--ownership-far-y), 0) scale(1.08);
  transform-origin: center;
}

.ownership-depth__caustics {
  inset: -10%;
  opacity: .42;
  background:
    repeating-radial-gradient(ellipse 46% 18% at 34% 42%, transparent 0 24px, rgba(11, 112, 121, .075) 25px 27px, transparent 29px 45px),
    repeating-radial-gradient(ellipse 34% 13% at 76% 64%, transparent 0 28px, rgba(101, 228, 220, .065) 29px 31px, transparent 33px 52px);
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 52%, #000 10%, rgba(0, 0, 0, .72) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 52%, #000 10%, rgba(0, 0, 0, .72) 55%, transparent 100%);
  filter: blur(.65px);
  transform: translate3d(var(--ownership-near-x), var(--ownership-near-y), 0) rotate(-4deg) scale(1.06);
  transform-origin: center;
}

.ownership-depth__glint {
  inset: -24%;
  opacity: .62;
  background:
    radial-gradient(ellipse 20% 42% at 53% 46%, rgba(255, 255, 255, .46), rgba(165, 255, 244, .13) 34%, transparent 72%),
    linear-gradient(118deg, transparent 34%, rgba(255, 255, 255, .04) 41%, rgba(165, 255, 244, .2) 48%, rgba(255, 255, 255, .34) 50%, rgba(101, 228, 220, .08) 55%, transparent 64%);
  filter: blur(20px);
  mix-blend-mode: screen;
  transform: translate3d(var(--ownership-glint-x), var(--ownership-glint-y), 0) rotate(-3deg) scale(1.06);
  transform-origin: center;
}

.ownership-depth__content {
  position: relative;
  z-index: 2;
  transform: translate3d(var(--ownership-content-x), var(--ownership-content-y), 0);
}

/* The cards remain paper-white while letting a trace of the light pass through. */
.panel--light.ownership-depth .support-card {
  background: linear-gradient(150deg, rgba(255, 255, 255, .91), rgba(244, 250, 251, .84));
}

.ownership-depth.is-depth-active .ownership-depth__far,
.ownership-depth.is-depth-active .ownership-depth__caustics,
.ownership-depth.is-depth-active .ownership-depth__glint,
.ownership-depth.is-depth-active .ownership-depth__content {
  will-change: transform;
}

@media (max-width: 700px) {
  .ownership-depth__far {
    background:
      radial-gradient(ellipse 58% 33% at 48% 30%, rgba(101, 228, 220, .24) 0%, rgba(165, 255, 244, .12) 42%, transparent 78%),
      radial-gradient(ellipse 52% 34% at 66% 72%, rgba(24, 130, 162, .11), transparent 76%);
  }

  .ownership-depth__caustics {
    opacity: .34;
  }

  .ownership-depth__glint {
    opacity: .52;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ownership-depth__scene {
    transition: none;
  }

  .ownership-depth__far,
  .ownership-depth__caustics,
  .ownership-depth__glint,
  .ownership-depth__content {
    transform: none;
    will-change: auto;
  }
}

@media (forced-colors: active) {
  .ownership-depth__scene {
    display: none;
  }
}

@media print {
  .ownership-depth__scene {
    display: none;
  }
}