/* ==========================================================================
   scroll3d.css — scroll-driven 3D for the Amerivet homepage.

   Key technical decision: this layer uses the INDIVIDUAL transform properties
   (`translate`, `rotate`, `scale`) instead of the `transform` shorthand.

   Why: the existing .av3d-reveal / hover-tilt system already writes to
   `transform` on these same elements. Per spec, the individual properties are
   applied BEFORE `transform`, so they compose rather than overwrite. Using
   `transform` here would silently kill the reveal animation and the hover lift.

   Everything is transform/opacity only and driven by one rAF loop in
   scroll3d.js, gated to the viewport so off-screen sections cost nothing.
   ========================================================================== */

/* ---------- 1. Scene setup -------------------------------------------- */

html.av3d-scroll-ready {
    /* Smooth in-page anchors without hijacking normal wheel scrolling. */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html.av3d-scroll-ready {
        scroll-behavior: auto;
    }
}

/* The hero acts as the anchor point of the Z axis. */
.av3d-scroll .hero {
    perspective: 1400px;
    perspective-origin: 50% 30%;
    transform-style: preserve-3d;
}

/* Content recedes as you scroll past it — the "dolly out" of the hero. */
.av3d-scroll .hero-container {
    /* --av3d-hero-z and --av3d-hero-s are written by scroll3d.js */
    translate: 0 0 var(--av3d-hero-z, 0px);
    scale: var(--av3d-hero-s, 1);
    will-change: translate, scale;
}

/* NOTE: no `perspective` on the section containers.
   These wrappers sit above every clickable link on the page (service tiles,
   gallery cards, testimonial links). A perspective + preserve-3d context here
   makes the browser hit-test the wrapper's own projected plane rather than the
   links beneath it, which left the lower row of service tiles completely
   unclickable. The section-level depth comes from the transform itself in
   intensity3d.css, which needs no perspective context to render. */
.av3d-scroll .section-container,
.av3d-scroll .gallery-container,
.av3d-scroll .trust-container,
.av3d-scroll .quote-section .section-container {
    perspective: none;
}

/* ---------- 2. Section-level depth tilt ------------------------------- */

/* --av3d-tilt-x / --av3d-tilt-y are written by scroll3d.js per section.
   Small max angles (4deg) keep text readable while reading as dimensional. */
.av3d-scroll .section-container,
.av3d-scroll .gallery-container,
.av3d-scroll .trust-container {
    /* Pitch only. Yaw on a full-width wrapper produced the left/right swing;
       depth now comes from the intensity3d layer's Z push and scale. */
    transform: rotateX(var(--av3d-tilt-x, 0deg));
    transform-style: preserve-3d;
}

/* ---------- 3. Card fan — the row of cards fans in 3D like a hand --------- */

/* Each card gets --av3d-i (its index). Cards rotate slightly around Y and
   step back in Z, producing a fanned deck that straightens as you scroll. */
/* The grid containers must stay FLAT (the CSS default).
   transform-style: preserve-3d here creates a 3D rendering context, and
   browsers then hit-test the grid's own plane rather than the cards inside
   it -- elementFromPoint returned `.services-grid` instead of the link, so
   every service tile was unclickable. The cards keep their own transforms
   (and their own preserve-3d), so the fan still renders; only the
   container's context is removed. */
.av3d-scroll .services-grid,
.av3d-scroll .testimonials-grid,
.av3d-scroll .gallery-grid,
.av3d-scroll .trust-container {
    transform-style: flat;
}

.av3d-scroll .service-card,
.av3d-scroll .testimonial,
.av3d-scroll .gallery-card,
.av3d-scroll .trust-item {
    /* --av3d-fan (0..1 progress), --av3d-i (index) written by scroll3d.js.
       calc() turns the progress into a rotate/translate/scale. */
    rotate: y calc((0.5 - var(--av3d-fan, 1)) * var(--av3d-fan-deg, 0deg));
    /* small cards only -- a subtle deck, not a door swing */
    translate: 0 calc((1 - var(--av3d-fan, 1)) * var(--av3d-fan-rise, 34px))
               calc((1 - var(--av3d-fan, 1)) * var(--av3d-fan-depth, -90px));
    scale: calc(1 - (1 - var(--av3d-fan, 1)) * 0.06);
    /* Flat, NOT preserve-3d. A nested 3D context on the card makes the browser
       hit-test the card's own plane instead of the links inside it, so the
       service tiles became unclickable. The card keeps its own transform. */
    transform-style: flat;
}

/* Fan is a desktop-only flourish; on touch it would fight the tilt layer. */
@media (max-width: 768px) {
    .av3d-scroll .service-card,
    .av3d-scroll .testimonial,
    .av3d-scroll .gallery-card,
    .av3d-scroll .trust-item {
        rotate: none;
        translate: none;
        scale: 1;
    }

    /* Keep the hero dolly — it reads as depth, not gimmick, at any width. */
    .av3d-scroll .hero {
        perspective: none;
    }

    .av3d-scroll .section-container,
    .av3d-scroll .gallery-container,
    .av3d-scroll .trust-container {
        perspective: none;
        rotate: none;
    }
}

/* ---------- 4. Quote panel: the destination of the scroll ------------- */

/* Lifts toward the viewer as it arrives, so the CTA feels like it's being
   brought to the front of the page. */
.av3d-scroll .quote-section .section-container {
    perspective: 1200px;
}

.av3d-scroll .quote-section .section-container > * {
    translate: 0 0 calc((var(--av3d-quote, 0)) * 70px);
    scale: calc(1 + (var(--av3d-quote, 0)) * 0.04);
    will-change: translate, scale;
}

/* ---------- 5. Sticky-ish depth on the trust bar --------------------- */

.av3d-scroll .trust-bar {
    /* Slight scale so the bar feels closer than the services grid. */
    scale: calc(1 + (var(--av3d-trust, 0)) * 0.03);
    will-change: scale;
}

/* ---------- 6. Accessibility + no-JS ---------------------------------- */

/* Without JS the custom properties are never set, and every value above
   resolves to its "at rest" default (0deg / 0px / 1), so the page is flat
   and correct. This block removes even the leftover transition cost. */
@media (prefers-reduced-motion: reduce) {
    .av3d-scroll .hero-container,
    .av3d-scroll .section-container,
    .av3d-scroll .gallery-container,
    .av3d-scroll .trust-container,
    .av3d-scroll .quote-section .section-container > *,
    .av3d-scroll .trust-bar,
    .av3d-scroll .service-card,
    .av3d-scroll .testimonial,
    .av3d-scroll .gallery-card,
    .av3d-scroll .trust-item {
        translate: none;
        rotate: none;
        scale: none;
        will-change: auto;
    }
}

@media print {
    .av3d-scroll .hero-container,
    .av3d-scroll .section-container,
    .av3d-scroll .gallery-container,
    .av3d-scroll .trust-container,
    .av3d-scroll .trust-bar,
    .av3d-scroll .service-card,
    .av3d-scroll .testimonial,
    .av3d-scroll .gallery-card,
    .av3d-scroll .trust-item {
        translate: none !important;
        rotate: none !important;
        scale: none !important;
    }
}