.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.academic-bloom-mask {
    clip-path: circle(70% at 50% 50%);
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}
.reveal.in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.hero-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}
.hero-carousel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: url(#hero-dissolve);
    animation-name: heroCarouselFade;
    animation-duration: 44s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
@keyframes heroCarouselFade {
    0% { opacity: 0; }
    2% { opacity: 1; }
    9% { opacity: 1; }
    11% { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-carousel img {
        animation: none;
        opacity: 0;
        filter: none;
    }
    .hero-carousel img:first-child {
        opacity: 1;
    }
}

.content-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}
.content-carousel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    filter: url(#hero-dissolve);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
.eventos-carousel img {
    animation-name: eventosCarouselFade;
    animation-duration: 28s;
}
@keyframes eventosCarouselFade {
    0% { opacity: 0; }
    3% { opacity: 1; }
    15% { opacity: 1; }
    17% { opacity: 0; }
    100% { opacity: 0; }
}
.salidas-carousel img {
    animation-name: salidasCarouselFade;
    animation-duration: 20s;
}
@keyframes salidasCarouselFade {
    0% { opacity: 0; }
    4% { opacity: 1; }
    20% { opacity: 1; }
    24% { opacity: 0; }
    100% { opacity: 0; }
}
.levels-carousel img {
    animation-name: levelsCarouselFade;
    animation-duration: 8s;
}
@keyframes levelsCarouselFade {
    0% { opacity: 0; }
    9% { opacity: 1; }
    51% { opacity: 1; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .content-carousel img {
        animation: none;
        opacity: 0;
        filter: none;
    }
    .content-carousel img:first-child {
        opacity: 1;
    }
}

.back-to-top {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.back-to-top.visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}