/* Psychology Lab button — Part 1 */

.psychology-lab-wrap {
    position: relative;
    width: 100%;
    max-width: 690px;
    min-height: 126px;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.psychology-lab-button {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 98px;
    padding: 22px 76px 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--paper, #fffaf0);

    background:
            linear-gradient(
                    115deg,
                    rgba(255, 255, 255, 0.075),
                    transparent 34%
            ),
            radial-gradient(
                    circle at 18% 8%,
                    rgba(215, 189, 123, 0.15),
                    transparent 40%
            ),
            linear-gradient(
                    135deg,
                    #102f28 0%,
                    var(--green, #173d35) 55%,
                    #0c2923 100%
            );

    border: 1px solid rgba(215, 189, 123, 0.46);
    border-radius: 20px;

    box-shadow:
            0 18px 42px rgba(23, 61, 53, 0.22),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset,
            0 0 28px rgba(23, 61, 53, 0.12);

    transform: translateY(0) scale(1);

    transition:
            transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.65s ease,
            border-color 0.65s ease,
            filter 0.65s ease;

    animation: psychologyLabBreath 14s ease-in-out infinite;
}

/* Permanent gold line */

.psychology-lab-button::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 14px;
    height: 1px;
    pointer-events: none;

    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 244, 210, 0.12) 10%,
            rgba(224, 195, 126, 0.82) 50%,
            rgba(255, 244, 210, 0.12) 90%,
            transparent
    );

    box-shadow: 0 0 10px rgba(224, 195, 126, 0.2);
    transform: translateX(-5px);
    opacity: 0.9;

    animation:
            psychologyGoldLine
            12s
            ease-in-out
            infinite
            alternate;
}

.psychology-lab-button::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
            radial-gradient(
                    circle at 18% 70%,
                    rgba(126, 178, 159, 0.09),
                    transparent 24%
            ),
            radial-gradient(
                    circle at 78% 26%,
                    rgba(224, 195, 126, 0.08),
                    transparent 20%
            );

    mix-blend-mode: screen;
    opacity: 0.78;
}

.psychology-lab-button:hover,
.psychology-lab-button:focus-visible {
    transform: translateY(-4px) scale(1.018);
    border-color: rgba(224, 195, 126, 0.78);
    filter: saturate(1.04) brightness(1.025);

    box-shadow:
            0 24px 58px rgba(23, 61, 53, 0.28),
            0 0 0 1px rgba(255, 255, 255, 0.075) inset,
            0 0 44px rgba(50, 126, 104, 0.25),
            0 0 72px rgba(185, 154, 95, 0.11);
}

.psychology-lab-button:focus-visible {
    outline: 2px solid rgba(224, 195, 126, 0.78);
    outline-offset: 5px;
}

.psychology-lab-kicker,
.psychology-lab-title,
.psychology-lab-arrow {
    position: relative;
    z-index: 3;
}

.psychology-lab-kicker {
    margin-bottom: 4px;
    color: rgba(224, 195, 126, 0.92);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.psychology-lab-title {
    font-family:
            var(--serif, Georgia, "Times New Roman", serif);

    font-size: clamp(1.5rem, 3vw, 2.05rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.psychology-lab-arrow {
    position: absolute;
    top: 50%;
    right: 25px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: #f3e5bc;
    background: rgba(255, 255, 255, 0.065);

    border: 1px solid rgba(224, 195, 126, 0.36);
    border-radius: 50%;

    transform: translateY(-50%);

    transition:
            transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            background 0.45s ease,
            box-shadow 0.45s ease;
}

.psychology-lab-button:hover .psychology-lab-arrow,
.psychology-lab-button:focus-visible .psychology-lab-arrow {
    transform: translate(4px, -50%);
    background: rgba(224, 195, 126, 0.12);
    box-shadow: 0 0 18px rgba(224, 195, 126, 0.12);
}

/* Floating energy orbs */

.psychology-orb {
    position: absolute;
    z-index: 4;

    width: var(--orb-size);
    height: var(--orb-size);

    left: var(--orb-left);
    top: var(--orb-top);

    border-radius: 50%;
    pointer-events: none;
    opacity: var(--orb-opacity);

    background: radial-gradient(
            circle at 35% 35%,
            rgba(255, 255, 255, 0.95) 0%,
            var(--orb-color) 38%,
            rgba(255, 255, 255, 0) 72%
    );

    filter: blur(var(--orb-blur));

    box-shadow:
            0 0 10px var(--gravity-color),
            0 0 24px rgba(185, 154, 95, 0.34),
            0 0 36px rgba(126, 178, 159, 0.16);

    transform: translate3d(0, 0, 0);

    animation:
            orbDrift
            var(--orb-duration)
            ease-in-out
            var(--orb-delay)
            infinite
            alternate;
}

.psychology-lab-wrap.is-hovering .psychology-orb {
    opacity: 0.9;
}

@keyframes psychologyLabBreath {
    0%,
    100% {
        box-shadow:
                0 0 10px var(--orb-color),
                0 0 24px rgba(185, 154, 95, 0.34),
                0 0 36px rgba(126, 178, 159, 0.16);
    }

    48% {
        box-shadow:
                0 20px 48px rgba(23, 61, 53, 0.245),
                0 0 0 1px rgba(255, 255, 255, 0.052) inset,
                0 0 34px rgba(40, 112, 91, 0.165);
    }

    58% {
        box-shadow:
                0 21px 50px rgba(23, 61, 53, 0.255),
                0 0 0 1px rgba(255, 255, 255, 0.055) inset,
                0 0 38px rgba(40, 112, 91, 0.18);
    }
}

@keyframes psychologyGoldLine {
    0% {
        transform: translateX(-3px);
        opacity: 0.78;
        filter: brightness(0.96);
    }

    50% {
        transform: translateX(0);
        opacity: 0.95;
        filter: brightness(1.1);
    }

    100% {
        transform: translateX(3px);
        opacity: 0.82;
        filter: brightness(1);
    }
}
@keyframes orbDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(0.94);
    }

    35% {
        transform:
                translate3d(
                        var(--orb-x1),
                        var(--orb-y1),
                        0
                )
                scale(1.03);
    }

    70% {
        transform:
                translate3d(
                        var(--orb-x2),
                        var(--orb-y2),
                        0
                )
                scale(0.98);
    }

    100% {
        transform:
                translate3d(
                        var(--orb-x3),
                        var(--orb-y3),
                        0
                )
                scale(1.06);
    }
}

@media (max-width: 720px) {
    .psychology-lab-wrap {
        min-height: 118px;
    }

    .psychology-lab-button {
        min-height: 92px;
        padding: 20px 64px 20px 20px;
        border-radius: 18px;
    }

    .psychology-lab-arrow {
        right: 17px;
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psychology-lab-button,
    .psychology-lab-button::before,
    .psychology-orb {
        animation: none !important;
    }
}
/* Psychology Lab button — Part 2 */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    background: rgba(6, 13, 12, 0.22);
    opacity: 0;
    transition: opacity 0.7s ease;
}

body.psychology-focus::before {
    opacity: 1;
}

body.psychology-focus .psychology-lab-wrap {
    z-index: 100;
}

body.psychology-focus .psychology-lab-button {
    box-shadow:
            0 28px 70px rgba(8, 25, 21, 0.36),
            0 0 0 1px rgba(255, 255, 255, 0.08) inset,
            0 0 54px rgba(50, 126, 104, 0.36),
            0 0 110px rgba(185, 154, 95, 0.18);
}

.psychology-lab-wrap {
    --cursor-x: 50%;
    --cursor-y: 50%;
}

.psychology-lab-button {
    transform-style: preserve-3d;
}

.psychology-lab-wrap.is-hovering .psychology-lab-button {
    background:
            radial-gradient(
                    circle at var(--cursor-x) var(--cursor-y),
                    rgba(224, 195, 126, 0.16),
                    transparent 22%
            ),
            linear-gradient(
                    115deg,
                    rgba(255, 255, 255, 0.08),
                    transparent 34%
            ),
            radial-gradient(
                    circle at 18% 8%,
                    rgba(215, 189, 123, 0.15),
                    transparent 40%
            ),
            linear-gradient(
                    135deg,
                    #102f28 0%,
                    var(--green, #173d35) 55%,
                    #0c2923 100%
            );
}

.psychology-gravity-particle {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;

    width: var(--gravity-size);
    height: var(--gravity-size);

    pointer-events: none;
    border-radius: 50%;
    opacity: 0;

    background: radial-gradient(
            circle at 35% 35%,
            rgba(255, 255, 255, 0.95) 0%,
            var(--gravity-color) 40%,
            rgba(255, 255, 255, 0) 74%
    );

    filter: blur(var(--gravity-blur));

    box-shadow:
            0 0 8px var(--gravity-color),
            0 0 20px rgba(185, 154, 95, 0.22);

    transform:
            translate3d(
                    var(--start-x),
                    var(--start-y),
                    0
            )
            scale(0.5);

    animation:
            psychologyGravityPull
            var(--gravity-duration)
            cubic-bezier(0.55, 0.02, 0.92, 0.48)
            var(--gravity-delay)
            forwards;
}

.psychology-lab-wrap.absorbing .psychology-lab-button {
    animation:
            psychologyLabBreath 14s ease-in-out infinite,
            psychologyAbsorbFlash 0.55s ease-out;
}

.psychology-lab-wrap.absorbing
.psychology-lab-button::before {
    box-shadow:
            0 0 14px rgba(224, 195, 126, 0.42),
            0 0 30px rgba(224, 195, 126, 0.14);
}

@keyframes psychologyGravityPull {
    0% {
        opacity: 0;

        transform:
                translate3d(
                        var(--start-x),
                        var(--start-y),
                        0
                )
                scale(0.45);
    }

    18% {
        opacity: var(--gravity-opacity);
    }

    42% {
        opacity: var(--gravity-opacity);

        transform:
                translate3d(
                        var(--mid-x),
                        var(--mid-y),
                        0
                )
                scale(0.82);
    }

    76% {
        opacity: calc(var(--gravity-opacity) * 0.9);
    }

    100% {
        opacity: 0;

        transform:
                translate3d(
                        var(--end-x),
                        var(--end-y),
                        0
                )
                scale(0.06);
    }
}

@keyframes psychologyAbsorbFlash {
    0% {
        filter:
                brightness(1.02)
                saturate(1.02);
    }

    45% {
        filter:
                brightness(1.045)
                saturate(1.04);
    }

    100% {
        filter:
                brightness(1.02)
                saturate(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    .psychology-gravity-particle,
    .psychology-lab-wrap.absorbing
    .psychology-lab-button {
        animation: none !important;
        transition: none !important;
    }
}