/* ============================================================
   MOTION — ported from the AnchorWorks report pages
   (Three/hvac-report/index.html and Three/css/styles-kk.css)

   WHAT CHANGED IN THE PORT
   AnchorWorks is gold on near-black. JC is dark ink on a cool
   near-white. Three families of effect do not survive that flip
   and were re-derived rather than recoloured:

     1. GLOWS. `0 14px 34px -12px rgba(gold,.22)` reads as a halo
        on charcoal and as a grey smudge on #EDF1F2. Replaced with
        a turquoise-TINTED shadow: the hue carries the brand, the
        low alpha keeps it a shadow instead of a bloom.
     2. THE SPECULAR SWEEP. A white shine across a button is
        invisible on a light button. Kept, but scoped to buttons
        sitting ON the dark bands only.
     3. THE INSET TOP BEVEL (`inset 0 1px 0 rgba(255,255,255,.35)`)
        is a dark-UI convention. Dropped.

   The house easing --ease is already identical in tokens.css, so
   every duration and cubic-bezier below is AnchorWorks' own.
   ============================================================ */

/* ============================================================
   1. REVEAL ON SCROLL
   The OPT-IN form, which LEARNINGS.md calls the newer and better
   one: content is visible by default and the hide applies only
   under html.js-anim, which motion.js adds once it has proven it
   is running. A broken script costs the animation, never the page.
   ⛔ Do not unscope these rules from .js-anim.
   ============================================================ */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js-anim .reveal.is-in { opacity: 1; transform: none; }
.js-anim .reveal[data-delay="1"] { transition-delay: .1s; }
.js-anim .reveal[data-delay="2"] { transition-delay: .2s; }
.js-anim .reveal[data-delay="3"] { transition-delay: .3s; }
.js-anim .reveal[data-delay="4"] { transition-delay: .4s; }
/* Phones get a shorter throw: 26px of travel on a small screen
   reads as a jolt rather than a rise. AnchorWorks' own value. */
@media (max-width: 640px) {
  .js-anim .reveal { transform: translateY(16px); transition-duration: .45s; }
}
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   2. STICKY HEADER SOLIDIFY (scroll > 24px)
   AnchorWorks uses saturate(140%) over charcoal. Over a pale
   blue-grey that turns muddy, so it is 108% here.
   ============================================================ */
.site-header, .funnel-header {
  transition: background .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease);
}
.site-header.is-scrolled, .funnel-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
  backdrop-filter: blur(14px) saturate(108%);
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 24px -12px rgba(22, 23, 24, 0.22);
}

/* ============================================================
   3. SCROLL PROGRESS BAR
   AnchorWorks ramps gold-deep -> gold-bright, which on white goes
   from low contrast to lower. Reversed: the dark end leads, so a
   2px rule stays visible against the paper the whole way across.
   ============================================================ */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 210; pointer-events: none;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
  transition: width .08s linear;
}
@media print { .progress { display: none; } }

/* ============================================================
   4. NAV UNDERLINE GROW
   ============================================================ */
.sectionnav a, .jumpbar a, .nav a { position: relative; transition: color .3s var(--ease); }
.sectionnav a::after, .jumpbar a::after, .nav a::after {
  content: ""; position: absolute; left: 0; bottom: 2px;
  height: 1px; width: 0; background: var(--accent);
  transition: width .35s var(--ease);
}
.sectionnav a:hover::after, .jumpbar a:hover::after, .nav a:hover::after,
.sectionnav a.is-active::after, .jumpbar a.is-active::after { width: 100%; }

/* ============================================================
   5. BUTTONS — lift, press, and the specular sweep
   The glow is a turquoise-tinted shadow, not a halo. See header.
   ============================================================ */
.btn {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary:hover { box-shadow: 0 16px 34px -14px rgba(74, 124, 130, 0.55); }
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* The sweep only exists where there is something for a highlight to
   catch: a button on one of the dark plates. On the light ground a
   white shine is invisible, so it is not inherited there. */
.hero .btn--primary, .fhero .btn--primary, .h-deep .btn--primary {
  position: relative; overflow: hidden;
}
.hero .btn--primary::after, .fhero .btn--primary::after, .h-deep .btn--primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%,
              rgba(255, 255, 255, .30) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .7s var(--ease);
}
.hero .btn--primary:hover::after, .fhero .btn--primary:hover::after,
.h-deep .btn--primary:hover::after { transform: translateX(130%); }

/* ============================================================
   6. CARD LIFT
   AnchorWorks lifts to a gold border and a near-black bloom. Here
   the border goes turquoise and the shadow is the already-tinted
   --shadow-card, which tokens.css keys to the ink, not to black.
   ============================================================ */
.ocard, .h-usp, .h-step, .h-rock, .card, .h-svc__card {
  transition: transform .45s var(--ease), border-color .45s var(--ease),
              box-shadow .45s var(--ease);
}
.ocard:hover, .h-usp:hover, .h-step:hover, .h-rock:hover,
.card:hover, .h-svc__card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   7. REDUCED MOTION
   AnchorWorks' own block kills animation-duration but NOT the
   delays, so its hero's 1.7s ladder still withholds content from
   someone who asked for no motion. The two delay lines are the
   fix, and they are the one place this file departs upward.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    animation-delay: .001ms !important;
    transition-delay: .001ms !important;
  }
}