/* ==========================================================================
   hero3d.css — 3D depth + interactive tilt layer for the Amerivet homepage.
   Additive only: every rule is namespaced under .av3d-* or targets existing
   elements in a way that degrades to the current flat design if JS is absent.

   Performance budget: transforms + opacity only (GPU-composited), no WebGL,
   no filter/blur animation on large surfaces, particle count capped, and all
   motion disabled under prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. Depth on the hero --------------------------------------- */

.av3d-hero {
    /* Establishes a 3D rendering context. The existing video/picture
       background stays at translateZ(0) so it reads as a flat backdrop. */
    perspective: 1200px;
    perspective-origin: 50% 40%;
    overflow: hidden;
}

/* Keep the background layers flat and behind everything. */
.av3d-hero .hero-video-container,
.av3d-hero .hero-bg-img,
.av3d-hero > picture {
    transform: translateZ(0);
    will-change: auto;
}

/* Promote the content column into the 3D scene. */
.av3d-hero .hero-container {
    transform-style: preserve-3d;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Depth per element: the further forward, the larger and closer it feels.
   Values are deliberately small — big translateZ on text hurts legibility. */
.av3d-hero .hero-badge {
    transform: translateZ(28px);
}

.av3d-hero h1 {
    transform: translateZ(64px);
    /* A slow, subtle breathing float so the headline feels alive on load. */
    animation: av3d-float-h1 7s ease-in-out infinite;
}

.av3d-hero .hero-subtitle {
    transform: translateZ(40px);
}

.av3d-hero .hero-ctas {
    transform: translateZ(52px);
}

.av3d-hero .hero-ctas .btn {
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease;
}

/* Depth shadow under the headline sells the extrusion without a WebGL pass. */
.av3d-hero h1,
.av3d-hero .hero-badge,
.av3d-hero .hero-subtitle,
.av3d-hero .hero-ctas {
    will-change: transform;
    backface-visibility: hidden;
}

@keyframes av3d-float-h1 {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}

/* ---------- 2. Interactive pointer tilt (JS-driven, opt-in) ------------- */

/* Only engaged once JS sets .av3d-tilt-active, so no-JS users see the
   original static layout. Magnitudes are small on purpose. */
.av3d-tilt-active .av3d-hero .hero-container {
    will-change: transform;
}

.av3d-hero .hero-ctas .btn.av3d-lift {
    transform: translateZ(52px) translateY(-3px) scale(1.02);
}

.av3d-hero .hero-ctas .btn.av3d-lift-primary {
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.38);
}

/* ---------- 3. Water-droplet particles (thematic, GPU-cheap) ----------- */

.av3d-droplets {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.av3d-drop {
    position: absolute;
    bottom: -12vh;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(191, 219, 254, 0.26) 38%,
            rgba(96, 165, 250, 0.10) 68%,
            rgba(37, 99, 235, 0.03) 100%);
    box-shadow: inset 0 -1px 4px rgba(255, 255, 255, 0.18);
    opacity: 0;
    animation: av3d-rise linear infinite;
    will-change: transform, opacity;
}

@keyframes av3d-rise {
    0% {
        transform: translate3d(0, 0, 0) scale(0.6);
        opacity: 0;
    }
    12% {
        opacity: 0.42;
    }
    70% {
        opacity: 0.26;
    }
    100% {
        transform: translate3d(var(--av3d-drift, 24px), -118vh, 0) scale(1.05);
        opacity: 0;
    }
}

/* ---------- 4. Card hover tilt (services + testimonials) ---------------- */

.av3d-card {
    transform-style: preserve-3d;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s ease;
    will-change: transform;
}

.av3d-tilt-active .av3d-card.av3d-hover {
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.16);
}

/* Lift the icon off the card face so the card reads as a physical object. */
.av3d-card .service-icon {
    transform: translateZ(22px);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.av3d-tilt-active .av3d-card.av3d-hover .service-icon {
    transform: translateZ(34px) scale(1.06);
}

/* ---------- 5. Scroll reveal ------------------------------------------- */

.av3d-reveal {
    opacity: 0;
    transform: translateY(26px) rotateX(-6deg);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.av3d-reveal.av3d-in {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* ---------- 6. Mobile parity (matches the existing 768px breakpoint) --- */

@media (max-width: 768px) {
    /* Flatten the scene: extra depth on small screens costs legibility and
       battery for no gain. Keep the float, drop the tilt and particles. */
    .av3d-hero {
        perspective: none;
    }

    .av3d-hero .hero-container,
    .av3d-hero .hero-badge,
    .av3d-hero h1,
    .av3d-hero .hero-subtitle,
    .av3d-hero .hero-ctas,
    .av3d-hero .hero-ctas .btn {
        transform: none;
    }

    .av3d-hero h1 {
        animation: av3d-float-h1 9s ease-in-out infinite;
    }

    .av3d-droplets {
        display: none;
    }

    .av3d-card,
    .av3d-card .service-icon {
        transform: none;
    }

    .av3d-reveal {
        transform: translateY(16px);
    }
}

/* ---------- 7. Accessibility ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .av3d-hero h1 {
        animation: none;
    }

    .av3d-drop {
        display: none;
    }

    .av3d-hero .hero-container,
    .av3d-hero .hero-ctas .btn,
    .av3d-card,
    .av3d-card .service-icon,
    .av3d-reveal {
        transition: none;
        transform: none;
        opacity: 1;
    }

    .av3d-reveal {
        opacity: 1;
    }
}

/* Print: no decoration, keep it black on white. */
@media print {
    .av3d-droplets {
        display: none;
    }

    .av3d-hero,
    .av3d-card,
    .av3d-reveal {
        transform: none !important;
        opacity: 1 !important;
    }
}