/* =========================================================
   FILM HEADER AND FOOTER — FUNCTIONAL DUAL LAYER SYSTEM
   Version: 1.5
========================================================= */


/* Both headers sit in the exact same position */
#top-header,
#bottom-header {
  grid-area: film-header-stack;

  width: 100%;
  position: relative;

  pointer-events: auto;

  opacity: 1;
  visibility: visible;

  transition:
    opacity 520ms ease,
    transform 520ms ease,
    filter 520ms ease,
    visibility 0s linear 520ms!important;

  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}


/* Initial state:
   hero visible = top header visible, bottom header hidden */
#top-header {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
  z-index: 2;
}

#bottom-header {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  filter: blur(6px);
  z-index: 1;
}


/* Scrolled state:
   hero passed = top header hidden, bottom header visible */
body.film-header-scrolled #top-header {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  filter: blur(6px);
  z-index: 1;
}

body.film-header-scrolled #bottom-header {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
  z-index: 2;
}


/* Active header should not wait before becoming visible */
body:not(.film-header-scrolled) #top-header,
body.film-header-scrolled #bottom-header {
  transition:
    opacity 520ms ease,
    transform 520ms ease,
    filter 520ms ease,
    visibility 0s linear 0s!important;
}


/* Elementor compatibility */
#film-header,
#film-header * {
  box-sizing: border-box;
}

#film-header,
#top-header,
#bottom-header {
  overflow: visible;
}

/* Footer state:
   when #film-footer is visible, hide both headers */
body.film-header-footer-visible #top-header,
body.film-header-footer-visible #bottom-header {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  z-index: 1;
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #top-header,
  #bottom-header {
    transition:
      opacity 120ms linear,
      visibility 0s linear 120ms;

    transform: none !important;
    filter: none !important;
  }

  body:not(.film-header-scrolled) #top-header,
  body.film-header-scrolled #bottom-header {
    transition:
      opacity 120ms linear,
      visibility 0s linear 0s!important;
  }
}

/* --------------------- Footer ------------------------ */
#film-footer {
    background-size: cover!important;
    background-repeat: no-repeat!important;
}