/*
 * Animações de entrada (padrão Sintrópika: IntersectionObserver, sem biblioteca).
 * - Linhas do título da Home entram dos lados, como no site institucional
 *   (50px, 800ms, cubic-bezier(.5,0,0,1), 100ms de atraso). Estado inicial só com
 *   .js-enabled (posto no <html> pelo header.php); sem JS o título aparece direto.
 * - Blocos abaixo da primeira dobra sobem 24px e aparecem (700ms). O estado
 *   escondido (.anim-pendente) só é posto pelo JS em quem ainda está fora da tela,
 *   então nada da primeira dobra fica invisível e o LCP não é afetado.
 */
.js-enabled .home .intro__title [data-anim-linha]{
    opacity: 0;
    transition: opacity .8s cubic-bezier(.5,0,0,1) .1s, transform .8s cubic-bezier(.5,0,0,1) .1s;
}
.js-enabled .home .intro__title [data-anim-linha="esq"]{ transform: translateX(-50px); }
.js-enabled .home .intro__title [data-anim-linha="dir"]{ transform: translateX(50px); }
.js-enabled .home .intro__title [data-anim-linha].is-in{ opacity: 1; transform: none; }

[data-anim]{
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
[data-anim].anim-pendente{
    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

@media (prefers-reduced-motion: reduce){
    .js-enabled .home .intro__title [data-anim-linha],
    [data-anim],
    [data-anim].anim-pendente{
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Hover dos cards com capa (padrão consec): o card sobe 5px e a capa cresce 4% com sombra.
   Só com mouse e sem "reduzir movimento"; também ao focar o card pelo teclado. */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
    .card.-img{ transition: transform var(--hover-duracao) var(--hover-curva); }
    .card.-img .card-image{ transition: transform var(--hover-duracao) var(--hover-curva), box-shadow var(--hover-duracao) var(--hover-curva); }
    .card.-img:hover,
    .card.-img:focus-within{ transform: translateY(-5px); }
    .card.-img:hover .card-image,
    .card.-img:focus-within .card-image{ transform: scale(1.04); box-shadow: 0 14px 28px rgba(0,0,0,.18); }
}

/* Esqueleto do modal enquanto o conteúdo carrega (padrão consec), no lugar do spinner */
@keyframes esqueleto-brilho{
    0%{ background-position: -400px 0; }
    100%{ background-position: 400px 0; }
}
.esqueleto{ display: grid; gap: 1rem; margin: 4rem auto; max-width: 46rem; min-height: 680px; padding: 0 1rem; align-content: start; }
.esqueleto__bloco{
    background: linear-gradient(90deg, #e7edf2 0, #f4f7f9 40px, #e7edf2 80px) #e7edf2;
    background-size: 800px 100%;
    border-radius: 8px;
    animation: esqueleto-brilho 1.2s linear infinite;
}
.esqueleto__titulo{ height: 3rem; width: 80%; }
.esqueleto__titulo.-curto{ width: 55%; }
.esqueleto__midia{ height: 22rem; margin-top: 1rem; }
.esqueleto__linha{ height: 1rem; }
.esqueleto__linha.-curta{ width: 70%; }
@media (prefers-reduced-motion: reduce){
    .esqueleto__bloco{ animation: none; }
}

/* Hover mais suave: fundo, título e ícone dos cards e sublinhados dos menus mudam
   juntos, no mesmo ritmo (antes o título e o ícone dos cards de texto trocavam de cor
   na hora e o texto dos menus em .15s, contra .4s do fundo/sublinhado).
   Mesmos seletores do style.min.css para valer sobre eles; "reduzir movimento" é
   tratado pela regra global do style.min.css. */
:root{
    --hover-duracao: .9s;
    --hover-curva: cubic-bezier(.25,.8,.25,1);
}
.card.-img .card-body,
.card.-text .card-body{
    transition: background-color var(--hover-duracao) var(--hover-curva), box-shadow var(--hover-duracao) var(--hover-curva);
}
.card.-img .card-title,
.card.-text .card-title{
    transition: color var(--hover-duracao) var(--hover-curva);
}
.card.-text .card-body svg path{
    transition: stroke var(--hover-duracao) var(--hover-curva);
}
.card.-audio:after,
.card.-video:after{
    transition: background-color var(--hover-duracao) var(--hover-curva);
}
.menu .nav-link,
.home .guide__body .nav-link,
.trilhas .content .sidebar__body .nav-link,
.trilhas .content .guide .related__body .list li a{
    transition: color var(--hover-duracao) var(--hover-curva);
}
.menu .nav-link:after,
.home .guide__body .nav-link:after,
.trilhas .content .sidebar__body .nav-link:after,
.trilhas .content .guide .related__body .list li a:after,
.single .navigation .prev:after,
.single .navigation .next:after,
.modal .navigation .prev:after,
.modal .navigation .next:after{
    transition: width var(--hover-duracao) var(--hover-curva), background-color var(--hover-duracao) var(--hover-curva);
}

/* Foco dos seletores de filtro (Todos conteúdos): o select é um retângulo transparente
   e a forma arredondada vem da imagem de fundo, então o contorno saía quadrado.
   No lugar, um brilho azul que acompanha a forma. */
.select:focus,
.select:focus-visible{
    outline: none;
    box-shadow: none;
}
.select:focus-visible{
    filter: drop-shadow(0 0 1px #125996) drop-shadow(0 0 1px #125996);
}

/* Celular: cada deslize para exatamente na trilha seguinte (antes a faixa parava
   entre duas trilhas e era preciso arrastar de novo para centralizar) */
@media (max-width: 767.98px){
    .trilhas .scroll{
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }
    .trilhas .scroll__container{
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

/* Desktop: aviso "Role para explorar" (mouse com a rodinha animada), equivalente ao
   GIF de deslizar do celular. Na cor de cada trilha, só na trilha que está na tela. */
.intro__rolar{ display: none; }
@media (min-width: 768px){
    .trilhas .scroll .intro__rolar{
        align-items: center;
        display: flex;
        font-family: d-din-pro;
        font-size: 1rem;
        gap: .6rem;
        left: 50%;
        letter-spacing: .02em;
        opacity: 0;
        position: absolute;
        bottom: calc(100% + .9rem); /* sempre logo acima do título, em qualquer escala */
        transform: translateX(-50%);
        transition: opacity .9s ease;
        white-space: nowrap;
    }
    .trilhas .scroll .intro .col-12{ position: relative; }
    .trilhas .scroll__container.-active .intro__rolar{ opacity: .9; }
    .trilhas .intro.-color1 .intro__rolar{ color: #e59517; }
    .trilhas .intro.-color2 .intro__rolar{ color: #125996; }
    .trilhas .intro.-color3 .intro__rolar{ color: #bf7953; }
    .trilhas .intro.-color4 .intro__rolar{ color: #aa739f; }
    .trilhas .intro.-color5 .intro__rolar{ color: #d66572; }
    .trilhas .intro.-color6 .intro__rolar{ color: #8e9838; }
    .intro__rolar-mouse{
        border: 2px solid currentColor;
        border-radius: 12px;
        height: 32px;
        position: relative;
        width: 20px;
    }
    .intro__rolar-mouse:after{
        animation: rolar-roda 1.6s ease-in-out infinite;
        background: currentColor;
        border-radius: 2px;
        content: "";
        height: 7px;
        left: 50%;
        margin-left: -2px;
        position: absolute;
        top: 6px;
        width: 4px;
    }
}
@keyframes rolar-roda{
    0%{ opacity: 0; transform: translateY(0); }
    30%{ opacity: 1; }
    100%{ opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce){
    .intro__rolar-mouse:after{ animation: none; opacity: 1; }
}