/* Dream Home — motion support. Content is visible by default; motion.js (GSAP) adds the choreography.
   Rules: no autoplay loops, no bounce; UI state transitions stay 150–200ms (DS); entrance choreography ≤ 1s.
   prefers-reduced-motion → everything off. */

/* Cross-document page transitions (progressive enhancement; ignored where unsupported / on file://) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms ease both vt-out; }
::view-transition-new(root) { animation: 320ms ease both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Word-split headings (words, never letters — Arabic letters must stay joined) */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .08em; margin-block: -.08em; }
[data-split] .wi { display: inline-block; will-change: transform; }

/* Page-hero geometric art (colours for a brand-deep band) */
.page-hero-art .art-brand { fill: var(--brand); }
:root[data-theme="dark"] .page-hero-art .art-brand { fill: #3a52b8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page-hero-art .art-brand { fill: #3a52b8; } }
.page-hero-art .art-deep { fill: color-mix(in srgb, var(--on-deep) 12%, transparent); }
.page-hero-art .art-cut { fill: var(--brand-deep); }
.page-hero-art .art-sand { fill: var(--sand); }
.page-hero-art .art-sandsoft { fill: color-mix(in srgb, var(--sand) 45%, transparent); }

/* Statband edge is built by clip-path in motion.js */
.dh-statband-edge { will-change: clip-path; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}