/* =============================================
   Scroll-driven Header Animations
   ============================================= */

html {
  scroll-behavior: smooth;
}

/* -- Vanishing hero logo -- */
@keyframes vanish {
  0%   { opacity: 1; }
  99%  { opacity: 0; }
  100% { opacity: 0; visibility: hidden; }
}

.vanishing-image {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  margin-top: calc(-0.3 * 50vw);
  margin-left: -25%;
  object-fit: contain;
  max-height: 100%;
  animation-name: vanish;
  animation-timeline: scroll();
  animation-range: 0vh 60vh;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

/* -- Sticky parallax header -- */
@keyframes sticky-parallax-header-move-and-size {
  from {
    background-position: 100% 0;
    min-height: 100vh;
  }
  to {
    background-position: 100% 100%;
    background-color: #0b1584;
    min-height: 0vh;
  }
}

#sticky-parallax-header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  animation: sticky-parallax-header-move-and-size linear forwards;
  animation-timeline: scroll();
  animation-range: 0vh 95vh;
  animation-fill-mode: forwards;
}

/* -- Fading blue overlay -- */
@keyframes sticky-parallax-header-blue {
  from { opacity: 0; }
  to   { opacity: 0.9; }
}

#fading-header-color {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background-color: #4F65E6;
  animation: sticky-parallax-header-blue linear forwards;
  animation-timeline: scroll();
  animation-range: 0vh 95vh;
  animation-fill-mode: forwards;
}

/* -- Placeholder height collapse -- */
@keyframes head-vanish {
  from { height: 100vh; }
  to   { height: 0vh; }
}

#placeholder-head {
  width: 100vw;
  animation: head-vanish linear forwards;
  animation-timeline: scroll();
  animation-range: 0vh 100vh;
}

/* -- Header text fade-in -- */
@keyframes header-appear-left {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.header-text {
  animation: header-appear-left linear;
  animation-timeline: scroll();
  animation-range: 75vh 95vh;
  animation-fill-mode: both;
}

/* =============================================
   Scrolling / Non-scrolling Header Toggle
   ============================================= */

/* Fallback: hide scrolling header when scroll() not supported */
@supports not (animation-timeline: scroll()) {
  .header-scrolling {
    display: none;
  }
}

#topline-non-scrolling {
  opacity: 1;
  width: 100vw;
  position: fixed;
  z-index: 100;
  top: 0;
}

/* When scroll animations are supported, hide static header and add body offset */
@supports (animation-timeline: scroll()) {
  .header-non-scrolling {
    display: none;
  }

  #body-index {
    padding-top: calc(100vh + 1.5em + 16px);
  }
}

.header-non-scrolling {
  height: 100vh;
}