/* ─── RICHARD Lava Lamp Hero Effect ──────────────────────────────── */

.richard-hero-stage {
    position: relative;
    width: 100%;
    background: var(--color-white); /* Provides text fallback and base for lava */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: clamp(200px, 40vh, 600px);
}

/* The container for the blobs, applying the SVG gooey filter from header.php */
.richard-lava-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: url('#richard-goo');
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.richard-lava-blob {
    position: absolute;
    border-radius: 50%;
    /* Start invisible and paused */
    opacity: 0 !important;
    animation-play-state: paused !important;
    transition: opacity 0.5s ease-in-out;
}

/* When the stage is clicked, JS adds .is-active to the container */
.richard-lava-container.is-active .richard-lava-blob {
    opacity: 0.95 !important;
    animation-play-state: running !important;
}

/* Distribution Strategy: 12 Blobs for full wordmark coverage */

/* 1-3: Left Section (R, I) */
.richard-lava-blob--1 { width: 12vw; height: 12vw; max-width: 150px; max-height: 150px; background: linear-gradient(45deg, #FF5733, #33FF57); left: 0%; top: 10%; animation: lava-float-1 20s ease-in-out infinite alternate; }
.richard-lava-blob--6 { width: 10vw; height: 10vw; max-width: 130px; max-height: 130px; background: linear-gradient(45deg, #33FF57, #FFFF5D); left: 5%; bottom: 20%; animation: lava-float-6 24s ease-in-out infinite alternate; }
.richard-lava-blob--9 { width: 11vw; height: 11vw; max-width: 140px; max-height: 140px; background: linear-gradient(45deg, #FFD700, #33FF57); left: 15%; top: 40%; animation: lava-float-9 27s ease-in-out infinite alternate; }

/* 4-7: Center Section (C, H, A) */
.richard-lava-blob--3 { width: 12vw; height: 12vw; max-width: 150px; max-height: 150px; background: linear-gradient(45deg, #FF0000, #00FF00); left: 22%; top: 55%; animation: lava-float-3 23s ease-in-out infinite alternate; }
.richard-lava-blob--7 { width: 10vw; height: 10vw; max-width: 130px; max-height: 130px; background: linear-gradient(45deg, #00BFFF, #FF00FF); left: 45%; top: 10%; animation: lava-float-7 30s ease-in-out infinite alternate; }
.richard-lava-blob--10 { width: 11vw; height: 11vw; max-width: 140px; max-height: 140px; background: linear-gradient(45deg, #FF00FF, #4CF9E1); left: 32%; bottom: 5%; animation: lava-float-10 35s ease-in-out infinite alternate; }
.richard-lava-blob--11 { width: 13vw; height: 13vw; max-width: 160px; max-height: 160px; background: linear-gradient(45deg, #4CF9E1, #FF5733); left: 55%; top: 25%; animation: lava-float-11 24s ease-in-out infinite alternate; }

/* 8-12: Right Section (R, D) */
.richard-lava-blob--2 { width: 14vw; height: 14vw; max-width: 180px; max-height: 180px; background: linear-gradient(45deg, #4CF9E1, #456BD4); right: 5%; top: 30%; animation: lava-float-2 26s ease-in-out infinite alternate; }
.richard-lava-blob--4 { width: 12vw; height: 12vw; max-width: 160px; max-height: 160px; background: linear-gradient(45deg, #FFD700, #FF4050); right: 25%; bottom: 15%; animation: lava-float-4 32s ease-in-out infinite alternate; }
.richard-lava-blob--5 { width: 11vw; height: 11vw; max-width: 140px; max-height: 140px; background: linear-gradient(45deg, #FF00FF, #00FFFF); right: 0%; top: 5%; animation: lava-float-5 26s ease-in-out infinite alternate-reverse; }
.richard-lava-blob--8 { width: 10vw; height: 10vw; max-width: 130px; max-height: 130px; background: linear-gradient(45deg, #FF5733, #FFD700); right: 40%; bottom: 20%; animation: lava-float-8 29s ease-in-out infinite alternate; }
.richard-lava-blob--12 { width: 13vw; height: 13vw; max-width: 160px; max-height: 160px; background: linear-gradient(45deg, #00FF00, #00BFFF); right: 15%; top: 50%; animation: lava-float-12 21s ease-in-out infinite alternate; }

/* Animation Paths */

@keyframes lava-float-1 { 0% { transform: translate(0, 0); } 100% { transform: translate(40vw, 20vh); } }
@keyframes lava-float-2 { 0% { transform: translate(0, 0); } 100% { transform: translate(-45vw, -15vh); } }
@keyframes lava-float-3 { 0% { transform: translate(0, 0); } 100% { transform: translate(50vw, -30vh); } }
@keyframes lava-float-4 { 0% { transform: translate(0, 0); } 100% { transform: translate(-40vw, -10vh); } }
@keyframes lava-float-5 { 0% { transform: translate(0, 0); } 100% { transform: translate(-35vw, 40vh); } }
@keyframes lava-float-6 { 0% { transform: translate(0, 0); } 100% { transform: translate(55vw, -35vh); } }
@keyframes lava-float-7 { 0% { transform: translate(0, 0); } 100% { transform: translate(-30vw, 45vh); } }
@keyframes lava-float-8 { 0% { transform: translate(0, 0); } 100% { transform: translate(-25vw, -40vh); } }
@keyframes lava-float-9 { 0% { transform: translate(0, 0); } 100% { transform: translate(45vw, -25vh); } }
@keyframes lava-float-10 { 0% { transform: translate(0, 0); } 100% { transform: translate(35vw, -35vh); } }
@keyframes lava-float-11 { 0% { transform: translate(0, 0); } 100% { transform: translate(-50vw, 30vh); } }
@keyframes lava-float-12 { 0% { transform: translate(0, 0); } 100% { transform: translate(-40vw, -20vh); } }

/* The text mask layer */
.richard-lava-text-mask {
    position: relative;
    z-index: 2;
    color: var(--color-white);
    background: var(--surface-page, #0a0a0a);
    mix-blend-mode: var(--hero-blend-mode);
    margin: 0;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-8) 0;
    text-align: center;
    user-select: none;
}

@media (max-width: 700px) {
    .richard-hero-stage {
        min-height: auto;
    }

    .richard-lava-text-mask {
        flex: 0 0 auto;
        padding: clamp(18px, 6vw, 28px) 0 var(--space-5);
    }

    .richard-hero-stage .richard-metadata-bar {
        margin-top: 0;
    }
}