/* ==========================================================================
   PRAGMATUR IMÓVEIS — Effects Layer (E&V + Glassmorphism)
   Additive layer — loaded AFTER style.css. Handles scroll-reveal,
   hero parallax, dialog glassmorphism. No 3D tilt.
   ========================================================================== */

/* ==========================================================================
   1. SCROLL-REVEAL BASE STATE (Cards & Service Rows)
   ========================================================================== */
.services .grid .card,
.grid-2x2 .card,
.clientes-grid .cliente-item {
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.7s var(--ease-premium),
        box-shadow 0.5s ease,
        border-color 0.4s ease,
        opacity 0.7s var(--ease-premium);
}

.services .grid .card.revealed,
.grid-2x2 .card.revealed,
.clientes-grid .cliente-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   2. IMOVEL-CARD SCROLL-REVEAL (B2C)
   ========================================================================== */
.imovel-card {
    opacity: 0;
    transform: translateY(30px);
    transition: transform 0.7s var(--ease-premium),
        box-shadow 0.5s ease,
        opacity 0.7s var(--ease-premium);
}

.imovel-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   3. SERVICE ROW SCROLL-REVEAL
   ========================================================================== */
.service-row {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-premium),
        transform 0.8s var(--ease-premium);
}

.service-row .service-image {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s var(--ease-premium) 0.15s,
        transform 0.7s var(--ease-premium) 0.15s,
        box-shadow 0.5s ease;
}

.service-row .service-text {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s var(--ease-premium) 0.3s,
        transform 0.7s var(--ease-premium) 0.3s;
}

.service-row:nth-of-type(even) .service-image {
    transform: translateX(30px);
}

.service-row:nth-of-type(even) .service-text {
    transform: translateX(-30px);
}

.service-row.revealed {
    opacity: 1;
    transform: translateY(0);
}

.service-row.revealed .service-image,
.service-row.revealed .service-text {
    opacity: 1;
    transform: translateX(0);
}

.service-row.revealed .service-image:hover {
    box-shadow: 8px 24px 48px rgba(0, 0, 24, 0.12),
        0 2px 8px rgba(0, 0, 24, 0.06);
    transform: translateY(-4px);
}

/* ==========================================================================
   4. DIALOG ENHANCED GLASSMORPHISM
   ========================================================================== */
dialog {
    margin: auto;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(252, 250, 248, 0.82) 50%,
        rgba(255, 255, 255, 0.85) 100%
    );
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -1px 1px rgba(0, 0, 0, 0.02),
        16px 40px 80px rgba(0, 0, 24, 0.18);
    border-left: 6px solid var(--accent-red);
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

dialog::backdrop {
    background: rgba(0, 0, 24, 0.40);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
}

dialog[open] {
    animation: dialogSlideIn 0.4s var(--ease-premium) forwards;
}

@keyframes dialogSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   5. HERO PARALLAX OVERLAY
   ========================================================================== */
.hero {
    transform-style: preserve-3d;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at 30% 40%,
        rgba(0, 0, 24, 0.02) 0%,
        rgba(0, 0, 24, 0.08) 100%
    );
    z-index: 2;
    pointer-events: none;
    opacity: var(--hero-scroll-opacity, 0);
    transition: opacity 0.1s linear;
}

/* ==========================================================================
   6. RESPONSIVE — TABLET & MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    .services .grid .card,
    .grid-2x2 .card,
    .clientes-grid .cliente-item {
        opacity: 0;
        transform: none !important;
        will-change: auto;
    }

    .services .grid .card.revealed,
    .grid-2x2 .card.revealed,
    .clientes-grid .cliente-item.revealed {
        opacity: 1;
        transform: none !important;
    }

    .imovel-card {
        opacity: 0;
        transform: translateY(20px);
    }

    .imovel-card.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    .service-row {
        transform: translateY(20px);
    }

    .service-row .service-image,
    .service-row .service-text,
    .service-row:nth-of-type(even) .service-image,
    .service-row:nth-of-type(even) .service-text {
        transform: translateX(0);
        opacity: 0;
    }

    .service-row.revealed .service-image,
    .service-row.revealed .service-text {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   7. ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .services .grid .card,
    .grid-2x2 .card,
    .clientes-grid .cliente-item,
    .imovel-card,
    .service-row,
    .service-row .service-image,
    .service-row .service-text,
    dialog[open] {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}