/**
 * Block: faq-hero (patterns/faq-hero.php)
 * Question “soap bubbles” float through the non-text hero area.
 * Bottom edge is clipped with the same multi-blue seam as the wave divider.
 *
 * Float keyframes (pre mouse-nudge) are snapshotted in:
 * faq-hero-bubble-rise.snapshot-2026-07-26.css
 * Nudge (pre click-to-pop) is snapshotted in:
 * faq-hero.snapshot-nudge-2026-07-26.css + faq-bubble-nudge.snapshot-2026-07-26.js
 */

.tidal-wave-faq-hero.tidal-wave-wave-section {
  --tidal-wave-faq-bubble-zone-start: 52%;
  /*
   * Bubble field calibration vs the painted multi-blue divider:
   *   top extend  — field starts above the hero so the clip isn’t short at the top
   *   bottom inset — pull the seam up so the wavy cut isn’t low into the divider
   * faq-bubble-clip.js uses |bottom| / boxHeight so the wave band stays in the seam.
   */
  --tidal-wave-faq-bubble-top-extend: 30px;
  --tidal-wave-faq-bubble-bottom-inset: 20px;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.tidal-wave-faq-hero .tidal-wave-wave-panel.tidal-wave-page-hero__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(100%, var(--wp--style--global--wide-size, 1240px));
  margin-inline: auto;
}

.tidal-wave-faq-hero .tidal-wave-page-hero__columns {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  /* Match How It Works: copy column drives height. */
  align-items: stretch;
}

.tidal-wave-faq-hero .tidal-wave-page-hero__columns > .wp-block-column {
  min-width: 0;
}

.tidal-wave-faq-hero .tidal-wave-page-hero__columns .tidal-wave-headline,
.tidal-wave-faq-hero .tidal-wave-page-hero__columns p {
  overflow-wrap: break-word;
}

.tidal-wave-faq-hero__copy {
  position: relative;
  z-index: 2;
}

.tidal-wave-faq-hero__actions.tidal-wave-hero__actions {
  gap: 0.55rem;
  row-gap: 0.55rem;
  margin-block-start: var(--tidal-wave-copy-action-gap) !important;
}

/*
 * Right column is a bubble-safe spacer only — never force aspect-ratio on the
 * 45% column (that made the hero as tall as ~half the row width).
 */
.tidal-wave-faq-hero__visual {
  position: relative;
  min-height: 0;
  align-self: stretch;
}

.tidal-wave-faq-hero__stage {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.tidal-wave-faq-hero__bubble-clip {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ——— Floating bubble field ——— */

.tidal-wave-faq-hero__bubbles {
  position: absolute;
  top: calc(-1 * var(--tidal-wave-faq-bubble-top-extend, 20px));
  right: 0;
  left: 0;
  /*
   * Full hero + wave-edge into the divider, then pull up by bottom-inset so the
   * wavy cut lines up with the painted seam (was ~10px low).
   */
  bottom: calc(
    -1 * var(--tidal-wave-wave-edge-height, var(--tidal-wave-edge-height, 76px)) +
      var(--tidal-wave-faq-bubble-bottom-inset, 10px)
  );
  z-index: 0;
  pointer-events: none;
  /*
   * Wave seam clip (same knot/bezier math as the divider). Bubbles rise from
   * inside this shape so they appear along the wave, not a straight cut.
   */
  -webkit-clip-path: url("#tidal-wave-faq-bubble-clip-lg");
  clip-path: url("#tidal-wave-faq-bubble-clip-lg");
}

.tidal-wave-faq-bubble {
  --faq-bubble-opacity-mobile: calc(var(--faq-bubble-opacity) * 0.38);
  /* Pointer nudge offsets (set by faq-bubble-nudge.js; 0 when idle). */
  --faq-bubble-push-x: 0px;
  --faq-bubble-push-y: 0px;
  position: absolute;
  left: calc(
    var(--tidal-wave-faq-bubble-zone-start) +
      (100% - var(--tidal-wave-faq-bubble-zone-start)) * var(--faq-bubble-left) / 100
  );
  /* Start just under the wave band; the divider clip reveals them as they rise. */
  bottom: 0;
  width: var(--faq-bubble-size);
  height: var(--faq-bubble-size);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: tidal-wave-faq-bubble-rise;
  animation-duration: var(--faq-bubble-duration);
  animation-delay: var(--faq-bubble-delay);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* Parent field is pointer-events:none; bubbles opt back in for click-to-pop. */
  pointer-events: auto;
  cursor: pointer;
}

.tidal-wave-faq-bubble img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 6px 12px rgba(7, 43, 99, 0.12));
  transform-origin: center center;
}

.tidal-wave-faq-bubble--dot img {
  filter: none;
}

/* Click-to-pop: squash the live bubble, then burst the popped SVG. */
.tidal-wave-faq-bubble.is-popping {
  z-index: 4;
  opacity: 1 !important;
  animation: none !important;
  pointer-events: none;
  cursor: default;
}

.tidal-wave-faq-bubble.is-popping img {
  animation: tidal-wave-faq-bubble-squash 95ms cubic-bezier(0.4, 0, 0.8, 0.2) forwards;
}

.tidal-wave-faq-bubble-burst {
  position: absolute;
  z-index: 6;
  display: block;
  margin: 0;
  padding: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.35);
  opacity: 1;
  /* Linear scale so the ring expands evenly; opacity fades late. */
  animation: tidal-wave-faq-bubble-burst 680ms linear forwards;
  will-change: transform, opacity;
}

.tidal-wave-faq-bubble-burst img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 4px 12px rgba(7, 43, 99, 0.22));
}

@keyframes tidal-wave-faq-bubble-squash {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: drop-shadow(0 6px 12px rgba(7, 43, 99, 0.12));
  }

  40% {
    transform: scale(0.55, 0.38);
    opacity: 0.9;
  }

  100% {
    transform: scale(0.08);
    opacity: 0;
    filter: blur(1.5px);
  }
}

@keyframes tidal-wave-faq-bubble-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.35) rotate(-3deg);
    opacity: 0;
  }

  6% {
    transform: translate(-50%, -50%) scale(0.5) rotate(-1deg);
    opacity: 0.95;
  }

  /* Small → large ring completes earlier; fade starts while still expanding. */
  18% {
    transform: translate(-50%, -50%) scale(0.95) rotate(1deg);
    opacity: 1;
  }

  28% {
    transform: translate(-50%, -50%) scale(1.4) rotate(0deg);
    opacity: 0.85;
  }

  40% {
    transform: translate(-50%, -50%) scale(1.95) rotate(1deg);
    opacity: 0.55;
  }

  55% {
    transform: translate(-50%, -50%) scale(2.35) rotate(2deg);
    opacity: 0.28;
  }

  72% {
    transform: translate(-50%, -50%) scale(2.5) rotate(3deg);
    opacity: 0.1;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.6) rotate(4deg);
    opacity: 0;
  }
}

@keyframes tidal-wave-faq-bubble-rise {
  0% {
    transform: translate3d(var(--faq-bubble-push-x), var(--faq-bubble-push-y), 0) scale(0.86);
    opacity: 0;
  }

  3% {
    opacity: var(--faq-bubble-opacity);
  }

  45% {
    transform: translate3d(
      calc(var(--faq-bubble-drift) * 0.55 + var(--faq-bubble-push-x)),
      calc(-48vh + var(--faq-bubble-push-y)),
      0
    ) scale(1);
    opacity: var(--faq-bubble-opacity);
  }

  78% {
    opacity: calc(var(--faq-bubble-opacity) * 0.85);
  }

  100% {
    transform: translate3d(
      calc(var(--faq-bubble-drift) + var(--faq-bubble-push-x)),
      calc(-112vh + var(--faq-bubble-push-y)),
      0
    ) scale(1.05);
    opacity: 0;
  }
}

@keyframes tidal-wave-faq-bubble-rise-mobile {
  0% {
    transform: translate3d(var(--faq-bubble-push-x), var(--faq-bubble-push-y), 0) scale(0.9);
    opacity: 0;
  }

  4% {
    opacity: var(--faq-bubble-opacity-mobile);
  }

  50% {
    transform: translate3d(
      calc(var(--faq-bubble-drift) * 0.4 + var(--faq-bubble-push-x)),
      calc(-55vh + var(--faq-bubble-push-y)),
      0
    ) scale(1);
    opacity: var(--faq-bubble-opacity-mobile);
  }

  100% {
    transform: translate3d(
      calc(var(--faq-bubble-drift) + var(--faq-bubble-push-x)),
      calc(-118vh + var(--faq-bubble-push-y)),
      0
    ) scale(1.04);
    opacity: 0;
  }
}

.tidal-wave-faq-bubble--group-2 {
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tidal-wave-faq-bubble--group-3 {
  animation-timing-function: cubic-bezier(0.33, 0.2, 0.25, 1);
}

.tidal-wave-faq-bubble--group-4 {
  animation-timing-function: ease-in-out;
}

@media (max-width: 1024px) {
  .tidal-wave-faq-hero__bubbles {
    -webkit-clip-path: url("#tidal-wave-faq-bubble-clip-md");
    clip-path: url("#tidal-wave-faq-bubble-clip-md");
  }
}

@media (max-width: 781px) {
  .tidal-wave-faq-hero {
    --tidal-wave-faq-bubble-zone-start: 0%;
    /* Mobile bottom seam is already calibrated — keep the previous inset. */
    --tidal-wave-faq-bubble-bottom-inset: 10px;
  }

  .tidal-wave-faq-hero__bubbles {
    bottom: calc(
      -1 * var(--tidal-wave-wave-edge-height-mobile, var(--tidal-wave-edge-height-mobile, 68px)) +
        var(--tidal-wave-faq-bubble-bottom-inset, 10px)
    );
    -webkit-clip-path: url("#tidal-wave-faq-bubble-clip-sm");
    clip-path: url("#tidal-wave-faq-bubble-clip-sm");
    z-index: 0;
  }

  .tidal-wave-faq-hero__copy {
    z-index: 2;
  }

  .tidal-wave-faq-hero .tidal-wave-page-hero__columns {
    flex-direction: column;
  }

  .tidal-wave-faq-hero__visual {
    display: none;
  }

  .tidal-wave-faq-bubble {
    animation-name: tidal-wave-faq-bubble-rise-mobile;
  }

  .tidal-wave-faq-bubble img {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tidal-wave-faq-bubble {
    animation: none;
    opacity: calc(var(--faq-bubble-opacity) * 0.55);
    bottom: auto;
    top: calc(18% + (var(--faq-bubble-left) * 0.35%));
    transform: translate3d(calc(var(--faq-bubble-drift) * 0.25), 0, 0);
    pointer-events: none;
    cursor: default;
  }

  .tidal-wave-faq-bubble.is-popping,
  .tidal-wave-faq-bubble-burst {
    display: none;
  }

  @media (max-width: 781px) {
    .tidal-wave-faq-bubble {
      opacity: calc(var(--faq-bubble-opacity) * 0.28);
    }
  }
}