/**
 * ChipsAI Blob Container
 *
 * Pure-CSS animated background blobs.
 * No JS, no external dependencies.
 *
 * @package ChipsAI\CustomBlocks
 */

/* ============================================
   ROOT CONTAINER
   ============================================ */

.cai-blob-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate; /* contain blend modes & z-index */
}

/* ============================================
   BLOB LAYER
   ============================================ */

.cai-blob-container__blobs {
    --cai-blob-blur: 90px;
    --cai-blob-opacity: 0.55;
    --cai-blob-blur-scale: 1; /* mobile multiplier — reduced via media query */

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    /* Isolate the blob layer onto its own composited layer so animation repaints
       don't trigger layout/paint of the surrounding page (huge mobile win). */
    transform: translateZ(0);
    contain: layout paint style;
}

/* Wrapper handles ABSOLUTE POSITIONING + cursor/parallax JS-driven transforms.
   Inner blob handles VISUAL (color, blur, morph + float animations).
   Splitting these layers prevents JS transforms from fighting CSS animations. */
/* Register --cai-blob-pulse as a typed custom property so it can be smoothly
   animated by CSS keyframes (pulse animation below). Untyped vars cannot
   interpolate between keyframes — they would just snap. */
@property --cai-blob-pulse {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

.cai-blob-container__blob-wrap {
    --cai-blob-size: 50%;
    --cai-blob-x: 50%;
    --cai-blob-y: 50%;
    --cai-blob-tx: 0px;       /* set by JS — cursor + parallax X offset */
    --cai-blob-ty: 0px;       /* set by JS — cursor + parallax Y offset */

    position: absolute;
    width: calc(var(--cai-blob-size) * var(--cai-blob-size-scale, 1) * var(--cai-blob-pulse, 1));
    aspect-ratio: 1 / 1;
    left: var(--cai-blob-x);
    top: var(--cai-blob-y);
    transform: translate(-50%, -50%) translate3d(var(--cai-blob-tx), var(--cai-blob-ty), 0);
    pointer-events: none;
    will-change: transform, width;
}

/* ============================================
   GLOBAL SIZE PRESETS — multiply per-blob size
   ============================================ */

.cai-blob-container--size-xs   { --cai-blob-size-scale: 0.5;  }
.cai-blob-container--size-sm   { --cai-blob-size-scale: 0.75; }
.cai-blob-container--size-md   { --cai-blob-size-scale: 1;    }
.cai-blob-container--size-lg   { --cai-blob-size-scale: 1.4;  }
.cai-blob-container--size-xl   { --cai-blob-size-scale: 1.8;  }
.cai-blob-container--size-huge { --cai-blob-size-scale: 2.4;  }

/* ============================================
   SIZE PULSE — independent breathing animation
   ============================================
   Animates the registered --cai-blob-pulse custom property which feeds
   into the wrapper's width calc(). Completely independent of:
   - the inner blob's morph (border-radius)
   - the inner blob's float (transform)
   - the wrapper's transform (cursor + parallax via JS)
   So all four motions compose without interfering. */

.cai-blob-container--pulse-subtle .cai-blob-container__blob-wrap {
    animation: cai-blob-pulse-subtle calc(var(--cai-blob-duration, 14s) * 0.9) ease-in-out infinite alternate;
}
.cai-blob-container--pulse-medium .cai-blob-container__blob-wrap {
    animation: cai-blob-pulse-medium calc(var(--cai-blob-duration, 14s) * 0.8) ease-in-out infinite alternate;
}
.cai-blob-container--pulse-strong .cai-blob-container__blob-wrap {
    animation: cai-blob-pulse-strong calc(var(--cai-blob-duration, 14s) * 0.75) ease-in-out infinite alternate;
}

/* Per-blob desync — different duration & negative delay so the breathing
   never lines up across blobs (lava-lamp feel). */
.cai-blob-container[class*='cai-blob-container--pulse-'] .cai-blob-container__blob-wrap--2 {
    animation-duration: calc(var(--cai-blob-duration, 14s) * 1.15);
    animation-delay: calc(var(--cai-blob-duration, 14s) * -0.4);
    animation-direction: alternate-reverse;
}
.cai-blob-container[class*='cai-blob-container--pulse-'] .cai-blob-container__blob-wrap--3 {
    animation-duration: calc(var(--cai-blob-duration, 14s) * 0.65);
    animation-delay: calc(var(--cai-blob-duration, 14s) * -0.7);
}

@keyframes cai-blob-pulse-subtle {
    0%   { --cai-blob-pulse: 0.9;  }
    100% { --cai-blob-pulse: 1.1;  }
}
@keyframes cai-blob-pulse-medium {
    0%   { --cai-blob-pulse: 0.75; }
    100% { --cai-blob-pulse: 1.25; }
}
@keyframes cai-blob-pulse-strong {
    0%   { --cai-blob-pulse: 0.55; }
    100% { --cai-blob-pulse: 1.45; }
}

/* Apply smoothing transition only on interactive containers — for static
   ones the wrapper never moves, so we save the transition declaration. */
.cai-blob-container--interactive .cai-blob-container__blob-wrap {
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cai-blob-container__blob {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #7c5cff;
    opacity: var(--cai-blob-opacity);
    filter: blur(calc(var(--cai-blob-blur) * var(--cai-blob-blur-scale, 1)));
    border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
    will-change: transform, border-radius;
    transform-origin: center center;
    /* Prevents iOS Safari flicker on transform during blur. */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ============================================
   ANIMATION — base wiring
   ============================================ */

/* Two independent animations so border-radius & transform have
   different cycles → looks more organic */
.cai-blob-container--animate .cai-blob-container__blob {
    animation:
        var(--cai-blob-morph-anim, cai-blob-morph-medium) var(--cai-blob-duration, 14s) ease-in-out infinite alternate,
        var(--cai-blob-float-anim, cai-blob-float-medium) calc(var(--cai-blob-duration, 14s) * 1.35) ease-in-out infinite alternate;
}

/* Each blob runs at a different rhythm so they never look synced */
.cai-blob-container--animate .cai-blob-container__blob--2 {
    animation-duration:
        calc(var(--cai-blob-duration, 14s) * 1.25),
        calc(var(--cai-blob-duration, 14s) * 1.7);
    animation-direction: alternate-reverse, alternate;
    animation-delay: calc(var(--cai-blob-duration, 14s) * -0.4), calc(var(--cai-blob-duration, 14s) * -0.6);
}

.cai-blob-container--animate .cai-blob-container__blob--3 {
    animation-duration:
        calc(var(--cai-blob-duration, 14s) * 0.85),
        calc(var(--cai-blob-duration, 14s) * 1.55);
    animation-direction: alternate, alternate-reverse;
    animation-delay: calc(var(--cai-blob-duration, 14s) * -0.7), calc(var(--cai-blob-duration, 14s) * -0.2);
}

/* ============================================
   INTENSITY MODIFIERS
   ============================================ */

.cai-blob-container--morph-subtle {
    --cai-blob-morph-anim: cai-blob-morph-subtle;
    --cai-blob-float-anim: cai-blob-float-subtle;
}

.cai-blob-container--morph-medium {
    --cai-blob-morph-anim: cai-blob-morph-medium;
    --cai-blob-float-anim: cai-blob-float-medium;
}

.cai-blob-container--morph-extreme {
    --cai-blob-morph-anim: cai-blob-morph-extreme;
    --cai-blob-float-anim: cai-blob-float-extreme;
}

/* ============================================
   KEYFRAMES — SUBTLE (gentle, original feel)
   ============================================ */

@keyframes cai-blob-morph-subtle {
    0%   { border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%; }
    25%  { border-radius: 65% 35% 55% 45% / 45% 60% 40% 55%; }
    50%  { border-radius: 40% 60% 70% 30% / 55% 45% 65% 35%; }
    75%  { border-radius: 55% 45% 35% 65% / 65% 55% 35% 45%; }
    100% { border-radius: 45% 55% 60% 40% / 40% 60% 50% 50%; }
}

@keyframes cai-blob-float-subtle {
    0%   { transform: translate3d(0, 0, 0)    scale(1)    rotate(0deg); }
    50%  { transform: translate3d(6%, -4%, 0) scale(1.08) rotate(20deg); }
    100% { transform: translate3d(-5%, 5%, 0) scale(0.95) rotate(-15deg); }
}

/* ============================================
   KEYFRAMES — MEDIUM (default, clearly visible)
   ============================================ */

@keyframes cai-blob-morph-medium {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    20%  { border-radius: 30% 70% 70% 30% / 50% 60% 30% 60%; }
    40%  { border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%; }
    60%  { border-radius: 40% 60% 70% 30% / 60% 40% 60% 40%; }
    80%  { border-radius: 50% 50% 30% 70% / 30% 30% 70% 70%; }
    100% { border-radius: 60% 40% 60% 40% / 70% 50% 50% 30%; }
}

@keyframes cai-blob-float-medium {
    0%   { transform: translate3d(0, 0, 0)        scale(1)    rotate(0deg); }
    25%  { transform: translate3d(12%, -8%, 0)    scale(1.15) rotate(45deg); }
    50%  { transform: translate3d(-10%, 10%, 0)   scale(0.85) rotate(-30deg); }
    75%  { transform: translate3d(8%, 12%, 0)     scale(1.1)  rotate(60deg); }
    100% { transform: translate3d(-12%, -10%, 0)  scale(0.9)  rotate(-45deg); }
}

/* ============================================
   KEYFRAMES — EXTREME (very obvious morphing)
   ============================================ */

@keyframes cai-blob-morph-extreme {
    0%   { border-radius: 80% 20% 50% 50% / 50% 70% 30% 50%; }
    15%  { border-radius: 20% 80% 30% 70% / 70% 30% 70% 30%; }
    30%  { border-radius: 70% 30% 80% 20% / 30% 80% 20% 70%; }
    45%  { border-radius: 40% 60% 20% 80% / 60% 20% 80% 40%; }
    60%  { border-radius: 85% 15% 60% 40% / 25% 75% 25% 75%; }
    75%  { border-radius: 30% 70% 70% 30% / 80% 30% 70% 20%; }
    90%  { border-radius: 60% 40% 25% 75% / 40% 60% 40% 60%; }
    100% { border-radius: 50% 50% 80% 20% / 70% 40% 60% 30%; }
}

@keyframes cai-blob-float-extreme {
    0%   { transform: translate3d(0, 0, 0)        scale(1)    rotate(0deg); }
    20%  { transform: translate3d(20%, -15%, 0)   scale(1.25) rotate(90deg); }
    40%  { transform: translate3d(-18%, 18%, 0)   scale(0.75) rotate(-60deg); }
    60%  { transform: translate3d(15%, 20%, 0)    scale(1.2)  rotate(120deg); }
    80%  { transform: translate3d(-22%, -18%, 0)  scale(0.8)  rotate(-90deg); }
    100% { transform: translate3d(10%, -20%, 0)   scale(1.15) rotate(45deg); }
}

/* ============================================
   CONTENT
   ============================================ */

.cai-blob-container__content {
    position: relative;
    z-index: 1; /* always above blobs */
    margin-inline: auto;
    width: 100%;
}

/* ============================================
   BUILDER PREVIEW
   ============================================ */

.cai-blob-container--builder {
    min-height: 200px;
}

.cai-blob-container--builder .cai-blob-container__content:empty::after {
    content: 'Drop blocks here';
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #999;
    font-size: 14px;
    text-align: center;
    width: 100%;
    min-height: 120px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
}

/* ============================================
   MOBILE PERFORMANCE
   ============================================
   Heavy blur + mix-blend-mode + animated transforms is the #1 GPU
   bottleneck on phones. We auto-scale blur down on smaller screens
   (visually almost identical, dramatically faster). */

@media (max-width: 1024px) {
    .cai-blob-container__blobs {
        --cai-blob-blur-scale: 0.7;
    }
}

@media (max-width: 640px) {
    .cai-blob-container__blobs {
        --cai-blob-blur-scale: 0.5;
    }
}

/* Optional opt-in: hide all but the first blob on mobile.
   Add class via PHP control "Mobile: only 1 blob". */
@media (max-width: 768px) {
    .cai-blob-container--mobile-single .cai-blob-container__blob-wrap--2,
    .cai-blob-container--mobile-single .cai-blob-container__blob-wrap--3 {
        display: none;
    }
}

/* Optional opt-in: disable animation entirely on mobile (zero GPU cost). */
@media (max-width: 768px) {
    .cai-blob-container--mobile-static.cai-blob-container--animate .cai-blob-container__blob,
    .cai-blob-container--mobile-static .cai-blob-container__blob-wrap {
        animation: none !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .cai-blob-container--animate .cai-blob-container__blob,
    .cai-blob-container__blob-wrap {
        animation: none !important;
    }
    /* Disable JS-driven cursor / parallax smoothing too — JS additionally
       refuses to update vars when this media query matches. */
    .cai-blob-container--interactive .cai-blob-container__blob-wrap {
        transition: none !important;
    }
}