/* V11 — dual-tone water and moving shafts at the ORIGINAL surface light.
   The old overscan was -30% / -15%, with a 66% / 0% conic origin.
   That is 70.8vw / -30vh: above the gallery, NOT the screen's far-right corner.
   Every ray rotates around this shared fixed source; no mouse steering. */
:root {
  --sea: #010307;
  --ocean-ice-light: 82, 171, 195;
  --ocean-lavender-light: 153, 122, 215;
}

.ocean {
  background:
    /* Black is a large, soft volume within the WATER, not an animal overlay. */
    radial-gradient(ellipse 61% 56% at 35% 75%,
      rgba(0, 1, 3, .98) 8%, rgba(0, 1, 3, .88) 34%,
      rgba(0, 2, 5, .36) 67%, transparent 100%),
    radial-gradient(ellipse 29% 43% at 103% 60%,
      rgba(var(--ocean-lavender-light), .15),
      rgba(58, 39, 95, .12) 42%, transparent 92%),
    radial-gradient(ellipse 49% 57% at 70.8% -14%,
      rgba(var(--ocean-ice-light), .28),
      rgba(24, 75, 99, .32) 36%, rgba(5, 24, 40, .11) 73%, transparent 100%),
    linear-gradient(153deg, #05121d 0%, #020812 32%, #010307 56%, #000103 77%, #030410 100%);
}

.water-light {
  z-index: 0;
  inset: -30% -15% 0;
  opacity: .76;
  background: none;
  filter: none;
  transform: none;
  animation: none;
  /* Strong at the surface, absorbed quickly by the black middle/deep water. */
  mask-image: linear-gradient(#000 0%, #000 14%, rgba(0, 0, 0, .82) 26%, rgba(0, 0, 0, .30) 43%, rgba(0, 0, 0, .065) 59%, transparent 75%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 14%, rgba(0, 0, 0, .82) 26%, rgba(0, 0, 0, .30) 43%, rgba(0, 0, 0, .065) 59%, transparent 75%);
}

.water-light > span {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 66% 0%;
  pointer-events: none;
}

/* Broad scattered light, under two independent sets of uneven refracted rays.
   Only opacity and transform animate. Blur radii and gradient textures stay fixed. */
.water-light__veil {
  background: conic-gradient(from 142deg at 66% 0%,
    transparent 0deg,
    rgba(var(--ocean-ice-light), .055) 9deg,
    rgba(var(--ocean-ice-light), .11) 24deg,
    rgba(var(--ocean-ice-light), .045) 38deg,
    rgba(var(--ocean-ice-light), .08) 51deg,
    rgba(var(--ocean-lavender-light), .035) 66deg,
    transparent 82deg);
  filter: blur(9px);
  animation: surface-light-veil 19s ease-in-out infinite;
}

.water-light__rays {
  background: conic-gradient(from 146deg at 66% 0%,
    transparent 0deg, transparent 5deg,
    rgba(var(--ocean-ice-light), .09) 8deg, transparent 11deg,
    transparent 15deg, rgba(var(--ocean-ice-light), .20) 19deg, transparent 24deg,
    transparent 28deg, rgba(151, 220, 234, .14) 31deg, transparent 34deg,
    transparent 36deg, rgba(var(--ocean-ice-light), .18) 41deg, transparent 47deg,
    transparent 51deg, rgba(var(--ocean-ice-light), .085) 55deg, transparent 60deg,
    transparent 64deg, rgba(var(--ocean-lavender-light), .07) 68deg, transparent 73deg);
  filter: blur(2.4px);
  animation: surface-light-rays 13s ease-in-out infinite;
}

.water-light__shimmer {
  background: conic-gradient(from 148deg at 66% 0%,
    transparent 0deg, transparent 12deg,
    rgba(168, 225, 237, .13) 14deg, transparent 17deg,
    transparent 25deg, rgba(var(--ocean-ice-light), .12) 28deg, transparent 30deg,
    transparent 37deg, rgba(var(--ocean-ice-light), .08) 39deg, transparent 43deg,
    transparent 49deg, rgba(var(--ocean-lavender-light), .095) 52deg, transparent 56deg,
    transparent 61deg, rgba(var(--ocean-ice-light), .06) 63deg, transparent 66deg);
  filter: blur(3.2px);
  animation: surface-light-shimmer 9s ease-in-out infinite;
}

/* All color and light sit BEHIND the original point-cloud canvas. */
.ocean-vignette { background: none; }
.water-grain { opacity: .025; }

@keyframes surface-light-veil {
  0%, 100% { transform: rotate(-1.2deg); opacity: .65; }
  45% { transform: rotate(1.7deg); opacity: .94; }
  72% { transform: rotate(.6deg); opacity: .77; }
}
@keyframes surface-light-rays {
  0%, 100% { transform: rotate(-1.8deg) scaleX(.98); opacity: .68; }
  38% { transform: rotate(2.4deg) scaleX(1.025); opacity: .94; }
  71% { transform: rotate(.4deg) scaleX(1.008); opacity: .57; }
}
@keyframes surface-light-shimmer {
  0%, 100% { transform: rotate(2.7deg) scaleX(1.012); opacity: .78; }
  42% { transform: rotate(-2deg) scaleX(.975); opacity: .34; }
  76% { transform: rotate(.7deg) scaleX(1.026); opacity: .86; }
}

/* The visitor's existing pause button freezes the exact light phase too.
   Fresh entry remains animated, matching the established product choice. */
body.is-paused .water-light > span { animation-play-state: paused !important; }

@media (max-width: 650px) {
  .ocean {
    background:
      radial-gradient(ellipse 110% 53% at 23% 75%,
        rgba(0, 1, 3, .96) 8%, rgba(0, 1, 3, .80) 36%, transparent 96%),
      radial-gradient(ellipse 61% 43% at 112% 61%,
        rgba(var(--ocean-lavender-light), .14), rgba(58, 39, 95, .11) 44%, transparent 94%),
      radial-gradient(ellipse 96% 56% at 70.8% -14%,
        rgba(var(--ocean-ice-light), .25), rgba(24, 75, 99, .28) 37%, transparent 100%),
      linear-gradient(153deg, #05121d, #020812 32%, #010307 56%, #000103 80%, #030410);
  }
  /* Override the legacy mobile 300vw light sheet; retain the same source. */
  .water-light { inset: -30% -15% 0; }
  .water-light__veil { filter: blur(6px); }
  .water-light__rays { filter: blur(1.4px); }
  .water-light__shimmer { filter: blur(2px); }
}