:root {
  --bg: #f4efe3;
  --bg-2: #e9e1cc;
  --ink: #1f3a2c;
  --ink-soft: #4f6b5a;
  --leaf: #3f7d4f;
  --leaf-2: #7aa65a;
  --leaf-3: #b9c96b;
  --seal: #b3372b;
  --mist: rgba(255, 255, 255, .55);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1a14;
    --bg-2: #16261d;
    --ink: #e7ecd9;
    --ink-soft: #a9bca6;
    --leaf: #6fb07d;
    --leaf-2: #9cc873;
    --leaf-3: #d3dc86;
    --seal: #d6574a;
    --mist: rgba(20, 40, 30, .5);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 110%, var(--bg-2) 0%, var(--bg) 60%);
  color: var(--ink);
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
}

/* Paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Drifting mist */
.mist {
  position: fixed; left: -50%; width: 200%; height: 40vh;
  background: radial-gradient(ellipse at center, var(--mist) 0%, transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 1;
  animation: drift 38s linear infinite;
}
.mist.m1 { top: 10vh; }
.mist.m2 { bottom: -8vh; animation-duration: 52s; animation-direction: reverse; opacity: .8; }
@keyframes drift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

/* Falling leaves layer */
#leaves { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.leaf {
  position: absolute; top: -40px;
  width: var(--s); height: var(--s);
  animation: fall var(--d) linear var(--delay) infinite;
  will-change: transform;
}
.leaf svg {
  width: 100%; height: 100%;
  animation: sway calc(var(--d) / 4) ease-in-out infinite alternate;
  fill: var(--c);
}
@keyframes fall {
  0%   { transform: translate(0, -5vh) rotate(0deg); opacity: 0; }
  8%   { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translate(var(--x), 110vh) rotate(var(--r)); opacity: 0; }
}
@keyframes sway { from { transform: rotate(-35deg) translateX(-12px); } to { transform: rotate(35deg) translateX(12px); } }

/* Main card */
main {
  position: relative; z-index: 3;
  width: min(620px, 100%);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

/* Plant scene */
.scene { position: relative; width: 220px; height: 220px; }
.scene svg { width: 100%; height: 100%; overflow: visible; }
.pot { fill: var(--ink); opacity: .9; }
.pot-rim { fill: var(--ink-soft); }
.soil { fill: #5a4632; }
.stem {
  fill: none; stroke: var(--leaf); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: grow 2.4s cubic-bezier(.6,.1,.3,1) .3s forwards;
}
.branch {
  fill: none; stroke: var(--leaf); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 80; stroke-dashoffset: 80;
  animation: grow 1.2s ease-out forwards;
}
.b1 { animation-delay: 1.4s; } .b2 { animation-delay: 1.8s; } .b3 { animation-delay: 2.2s; }
@keyframes grow { to { stroke-dashoffset: 0; } }

.pl {
  transform-box: fill-box;
  transform: scale(0);
  animation: pop .8s cubic-bezier(.3,1.6,.5,1) forwards, breathe 4s ease-in-out infinite;
}
.pl.l1 { transform-origin: 100% 100%; animation-delay: 1.9s, 2.7s; fill: var(--leaf); }
.pl.l2 { transform-origin: 0% 100%;   animation-delay: 2.3s, 3.1s; fill: var(--leaf-2); }
.pl.l3 { transform-origin: 100% 100%; animation-delay: 2.7s, 3.5s; fill: var(--leaf-2); }
.pl.l4 { transform-origin: 0% 100%;   animation-delay: 3.0s, 3.8s; fill: var(--leaf); }
.pl.l5 { transform-origin: 50% 100%;  animation-delay: 3.3s, 4.1s; fill: var(--leaf-3); }
@keyframes pop { to { transform: scale(1); } }
@keyframes breathe { 0%,100% { rotate: -3deg; } 50% { rotate: 4deg; } }

.bud {
  fill: var(--seal); transform-box: fill-box; transform-origin: center;
  transform: scale(0);
  animation: pop .6s cubic-bezier(.3,1.8,.5,1) 3.6s forwards, pulse 2.6s ease-in-out 4.2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* Watering can drops */
.drop {
  fill: #6fa8c9; opacity: 0;
  animation: drip 1.8s ease-in infinite;
}
.drop.d2 { animation-delay: .6s; } .drop.d3 { animation-delay: 1.2s; }
@keyframes drip {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .9; }
  80% { opacity: .9; }
  100% { transform: translateY(58px); opacity: 0; }
}
.can { fill: var(--ink-soft); transform-origin: 175px 45px; animation: tilt 3.6s ease-in-out infinite; }
@keyframes tilt { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }

/* Brand */
.brand { display: flex; align-items: center; gap: 16px; opacity: 0; animation: rise 1s ease-out .4s forwards; }
.seal {
  font-family: "Noto Serif SC", serif; font-weight: 900;
  writing-mode: vertical-rl;
  background: var(--seal); color: #fff8ee;
  padding: 8px 6px; border-radius: 6px;
  font-size: 20px; line-height: 1.05; letter-spacing: 2px;
  box-shadow: 0 4px 14px rgba(179, 55, 43, .3);
  transform: rotate(-4deg);
}
h1 {
  font-family: "Playfair Display", serif; font-weight: 600;
  font-size: clamp(34px, 7vw, 52px); letter-spacing: .5px; line-height: 1.1;
}
.domain { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

.msg { opacity: 0; animation: rise 1s ease-out .9s forwards; max-width: 480px; }
.msg h2 { font-family: "Playfair Display", serif; font-style: italic; font-weight: 500; font-size: clamp(20px, 4.2vw, 26px); margin-bottom: 10px; }
.msg p { color: var(--ink-soft); font-weight: 300; line-height: 1.7; font-size: 15.5px; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Progress vine */
.progress { width: min(360px, 100%); opacity: 0; animation: rise 1s ease-out 1.3s forwards; }
.track { position: relative; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.bar {
  position: absolute; inset: 0 auto 0 0; width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--leaf), var(--leaf-2), var(--leaf-3));
  animation: slide 2.2s ease-in-out infinite;
}
@keyframes slide { 0% { left: -40%; } 100% { left: 100%; } }
.status { margin-top: 10px; font-size: 13px; color: var(--ink-soft); min-height: 1.4em; transition: opacity .4s; }

.quote {
  font-family: "Noto Serif SC", serif; font-weight: 600;
  font-size: 14px; color: var(--ink-soft); letter-spacing: 4px;
  opacity: 0; animation: rise 1s ease-out 1.7s forwards;
}
.quote span { display: block; font-family: "Be Vietnam Pro", sans-serif; font-weight: 300; letter-spacing: .5px; font-style: italic; margin-top: 4px; }

@media (max-width: 480px) {
  .scene { width: 170px; height: 170px; }
  main { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  #leaves, .mist { display: none; }
}