/* =====================================================================
   FreshAir Climatisation — Site-wide Overlay & Scroll Animation Kit
   File: assets/css/scroll-effects.css
   ---------------------------------------------------------------------
   Two independent pieces, both opt-in and additive to the existing
   design system in header.php:

   1) .page-overlay        — a fixed, pointer-events:none vignette that
                              sits above all page content on every page,
                              for a subtle sense of depth. Never blocks
                              clicks/taps/scrolling.

   2) [data-animate="..."] — an extended version of the existing
                              .reveal-up utility already defined in
                              footer.php. Same IntersectionObserver
                              mechanism, five directional variants,
                              plus optional stagger for card grids.

   Depends on the CSS custom properties already defined in header.php's
   :root block (--color-primary, --color-interactive, etc.) — this file
   assumes it is loaded AFTER header.php's inline <style>, e.g.:

       <link rel="stylesheet" href="<?php echo e(rtrim(BASE_URL,'/')); ?>/assets/css/scroll-effects.css">

   placed right before </head> in header.php.

   JS required: see the snippet at the bottom of this file's companion
   comment block further down / the integration note in chat. The
   existing reveal-up IntersectionObserver in footer.php only toggles
   .is-visible on .reveal-up — it needs a ~10-line extension to also
   watch [data-animate] and read stagger indices. Nothing here works
   as pure CSS; browsers can't yet observe scroll position reliably
   without JS across the board.
   ---------------------------------------------------------------------
   CHANGELOG
   v1.0.0 — 2026-07-11 — Initial build.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) PAGE OVERLAY — fixed depth vignette
   ---------------------------------------------------------------------
   Sits above every page's content (z-index above the fixed header at
   1030, below nothing — nothing should ever need to sit above this).
   pointer-events: none is non-negotiable; this must never intercept a
   click, a form field focus, or a scroll gesture.
   --------------------------------------------------------------------- */
.page-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    pointer-events: none;

    /* Soft darkening toward the top/bottom edges + a faint radial
       lightening at the center, so the page reads as sitting slightly
       "under glass" rather than flat. Uses the brand's primary navy at
       very low opacity, not a generic black, so it stays on-brand
       against COLOR_BASE (#FEFCFB). */
    background:
        linear-gradient(180deg,
            rgba(10, 17, 40, 0.05) 0%,
            transparent 10%,
            transparent 90%,
            rgba(10, 17, 40, 0.07) 100%),
        radial-gradient(ellipse 120% 60% at 50% 0%,
            rgba(10, 17, 40, 0.04) 0%,
            transparent 60%);

    /* mix-blend-mode keeps this from ever muddying bright product
       photography or the white logo badges — it darkens what's under
       it without flattening colour saturation the way plain opacity
       would. */
    mix-blend-mode: multiply;
}

/* Optional companion: a very faint grain texture, adds a "designed"
   tactile quality on large flat colour areas (hero, footer) without
   being visible as a distinct pattern. Toggle by adding
   class="page-overlay page-overlay--grain" instead of just
   class="page-overlay" on the <div> — see integration note. */
.page-overlay--grain::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
    /* The overlay itself is static, but if it's ever animated in on
       load (see optional fade-in below), respect reduced motion. */
    .page-overlay {
        transition: none !important;
    }
}

/* Optional: fade the overlay in on first paint rather than snapping in.
   Add class="page-overlay is-ready" via a `requestAnimationFrame` tick
   if you want this; otherwise the overlay is simply always present. */
.page-overlay {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.page-overlay.is-ready {
    opacity: 1;
}


/* ---------------------------------------------------------------------
   2) SCROLL-REVEAL SYSTEM — extends the existing .reveal-up utility
   ---------------------------------------------------------------------
   .reveal-up (defined in header.php) keeps working unchanged. These
   [data-animate] variants live alongside it so existing markup using
   class="reveal-up" is untouched; new/updated sections can opt into a
   direction with data-animate="fade-up|fade-down|fade-left|fade-right|zoom-in".
   --------------------------------------------------------------------- */
[data-animate] {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
        transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
    transition-delay: calc(var(--reveal-stagger, 0) * 80ms);
    will-change: opacity, transform;
}

[data-animate="fade-up"] {
    transform: translateY(28px);
}

[data-animate="fade-down"] {
    transform: translateY(-28px);
}

[data-animate="fade-left"] {
    /* content slides in from the right */
    transform: translateX(36px);
}

[data-animate="fade-right"] {
    /* content slides in from the left */
    transform: translateX(-36px);
}

[data-animate="zoom-in"] {
    transform: scale(0.94);
}

[data-animate].is-visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Stagger helper classes for grids (category-grid, product-grid,
   value-grid, stat-row, testimonial cards, etc.) — put data-animate on
   each child and add reveal-stagger-1 through reveal-stagger-6 to set
   --reveal-stagger without inline styles. */
.reveal-stagger-1 {
    --reveal-stagger: 1;
}

.reveal-stagger-2 {
    --reveal-stagger: 2;
}

.reveal-stagger-3 {
    --reveal-stagger: 3;
}

.reveal-stagger-4 {
    --reveal-stagger: 4;
}

.reveal-stagger-5 {
    --reveal-stagger: 5;
}

.reveal-stagger-6 {
    --reveal-stagger: 6;
}

@media (prefers-reduced-motion: reduce) {

    [data-animate],
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ---------------------------------------------------------------------
   3) SCROLL PROGRESS BAR — slim indicator of position in the page
   ---------------------------------------------------------------------
   A thin bar fixed to the very top of the viewport (above
   .header-divider's z-index of 1029, below .page-overlay's 1050),
   filled left-to-right as the visitor scrolls down the page. Width is
   set via JS (--scroll-progress custom property) on a scroll listener.
   --------------------------------------------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1045;
    background: transparent;
    pointer-events: none;
}

.scroll-progress::before {
    content: "";
    display: block;
    height: 100%;
    width: calc(var(--scroll-progress, 0) * 1%);
    background: var(--color-interactive);
    transition: width 0.08s linear;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress::before {
        transition: none;
    }
}