/* * 1. Base State: Hidden & Fixed
 * Default state is Opacity 0.
 */
.se-header-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    z-index: 99999;
    
    /* Hidden by default */
    visibility: hidden !important;
    opacity: 0; /* Removed !important to allow animation control */
    pointer-events: none;
    
    /* Hardware Acceleration */
    transform: translate3d(0,0,0);
    
    /* Default Speed Fallback */
    --se-duration: 0.6s; 
}

/* * 2. Visible Trigger
 * When JS adds .se-show, we ONLY toggle visibility and pointer events.
 * We DO NOT touch opacity here. The animation class (.se-in) handles opacity.
 */
.se-header-sticky.se-show {
    visibility: visible !important;
    pointer-events: auto;
}

/* * 3. Animation Classes
 * These control the Opacity transitions.
 */

/* SLIDE */
.se-header-sticky.se-anim-slide.se-in {
    animation: seSlideDown var(--se-duration) cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.se-header-sticky.se-anim-slide.se-out {
    animation: seSlideUp var(--se-duration) cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* FADE */
.se-header-sticky.se-anim-fade.se-in {
    animation: seFadeIn var(--se-duration) ease-out forwards;
}
.se-header-sticky.se-anim-fade.se-out {
    animation: seFadeOut var(--se-duration) ease-in forwards;
}

/* BLUR */
.se-header-sticky.se-anim-blur.se-in {
    animation: seBlurIn var(--se-duration) ease-out forwards;
}
.se-header-sticky.se-anim-blur.se-out {
    animation: seBlurOut var(--se-duration) ease-in forwards;
}

/* BOUNCE */
.se-header-sticky.se-anim-bounce.se-in {
    animation: seBounceIn var(--se-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.se-header-sticky.se-anim-bounce.se-out {
    animation: seBounceOut var(--se-duration) cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}


/* * 4. Keyframes 
 * "forwards" mode keeps the state of the last frame (100%).
 */

/* Slide */
@keyframes seSlideDown { 
    0% { transform: translateY(-100%); opacity: 0; } 
    100% { transform: translateY(0); opacity: 1; } 
}
@keyframes seSlideUp { 
    0% { transform: translateY(0); opacity: 1; } 
    100% { transform: translateY(-100%); opacity: 0; } 
}

/* Fade */
@keyframes seFadeIn { 
    0% { opacity: 0; } 
    100% { opacity: 1; } 
}
@keyframes seFadeOut { 
    0% { opacity: 1; } 
    100% { opacity: 0; } 
}

/* Blur */
@keyframes seBlurIn { 
    0% { filter: blur(15px); opacity: 0; } 
    100% { filter: blur(0); opacity: 1; } 
}
@keyframes seBlurOut { 
    0% { filter: blur(0); opacity: 1; } 
    100% { filter: blur(15px); opacity: 0; } 
}

/* Bounce */
@keyframes seBounceIn { 
    0% { transform: translateY(-100%); opacity: 0; } 
    100% { transform: translateY(0); opacity: 1; } 
}
@keyframes seBounceOut { 
    0% { transform: translateY(0); opacity: 1; } 
    100% { transform: translateY(-100%); opacity: 0; } 
}