/*
 * Motion & interaction layer (not part of the Figma file).
 * - loader
 * - entrance animations (.a + .is-ready)
 * - micro-component states: :hover / :active / :focus-visible / disabled
 *   Every state also has an .is-* class so states.html can show them side by side.
 * - hero text animation + interactive dither area
 */

:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --focus: var(--focus-c);
  --blue-hover: #2a6ff5;
  --blue-press: #0a4fd6;
}

/* ================= loader ================= */

html.is-loading body { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: #0b5bf2;
}
html:not(.js) .loader { display: none; }

.loader-dissolve { position: absolute; inset: 0; width: 100%; height: 100%; }

.loader-inner {
  position: relative;
  transition: opacity 0.4s var(--ease), translate 0.6s var(--ease);
}
/* the logo leaves upward, ahead of the curtain */
.loader.is-out .loader-inner { opacity: 0; translate: 0 -48px; }

.loader-logo {
  width: 236px;
  height: auto;
  animation:
    loader-logo 1s var(--ease) both,
    loader-breathe 2.4s 1s var(--ease-in-out) infinite;
}
@keyframes loader-logo {
  from { opacity: 0; translate: 0 24px; filter: blur(10px); }
  to { opacity: 1; translate: none; filter: none; }
}
@keyframes loader-breathe {
  50% { scale: 1.035; }
}

/* ================= entrance ================= */

.js .a {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 0.8s var(--ease) var(--d, 0s),
    translate 1s var(--ease) var(--d, 0s),
    scale 1.1s var(--ease) var(--d, 0s),
    filter 0.9s var(--ease) var(--d, 0s);
}
.js .a-down { translate: 0 -14px; }
.js .a-fade { translate: none; }
.js .a-line { translate: 0 32px; filter: blur(10px); }
.js .a-pop { translate: none; scale: 0; }
.js .a-draw-y { opacity: 1; translate: none; scale: 1 0; transform-origin: top; }
.js .a-draw-x { opacity: 1; translate: none; scale: 0 1; transform-origin: right center; }

.js.is-ready .a { opacity: 1; translate: none; scale: none; filter: none; }

/* ================= continuous motion ================= */

/* badge: live dot */
.badge-dot { position: relative; display: block; width: 10px; height: 10px; }
.badge-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #0b5bf2;
  animation: ping 2s var(--ease) infinite;
}
@keyframes ping {
  0% { scale: 1; opacity: 0.7; }
  80%, 100% { scale: 2.8; opacity: 0; }
}

/* stripe band drifts by exactly one stripe period, so the loop is seamless */
.stripes-row { animation: stripes-drift 1.6s linear infinite; }
@keyframes stripes-drift { to { translate: -18.196px 0; } }

/* ================= buttons ================= */

/* primary: hero CTA + nav CTA */
.btn-primary,
.nav-cta {
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.25s, scale 0.15s var(--ease);
}
.btn-primary:hover, .btn-primary.is-hover,
.nav-cta:hover, .nav-cta.is-hover {
  background: var(--blue-hover);
  box-shadow: 0 10px 28px -10px rgba(11, 91, 242, 0.85);
}
.btn-primary:active, .btn-primary.is-active,
.nav-cta:active, .nav-cta.is-active {
  background: var(--blue-press);
  box-shadow: none;
  scale: 0.97;
}
.btn-primary:focus-visible, .btn-primary.is-focus,
.nav-cta:focus-visible, .nav-cta.is-focus,
.btn-secondary:focus-visible, .btn-secondary.is-focus {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
.btn-primary[aria-disabled="true"], .btn-primary.is-disabled,
.nav-cta[aria-disabled="true"], .nav-cta.is-disabled {
  background: var(--btn-disabled);
  color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  pointer-events: none;
}
.btn-primary.is-disabled img, .nav-cta.is-disabled img,
.btn-primary[aria-disabled="true"] img, .nav-cta[aria-disabled="true"] img { opacity: 0.35; }

/* arrow: flies out up-left and comes back in from bottom-right.
   The icon wrappers are flipped (scaleY -1), so y is inverted in here. */
.btn-icon { display: flex; overflow: hidden; }
.btn-primary:hover .btn-icon img, .btn-primary.is-hover .btn-icon img,
.nav-cta:hover .nav-cta-icon img, .nav-cta.is-hover .nav-cta-icon img {
  animation: arrow-loop 0.55s var(--ease-in-out);
}
@keyframes arrow-loop {
  0% { translate: 0 0; opacity: 1; }
  45% { translate: -16px 16px; opacity: 0; }
  46% { translate: 16px -16px; opacity: 0; }
  100% { translate: 0 0; opacity: 1; }
}

/* secondary */
.btn-secondary {
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, scale 0.15s var(--ease);
}
.btn-secondary:hover, .btn-secondary.is-hover {
  background: var(--btn2-hover);
  border-color: var(--btn2-line-hover);
  color: var(--text);
}
.btn-secondary:active, .btn-secondary.is-active {
  background: var(--btn2-press);
  scale: 0.97;
}
.btn-secondary[aria-disabled="true"], .btn-secondary.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ================= nav ================= */

.nav a {
  border-radius: 8px;
  transition: color 0.2s, background-color 0.2s, scale 0.15s var(--ease);
}
.nav a:not(.on):hover, .nav a.is-hover {
  color: var(--text);
  background: rgba(var(--chip-rgb), 0.06);
}
.nav a:active, .nav a.is-active {
  background: rgba(var(--chip-rgb), 0.14);
  scale: 0.97;
}
.nav a:focus-visible, .nav a.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }

.logo img { transition: translate 0.4s var(--ease), filter 0.3s; }
.logo:hover img { translate: 0 -2px; filter: brightness(1.15); }

/* theme toggle */
.theme { transition: background-color 0.2s, scale 0.15s var(--ease); }
.theme-ico { transition: rotate 0.6s var(--ease); }
/* the icon that is not current turns away and shrinks; the current one turns in and grows */
.theme-ico i { transition: opacity 0.35s var(--ease), rotate 0.6s var(--ease), scale 0.6s var(--ease); }
.theme-ico .ph-moon { opacity: 0; rotate: -90deg; scale: 0.4; }
html.theme-light .theme-ico .ph-sun { opacity: 0; rotate: 90deg; scale: 0.4; }
html.theme-light .theme-ico .ph-moon { opacity: 1; rotate: 0deg; scale: 1; }
.theme:hover, .theme.is-hover { background: rgba(var(--chip-rgb), 0.16); }
.theme:hover .theme-ico, .theme.is-hover .theme-ico { rotate: 25deg; }
.theme:hover, .theme.is-hover { color: var(--text); }
.theme:active, .theme.is-active { scale: 0.92; }
.theme:focus-visible, .theme.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }

@keyframes spin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* language: the active pill slides between the two options */
.lang { position: relative; }
.lang a.on { background: none; }
.lang-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 33px;
  height: 33px;
  border-radius: 4px;
  background: var(--surface-raised);
  transition: translate 0.35s var(--ease);
}
.lang[data-active="en"] .lang-pill { translate: 33px 0; }
.lang a { position: relative; transition: color 0.2s; border-radius: 4px; }
.lang a:hover, .lang a.is-hover { color: var(--text); }
.lang a:focus-visible, .lang a.is-focus { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ================= clients & trust ================= */

.client { transition: background-color 0.35s; }
.client img, .client p { transition: filter 0.35s, opacity 0.35s, translate 0.45s var(--ease); }
.clients:hover .client:not(:hover) img,
.clients:hover .client:not(:hover) p { opacity: 0.45; }
.client:hover, .client.is-hover { background: var(--surface); }
.client:hover img, .client.is-hover img { filter: brightness(1.75); translate: 0 -2px; }
.client:hover .pak-img, .client.is-hover .pak-img { filter: grayscale(1) brightness(1.75); }
.client:hover p, .client.is-hover p { filter: brightness(1.75); }
.client.is-dim img, .client.is-dim p { opacity: 0.45; }

/* logo marquee: the row is duplicated in motion.js; one set is 1302px (261+260+260+261+260) */
.clients { overflow: hidden; }
.clients-row { animation: clients-marquee 28s linear infinite; }
.clients:hover .clients-row { animation-play-state: paused; }
@keyframes clients-marquee {
  from { translate: -1302px 0; }
  to { translate: 0 0; }
}


/* ================= hero: interactive dither + stepper ================= */

.hero-left { cursor: pointer; }
.hero-left canvas { image-rendering: pixelated; }
.grid i:hover { background-color: rgba(var(--chip-rgb), 0.05); transition-duration: 0s; }

/* random cells light up behind the shape (motion.js); fill only, the stroke stays as in Figma */
.grid i.blink { animation: cell-blink 2.2s var(--ease-in-out); }
@keyframes cell-blink {
  0%, 100% { background-color: transparent; }
  35% { background-color: rgba(var(--chip-rgb), 0.045); }
}


/* ---------- hero text: load animation only (words wrapped in .w > .wi by motion.js) ---------- */

.hero-copy .wi { display: inline-block; }
.hero-copy h1 .w {
  display: inline-block;
  overflow: hidden; /* mask for the rise-in */
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* headline: each word rises out of its mask, right to left */
.js h1 .wi { animation: word-in 1s var(--ease) calc(0.3s + var(--i) * 70ms) backwards; }
@keyframes word-in { from { translate: 0 105%; } }

/* paragraph: fades in word by word */
.js .lead .wi { animation: word-fade 0.7s var(--ease) calc(0.6s + var(--i) * 22ms) backwards; }
@keyframes word-fade { from { opacity: 0; translate: 0 8px; filter: blur(4px); } }

/* nothing plays until the loader is gone */
.js:not(.is-ready) .hero-copy .wi { animation-play-state: paused; }

/* ---------- KPI glyphs (motion.js adds .play on load and on hover) ---------- */

.glyph g, .glyph rect, .glyph path { transform-box: fill-box; }
.glyph .spark { opacity: 0; }

/* check: the box is pressed and springs back, then the check draws pixel by pixel */
.glyph.play .box { transform-origin: center; animation: glyph-press 0.5s var(--ease); }
@keyframes glyph-press {
  30% { scale: 0.84; }
  65% { scale: 1.06; }
}
.glyph.play .ck { animation: glyph-pixel 0.01s steps(1) calc(0.18s + var(--i) * 50ms) backwards; }
@keyframes glyph-pixel { from { opacity: 0; } }

/* bars: each grows from zero one pixel row at a time, staggered */
.glyph.play .bar {
  transform-origin: bottom;
  animation: glyph-grow 0.55s steps(var(--n), end) calc(var(--i) * 110ms) backwards;
}
@keyframes glyph-grow { from { scale: 1 0; } }

/* heart: two beats, and four light pixels spark outward */
.glyph.play .heart { transform-origin: center; animation: glyph-beat 0.8s var(--ease-in-out); }
@keyframes glyph-beat {
  15% { scale: 1.2; }
  30% { scale: 1; }
  45% { scale: 1.12; }
  60% { scale: 1; }
}
.glyph.play .spark { animation: glyph-spark 0.7s var(--ease) 0.08s; }
@keyframes glyph-spark {
  0% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: var(--dx) var(--dy); }
}

/* service glyphs: a pixel "signal" travels the connectors; a block plugs in one pixel at a time */
.glyph .blip { opacity: 0; }
.glyph.play .blip { animation: glyph-blip 0.32s linear calc(0.1s + var(--i) * 60ms) forwards; }
@keyframes glyph-blip { from { opacity: 1; } to { opacity: 0; } }
.glyph.play .plug { animation: glyph-plug 0.45s steps(3) both; }
@keyframes glyph-plug { from { translate: 3px 3px; } }

/* ---------- services section ---------- */

/* reveal on scroll (motion.js adds .in when the section enters the viewport) */
.js .r {
  opacity: 0;
  translate: 0 36px;
  /* long, soft ease so reveals glide in with the smooth scroll */
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), translate 1.4s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.js .r.in { opacity: 1; translate: none; }

.svc { cursor: pointer; transition: background-color 0.3s, scale 0.15s var(--ease); }
.svc-chip { transition: box-shadow 0.3s, background-color 0.3s; }
.svc-title { transition: color 0.2s; }
.svc:hover, .svc.is-hover { background-color: var(--surface); }
/* the list's pixel bullets turn blue one after another, top to bottom */
.svc-list li { transition: color 0.25s; }
.svc-list li::before { transition: background-color 0.2s; }
.svc:hover .svc-list li, .svc.is-hover .svc-list li { color: var(--text-2); }
.svc:hover .svc-list li::before, .svc.is-hover .svc-list li::before {
  background-color: #0b5bf2;
  transition-delay: calc(0.12s + var(--i) * 70ms);
}
.svc:hover .svc-chip, .svc.is-hover .svc-chip { background-color: var(--surface-accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.svc:active, .svc.is-active { background-color: var(--surface-press); }
.svc:focus-visible, .svc.is-focus { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---------- portfolio ---------- */

/* card: same as the services cells, the cell fills slightly lighter */
.work { cursor: pointer; transition: background-color 0.3s; }
.work:hover, .work.is-hover { background-color: var(--surface); }
.work:active, .work.is-active { background-color: var(--surface-press); }
/* cover photo zooms in slightly and regains full colour */
.cover-img { transition: scale 0.8s var(--ease), filter 0.5s; }
.work:hover .cover-img, .work.is-hover .cover-img { scale: 1.04; filter: saturate(1.05); }
.work:focus-visible, .work.is-focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.work-all:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* view-project button: takes the secondary button's hover with the card; the arrow (same colour as
   the label) runs the primary button's diagonal arrow loop */
.work-go { transition: background-color 0.2s, border-color 0.2s, color 0.2s, scale 0.15s var(--ease); }
.work:hover .work-go, .work.is-hover .work-go { border-color: var(--btn2-line-hover); background: var(--btn2-hover); color: var(--text); }
.work:hover .go-ico i, .work.is-hover .go-ico i { animation: arrow-loop 0.55s var(--ease-in-out); }
.work:active .work-go, .work.is-active .work-go { background: var(--btn2-press); scale: 0.97; }
.work-all { transition: background-color 0.2s, border-color 0.2s, color 0.2s, scale 0.15s var(--ease); }
.work-all:hover, .work-all.is-hover { border-color: var(--btn2-line-hover); background: var(--btn2-hover); color: var(--text); }
.work-all:hover .go-ico i, .work-all.is-hover .go-ico i { animation: arrow-loop 0.55s var(--ease-in-out); }
.work-all:active, .work-all.is-active { background: var(--btn2-press); scale: 0.97; }

/* ---------- contact form ---------- */

html:not(.reduce-motion) { scroll-behavior: smooth; }
html.has-smoother { scroll-behavior: auto; } /* ScrollSmoother does the gliding (scroll.js) */

/* fields: hover lightens the stroke, focus takes the brand blue with a soft ring, invalid turns red */
.ct-input { transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; }
.ct-input:hover, .ct-input.is-hover { border-color: var(--btn2-line-hover); }
.ct-input:focus, .ct-input.is-focus { border-color: var(--blue); background: var(--surface-raised); box-shadow: 0 0 0 3px rgba(11, 91, 242, 0.22); }
.ct-input[aria-invalid="true"], .ct-input.is-invalid { border-color: #e5484d; }
.ct-input[aria-invalid="true"]:focus, .ct-input.is-invalid.is-focus { box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.2); }
.ct-input:disabled, .ct-input.is-disabled { opacity: 0.5; cursor: not-allowed; }
.ct-err:not(:empty) { animation: ct-err-in 0.3s var(--ease); }
@keyframes ct-err-in { from { opacity: 0; translate: 0 -4px; } }

/* accordion input: opens by growing its option list (grid rows 0fr → 1fr), the caret flips */
.ct-acc-panel { transition: grid-template-rows 0.35s var(--ease), visibility 0s linear 0.35s; }
.ct-acc.is-open .ct-acc-panel, .ct-acc-panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.35s var(--ease); }
.ct-acc-list { transition: padding 0.35s var(--ease); }
.ct-caret { transition: rotate 0.3s var(--ease), background-color 0.2s; }
.ct-acc.is-open .ct-caret, .ct-acc-btn.is-open .ct-caret { rotate: 180deg; background: var(--text); }
.ct-acc.is-open .ct-acc-btn, .ct-acc-btn.is-open { border-color: var(--blue); border-bottom-color: var(--line); background: var(--surface-raised); box-shadow: none; }
.ct-acc.is-invalid .ct-acc-btn { border-color: #e5484d; }
/* option rows: hover tint, selected = white text + filled blue pixel */
.ct-opt-row span { transition: background-color 0.15s, color 0.15s; }
.ct-opt-row span::before { transition: background-color 0.15s, box-shadow 0.15s; }
.ct-opt-row:hover span, .ct-opt-row.is-hover span { background: var(--surface-hover); color: var(--text); }
.ct-opt-row input:checked + span, .ct-opt-row.is-checked span { color: var(--text); }
.ct-opt-row input:checked + span::before, .ct-opt-row.is-checked span::before { background: var(--blue); box-shadow: none; }
.ct-opt-row input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }

/* social icon buttons: secondary hover, the icon lifts a step; press shrinks */
.ct-soc { transition: background-color 0.2s, border-color 0.2s, color 0.2s, scale 0.15s var(--ease); }
.ct-soc i { transition: translate 0.25s var(--ease); }
.ct-soc:hover, .ct-soc.is-hover { border-color: var(--btn2-line-hover); background: var(--btn2-hover); color: var(--text); }
.ct-soc:hover i, .ct-soc.is-hover i { translate: 0 -2px; }
.ct-soc:active, .ct-soc.is-active { scale: 0.94; }
.ct-soc:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* footer: link rows tint and reveal an arrow; the email and back-to-top lighten */
.ft-link { transition: background-color 0.25s, color 0.2s; }
.ft-link > i { transition: color 0.2s; }
.ft-link .go-ico { transition: opacity 0.25s, translate 0.35s var(--ease); translate: 6px 0; }
.ft-link:hover, .ft-link.is-hover { background: var(--surface); color: var(--text); }
.ft-link:hover > i, .ft-link.is-hover > i { color: var(--link); }
.ft-link:hover .go-ico, .ft-link.is-hover .go-ico { opacity: 1; translate: 0 0; color: var(--text); }
.ft-link:focus-visible, .ft-value:focus-visible, .ft-top-btn:focus-visible, .ft-logo:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ft-value span, .ft-top-btn { transition: color 0.2s; }
.ft-value:hover span { color: var(--link-hover); }
.ft-top-btn i { transition: translate 0.3s var(--ease); }
.ft-top-btn:hover { color: var(--text); }
.ft-top-btn:hover i { translate: 0 -3px; }

/* submit while sending: the arrow gives way to three stepping pixels */
.ct-submit.is-sending { pointer-events: none; }
.ct-submit.is-sending .btn-icon { display: none; }
.ct-submit.is-sending .ct-dots { display: flex; }
.ct-dots i { animation: ct-dot 0.9s steps(1) infinite; }
.ct-dots i:nth-child(2) { animation-delay: 0.15s; }
.ct-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ct-dot { 0%, 100% { opacity: 0.25; } 33% { opacity: 1; } }

/* success panel comes up where the form was */
.ct-done:not([hidden]) > * { animation: ct-done-in 0.6s var(--ease) backwards; }
.ct-done > :nth-child(2) { animation-delay: 0.08s; }
.ct-done > :nth-child(3) { animation-delay: 0.14s; }
.ct-done > :nth-child(4) { animation-delay: 0.2s; }
@keyframes ct-done-in { from { opacity: 0; translate: 0 14px; } }
.ct-form.is-gone { visibility: hidden; }
.ct-alert:not([hidden]) { animation: ct-err-in 0.3s var(--ease); }

/* ================= reduced motion ================= */
/* .reduce-motion is set in <head> from prefers-reduced-motion (overridable with ?motion=full) */

.reduce-motion .a, .reduce-motion .a-line, .reduce-motion .a-down, .reduce-motion .a-pop,
.reduce-motion .a-draw-x, .reduce-motion .a-draw-y, .reduce-motion .r {
  translate: none;
  scale: none;
  filter: none;
  transition: opacity 0.4s;
}
.reduce-motion .stripes-row, .reduce-motion .badge-dot::after,
.reduce-motion .loader-logo, .reduce-motion .clients-row, .reduce-motion .grid i.blink,
.reduce-motion .hero-copy .wi { animation: none; }
.reduce-motion .btn-primary:hover .btn-icon img,
.reduce-motion .nav-cta:hover .nav-cta-icon img { animation: none; }
.reduce-motion .work:hover .go-ico i, .reduce-motion .work.is-hover .go-ico i,
.reduce-motion .work-all:hover .go-ico i { animation: none; }
.reduce-motion .ct-err, .reduce-motion .ct-done > *, .reduce-motion .ct-alert { animation: none; }
.reduce-motion .ct-acc-panel, .reduce-motion .ct-caret { transition: none; }
.reduce-motion .ct-soc:hover i { translate: none; }
.reduce-motion .ft-link .go-ico, .reduce-motion .ft-top-btn:hover i { translate: none; }
/* theme switch. Browsers with view transitions: the new theme spreads from the toggle
   through a dithered circle (motion.js draws the mask and the blue fringe). Others: colours cross-fade for a moment (class set while switching);
   the toggle icons keep their own transitions. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
/* the dithered reveal: motion.js redraws the mask (one pixel per 6px cell) every frame */
::view-transition-new(root) {
  -webkit-mask-image: var(--vt-mask, none);
  mask-image: var(--vt-mask, none);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  image-rendering: pixelated;
}
/* the blue pixel fringe on the reveal edge (lives in the new view, so the mask clips it) */
.theme-fx { position: fixed; inset: 0; z-index: 2000; width: 100vw; height: 100vh; image-rendering: pixelated; pointer-events: none; }
html.theme-switching *:not(.theme-ico i),
html.theme-switching *::before,
html.theme-switching *::after {
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, fill 0.4s ease, box-shadow 0.4s ease !important;
}

/* sticky header: the backdrop fades in and the bar tightens as soon as the page leaves the top */
.site-header { transition: height 0.45s var(--ease), translate 0.45s var(--ease); }
.site-header::before { transition: opacity 0.35s ease; }
.hdr-frame { transition: translate 0.45s var(--ease); }
.reduce-motion .site-header, .reduce-motion .hdr-frame { transition: none; }