/* ============================================================
   Saathi Foundation — motion layer
   Gentle, hand-made motion: a seedling intro, polaroids placed on
   the table, drifting leaves, and a pinned deck of field stories.
   Progressive — style.css alone renders the full site.
   ============================================================ */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.has-motion .fade { opacity: 1; transform: none; transition: none; }
.has-motion .ph { animation: none; }
.has-motion .draw path { animation: none; }

/* ---------- seedling intro ---------- */
.preloader { display: none; }
.has-motion .preloader { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: .6rem; background: var(--forest); cursor: pointer; }
.seed { width: 120px; height: 160px; overflow: visible; }
.seed path { fill: none; stroke: var(--sun); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.seed .soil { stroke: #cfe0d6; stroke-width: 3; }
.seed .leaf { fill: var(--sun); stroke: none; }
.leaf-l { transform-origin: 60px 92px; }
.leaf-r { transform-origin: 61px 74px; }
.pl-word { font-family: var(--hand); font-size: 3rem; color: var(--paper); line-height: 1; }

/* ---------- drifting leaves ---------- */
.leaves { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.leaves i { position: absolute; top: -40px; width: 18px; height: 18px; border-radius: 0 70% 0 70%; background: var(--sun); }
.leaves i:nth-child(3n) { background: #8fbf9f; }
.leaves i:nth-child(4n) { background: var(--coral); width: 14px; height: 14px; }

/* ---------- stories as a pinned deck (desktop) ---------- */
@media (min-width: 901px) {
  .has-motion .stories { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .has-motion .story-rail { position: relative; display: block; height: 380px; overflow: visible; padding: 0; margin: 0; }
  .has-motion .story { position: absolute; left: 50%; top: 0; width: 440px; margin-left: -220px; transform: none; box-shadow: 0 20px 50px rgba(23,64,47,.12); }
  .has-motion .story:hover { transform: none; }
  .has-motion .story { transition: box-shadow .5s; }
}
.deck-hint { font-family: var(--hand); font-size: 1.4rem; color: var(--coral); text-align: center; margin-top: 1rem; }

/* ---------- hearts + plane ---------- */
.heart { position: fixed; z-index: 120; pointer-events: none; font-size: 1.6rem; }
.plane { display: inline-block; margin-left: .3rem; }
.news-form .btn { overflow: visible; white-space: nowrap; }

.split-word { will-change: transform; }

/* give masked hero lines room for the hand-drawn underline */
.has-motion .hero h1 > div { padding-bottom: .22em; margin-bottom: -.22em; }

/* nothing in the page should cause sideways scrolling */
main { overflow-x: clip; }