/* =============================================
   CONTACT BAR — LIQUID DROP ANIMATION
   Toggleable via MOLLUSCA_DROP_ANIMATION

   5 phases (triggered AFTER preloader via JS):
   1. Drop fall      (0–650ms)
   2. Impact squish   (520–700ms)
   3. Splash burst    (540–820ms)
   4. Mound rise      (500–1000ms)
   5. Button reveal   (1000–1300ms)
   ============================================= */


/* =============================================
   DROP MODE: hide pill-bar by default
   ============================================= */

.contact-bar--drop .container {
    transform: scaleX(0);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease;
    transform-origin: center bottom;
    pointer-events: none;
}

.contact-bar--drop.contact-bar--expanded .container {
    transform: scaleX(1);
    opacity: 1;
    pointer-events: auto;
}

.contact-bar--drop .contact-bar-item {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.contact-bar--drop.contact-bar--expanded .contact-bar-item {
    opacity: 1;
    transition: opacity 0.3s ease 0.15s;
}


/* =============================================
   LIQUID NAV — gooey animation container
   ============================================= */

.liquid-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    z-index: 12;
    pointer-events: none;
    filter: url(#mollusca-gooey);
    opacity: 0; /* hidden until JS triggers */
    will-change: opacity;
}

/* Active: show and run animations */
.liquid-nav--active {
    opacity: 1;
}

/* Hide on desktop */
@media (min-width: 992px) {
    .liquid-nav {
        display: none !important;
    }
}

/* After intro: fade out liquid layer */
.liquid-nav--done {
    opacity: 0;
    transition: opacity 0.3s ease;
}


/* =============================================
   PHASE 1: FALLING DROP
   ============================================= */

.liquid-drop {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 30px;
    height: 30px;
    background: #333;
    border-radius: 50%;
    opacity: 0;
    transform: translateX(-50%) scaleX(0.7) scaleY(1.35);
    will-change: transform, opacity, bottom;
}

/* Animation only when triggered */
.liquid-nav--active .liquid-drop {
    animation: liquidDropFall 700ms cubic-bezier(0.25, 0.75, 0.35, 1) forwards;
}

@keyframes liquidDropFall {
    0% {
        bottom: 150px;
        opacity: 0;
        transform: translateX(-50%) scaleX(0.65) scaleY(1.4);
    }
    10% {
        opacity: 1;
    }
    65% {
        transform: translateX(-50%) scaleX(0.75) scaleY(1.15);
    }
    85% {
        bottom: 24px;
        transform: translateX(-50%) scaleX(1.5) scaleY(0.45);
    }
    100% {
        bottom: 28px;
        opacity: 1;
        transform: translateX(-50%) scaleX(1.2) scaleY(0.6);
    }
}


/* =============================================
   PHASE 2 + 4: MOUND (impact target + rise)
   ============================================= */

.liquid-mound {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 52px;
    height: 52px;
    background: #333;
    border-radius: 50%;
    opacity: 0;
    transform: translateX(-50%) scaleX(2) scaleY(0.15);
    will-change: transform, opacity;
}

.liquid-nav--active .liquid-mound {
    animation: liquidMoundRise 550ms cubic-bezier(0.34, 1.56, 0.64, 1) 500ms forwards;
}

@keyframes liquidMoundRise {
    0% {
        opacity: 1;
        transform: translateX(-50%) scaleX(2) scaleY(0.15);
    }
    20% {
        transform: translateX(-50%) scaleX(1.5) scaleY(0.4);
    }
    45% {
        transform: translateX(-50%) scaleX(0.85) scaleY(1.15);
    }
    65% {
        transform: translateX(-50%) scaleX(1.08) scaleY(0.92);
    }
    80% {
        transform: translateX(-50%) scaleX(0.96) scaleY(1.04);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1) scaleY(1);
    }
}


/* =============================================
   PHASE 3: SPLASH BLOBS
   ============================================= */

.liquid-splash {
    position: absolute;
    bottom: 26px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #333;
    border-radius: 50%;
    opacity: 0;
    transform: translateX(-50%) scale(0.3);
    will-change: transform, opacity;
}

.liquid-nav--active .liquid-splash--l {
    animation: liquidSplashL 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 520ms forwards;
}

.liquid-nav--active .liquid-splash--r {
    animation: liquidSplashR 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 560ms forwards;
}

@keyframes liquidSplashL {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(0.4);
    }
    30% {
        opacity: 1;
        transform: translateX(calc(-50% - 42px)) scale(0.85);
    }
    65% {
        opacity: 0.6;
        transform: translateX(calc(-50% - 30px)) scale(0.45);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(-50% - 18px)) scale(0);
    }
}

@keyframes liquidSplashR {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(0.4);
    }
    30% {
        opacity: 1;
        transform: translateX(calc(-50% + 42px)) scale(0.85);
    }
    65% {
        opacity: 0.6;
        transform: translateX(calc(-50% + 30px)) scale(0.45);
    }
    100% {
        opacity: 0;
        transform: translateX(calc(-50% + 18px)) scale(0);
    }
}


/* =============================================
   PHASE 5: INTERACTIVE BLOB BUTTON (contrast!)
   ============================================= */

.contact-bar-drop {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 52px;
    height: 52px;
    background: rgba(55, 55, 55, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 12;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5),
                0 0 15px rgba(255, 255, 255, 0.05);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Blob appears after liquid intro completes */
.contact-bar-drop--visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
    animation: blobPulse 3s ease-in-out 0.5s infinite;
}

.contact-bar-drop--visible:active {
    transform: translateX(-50%) scale(0.9);
    animation: none;
}

/* Hide on desktop */
@media (min-width: 992px) {
    .contact-bar-drop {
        display: none !important;
    }
}

/* Info icon — contrast */
.contact-bar-drop-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.85);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
}

.contact-bar-drop--visible .contact-bar-drop-icon {
    opacity: 1;
}

/* Hidden state (when pill-bar expanded) */
.contact-bar-drop--hidden {
    opacity: 0 !important;
    transform: translateX(-50%) scale(0.3) !important;
    pointer-events: none !important;
    animation: none !important;
}


/* =============================================
   BLOB PULSE (idle state)
   ============================================= */

@keyframes blobPulse {
    0%, 100% {
        border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
    }
    25% {
        border-radius: 55% 45% 40% 60% / 45% 55% 50% 50%;
    }
    50% {
        border-radius: 45% 55% 60% 40% / 60% 40% 45% 55%;
    }
    75% {
        border-radius: 60% 40% 45% 55% / 40% 60% 55% 45%;
    }
}


/* =============================================
   EXPAND / COLLAPSE TRANSITIONS
   ============================================= */

.contact-bar--drop.contact-bar--expanding .contact-bar-drop {
    opacity: 0 !important;
    transform: translateX(-50%) scaleX(2) scaleY(0.4) !important;
    pointer-events: none !important;
    animation: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-bar--drop.contact-bar--collapsing .contact-bar-drop {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.5) scaleY(0.6);
    pointer-events: none;
    animation: none !important;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}