/* Fontes */
.font-header { font-family: "Cinzel", serif; }
.font-body { font-family: "Cormorant Garamond", serif; }

/* Scroll Suave */
html { scroll-behavior: smooth; }

/* Scrollbar Customizada */
::-webkit-scrollbar { width: 6px; background: #050505; }
::-webkit-scrollbar-thumb { background: #1a120b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3e2723; }

/* Overlay de Granulação */
.grain-overlay {
    width: 200%;
    height: 200%;
    position: absolute;
    left: -50%;
    top: -50%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    animation: grainMove 8s steps(10) infinite;
}

/* Animações Keyframes */
@keyframes grainMove {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

@keyframes breathe {
    0%, 100% { box-shadow: inset 0 0 150px rgba(0,0,0,0.95); }
    50% { box-shadow: inset 0 0 200px rgba(0,0,0,0.85); }
}

@keyframes slowPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(62, 39, 35, 0.3); transform: translateX(-50%) scale(1); }
    50% { box-shadow: 0 0 25px rgba(62, 39, 35, 0.5); transform: translateX(-50%) scale(1.02); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes shootVertical {
    0% { transform: translateX(0) translateY(0) rotate(-75deg); opacity: 0; }
    10% { opacity: 0.3; } 
    20% { transform: translateX(-50px) translateY(200px) rotate(-75deg); opacity: 0; }
    100% { transform: translateX(-50px) translateY(200px) rotate(-75deg); opacity: 0; }
}

@keyframes scrollWheel {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(6px); opacity: 0; }
}

@keyframes subtleFadeIn {
    from { opacity: 0; transform: scale(0.98) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Classes de Animação */
.animate-scroll-wheel { animation: scrollWheel 2s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
.animate-breathe { animation: breathe 10s ease-in-out infinite; }
.animate-seal { animation: slowPulse 6s ease-in-out infinite; }
.animate-subtle-fade { animation: subtleFadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.typing-dot { animation: blink 1.4s infinite both; }

/* Efeitos de Texto e Imagem */
.glow-text { text-shadow: 0 0 15px rgba(212, 175, 55, 0.15); }
.logo-filter { filter: grayscale(100%) brightness(0.6) contrast(1.2); transition: all 1.2s ease; }
.logo-filter:hover { filter: grayscale(0%) brightness(0.9) contrast(1); opacity: 1; }

/* Botões */
.ritual-btn { transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.ritual-btn:hover { background-color: #2a1d15; border-color: #5d4037; box-shadow: 0 0 30px rgba(62,39,35,0.25); transform: scale(1.02); }
.ritual-btn:active { transform: scale(0.98); opacity: 0.9; transition: 0.2s; }

/* Voo do Corvo */
.crow-flight {
    transition: top 2.5s cubic-bezier(0.45, 0, 0.55, 1), 
                left 2.5s cubic-bezier(0.45, 0, 0.55, 1), 
                right 2.5s cubic-bezier(0.45, 0, 0.55, 1),
                transform 1.5s ease-in-out;
}

/* Estilos de Galhos */
.branch {
    position: absolute;
    width: 10rem; /* w-40 */
    height: 8rem; /* h-32 */
    z-index: 10;
    pointer-events: none;
    opacity: 0.9;
}
@media (min-width: 768px) {
    .branch { width: 20rem; } /* md:w-80 */
}
.branch-left { left: -1rem; }
.branch-right { right: -1rem; transform: scaleX(-1); }