/* Scroll effects layered on the approved v1 look. Shared by index.html and fa.html. */

/* 1. Pinned hero: the photo stays fixed while the page content slides up over it.
      The clip-path wrapper limits the fixed layer to the hero's own box. */
.hero { background: transparent; }
.hero-bg { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); pointer-events: none; }
.hero-bg .hero-photo {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh;
  object-fit: cover;
  transform: scale(calc(1 + var(--p, 0) * .06));
  will-change: transform;
}
.hero-bg .hero-scrim { position: fixed; inset: 0; }
.hero-bg .hero-dim {
  position: fixed; inset: 0; z-index: 1;
  background: var(--navy-deep);
  opacity: calc(var(--p, 0) * .6);
}
/* everything after the hero is opaque, so it covers the pinned photo as it rises */
.cover { position: relative; z-index: 2; background: var(--paper); }

/* 2. Header: the reference strip collapses and the bar tightens and goes solid after the first scroll */
header.site { transition: background .25s ease, box-shadow .25s ease; }
header.site .topstrip { overflow: hidden; max-height: 40px; transition: max-height .25s ease, padding .25s ease, opacity .2s ease; }
header.site .nav { transition: padding .25s ease; }
header.site .brand img { transition: height .25s ease; }
header.site.fx-fixed { position: fixed; top: 0; left: 0; right: 0; }
header.site.scrolled { background: var(--paper); box-shadow: 0 6px 24px rgba(7, 28, 40, .08); }
header.site.scrolled .topstrip { max-height: 0; padding-block: 0 !important; opacity: 0; border-bottom-width: 0 !important; }
header.site.scrolled .nav { padding-block: 8px; }
header.site.scrolled .brand img { height: 42px !important; }

/* 3. Sections fade up as they enter the viewport (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-bg .hero-photo { transform: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  header.site, header.site * { transition: none !important; }
}

/* digital-transformation band on the home page */
.dg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dg-chips span { border: 1px solid var(--line); background: var(--paper-raised); border-radius: 2px; padding: 7px 14px; font-size: 14px; font-weight: 500; }