/* ==========================================================================
   Testimonials — "Nobody's written home yet"
   Postcard rack, pufferfish rating, review form.

   Kept in its own file (not an inline <style> block) so the WordPress
   child-theme port can wp_enqueue it against the page template.

   Everything is scoped to [data-ts-root] so the shared site header/footer
   and styles.css are untouched.
   ========================================================================== */

/* --- scoped resets (the export assumed a bare document) ------------------ */
[data-ts-root] { font-family: 'Nunito Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[data-ts-root] *,
[data-ts-root] *::before,
[data-ts-root] *::after { box-sizing: border-box; }
[data-ts-root] a { color: #a8432a; text-decoration: none; }
[data-ts-root] a:hover { color: #14304e; }
[data-ts-root] input,
[data-ts-root] textarea,
[data-ts-root] select { font-family: 'Nunito Sans', system-ui, sans-serif; }
[data-ts-root] input::placeholder,
[data-ts-root] textarea::placeholder { color: #a58a63; opacity: 1; }

/* --- interactive states -------------------------------------------------
   These were style-hover / style-active / style-focus pseudo-attributes in
   the Claude Design export, which no browser understands. Real CSS now.     */
[data-pc-stampbtn]:hover { transform: translateY(-4px); }
[data-pc-stampbtn]:active { transform: translateY(4px) scale(.97); }
[data-pc-stampbtn]:focus-visible { outline: 3px solid #ffe6ad; outline-offset: 4px; }
[data-pc-restart]:focus-visible { outline: 3px solid #ffe6ad; outline-offset: 3px; }

/* The five rating radios are visually hidden but must stay focusable and
   hit-testable — the bubble is the visible control. */
[data-ts-root] input[name="rating"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  cursor: pointer;
}
/* Keyboard focus must be visible on the bubble the radio stands in for. */
[data-ts-root] input[name="rating"]:focus-visible ~ [data-bub-dot],
[data-ts-root] input[name="rating"]:focus-visible + [data-bub-dot] {
  outline: 3px solid #ffe6ad;
  outline-offset: 2px;
}
[data-ts-root] input[name="genuine"]:focus-visible + [data-check] {
  outline: 3px solid #ffe6ad;
  outline-offset: 3px;
}

/* Honeypot — a bot fills this in, a human never sees it. */
[data-ts-root] .ts-botcheck {
  display: none !important;
}

/* Inline per-field validation messages. */
[data-ts-root] [data-err] {
  display: none;
  font: 700 12px/1.4 'Nunito Sans', sans-serif;
  color: #a8432a;
  margin-top: 6px;
}

/* Visually-hidden live region (screen-reader announcements). */
[data-ts-root] [data-live] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- the cartoon sea: 18 keyframes, 28 animated elements ----------------- */
@keyframes tsDrop { 0% { transform: translateY(-42px); opacity: 0 } 66% { transform: translateY(6px); opacity: 1 } 100% { transform: translateY(0) } }
@keyframes tsCloud { 0% { transform: translateX(-30px) } 100% { transform: translateX(52px) } }
@keyframes seaWobble { 0% { transform: translateY(0) skewX(0deg) } 25% { transform: translateY(-4px) skewX(.5deg) } 50% { transform: translateY(2px) skewX(0deg) } 75% { transform: translateY(-3px) skewX(-.5deg) } 100% { transform: translateY(0) skewX(0deg) } }
@keyframes seaSwell { 0% { transform: translateX(0) } 100% { transform: translateX(-90px) } }
@keyframes seaSwell2 { 0% { transform: translateX(0) } 100% { transform: translateX(72px) } }
@keyframes fishSwim { 0% { transform: translateX(-14vw) translateY(0) scaleX(1) } 48% { transform: translateX(52vw) translateY(-14px) scaleX(1) } 50% { transform: translateX(56vw) translateY(-14px) scaleX(-1) } 98% { transform: translateX(-14vw) translateY(8px) scaleX(-1) } 100% { transform: translateX(-14vw) translateY(0) scaleX(1) } }
@keyframes fishBob { 0%, 100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-8px) rotate(3deg) } }
@keyframes finFlap { 0%, 100% { transform: rotate(-8deg) } 50% { transform: rotate(10deg) } }
@keyframes kelpSway { 0%, 100% { transform: rotate(-6deg) } 50% { transform: rotate(7deg) } }
@keyframes kelpSway2 { 0%, 100% { transform: rotate(5deg) } 50% { transform: rotate(-6deg) } }
@keyframes bubUp { 0% { transform: translateY(0) translateX(0) scale(.6); opacity: 0 } 12% { opacity: .9 } 80% { opacity: .7 } 100% { transform: translateY(-320px) translateX(var(--bx, 12px)) scale(1); opacity: 0 } }
@keyframes yachtChug { 0% { transform: translateX(0) translateY(0) } 25% { transform: translateX(24vw) translateY(-2px) } 50% { transform: translateX(48vw) translateY(0) } 50.01% { transform: translateX(48vw) translateY(0) } 100% { transform: translateX(0) translateY(0) } }
@keyframes crabSidle { 0%, 100% { transform: translateX(0) rotate(0deg) } 25% { transform: translateX(14px) rotate(2deg) } 50% { transform: translateX(22px) rotate(0deg) } 75% { transform: translateX(9px) rotate(-2deg) } }
@keyframes crabClaw { 0%, 100% { transform: rotate(0deg) } 50% { transform: rotate(-16deg) } }
@keyframes peekBubble { 0% { transform: translateY(0) scale(.5); opacity: 0 } 20% { opacity: .9 } 100% { transform: translateY(-64px) scale(1.05); opacity: 0 } }
@keyframes peekBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes sparkTwinkle { 0%, 100% { transform: scale(.7); opacity: .5 } 50% { transform: scale(1.15); opacity: 1 } }
@keyframes burstUp { 0% { transform: translateY(0) scale(.4); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateY(-46px) scale(1); opacity: 0 } }

/* --- performance gate ----------------------------------------------------
   The ambient scene is 28 continuous animations. Left alone they run forever,
   on every open tab, on battery. testimonials.js parks them two ways:

     .ts-paused on the root  — the tab is hidden: park the whole scene.
     .ts-off on an element   — that element is scrolled out of view.

   Nothing is removed — they're the charm. They just stop burning CPU when
   nobody is looking, and resume on return.                                   */
.ts-paused .ts-anim,
.ts-paused [data-ts-drop],
.ts-anim.ts-off { animation-play-state: paused !important; }

/* --- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-ts-root] [data-ts-drop],
  [data-ts-root] .ts-anim { animation: none !important; }
  [data-ts-root] [data-fly-card] { transition: none !important; }
  [data-ts-root] * { scroll-behavior: auto !important; }
}

/* --- mobile: single column, no horizontal overflow ----------------------- */
@media (max-width: 760px) {
  [data-ts-root] { overflow-x: hidden; }
}