/* Homepage motion: "the sprout grows" hero + scroll reveals.
   Base styles are the finished state; keyframes animate *from* the start state,
   so with reduced motion (or no animation support) visitors see the grown sprout. */

/* ---------- Hero stage ---------- */
.sprout-stage { position: relative; text-align: center; }
.sprout-stage svg { width: min(420px, 100%); height: auto; display: block; margin: 0 auto; overflow: visible; cursor: pointer; }
.sprout-stage .caption { margin-top: 4px; }
.sprout-stage .caption strong { display: block; font-size: 22px; font-weight: 900; color: var(--green); }
.sprout-stage .caption span { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-mid); }
.sprout-stage .replay { margin-top: 10px; background: none; border: 2px solid var(--line); border-radius: 99px; padding: 6px 14px; font: 800 13px var(--font); color: var(--stone-mid); cursor: pointer; }

.sprout-stage .stem,
.sprout-stage .root { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sprout-stage .plant { transform-box: view-box; transform-origin: 200px 300px; }
.sprout-stage .leaf-l { transform-box: fill-box; transform-origin: 100% 100%; }
.sprout-stage .leaf-r { transform-box: fill-box; transform-origin: 0% 100%; }
.sprout-stage .bud, .sprout-stage .spark { transform-box: fill-box; transform-origin: 50% 50%; }
.sprout-stage .husk-l { transform-box: fill-box; transform-origin: 100% 100%; transform: rotate(-22deg) translateX(-3px); }
.sprout-stage .husk-r { transform-box: fill-box; transform-origin: 0% 100%; transform: rotate(22deg) translateX(3px); }
.sprout-stage .spark { opacity: 0; }
/* Waiting to scroll into view: hide everything that will animate in. */
.sprout-stage.armed .seed, .sprout-stage.armed .plant, .sprout-stage.armed .root, .sprout-stage.armed .sun, .sprout-stage.armed .caption { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .sprout-stage.play .sun     { animation: sp-sun .9s .1s cubic-bezier(.2,.8,.2,1) both; }
  .sprout-stage.play .seed    { animation: sp-fall .8s 0s cubic-bezier(.5,0,.75,0) both; }
  .sprout-stage.play .husk-l  { animation: sp-crack-l .35s .85s ease-out both; }
  .sprout-stage.play .husk-r  { animation: sp-crack-r .35s .85s ease-out both; }
  .sprout-stage.play .root    { animation: sp-draw .7s .95s ease-out both; }
  .sprout-stage.play .root:nth-of-type(2) { animation-delay: 1.05s; }
  .sprout-stage.play .root:nth-of-type(3) { animation-delay: 1.15s; }
  .sprout-stage.play .stem    { animation: sp-draw .85s 1.05s cubic-bezier(.3,.7,.3,1) both; }
  .sprout-stage.play .leaf-l  { animation: sp-leaf-l .65s 1.7s cubic-bezier(.34,1.56,.64,1) both; }
  .sprout-stage.play .leaf-r  { animation: sp-leaf-r .65s 1.95s cubic-bezier(.34,1.56,.64,1) both; }
  .sprout-stage.play .bud     { animation: sp-bloom .6s 2.45s cubic-bezier(.34,1.56,.64,1) both; }
  .sprout-stage.play .spark   { animation: sp-twinkle 1.1s 2.8s ease-out both; }
  .sprout-stage.play .spark:nth-of-type(2) { animation-delay: 2.95s; }
  .sprout-stage.play .spark:nth-of-type(3) { animation-delay: 3.1s; }
  .sprout-stage.play .caption { animation: sp-rise .6s 2.9s ease-out both; }
  .sprout-stage .plant { animation: sp-sway 5s 3.5s ease-in-out infinite alternate; }
  .sprout-stage.paused .plant { animation-play-state: paused; }
}

@keyframes sp-sun     { from { opacity: 0; transform: translateY(26px); } }
@keyframes sp-fall    { 0% { transform: translateY(-250px); opacity: 0; } 15% { opacity: 1; }
                        70% { transform: translateY(0); } 82% { transform: translateY(-9px); }
                        100% { transform: translateY(0); } }
@keyframes sp-crack-l { from { transform: none; } }
@keyframes sp-crack-r { from { transform: none; } }
@keyframes sp-draw    { 0% { stroke-dashoffset: 1; opacity: 0; } 6% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes sp-leaf-l  { from { transform: scale(0) rotate(35deg); } }
@keyframes sp-leaf-r  { from { transform: scale(0) rotate(-35deg); } }
@keyframes sp-bloom   { from { transform: scale(0) rotate(-90deg); } }
@keyframes sp-twinkle { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.15); }
                        100% { opacity: 0; transform: scale(.6); } }
@keyframes sp-rise    { from { opacity: 0; transform: translateY(10px); } }
@keyframes sp-sway    { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

/* ---------- Scroll reveals (enabled by motion.js only) ---------- */
.js-motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js-motion .reveal.in { opacity: 1; transform: none; }

/* ---------- Small hover touches ---------- */
.card img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:hover img { transform: scale(1.05); }
.card .more { display: inline-block; transition: transform .2s; }
.card:hover .more { transform: translateX(4px); }
.banner .box { position: relative; overflow: hidden; }
.banner .box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .banner .box::after { animation: sp-sheen 7s 2s ease-in-out infinite; }
}
@keyframes sp-sheen { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  .card img, .card .more { transition: none; }
}

/* ---------- Full-screen sprout hero (animation only) ---------- */
.hero-full { position: relative; overflow: hidden; padding: 0; min-height: calc(100vh - 108px); min-height: calc(100svh - 108px);
  background: linear-gradient(180deg, #FFFBF2 0%, #F3FBF5 55%, #E8F7EE 100%); }
.hero-full .scene { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.hero-full .scroll-cue { position: absolute; z-index: 3; right: 22px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--green); font-size: 22px; font-weight: 900; text-decoration: none; box-shadow: var(--shadow); }

/* Scene positions in SVG user units (viewBox 1600x700, sprout centred at x=800). */
.hero-full .big-sprout { transform: translate(280px, -208px) scale(2.6); }
.hero-full .sun-pos { transform: translate(1150px, 170px); }
.hero-full .plant, .hero-full .mini { transform-box: fill-box; transform-origin: 50% 100%; }
.hero-full .cloud { transform-box: fill-box; }

@media (max-width: 900px), (max-aspect-ratio: 5/4) {
  .hero-full { min-height: calc(100vh - 124px); min-height: calc(100svh - 124px); }
  .hero-full .big-sprout { transform: translate(360px, -88px) scale(2.2); }
  .hero-full .sun-pos { transform: translate(945px, 190px) scale(.7); }
}

/* Intro (headline + buttons) right below the hero */
.intro { padding: 64px 0 56px; background: #E8F7EE; }
.intro h1 { font-size: clamp(36px, 5.4vw, 64px); margin-bottom: 10px; }
.intro h1 .accent { color: var(--green); display: block; }
.intro .tagline { font-size: clamp(20px, 2.4vw, 28px); font-weight: 900; color: var(--green-mid); margin: 0 0 10px; }
.intro .lead { margin: 0 auto; }
.intro .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.intro .pill-date { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 7px 14px; font-size: 14px; font-weight: 800; color: var(--green); box-shadow: var(--shadow); margin-bottom: 18px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-full .cloud { animation: sp-drift 14s ease-in-out infinite alternate; }
  .hero-full .cloud:nth-of-type(2) { animation-duration: 18s; animation-delay: -6s; }
  .hero-full .cloud:nth-of-type(3) { animation-duration: 22s; animation-delay: -11s; }
  .hero-full.play .mini { animation: sp-bloom .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay: 3.1s; }
  .hero-full.play .mini:nth-of-type(2) { animation-delay: 3.3s; }
  .hero-full.play .mini:nth-of-type(3) { animation-delay: 3.5s; }
  .hero-full .scroll-cue { animation: sp-bob 2.2s 3.8s ease-in-out infinite; }
}
.hero-full.armed .mini { opacity: 0; }
@keyframes sp-drift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
@keyframes sp-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }