/* v16 — Hero: larger, better-placed type and restrained motion. */
@media (min-width: 1001px) {
  .hero-copy { width: 660px !important; max-width: 50% !important; margin-left: clamp(0px, 4.2vw, 72px); }
  .hero-brand .hb-0 { font-size: 13px; margin-bottom: 20px; }
  .hero-brand .hb-1 { font-size: clamp(64px, 5.7vw, 84px) !important; }
  .hero-brand .hb-2 { font-size: clamp(25px, 2.15vw, 32px) !important; margin-top: 16px !important; }
  .hero-copy > p.hero-lede { font-size: clamp(19px, 1.5vw, 22px) !important; }
  .hero-copy > p.hb-4 { font-size: clamp(15px, 1.15vw, 17px) !important; line-height: 1.6; max-width: 470px; }
  .hero .actions .primary { font-size: 15px; padding: 16px 26px; min-height: 54px; }
  .hero .actions .text-link { font-size: 15px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .hero-brand .hb-1 { font-size: 58px !important; }
  .hero-brand .hb-2 { font-size: 24px !important; }
}
@media (max-width: 700px) {
  .hero-brand .hb-1 { font-size: clamp(48px, 13vw, 56px) !important; }
  .hero-brand .hb-2 { font-size: clamp(23px, 6.3vw, 26px) !important; }
  .hero-copy > p.hero-lede { font-size: 18px !important; }
}

/* Motion 1 — a single light sweep across the italic wordmark after it settles, repeating slowly. */
html.mo .hero-brand .hb-1, html.mo .hero-brand .hb-1 > span {
  background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 300% 100%; background-position: 100% 0;
}
html.mo .hero-brand .hb-1 { background-image: linear-gradient(100deg, var(--text) 42%, #ffffff 50%, var(--text) 58%); }
html.mo .hero-brand .hb-1 > span { background-image: linear-gradient(100deg, var(--emerald) 42%, #8ff2c4 50%, var(--emerald) 58%); }
html.mo .hero-brand .hb-1, html.mo .hero-brand .hb-1 > span { animation: mo-rise 1.1s var(--ease-out) .12s both, v16-sheen 9s cubic-bezier(.45,0,.2,1) 1.6s infinite; }
html.mo .hero-brand .hb-1 > span { animation: v16-sheen 9s cubic-bezier(.45,0,.2,1) 1.6s infinite; }
@keyframes v16-sheen { 0% { background-position: 100% 0; } 16%, 100% { background-position: 0% 0; } }

/* Motion 2 — the emerald rule draws in after the lockup lands. */
html.mo .hero-copy h1.hero-brand::after { transform-origin: left; animation: v16-draw 1.1s cubic-bezier(.2,.7,.2,1) .7s both; }
@keyframes v16-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* Motion 3 — depth: the still life drifts gently against the cursor (set in v16.js). */
.hero-art .hero-canvas, .hero-art .hero-phone { transition: translate 1.1s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  html.mo .hero-brand .hb-1, html.mo .hero-brand .hb-1 > span, html.mo .hero-copy h1.hero-brand::after { animation: none !important; }
  .hero-art .hero-canvas, .hero-art .hero-phone { transition: none; translate: none !important; }
}
html.motion-paused .hero-brand .hb-1, html.motion-paused .hero-brand .hb-1 > span, html.motion-paused .hero-copy h1.hero-brand::after { animation: none !important; }
html.motion-paused .hero-art .hero-canvas, html.motion-paused .hero-art .hero-phone { translate: none !important; }