/* Rising bottom-anchored sea with independent full-screen bubbles and lightning. */
:root {
  --y999-water-level: 52vh;
  --y999-tide-duration: 26s;
  --y999-lightning-interval: 24s;
}

body.y999-water-active { isolation: isolate; }
.y999-water {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}
.y999-water-active > .site-header { position: relative; z-index: 2; }
.y999-water-active > #page,
.y999-water-active > .site-footer { position: relative; z-index: 1; }
/* The original article stays in front of the water, including all its images. */
.y999-water-active .inside-article { background-color: rgba(255, 255, 255, .74); }
.y999-water__fill {
  position: absolute;
  inset: auto 0 0;
  height: var(--y999-water-level);
  background: linear-gradient(180deg, #249ac3 0%, #126b99 45%, #073c65 100%);
  transform: translate3d(0, calc(100% - 4vh), 0);
  animation: y999-tide-rise var(--y999-tide-duration) ease-in-out infinite;
}
.y999-lightning {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(ellipse at 18% 0, rgba(155,218,255,.35), transparent 72%);
  animation: y999-lightning-flash var(--y999-lightning-interval) linear infinite;
}
.y999-lightning__bolt {
  position: absolute;
  top: -12px;
  left: 5%;
  width: clamp(80px, 14vw, 200px);
  height: 60vh;
  filter: drop-shadow(0 0 8px #c4edff) drop-shadow(0 0 25px #5dbdff);
}
.y999-lightning__bolt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#fff, #c3edff 70%, #6cbeff);
  clip-path: polygon(54% 0, 64% 0, 43% 33%, 66% 30%, 24% 100%, 39% 52%, 20% 55%);
}
.y999-lightning__bolt--right {
  left: auto;
  right: 3%;
  height: 45vh;
  transform: scaleX(-1);
  opacity: .6;
}
.y999-water__wave {
  position: absolute;
  left: 0;
  top: -36px;
  width: calc(100% + 480px);
  height: 38px;
  background-image: url("images/ocean-wave.webp");
  background-size: 480px 38px;
  background-repeat: repeat-x;
  animation: y999-wave-drift 9s linear infinite;
}
.y999-water__wave--back {
  top: -44px;
  opacity: .35;
  animation-duration: 14s;
  animation-direction: reverse;
}
.y999-water__bubbles { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.y999-water__bubble {
  --bubble-size: 28px;
  --bubble-drift: 22px;
  position: absolute;
  bottom: -65px;
  left: 8%;
  display: block;
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 2px solid rgba(239, 253, 255, .90);
  border-radius: 50%;
  background: radial-gradient(circle at 29% 24%, rgba(255,255,255,.95) 0 7%, rgba(191,240,255,.24) 18%, rgba(6,81,142,.10) 65%, rgba(231,252,255,.42) 100%);
  box-shadow: inset -3px -4px 6px rgba(3,66,113,.13);
  opacity: .8;
  animation: y999-bubble-rise 9s linear infinite;
}
.y999-water__bubble:nth-child(1) { left:38%; --bubble-size:12px; --bubble-drift:-21px; --bubble-rest:55.6%; animation-duration:15.15s; animation-delay:-9.08s; }
.y999-water__bubble:nth-child(2) { left:75%; --bubble-size:22px; --bubble-drift:32px; --bubble-rest:26.2%; animation-duration:16.30s; animation-delay:-4.54s; }
.y999-water__bubble:nth-child(3) { left:16%; --bubble-size:34px; --bubble-drift:-18px; --bubble-rest:73.8%; animation-duration:17.45s; animation-delay:-13.92s; }
.y999-water__bubble:nth-child(4) { left:53%; --bubble-size:16px; --bubble-drift:29px; --bubble-rest:44.4%; animation-duration:18.60s; animation-delay:-8.86s; }
.y999-water__bubble:nth-child(5) { left:90%; --bubble-size:44px; --bubble-drift:-15px; --bubble-rest:14.9%; animation-duration:19.75s; animation-delay:-3.08s; }
.y999-water__bubble:nth-child(6) { left:31%; --bubble-size:26px; --bubble-drift:26px; --bubble-rest:62.5%; animation-duration:20.90s; animation-delay:-14.11s; }
.y999-water__bubble:nth-child(7) { left:68%; --bubble-size:10px; --bubble-drift:-12px; --bubble-rest:33.1%; animation-duration:22.05s; animation-delay:-7.81s; }
.y999-water__bubble:nth-child(8) { left:9%; --bubble-size:38px; --bubble-drift:23px; --bubble-rest:80.7%; animation-duration:23.20s; animation-delay:-20.26s; }
.y999-water__bubble:nth-child(9) { left:46%; --bubble-size:20px; --bubble-drift:-34px; --bubble-rest:51.3%; animation-duration:14.00s; animation-delay:-7.73s; }
.y999-water__bubble:nth-child(10) { left:83%; --bubble-size:48px; --bubble-drift:20px; --bubble-rest:21.9%; animation-duration:15.15s; animation-delay:-3.51s; }
.y999-water__bubble:nth-child(11) { left:24%; --bubble-size:14px; --bubble-drift:-31px; --bubble-rest:69.5%; animation-duration:16.30s; animation-delay:-12.24s; }
.y999-water__bubble:nth-child(12) { left:61%; --bubble-size:30px; --bubble-drift:17px; --bubble-rest:40.1%; animation-duration:17.45s; animation-delay:-7.50s; }
.y999-water__bubble:nth-child(13) { left:2%; --bubble-size:12px; --bubble-drift:-28px; --bubble-rest:10.7%; animation-duration:18.60s; animation-delay:-2.03s; }
.y999-water__bubble:nth-child(14) { left:39%; --bubble-size:22px; --bubble-drift:14px; --bubble-rest:58.2%; animation-duration:19.75s; animation-delay:-12.40s; }
.y999-water__bubble:nth-child(15) { left:76%; --bubble-size:34px; --bubble-drift:-25px; --bubble-rest:28.8%; animation-duration:20.90s; animation-delay:-6.42s; }
.y999-water__bubble:nth-child(16) { left:17%; --bubble-size:16px; --bubble-drift:11px; --bubble-rest:76.4%; animation-duration:22.05s; animation-delay:-18.22s; }
.y999-water__bubble:nth-child(17) { left:54%; --bubble-size:44px; --bubble-drift:-22px; --bubble-rest:47.0%; animation-duration:23.20s; animation-delay:-11.73s; }
.y999-water__bubble:nth-child(18) { left:91%; --bubble-size:26px; --bubble-drift:33px; --bubble-rest:17.6%; animation-duration:14.00s; animation-delay:-2.59s; }
.y999-water__bubble:nth-child(19) { left:32%; --bubble-size:10px; --bubble-drift:-19px; --bubble-rest:65.2%; animation-duration:15.15s; animation-delay:-10.66s; }
.y999-water__bubble:nth-child(20) { left:69%; --bubble-size:38px; --bubble-drift:30px; --bubble-rest:35.8%; animation-duration:16.30s; animation-delay:-6.24s; }
.y999-water__bubble:nth-child(21) { left:10%; --bubble-size:20px; --bubble-drift:-16px; --bubble-rest:83.4%; animation-duration:17.45s; animation-delay:-15.74s; }
.y999-water__bubble:nth-child(22) { left:47%; --bubble-size:48px; --bubble-drift:27px; --bubble-rest:53.9%; animation-duration:18.60s; animation-delay:-10.81s; }
.y999-water__bubble:nth-child(23) { left:84%; --bubble-size:14px; --bubble-drift:-13px; --bubble-rest:24.5%; animation-duration:19.75s; animation-delay:-5.14s; }
.y999-water__bubble:nth-child(24) { left:25%; --bubble-size:30px; --bubble-drift:24px; --bubble-rest:72.1%; animation-duration:20.90s; animation-delay:-16.29s; }
.y999-water__bubble:nth-child(25) { left:62%; --bubble-size:12px; --bubble-drift:-10px; --bubble-rest:42.7%; animation-duration:22.05s; animation-delay:-10.11s; }
.y999-water__bubble:nth-child(26) { left:3%; --bubble-size:22px; --bubble-drift:21px; --bubble-rest:13.3%; animation-duration:23.20s; animation-delay:-3.20s; }
.y999-water__bubble:nth-child(27) { left:40%; --bubble-size:34px; --bubble-drift:-32px; --bubble-rest:60.9%; animation-duration:14.00s; animation-delay:-9.20s; }
.y999-water__bubble:nth-child(28) { left:77%; --bubble-size:16px; --bubble-drift:18px; --bubble-rest:31.5%; animation-duration:15.15s; animation-delay:-5.09s; }
.y999-water__bubble:nth-child(29) { left:18%; --bubble-size:44px; --bubble-drift:-29px; --bubble-rest:79.1%; animation-duration:16.30s; animation-delay:-13.94s; }
.y999-water__bubble:nth-child(30) { left:55%; --bubble-size:26px; --bubble-drift:15px; --bubble-rest:49.7%; animation-duration:17.45s; animation-delay:-9.33s; }
.y999-water__bubble:nth-child(31) { left:92%; --bubble-size:10px; --bubble-drift:-26px; --bubble-rest:20.2%; animation-duration:18.60s; animation-delay:-3.97s; }
.y999-water__bubble:nth-child(32) { left:33%; --bubble-size:38px; --bubble-drift:12px; --bubble-rest:67.8%; animation-duration:19.75s; animation-delay:-14.47s; }
.y999-water__bubble:nth-child(33) { left:70%; --bubble-size:20px; --bubble-drift:-23px; --bubble-rest:38.4%; animation-duration:20.90s; animation-delay:-8.61s; }
.y999-water__bubble:nth-child(34) { left:11%; --bubble-size:48px; --bubble-drift:34px; --bubble-rest:9.0%; animation-duration:22.05s; animation-delay:-2.01s; }
.y999-water__bubble:nth-child(35) { left:48%; --bubble-size:14px; --bubble-drift:-20px; --bubble-rest:56.6%; animation-duration:23.20s; animation-delay:-14.16s; }
.y999-water__bubble:nth-child(36) { left:85%; --bubble-size:30px; --bubble-drift:31px; --bubble-rest:27.2%; animation-duration:14.00s; animation-delay:-4.05s; }
.y999-water__bubble:nth-child(37) { left:26%; --bubble-size:12px; --bubble-drift:-17px; --bubble-rest:74.8%; animation-duration:15.15s; animation-delay:-12.25s; }
.y999-water__bubble:nth-child(38) { left:63%; --bubble-size:22px; --bubble-drift:28px; --bubble-rest:45.4%; animation-duration:16.30s; animation-delay:-7.95s; }
.y999-water__bubble:nth-child(39) { left:4%; --bubble-size:34px; --bubble-drift:-14px; --bubble-rest:16.0%; animation-duration:17.45s; animation-delay:-2.91s; }
.y999-water__bubble:nth-child(40) { left:41%; --bubble-size:16px; --bubble-drift:25px; --bubble-rest:63.5%; animation-duration:18.60s; animation-delay:-12.76s; }
.y999-water__bubble:nth-child(41) { left:78%; --bubble-size:44px; --bubble-drift:-11px; --bubble-rest:34.1%; animation-duration:19.75s; animation-delay:-7.21s; }
.y999-water__bubble:nth-child(42) { left:19%; --bubble-size:26px; --bubble-drift:22px; --bubble-rest:81.7%; animation-duration:20.90s; animation-delay:-18.48s; }
.y999-water__bubble:nth-child(43) { left:56%; --bubble-size:10px; --bubble-drift:-33px; --bubble-rest:52.3%; animation-duration:22.05s; animation-delay:-12.42s; }
.y999-water__bubble:nth-child(44) { left:93%; --bubble-size:38px; --bubble-drift:19px; --bubble-rest:22.9%; animation-duration:23.20s; animation-delay:-5.63s; }
.y999-water__bubble:nth-child(45) { left:34%; --bubble-size:20px; --bubble-drift:-30px; --bubble-rest:70.5%; animation-duration:14.00s; animation-delay:-10.66s; }
.y999-water__bubble:nth-child(46) { left:71%; --bubble-size:48px; --bubble-drift:16px; --bubble-rest:41.1%; animation-duration:15.15s; animation-delay:-6.68s; }
.y999-water__bubble:nth-child(47) { left:12%; --bubble-size:14px; --bubble-drift:-27px; --bubble-rest:11.7%; animation-duration:16.30s; animation-delay:-1.96s; }
.y999-water__bubble:nth-child(48) { left:49%; --bubble-size:30px; --bubble-drift:13px; --bubble-rest:59.3%; animation-duration:17.45s; animation-delay:-11.15s; }

@keyframes y999-tide-rise {
  0%, 100% { transform: translate3d(0, calc(100% - 4vh), 0); }
  45%, 62% { transform: translate3d(0, 0, 0); }
}
/* One brief glow per cycle; the first strike is six seconds after page load. */
@keyframes y999-lightning-flash {
  0%, 24.7%, 27%, 100% { opacity: 0; }
  25.2% { opacity: .9; }
}
@keyframes y999-wave-drift {
  to { transform: translate3d(-480px, 0, 0); }
}
@keyframes y999-bubble-rise {
  0% { transform: translate3d(0, 0, 0) scale(.72); opacity: 0; }
  10% { opacity: .8; }
  75% { opacity: .65; }
  100% { transform: translate3d(var(--bubble-drift), calc(-100vh - 130px), 0) scale(1.08); opacity: 0; }
}
@media (max-width: 768px) {
  :root { --y999-water-level: 44vh; }
  .y999-water__bubble:nth-child(n+33) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .y999-water__fill { animation: none; transform: none; }
  .y999-lightning { display: none; animation: none; }
  .y999-water__wave { animation: none; }
  .y999-water__bubble { animation: none; bottom: var(--bubble-rest, 30%); transform: none; opacity: .6; }
}
@media print {
  .y999-water { display: none; }
  .y999-water-active .inside-article { background-color: #fff; }
}