/* ==========================================================================
   PRAGMATUR 3D — Glassmorphism + CSS 3D Interactive Effects
   Additive layer — loaded AFTER style.css. Does NOT modify originals.
   ========================================================================== */
/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (MOTOR DE VIDRO ATUALIZADO)
   ========================================================================== */
:root {
    /* Material idêntico ao Header/Menu */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-bg-white: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: 40px;

    /* Aumentado de 16px para 40px */
    --glass-saturate: 210%;

    /* Aumentado de 180% para 210% */
    /* Definições 3D mantidas */
    --card-perspective: 800px;
    --card-max-tilt: 0.5deg;
    --card-transition-spring: cubic-bezier(0.23, 1, 0.32, 1);
    --card-float-shadow: 0 8px 32px 0 rgba(0, 0, 24, 0.10);
    --card-float-shadow-hover: 12px 32px 56px rgba(0, 0, 24, 0.14);
    --scroll-reveal-distance: 40px;
    --hero-scroll-opacity: 0;
}

/* ==========================================================================
   2. PERSPECTIVE CONTAINERS
   ========================================================================== */
.services .grid,
.grid-2x2,
.clientes-grid {
    perspective: var(--card-perspective);
    perspective-origin: 50% 50%;
}

/* ==========================================================================
   3. CARD GLASSMORPHISM + 3D BASE
   ========================================================================== */
.services .grid .card,
.grid-2x2 .card,
.clientes-grid .cliente-item {
    /* 1. FORÇAR O MATERIAL DE VIDRO (Igual ao Header) */
    background: var(--glass-bg) !important;

    /* 2. FILTROS DE DESFOQUE (Blur 40px) */
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) !important;

    /* 3. BORDAS E SOMBRAS */
    border: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), /* Brilho interno */
        0 4px 12px rgba(0, 0, 24, 0.04),          /* Sombra base */
        var(--card-float-shadow);

    /* Sombra difusa */
    /* 4. PREPARAÇÃO 3D */
    transform-style: preserve-3d;
    transform: perspective(var(--card-perspective)) rotateX(0deg) rotateY(0deg) translateZ(0px);
    will-change: transform, box-shadow;
}

/* Garante contraste em fundos claros (Sobre Nós) */
.section-white .grid-2x2 .card {
    background: var(--glass-bg-white) !important;
}

/* Fix para o "Quem Apoiamos" */
.clientes-grid .cliente-item {
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   4. CARD LUMINOUS BORDER GLOW (::after — preserves existing ::before light bar)
   ========================================================================== */
.services .grid .card::after,
.grid-2x2 .card::after,
.clientes-grid .cliente-item::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 9px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(176, 14, 38, 0.08) 80%,
        rgba(255, 255, 255, 0.3) 100%
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.services .grid .card:hover::after,
.grid-2x2 .card:hover::after,
.clientes-grid .cliente-item:hover::after {
    opacity: 1;
}

/* ==========================================================================
   5. CARD HOVER — 3D FLOAT (replaces original translateY(-6px))
   CSS-only fallback when JS is disabled
   ========================================================================== */
.services .grid .card:hover,
.grid-2x2 .card:hover,
.clientes-grid .cliente-item:hover {
    transform: perspective(var(--card-perspective)) rotateX(0deg) rotateY(0deg) translateZ(1px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9),
        var(--card-float-shadow-hover);
    border-color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   6. CARD SCROLL-REVEAL BASE STATE
   ========================================================================== */
.services .grid .card,
.grid-2x2 .card,
.clientes-grid .cliente-item {
    opacity: 0;
    transform: perspective(var(--card-perspective)) translateY(30px) rotateX(2deg);

    /* Scroll-reveal needs transform transition for entry animation */
    transition: transform 0.7s var(--card-transition-spring),
        box-shadow 0.6s var(--card-transition-spring),
        border-color 0.4s ease,
        opacity 0.7s var(--card-transition-spring);
}

.services .grid .card.revealed,
.grid-2x2 .card.revealed,
.clientes-grid .cliente-item.revealed {
    opacity: 1;
    transform: perspective(var(--card-perspective)) translateY(0) rotateX(0deg) translateZ(0px);

    /* After reveal, remove transform transition so JS tilt is immediate */
    transition: box-shadow 0.6s var(--card-transition-spring),
        border-color 0.4s ease,
        opacity 0.7s var(--card-transition-spring);
}

/* ==========================================================================
   6B. SERVICE HEADING SPACING
   ========================================================================== */
.service-heading {
    margin-bottom: 20px;
    text-transform: none;
}

/* ==========================================================================
   7. SERVICE ROW SCROLL-REVEAL
   ========================================================================== */
.service-row {
    opacity: 0;
    transform: translateY(var(--scroll-reveal-distance));
    transition: opacity 0.8s var(--card-transition-spring),
        transform 0.8s var(--card-transition-spring);
}

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

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

/* Even rows have reversed flex direction — invert slide directions */
.service-row:nth-of-type(even) .service-image {
    transform: translateX(30px);
}

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

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

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

/* Service image depth enhancement on hover */
.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);
}

/* ==========================================================================
   8. 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(--card-transition-spring) forwards;
}

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

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

/* ==========================================================================
   9. 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;
}

/* ==========================================================================
   10. RESPONSIVE — TABLET & MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    /* Disable perspective on mobile */
    .services .grid,
    .grid-2x2,
    .clientes-grid {
        perspective: none;
    }

    /* Disable 3D tilt, keep glassmorphism visual */
    .services .grid .card,
    .grid-2x2 .card,
    .clientes-grid .cliente-item {
        transform: none !important;
        will-change: auto;
        opacity: 0;
    }

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

    .services .grid .card:hover,
    .grid-2x2 .card:hover,
    .clientes-grid .cliente-item:hover {
        transform: translateY(-6px) !important;
    }

    /* Simpler scroll reveal for service rows (vertical only) */
    .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);
    }
}

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