/* ==========================================================================
   Header — fixed, transparent bar with the centred VERATI wordmark
   (.header__logo-link--wordmark). Every page uses this same header.

   Optional parts (currently not used by any page, kept for later):
     .header__left / .header__right   "Business" link and "Apply" pill
     .verati-mark                      round mark with a slowly rotating glow
                                       (js/verati-mark.js)
   Reveal:
     [data-reveal] parts start hidden and fade in once <html> gets
     data-header-revealed (home: after the hero intro, other pages: after the
     page content has faded in — see js/legal.js).
   Home only:
     html[data-home-header-pending] / .header--home   hidden before the intro
     .header--home-ready                              visible
   ========================================================================== */
.header {
  --header-pad-y: 1.1rem;
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  isolation: isolate;
  left: 0;
  min-height: calc(var(--header-pad-y) * 2 + 3.92rem);
  padding: var(--header-pad-y) 1.5rem;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateZ(0);
  z-index: 9999;
}

@media (min-width: 768px) {
  .header {
    padding: var(--header-pad-y) 2rem;
  }
}

/* --------------------------------------------------------------------------
   Left / right link groups
   -------------------------------------------------------------------------- */
.header__left,
.header__right {
  align-items: center;
  display: flex;
  grid-row: 1;
  min-height: 45px;
  position: relative;
  z-index: 2;
}

.header__left {
  grid-column: 1;
  justify-content: flex-start;
}

.header__right {
  grid-column: 3;
  justify-content: flex-end;
}

.header__left-links,
.header__right-links {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  white-space: nowrap;
}

.header__left-links {
  gap: 28px;
}

.header__right-links {
  justify-content: flex-end;
}

.header__link {
  color: #fff;
  display: inline-flex;
  padding: .5rem;
  text-decoration: none;
  transition: opacity .2s, transform .45s var(--home-ease-out);
}

.header__link:hover {
  opacity: .8;
}

.header__business {
  align-items: center;
  font-family: var(--font-display);
  font-size: 16px;
  height: 45px;
  letter-spacing: -.01em;
  line-height: 24px;
  padding: 0 2px;
  transition: opacity .5s var(--home-ease), transform .5s var(--home-ease-out);
}

@media (min-width: 768px) {
  .header__business {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .header__business,
  .header__left-links {
    display: none;
  }

  .header__left {
    min-width: 40px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .header__business:hover {
    transform: translateY(-2px);
  }
}

/* Apply pill (shared .home-apply-pill styles live in base.css) */
.header__home-apply {
  display: inline-flex;
  transition: opacity .5s var(--home-ease), transform .5s var(--home-ease-out);
}

@media (max-width: 767px) {
  .header__home-apply {
    height: 40px;
    padding: 0 14px;
  }

  .header .home-apply-pill__text {
    font-size: 13px;
  }

  .header .home-apply-pill__italic {
    font-size: 14px;
  }
}

/* on very narrow screens the pill only says "Apply" */
.home-apply-pill__short {
  display: none;
}

.home-apply-pill__italic--solo {
  margin-left: 0;
}

@media (max-width: 400px) {
  .home-apply-pill--compact .home-apply-pill__full {
    display: none;
  }

  .home-apply-pill--compact .home-apply-pill__short {
    display: inline-block;
  }
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.header__logo {
  align-items: center;
  display: flex;
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.header__logo-link {
  align-items: center;
  cursor: pointer;
  display: flex;
  overflow: visible;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* flat white mark on the left + "VERATI" letters (vector) on the right, sitting on a
   dark glass pill so the lockup stays legible over whatever scrolls underneath it */
.header__logo-link--wordmark {
  background-clip: border-box;
  background-color: rgba(8, 6, 4, .55);
  background-image:
    url(../assets/images/logos/verati-mark-white.png),
    url(../assets/images/logos/verati-wordmark-text.svg);
  background-origin: content-box;
  background-position: -3px center, right center;
  background-repeat: no-repeat;
  background-size: 42px 42px, auto 22px;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 8px 28px rgba(0, 0, 0, .28);
  box-sizing: content-box;             /* the 200×36 lockup stays as is, the padding adds the pill */
  display: block;
  height: 36px;
  padding: .45rem 1.15rem .45rem 1rem;
  width: 200px;
}

/* lite (Android): no backdrop blur, a more solid fill instead */
html.lite .header__logo-link--wordmark {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: rgba(8, 6, 4, .78);
}

/* Round mark: plate image + conic glow rotating behind the ring (--o-angle, --o-live set by JS) */
.verati-mark {
  --o-w: 42px;
  --o-h: calc(var(--o-w) * 363 / 359);
  --o-angle: 0deg;
  --o-live: .88;
  display: block;
  height: var(--o-h);
  overflow: hidden;
  position: relative;
  width: var(--o-w);
}

.verati-mark__plate,
.verati-mark__glow {
  height: var(--o-h);
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: var(--o-w);
}

.verati-mark__plate {
  object-fit: fill;
  z-index: 2;
}

.verati-mark__glow {
  isolation: isolate;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  mask-image: url(../assets/images/home/logo-resting-state-a.png), url(../assets/images/home/logo-o-ring-mask.svg);
  -webkit-mask-image: url(../assets/images/home/logo-resting-state-a.png), url(../assets/images/home/logo-o-ring-mask.svg);
  mask-position: center, center;
  -webkit-mask-position: center, center;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-size: 100% 100%, 84% 84%;
  -webkit-mask-size: 100% 100%, 84% 84%;
  opacity: 0;
  overflow: hidden;
  z-index: 3;
}

.verati-mark--ready .verati-mark__glow {
  opacity: var(--o-live);
}

.verati-mark__glow-spin {
  background: conic-gradient(from var(--o-angle), transparent 0deg, transparent 238deg, rgba(255, 193, 126, 0) 252deg, rgba(255, 193, 126, .28) 270deg, rgba(255, 210, 160, .7) 290deg, #fff8ee 304deg, rgba(255, 210, 160, .7) 318deg, rgba(255, 193, 126, .28) 338deg, rgba(255, 193, 126, 0) 352deg, transparent 1turn);
  filter: blur(.45px);
  height: 136%;
  inset: -18%;
  mix-blend-mode: overlay;
  position: absolute;
  width: 136%;
}

@media (max-width: 767px) {
  .verati-mark {
    --o-w: 48px;
  }
}

@media (max-width: 400px) {
  .verati-mark {
    --o-w: 32px;
    --o-h: 32px;
    top: -5px;
  }
}

/* --------------------------------------------------------------------------
   Reveal states
   -------------------------------------------------------------------------- */
[data-reveal=header-links],
[data-reveal=nav-logo] {
  opacity: 0;
}

[data-reveal=header-links] {
  transition: opacity .6s var(--home-ease), transform .6s var(--home-ease);
}

/* the logo settles in the same way as on the home page (hero intro) */
[data-reveal=nav-logo] {
  transform: translate3d(0, -36px, 0);
  transition: opacity .6s var(--home-ease), transform .55s var(--home-ease-out);
}

html[data-header-revealed] [data-reveal=nav-logo] {
  opacity: 1 !important;
  transform: none !important;
}

html[data-header-revealed] [data-reveal=header-links] {
  opacity: 1;
  transform: none;
}

/* Home page: the header is part of the hero intro */
.header--home {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.header--home-ready {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .6s var(--home-ease);
}

html[data-home-header-pending] .header {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate3d(0, -36px, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .header--home,
  [data-reveal=header-links],
  [data-reveal=nav-logo] {
    transition: none;
  }

  .verati-mark {
    --o-live: .88;
  }

  .verati-mark__glow-spin {
    background: conic-gradient(from 40deg, transparent 0deg, transparent 238deg, rgba(255, 193, 126, 0) 252deg, rgba(255, 193, 126, .22) 270deg, rgba(255, 193, 126, .75) 290deg, #fff 304deg, rgba(255, 193, 126, .75) 318deg, rgba(255, 193, 126, .22) 338deg, rgba(255, 193, 126, 0) 352deg, transparent 1turn);
  }
}