/* Restrained motion: a slow reveal, small botanical drift, and a brief mist cue. */
html.js-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .7s var(--ease); }
html.js-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
html.js-ready .value-card:nth-child(2), html.js-ready .family-tile:nth-child(2), html.js-ready .pillar-card:nth-child(2) { transition-delay: .07s; }
html.js-ready .value-card:nth-child(3), html.js-ready .family-tile:nth-child(3), html.js-ready .pillar-card:nth-child(3) { transition-delay: .14s; }
html.js-ready .family-tile:nth-child(4), html.js-ready .family-tile:nth-child(5), html.js-ready .family-tile:nth-child(6) { transition-delay: .1s; }
.hero__note { animation: note-drift 6s ease-in-out infinite alternate; }
.hero__note--bottom { animation-delay: -2.5s; }
@keyframes note-drift { from { transform: translateY(0); } to { transform: translateY(-5px); } }
.mist-particle { position: absolute; z-index: 6; left: var(--mist-x); top: var(--mist-y); width: var(--mist-size); height: var(--mist-size); border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.92), rgba(255,255,255,.2) 65%, rgba(255,255,255,0)); box-shadow: 0 0 8px rgba(255,255,255,.34); opacity: 0; pointer-events: none; animation: mist-release 780ms ease-out forwards; }
@keyframes mist-release {
  0% { opacity: 0; transform: translate3d(0, 3px, 0) scale(.35); }
  18% { opacity: .66; }
  100% { opacity: 0; transform: translate3d(var(--mist-dx), var(--mist-dy), 0) scale(1.35); }
}
.button[data-mist] { isolation: isolate; }
.button[data-mist] > span:not(.mist-particle), .button[data-mist] > svg { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.js-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
}
