/**
 * Desktop header: in normal flow at top.
 * Becomes fixed + compact only after the first hero is scrolled past,
 * with a slide-down appearance animation.
 */

@media (min-width: 992px) {
  .header__sticky-spacer {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .header__sticky {
    position: relative;
    z-index: 10050;
    background: linear-gradient(to right, #28136b, #0a29b1);
    box-shadow: none;
    -webkit-box-shadow: none;
  }

  .header__sticky.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    -webkit-box-shadow: 0 8px 28px rgba(10, 12, 40, 0.28);
    box-shadow: 0 8px 28px rgba(10, 12, 40, 0.28);
    -webkit-animation: stickyHeaderIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation: stickyHeaderIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @-webkit-keyframes stickyHeaderIn {
    from {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      opacity: 0;
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  @keyframes stickyHeaderIn {
    from {
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
      opacity: 0;
    }
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  .header__sticky .header__top {
    position: relative;
    z-index: 10051;
    padding-top: 27px;
    padding-bottom: 27px;
    transition: padding 0.35s ease;
  }

  .header__sticky.is-sticky .header__top {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .header__top .logo h1 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: 0;
  }

  .header__sticky .logo__image {
    display: block;
    height: 72px;
    width: auto;
    transition: height 0.35s ease;
  }

  .header__sticky.is-sticky .logo__image {
    height: 50px;
  }

  /* No permanent spacer — header stays in document flow until sticky. */
  .header {
    padding-top: 0;
  }

  .header__sticky .languages--dropdown,
  .header__sticky .languages__list {
    z-index: 10060;
  }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .header__sticky.is-sticky {
    -webkit-animation: none;
    animation: none;
  }

  .header__sticky .header__top,
  .header__sticky .logo__image {
    transition: none;
  }
}