/* Explain: Base reset and animations for the website. - */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    overflow-x: hidden;
}

::selection {
    background: var(--mint-color);
    color: var(--primary-color);
}

button,
a {
    cursor: pointer;
}

input,
button,
textarea,
select {
    font: inherit;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 68%, transparent);
    outline-offset: 3px;
}

/* --- Animations --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 4s ease-in-out infinite;
}
.animate-float-delayed {
    animation: float 4s ease-in-out 2s infinite;
}

@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(216, 140, 154, 0.6); }
    50% { box-shadow: 0 0 0 15px rgba(216, 140, 154, 0); }
}
.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
}