/* ─────────────────────────────────────────────────────────────────
   scratch.css — DESIGN OVERRIDE LAYER
   Direction locked 2026-05-09 per Anthropic frontend-design skill:
   "Commit to one aesthetic and execute with precision."

   AESTHETIC: Refined editorial minimalism (Mercury / Felix bar).
   SURFACE:   Single warm cream page (#FBFAF9), white CARDS inside.
   TYPE:      Switzer / Matter analog. Light display weights.
   COLOR:     Navy #023A51 dominant. Green #11B058 accent only.
   MOTION:    One page-load entrance, no perpetual animation.
   ATMOSPHERE: No orbs, no section gradients. Cards carry depth.
   BUTTONS:   Same-identity darken-on-hover, translateY(-1px).
   COMPOSITION: Generous whitespace, single CTA + text-link secondary.

   LOCAL QUALITY REFERENCES (locked 2026-05-09 by Matthew):
     - .wz-faq-section — section header rhythm, accordion, hairlines
     - .wz-trust       — trust badges, score treatment, semantic layout
   When renovating other sections, MATCH these — they're the proven bar.

   When in doubt, DELETE rather than ADD. This file should shrink
   over time, not grow. Anything not in the locked direction goes.
   ───────────────────────────────────────────────────────────────── */

/* Switzer self-hosted via design-tokens.css (@font-face) 2026-05-11.
   Previous Fontshare CDN @import removed — third-party render-blocking. */

/* ───────────────────────────────────────────────────────────────── */
/* COLOR USAGE                                                        */
/* NAVY (#023A51): all headings, body, primary buttons, hairlines,    */
/*                 dividers, footer text. Heavy hierarchical role.    */
/* GREEN (#11B058): tiny accents only — status dots, link hover,      */
/*                  module pills, eyebrow pills. NEVER fills a hero.  */
/*                  NEVER as a headline color. NEVER as a button-     */
/*                  hover color (use darkened navy instead).          */
/* ───────────────────────────────────────────────────────────────── */

/* ── Tokens ────────────────────────────────────────────────────── */
:root {
  --blur-header: blur(6px) saturate(1.15);
  --blur-header-strong: blur(10px) saturate(1.3);
}

/* ── Base typography + colors ──────────────────────────────────── */
/* Color hierarchy (tokens only, never raw hex):
   PRIMARY:  --color-text-primary (Felix warm near-black) — body + ALL headings
   MUTED:    --color-text-secondary / --color-text-tertiary — subtitles, labels, FAQ body
   Headings have a single source of truth: the h1-h6 rule below. Dark-surface
   sections override their own headings to an inverse token at higher specificity. */

html, body {
  font-family: var(--font);                /* Switzer → system-ui */
  color: var(--ink-felix);                 /* Felix near-black */
}
/* Centralized heading color — every h1-h6 defaults to the primary text token.
   Hierarchy comes from size/weight, never colour. Components must not re-declare
   heading colour unless intentionally on a dark surface (use --color-text-inverse). */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
}

/* Accessory: warm near-black for non-heading semantic emphasis labels.
   Eyebrow pills moved out 2026-05-11 — they're decorative chips, not body
   labels. Canonical green-on-green-tint lives in components.css now. */
.wz-faq-eyebrow,
caption,
figcaption {
  color: #31302f;
}

/* Muted: warm gray for body explanation prose */
.wz-hero-subtitle,
.wz-editorial-lead,
.wz-faq-answer-inner p,
.wz-faq-answer-inner li,
.wz-diff-card-body {
  color: #5f5e5a;
}
/* .wz-suite-tagline removed 2026-05-11 — promoted to atoms.css with
   primary color + 18px lede treatment (iterate home-suites round 2). */

/* Page surface — cream substrate promoted to --surface-page in
   design-tokens.css (2026-05-13). Section bg overrides also promoted into
   atoms.css (.wz-diff, .wz-ess no longer carry their own gradients). */

/* wz-proof white banner — promoted to atoms.css 2026-05-13 */

/* Cards inside sections (proof, diff, ess) — promoted to atoms.css 2026-05-13 */

/* Hero padding + opacity transition — promoted to atoms.css 2026-05-13 */

/* PATTERN A — Hero subtitle Felix near-black + h1 weight 300 — promoted to atoms.css 2026-05-11 */

.wz-home-hero .wz-eyebrow-pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #11b058;
  background: rgba(17, 176, 88, 0.08);
  border: 0;
  padding: 5px 12px;
  border-radius: var(--r-md);
  margin-bottom: clamp(16px, 1.6vw, 22px);
}

.wz-home-hero .wz-hero-text {
  margin-bottom: clamp(40px, 5vw, 64px);
}

.wz-home-hero .wz-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* Trust + compliance signals below the hero CTAs. Green-wash pills, centered to
   match the CTA row. Mirrors the country-hero trust row (country.njk). */
.wz-home-hero .wz-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-xs) var(--gap-sm);
  margin: clamp(24px, 3vw, 36px) auto 0;
  max-width: 1120px;
  padding: 0;
  list-style: none;
}
.wz-home-hero .wz-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--gap-xs) var(--gap-tween);
  border-radius: var(--r-md);
  border: 1px solid var(--green-wash-25);
  background: var(--brand-green-50);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--brand-green-text);
  letter-spacing: -0.005em;
  line-height: 1.25;
  white-space: nowrap;
}
.wz-home-hero .wz-hero-trust svg {
  width: 17px;
  height: 17px;
  color: var(--brand-green-text);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .wz-home-hero .wz-hero-trust li { white-space: normal; }
}

/* Hero visual — positioning context for the orb + laptop layers. */
.wz-home-hero .wz-hero-visual-wrap {
  position: relative;
  isolation: isolate;
}

.wz-home-hero .wz-hero-visual-wrap::before,
.wz-home-hero .wz-hero-visual-wrap::after {
  display: none;
}

/* Green hero orb restored 2026-06-04 (navy dot-grid removed per Matthew). The
   orb lives in atoms.css (.wz-hero-orb — green-wash radial + breathe); it is
   un-hidden by dropping it from the rhythm.css homepage kill-list. The old
   "screenshot fades into green" problem is already solved by
   .wz-hero-laptop-screen { background: var(--surface-page) } below, so the orb
   now reads as a soft glow around the laptop, not a bleed through the image. */
.wz-home-hero .wz-hero-visual {
  position: relative;
  z-index: 1;
  /* Let the green orb glow span the full section width. The orb is sized 140%
     of the visual, so clipping it to the visual box cut its sides off with a
     hard edge. The parent .wz-home-hero already has overflow:hidden, so the
     glow is still contained to the viewport (no h-scroll) and fades softly. */
  overflow: visible;
}

/* ── Hero — laptop frame (clean, no faux bezel) ───────────────── */
/* Push the visual wrap full-width so the laptop has room to grow */
.wz-home-hero .wz-hero-visual-wrap {
  max-width: 1600px;
  width: calc(100% - 32px);
  margin: 0 auto;
  padding: 0 16px;
}
.wz-home-hero .wz-hero-laptop {
  border-radius: var(--r-md);
  overflow: hidden;
  background: transparent;
  padding: 0;
  width: 100%;
  max-width: 1488px;                     /* +20% — was 1240 */
  margin: 0 auto;
  /* Tight clean shadow — 15px range, two layers max. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 2px 6px rgba(2, 58, 81, 0.06),
    0 8px 16px -4px rgba(2, 58, 81, 0.10);
}
.wz-home-hero .wz-hero-laptop::before,
.wz-home-hero .wz-hero-laptop-screen::before,
.wz-home-hero .wz-hero-laptop-screen::after {
  display: none;
}
.wz-home-hero .wz-hero-laptop-screen {
  border-radius: var(--r-md);
  overflow: hidden;
  /* Solid page-cream behind the screenshot so its bottom mask dissolves into
     the PAGE colour, not the green orb behind it (2026-06-03). Orb stays a
     glow around the laptop; the hero image no longer fades into it. */
  background: var(--surface-page);
}

/* Screenshot bottom — mask fades into transparent so the screenshot
   dissolves into the page rather than terminating at a hard edge.
   Mercury / Linear pattern: the image isn't truncated, it dematerializes. */
.wz-home-hero .wz-hero-laptop-screen img,
.wz-home-hero .wz-hero-screenshot {
  display: block;
  width: 100%;
  -webkit-mask-image: linear-gradient(to bottom,
    black 0%,
    black 55%,
    rgba(0,0,0,0.7) 75%,
    rgba(0,0,0,0.3) 90%,
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    black 0%,
    black 55%,
    rgba(0,0,0,0.7) 75%,
    rgba(0,0,0,0.3) 90%,
    transparent 100%);
}

/* Reinforced bottom blur — a soft layer at the bottom of the laptop frame
   that adds a backdrop blur, sealing the dissolve. */
.wz-home-hero .wz-hero-laptop::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28%;
  background: linear-gradient(to bottom, transparent 0%, rgba(251, 250, 249, 0.7) 70%, #fbfaf9 100%);
  pointer-events: none;
  z-index: 2;
}
.wz-home-hero .wz-hero-laptop {
  position: relative;
}

/* Hero kill-animations + renovated chips + AEO strip — promoted to atoms.css 2026-05-13 */

/* Primary button — Mercury navy promoted to design-tokens.css 2026-05-13 */

/* Proof scores unified spec — promoted to atoms.css 2026-05-13 */

/* Country tile variant — wz-pill--flag tiles already use position: relative
   per their existing CSS. Arrow appears top-right on hover, matches the
   industry-tile language. */
.wz-pill--flag {
  position: relative;
}
.wz-tile-arrow--country {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: var(--brand-green-deep);
  box-shadow: 0 0 0 1px rgba(17, 176, 88, 0.18);
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  pointer-events: none;
}
.wz-tile-arrow--country svg {
  width: 11px;
  height: 11px;
}
/* Hover variant — white pill, brand-green glyph + ring. Was using
   --brand-green-deep (#0a4a25) for the ring which read near-black at 1.5px.
   Brighter --brand-green (#11b058) gives a clearer green outline. */
.wz-pill--flag:hover .wz-tile-arrow--country {
  opacity: 1;
  background: #ffffff;
  color: var(--brand-green-deep);
  box-shadow: 0 0 0 1.5px var(--brand-green),
              0 2px 8px rgba(17, 176, 88, 0.22);
  transform: translate(2px, -2px);
}

/* Suite-item tile arrow removed 2026-05-12 — the chevron is the canonical
   affordance for accordion toggles. A diagonal-up-right arrow signals
   "navigates away" which is wrong for an in-place expand/collapse. */

/* .wz-diff-hub-avatar--photo / .wz-diff-pos-candidate--photo —
   promoted to atoms.css 2026-05-13 */

/* Suite list flex + suite-item padding — promoted to atoms.css 2026-05-13 */

/* Footer typography + footnote refs — promoted to components.css 2026-05-13 */
/* Proof labels — keep on a single line so footnote refs sit at line-end
   instead of being orphaned beneath the big number. */
.wz-proof-desc,
.wz-proof-label {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .wz-proof-desc,
  .wz-proof-label {
    white-space: normal;            /* mobile: 4 stats stack, wrap is fine */
  }
}

/* ── Proof dividers — Mercury hairline ────────────────────────── */
.wz-proof-divider {
  background: rgba(15, 23, 41, 0.07);
  width: 1px;
  align-self: center;
  height: 56%;
}

/* Nav glass tokens + max-width — promoted to design-tokens.css and
   components.css 2026-05-13. Tokens carry the cream-translucent values. */

/* ── Nav OPEN state — opaque, matches dropdown surface, no backdrop-filter.
   Two reasons for dropping the blur on open:
   1. Visual: header + dropdown should read as ONE continuous opaque surface
      (Mercury/Vercel pattern). Glass on the header reads disconnected.
   2. Performance: backdrop-filter on the header ancestor of an open mega-menu
      throttles the compositor — page reveal/animations stutter or pause until
      the menu closes. Removing the filter restores 60fps composition. */
/* ── Footer logo — rise-on-scroll + sun-glass shimmer ─────────────
   2026-05-12 user feedback: "Workzoom logo in footer doesn't rise out of
   bottom as it scrolls into view, and doesn't have colour shimmer through
   it like a sun glass effect". Implementation:
   - .ft-logo starts opacity 0 + translateY(20px); enters via IntersectionObserver
     class `is-visible` that triggers transition to opacity 1 + translateY(0)
   - Shimmer: linear-gradient mask animated horizontally on hover, mimicking
     light sweeping across a glass surface */

@keyframes wz-ft-logo-shimmer {
  0%   { background-position: -100% 50%; }
  100% { background-position: 200% 50%; }
}

.ft-logo {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ft-logo.is-visible,
.reveal.is-visible .ft-logo {
  opacity: 1;
  transform: translateY(0);
}

/* Sun-glass shimmer on hover — only affects the navy logo SVG. Uses a
   masked gradient that sweeps left → right. Pure CSS, no JS. */
.ft-logo {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.ft-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(17, 176, 88, 0.28) 48%,
    rgba(44, 188, 99, 0.36) 50%,
    rgba(61, 214, 117, 0.28) 52%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: -100% 50%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.ft-logo:hover::after {
  opacity: 1;
  animation: wz-ft-logo-shimmer 1.2s ease-in-out;
}

/* Nav dropdown surface + green-strip removal + link colors — promoted
   to design-tokens.css (--nav-dd-link / -hover / -muted) and
   components.css 2026-05-13. */

/* Suite trigger name typography + icon removal — promoted to atoms.css 2026-05-13 */

/* Module pills inside the open suite body — cleaner navy chip */
/* .wz-suite-module-row a + :hover removed 2026-05-11 — refined pills
   (transparent + hairline border + secondary text) promoted to
   atoms.css per iterate home-suites round 2 spot 1. */

/* .wz-suite-explore + :hover removed 2026-05-11 — green-accent destination
   link with hover gap-shift promoted to atoms.css per iterate
   home-suites round 1 spot 4. */

/* Tagline color — Felix muted */
/* .wz-suite-tagline override removed 2026-05-11 — primary-color 18px
   lede treatment promoted to atoms.css per iterate home-suites round
   2 spot 3. */

/* ── FAQ typography — Mercury restraint ──────────────────────── */
.wz-faq-h2 {
  font-weight: 360;
  letter-spacing: -0.03em;
}
.wz-faq-question {
  font-size: clamp(19px, 1.55vw, 22px);
  font-weight: 500;
  letter-spacing: -0.018em;
}
.wz-faq-item[data-state="open"] .wz-faq-question {
  color: var(--color-text-primary);
}

/* Mobile hero padding + proof score size promoted to atoms.css 2026-05-13.
   Hero eyebrow pill / hero ctas / pricing link / dot triangles remain as
   plain mobile overrides below for design-loop iteration. */
@media (max-width: 768px) {
  .wz-home-hero .wz-eyebrow-pill { font-size: 11px; padding: 4px 10px; }
  .wz-home-hero .wz-hero-ctas {
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 0 var(--pad-inner-sm, 20px);
  }
  .wz-home-hero .wz-hero-ctas .btn { width: 100%; justify-content: center; }
  .wz-home-hero .wz-hero-visual-wrap::before,
  .wz-home-hero .wz-hero-visual-wrap::after { display: none; }
}

/* Reveal force + proof entrance staggers + divider hide — promoted/disabled in canonical 2026-05-13 */

/* ── Visual triage fixes — 2026-05-10 ─────────────────────────── */

/* P1 removed 2026-05-11 — stale rule predated the canonical gradient
   italic em signature now living in components.css. Suites em should
   inherit the brand gradient like every other section. */

/* Suite trigger chevron align-self + module-row gap + faq-container mobile
   padding + btn-primary mobile weight — promoted to atoms.css 2026-05-13
   (chevron + faq padding) or already canonical (module gap, btn weight). */

/* Cycle 3 + wz-suites pass 1 + product screenshot framing — promoted to atoms.css 2026-05-13 */
/* ─────────────────────────────────────────────────────────────────
   wz-canonical-strip: hide visually, keep in DOM for AI crawlers.
   Same facts are already structured elsewhere on the page (countries
   section, suite scroll, footnotes) — visible duplication was noise.
   GPTBot/ClaudeBot/PerplexityBot/Google-Extended still parse this.
   ───────────────────────────────────────────────────────────────── */
/* .wz-canonical-strip sr-only — promoted to components.css 2026-05-13
   (replaced the legacy visible editorial-strip rule entirely). */

/* Nav columns + bottom utility row sit below the navy band on cream.
   No changes needed — they sit at z-index:1 above the ::before which
   is height-capped at 340px so they remain on the cream zone bg. */

/* .wz-clients-label brand-green + .wz-logo img max-height 96px —
   promoted to atoms.css 2026-05-13 */
/* wz-logo-list gap, wz-trust :has(grid) block layout, wz-proof-inner
   wider max-width — all promoted to atoms.css 2026-05-13 */
/* Footer Felix contrast pass — promoted to components.css 2026-05-13 */
/* ━━━ SIGNATURE MOTION ATOMS (drafts) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Drafted 2026-05-24 for review. NOT promoted to atoms.css yet.
   Goal: 5 micro-interactions that feel uniquely Workzoom. Mercury-grade
   restraint, Stripe-grade tactility, Linear-grade timing. All driven by
   canonical tokens (--dur-*, --ease-*, --gap-*, --r-*, --color-text-*).
   Respects perf gates (no banned transitions, no rAF loops, no important).

   ─ USAGE SPEC ────────────────────────────────────────────────────
   1. .wz-press           → all .wz-btn, .btn, .wz-cta-primary, any
                            tactile clickable. Pairs with existing
                            translateY(-1px) hover — adds the press-down
                            on :active.
   2. .wz-card-tilt       → .wz-suite-card, .wz-diff-card,
                            .wz-industry-card, .wz-country-card,
                            .wz-blog-card. Skip on dense list cards.
   3. .wz-reveal-confident → wholesale replacement for .fade /
                            .reveal. Drop on any section that has the
                            base.html IntersectionObserver attached.
                            Use [data-d="N"] (N = 0..6) for stagger.
   4. .wz-ticker          → stat numbers in .wz-proof, .wz-trust,
                            .wz-case-studies stat blocks. Wrap
                            the numeral only — leave separators in DOM.
   5. .wz-shimmer         → loading placeholders, skeleton blocks,
                            async data rows. Add to elements with a
                            known width/height; never to text nodes.
   ──────────────────────────────────────────────────────────────────

   PROMOTION PATH:
   - Review against frontend-design + Mercury + Linear refs
   - Test on staging at localhost:8080
   - Verify lint:drift stays green (no important-flags, no banned trans)
   - Copy stanzas into atoms.css under "MOTION ATOMS" section
   - Add to wz-* partials per spec above
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── 1. .wz-press ─────────────────────────────────────────────────
   Haptic press-down on click. Active state only (hover handled elsewhere).
   Scale + brightness + shadow-squish reads as "the surface yielded".
   Duration 110ms — well under the 250ms transition gate.
   ────────────────────────────────────────────────────────────────── */
.wz-press {
  transition: transform var(--dur-micro) var(--ease-button),
              box-shadow var(--dur-micro) var(--ease-button);
  will-change: transform;
}
.wz-press:active {
  transform: scale(0.96) translateY(1px);
  box-shadow: 0 1px 2px rgba(2, 58, 81, 0.10),
              inset 0 1px 0 rgba(2, 58, 81, 0.04);
}
/* Brightness via a controlled filter on the contents (transition:filter
   is banned at the property level; we use a token-derived box-shadow
   tinted dark instead — same perceived "press darken", no GPU cost). */
.wz-press:active::after {
  /* hook for variants — overlay tint can ride here without re-painting */
}

/* ─── 2. .wz-card-tilt ─────────────────────────────────────────────
   3D hover-tilt for content cards. Subtle — 2deg, not Apple-keynote.
   Lift via translateY + shadow grow. Stripe pattern: the card breathes
   toward the cursor without leaving its row.
   Note: only transition transform + box-shadow (gate-safe).
   ────────────────────────────────────────────────────────────────── */
.wz-card-tilt {
  transform: perspective(1000px) rotateX(0deg) translateY(0);
  transform-origin: center 90%;
  transition: transform var(--dur-default) var(--ease-entrance),
              box-shadow var(--dur-default) var(--ease-entrance);
  will-change: transform;
}
.wz-card-tilt:hover {
  transform: perspective(1000px) rotateX(2deg) translateY(-4px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
              0 4px 12px rgba(2, 58, 81, 0.08),
              0 18px 36px -8px rgba(2, 58, 81, 0.14);
}
.wz-card-tilt:focus-visible {
  transform: perspective(1000px) rotateX(2deg) translateY(-4px);
}

/* ─── 3. .wz-reveal-confident ──────────────────────────────────────
   Reveal-on-scroll with intent. Y-translate 24px → 0, opacity 0 → 1,
   eased with subtle overshoot (cubic-bezier(0.16, 1, 0.3, 1) = entrance).
   Stagger via [data-d="N"] — N is the step (0..6), each step adds 60ms.
   Pairs with base.html IntersectionObserver toggling .is-visible.
   ────────────────────────────────────────────────────────────────── */
.wz-reveal-confident {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--dur-emphasis) var(--ease-entrance),
              transform var(--dur-emphasis) var(--ease-entrance);
  transition-delay: 0ms;
}
.wz-reveal-confident.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.wz-reveal-confident[data-d="1"] { transition-delay: 60ms; }
.wz-reveal-confident[data-d="2"] { transition-delay: 120ms; }
.wz-reveal-confident[data-d="3"] { transition-delay: 180ms; }
.wz-reveal-confident[data-d="4"] { transition-delay: 240ms; }
.wz-reveal-confident[data-d="5"] { transition-delay: 300ms; }
.wz-reveal-confident[data-d="6"] { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  .wz-reveal-confident,
  .wz-reveal-confident.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─── 4. .wz-ticker ────────────────────────────────────────────────
   Number ticker — count-up feel without rAF. Uses scroll-driven
   animation-timeline: view() where supported, else a clean fade-rise.
   Wrap the numeral only: <span class="wz-ticker">12,400</span>+ ee
   The 800ms total includes a slight upward slide so the digits feel
   like they're settling into place. Thousands separators stay static.
   ────────────────────────────────────────────────────────────────── */
@keyframes wz-ticker-settle {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    letter-spacing: -0.02em;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    letter-spacing: -0.04em;
  }
}
.wz-ticker {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  animation: wz-ticker-settle 0.8s var(--ease-entrance) both;
  animation-play-state: paused;
}
.wz-ticker.is-visible,
.is-visible .wz-ticker {
  animation-play-state: running;
}
/* Modern scroll-driven variant — only fires where view() is supported.
   Falls back silently to the IntersectionObserver-driven version. */
@supports (animation-timeline: view()) {
  .wz-ticker {
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
    animation-play-state: running;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wz-ticker { animation: none; }
}

/* ─── 5. .wz-shimmer ───────────────────────────────────────────────
   Skeleton/loading shimmer. 1.6s loop, eased. Repeating linear-gradient
   moved via background-position — no transform churn, no rAF, GPU-cheap.
   Use on placeholder blocks with known dimensions. Pause off-screen via
   .is-paused class (toggled by the same IntersectionObserver as reveals).
   ────────────────────────────────────────────────────────────────── */
@keyframes wz-shimmer-sweep {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.wz-shimmer {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-tint-warm);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: -200% 0;
  animation: wz-shimmer-sweep 1.6s var(--ease) infinite;
  border-radius: var(--r-md);
  color: transparent;
}
.wz-shimmer.is-paused,
.wz-shimmer[hidden] {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .wz-shimmer { animation: none; background-image: none; }
}

/* ━━━ END SIGNATURE MOTION ATOMS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── End scratch.css ─────────────────────────────────────────── */