/*
    Intro "hero" (resources/views/includes/intros/sections/h1_hero.blade.php e
    h2_hero.blade.php) - adaptado do componente "HeroSection" do 21st.dev
    (React/Framer Motion) pra CSS puro. Texto de um lado (tag/título/descrição/
    botão/estatísticas vindas do campo valores), colagem de 3 fotos da galeria
    do outro, com formas decorativas soltas atrás flutuando devagar. Empilha em
    1 coluna no mobile. Entrada com "revelado" (opacidade/blur/translate)
    quando a seção entra na tela - ver intro-hero.js.

    Cada foto/forma tem 2 camadas (posicionamento + flutuação contínua) de
    propósito: a entrada (transition) e a flutuação (animation infinita) usam
    "transform" - a mesma propriedade no mesmo elemento entraria em conflito
    (animation sempre vence transition). A camada externa (data-intro-hero-item,
    position:absolute) só cuida da entrada; a interna (.cms-intro-hero-flutuar)
    só cuida da flutuação - cada uma na sua propriedade, sem disputa.
*/
.cms-intro-hero-content {
    padding: 60px 0;
    overflow: hidden;
}

.cms-intro-hero {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 48px;
}

@media (min-width: 992px) {
   
    .cms-intro-hero {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 992px) {
    .cms-intro-hero-content {
    padding: 0 0;
    overflow: hidden;
}
     
}

/* ==================== Texto ==================== */
.cms-intro-hero-texto {
    text-align: center;
}

@media (min-width: 992px) {
    .cms-intro-hero-texto {
        text-align: left;
    }
}

.cms-intro-hero-tag {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--thm-base, #f18535);
}

.cms-intro-hero-titulo {
    margin: 0 0 16px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .cms-intro-hero-titulo {
        font-size: 44px;
    }
}

.cms-intro-hero-descricao {
    margin: 0 auto 26px;
    max-width: 480px;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

@media (min-width: 992px) {
    .cms-intro-hero-descricao {
        margin-left: 0;
    }
}

.cms-intro-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--thm-base, #f18535);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cms-intro-hero-btn:hover,
.cms-intro-hero-btn:focus {
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* ==================== Estatísticas (campo valores) ==================== */
.cms-intro-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 36px;
}

@media (min-width: 992px) {
    .cms-intro-hero-stats {
        justify-content: flex-start;
    }
}

.cms-intro-hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cms-intro-hero-stat-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--thm-base, #f18535);
    font-size: 16px;
}

.cms-intro-hero-stat-texto {
    text-align: left;
}

.cms-intro-hero-stat-valor {
    display: block;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
}

.cms-intro-hero-stat-obs {
    display: block;
    font-size: 12px;
    color: #777;
}

/* ==================== Colagem de fotos ==================== */
.cms-intro-hero-colagem {
    position: relative;
    height: 440px;
}

@media (min-width: 576px) {
    .cms-intro-hero-colagem {
        height: 520px;
    }
}

/* Camada externa: só posiciona + entrada (opacidade/blur/translate) */
.cms-intro-hero-forma,
.cms-intro-hero-foto {
    position: absolute;
}

.cms-intro-hero-forma-1 { top: -10px; left: 20%; width: 70px; height: 70px; }
.cms-intro-hero-forma-2 { bottom: 30px; right: 15%; width: 55px; height: 55px; }
.cms-intro-hero-forma-3 { bottom: 15%; left: 5px; width: 26px; height: 26px; }

/* 6 fotos espalhadas: foto-1 continua a maior/central, foto-2/3 nas quinas
   grandes de sempre, foto-4/5/6 novas, menores, preenchendo os vãos - sem
   empilhar direto em cima de nenhuma das 3 originais. */
.cms-intro-hero-foto-1 { top: 0; left: 50%; margin-left: -95px; width: 190px; height: 190px; z-index: 3; }
.cms-intro-hero-foto-2 { top: 24%; right: 0; width: 130px; height: 130px; z-index: 2; }
.cms-intro-hero-foto-3 { bottom: 0; left: 0; width: 120px; height: 120px; z-index: 2; }
.cms-intro-hero-foto-4 { top: 4%; left: 0; width: 85px; height: 85px; z-index: 1; }
.cms-intro-hero-foto-5 { bottom: 10%; right: 6%; width: 100px; height: 100px; z-index: 1; }
.cms-intro-hero-foto-6 { top: 50%; left: 14%; width: 75px; height: 75px; z-index: 1; }

@media (min-width: 576px) {
    .cms-intro-hero-foto-1 { width: 230px; height: 230px; margin-left: -115px; }
    .cms-intro-hero-foto-2 { width: 185px; height: 185px; }
    .cms-intro-hero-foto-3 { width: 165px; height: 165px; }
    .cms-intro-hero-foto-4 { width: 115px; height: 115px; }
    .cms-intro-hero-foto-5 { width: 140px; height: 140px; }
    .cms-intro-hero-foto-6 { width: 100px; height: 100px; }
}

/* Camada interna: flutuação contínua + aparência visual (a forma decorativa
   e a moldura da foto vivem aqui, não na camada externa) */
.cms-intro-hero-forma-flutuar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--thm-base, #f18535);
    opacity: 0.15;
    animation: cms-intro-hero-flutuar 4s ease-in-out infinite;
}

.cms-intro-hero-forma-2 .cms-intro-hero-forma-flutuar { border-radius: 18px; animation-delay: 0.6s; }
.cms-intro-hero-forma-3 .cms-intro-hero-forma-flutuar { animation-delay: 1.2s; }

.cms-intro-hero-foto-flutuar {
    width: 100%;
    height: 100%;
    padding: 6px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    animation: cms-intro-hero-flutuar 5s ease-in-out infinite;
}

.cms-intro-hero-foto-2 .cms-intro-hero-foto-flutuar { animation-delay: 0.4s; }
.cms-intro-hero-foto-3 .cms-intro-hero-foto-flutuar { animation-delay: 0.8s; }
.cms-intro-hero-foto-4 .cms-intro-hero-foto-flutuar { animation-delay: 1.2s; }
.cms-intro-hero-foto-5 .cms-intro-hero-foto-flutuar { animation-delay: 1.6s; }
.cms-intro-hero-foto-6 .cms-intro-hero-foto-flutuar { animation-delay: 2s; }

.cms-intro-hero-foto-flutuar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

@keyframes cms-intro-hero-flutuar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ==================== Entrada ao rolar a tela ==================== */
.cms-intro-hero [data-intro-hero-item] {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(12px);
    transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
    transition-delay: var(--intro-hero-atraso, 0s);
}

.cms-intro-hero.revelado [data-intro-hero-item] {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Fotos/formas entram com um leve zoom também, além do translateY padrão. */
.cms-intro-hero [data-intro-hero-item].cms-intro-hero-foto,
.cms-intro-hero [data-intro-hero-item].cms-intro-hero-forma {
    transform: translateY(20px) scale(0.85);
}

.cms-intro-hero.revelado [data-intro-hero-item].cms-intro-hero-foto,
.cms-intro-hero.revelado [data-intro-hero-item].cms-intro-hero-forma {
    transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .cms-intro-hero [data-intro-hero-item] {
        transition: none;
        filter: none;
        transform: none;
        opacity: 1;
    }

    .cms-intro-hero-forma-flutuar,
    .cms-intro-hero-foto-flutuar {
        animation: none;
    }
}