/* Hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(60% 70% at 78% 30%,var(--sun-soft),transparent 70%),linear-gradient(180deg,var(--surface),var(--sky) 70%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:end;padding-top:clamp(28px,5vw,64px)}
.hero-copy{padding-bottom:clamp(28px,5vw,72px);min-width:0;position:relative;z-index:2}
.hero h1{font-size:var(--step-3);font-weight:800;margin:14px 0 18px}
.hero h1 em{font-style:normal;color:var(--leaf);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--sun);border-radius:4px;transform-origin:left;animation:underline 1s .9s both cubic-bezier(.2,.8,.2,1);z-index:-1}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lede{font-size:var(--step-1);line-height:1.4;color:var(--muted);max-width:30ch}
.verse{margin-top:20px;max-width:46ch;font-style:italic;color:var(--muted);border-left:3px solid var(--sun);padding-left:14px}
.verse cite{display:block;font-style:normal;font-weight:600;font-size:var(--step--1);color:var(--ink);margin-top:4px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;padding:13px 20px;border-radius:999px;border:2px solid var(--ink);transition:transform .2s,background .2s,color .2s;font-family:inherit;font-size:1rem;cursor:pointer;background:transparent;color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--leaf);border-color:var(--leaf);color:var(--on-accent);box-shadow:0 10px 24px -12px var(--leaf)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--sky)}
.btn svg{width:18px;height:18px}

.next{margin-top:26px;display:inline-flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 18px 8px 10px;max-width:100%}
.pulse{width:12px;height:12px;border-radius:50%;background:var(--leaf);flex:none;box-shadow:0 0 0 0 color-mix(in srgb,var(--leaf) 60%,transparent);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.next span{font-size:.95rem;min-width:0}
.next strong{font-weight:600}
/* The live-updating frame around the status text adds no box of its own. */
.next-text{display:contents}

.scene{position:relative;min-width:0;align-self:stretch;display:flex;align-items:flex-end}
.scene svg{width:100%;height:auto;display:block;max-width:100%;cursor:crosshair;touch-action:manipulation}
.hint{position:absolute;right:8px;bottom:18%;font-size:.8rem;background:color-mix(in srgb,var(--deep) 88%,transparent);padding:4px 10px;border-radius:999px;pointer-events:none;color:#EAF2FF}
.soil-band{height:22px;background:var(--soil);margin-top:-1px;box-shadow:inset 0 -4px 0 var(--silver)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-copy{padding-bottom:0}
  .scene{max-width:520px;justify-self:center;width:100%}
}

/* Sun + plant animation */
.rays{transform-origin:430px 150px;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sunglow{animation:breathe 5s ease-in-out infinite;transform-origin:430px 150px}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}
.stem{stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.8s .35s forwards cubic-bezier(.4,0,.2,1)}
@keyframes draw{to{stroke-dashoffset:0}}
.leaf{transform-box:fill-box;transform:scale(0);animation:grow .9s forwards cubic-bezier(.3,1.5,.5,1)}
.leaf.l1{transform-origin:100% 100%;animation-delay:1.1s}
.leaf.l2{transform-origin:0% 100%;animation-delay:1.4s}
.leaf.l3{transform-origin:100% 100%;animation-delay:1.7s}
.leaf.l4{transform-origin:0% 100%;animation-delay:1.95s}
.grain{transform-box:fill-box;transform-origin:50% 100%;transform:scale(0);animation:grow .7s forwards cubic-bezier(.3,1.5,.5,1)}
@keyframes grow{to{transform:scale(1)}}
.seed-drop{animation:drop 1s cubic-bezier(.5,0,.8,.6) both}
@keyframes drop{from{transform:translateY(-160px);opacity:0}20%{opacity:1}to{transform:translateY(0)}}
.sprout path{stroke-dasharray:80;stroke-dashoffset:80;animation:draw 1s .9s forwards ease-out}
.sprout .sl{transform-box:fill-box;transform:scale(0);animation:grow .6s 1.6s forwards cubic-bezier(.3,1.5,.5,1)}
.sprout .sl.b{transform-origin:0 100%}.sprout .sl.a{transform-origin:100% 100%}
.sway{transform-origin:300px 410px;animation:sway 6s 2.5s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(1.6deg)}}
.grain.g1{animation-delay:2.2s}.grain.g2{animation-delay:2.35s}.grain.g3{animation-delay:2.45s}.grain.g4{animation-delay:2.55s}.grain.g5{animation-delay:2.65s}