/*
 * phc-hero-video.css — hero section background video layer
 *
 * Owns: layout + layering of the <video> element injected into
 *       `.phc-hero` by mu-plugins/phc-hero-video.php.
 *       Elementor's existing background_image / overlay settings remain
 *       in place as the poster fallback for mobile, slow connections,
 *       reduced-motion users, and no-JS environments.
 *
 * Do NOT set hero-video positioning/opacity on Elementor widget settings
 * or in xpro_custom_css on the hero container. Edit this file instead.
 */

.phc-hero {
    position: relative;
    overflow: hidden;
}

/* Full-viewport hero sizing (matches thephclinic.com).
   100svh = the SMALL viewport height (URL-bar-visible). Unlike 100dvh, svh is a
   FIXED value that does NOT change as the mobile browser chrome shows/hides on
   scroll, so the hero never resizes mid-scroll. 100dvh was used here previously
   but caused a visible reflow / "snap-back" on real Android + iOS devices:
   scrolling collapsed the URL bar, dvh grew, the hero's min-height grew, and
   every section below jerked downward under the user's finger. svh keeps the
   hero stable — when the bar hides, a sliver of the next section simply peeks up,
   which is the expected behaviour. Overrides Elementor's fixed pixel heights
   (800px / 900px). Applies to both the main .phc-hero (homepage, for-partners,
   for-patients, our-story, our-team, white-papers) and the .phc-program-hero
   variant (programs, flagship-program, newsroom). */
.phc-hero,
.phc-program-hero {
    height: auto !important;
    min-height: 100svh !important;
}

.phc-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease-out;
}

.phc-hero-video.is-playing {
    opacity: 1;
}

/*
 * Inner content must sit above the ::before overlay. .phc-hero is
 * `e-con-full` in this build, so its direct child is another
 * Elementor container (class `.elementor-element`), not `.e-con-inner`
 * — target that. The video keeps z-index:0, the overlay sits between.
 */
.phc-hero > .elementor-element {
    position: relative;
    z-index: 2;
    /* Neutralize any fixed min-height set in Elementor on the inner content
       container (e.g. for-partners' phheroin = 800px). Otherwise it forces
       the 100svh outer hero to stay at the inner's pixel height on short
       viewports. Inner content still fills the hero via flex. */
    min-height: 0 !important;
}

/*
 * Hero overlay gradient — transcribed from the Figma hero frame
 * (fileKey nHuDYAsCtLXNdhRtJBaXmv, node 144:2071). Three-stop linear
 * gradient, right-to-left. The stops beyond 100 % are intentional —
 * Figma extrapolates a gentle falloff across the visible area.
 *
 * Elementor emits this overlay as a ::before pseudo (see
 * 07-build-homepage.php background_overlay_* settings — 180deg,
 * 0.4 → 0.7, opacity 0.5). We replace the gradient AND force
 * opacity:1 so our alpha values render at their intended strength
 * instead of being halved by Elementor's default overlay opacity.
 *
 * z-index is intentionally NOT set so stacking falls back to DOM
 * order and the .elementor-element content above this rule always
 * wins.
 */
.phc-hero::before {
    background-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.67) 0%,
        rgba(0, 0, 0, 0.47) 150%,
        rgba(0, 0, 0, 0.60) 200%
    ) !important;
    opacity: 1 !important;
    z-index: 1;
}

/* Respect users who prefer reduced motion — JS also skips injection,
   but this is a belt-and-braces guard in case JS already injected. */
@media (prefers-reduced-motion: reduce) {
    .phc-hero-video {
        display: none !important;
    }
}

/*
 * Hero content reveal — "video first, then content" (homepage).
 *
 * Mirrors thephclinic.com's post-preloader reveal: the background video fades
 * in, then the headline → subtext → CTA row slide up and fade in, staggered.
 *
 * Gating: the initial hidden state applies ONLY under `html.phc-hero-reveal`,
 * a class added synchronously in <head> by phc-hero-video.php and ONLY when
 * motion is allowed. So no-JS, reduced-motion, and Save-Data users never have
 * the content hidden. The `.is-revealed` class is added to `.phc-hero` once the
 * video's first frame decodes (with a JS failsafe), flipping the transitions.
 *
 * Targets the inner content children by position (nth-child) rather than by
 * Elementor element IDs, so it survives builder re-saves. The three children
 * are: 1) headline, 2) subtext, 3) CTA row.
 */
html.phc-hero-reveal .phc-hero .e-con-inner > .elementor-element {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 1000ms cubic-bezier(.16, 1, .3, 1),
                transform 1000ms cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

html.phc-hero-reveal .phc-hero.is-revealed .e-con-inner > .elementor-element {
    opacity: 1;
    transform: none;
}

html.phc-hero-reveal .phc-hero.is-revealed .e-con-inner > .elementor-element:nth-child(1) { transition-delay: 120ms; }
html.phc-hero-reveal .phc-hero.is-revealed .e-con-inner > .elementor-element:nth-child(2) { transition-delay: 260ms; }
html.phc-hero-reveal .phc-hero.is-revealed .e-con-inner > .elementor-element:nth-child(3) { transition-delay: 400ms; }

/* Reduced motion: never hide, never animate (belt-and-braces — the html class
   is not added for these users, but guard in case it is). */
@media (prefers-reduced-motion: reduce) {
    html.phc-hero-reveal .phc-hero .e-con-inner > .elementor-element {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/*
 * Hero reveal curtain — a full-viewport off-white panel that wipes upward to
 * reveal the hero video, mirroring thephclinic.com's preloader exit (WITHOUT
 * the logo). Rendered at wp_body_open so it covers the page from first paint;
 * lifted (translateY -100%) by phc-hero-video.php once the video is ready.
 *
 * Shown ONLY under html.phc-hero-reveal (added pre-paint, motion-allowed only),
 * so no-JS / reduced-motion / Save-Data users never see a white screen.
 */
.phc-hero-curtain { display: none; }

html.phc-hero-reveal .phc-hero-curtain {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: #f7f7f5;
    transform: translateY(0);
    transition: transform 850ms cubic-bezier(.76, 0, .24, 1);
    will-change: transform;
    pointer-events: none;
}

html.phc-hero-reveal .phc-hero-curtain.is-lifting {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .phc-hero-curtain { display: none !important; }
}