/* ======================================================================
   ANIMATIONS.CSS — Loaded on all public pages
   Contains: Scroll Reveal Observer Classes, Image Skeleton Shimmer
   ====================================================================== */

/* ----------------------------------------------------------------------
   9. Scroll Reveal Utility Styles
   ---------------------------------------------------------------------- */
.reveal-on-scroll {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity, filter, clip-path;
}

/* Default: Slide Up */
.reveal-on-scroll:not(.reveal-slide-left):not(.reveal-slide-right):not(.reveal-scale-in):not(.reveal-fade-in):not(.reveal-clip-reveal):not(.reveal-blur-in):not(.reveal-flip-left-3d):not(.reveal-flip-right-3d) {
    transform: translateY(40px);
}

/* Slide Left (slides in from right to left) */
.reveal-on-scroll.reveal-slide-left {
    transform: translateX(45px);
}

/* Slide Right (slides in from left to right) */
.reveal-on-scroll.reveal-slide-right {
    transform: translateX(-45px);
}

/* Scale In (subtle bounce/grow) */
.reveal-on-scroll.reveal-scale-in {
    transform: scale(0.93) translateY(20px);
}

/* Fade In Only */
.reveal-on-scroll.reveal-fade-in {
    transform: none;
}

/* Camera Shutter / Curtain Reveal (reveals from left to right) */
.reveal-on-scroll.reveal-clip-reveal {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.05);
}

/* Blur & Zoom Reveal (smooth focus entry) */
.reveal-on-scroll.reveal-blur-in {
    filter: blur(10px);
    transform: scale(0.96) translateY(20px);
}

/* 3D Inward Flip (Left Card) */
.reveal-on-scroll.reveal-flip-left-3d {
    transform: perspective(1000px) rotateY(15deg) translateY(25px);
    transform-style: preserve-3d;
}

/* 3D Inward Flip (Right Card) */
.reveal-on-scroll.reveal-flip-right-3d {
    transform: perspective(1000px) rotateY(-15deg) translateY(25px);
    transform-style: preserve-3d;
}

/* Active reveal state (applied by JS intersection observer) */
.reveal-on-scroll.reveal-active {
    opacity: 1;
    filter: blur(0);
    clip-path: inset(0 0 0 0);
    transform: translateY(0) translateX(0) scale(1) rotateY(0deg);
}

.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }

/* ======================================================================
   IMAGE SKELETON / SHIMMER PLACEHOLDERS
   Shows a shimmer pulse while images load. Removed via JS onload event.
   ====================================================================== */

@keyframes skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.img-skeleton {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 3;
    background: linear-gradient(
        90deg,
        #EDE4D9 0%,
        #F7F1E8 40%,
        #EDE4D9 100%
    );
    background-size: 600px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Medical cross icon in the center of the placeholder */
.img-skeleton::after {
    content: '🩻';
    font-size: 2.5rem;
    opacity: 0.35;
    animation: none;
}

/* Ortho tint: copper warm shimmer */
.ortho-skeleton {
    background: linear-gradient(
        90deg,
        #EDE0D0 0%,
        #F7EDD8 40%,
        #EDE0D0 100%
    );
    background-size: 600px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
}
.ortho-skeleton::after {
    content: '🦴';
}

/* Paeds tint: soft rose shimmer */
.peds-skeleton {
    background: linear-gradient(
        90deg,
        #EDD8D8 0%,
        #F7EAEA 40%,
        #EDD8D8 100%
    );
    background-size: 600px 100%;
    animation: skeleton-shimmer 1.6s infinite linear;
}
.peds-skeleton::after {
    content: '🧠';
}

/* The wrapper holds both skeleton and real image in a stack */
.specialty-image-wrapper,
.clinic-image-wrapper {
    position: relative;
}

/* Image always renders on top of skeleton */
.specialty-img,
.clinic-img {
    position: relative;
    z-index: 2;
    display: block;
}

/* ======================================================================
   SCROLL REVEAL ANIMATION SYSTEM
   Hidden states are gated behind body.js-scroll-ready — set by JS.
   If JS is blocked/slow, elements remain fully visible (no opacity:0).
   ====================================================================== */

/* ---- Transitions apply only after JS is confirmed running ---- */
body.js-scroll-ready .reveal-on-scroll {
    transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                clip-path 0.85s cubic-bezier(0.76, 0, 0.24, 1),
                filter 0.75s ease;
    will-change: opacity, transform;
}

/* ---- Delay utilities ---- */
body.js-scroll-ready .delay-100 { transition-delay: 0.1s; }
body.js-scroll-ready .delay-200 { transition-delay: 0.2s; }
body.js-scroll-ready .delay-300 { transition-delay: 0.3s; }
body.js-scroll-ready .delay-400 { transition-delay: 0.4s; }
body.js-scroll-ready .delay-500 { transition-delay: 0.5s; }

/* ---- Variant: Default fade + rise ---- */
body.js-scroll-ready .reveal-on-scroll:not([class*="reveal-slide"]):not(.reveal-clip-reveal):not(.reveal-flip-left-3d):not(.reveal-flip-right-3d):not(.reveal-blur-in) {
    opacity: 0;
    transform: translateY(30px);
}
body.js-scroll-ready .reveal-on-scroll.reveal-active:not([class*="reveal-slide"]):not(.reveal-clip-reveal):not(.reveal-flip-left-3d):not(.reveal-flip-right-3d):not(.reveal-blur-in) {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Variant: Slide in from the LEFT ---- */
body.js-scroll-ready .reveal-slide-left {
    opacity: 0;
    transform: translateX(-55px);
}
body.js-scroll-ready .reveal-slide-left.reveal-active {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Variant: Slide in from the RIGHT ---- */
body.js-scroll-ready .reveal-slide-right {
    opacity: 0;
    transform: translateX(55px);
}
body.js-scroll-ready .reveal-slide-right.reveal-active {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Variant: Slide in from BELOW ---- */
body.js-scroll-ready .reveal-slide-up {
    opacity: 0;
    transform: translateY(45px);
}
body.js-scroll-ready .reveal-slide-up.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Variant: Curtain clip-reveal (wipe from bottom up) ---- */
body.js-scroll-ready .reveal-clip-reveal {
    clip-path: inset(0 0 100% 0);
}
body.js-scroll-ready .reveal-clip-reveal.reveal-active {
    clip-path: inset(0 0 0% 0);
}

/* ---- Variant: 3D flip from left ---- */
body.js-scroll-ready .reveal-flip-left-3d {
    opacity: 0;
    transform: perspective(800px) rotateY(25deg) translateX(-40px);
    transform-origin: left center;
}
body.js-scroll-ready .reveal-flip-left-3d.reveal-active {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg) translateX(0);
}

/* ---- Variant: 3D flip from right ---- */
body.js-scroll-ready .reveal-flip-right-3d {
    opacity: 0;
    transform: perspective(800px) rotateY(-25deg) translateX(40px);
    transform-origin: right center;
}
body.js-scroll-ready .reveal-flip-right-3d.reveal-active {
    opacity: 1;
    transform: perspective(800px) rotateY(0deg) translateX(0);
}

/* ---- Variant: Blur fade-in ---- */
body.js-scroll-ready .reveal-blur-in {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.96);
}
body.js-scroll-ready .reveal-blur-in.reveal-active {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1);
}

/* ---- Prefers-reduced-motion: skip all animations ---- */
@media (prefers-reduced-motion: reduce) {
    body.js-scroll-ready .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
        transition: none !important;
    }
}