/* ECPNG Health 2026 — light 3D effects (Admin Portal → Appearance → Website Effects → 3D Effects).
   body.e26-fx      effects on (gentle or light 3D): blocks rise into view, banner and title band entrances, button press, link underline.
   body.e26-fx-3d   light 3D on top: depth in the rise, cards tilt toward the mouse with a shine, banner depth and parallax, band sheen.
   effects.js adds .fx-pending / .fx-in / .fx-enter / .fx-tilt / .fx-untilt; without it nothing here hides content.
   Visitors whose device asks for reduced motion get none of it: effects.js stops, and theme.css switches animations off. */

/* ── Rise into view: blocks below the screen when the page opens, and cards that arrive later ── */
/* The older "Scroll Animations" setting fades facility cards with the scroll; while these effects are on they do it instead. */
body.e26-fx .ecpng-fac-card { animation: none; }
body.e26-fx .fx-pending { opacity: 0; transform: translate3d(0, 24px, 0); }
body.e26-fx-3d .fx-pending { transform: perspective(1000px) translate3d(0, 30px, 0) rotateX(10deg); transform-origin: 50% 100%; }
body.e26-fx .fx-in { transition: opacity .7s ease, transform .9s cubic-bezier(.2, .75, .25, 1); transition-delay: calc(var(--fx-i, 0) * 80ms); }
body.e26-fx .fx-enter { animation: e26-fx-rise .8s cubic-bezier(.2, .75, .25, 1) both; animation-delay: calc(var(--fx-i, 0) * 80ms); }
body.e26-fx-3d .fx-enter { animation-name: e26-fx-rise-3d; transform-origin: 50% 100%; }
@keyframes e26-fx-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes e26-fx-rise-3d { from { opacity: 0; transform: perspective(1000px) translate3d(0, 30px, 0) rotateX(10deg); } }

/* Statistics flip up into place. */
body.e26-fx-3d .e26-milestone.fx-pending { transform: perspective(700px) rotateX(-75deg); transform-origin: 50% 0; }
body.e26-fx-3d .e26-milestone.fx-in { transform-origin: 50% 0; }
body.e26-fx-3d .e26-milestone.fx-enter { animation-name: e26-fx-flip; transform-origin: 50% 0; }
@keyframes e26-fx-flip { from { opacity: 0; transform: perspective(700px) rotateX(-75deg); } }

/* ── Cards tilt toward the mouse, lift and catch the light (mouse and trackpad only) ── */
@media (hover: hover) and (pointer: fine) {
    /* The shine needs a positioned card; quick, service and facility cards already are. */
    body.e26-fx-3d :is(.e26-card, .e26-milestone, .e26-partner) { position: relative; }
    body.e26-fx-3d .fx-tilt {
        transform: perspective(900px) translate3d(0, -4px, 0) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
        transition: transform .1s linear, box-shadow .3s ease;
        box-shadow: 0 18px 32px -16px rgba(15, 23, 42, .45);
        z-index: 2;
        will-change: transform;
    }
    /* Statistics and borderless partner logos have no box of their own to cast a shadow. */
    body.e26-fx-3d :is(.e26-milestone, .is-minimal .e26-partner).fx-tilt { box-shadow: none; }
    body.e26-fx-3d .fx-tilt::after {
        content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay;
        background: radial-gradient(circle at var(--fx-gx, 50%) var(--fx-gy, 50%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
    }
    /* Quick-link, service and statistics cards carry light text on colour or a photo: a much fainter, smaller shine keeps
       the text under the pointer readable (at its centre about a tenth less contrast instead of up to half). */
    body.e26-fx-3d :is(.e26-quick-card, .e26-service-card, .e26-milestone).fx-tilt::after {
        background: radial-gradient(circle at var(--fx-gx, 50%) var(--fx-gy, 50%), rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 50%);
    }
    body.e26-fx-3d .fx-untilt { transition: transform .6s cubic-bezier(.2, .75, .25, 1), box-shadow .4s ease; }
    /* Room inside the sideways-scrolling card rows for a lifted, tilted card: the margin takes the extra padding back, so nothing moves. */
    body.e26-fx-3d .e26-carousel-track { padding-top: 14px; margin-top: -10px; padding-bottom: 28px; margin-bottom: -10px; }
    body.e26-fx-3d .ecpng-fac-carousel .ecpng-fac-grid { padding-top: 14px; margin-top: -10px; padding-bottom: 24px; margin-bottom: -10px; }
}

/* ── Homepage banner: the text rises in on each new slide; with light 3D it sits in layers that follow the mouse and lag the scroll ── */
body.e26-fx .e26-hero-content.is-entering > * { animation: e26-fx-hero-in .85s cubic-bezier(.2, .75, .25, 1) both; }
body.e26-fx .e26-hero-content.is-entering > :nth-child(2) { animation-delay: .08s; }
body.e26-fx .e26-hero-content.is-entering > :nth-child(3) { animation-delay: .16s; }
body.e26-fx .e26-hero-content.is-entering > :nth-child(4) { animation-delay: .24s; }
@keyframes e26-fx-hero-in { from { opacity: 0; translate: 0 24px var(--fx-z, 0px); } }
@media (hover: hover) and (pointer: fine) {
    body.e26-fx-3d .e26-hero { overflow: hidden; } /* the lagging text slides under the banner's edge, not over the next section */
    body.e26-fx-3d .e26-hero-content {
        translate: 0 var(--fx-hero-y, 0px);
        transform: perspective(1100px) rotateX(var(--fx-hero-rx, 0deg)) rotateY(var(--fx-hero-ry, 0deg));
        transform-style: preserve-3d;
        transition: transform .8s cubic-bezier(.2, .75, .25, 1);
    }
    body.e26-fx-3d .e26-hero-content > * { translate: 0 0 var(--fx-z, 0px); }
    body.e26-fx-3d .e26-hero-content > .hero-slide-title { --fx-z: 46px; }
    body.e26-fx-3d .e26-hero-content > .hero-slide-subtitle { --fx-z: 30px; }
    body.e26-fx-3d .e26-hero-content > p:not(.hero-slide-subtitle) { --fx-z: 18px; }
    body.e26-fx-3d .e26-hero-content > .hero-btn { --fx-z: 60px; }
}

/* ── Page title band: rises in with the page, has a little depth, and (light 3D) a soft light that follows the mouse ── */
body.e26-fx .e26-single-head {
    animation: e26-fx-band-in .7s cubic-bezier(.2, .75, .25, 1) both;
    transform-origin: 50% 100%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 34px -22px rgba(15, 23, 42, .6);
}
body.e26-fx-3d .e26-single-head {
    /* The light sits above the band's top edge (at the top right until the mouse slides it sideways) and fades out before
       the title and subtitle, so their white text keeps its contrast on any band colour. */
    background-image: radial-gradient(560px circle at var(--fx-gx, 88%) -40%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 45%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .08));
}
@keyframes e26-fx-band-in { from { opacity: 0; transform: perspective(900px) translate3d(0, 14px, 0) rotateX(8deg); } }

/* ── Buttons press like real buttons ── */
body.e26-fx :is(.e26-btn, a.ecpng-agp-cta, a.ecpng-fac-cta-btn, a.ecpng-fac-slider-cta, .wp-block-button__link) {
    box-shadow: 0 3px 0 rgba(15, 23, 42, .25), 0 8px 16px -8px rgba(15, 23, 42, .45);
    transition: transform .16s ease, box-shadow .16s ease, background .2s ease;
}
body.e26-fx :is(.e26-btn, a.ecpng-agp-cta, a.ecpng-fac-cta-btn, a.ecpng-fac-slider-cta, .wp-block-button__link):hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(15, 23, 42, .25), 0 14px 24px -10px rgba(15, 23, 42, .5);
}
body.e26-fx :is(.e26-btn, a.ecpng-agp-cta, a.ecpng-fac-cta-btn, a.ecpng-fac-slider-cta, .wp-block-button__link):active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .25), 0 3px 8px -4px rgba(15, 23, 42, .4);
}

/* ── Links in page text: an underline slides in on hover ── */
body.e26-fx .e26-content :is(p, li, td, dd, blockquote) a:not([class]):not([style*="background"]) {
    background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%;
    background-size: 0% 2px; transition: background-size .3s ease;
}
body.e26-fx .e26-content :is(p, li, td, dd, blockquote) a:not([class]):not([style*="background"]):is(:hover, :focus-visible) {
    background-size: 100% 2px; text-decoration-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    body.e26-fx :is(.fx-pending, .fx-tilt) { opacity: 1 !important; transform: none !important; }
}

/* Printouts show every block, flat, whether or not it has been scrolled to. */
@media print {
    body.e26-fx :is(.fx-pending, .fx-in, .fx-enter, .fx-tilt, .e26-single-head, .e26-hero-content, .e26-hero-content > *) {
        opacity: 1 !important; transform: none !important; translate: none !important; animation: none !important;
    }
}