body.has-deep-sea { background: #010304; }
main[data-deep-sea] {
  background: linear-gradient(180deg,
    var(--background) 0,
    var(--background) var(--site-depth-start, 1100px),
    #010304 100%);
}
.deep-sea-footer {
  position: relative;
  padding-block: 16px max(16px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.deep-sea-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--safe-gutter-left);
  right: var(--safe-gutter-right);
  height: 1px;
  background: color-mix(in srgb, var(--secondary) 14%, transparent);
}
.deep-sea-scene { display: block; position: relative; width: min(100%, 540px); height: 144px; margin-inline: auto; color: inherit; text-decoration: none; }
.deep-sea-scene:focus-visible { outline: 2px solid var(--site-focus, var(--secondary)); outline-offset: -2px; border-radius: 4px; }
.deep-sea-scene > svg { pointer-events: none; display: block; width: 100%; height: 100%; overflow: visible; }
.deep-sea-craft { animation: bathyscaphe-drift 10s ease-in-out infinite; animation-play-state: paused; }
.deep-sea-beam,
.deep-sea-world { animation: bathyscaphe-light 10s ease-in-out infinite; animation-play-state: paused; }
.deep-sea-anemone__soft { transform-origin: 0 0; transform: scale(1, 1); }
.deep-sea-anemone__hit { pointer-events: all; touch-action: pan-y; }
.deep-sea-anemone__tentacles path { transform-origin: 0 -5px; animation: anemone-sway 6s ease-in-out infinite; animation-play-state: paused; }
.deep-sea-anemone__tentacles path:nth-child(2n) { animation-duration: 5.2s; animation-delay: -1.8s; animation-direction: reverse; }
.deep-sea-anemone__tentacles path:nth-child(3n) { animation-duration: 6.8s; animation-delay: -3.3s; }
.deep-sea-jellyfish-position { opacity: .78; }
.deep-sea-jellyfish { animation: jellyfish-drift 12s ease-in-out infinite; animation-play-state: paused; }
.deep-sea-jellyfish__bell { transform-origin: 0 2px; animation: jellyfish-pulse 4.2s ease-in-out infinite; animation-play-state: paused; }
.deep-sea-jellyfish__tentacles { transform-origin: 0 3px; animation: jellyfish-tentacles 5.5s ease-in-out infinite; animation-play-state: paused; }
.deep-sea-footer--visible :is(.deep-sea-craft, .deep-sea-beam, .deep-sea-world, .deep-sea-anemone__tentacles path, .deep-sea-jellyfish, .deep-sea-jellyfish__bell, .deep-sea-jellyfish__tentacles) { animation-play-state: running; }
.deep-sea-credit {
  position: absolute;
  left: 33%;
  top: 53%;
  margin: 0;
  color: transparent;
  background: linear-gradient(90deg, color-mix(in srgb, var(--secondary) 45%, #55726f), color-mix(in srgb, var(--secondary) 26%, #5a6867) 100%);
  background-clip: text;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .025em;
  white-space: nowrap;
  transform: translateY(-50%);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.deep-sea-credit__copyright { font-family: Arial, sans-serif; font-size: 1.5em; line-height: 1; vertical-align: -.08em; }
.deep-sea-scene:is(:hover, :focus-visible) .deep-sea-credit { text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--secondary) 26%, #5a6867); }
@keyframes bathyscaphe-drift { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@keyframes bathyscaphe-light { 0%, 100% { opacity: .84; } 50% { opacity: 1; } }
@keyframes anemone-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes jellyfish-drift { 0%, 100% { transform: translate(-2px, 3px); } 50% { transform: translate(2px, -3px); } }
@keyframes jellyfish-pulse { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.06, .92); } }
@keyframes jellyfish-tentacles { 0%, 100% { transform: rotate(-3deg) scaleY(1); } 50% { transform: rotate(3deg) scaleY(.94); } }
@media (max-width: 560px) { .deep-sea-scene { height: 128px; } .deep-sea-credit { font-size: 13px; } }
@media (forced-colors: active) { .deep-sea-credit { color: LinkText; background: none; } .deep-sea-scene:is(:hover, :focus-visible) .deep-sea-credit { text-decoration-color: LinkText; } }