/* Mindr global styles (no build step) */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#root {
    min-height: 100dvh;
}

body {
    background: #101c33;
    overflow-x: hidden;
    font-family: "Sora", system-ui, sans-serif;
}

/* Animated background */
.mindr-bg {
    --orb1: rgba(34, 211, 238, 0.22);
    --orb2: rgba(251, 191, 36, 0.18);
    --orb3: rgba(99, 102, 241, 0.16);
    --orb4: rgba(244, 114, 182, 0.14);
}

.mindr-bg-base {
    filter: saturate(1.08) contrast(1.06);
}

.mindr-bg-orb {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    mix-blend-mode: screen;
    transform: translate3d(0, 0, 0);
}

.mindr-bg-orb.orb1 {
    width: 600px;
    height: 600px;
    top: -12%;
    right: -8%;
    background: radial-gradient(circle, var(--orb1) 0%, transparent 70%);
}

.mindr-bg-orb.orb2 {
    width: 700px;
    height: 700px;
    bottom: -18%;
    left: -12%;
    background: radial-gradient(circle, var(--orb2) 0%, transparent 70%);
}

.mindr-bg-orb.orb3 {
    width: 450px;
    height: 450px;
    top: 35%;
    left: 45%;
    margin-left: -225px;
    background: radial-gradient(circle, var(--orb3) 0%, transparent 70%);
}

.mindr-bg-orb.orb4 {
    width: 300px;
    height: 300px;
    top: 15%;
    left: 10%;
    background: radial-gradient(circle, var(--orb4) 0%, transparent 70%);
}

/* Small screens: pull orbs inward + increase intensity */
@media (max-width: 420px) {
    .mindr-bg {
        --orb1: rgba(34, 211, 238, 0.36);
        --orb2: rgba(251, 191, 36, 0.28);
        --orb3: rgba(99, 102, 241, 0.26);
        --orb4: rgba(244, 114, 182, 0.24);
    }

    .mindr-bg-orb.orb1 {
        width: 520px;
        height: 520px;
        top: -10%;
        right: -34%;
    }

    .mindr-bg-orb.orb2 {
        width: 560px;
        height: 560px;
        bottom: -26%;
        left: -32%;
    }

    .mindr-bg-orb.orb3 {
        width: 420px;
        height: 420px;
        top: 42%;
        left: 52%;
        margin-left: -210px;
    }

    .mindr-bg-orb.orb4 {
        width: 320px;
        height: 320px;
        top: 10%;
        left: -10%;
    }

    .mindr-bg-grain {
        opacity: 0.028 !important;
    }
}

@keyframes orbFloat1 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(-70px, 55px, 0) scale(1.12);
    }
    66% {
        transform: translate3d(40px, -35px, 0) scale(0.94);
    }
}

@keyframes orbFloat2 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(80px, -65px, 0) scale(1.1);
    }
    66% {
        transform: translate3d(-50px, 35px, 0) scale(0.9);
    }
}

@keyframes orbFloat3 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate3d(85px, -50px, 0) scale(1.18);
        opacity: 0.7;
    }
}

@keyframes orbFloat4 {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate3d(-55px, 70px, 0) scale(1.1);
        opacity: 1;
    }
}

@keyframes grainShift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(-20px, 10px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Screen animations (declared globally so we don't inject <style> tags at runtime) */
@keyframes completePop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes shrinkBar {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

@keyframes countPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}