@keyframes map-ping {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}
.map-radar-ping {
    animation: map-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.reveal-on-scroll,
.reveal-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal-delay-1 {
    transition-delay: 80ms;
}
.reveal-delay-2 {
    transition-delay: 160ms;
}
.reveal-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.hero-fluido {
    background-image:
        radial-gradient(ellipse 60% 55% at 15% 0%, rgba(252, 236, 208, 0.45), transparent 70%),
        radial-gradient(ellipse 65% 65% at 85% 0%, rgba(212, 230, 219, 0.60), transparent 72%),
        linear-gradient(180deg, #edf4ef 0%, #f3f7f4 58%, #f8fafc 100%);
}
.hero-granulado {
    background-image: url("../img/noise-overlay.2520d873fe50.svg");
    mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, black 0%, black 55%, transparent 100%);
}
.secao-fluida-pastel {
    background-image:
        radial-gradient(ellipse 75% 55% at 50% 50%, rgba(212, 229, 218, 0.55), transparent 80%),
        linear-gradient(180deg, #f8fafc 0%, #f0f5f2 18%, #e6f0ea 50%, #f0f5f2 82%, #f8fafc 100%);
}
.granulado-fluido {
    background-image: url("../img/noise-overlay.2520d873fe50.svg");
    mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
}

.mapa-atmosfera {
    background-image:
        radial-gradient(ellipse 70% 60% at 50% 55%, rgba(222, 234, 226, 0.42), transparent 75%);
}

.kinetic-word {
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}
.kinetic-word:hover {
    transform: translateY(-3px);
}

.filter-capsule {
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.filter-drawer {
    display: grid;
    grid-template-columns: 0fr;
    opacity: 0;
    pointer-events: none;
    transition:
        grid-template-columns 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.filter-drawer.is-open {
    grid-template-columns: 1fr;
    opacity: 1;
    pointer-events: auto;
}
.filter-drawer-inner {
    min-width: 0;
    overflow: hidden;
}
.filter-stagger {
    opacity: 0;
    transform: translate3d(12px, 0, 0) scale(0.96);
    transition:
        opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.filter-drawer.is-open .filter-stagger {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}
.filter-drawer.is-open .filter-stagger-1 {
    transition-delay: 40ms;
}
.filter-drawer.is-open .filter-stagger-2 {
    transition-delay: 80ms;
}

.scroll-fade-bottom {
    mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 24px), transparent 100%);
}

.carousel-fade-edges {
    mask-image: linear-gradient(
        to right,
        transparent 0px,
        black 18px,
        black calc(100% - 18px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0px,
        black 18px,
        black calc(100% - 18px),
        transparent 100%
    );
}

@media (max-width: 640px) {
    .carousel-fade-edges {
        mask-image: linear-gradient(
            to right,
            transparent 0px,
            black 10px,
            black calc(100% - 10px),
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0px,
            black 10px,
            black calc(100% - 10px),
            transparent 100%
        );
    }
}

.panel-responsive-height {
    height: 420px;
}

@media (min-width: 640px) {
    .panel-responsive-height {
        height: 440px;
    }
}

@media (min-width: 1024px) {
    .panel-responsive-height {
        height: calc(100vh - 20rem);
        min-height: 420px;
        max-height: 510px;
    }
}

.stream-grid-panel {
    min-height: 0;
}

@media (min-width: 1024px) {
    .stream-grid-panel {
        height: calc(100vh - 24rem);
        min-height: 280px;
        max-height: 480px;
    }
}