/* h1-micro.css: owned by M3 (micro-interactions), round 6 (30.09.2026). Only this agent edits this file.
   Site-wide micro-interactions on existing classes; the few extra hooks (h1-*) are added by h1-micro.js.
   Gates: html.mo = no reduced motion (set in <head>), html.h1m = h1-micro.js is running.
   Every hidden or moving start state sits behind one of them, so reduced motion shows the final, static state.
   Timing only from the f4 tokens (--ease, --dur, --dur-hover, --dur-press, --lift, --nudge); colours only from the palette. */

/* ------------------------------------------------------------ 1) focus-visible: one calm champagne ring (static) */
:focus-visible { outline-color: var(--ember-hi); }
.btn:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: 4px; }
/* the ring settles in from a wider offset instead of just appearing */
html.mo.h1m :is(a, button, summary, [tabindex]):focus-visible { animation: h1-focus var(--dur-hover) var(--ease) backwards; }
@keyframes h1-focus { from { outline-offset: 9px; outline-color: rgba(230, 214, 186, 0); } }

/* ------------------------------------------------------------ 2) buttons: press, sheen, arrow nudge */
html.mo.h1m .btn {
  transition: transform var(--dur-hover) var(--ease), scale var(--dur-press) var(--ease), background-color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
html.mo.h1m .btn:active { scale: .97; }
html.mo.h1m .btn:active .i { transform: translate3d(var(--nudge), 0, 0); }

/* one sweep of light across the champagne fill: behind the label (the button is isolated and clips it) */
html.mo.h1m .btn--primary::after {
  content: ""; display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 38%;
  background: linear-gradient(90deg, rgba(255, 251, 243, 0), rgba(255, 251, 243, .66) 50%, rgba(255, 251, 243, 0));
  transform: translate3d(-130%, 0, 0) skewX(-20deg); opacity: 0; pointer-events: none;
}
html.mo.h1m .btn--primary.h1-sheen::after { animation: h1-sheen 900ms cubic-bezier(.45, .05, .3, 1) 1; }   /* even sweep, soft landing */
@keyframes h1-sheen {
  0% { opacity: 0; transform: translate3d(-130%, 0, 0) skewX(-20deg); }
  14%, 82% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(360%, 0, 0) skewX(-20deg); }
}
/* touch: the arrow nudges twice with the sheen, as a quiet "this way" */
@media (hover: none) {
  html.mo.h1m .btn.h1-sheen .i:has(> use[href="#i-arrow"]) { animation: h1-nudge 900ms var(--ease) 120ms 1; }
}
@keyframes h1-nudge { 0%, 100% { translate: 0 0; } 28% { translate: var(--nudge) 0; } 55% { translate: 0 0; } 76% { translate: 2px 0; } }

/* ------------------------------------------------------------ 3) cards: lift + a soft light under the pointer (mouse only) */
@media (hover: hover) and (pointer: fine) {
  html.mo.h1m .plan, html.mo.h1m .service {
    transition: transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
  }
  html.mo.h1m .plan:hover, html.mo.h1m .service:hover { transform: translate3d(0, var(--lift), 0); }
  html.mo.h1m .h1-glow::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(300px circle at var(--h1x, 50%) var(--h1y, 0%), rgba(217, 195, 160, .10), rgba(217, 195, 160, 0) 70%);
    opacity: 0; transition: opacity var(--dur-hover) var(--ease);
  }
  html.mo.h1m .h1-glow.h1-lit::after { opacity: 1; }

  /* dark bands: a very faint spotlight that follows the cursor */
  html.mo.h1m .h1-spot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(560px circle at var(--h1x, 50%) var(--h1y, 50%), rgba(217, 195, 160, .07), rgba(217, 195, 160, 0) 72%);
    opacity: 0; transition: opacity var(--dur) var(--ease);
  }
  html.mo.h1m .h1-spot.h1-lit::after { opacity: 1; }
}
/* touch: cards answer a press */
@media (hover: none) {
  html.mo.h1m :is(.card, .guide, .promise, .channel, .plan) { transition: scale var(--dur-press) var(--ease), transform var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); }
  html.mo.h1m :is(.card, .guide, .promise, .channel):active { scale: .985; }
}

/* ------------------------------------------------------------ 4) main nav: one sliding underline + a softer dropdown (desktop) */
.h1navline { display: none; }
@media (min-width: 1081px) {
  .nav.h1-navline-on { position: relative; }
  .h1navline {
    display: block; position: absolute; left: 0; top: 0; width: 100px; height: 1.5px; border-radius: 2px;
    background: linear-gradient(90deg, var(--ember-lo), var(--ember-hi)); opacity: 0; pointer-events: none; transform-origin: 0 0;
    transition: transform 420ms var(--ease), opacity var(--dur-hover) var(--ease);
  }
  .h1navline.is-on { opacity: .95; }
  .h1navline.no-anim { transition: opacity var(--dur-hover) var(--ease); }
  .nav.h1-navline-on .nav__list > li > .nav__link:hover,
  .nav.h1-navline-on .nav__list > li > .nav__trigger:hover,
  .nav.h1-navline-on .nav__list > li > .nav__trigger[aria-expanded="true"] { background: transparent; }

  html.mo.h1m .nav__menu {
    transform: translate3d(0, -8px, 0) scale(.985); transform-origin: 44px 0;
    transition: opacity var(--dur-hover) var(--ease), transform 300ms var(--ease), visibility 300ms;
  }
  html.mo.h1m .nav__group:hover > .nav__menu,
  html.mo.h1m .nav__group:focus-within > .nav__menu,
  html.mo.h1m .nav__trigger[aria-expanded="true"] + .nav__menu { transform: none; }
  html.mo.h1m .nav__menu > li { opacity: 0; translate: 0 -4px; transition: opacity 180ms var(--ease), translate 280ms var(--ease); }
  html.mo.h1m .nav__group:hover > .nav__menu > li,
  html.mo.h1m .nav__group:focus-within > .nav__menu > li,
  html.mo.h1m .nav__trigger[aria-expanded="true"] + .nav__menu > li { opacity: 1; translate: none; }
  html.mo.h1m .nav__group:hover > .nav__menu > li:nth-child(2),
  html.mo.h1m .nav__group:focus-within > .nav__menu > li:nth-child(2),
  html.mo.h1m .nav__trigger[aria-expanded="true"] + .nav__menu > li:nth-child(2) { transition-delay: 40ms; }
  html.mo.h1m .nav__group:hover > .nav__menu > li:nth-child(3),
  html.mo.h1m .nav__group:focus-within > .nav__menu > li:nth-child(3),
  html.mo.h1m .nav__trigger[aria-expanded="true"] + .nav__menu > li:nth-child(3) { transition-delay: 80ms; }
  html.mo.h1m .nav__group:hover > .nav__menu > li:nth-child(n+4),
  html.mo.h1m .nav__group:focus-within > .nav__menu > li:nth-child(n+4),
  html.mo.h1m .nav__trigger[aria-expanded="true"] + .nav__menu > li:nth-child(n+4) { transition-delay: 120ms; }
  /* the menu rows: a hairline marks the row under the pointer */
  html.mo.h1m .nav__menu .nav__link { position: relative; }
  html.mo.h1m .nav__menu .nav__link::before {
    content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1.5px; border-radius: 2px;
    background: var(--ember); transform: scaleY(0); transform-origin: 50% 50%; transition: transform var(--dur-hover) var(--ease);
  }
  html.mo.h1m .nav__menu .nav__link:hover::before, html.mo.h1m .nav__menu .nav__link:focus-visible::before { transform: none; }
}

/* ------------------------------------------------------------ 5) reading progress under the sticky header (long pages, JS adds it) */
.h1progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-hover) var(--ease);
}
.h1progress.is-on { opacity: 1; }
.h1progress > span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--ember-lo), var(--ember-hi));
}
body.nav-open .h1progress { opacity: 0; }

/* ------------------------------------------------------------ 6) count-up: the real number stays in the DOM, CSS paints the count */
.h1num { position: relative; font-variant-numeric: tabular-nums; }
html.mo.h1m .h1num.is-armed { -webkit-text-fill-color: transparent; text-shadow: none; }
html.mo.h1m .h1num.is-armed::after {
  content: attr(data-v); content: attr(data-v) / "";
  position: absolute; right: 0; top: 0; white-space: nowrap; pointer-events: none;
  -webkit-text-fill-color: currentColor; text-shadow: var(--h1ts, none);
}
@media print { html.mo.h1m .h1num.is-armed { -webkit-text-fill-color: currentColor; } html.mo.h1m .h1num.is-armed::after { display: none; } }

/* ------------------------------------------------------------ 7) eyebrows: a short champagne rule in front of the label */
.eyebrow::before {
  content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 12px 0 0; vertical-align: .32em;
  background: currentColor; opacity: .7; transform-origin: 0 50%;
}
/* centred section heads get the same rule on the right, so the label stays on the axis
   (the right margin is 3px shorter: the letter-spacing already leaves a gap after the last letter) */
.section__head:not(.section__head--split):not(.section__head--left) > .eyebrow::after {
  content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 0 0 9px; vertical-align: .32em;
  background: currentColor; opacity: .7; transform-origin: 100% 50%;
}
@media (max-width: 399px) {   /* long labels would wrap on small phones */
  .section__head:not(.section__head--split):not(.section__head--left) > .eyebrow::after { display: none; }
}
html.mo .eyebrow::before, html.mo .section__head > .eyebrow::after { transform: scaleX(0); transition: transform 760ms var(--ease) 120ms; }
html.mo .eyebrow.h1-in::before, html.mo .section__head > .eyebrow.h1-in::after { transform: none; }

/* ------------------------------------------------------------ 8) images: fade in once loaded (JS marks only late images) */
html.mo.h1m img.h1img { opacity: 0; transition: opacity var(--dur) var(--ease); }
html.mo.h1m img.h1img.h1img-in { opacity: 1; }