/* CSS */
:root {
  --header-z: 1000;
  --anim-time: 800ms;
  --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hide-offset: -100%;
}

/* Base positioning */
body:not([data-builder-window="iframe"]) .header-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--header-z);
  will-change: transform, opacity;
  pointer-events: auto;
}

/* Stacking: both occupy the same slot */
body:not([data-builder-window="iframe"]) .header-main.show-scrolled {
  /* starts hidden until scrolled */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* Visible states toggled by JS */
body:not([data-builder-window="iframe"]) .header-main.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body:not([data-builder-window="iframe"]) .header-main.is-hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* Animations (Animate.css-like, but local) */
@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideOutUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

body:not([data-builder-window="iframe"]) .header-anim-in {
  animation: slideInDown var(--anim-time) var(--anim-ease) both;
}

body:not([data-builder-window="iframe"]) .header-anim-out {
  animation: slideOutUp var(--anim-time) var(--anim-ease) both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .header-anim-in,
  .header-anim-out {
    animation: none !important;
  }
}

/* take care that theres always a visible header */
body:not([data-builder-window="iframe"]) .header-main.show-scrolled {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

body:not([data-builder-window="iframe"]) .header-main.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body:not([data-builder-window="iframe"]) .header-main.is-hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* Optional: avoid layout jump if header height changes */
body {
  /* if you know the max header height, reserve space with padding-top */
  /* padding-top: 110px; */
}