/* Premium motion layer. Transform/opacity only; no layout shift. */
:root { --ease-out: cubic-bezier(.16,1,.3,1); }

/* Hero brand typography */
.hero-brand { display: block; letter-spacing: -.045em; }
.hero-brand .hb-1 { display: block; font: 400 clamp(64px, 8.4vw, 132px)/.92 var(--serif); letter-spacing: -.055em; }
.hero-brand .hb-2 { display: block; margin-top: 18px; font: 400 clamp(26px, 2.5vw, 38px)/1.15 var(--serif); letter-spacing: -.025em; color: #d9dfdb; }
.hero-brand .hb-2 em { color: var(--emerald); }
.hero-lede { margin-top: 26px !important; font: 400 19px/1.4 var(--serif) !important; letter-spacing: -.01em; color: #c9d1cc !important; }
.hero-lede span { color: var(--emerald); }
.hero-copy .hb-4 { margin-top: 10px !important; font-size: 15px !important; }
@media (max-width:700px) {
  .hero-brand .hb-1 { font-size: clamp(56px, 17vw, 76px); }
  .hero-brand .hb-2 { font-size: clamp(24px, 6.8vw, 30px); margin-top: 12px; }
  .hero-lede { font-size: 17px !important; margin-top: 20px !important; }
}

/* Staggered hero reveal (only when JS motion is on) */
@keyframes mo-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mo-art { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
html.mo .hb-line { animation: mo-rise 1s var(--ease-out) both; }
html.mo .hb-1 { animation-delay: .08s; animation-duration: 1.2s; }
html.mo .hb-2 { animation-delay: .26s; }
html.mo .hb-3 { animation-delay: .42s; }
html.mo .hb-4 { animation-delay: .54s; }
html.mo .hb-5 { animation-delay: .66s; }
html.mo .hero-canvas { animation: mo-art 1.8s var(--ease-out) both; }
html.mo .hero-foot { animation: mo-rise 1s var(--ease-out) .9s both; }

/* Ambient: hero art drifts with scroll; section art parallax via `translate`. */
.hero-art, .scene:not(.hero) > .scenery img { will-change: translate; }

/* Scroll reveals */
html.mo [data-mo] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--mo-d, 0s); }
html.mo [data-mo].is-in { opacity: 1; transform: none; }

/* Hover / press states */
.primary { transition: background .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.primary:hover { transform: translateY(-2px); }
.primary:active, .controls button:active, .ai-metrics button:active { transform: scale(.98); transition-duration: .08s; }
.controls button, .ai-metrics button { transition: color .25s var(--ease-out), border-color .25s var(--ease-out), transform .2s var(--ease-out); }
.site-header nav a, .site-footer nav a { transition: color .25s var(--ease-out), opacity .25s; }

/* Reduced motion / paused: everything static and visible */
@media (prefers-reduced-motion: reduce) {
  html.mo .hb-line, html.mo .hero-canvas, html.mo .hero-foot { animation: none; }
  html.mo [data-mo] { opacity: 1; transform: none; transition: none; }
  .hero-art, .scenery img { translate: none !important; }
}
html.motion-paused .hb-line, html.motion-paused .hero-canvas, html.motion-paused .hero-foot { animation: none; }
html.motion-paused [data-mo] { opacity: 1; transform: none; transition: none; }
html.motion-paused .hero-art, html.motion-paused .scenery img { translate: none !important; }
.hero-brand .hb-1 { color: var(--text); }
.hero-brand .hb-1 > span { color: var(--emerald); }
.hero-brand .hb-2 { color: #d9dfdb; }
@media (max-width:700px) {
  .hero-copy { padding-top: 28px !important; }
  .hero-copy .hb-4 { font-size: 14px !important; }
  .hero .actions { margin-top: 20px !important; }
  .hero-art { flex: 1 0 400px !important; min-height: 400px !important; margin-top: 0; }
  .hero-art .hero-canvas { top: auto !important; bottom: -14% !important; transform: none !important; }
  html.mo .hero-art .hero-canvas { animation-name: mo-fade; }
}
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width:700px) {
}
/* v3: editorial italic masthead */
.hero-brand .hb-0 { display: block; font: 500 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.hero-brand .hb-1 { font: italic 400 clamp(56px, 5vw, 72px)/1 var(--serif); letter-spacing: -.02em; font-weight: 300; }
.hero-brand .hb-2 { margin-top: 14px; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.012em; }
.hero-lede { margin-top: 22px !important; font-size: 18px !important; }
html.mo .hb-0 { animation-delay: 0s; }
html.mo .hb-1 { animation-delay: .12s; animation-duration: 1.1s; }
@media (max-width:700px) {
  .hero-brand .hb-0 { font-size: 11px; letter-spacing: .28em; margin-bottom: 12px; }
  .hero-brand .hb-1 { font-size: 44px; }
  .hero-brand .hb-2 { font-size: 22px; margin-top: 10px; }
  .hero-lede { font-size: 16px !important; margin-top: 16px !important; }
  .hero-copy { padding-top: 22px !important; }
  .hero-art { flex: 1 0 360px !important; min-height: 360px !important; }
  .phone-note { margin-bottom: 10px !important; }
}
/* v4: centered chapter headers (non-hero) */
.scene:not(.hero) .chapter-heading { display: block !important; text-align: center !important; max-width: 860px; margin-inline: auto !important; }
.scene:not(.hero) .chapter-heading > .wordmark { display: block; margin-inline: auto; }
.scene:not(.hero) .chapter-heading h2 { margin-inline: auto !important; max-width: 820px; }
.scene:not(.hero) .chapter-heading > p { margin: 18px auto 0 !important; max-width: 560px; }
.scene:not(.hero) .controls { justify-content: center; width: max-content; max-width: 100%; margin-inline: auto !important; }
@media (max-width:700px) { .scene:not(.hero) .controls { width: 100%; } }
@media (min-width:701px){ .scene:not(.hero) .controls button:first-child { padding-left: 20px; padding-right: 20px; } }