/* Transición suave para bloques (scroll-driven) */
[id^="block-"] {
    transition: opacity 0.35s ease-out;
}

/* Flechas: loop de abajo hacia arriba; pausadas si el carrusel no está en vista (optimización) */
@keyframes arrow-loop-up {
    0% { top: 80%; opacity: 0; }
    50% { opacity: 1; color: var(--color-amateur-amber); }
    100% { top: -5%; opacity: 0; }
}

#carousel-section:not(.carousel-in-view) .carousel-arrows-wrap svg {
    animation-play-state: paused;
}

/* Carrusel: transición suave al scroll; empiezan ocultas y abajo */
.carousel-stream-img {
    opacity: 0;
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

/* Fondo óvalo con gradiente y blur para secciones */
.section-bg-oval {
    position: relative;
    overflow: hidden;
}

.section-bg-oval::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/public/icons/oval-blur.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: clamp(500px, 140%, 1200px);
    scale:  2.5;
    opacity: 0.25;
    pointer-events: none;
    filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
}

/* .section-bg-oval::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0.5;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    pointer-events: none;
} */

.section-bg-oval > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .section-bg-oval::before {
        scale: 1;
    }
}

/* Reducir espaciado entre secciones en móviles */
@media (max-width: 767px) {
    /* Reducir padding-top y padding-bottom de todas las secciones EXCEPTO hero y earnings */
    section[id]:not(#hero):not(#earnings) > div.container {
        padding-top: 3rem !important; /* pt-12 en lugar de pt-32, etc. */
        padding-bottom: 3rem !important; /* pb-12 en lugar de pb-32, pb-52, etc. */
    }
    
    /* Earnings section - solo reducir padding bottom, mantener padding top original */
    #earnings > div.container {
        padding-bottom: 3rem !important;
    }
    
    /* Become model section - reducir padding vertical (tiene py-32) */
    #become-model > div.container {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Payments methods section - reducir padding bottom (tiene pb-52) */
    #payments-methods > div.container {
        padding-bottom: 3rem !important;
    }
}