/* Patch v98: header + hero fade-in + product hero overlay improvements */

:root{
  /* If you already have these in your main stylesheet, these simply act as fallbacks */
  --lancing-blue-900: #082a5b;
  --lancing-blue-800: #0b3a7a;
  --lancing-blue-700: #0f56b3;
  --lancing-blue-600: #1b63ff;
}

/* ---------- Header: subtle shrink & snap-to-top on scroll ---------- */
.site-header--glass{
  /* keep your existing styling, just add smoother motion */
  transition:
    top 180ms ease,
    border-radius 180ms ease,
    padding 180ms ease,
    background 200ms ease,
    box-shadow 200ms ease,
    backdrop-filter 200ms ease;
}

/* Make the header span wider on big screens */
@media (min-width: 1200px){
  .site-header__inner{ max-width: 1320px; }
}

/* Snap to the very top once scrolled */
.site-header--glass.is-scrolled{
  top: 0 !important;
  border-radius: 0 !important;
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 14px 40px rgba(2,18,46,.22);
  background: linear-gradient(135deg, rgba(8,42,91,.92), rgba(15,86,179,.72));
  backdrop-filter: blur(10px);
}

/* Slightly reduce logo and spacing on scroll */
.site-header--glass.is-scrolled .site-brand{
  transform: translateY(-1px);
}

/* ---------- Hero text fade-in (home + products) ---------- */
html:not(.is-ready) .hero-overlay,
html:not(.is-ready) .page-hero-overlay__content,
html:not(.is-ready) .hero .hero-text{
  opacity: 0;
  transform: translateY(10px);
}

html.is-ready .hero-overlay,
html.is-ready .page-hero-overlay__content,
html.is-ready .hero .hero-text{
  opacity: 1;
  transform: none;
  transition: opacity 700ms ease, transform 700ms ease;
}

@media (prefers-reduced-motion: reduce){
  html:not(.is-ready) .hero-overlay,
  html:not(.is-ready) .page-hero-overlay__content,
  html:not(.is-ready) .hero .hero-text{
    opacity: 1;
    transform: none;
  }
  html.is-ready .hero-overlay,
  html.is-ready .page-hero-overlay__content,
  html.is-ready .hero .hero-text{
    transition: none;
  }
  .site-header--glass{ transition: none; }
}

/* ---------- Products page overlay hero (video) ---------- */
.page-hero-overlay{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin-top: 0;
}

.page-hero-overlay .hero-video{
  position: absolute;
  inset: 0;
}

.page-hero-overlay .hero-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-hero-overlay .hero-shade{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.40) 55%, rgba(0,0,0,.10) 100%);
}

.page-hero-overlay__content{
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 120px 0 62px;
  max-width: 860px;
}

@media (max-width: 900px){
  .page-hero-overlay__content{ padding: 110px 0 52px; }
}
@media (max-width: 640px){
  .page-hero-overlay{ border-radius: 18px; }
  .page-hero-overlay__content{ padding: 96px 0 46px; }
}

.page-hero-overlay__content h1,
.page-hero-overlay__content p{
  text-shadow: 0 10px 26px rgba(0,0,0,.35);
}