/**
 * assets/css/main.css — Escola América
 *
 * CSS customizado do tema.
 * Complementa o Tailwind CSS com variáveis de design tokens, reset global,
 * animações do hero carousel (Ken Burns) e micro-interações dos cards.
 */


/* ─── Variáveis CSS (Design Tokens) ─────────────────────────────────────────── */

:root {
    --cor-azul:         #164194;
    --cor-vermelho:     #AF1917;
    --cor-cinza:        #4a4a4a;
    --cor-cinza-claro:  #f5f5f5;
    --cor-borda:        #e0e0e0;
    --fonte-titulo:     'Manrope', sans-serif;
    --fonte-corpo:      'Manrope', sans-serif;
}


/* ─── Reset Global ───────────────────────────────────────────────────────────── */

body {
    font-family: 'Manrope', sans-serif;
    color: #4a4a4a;
}

html {
    scroll-behavior: smooth;
}

/* Compensa o header fixo em links âncora */
section[id] {
    scroll-margin-top: 100px;
}

/* Previne flash de elementos Alpine antes da inicialização */
[x-cloak] {
    display: none !important;
}

/* Equilíbrio visual em títulos grandes */
h1, h2, h3 {
    text-wrap: balance;
}

/* Foco acessível */
:focus-visible {
    outline: 2px solid #AF1917;
    outline-offset: 3px;
    border-radius: 4px;
}


/* ─── Ken Burns — Carrossel do Hero ─────────────────────────────────────────── */
/*
    Quatro variações de zoom/pan com alternate+infinite para movimento contínuo.
    O efeito cria a ilusão de câmera lenta se movendo sobre a cena.
    Cada slide usa uma animação diferente para variar o movimento entre trocas.
*/

@keyframes kb1 {
    0%   { transform: scale(1.0)  translate(0%,    0%   ); }
    100% { transform: scale(1.12) translate(-2.5%, -2%  ); }
}
@keyframes kb2 {
    0%   { transform: scale(1.1)  translate(-2%,  -1%  ); }
    100% { transform: scale(1.0)  translate(2%,    0.5%); }
}
@keyframes kb3 {
    0%   { transform: scale(1.0)  translate(2%,   -1.5%); }
    100% { transform: scale(1.12) translate(-1%,  -2.5%); }
}
@keyframes kb4 {
    0%   { transform: scale(1.1)  translate(1%,    1.5%); }
    100% { transform: scale(1.0)  translate(-1.5%,-0.5%); }
}

.kb-1 { animation: kb1 12s ease-in-out infinite alternate; }
.kb-2 { animation: kb2 14s ease-in-out infinite alternate; }
.kb-3 { animation: kb3 11s ease-in-out infinite alternate; }
.kb-4 { animation: kb4 13s ease-in-out infinite alternate; }


/* ─── Hero — Barra de Progresso do Slide Ativo ──────────────────────────────── */

@keyframes slideProgress {
    from { width: 0%; }
    to   { width: 100%; }
}

.slide-progress {
    animation: slideProgress 7s linear forwards;
}


/* ─── Animação de Bounce (seta scroll) ──────────────────────────────────────── */

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(8px); }
}

.animate-bounce-slow {
    animation: bounce-slow 2s ease-in-out infinite;
}


/* ─── Segmentos — Cards Full-Width ──────────────────────────────────────────── */

/*
    Bullets dos cards: deslocam levemente à direita no hover do card (group-hover).
    Cada bullet tem um delay incremental para efeito cascata.
*/
.segment-bullet:nth-child(1) { transition-delay: 0ms;   }
.segment-bullet:nth-child(2) { transition-delay: 60ms;  }
.segment-bullet:nth-child(3) { transition-delay: 120ms; }

/*
    will-change nas imagens dos cards para aceleração via GPU
    (evita repaint no hover scale).
*/
.segment-img {
    will-change: transform;
    backface-visibility: hidden;
}


/* ─── Pré-carregador global ─────────────────────────────────────────────────── */

.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.site-preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.site-preloader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: min(100%, 260px);
    padding: 1rem;
}

.site-preloader__video {
    display: block;
    width: 100%;
    max-height: min(42vh, 320px);
    object-fit: contain;
}

.site-preloader__track {
    width: 100%;
    height: 5px;
    border-radius: 9999px;
    background: rgba(22, 65, 148, 0.18);
    overflow: hidden;
}

.site-preloader__bar {
    height: 100%;
    width: 0%;
    border-radius: 9999px;
    background: var(--cor-azul);
    transition: width 0.12s ease-out;
}

html.site-preloader-lock,
html.site-preloader-lock body {
    overflow: hidden;
}

/* ─── Página de preços — bloqueio de valores ─────────────────────────────── */

.precos-gate {
    position: relative;
}

.precos-gate.is-locked .precos-gated-content {
    filter: blur(7px);
    user-select: none;
    pointer-events: none;
}

.precos-gate-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.28);
}

.precos-gate.is-locked .precos-gate-overlay {
    display: flex;
}

.precos-gate-overlay__content {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(22, 65, 148, 0.12);
    border-radius: 0.9rem;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12);
    padding: 1rem 1.25rem;
    max-width: 320px;
}

.precos-lead-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.precos-lead-modal.hidden {
    display: none;
}

.precos-lead-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.55);
}

.precos-lead-modal__panel {
    position: relative;
    margin: min(12vh, 5rem) auto 0;
    width: min(92vw, 460px);
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.precos-lead-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.8rem;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 1.65rem;
    line-height: 1;
}