/**
 * Frontend Styles for Elementor Scroll Header Switcher
 *
 * @package Elementor_Scroll_Header_Switcher
 */

/* Header Container Styles */
.eshs-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    transition-property: transform, opacity, filter;
    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform, opacity;
}

/* Header A - Initial header (visible by default) */
#eshs-header-a.eshs-header-active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

#eshs-header-a.eshs-header-hidden {
    opacity: 0;
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
}

/* Header B - Scrolled header (hidden by default) */
#eshs-header-b.eshs-header-hidden {
    opacity: 0;
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
}

#eshs-header-b.eshs-header-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Animation: Slide Down */
.eshs-header[data-animation="slide"] {
    transform: translateY(-100%);
}

.eshs-header[data-animation="slide"].eshs-header-active {
    transform: translateY(0);
}

/* Animation: Fade In (no transform — stays at position, only opacity changes) */
.eshs-header[data-animation="fade"] {
    opacity: 0;
    transform: none !important;
}

.eshs-header[data-animation="fade"].eshs-header-active {
    opacity: 1;
    transform: none !important;
}

/* Animation: Instant (No animation) */
.eshs-header[data-animation="instant"] {
    transition: none !important;
}

/* ================================
   PRO ANIMATIONS
   ================================ */

/* Animation: Scale In */
.eshs-header[data-animation="scale"] {
    transform: scale(0.95);
    opacity: 0;
}

.eshs-header[data-animation="scale"].eshs-header-active {
    transform: scale(1);
    opacity: 1;
}

/* Animation: Slide Up */
.eshs-header[data-animation="slide-up"] {
    transform: translateY(100%);
}

.eshs-header[data-animation="slide-up"].eshs-header-active {
    transform: translateY(0);
}

/* Animation: Slide From Left */
.eshs-header[data-animation="slide-left"] {
    transform: translateX(-100%);
}

.eshs-header[data-animation="slide-left"].eshs-header-active {
    transform: translateX(0);
}

/* Animation: Slide From Right */
.eshs-header[data-animation="slide-right"] {
    transform: translateX(100%);
}

.eshs-header[data-animation="slide-right"].eshs-header-active {
    transform: translateX(0);
}

/* Animation: Flip */
.eshs-header[data-animation="flip"] {
    transform: rotateX(-90deg);
    transform-origin: top;
    opacity: 0;
}

.eshs-header[data-animation="flip"].eshs-header-active {
    transform: rotateX(0);
    opacity: 1;
}

/* Animation: Rotate In */
.eshs-header[data-animation="rotate"] {
    transform: rotateZ(-10deg);
    opacity: 0;
}

.eshs-header[data-animation="rotate"].eshs-header-active {
    transform: rotateZ(0);
    opacity: 1;
}

/* Animation: Bounce */
.eshs-header[data-animation="bounce"] {
    transform: translateY(-100%);
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.eshs-header[data-animation="bounce"].eshs-header-active {
    transform: translateY(0);
}

/* Animation: Slide + Fade (Combined) */
.eshs-header[data-animation="slide-fade"] {
    transform: translateY(-100%);
    opacity: 0;
}

.eshs-header[data-animation="slide-fade"].eshs-header-active {
    transform: translateY(0);
    opacity: 1;
}

/* Prevent header overlap */
.eshs-header-hidden {
    pointer-events: none;
}

/* Hide default Elementor headers when plugin is active in dual/container mode.
   In tab mode (.eshs-tab-mode) our containers ARE inside .elementor-location-header,
   so we must NOT hide it — the :not(.eshs-tab-mode) guard prevents that. */
body.eshs-active:not(.elementor-editor-active):not(.eshs-tab-mode) .elementor-location-header {
    display: none !important;
}

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Performance optimization: Use GPU acceleration */
.eshs-header {
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .eshs-header {
        /* Slightly faster animations on mobile for better performance */
        transition-duration: 250ms;
    }
}

/* Prevent flash on load */
.eshs-loading .eshs-header {
    transition: none !important;
}

/* Accessibility: Ensure focus states are visible */
.eshs-header a:focus,
.eshs-header button:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ========================================
   CONTAINER MODE (v2.2.0)
   ======================================== */

/* Container Mode: Base styles */
#eshs-header.eshs-container-mode {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
}

/* Container Mode: Initial state (default visible) */
#eshs-header.eshs-initial {
    /* Custom styling can be added here */
}

/* Container Mode: Scrolled state */
#eshs-header.eshs-scrolled {
    /* Custom styling can be added here */
}

/* Container Mode: Container transitions */
#eshs-header.eshs-container-mode [class*="eshs-"],
#eshs-header.eshs-container-mode .eshs-initial,
#eshs-header.eshs-container-mode .eshs-scrolled {
    transition: opacity 0.3s ease, transform 0.3s ease;
    will-change: opacity, transform;
}

/* Container Mode: Smooth fade and slide — controlled via JS inline styles directly */
/* Note: JS sets opacity/transform inline during transitions; these rules provide defaults */
#eshs-header.eshs-container-mode .eshs-container-hidden {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    pointer-events: none;
}

/* Container Mode: Prevent flash on load */
.eshs-loading #eshs-header.eshs-container-mode [class*="eshs-"] {
    transition: none !important;
}

/* Container Mode: Mobile optimizations */
@media screen and (max-width: 768px) {
    #eshs-header.eshs-container-mode [class*="eshs-"] {
        /* Faster transitions on mobile */
        transition-duration: 250ms;
    }
}

/* ================================================
   ADVANCED ANIMATIONS v2.5.0
   ================================================ */

/* ── Crossfade / Overlap ──────────────────────────────────────
   Both headers remain at translateY(0) at all times.
   The switch is purely opacity + z-index — no positional jump.
   Removes the flash that standard fade/slide can produce.       */
.eshs-header[data-animation="crossfade"] {
    transform: none !important;
    opacity: 0;
}
.eshs-header[data-animation="crossfade"].eshs-header-active {
    opacity: 1;
    z-index: 9999;
}
.eshs-header[data-animation="crossfade"].eshs-header-hidden {
    z-index: 9998;
}

/* ── Blur Morph ───────────────────────────────────────────────
   Outgoing header blurs and fades; incoming sharpens and fades
   in simultaneously. Glassmorphism feel.                        */
.eshs-header[data-animation="blur-morph"] {
    transform: none !important;
    opacity: 0;
    filter: blur(10px);
}
.eshs-header[data-animation="blur-morph"].eshs-header-active {
    opacity: 1;
    filter: blur(0px);
}

/* ── Scroll Progress Morph ────────────────────────────────────
   JS drives opacity directly from scroll position — both headers
   are continuously visible as the user scrolls through the
   transition zone.  No CSS transition needed here.              */
.eshs-header[data-animation="scroll-morph"] {
    transform: none !important;
    transition: none !important;
}