/* =============================================================
   Motion System — bolder organic motion (v2)
   ============================================================= */

/* ────── Background blobs (visible, slowly floating) ────── */
.bg-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Pinned to viewport — always on screen, behind page content.
   Used for the page-wide paper blobs in WatercolorPage. */
.bg-blobs.is-fixed {
  position: fixed;
  inset: 0;
}
.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.2;
  will-change: transform;
  mix-blend-mode: multiply;
}

/* Paper palette — softened coral / sky / teal on cream (light) */
.bg-blobs[data-palette="paper"] .bg-blob-1 {
  width: 560px; height: 560px;
  top: -90px; right: -40px;
  background: radial-gradient(circle, rgba(232, 122, 107, 0.85) 0%, rgba(232, 122, 107, 0.0) 70%);
  animation: blobFloat 28s ease-in-out infinite;
  opacity: 0.22;
}
.bg-blobs[data-palette="paper"] .bg-blob-2 {
  width: 520px; height: 520px;
  bottom: -80px; left: -40px;
  background: radial-gradient(circle, rgba(120, 180, 232, 0.8) 0%, rgba(120, 180, 232, 0.0) 70%);
  animation: blobFloat 36s ease-in-out infinite reverse;
  opacity: 0.18;
}
.bg-blobs[data-palette="paper"] .bg-blob-3 {
  width: 480px; height: 480px;
  top: 38%; left: 46%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(70, 200, 190, 0.78) 0%, rgba(70, 200, 190, 0.0) 70%);
  animation: blobFloat 24s ease-in-out infinite;
  opacity: 0.16;
}

/* Glass palette — jade / emerald / mint (dark sections).
   Use screen blend so colours glow on the dark background. */
.bg-blobs[data-palette="glass"] .bg-blob { mix-blend-mode: screen; opacity: 0.85; }
.bg-blobs[data-palette="glass"] .bg-blob-1 {
  width: 640px; height: 640px;
  top: -180px; right: -120px;
  background: radial-gradient(circle, rgba(94, 242, 194, 0.7) 0%, rgba(94, 242, 194, 0.0) 70%);
  animation: blobFloat 30s ease-in-out infinite;
  opacity: 0.9;
}
.bg-blobs[data-palette="glass"] .bg-blob-2 {
  width: 540px; height: 540px;
  bottom: -160px; left: -100px;
  background: radial-gradient(circle, rgba(45, 200, 150, 0.7) 0%, rgba(45, 200, 150, 0.0) 70%);
  animation: blobFloat 38s ease-in-out infinite reverse;
  opacity: 0.82;
}
.bg-blobs[data-palette="glass"] .bg-blob-3 {
  width: 500px; height: 500px;
  top: 30%; left: 45%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(168, 236, 234, 0.6) 0%, rgba(168, 236, 234, 0.0) 70%);
  animation: blobFloat 26s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -50px) scale(1.10); }
  66%      { transform: translate(-44px, 44px) scale(0.94); }
}

/* Decorative blob image overlay (optional) */
.bg-blob-image {
  position: absolute;
  width: 720px; height: 720px;
  background: url("../assets/blob_floating.webp") center center / contain no-repeat;
  pointer-events: none;
  opacity: 0.12;
  animation: blobImageFloat 32s ease-in-out infinite;
  will-change: transform;
}
.bg-blob-image[data-pos="top-right"] { top: -180px; right: -120px; }
.bg-blob-image[data-pos="bottom-left"] {
  bottom: -240px; left: -180px;
  animation-name: blobImageFloatLg;
  animation-direction: reverse;
  animation-duration: 38s;
}
@keyframes blobImageFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(40px, -50px) rotate(8deg); }
  66%      { transform: translate(-40px, 36px) rotate(-8deg); }
}
@keyframes blobImageFloatLg {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1.4); }
  33%      { transform: translate(40px, -50px) rotate(8deg) scale(1.46); }
  66%      { transform: translate(-40px, 36px) rotate(-8deg) scale(1.36); }
}

/* ────── Scroll-triggered fade-in (kept) ─────────────── */
.scroll-trigger {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-trigger.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ────── Jelly-pulse CTA (kept) ─────────────────────── */
.jelly-pulse {
  animation: jellyPulse 4s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
@keyframes jellyPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
.jelly-pulse:hover { animation: none; transform: translateY(-3px) scale(1.05); }
.jelly-pulse > * { position: relative; z-index: 1; }

/* ────── Hover-lift card (more dynamic) ────────────── */
.lift-card {
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  position: relative;
}
.lift-card img,
.lift-card .lift-img {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: block;
}
.lift-card:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow:
    0 32px 64px -22px rgba(31, 150, 104, 0.30),
    0 16px 36px -14px rgba(90, 74, 58, 0.20);
}
.lift-card:hover img,
.lift-card:hover .lift-img {
  transform: scale(1.14);
}
.lift-card[data-lift="icon"]:hover .lift-img {
  transform: scale(1.16) rotate(4deg);
}

/* ────── Hero before/after image zoom on hover ──────── */
.hx-ba-card {
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
}
.hx-ba-card img {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: block;
}
.hx-ba-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 28px 60px -20px rgba(31, 150, 104, 0.32);
}
.hx-ba-card:hover img {
  transform: scale(1.18) !important;
}

/* ────── Worry cards more dynamic ───────────────────── */
.hx-worry-card {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.32s ease,
              border-color 0.32s ease !important;
}
.hx-worry-card .hx-worry-img {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hx-worry-card:hover {
  transform: translateY(-10px) scale(1.03) !important;
  box-shadow: 0 24px 50px -18px rgba(217, 122, 107, 0.30) !important;
  border-color: rgba(217, 122, 107, 0.35);
}
.hx-worry-card:hover .hx-worry-img {
  transform: scale(1.12) rotate(-3deg);
}

/* ────── Feature cards: dark glass + larger hover ─────── */
.hx-feature-card {
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.32s ease !important;
}
.hx-feature-card .hx-feature-img {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.hx-feature-card:hover {
  transform: translateY(-14px) scale(1.04) !important;
  box-shadow: 0 36px 70px -22px rgba(31, 150, 104, 0.42) !important;
}
.hx-feature-card:hover .hx-feature-img {
  transform: scale(1.10);
}

/* ────── Reduced-motion override ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-blob, .bg-blob-image, .jelly-pulse { animation: none !important; }
  .scroll-trigger { opacity: 1; transform: none; transition: none; }
  .lift-card:hover, .hx-ba-card:hover,
  .hx-worry-card:hover, .hx-feature-card:hover { transform: none !important; }
  .lift-card:hover img, .lift-card:hover .lift-img,
  .hx-ba-card:hover img, .hx-worry-card:hover .hx-worry-img,
  .hx-feature-card:hover .hx-feature-img { transform: none !important; }
}