/* Aquatic motion: shared tokens, no external assets or animation library. */
:root {
  --cta-breathe-duration: 5.5s;
  --cta-breathe-scale: 1.03;
  --cta-lift-duration: 650ms;
  --aquatic-ease: cubic-bezier(.22, .61, .36, 1);
  --ripple-duration: 780ms;
}

[data-aquatic-cta] {
  transform-origin: center;
  animation: cta-breathe var(--cta-breathe-duration) ease-in-out infinite;
  transition: background .2s, border-color .2s, color .2s;
}

/* Stable keyboard focus, rather than a moving target. */
[data-aquatic-cta]:focus-visible,
.motion-toggle:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 5px;
}

[data-aquatic-cta]:focus-visible,
[data-aquatic-cta]:disabled {
  animation: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-aquatic-cta]:hover:not(:focus-visible):not(:disabled) {
    animation: cta-lift var(--cta-lift-duration) var(--aquatic-ease) both;
  }
}

@keyframes cta-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--cta-breathe-scale)); }
}

@keyframes cta-lift {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-3px) scale(1.05); }
  72% { transform: translateY(-1px) scale(1.02); }
}

/* Each section contains its particles below its own content stacking layer. */
.aquatic-section {
  isolation: isolate;
}

.aquatic-section > .container {
  position: relative;
  z-index: 1;
}

.bubble-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.aquatic-bubble {
  position: absolute;
  left: var(--bubble-left);
  bottom: -24px;
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 1px solid rgba(174, 224, 235, .8);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(237, 251, 255, .6), rgba(135, 205, 198, .08) 45%, transparent 70%);
  opacity: 0;
  animation: bubble-rise var(--bubble-duration) linear var(--bubble-delay) infinite;
  animation-play-state: paused;
}

.bubble-field.is-active .aquatic-bubble {
  animation-play-state: running;
}

@keyframes bubble-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--bubble-opacity); }
  85% { opacity: var(--bubble-opacity); }
  100% { transform: translate3d(var(--bubble-drift), calc(-1 * var(--bubble-travel)), 0); opacity: 0; }
}

/* Viewport coordinates avoid scroll-offset errors; the layer never captures input. */
.ripple-layer {
  position: fixed;
  inset: 0;
  z-index: 19;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.water-ripple {
  position: absolute;
  width: 138px;
  height: 138px;
  margin: -69px 0 0 -69px;
  border: 1px solid rgba(184, 229, 246, .65);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 45%, rgba(143, 209, 240, .1) 61%, rgba(233, 248, 255, .3) 68%, transparent 72%);
  box-shadow: inset 0 0 12px rgba(167, 224, 246, .12), 0 0 12px rgba(167, 224, 246, .1);
  animation: water-ripple var(--ripple-duration) var(--aquatic-ease) both;
}

.water-ripple::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(220, 245, 255, .35);
  border-radius: inherit;
}

@keyframes water-ripple {
  0% { transform: scale(.12); opacity: 0; }
  14% { opacity: .55; }
  100% { transform: scale(1); opacity: 0; }
}

.motion-toggle {
  position: absolute;
  z-index: 2;
  right: max(40px, calc((100% - 1180px) / 2));
  bottom: 21px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(135, 205, 198, .2);
  border-radius: 2px;
  background: rgba(11, 58, 80, .45);
  color: rgba(243, 238, 230, .72);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.motion-toggle:hover { border-color: var(--aqua); color: var(--pearl); }
.motion-toggle[hidden] { display: none; }

[data-motion-paused] [data-aquatic-cta],
[data-motion-paused] [data-aquatic-cta]:hover {
  animation: none;
  transform: none;
}

[data-motion-paused] .aquatic-bubble,
[data-page-hidden] [data-aquatic-cta],
[data-page-hidden] .aquatic-bubble {
  animation-play-state: paused;
}

[data-motion-paused] .ripple-layer { display: none; }

@media (max-width: 700px) {
  .aquatic-bubble:nth-child(n + 9) { display: none; }
  .motion-toggle { right: 18px; bottom: 12px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-aquatic-cta],
  [data-aquatic-cta]:hover,
  [data-aquatic-cta]:focus {
    animation: none;
    transform: none;
    transition: none;
  }
  .bubble-field, .ripple-layer, .motion-toggle { display: none; }
}