/**
 * ==============================================================================
 * CHENGMARI TEA - ULTRA-FAST CURTAIN PAGE TRANSITION
 * ==============================================================================
 *
 * Direction: TOP-TO-BOTTOM (Fast Waterfall Curtain Pass)
 * - Enters from top: translateY(-100%) -> translateY(0) (340ms)
 * - Exits to bottom: translateY(0) -> translateY(100%) (340ms)
 *
 * Architecture & Features:
 * - GPU-accelerated transforms (translate3d, scale, opacity)
 * - Zero layout thrashing (no continuous width/height changes)
 * - Zero-flash multi-page state preservation via synchronous head execution
 * - Full 100dvh viewport support with 100vh fallback
 * - Strict CSS namespacing (.chengmari-page-transition*)
 * - Native prefers-reduced-motion accessibility support
 * ==============================================================================
 */

:root {
    /* Ultra-snappy brand motion timings */
    --chengmari-transition-bg: #0E1A14;         /* Deep luxury estate forest night */
    --chengmari-transition-duration: 340ms;     /* Fast curtain slide duration */
    --chengmari-transition-ease: cubic-bezier(0.22, 1, 0.36, 1); /* Snappy high-performance ease-out */
    --chengmari-logo-duration: 220ms;          /* Fast logo fade duration */
    --chengmari-logo-ease: cubic-bezier(0.16, 1, 0.3, 1);        /* Smooth deceleration curve */
}

/* ------------------------------------------------------------------------------
   1. TRANSITION CONTAINER (Fixed Viewport Shell)
   ------------------------------------------------------------------------------ */
.chengmari-page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 999999;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
    contain: layout paint size;
}

/* ------------------------------------------------------------------------------
   2. CURTAIN PANEL (Full-Screen Animated Surface)
   ------------------------------------------------------------------------------ */
.chengmari-page-transition__curtain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--chengmari-transition-bg);
    /* Subtle luxury radial gradient for depth */
    background-image: radial-gradient(circle at 50% 50%, rgba(26, 46, 36, 0.45) 0%, rgba(10, 22, 16, 0.98) 100%);
    /* Initial state: Positioned completely above viewport */
    transform: translate3d(0, -100%, 0);
    will-change: transform;
    transition: transform var(--chengmari-transition-duration) var(--chengmari-transition-ease);
}

/* ------------------------------------------------------------------------------
   3. CENTERED LOGO CONTAINER & SVG
   ------------------------------------------------------------------------------ */
.chengmari-page-transition__center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    z-index: 2;
    pointer-events: none;
}

.chengmari-page-transition__logo {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(0.97);
    will-change: opacity, transform;
    transition:
        opacity var(--chengmari-logo-duration) var(--chengmari-logo-ease),
        transform var(--chengmari-logo-duration) var(--chengmari-logo-ease);
    /* Soft drop shadow for vector logo definition */
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55));
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* Responsive logo sizing */
@media (max-width: 480px) {
    .chengmari-page-transition__logo {
        max-width: 230px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .chengmari-page-transition__logo {
        max-width: 290px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .chengmari-page-transition__logo {
        max-width: 380px;
    }
}

@media (min-width: 1440px) {
    .chengmari-page-transition__logo {
        max-width: 560px;
    }
}

/* ------------------------------------------------------------------------------
   4. STATE: ENTERING (Triggered on Link Click on Page A)
   Curtain descends swiftly from the TOP to cover the old page.
   ------------------------------------------------------------------------------ */
.chengmari-page-transition.is-entering {
    visibility: visible;
    pointer-events: auto;
}

.chengmari-page-transition.is-entering .chengmari-page-transition__curtain {
    transform: translate3d(0, 0, 0);
}

.chengmari-page-transition.is-entering .chengmari-page-transition__logo {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 50ms;
}

/* ------------------------------------------------------------------------------
   5. STATE: SYNCHRONOUS NEW-PAGE LOAD (Applied immediately to <html> on Page B)
   Guarantees 0ms white flash; page renders completely hidden behind curtain.
   ------------------------------------------------------------------------------ */
html.chengmari-transition-active .chengmari-page-transition {
    visibility: visible !important;
    pointer-events: auto !important;
}

html.chengmari-transition-active .chengmari-page-transition__curtain {
    transform: translate3d(0, 0, 0) !important;
    transition: none !important; /* Immediately held fully covered on initial paint */
}

html.chengmari-transition-active .chengmari-page-transition__logo {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transition: none !important; /* Immediately held visible on initial paint */
}

/* ------------------------------------------------------------------------------
   6. STATE: EXITING / REVEAL (Triggered when Page B is ready)
   Logo fades softly downward; curtain glides smoothly downward off-screen.
   ------------------------------------------------------------------------------ */
.chengmari-page-transition.is-exiting {
    visibility: visible;
    pointer-events: auto;
}

/* Logo fades out and glides slightly downward */
.chengmari-page-transition.is-exiting .chengmari-page-transition__logo {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.97);
    transition:
        opacity 180ms ease-in,
        transform 180ms ease-in;
    transition-delay: 0ms !important;
}

/* Curtain slides downward off-screen to reveal stationary new page */
.chengmari-page-transition.is-exiting .chengmari-page-transition__curtain {
    transform: translate3d(0, 100%, 0) !important;
    transition: transform var(--chengmari-transition-duration) var(--chengmari-transition-ease) !important;
    transition-delay: 20ms !important;
}

/* ------------------------------------------------------------------------------
   7. ACCESSIBILITY: REDUCED MOTION SUPPORT
   ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .chengmari-page-transition,
    .chengmari-page-transition__curtain,
    .chengmari-page-transition__logo {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}