/* =====================================================================
   SCROLL ANIMATIONS — V2 Homepage
   Overview-v2.php only. Uses IntersectionObserver via scroll-animations.js
   ===================================================================== */

/* ---- Base reveal (fade-up) ---- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Child stagger (inherits fade-up, adds delay) ---- */
.scroll-reveal-child {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--sr-delay, 0s);
    will-change: opacity, transform;
}

.scroll-reveal-child.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Slide from left ---- */
.scroll-reveal--left {
    opacity: 0;
    transform: translateX(-60px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal--left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Slide from right ---- */
.scroll-reveal--right {
    opacity: 0;
    transform: translateX(60px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal--right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Scale-in variant ---- */
.scroll-reveal--scale {
    opacity: 0;
    transform: scale(0.92);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--sr-delay, 0s);
}

.scroll-reveal--scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ---- Hero parallax depth ---- */
.hero-section[data-parallax] .hero-media {
    will-change: transform;
}

/* ---- Pillar content slide-in refinements ---- */
.pillar-inner .pillar-content.scroll-reveal--left,
.pillar-inner .pillar-media.scroll-reveal--right {
    transition-delay: 0.1s;
}

.pillar-inner--reverse .pillar-content.scroll-reveal--right,
.pillar-inner--reverse .pillar-media.scroll-reveal--left {
    transition-delay: 0.1s;
}

/* ---- Transparent header over hero (V2) ---- */

/* Pull the hero up behind the header so video fills to the top edge.
   ALWAYS keep this negative margin — toggling it causes layout shift that
   creates a scroll ↔ IntersectionObserver feedback loop (the "shake" bug). */
.hero-section {
    margin-top: calc(-1 * var(--header-height));
    z-index: 0;
}

/* Make the header fixed so it is ALWAYS visible on scroll.
   position:sticky can be silently broken by ancestor overflow. */
.site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky) !important;
}

/* Compensate for fixed header not taking flow space */
#main-content {
    padding-top: var(--header-height);
}

/* ---- How It Cares — 3-step grid ---- */
.how-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: stretch;
}

@media (max-width: 768px) {
    .how-steps-grid {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 8px;
        /* Hide scrollbar */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE */
    }

    .how-steps-grid::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
    }

    .how-steps-grid>.how-step {
        flex: 0 0 75vw;
        min-width: 75vw;
        scroll-snap-align: start;
    }
}

/* --- Shared transitions on all header elements (both directions) --- */
body .site-header {
    transition:
        background 0.35s ease,
        border-bottom-color 0.35s ease;
}

body .site-header .header-logo img {
    transition: filter 0.35s ease, mix-blend-mode 0s;
}

body .site-header .desktop-nav a {
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

body .site-header .availability-status {
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

body .site-header .hamburger span {
    transition: background 0.35s ease;
}

body .site-header .header-cta {
    transition: border-color 0.35s ease;
}

/* --- Transparent state: header over hero --- */
body.header-over-hero .site-header {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}

/* Make nav links white/light for readability over video */
body.header-over-hero .site-header .desktop-nav a {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

body.header-over-hero .site-header .desktop-nav a:hover {
    color: #fff;
}

/* Logo: invert to white */
body.header-over-hero .site-header .header-logo img {
    filter: brightness(0) invert(1);
    mix-blend-mode: normal;
}

/* Availability status text */
body.header-over-hero .site-header .availability-status {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Hamburger bars */
body.header-over-hero .site-header .hamburger span {
    background: #fff;
}

/* CTA button in header — make it visible on transparent bg */
body.header-over-hero .site-header .header-cta {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- Solid state: header scrolled past hero (black on white) --- */
body:not(.header-over-hero) .site-header {
    background: #fff;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

body:not(.header-over-hero) .site-header .header-logo img {
    filter: brightness(0);
    /* pure black logo */
    mix-blend-mode: normal;
}

body:not(.header-over-hero) .site-header .desktop-nav a {
    color: var(--color-text-secondary);
    text-shadow: none;
}

body:not(.header-over-hero) .site-header .desktop-nav a:hover {
    color: var(--color-text-primary);
}

body:not(.header-over-hero) .site-header .availability-status {
    color: var(--color-text-secondary);
    text-shadow: none;
}

body:not(.header-over-hero) .site-header .hamburger span {
    background: var(--color-text-primary);
}

body:not(.header-over-hero) .site-header .header-cta {
    border: 1px solid transparent;
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {

    .scroll-reveal,
    .scroll-reveal-child,
    .scroll-reveal--left,
    .scroll-reveal--right,
    .scroll-reveal--scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}