:root {
  --paper:        #faf8f3;
  --paper-deep:   #f5f3ee;
  --paper-edge:   #e8e6e1;
  --paper-shade:  #ffffff;
  --ink:          #1c1a14;
  --ink-soft:     #6b6860;
  --sepia:        #8b8880;
  --sepia-soft:   #a0a090;
  --gold:         #5a8b4a;
  --oxblood:      #5a8b4a;
  --oxblood-deep: #4a7b3a;
  --sage:         #5a8b4a;

  --serif-display: 'Fraunces', 'Cormorant Garamond', 'Times New Roman', serif;
  --serif-body:    'Newsreader', 'Georgia', serif;
  --mono:          'JetBrains Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem 3rem;
  position: relative;
  overflow-x: hidden;
}

/* paper grain — disabled for cleaner look */
#paper-grain {
  display: none;
}

/* vignette — disabled for cleaner look */
body::before {
  display: none;
}

/* JOURNAL PAGE */
#journal {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  background: #ffffff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* MASTHEAD */
#masthead {
  text-align: center;
  margin-bottom: 1.5rem;
}
#masthead h1 {
  font-family: var(--serif-display);
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  font-weight: 500;
}
#masthead h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--sage);
}
#masthead .subtitle {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

.ornament {
  display: none;
}

.rule {
  display: none;
}
.rule-thin { display: none; }

/* SPECIMEN CARD */
#specimen-card {
  text-align: center;
  margin: 0 0 1rem;
}

.specimen-header,
.specimen-footer {
  display: none;
}
.specimen-footer {
  margin-top: 1rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--paper-edge);
  color: var(--sepia);
}

#binomial {
  display: none;
}
#common-name {
  display: none;
}

/* VIEWING WINDOW — the live garden */
#window {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
  background: #e8f4e8;
  --ground-grass: #88cc66;
  --ground-stroke: #a3dd83;
  --ground-soil-l: #8b5a3b;
  --ground-soil-r: #a06b48;
}

#sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #bfe4f5 0%, #fde7d4 100%);
  transition: background 1.5s ease;
}

#stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.window-glare {
  display: none;
}

/* ACTION — wax-seal water button */
#action {
  text-align: center;
  margin: 1.5rem 0 1rem;
}

#water-btn {
  font-family: var(--serif-body);
  font-size: 0.95rem;
  background: var(--sage);
  color: #fff;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

#water-btn::before {
  display: none;
}

#water-btn:hover {
  background: var(--oxblood-deep);
}
#water-btn:active {
  background: var(--oxblood-deep);
}
#water-btn:disabled {
  background: #e8e6e1;
  color: var(--ink-soft);
  cursor: default;
}

.action-note {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}
.action-note em {
  font-style: italic;
}

/* HERBARIUM — past specimens */
#herbarium { margin-top: 1.5rem; }

.herb-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.herb-label {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
#counter {
  font-size: 0.8rem;
  color: var(--sepia);
}

.herb-list {
  list-style: none;
  padding: 0;
  margin: 0.7rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.25rem 1.2rem;
}
.herb-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}
.herb-list svg { width: 32px; height: 32px; }
.herb-binomial {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variation-settings: 'opsz' 14;
}
.herb-list li.empty {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--sepia);
  padding: 0.9rem 0;
  border-bottom: none;
  text-align: center;
}

/* PAST NOTES */
#past-notes {
  margin-top: 1.5rem;
}
#notes-counter {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--sepia);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.notes-list {
  list-style: none;
  padding: 0;
  margin: 0.7rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.notes-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.6rem 0;
  border-bottom: 1px dotted var(--paper-edge);
}
.notes-list li.empty {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--sepia);
  padding: 0.9rem 0;
  border-bottom: none;
  text-align: center;
  justify-content: center;
}
.note-icon {
  font-size: 1.1rem;
  color: var(--oxblood);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.note-preview {
  flex: 1;
  min-width: 0;
}
.note-preview-text {
  font-family: var(--serif-body);
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-preview-date {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--sepia);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.2rem;
}

/* Sealed Notes */
.notes-list li.note-sealed {
  opacity: 0.7;
  cursor: default;
}

.notes-list li.note-sealed .note-icon {
  position: relative;
}

.notes-list li.note-sealed .note-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #802422;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.notes-list li.note-sealed .note-preview-text {
  font-style: italic;
  color: var(--sepia);
}

.sealed-count {
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--oxblood);
  margin-left: 0.5rem;
}

/* Garden Age Counter */
.garden-age {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--sepia);
  letter-spacing: 0.12em;
  opacity: 0.6;
  margin: 1rem 0;
}

/* COLOPHON */
#colophon {
  margin-top: 2rem;
  text-align: center;
}
#colophon p {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--sepia);
  margin: 0;
}

/* FLOWER VARIANTS - using CSS custom properties to cascade into SVG <use> shadow content */
.bloom-petal { fill: var(--petal-color, #ec6996); stroke: var(--petal-stroke, none); stroke-width: var(--petal-stroke-width, 0); transition: fill 400ms ease; }
.bloom-center { fill: var(--center-color, #ffd66f); transition: fill 400ms ease; }

[data-variant='pink-rose']      { --petal-color: #ec6996; --center-color: #ffd66f; }
[data-variant='sunflower']      { --petal-color: #f7c33b; --center-color: #6b3f1d; }
[data-variant='tulip-yellow']   { --petal-color: #ffd34d; --center-color: #ff8a3a; }
[data-variant='lavender']       { --petal-color: #b189ff; --center-color: #f3eaff; }
[data-variant='daisy']          { --petal-color: #ffffff; --center-color: #ffd34d; --petal-stroke: #d6d6d6; --petal-stroke-width: 0.6; }
[data-variant='red-rose']       { --petal-color: #a31931; --center-color: #ffd66f; }
[data-variant='cherry-blossom'] { --petal-color: #ffc6d3; --center-color: #ffd66f; }
[data-variant='hibiscus']       { --petal-color: #f25555; --center-color: #ffd34d; }
[data-variant='red-tulip']      { --petal-color: #d32129; --center-color: #1c1a14; }
[data-variant='violet']         { --petal-color: #5e3aa1; --center-color: #ffd66f; }
[data-variant='chamomile']      { --petal-color: #ffffff; --center-color: #ff8a3a; --petal-stroke: #d6d6d6; --petal-stroke-width: 0.6; }
[data-variant='gerbera']        { --petal-color: #ff7043; --center-color: #3a2418; }
[data-variant='forget-me-not']  { --petal-color: #7bb3e3; --center-color: #ffd66f; }
[data-variant='white-rose']     { --petal-color: #fefcf3; --center-color: #f3eaad; --petal-stroke: #ddd5b8; --petal-stroke-width: 0.6; }
[data-variant='lotus']          { --petal-color: #ffc6d3; --center-color: #f7c33b; --petal-stroke: #f0a8b8; --petal-stroke-width: 0.4; }
[data-variant='edelweiss']      { --petal-color: #f4f2e8; --center-color: #d8c96e; --petal-stroke: #d8d4c2; --petal-stroke-width: 0.6; }
[data-variant='gentian']        { --petal-color: #2c4fa3; --center-color: #e8f0ff; }
[data-variant='crocus']         { --petal-color: #9b6cc6; --center-color: #f08a1d; }
[data-variant='bird-of-paradise'] { --petal-color: #f08a1d; --center-color: #3a5bc4; }
[data-variant='plumeria']       { --petal-color: #faf6ea; --center-color: #ffd34d; --petal-stroke: #e8ddc0; --petal-stroke-width: 0.5; }
[data-variant='poppy']          { --petal-color: #d3302a; --center-color: #1c1a14; }
[data-variant='foxglove']       { --petal-color: #e08aa8; --center-color: #ffd66f; }
[data-variant='bluebell']       { --petal-color: #5b6fc4; --center-color: #e8f0ff; }

/* CRITTERS */
.critter { transform-box: fill-box; transform-origin: center; }
.critter-bee { animation: bee-orbit 6s linear infinite; }
.critter-butterfly { animation: butterfly-orbit 9s linear infinite; }

.critter-lizard {
  animation: lizard-sway 4s ease-in-out infinite;
}
@keyframes lizard-sway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(8px) rotate(3deg); }
}

.critter-scorpion {
  animation: scorpion-crawl 8s linear infinite;
}
@keyframes scorpion-crawl {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(15px); }
}

.critter-rabbit {
  animation: rabbit-breathe 3s ease-in-out infinite;
}
@keyframes rabbit-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.02); }
}

.critter-bird {
  animation: bird-peck 5s ease-in-out infinite;
}
@keyframes bird-peck {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(0deg); }
}

.critter-hummingbird {
  animation: hummingbird-hover 0.15s ease-in-out infinite alternate,
             hummingbird-drift 6s ease-in-out infinite;
}
@keyframes hummingbird-hover {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

.critter-snail {
  animation: snail-drift 20s linear infinite;
}
@keyframes snail-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

@keyframes bee-orbit {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(40px, -10px) rotate(10deg); }
  50%  { transform: translate(0, -30px) rotate(0deg); }
  75%  { transform: translate(-40px, -10px) rotate(-10deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes butterfly-orbit {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-50px, -25px); }
  100% { transform: translate(0, 0); }
}

/* PLANT STAGE TRANSITIONS — soft crossfade on stage change */
#plant-use { transition: opacity 380ms ease; }
#plant-use.fading { opacity: 0; }

/* MILESTONE BANNER — a pressed-herbarium specimen label marking a special day.
   Cream mat framed by a thin sage inner rule; a tracked-out catalog eyebrow above
   the occasion set in Fraunces italic, flanked by mirrored botanical fleurons. */
.milestone-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* ponytail: em-based internals driven by one fluid base so the whole label
     scales with the window on portrait phones; clamp caps at the desktop size */
  font-size: clamp(0.44rem, 2.0vw, 1rem);
  gap: 0.14em;
  padding: 0.5em 1.6em 0.58em;
  background: linear-gradient(180deg, #ffffff 0%, #f6f4ec 100%);
  border: 1px solid rgba(90, 139, 74, 0.4);
  border-radius: 3px;
  box-shadow:
    0 10px 24px -10px rgba(28, 26, 20, 0.30),
    0 2px 5px rgba(28, 26, 20, 0.10),
    inset 0 0 0 3px #ffffff,
    inset 0 0 0 4px rgba(90, 139, 74, 0.22);
  text-align: center;
  transform-origin: top center;
  animation: mb-appear 0.72s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

.mb-eyebrow {
  font-family: var(--mono);
  font-size: 0.56em;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sepia);
  padding-left: 0.32em; /* balance the trailing tracking so text reads centered */
}

.mb-name {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.18em;
  line-height: 1.1;
  color: var(--ink);
  font-variation-settings: 'opsz' 32;
}
.mb-label { white-space: nowrap; }

.mb-sprig {
  font-style: normal;
  font-size: 0.8em;
  color: var(--oxblood); /* sage green in the current palette */
  opacity: 0.72;
  transform: translateY(-0.06em);
}
.mb-sprig:first-child { transform: translateY(-0.06em) scaleX(-1); }

/* Entrance: settle in from just above. translateX(-50%) is baked in so the
   overlay stays centered while the transform is animated. */
@keyframes mb-appear {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.96); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ─── Milestone Decorations ────────────────────────────────────────────── */

/* Floating hearts */
.milestone-heart {
  position: absolute;
  font-size: 12px;
  animation: heart-float 4s ease-in-out infinite;
  opacity: 0.7;
  pointer-events: none;
  /* Above #stage (z-index 1) like the banner/lights/confetti — without this,
     hearts paint under the scene and only show over transparent sky. */
  z-index: 6;
}

@keyframes heart-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
  50% { transform: translateY(-20px) scale(1.1); opacity: 1; }
}

/* Fairy lights */
.fairy-lights {
  position: absolute;
  top: 24%;
  left: 10%;
  right: 10%;
  height: 28px;
  pointer-events: none;
}

.fairy-light {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: fairy-glow 1.5s ease-in-out infinite alternate;
}

.fairy-light:nth-child(odd) { background: #fff7a8; box-shadow: 0 0 4px #fff7a8; }
.fairy-light:nth-child(even) { background: #ffcdd2; box-shadow: 0 0 4px #ffcdd2; }

@keyframes fairy-glow {
  from { opacity: 0.4; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.1); }
}

/* Birthday banner */
.birthday-banner {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffecb3, #ffe082);
  padding: 4px 12px;
  border-radius: 4px;
  font-family: var(--serif-display);
  font-size: 11px;
  font-style: italic;
  color: #5d4037;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  animation: banner-sway 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes banner-sway {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}

/* MAILBOX in the scene (interactive group) */
#mailbox-slot { cursor: pointer; }
/* Scale about the letter's fixed center in viewBox units (matches the spawn
   point in field.js: 400,360). transform-box:fill-box has a Chromium bug that
   caps scale transitions on <use>, so we use the default view-box origin. */
#mailbox-slot use { transition: transform 200ms ease; transform-origin: 400px 360px; }
#mailbox-slot:hover use { transform: scale(1.12); }
#mailbox-slot .mailbox-pulse {
  fill: #802422;
  animation: mailbox-pulse 1.6s ease-in-out infinite;
}
@keyframes mailbox-pulse {
  0%, 100% { opacity: 0.5; r: 3; }
  50%      { opacity: 1;   r: 5; }
}

/* Numeric count badge shown on the envelope when 2+ letters are unread. */
#mailbox-slot .mailbox-badge-bg { fill: #d6336c; }
#mailbox-slot .mailbox-badge-text {
  fill: #fff;
  font: 700 9px system-ui, sans-serif;
  pointer-events: none;
}

/* The pending list reuses .note-overlay / .note-card / .history-list styling. */
#pending-list { margin: 0; }

/* NOTE MODAL */
.note-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(28, 26, 20, 0.5);
  display: flex;
  align-items: flex-start;        /* flex-start + margin:auto scrolls safely */
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
}
/* The single-letter reader sits above the unread-letters list when both are
   open (a letter opened from the list must appear on top of it). */
#note-overlay { z-index: 201; }
.note-overlay[hidden] { display: none; }

.note-card {
  position: relative;
  width: min(480px, 100%);
  margin: auto;                   /* centers when it fits, scrolls when it doesn't */
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.note-card-corner {
  display: none;
}

.note-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.6rem;
}
.note-title {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.note-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 1.8rem;
  line-height: 1;
  padding: 0 0.3rem;
  transition: color 180ms ease, transform 180ms ease;
}
.note-close:hover { color: var(--oxblood); transform: rotate(90deg); }
.note-body {
  font-family: var(--serif-body);
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  margin: 0.4rem 0 1.2rem;
}
.note-body em { font-style: italic; color: var(--oxblood); }
.note-meta {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia);
  text-align: right;
  margin-top: 0.6rem;
  border-top: 1px solid var(--paper-edge);
  padding-top: 0.6rem;
}

/* CONTROLS BAR (postcard, future audio toggle) */
#controls {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin: 1.4rem 0 0;
}
.ctrl-btn {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--paper-edge);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms, transform 120ms;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.ctrl-btn .ctrl-icon { color: var(--sepia); font-size: 0.85rem; }
.ctrl-btn:hover {
  background: var(--paper-deep);
  color: var(--ink);
  border-color: var(--ink-soft);
  transform: translateY(-1px);
}
.ctrl-btn:active { transform: translateY(0); }

/* FLOWER HOVER STATES */
.field-flower {
  transition: filter 0.2s ease;
  cursor: pointer;
}

.field-flower:hover {
  filter: brightness(1.08) drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* MOUSE PARALLAX — small tilt on the isometric scene-layers group */
#scene-layers { transition: transform 160ms ease-out; }

/* CLICK SHAKE on the plot tile */
.plot-shake { animation: plot-shake 320ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes plot-shake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-3px, 1px) rotate(-0.4deg); }
  40%      { transform: translate(3px, -1px) rotate(0.4deg); }
  60%      { transform: translate(-2px, 2px); }
  80%      { transform: translate(2px, 0); }
}

/* PETAL SCATTER on click */
.petal-particle {
  position: fixed;
  width: 8px; height: 12px;
  border-radius: 100% 0;
  pointer-events: none;
  opacity: 0;
  z-index: 50;
  animation: petal-fall 1500ms cubic-bezier(0.42, 0, 0.55, 1) forwards;
  will-change: transform, opacity;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.06);
}
@keyframes petal-fall {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1.1); opacity: 1; }
  20%  { opacity: 1; }
  100% { transform: var(--end-transform, translate(0, 80px) rotate(360deg)) scale(0.85); opacity: 0; }
}

/* FIREFLIES — appear at night when stage >= 3 */
.firefly {
  fill: #fff7a8;
  filter: drop-shadow(0 0 3px #fff7a8) drop-shadow(0 0 6px rgba(255, 233, 130, 0.7));
  transform-box: fill-box;
  transform-origin: center;
  animation:
    firefly-drift var(--dur, 6s) ease-in-out infinite,
    firefly-blink 2.4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes firefly-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(22px, -16px); }
  50%  { transform: translate(-12px, -32px); }
  75%  { transform: translate(-28px, -8px); }
  100% { transform: translate(0, 0); }
}
@keyframes firefly-blink {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 1; }
}

/* BLOOM CELEBRATION */
#flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.22s ease;
}
#flash.on { opacity: 0.55; }

#flying-flower {
  position: fixed;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 101;
  transition:
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.85s linear;
  opacity: 0;
}
#flying-flower.fly { opacity: 1; }

/* PAGE REVEAL — staggered rise on load */
@keyframes paper-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
#journal       { animation: paper-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#masthead      { animation: paper-rise 700ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#specimen-card { animation: paper-rise 700ms 240ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#action        { animation: paper-rise 700ms 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#herbarium     { animation: paper-rise 700ms 500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#past-notes    { animation: paper-rise 700ms 560ms cubic-bezier(0.16, 1, 0.3, 1) both; }
#colophon      { animation: paper-rise 700ms 680ms cubic-bezier(0.16, 1, 0.3, 1) both; }

/* RESPONSIVE */
@media (max-width: 540px) {
  body { padding: 1.5rem 0.75rem; }
  #journal { padding: 2rem 1.4rem 1.5rem; }
  .specimen-header,
  .specimen-footer { font-size: 0.62rem; letter-spacing: 0.12em; }
  #binomial { font-size: 1.4rem; }
  #water-btn { font-size: 0.95rem; padding: 0.7rem 1.6rem; }
  .herb-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #journal, #masthead, #specimen-card, #action, #herbarium, #colophon,
  .critter-bee, .critter-butterfly, #plant-use, #flying-flower, #sky,
  .weather-sunny .pollen, .weather-rain .raindrop, .weather-fireflies .firefly-ambient, .weather-petals .petal,
  .creature, .creature-ladybug, .creature-butterfly, .creature-cat, .creature-cat-zzz, .creature-hummingbird, .creature-snail, .creature-heart,
  .sky-pulse, .shooting-star {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Multi-Plant Garden ───────────────────────────────────────────────── */

.plant-position {
  cursor: pointer;
}

.plant-position:hover {
  filter: brightness(1.1);
}

.empty-marker {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.plant-position:hover .empty-marker {
  opacity: 1;
}

/* Plant Tooltips */
.plant-tooltip {
  position: absolute;
  background: rgba(244, 234, 212, 0.95);
  border: 1px solid var(--paper-edge);
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--sepia);
  letter-spacing: 0.05em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
  z-index: 10;
}

.plant-position:hover .plant-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* Plant Picker Popup */
.plant-picker {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 20, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.plant-picker[hidden] {
  display: none;
}

.plant-picker-content {
  background: #fff;
  border-radius: 12px;
  padding: 0;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.plant-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #eee;
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #1c1a14;
}

.plant-picker-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #8b8880;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.plant-picker-close:hover {
  color: #1c1a14;
}

.plant-picker-options {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  justify-content: center;
}

.plant-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid #e8e6e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #faf8f3;
  min-width: 90px;
}

.plant-option:hover {
  border-color: #5a8b4a;
  background: #f0f8f0;
}

.plant-option svg {
  width: 50px;
  height: 75px;
  margin-bottom: 8px;
}

.plant-option-name {
  font-family: 'Newsreader', serif;
  font-size: 0.7rem;
  font-style: italic;
  color: #6b6860;
  text-align: center;
  line-height: 1.2;
}

/* ─── Weather Effects ──────────────────────────────────────────────────── */

#weather-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

/* Sunny: floating pollen/dust motes */
.weather-sunny .pollen {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 248, 220, 0.7);
  border-radius: 50%;
  animation: pollen-drift var(--dur, 8s) ease-in-out infinite;
  opacity: 0.6;
}

@keyframes pollen-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(15px, -20px); }
  50% { transform: translate(-10px, -35px); }
  75% { transform: translate(20px, -15px); }
}

/* Rain: animated droplets */
.weather-rain .raindrop {
  position: absolute;
  width: 2px;
  height: 12px;
  background: linear-gradient(to bottom, transparent, rgba(174, 194, 224, 0.6));
  border-radius: 0 0 2px 2px;
  animation: rain-fall var(--dur, 0.8s) linear infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes rain-fall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(calc(100% + 20px)); opacity: 0; }
}

/* Fireflies: glowing dots (extends existing) */
.weather-fireflies .firefly-ambient {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff7a8;
  border-radius: 50%;
  filter: drop-shadow(0 0 4px #fff7a8) drop-shadow(0 0 8px rgba(255, 233, 130, 0.8));
  animation:
    firefly-ambient-drift var(--dur, 7s) ease-in-out infinite,
    firefly-ambient-glow 2.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes firefly-ambient-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(30px, -25px); }
  50% { transform: translate(-20px, -45px); }
  75% { transform: translate(-35px, -10px); }
}

@keyframes firefly-ambient-glow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* Falling petals/leaves */
.weather-petals .petal {
  position: absolute;
  width: 8px;
  height: 10px;
  background: var(--petal-bg, #ffc6d3);
  border-radius: 50% 0;
  animation: petal-drift var(--dur, 6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0.8;
}

.weather-petals.fall .petal {
  --petal-bg: #dc6a2d;
  border-radius: 40% 60% 60% 40%;
}

@keyframes petal-drift {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translate(var(--drift-x, 40px), calc(100% + 30px)) rotate(var(--drift-rot, 180deg)); opacity: 0; }
}

/* Snow: animated flakes */
.snowflake {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
  animation: snow-fall var(--dur, 7s) linear var(--delay, 0s) infinite;
}
@keyframes snow-fall {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--drift, 0), 105%); opacity: 0.9; }
}

/* ─── Creatures ────────────────────────────────────────────────────────── */

.creature {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.creature:hover {
  filter: brightness(1.15);
}

/* Ladybug */
.creature-ladybug {
  width: 20px;
  height: 16px;
  animation: ladybug-crawl 12s linear infinite;
}

.creature-ladybug.wiggle {
  animation: ladybug-wiggle 0.4s ease-in-out;
}

@keyframes ladybug-crawl {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(30px, -5px) rotate(15deg); }
  50% { transform: translate(50px, 5px) rotate(-10deg); }
  75% { transform: translate(20px, 10px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes ladybug-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-15deg) scale(1.1); }
  75% { transform: rotate(15deg) scale(1.1); }
}

/* Butterfly */
.creature-butterfly {
  width: 28px;
  height: 20px;
  animation: butterfly-float 8s ease-in-out infinite;
}

.creature-butterfly.flyaway {
  animation: butterfly-flyaway 1s ease-out forwards;
}

@keyframes butterfly-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-40px, -20px) rotate(-5deg); }
  50% { transform: translate(-60px, 10px) rotate(5deg); }
  75% { transform: translate(-20px, -10px) rotate(-3deg); }
}

@keyframes butterfly-flyaway {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-100px, -80px) scale(0.5); opacity: 0; }
}

/* Sleeping Cat */
.creature-cat {
  width: 40px;
  height: 24px;
}

.creature-cat.purr {
  animation: cat-purr 0.3s ease-in-out 3;
}

@keyframes cat-purr {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Cat zzz */
.creature-cat-zzz {
  position: absolute;
  font-size: 10px;
  color: var(--sepia);
  opacity: 0;
  animation: cat-zzz 2s ease-in-out infinite;
}

@keyframes cat-zzz {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  50% { opacity: 0.7; transform: translate(5px, -10px); }
}

/* Hummingbird */
.creature-hummingbird {
  width: 24px;
  height: 20px;
  animation: hummingbird-hover 0.15s ease-in-out infinite alternate,
             hummingbird-drift 6s ease-in-out infinite;
}

@keyframes hummingbird-hover {
  from { transform: translateY(0); }
  to { transform: translateY(-2px); }
}

@keyframes hummingbird-drift {
  0%, 100% { margin-left: 0; margin-top: 0; }
  50% { margin-left: 20px; margin-top: -15px; }
}

/* Snail */
.creature-snail {
  width: 24px;
  height: 20px;
  animation: snail-vibe 3s ease-in-out infinite;
}

@keyframes snail-vibe {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

/* Heart popup on creature click */
.creature-heart {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  animation: heart-pop 0.8s ease-out forwards;
}

@keyframes heart-pop {
  0% { transform: scale(0) translateY(0); opacity: 1; }
  50% { transform: scale(1.2) translateY(-15px); opacity: 1; }
  100% { transform: scale(1) translateY(-30px); opacity: 0; }
}

/* Sky click pulse (sun/moon wink) */
.sky-pulse {
  position: absolute;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 200, 0.6) 0%, transparent 70%);
  animation: sky-pulse 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes sky-pulse {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* Shooting star */
.shooting-star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #ffffd0);
  animation: shooting-star 1s ease-out forwards;
  pointer-events: none;
}

.shooting-star::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 50px;
  height: 2px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
  transform: translateY(-50%);
}

@keyframes shooting-star {
  0% {
    transform: translate(0, 0) rotate(-30deg);
    opacity: 1;
  }
  100% {
    transform: translate(150px, 100px) rotate(-30deg);
    opacity: 0;
  }
}

/* ─── Plant Info Card (Wikipedia) ─────────────────────────────────────────── */
.wiki-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 20, 0.5);
  display: flex;
  align-items: flex-start;        /* flex-start + margin:auto scrolls safely */
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1000;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wiki-overlay.active {
  opacity: 1;
  visibility: visible;
}

.wiki-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 420px;
  width: 100%;
  margin: auto;                   /* centers when it fits, scrolls when it doesn't */
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;               /* the card scrolls as a unit (robust across browsers) */
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  transition: transform 0.2s ease;
}

.wiki-overlay.active .wiki-card {
  transform: translateY(0);
}

.wiki-card-header {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid #eee;
}

.wiki-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  background: #f0f0f0;
  flex-shrink: 0;
}

.wiki-image-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 2rem;
  flex-shrink: 0;
}

.wiki-titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wiki-titles h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  margin: 0 0 0.25rem;
  color: #1c1a14;
}

.wiki-titles p {
  margin: 0;
  color: #6b6860;
  font-size: 0.95rem;
}

.wiki-card-body {
  padding: 1.25rem;
}

.wiki-extract {
  line-height: 1.6;
  color: #3a3830;
  margin: 0;
}

.wiki-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-top: 1px solid #eee;
  background: #faf8f3;
}

.wiki-link {
  color: #5a8b4a;
  text-decoration: none;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.wiki-link:hover {
  text-decoration: underline;
}

.wiki-close {
  background: none;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  color: #6b6860;
  transition: background 0.15s ease;
}

.wiki-close:hover {
  background: #f0f0f0;
}

.wiki-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
}

.wiki-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #eee;
  border-top-color: #5a8b4a;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.wiki-loading-text {
  color: #8b8880;
  font-size: 0.9rem;
}

.wiki-error {
  text-align: center;
  padding: 2rem;
  color: #8b8880;
}

.wiki-error p {
  margin: 0 0 1rem;
}

.wiki-retry {
  background: #5a8b4a;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.wiki-retry:hover {
  background: #4a7b3a;
}

/* ─── Past Letters (collapsible history) ─────────────────────────────────── */
#letter-history {
  max-width: 480px;
  margin: 0.25rem auto 0;
  padding: 0 1rem;
  text-align: center;
}

#history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.95rem;
  color: #6b6860;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  transition: color 0.15s ease;
}

#history-toggle:hover { color: #1c1a14; }

.history-caret {
  display: inline-block;
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

#history-toggle[aria-expanded="true"] .history-caret { transform: rotate(90deg); }

.history-count { color: #a39e92; }

.history-list {
  list-style: none;
  margin: 0.25rem auto 0.5rem;
  padding: 0;
  text-align: left;
}

.history-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid #ece8df;
  padding: 0.7rem 0.5rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.95rem;
  color: #3a3830;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.history-item:hover { background: #f5f1e8; }

.history-date {
  flex-shrink: 0;
  width: 3.5rem;
  color: #5a8b4a;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.history-preview {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Tilt hint (touch devices) ──────────────────────────────────────────── */
.tilt-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(28, 26, 20, 0.55);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  z-index: 6;
  animation: tilt-hint-in 0.5s ease both;
}

@keyframes tilt-hint-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.tilt-hint.leaving { animation: tilt-hint-out 0.4s ease forwards; }

@keyframes tilt-hint-out {
  to { opacity: 0; transform: translate(-50%, 10px); }
}

#light-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: background-color 2s linear, opacity 2s linear;
}

@media (prefers-reduced-motion: reduce) {
  #light-overlay { transition: none; }
}

/* Wind sway — pivots each plant at its base. Timing varies per wrapper <g> so
   neighbours move out of phase. Custom props inherit from the <g> to the <use>. */
/* transform-origin is set inline per plant (user-space el.x el.y) — fill-box is
   buggy on <use> in Chromium, so the pivot must be given in view-box units. */
.field-flower,
.field-grass {
  animation: wb-sway var(--sway-dur, 4s) ease-in-out var(--sway-delay, 0s) infinite;
}
.field-flower { --sway-amp: 5deg; }
.field-grass  { --sway-amp: 3deg; }

@keyframes wb-sway {
  0%, 100% { transform: rotate(var(--sway-amp)); }
  50%      { transform: rotate(calc(-1 * var(--sway-amp))); }
}

#flower-field > g:nth-of-type(3n)   { --sway-dur: 4.8s; --sway-delay: -1.2s; }
#flower-field > g:nth-of-type(3n+1) { --sway-dur: 4.0s; --sway-delay: -2.4s; }
#flower-field > g:nth-of-type(3n+2) { --sway-dur: 5.4s; --sway-delay: -0.6s; }

/* Gust — a 2s burst of larger amplitude sweeping the field (staggered by the
   per-plant delays above). Toggled on #flower-field by atmosphere.js. */
#flower-field.gust .field-flower { --sway-amp: 9deg; }
#flower-field.gust .field-grass  { --sway-amp: 6deg; }

@media (prefers-reduced-motion: reduce) {
  .field-flower,
  .field-grass { animation: none; }
}

#sky-extras {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.wb-cloud {
  position: absolute;
  height: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  filter: blur(8px);
  opacity: 1;
  transition: opacity 2s linear;
  animation: wb-drift var(--cd, 40s) linear var(--cdelay, 0s) infinite;
}

.wb-moon {
  position: absolute;
  /* ponytail: %-based so the moon scales with the window and stays in the sky
     band on small (portrait) screens — fixed px dropped it behind the garden */
  top: 4%;
  right: 9%;
  width: 20%;
  height: auto;
  opacity: 0;
  transition: opacity 2s linear;
}

#sky-extras.is-night .wb-moon  { opacity: 1; }
#sky-extras.is-night .wb-cloud { opacity: 0; }

@keyframes wb-drift {
  from { left: -140px; }
  to   { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wb-cloud { animation: none; }
}

/* ─── Special Days ─────────────────────────────────────────────────────── */
/* Overlay banner sits at the top of the window (the base .milestone-banner is
   an inline flow ribbon; this positions it for the scene). */
.milestone-decoration.milestone-banner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 6;
}

.wb-confetti {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  animation: wb-confetti-fall 2.4s cubic-bezier(0.3, 0, 0.5, 1) forwards;
}
@keyframes wb-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(360px) rotate(540deg); opacity: 0; }
}

/* Focal bloom gets a soft celebratory glow. */
.special-bloom { filter: drop-shadow(0 0 6px rgba(255, 210, 77, 0.55)); }

.wb-confetti-burst {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 7;
  animation: wb-confetti-burst 2.4s cubic-bezier(0.25, 0, 0.35, 1) forwards;
}

@keyframes wb-confetti-burst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.8);
    opacity: 1;
  }
  30% {
    transform: translate(var(--burst-x), var(--burst-y)) rotate(180deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--burst-x), calc(var(--burst-y) + 280px)) rotate(540deg) scale(0.9);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-confetti { animation: none; display: none; }
  .wb-confetti-burst { animation: none; display: none; }
  .milestone-banner { animation: none; }
}