/* ===========================================================
   Estilos do site Delegado Cristiomário (versão PHP)
   Substitui as animações do framer-motion por CSS + IntersectionObserver
   =========================================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ---- Animação de entrada (load) — usada no Hero/Navbar ---- */
.load-anim {
    opacity: 0;
    transform: translateY(30px);
    animation: loadUp 0.7s ease-out forwards;
    animation-delay: var(--d, 0s);
}
@keyframes loadUp {
    to { opacity: 1; transform: translateY(0); }
}

.nav-enter { animation: navDown 0.6s ease-out; }
@keyframes navDown {
    from { transform: translateY(-80px); }
    to   { transform: translateY(0); }
}

/* ---- Revelação no scroll (substitui useInView do framer-motion) ---- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--d, 0s);
}
.reveal.reveal-left  { transform: translateX(-40px); }
.reveal.reveal-right { transform: translateX(40px); }
.reveal.in-view {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

/* ---- Hero: grade de fundo ---- */
.hero-grid {
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.6) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
}

/* ---- Hero: nome em dourado com brilho ---- */
.hero-title-gold {
    background: linear-gradient(180deg, #FFE89A 0%, #F5C518 45%, #D4A800 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #F5C518;
    filter: drop-shadow(0 3px 14px rgba(245,197,24,0.25));
}

/* ---- Hero: anel dourado giratório ---- */
.hero-ring { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Animações flutuantes ---- */
.animate-float { animation: floatY 3s ease-in-out infinite; }
@keyframes floatY {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-8px); }
}

.animate-float-down { display: inline-block; animation: floatDown 1.5s ease-in-out infinite; }
@keyframes floatDown {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* ---- CTA flutuante visível ---- */
#floatingCTA.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ---- Menu mobile aberto ---- */
#mobileMenu.open { max-height: 420px; }

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
    .load-anim, .reveal, .animate-float, .animate-float-down, .nav-enter {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}