/* =============================================================================
 * blob-animations.css
 * Pure-CSS blob animations that replace the Lottie JSON animations.
 * All motion runs on the GPU compositor thread — zero JS runtime cost.
 *
 * Usage: add class  css-blob--<variant>  alongside the existing
 *        .lottie-animation class on the container div.
 *
 * Variants:
 *   css-blob--purple   → replaces Animation---1713407530208.json & Animation---1713408013157.json
 *   css-blob--lavender → replaces Animation---1713407976547.json & Animation---1714408261174.json
 *   css-blob--blue     → replaces Lottie-A.json
 *   css-blob--teal     → replaces Lottie-B.json
 *   css-blob--hero     → replaces Lottie-Hero.json (two-layer, use inner divs)
 * ============================================================================= */

/* --------------------------------------------------------------------------- *
 * Shared defaults applied to every variant
 * --------------------------------------------------------------------------- */
.css-blob--purple,
.css-blob--lavender,
.css-blob--blue,
.css-blob--teal {
  will-change: border-radius, transform;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------- *
 * Purple  –  solid #9C73F8
 * Source blobs: "lt blue blob", "Blob-BG-Frankly"
 * --------------------------------------------------------------------------- */
.css-blob--purple {
  background: #9c73f8;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation:
    blob-morph-a 10s ease-in-out infinite,
    blob-drift-a 15s ease-in-out infinite;
}

/* --------------------------------------------------------------------------- *
 * Lavender/Pink/Blue gradient
 * Source blobs: "IMG_BLOB_YELLOW_RED", "Blob lava"
 * Colors extracted from JSON gradient stops (RGBA float → hex)
 * --------------------------------------------------------------------------- */
.css-blob--lavender {
  background: linear-gradient(135deg, #bc8ef7 0%, #ffbdf9 50%, #8debfd 100%);
  border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%;
  animation:
    blob-morph-b 12s ease-in-out infinite,
    blob-drift-b 18s ease-in-out infinite;
}

/* --------------------------------------------------------------------------- *
 * Blue → Cyan gradient
 * Source blob: Lottie-A.json  (#66A6FF → #89F7FE)
 * --------------------------------------------------------------------------- */
.css-blob--blue {
  background: linear-gradient(135deg, #66a6ff 0%, #89f7fe 100%);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  animation:
    blob-morph-c 9s ease-in-out infinite,
    blob-drift-c 14s ease-in-out infinite;
}

/* --------------------------------------------------------------------------- *
 * Teal → Green gradient
 * Source blob: Lottie-B.json  (#38D7CD → #29FB96)
 * --------------------------------------------------------------------------- */
.css-blob--teal {
  background: linear-gradient(135deg, #38d7cd 0%, #29fb96 100%);
  border-radius: 50% 50% 30% 70% / 50% 70% 30% 50%;
  animation:
    blob-morph-d 11s ease-in-out infinite,
    blob-drift-d 16s ease-in-out infinite;
}

/* --------------------------------------------------------------------------- *
 * Hero — two-layer blobs (Lottie-Hero.json)
 * The .lottie-animation parent handles position/blur; children hold colours.
 * --------------------------------------------------------------------------- */
.css-blob--hero {
  /* The parent .lottie-animation already provides:
     position:absolute; inset:0%; width:100%; filter:blur(40px); z-index:-10;
     We just need the children positioned inside it. */
}

.css-blob--hero .css-blob__inner {
  position: absolute;
  will-change: border-radius, transform;
}

/* Layer 1 — Golden-Yellow → Orange-Red  (right side, larger) */
.css-blob--hero .css-blob__inner--1 {
  background: linear-gradient(135deg, #f6d365 0%, #ff7952 100%);
  width: 65%;
  height: 65%;
  right: -5%;
  top: 10%;
  border-radius: 50% 50% 30% 70% / 50% 30% 70% 50%;
  animation:
    blob-morph-a 10s ease-in-out infinite,
    blob-drift-a 15s ease-in-out infinite;
}

/* Layer 2 — Orange → Hot-Pink  (left side, smaller, delayed) */
.css-blob--hero .css-blob__inner--2 {
  background: linear-gradient(135deg, #ff7a22 0%, #ff4ab9 100%);
  width: 55%;
  height: 55%;
  left: 0%;
  bottom: 0%;
  border-radius: 60% 40% 30% 70% / 60% 50% 50% 40%;
  animation:
    blob-morph-b 14s ease-in-out infinite 2s,
    blob-drift-b 20s ease-in-out infinite;
}

/* =============================================================================
 * Keyframes — morphing (border-radius)
 * ============================================================================= */
@keyframes blob-morph-a {
  0%,  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%        { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%        { border-radius: 50% 60% 30% 40% / 50% 60% 70% 30%; }
  75%        { border-radius: 40% 50% 60% 30% / 40% 70% 40% 60%; }
}

@keyframes blob-morph-b {
  0%,  100% { border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%; }
  25%        { border-radius: 60% 40% 30% 70% / 60% 40% 70% 40%; }
  50%        { border-radius: 40% 60% 60% 40% / 70% 30% 60% 40%; }
  75%        { border-radius: 55% 45% 40% 60% / 40% 55% 45% 60%; }
}

@keyframes blob-morph-c {
  0%,  100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  33%        { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  66%        { border-radius: 30% 70% 50% 50% / 50% 40% 60% 50%; }
}

@keyframes blob-morph-d {
  0%,  100% { border-radius: 50% 50% 30% 70% / 50% 70% 30% 50%; }
  33%        { border-radius: 70% 30% 50% 50% / 30% 50% 70% 50%; }
  66%        { border-radius: 40% 60% 60% 40% / 60% 40% 40% 60%; }
}

/* =============================================================================
 * Keyframes — drifting (translate / rotate / scale)
 * ============================================================================= */
@keyframes blob-drift-a {
  0%,  100% { transform: translate(0,    0)    rotate(0deg)  scale(1);    }
  25%        { transform: translate(3%,   5%)   rotate(5deg)  scale(1.05); }
  50%        { transform: translate(-2%,  3%)   rotate(-3deg) scale(0.97); }
  75%        { transform: translate(4%,  -2%)   rotate(6deg)  scale(1.03); }
}

@keyframes blob-drift-b {
  0%,  100% { transform: translate(0,    0)    rotate(0deg)  scale(1);    }
  25%        { transform: translate(-4%,  3%)   rotate(-5deg) scale(1.04); }
  50%        { transform: translate(3%,  -4%)   rotate(4deg)  scale(0.98); }
  75%        { transform: translate(-2%,  5%)   rotate(-3deg) scale(1.02); }
}

@keyframes blob-drift-c {
  0%,  100% { transform: translate(0,    0)    scale(1);    }
  33%        { transform: translate(4%,  -3%)   scale(1.06); }
  66%        { transform: translate(-3%,  4%)   scale(0.96); }
}

@keyframes blob-drift-d {
  0%,  100% { transform: translate(0,    0)    scale(1);    }
  33%        { transform: translate(-3%,  5%)   scale(1.04); }
  66%        { transform: translate(5%,  -2%)   scale(0.97); }
}

/* =============================================================================
 * Respect prefers-reduced-motion
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .css-blob--purple,
  .css-blob--lavender,
  .css-blob--blue,
  .css-blob--teal,
  .css-blob--hero .css-blob__inner {
    animation: none;
  }
}

/* =============================================================================
 * Safari fix: prevent hero phone image distortion
 * Webflow sets .dashboard-02 with width + fixed height on desktop.
 * This keeps the same visual cap while preserving image aspect ratio.
 * ============================================================================= */
.hero-image-item .dashboard-02 {
  width: auto;
  height: auto;
  max-height: 572px;
  max-width: 100%;
  object-fit: contain;
  aspect-ratio: 466 / 747;
}