/* 
   PORTAL DO VIDRO — ANIMATIONS.CSS
   Micro‑interações modernas, elegantes e discretas.
   Camada de UX premium para reforçar percepção de qualidade.
*/


/* ============================================================
   FADE‑IN SUAVE (entrada vertical)
   Usado em blocos, títulos, textos, cards e seções.
   Classe utilitária: .fade-in
   ============================================================ */

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(22px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   SLIDE-UP (mais marcante)
   Classe utilitária: .slide-up
   ============================================================ */

.slide-up {
    opacity: 0;
    transform: translateY(40px);
    animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   FADE‑IN LATERAL (esquerda → direita)
   Classe utilitária: .slide-left
   ============================================================ */

.slide-left {
    opacity: 0;
    transform: translateX(-40px);
    animation: slideLeft 1s ease-out forwards;
}

@keyframes slideLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ============================================================
   FADE‑IN LATERAL (direita → esquerda)
   Classe utilitária: .slide-right
   ============================================================ */

.slide-right {
    opacity: 0;
    transform: translateX(40px);
    animation: slideRight 1s ease-out forwards;
}

@keyframes slideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ============================================================
   ZOOM SOFT — hover premium
   Ideal para cards, imagens, botões e elementos clicáveis.
   Classe utilitária: .zoom-soft
   ============================================================ */

.zoom-soft {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.zoom-soft:hover {
    transform: scale(1.04);
    box-shadow: 0 10px 32px rgba(0,0,0,0.15);
}


/* ============================================================
   FLOAT HOVER — efeito elegante de levitação
   Classe utilitária: .float-hover
   ============================================================ */

.float-hover {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.float-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 34px rgba(0,0,0,0.18);
}


/* ============================================================
   GLASS-FADE — efeito vidro elegante para overlays
   Classe utilitária: .glass-fade
   ============================================================ */

.glass-fade {
    opacity: 0;
    backdrop-filter: blur(0px);
    animation: glassFade 0.9s ease forwards;
}

@keyframes glassFade {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(6px);
    }
}


/* ============================================================
   FADE-IN DELAY UTILITIES
   Ideais para stagger animation em grids, cards, galerias.
   ============================================================ */

.fade-delay-1 { animation-delay: 0.2s; }
.fade-delay-2 { animation-delay: 0.4s; }
.fade-delay-3 { animation-delay: 0.6s; }
.fade-delay-4 { animation-delay: 0.8s; }


/* ============================================================
   HOVER BRILHO SUTIL
   Classe utilitária: .shine-hover
   ============================================================ */

.shine-hover {
    position: relative;
    overflow: hidden;
}

.shine-hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: rgba(255,255,255,0.25);
    transform: skewX(-25deg);
    transition: 0.8s;
}

.shine-hover:hover::after {
    left: 150%;
}


/* ============================================================
   SUAVIZAÇÃO GLOBAL DE TRANSIÇÕES
   ============================================================ */

button,
a,
img,
.card,
button,
input,
textarea,
.gallery-card,
.service-box {
    transition: 0.25s ease;
}