/* Separate layer: vivid coastal motion stays below offer content. */
.offer-wave-target {
  position: relative;
  isolation: isolate;
}

.offer-wave-target.offer-wave-target > .offer-wave-overlay {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  display: block;
  width: 100%;
  height: 58px;
  max-height: 26%;
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 320ms ease;
  contain: paint;
}

.offer-wave-target > :not(.offer-wave-overlay):not(.card-ripple):not(.card-wave) {
  position: relative;
  z-index: 2;
}

.offer-wave-target > .card-wave {
  display: none;
}

.offer-wave-layer {
  position: absolute;
  inset: auto auto 0 0;
  display: block;
  width: 200%;
  max-width: none;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: offer-wave-drift 5.8s linear infinite;
  animation-play-state: paused;
}

.offer-wave-layer-back {
  fill: #26d5cb;
  opacity: 0.24;
  animation-direction: reverse;
}

.offer-wave-layer-front {
  bottom: -8px;
  fill: #39eee0;
  opacity: 0.32;
  animation-duration: 4.2s;
}

.offer-wave-target:focus-within > .offer-wave-overlay {
  opacity: 1;
  transform: translateY(0);
}

.offer-wave-target:focus-within > .offer-wave-overlay .offer-wave-layer {
  animation-play-state: running;
}

@media (hover: hover) {
  .offer-wave-target:hover > .offer-wave-overlay {
    opacity: 1;
    transform: translateY(0);
  }

  .offer-wave-target:hover > .offer-wave-overlay .offer-wave-layer {
    animation-play-state: running;
  }
}

.offer-wave-cell.offer-wave-target > .offer-wave-overlay {
  height: 18px;
  max-height: 28%;
}

.offer-wave-cell .offer-wave-layer {
  opacity: 0.2;
}

/* Keep the same waves without washing out cyan links on dark cards. */
[data-theme="dark"] .offer-wave-layer-back { opacity: 0.10; }
[data-theme="dark"] .offer-wave-layer-front { opacity: 0.12; }

@keyframes offer-wave-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.wave-sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  padding: 0.625rem;
  border: 1px solid rgba(73, 210, 201, 0.45);
  border-radius: 999px;
  background: #112b3f;
  color: #d9f8f4;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  transition: border-color 180ms ease, background-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.wave-sound-toggle:hover {
  background: #173b4d;
  border-color: #50e0d1;
}

.wave-sound-toggle[aria-pressed="true"] {
  background: #11443f;
  border-color: #59e4cf;
  color: #e2fff9;
}

.wave-sound-toggle:focus-visible {
  outline: 3px solid #63eee0;
  outline-offset: 4px;
}

.wave-sound-icon {
  flex: 0 0 20px;
  pointer-events: none;
}

.wave-sound-toggle .wave-sound-icon-on,
.wave-sound-toggle[aria-pressed="true"] .wave-sound-icon-off {
  display: none;
}

.wave-sound-toggle[aria-pressed="true"] .wave-sound-icon-on {
  display: block;
}

.wave-sound-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wave-controls-fallback {
  position: fixed;
  z-index: 45;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  max-width: min(21rem, calc(100vw - 6.5rem));
}

@media (prefers-reduced-motion: reduce) {
  .offer-wave-target.offer-wave-target > .offer-wave-overlay,
  .wave-sound-toggle {
    transition: none;
  }

  .offer-wave-layer {
    animation: none;
  }
}