.grow {
  min-height: 1400svh;
  background: #fffcf7;
}
.grow-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.grow-stage {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,236,196,.55), transparent 42%),
    linear-gradient(180deg, #fff8ee 0%, #fffcf7 46%, #f3ead8 100%);
}
.grow-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(196,164,106,.16) 70%, rgba(90,70,40,.08));
}
.grow-message {
  position: absolute;
  top: 10%;
  left: 24px;
  right: 24px;
  z-index: 5;
  margin: 0 auto;
  max-width: 340px;
  opacity: 0;
  transform: translateY(8px);
  color: #594a34;
  text-align: center;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.85;
  letter-spacing: .06em;
  text-shadow: 0 0 18px rgba(255,250,240,.95);
  transition: opacity .55s ease, transform .7s ease;
  pointer-events: none;
}
.grow-message p {
  margin: 0;
}
.grow-message-note {
  margin-top: 18px !important;
  color: #776850;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .04em;
}
.grow-gifts {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.grow-gift {
  position: absolute;
  left: 50%;
  top: 66%;
  display: grid;
  justify-items: center;
  gap: 9px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  transition: left .75s ease, top .75s ease, opacity .6s ease, transform .75s ease;
}
.grow-gift i {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 15%, var(--gift-core) 32%, var(--gift-soft) 58%, transparent 74%);
  box-shadow: 0 0 16px 4px var(--gift-glow);
}
.grow-gift b {
  width: 92px;
  color: #776850;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(255,252,247,.95);
  transition: opacity .45s ease;
}
.grow-gift-drop {
  --gift-core: #bfe7ed;
  --gift-soft: rgba(136,205,219,.45);
  --gift-glow: rgba(142,213,226,.58);
}
.grow-gift-wind {
  --gift-core: #d9ead7;
  --gift-soft: rgba(177,213,175,.42);
  --gift-glow: rgba(176,215,176,.58);
}
.grow-gift-hope {
  --gift-core: #f5d67a;
  --gift-soft: rgba(240,198,89,.45);
  --gift-glow: rgba(241,202,102,.64);
}
.grow-embrace {
  position: absolute;
  left: 50%;
  top: 77%;
  z-index: 3;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  background: radial-gradient(circle, rgba(255,248,218,.68), rgba(232,196,110,.2) 44%, transparent 70%);
  border: 1px solid rgba(225,186,95,.28);
  box-shadow: 0 0 42px 8px rgba(232,196,110,.2);
  transition: opacity .7s ease, transform .85s ease;
  pointer-events: none;
}
.grow-ghost {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(58vw, 240px);
  height: min(58vw, 240px);
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
}
.grow-ghost img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(.9) brightness(1.05);
}
.grow-light {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 3;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,244,210,.98), rgba(232,196,110,.15) 62%, transparent 74%);
  box-shadow: 0 0 22px rgba(255,220,150,.55);
  transition: left .9s ease, top .9s ease, opacity .7s ease, transform .9s ease, width .9s ease, height .9s ease;
}
.grow-plant {
  position: absolute;
  left: 50%;
  bottom: 16%;
  z-index: 2;
  width: min(72vw, 320px);
  height: 62vh;
  transform: translateX(-50%);
  pointer-events: none;
}
.grow-plant img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  transform: translateX(-50%) scale(.92);
  opacity: 0;
  transition: opacity .55s ease, transform .7s ease;
}
.grow-word {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 4;
  margin: 0;
  transform: translateX(-50%);
  opacity: 0;
  font-family: var(--serif);
  font-size: 16px;
  letter-spacing: .22em;
  color: #6d5a38;
  text-shadow: 0 0 16px rgba(255,250,240,.9);
  transition: opacity .4s ease;
  pointer-events: none;
}

.grow-stage[data-grow="0"] .grow-ghost {
  opacity: .42;
  transform: translate(-50%, -50%) scale(.96);
}
.grow-stage[data-grow="0"] .grow-light {
  opacity: 1;
  left: 42%;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%) scale(1.25);
  background: radial-gradient(circle, #fff9df 0 18%, #f4cf72 34%, rgba(232,196,110,.4) 56%, transparent 74%);
  box-shadow: 0 0 16px 5px rgba(255,221,145,.85), 0 0 38px rgba(255,220,150,.95);
}
.grow-stage[data-grow="0"] .grow-message-intro,
.grow-stage[data-grow="2"] .grow-message-seed,
.grow-stage[data-grow="3"] .grow-message-kindness,
.grow-stage[data-grow="6"] .grow-message-ready,
.grow-stage[data-grow="8"] .grow-message-grown,
.grow-stage[data-grow="13"] .grow-message-bloom {
  opacity: 1;
  transform: none;
}

.grow-stage[data-grow="1"] .grow-ghost {
  opacity: 0;
  transform: translate(-50%, -42%) scale(.9);
}
.grow-stage[data-grow="1"] .grow-light {
  opacity: 1;
  top: 68%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%) scale(1.15);
}

.grow-stage[data-grow="2"] .grow-light {
  opacity: 0;
  top: 78%;
}
.grow-stage[data-grow="2"] .grow-plant img[data-stage="seed"],
.grow-stage[data-grow="3"] .grow-plant img[data-stage="seed"],
.grow-stage[data-grow="4"] .grow-plant img[data-stage="seed"],
.grow-stage[data-grow="5"] .grow-plant img[data-stage="seed"],
.grow-stage[data-grow="6"] .grow-plant img[data-stage="seed"],
.grow-stage[data-grow="7"] .grow-plant img[data-stage="seed"] {
  opacity: 1;
  width: 38%;
  max-height: 22vh;
  transform: translateX(-50%) scale(1);
}
.grow-stage[data-grow="2"] .grow-word[data-word="seed"],
.grow-stage[data-grow="3"] .grow-word[data-word="seed"],
.grow-stage[data-grow="4"] .grow-word[data-word="seed"],
.grow-stage[data-grow="5"] .grow-word[data-word="seed"],
.grow-stage[data-grow="6"] .grow-word[data-word="seed"],
.grow-stage[data-grow="7"] .grow-word[data-word="seed"] { opacity: .95; }

.grow-stage[data-grow="4"] .grow-gift-drop {
  left: 31%;
  top: 62%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.grow-stage[data-grow="5"] .grow-gift-drop,
.grow-stage[data-grow="6"] .grow-gift-drop {
  left: 31%;
  top: 62%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.grow-stage[data-grow="5"] .grow-gift-wind,
.grow-stage[data-grow="6"] .grow-gift-wind {
  left: 69%;
  top: 62%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.grow-stage[data-grow="6"] .grow-gift-hope {
  left: 50%;
  top: 52%;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.grow-stage[data-grow="7"] .grow-gift {
  left: 50%;
  top: 77%;
  opacity: .88;
  transform: translate(-50%, -50%) scale(1.7);
}
.grow-stage[data-grow="7"] .grow-gift b {
  opacity: 0;
}
.grow-stage[data-grow="7"] .grow-embrace {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.grow-stage[data-grow="8"] .grow-plant img[data-stage="sprout"] {
  opacity: 1;
  width: 48%;
  max-height: 34vh;
  transform: translateX(-50%) scale(1);
}
.grow-stage[data-grow="8"] .grow-word[data-word="sprout"] { opacity: .95; }

.grow-stage[data-grow="9"] .grow-plant img[data-stage="cotyledon"] {
  opacity: 1;
  width: 56%;
  max-height: 38vh;
  transform: translateX(-50%) scale(1);
}
.grow-stage[data-grow="9"] .grow-word[data-word="cotyledon"] { opacity: .95; }

.grow-stage[data-grow="10"] .grow-plant img[data-stage="growing"] {
  opacity: 1;
  width: 68%;
  max-height: 48vh;
  transform: translateX(-50%) scale(1);
}
.grow-stage[data-grow="10"] .grow-word[data-word="growing"] { opacity: .95; }

.grow-stage[data-grow="11"] .grow-plant img[data-stage="bud"] {
  opacity: 1;
  width: 86%;
  max-height: 56vh;
  transform: translateX(-50%) scale(1);
}
.grow-stage[data-grow="11"] .grow-word[data-word="bud"] { opacity: .95; }

.grow-stage[data-grow="12"] .grow-plant img[data-stage="bloom"],
.grow-stage[data-grow="13"] .grow-plant img[data-stage="bloom"] {
  opacity: 1;
  width: 100%;
  max-height: 62vh;
  transform: translateX(-50%) scale(1);
}
.grow-stage[data-grow="12"] .grow-word[data-word="bloom"] { opacity: .95; }
.grow-stage[data-grow="12"],
.grow-stage[data-grow="13"] {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,228,170,.5), transparent 46%),
    linear-gradient(180deg, #fff6e8 0%, #fffcf7 52%, #f4ead6 100%);
}
.grow-stage[data-grow="13"] .grow-plant {
  bottom: 7%;
}
.grow-stage[data-grow="13"] .grow-plant img[data-stage="bloom"] {
  max-height: 50vh;
}

@media (min-width: 900px) {
  .grow-ghost { width: 220px; }
  .grow-plant { width: min(28vw, 360px); bottom: 14%; }
  .grow-word { font-size: 18px; }
  .grow-gift b { font-size: 14px; }
  .grow-message { max-width: 460px; font-size: 28px; }
  .grow-message-note { font-size: 16px; }
}
@media (max-width: 430px) {
  .grow-word { font-size: 15px; }
  .grow-message { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .grow-message,
  .grow-ghost,
  .grow-light,
  .grow-gift,
  .grow-gift b,
  .grow-embrace,
  .grow-plant img,
  .grow-word {
    transition: none;
  }
}