/* Global Styles & Animations for Sale y Sémola */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.paper-texture {
    background-image: url("https://www.transparenttextures.com/patterns/felt-paper.png");
    background-repeat: repeat;
}

/* Ambient glowing orbs */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
}

.orb-primary {
    background-color: #2c4771;
    /* primary navy blue */
    width: 320px;
    height: 320px;
    top: -100px;
    left: -100px;
    animation: floatOrb1 20s ease-in-out infinite;
}

.orb-secondary {
    background-color: #2D3E2F;
    /* tertiary forest green */
    width: 380px;
    height: 380px;
    bottom: -120px;
    right: -100px;
    animation: floatOrb2 25s ease-in-out infinite;
}

@keyframes floatOrb1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(40px, 30px) scale(1.1);
    }
}

@keyframes floatOrb2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-30px, -40px) scale(0.95);
    }
}

/* Float animation for Hero Logo */
@keyframes floatLogo {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(0.5deg);
    }
}

.animate-float-logo {
    animation: floatLogo 6s ease-in-out infinite;
}

/* Initial load animation for Hero */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scroll animations (reveal) */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.96) translateY(25px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.reveal-delay-1 {
    transition-delay: 150ms;
}

.reveal-delay-2 {
    transition-delay: 300ms;
}

.reveal-delay-3 {
    transition-delay: 450ms;
}

/* Animation for ordering steps connector line */
@keyframes lineFlow {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.animate-line-flow {
    background: linear-gradient(90deg, transparent 0%, #f1e1c0 50%, transparent 100%);
    background-size: 200% 100%;
    animation: lineFlow 5s linear infinite;
}