/**
 * Sinnesskin: Organic Blobs - Trygga famnar
 * De mjuka, flytande formerna som andas i periferin
 * 
 * © 2026 Mona AI
 */

.sinnesskin-blobs-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Blob A - Trygghet (Terrakotta) */
.blob-trygghet {
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
    background: radial-gradient(circle at 30% 30%,
            rgba(201, 124, 93, 0.18),
            /* Ljusare i mitten */
            rgba(201, 124, 93, 0.12)
            /* Mörkare utåt */
        );
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    filter: blur(60px);
    animation: blob-float-1 180s ease-in-out infinite,
        blob-morph-1 25s ease-in-out infinite;
    transform-origin: center;
    will-change: transform, border-radius;
}

/* Blob B - Lugn (Salviagrön) */
.blob-lugn {
    position: absolute;
    top: -5%;
    right: -5%;
    width: 45vw;
    height: 45vw;
    max-width: 550px;
    max-height: 550px;
    background: radial-gradient(circle at 40% 40%,
            rgba(157, 191, 158, 0.15),
            rgba(157, 191, 158, 0.08));
    border-radius: 38% 62% 66% 34% / 41% 55% 45% 59%;
    filter: blur(55px);
    animation: blob-float-2 210s ease-in-out infinite,
        blob-morph-2 30s ease-in-out infinite;
    transform-origin: center;
    will-change: transform, border-radius;
}

/* Blob C - Närvaro (Lavendel) - Long horizontal along bottom */
.blob-narvaro {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 25vh;
    min-height: 200px;
    background: linear-gradient(90deg,
            rgba(184, 169, 201, 0),
            rgba(184, 169, 201, 0.12) 30%,
            rgba(184, 169, 201, 0.12) 70%,
            rgba(184, 169, 201, 0));
    border-radius: 100% 100% 0 0;
    filter: blur(50px);
    animation: blob-float-3 240s ease-in-out infinite,
        blob-stretch 35s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
}

/* Float animation 1 - Slow circular motion */
@keyframes blob-float-1 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(30px, -40px) rotate(5deg);
    }

    50% {
        transform: translate(-20px, -60px) rotate(-3deg);
    }

    75% {
        transform: translate(-40px, -20px) rotate(7deg);
    }
}

/* Float animation 2 - Different pattern */
@keyframes blob-float-2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-50px, 40px) rotate(-6deg);
    }

    66% {
        transform: translate(20px, 60px) rotate(4deg);
    }
}

/* Float animation 3 - Horizontal wave */
@keyframes blob-float-3 {

    0%,
    100% {
        transform: translateX(0) scaleY(1);
    }

    50% {
        transform: translateX(-20px) scaleY(1.05);
    }
}

/* Morph animation 1 - Shape changes */
@keyframes blob-morph-1 {

    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }

    25% {
        border-radius: 48% 52% 68% 32% / 42% 62% 38% 58%;
    }

    50% {
        border-radius: 40% 60% 48% 52% / 67% 33% 67% 33%;
    }

    75% {
        border-radius: 54% 46% 33% 67% / 55% 45% 55% 45%;
    }
}

/* Morph animation 2 */
@keyframes blob-morph-2 {

    0%,
    100% {
        border-radius: 38% 62% 66% 34% / 41% 55% 45% 59%;
    }

    33% {
        border-radius: 65% 35% 44% 56% / 58% 49% 51% 42%;
    }

    66% {
        border-radius: 45% 55% 61% 39% / 52% 63% 37% 48%;
    }
}

/* Stretch animation for horizontal blob */
@keyframes blob-stretch {

    0%,
    100% {
        transform: scaleX(1) scaleY(1);
    }

    50% {
        transform: scaleX(1.05) scaleY(0.95);
    }
}

/* Breathing effect - subtle pulse */
.blob-trygghet::before,
.blob-lugn::before,
.blob-narvaro::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: inherit;
    filter: blur(30px);
    opacity: 0.5;
    animation: blob-breathe 6s ease-in-out infinite;
}

@keyframes blob-breathe {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.3;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .blob-trygghet {
    background: radial-gradient(circle at 30% 30%,
            rgba(201, 124, 93, 0.12),
            rgba(201, 124, 93, 0.08));
}

[data-theme="dark"] .blob-lugn {
    background: radial-gradient(circle at 40% 40%,
            rgba(157, 191, 158, 0.10),
            rgba(157, 191, 158, 0.05));
}

[data-theme="dark"] .blob-narvaro {
    background: linear-gradient(90deg,
            rgba(184, 169, 201, 0),
            rgba(184, 169, 201, 0.08) 30%,
            rgba(184, 169, 201, 0.08) 70%,
            rgba(184, 169, 201, 0));
}

/* Mobile responsive - smaller blobs */
@media (max-width: 768px) {
    .blob-trygghet {
        width: 70vw;
        height: 70vw;
        max-width: 400px;
        max-height: 400px;
        bottom: -15%;
    }

    .blob-lugn {
        width: 60vw;
        height: 60vw;
        max-width: 350px;
        max-height: 350px;
        top: -10%;
    }

    .blob-narvaro {
        height: 20vh;
        min-height: 150px;
    }
}

/* Ultra-smooth performance hint */
.sinnesskin-blobs-container * {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    .blob-trygghet,
    .blob-lugn,
    .blob-narvaro {
        animation-duration: 0.01s !important;
        animation-iteration-count: 1 !important;
    }
}