/* ======================================================================
   v11 polish pass: restored interactions, readable experience, the
   garden you grew. Everything new in this pass lives below this line.
   ====================================================================== */

/* --- performance: sections far off screen pause their CSS animations (toggled by script) --- */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
/* phones: the frosted nav re-blurs everything that moves beneath it every frame; a solid tint looks the same there */
@media (max-width: 700px) {
    .nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(rgba(255, 251, 245, 0.94), rgba(255, 251, 245, 0.94)) padding-box, linear-gradient(90deg, rgba(242,194,48,.6), rgba(244,167,191,.6), rgba(185,162,222,.6), rgba(141,179,106,.6), rgba(242,194,48,.6)) border-box !important; }
}
/* the seed's glint animated a drop-shadow filter (a repaint every frame); a soft halo fading in and out costs nothing */
.w-seed { animation: seedIn 0.8s var(--spring); }
.w-seed::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 160, 0.85), transparent 70%); opacity: 0; pointer-events: none; animation: seedHalo 4s ease-in-out 1s infinite; }
@keyframes seedHalo { 0%, 82%, 100% { opacity: 0; } 91% { opacity: 1; } }
.w-seed.held::before { animation: none; }

/* --- rainbow letters on headings and labels (same palette and stagger as the section titles) --- */
.rb-ch { transition: color 0.35s ease calc(var(--i) * 22ms), -webkit-text-fill-color 0.35s ease calc(var(--i) * 22ms); }
html body .rb-host:hover .rb-vis .rb-ch, html body .rb-host:focus-visible .rb-vis .rb-ch, html body .rb-host.is-tapped .rb-vis .rb-ch { color: var(--hc) !important; -webkit-text-fill-color: var(--hc); }
.rb-h1 .ltr { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.35s ease calc(var(--i) * 22ms), -webkit-text-fill-color 0.35s ease calc(var(--i) * 22ms) !important; }
.rb-h1:hover .ltr, .rb-h1.is-tapped .ltr { color: var(--hc) !important; -webkit-text-fill-color: var(--hc) !important; }
/* "hello, I'm Madison" keeps its handwriting reveal; the old single-colour tap rule is replaced by the letters */
.about-hello { cursor: default; }

/* --- flowers turn again (as on the original site), each at its own pace, with a tiny float.
       Script sets --spd (one turn), --sdl (phase), --fl/--fdl (float) per flower and ramps the
       animation's playback rate on hover, so a flower speeds up and settles back without a jump. --- */
@keyframes flSpin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes flSpinRev { from { rotate: 0deg; } to { rotate: -360deg; } }
@keyframes flFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.fl-spin { animation: flSpin var(--spd, 40s) linear var(--sdl, 0s) infinite, flFloat var(--fl, 6s) ease-in-out var(--fdl, 0s) infinite; }
.fl-spin.fl-rev { animation-name: flSpinRev, flFloat; }
.hero-flowers .bloom.fl-spin { animation: bloomIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) var(--bdl, 0.4s) forwards, flSpin var(--spd, 40s) linear var(--sdl, 0s) infinite, flFloat var(--fl, 6s) ease-in-out var(--fdl, 0s) infinite; }
.hero-flowers .bloom.f5, .hero-flowers .bloom.f8, .hero-flowers .bloom.f9 { animation: bloomIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards, leafSway 5s ease-in-out infinite; }
.hero-flowers .bloom.f8 { animation-delay: 1.2s, -2s; animation-duration: 1.4s, 6s; }
.hero-flowers .bloom.f9 { animation-delay: 1.5s, -1s; animation-duration: 1.4s, 5.5s; }
.title-bloom.fl-spin { animation: flSpin var(--spd, 24s) linear var(--sdl, 0s) infinite; }
.section-head:hover .title-bloom.fl-spin { animation-duration: var(--spd, 24s); }
.reveal.visible .hello-flower.fl-spin { animation: popBloom 0.8s var(--spring) 1.8s forwards, flSpin var(--spd, 12s) linear 2.6s infinite !important; }
.nav a .nav-fl.fl-spin { animation: none; }
.nav a.active .nav-fl.fl-spin { animation: flSpin 8s linear infinite; }
.vine-item.on.spin > use { animation: flSpin 20s linear infinite; transform-box: fill-box; transform-origin: center; }
.vine-item.on.spin:nth-of-type(3n) > use { animation-duration: 26s; animation-delay: -7s; animation-name: flSpinRev; }
.vine-item.on.spin:nth-of-type(3n+1) > use { animation-duration: 17s; animation-delay: -3s; }
.vine-sprout .sp-spin { animation: flSpin 16s linear infinite; transform-box: fill-box; transform-origin: center; }
.vine-sprout .sprout:nth-child(odd) .sp-spin { animation-name: flSpinRev; animation-duration: 21s; }
/* the little posies: each flower head turns slowly on its stem */
.pp-pop > use { transform-box: fill-box; transform-origin: center; animation: flSpin var(--spd, 24s) linear var(--sdl, 0s) infinite; }
.pp-fl:nth-child(odd) .pp-pop > use { animation-name: flSpinRev; }
.page-posy:hover .pp-stem { animation-duration: var(--sd, 4s); }
/* scattered blooms and leaves can be touched now (they only ever sit in empty margins) */
.scatter.open { pointer-events: auto; cursor: pointer; }
.sc-bloom svg.fl-spin { animation: flSpin var(--spd, 40s) linear var(--sdl, 0s) infinite; }
.hero-flowers .bloom, .about-bloom, .title-bloom, .hello-flower { pointer-events: auto; }
.fl-int { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
    .fl-spin, .hero-flowers .bloom.fl-spin, .reveal.visible .hello-flower.fl-spin, .nav a.active .nav-fl.fl-spin, .vine-item.on.spin > use, .vine-sprout .sp-spin, .pp-pop > use { animation: none !important; }
    .hero-flowers .bloom { opacity: 1; }
    .reveal.visible .hello-flower { scale: 1; }
}

/* --- nothing decorative gets cut off: on phones the back photos (and the flower frames around them) tuck
       in far enough to stay inside the screen instead of running past the hero's clipped edge --- */
@media (max-width: 480px) {
    .collage .fan-card[data-slot="1"], .collage:hover .fan-card[data-slot="1"] { translate: -82px 20px; scale: 0.8; }
    .collage .fan-card[data-slot="2"], .collage:hover .fan-card[data-slot="2"] { translate: 82px 8px; scale: 0.8; }
}

/* --- touching a flower: petals, a ladybug, a tiny butterfly, a bud that opens --- */
.v11-petal { position: fixed; z-index: 104; width: 8px; height: 11px; border-radius: 60% 60% 50% 50% / 70% 70% 30% 30%; pointer-events: none; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.45); }
.v11-ladybug { position: fixed; z-index: 104; width: 13px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none; }
.v11-ladybug svg, .v11-tinybf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.v11-tinybf { position: fixed; z-index: 104; width: 22px; height: 18px; pointer-events: none; }
.v11-tinybf .bf-wing-l, .v11-tinybf .bf-wing-r { animation-duration: 0.22s; }
.v11-bud { position: absolute; z-index: 2; width: 20px; height: 25px; margin: -12px 0 0 -10px; pointer-events: none; transform-origin: 50% 100%; animation: sproutUp 1.2s var(--spring) both; }
.v11-bud svg { width: 100%; height: 100%; overflow: visible; }
.v11-bud .vb-head { transform-box: fill-box; transform-origin: center; scale: 0.2; transition: scale 1s var(--spring) 0.5s; }
.v11-bud .vb-cap { transform-box: fill-box; transform-origin: 50% 100%; transition: scale 0.6s ease 0.4s, opacity 0.6s ease 0.4s; }
.v11-bud.open .vb-head { scale: 1; }
.v11-bud.open .vb-cap { scale: 0.4; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .v11-bud { animation: none; } }

/* --- the vine caterpillar inches slowly and rests between stretches (no rocking while it rests) --- */
.vine-cat .vc-flip { animation-duration: 1.15s; }
.vine-cat.resting .vc-flip { animation-play-state: paused; }

/* ---------------------------------------------------------------------
   Experience, readable at a glance: the open branch on the left, and on
   the right the category, its tagline and every role with where it was.
   Each row has a small flower in the branch's colour (its bud's twin);
   hovering either lights the other, choosing either opens the field note
   in place (dates live there, not in the overview).
   --------------------------------------------------------------------- */
.gs-exp .gs-inner { height: auto; min-height: var(--stage-h); align-items: start; }
.gs-exp .gs-plant { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; margin-top: 0.4rem; }
.gs-exp .gs-note { align-self: start; max-height: none; overflow: visible; padding: 0.5rem 0.2rem 1rem 1.4rem; margin-top: 0.4rem; }
.gs-exp .gs-note::before { bottom: 1rem; }
.gs-exp .gn-nav { display: none; }
.xl-cat { font-size: 1.5rem; }
.xl-list { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0; }
.xl-item { position: relative; animation: xlIn 0.5s var(--glide) both; animation-delay: calc(var(--i) * 45ms); }
.xl-item + .xl-item::before { content: ''; position: absolute; left: 2.2rem; right: 0.6rem; top: 0; height: 1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-edge) 30%, transparent) 0 5px, transparent 5px 10px); }
@keyframes xlIn { from { opacity: 0; translate: 0 6px; } }
.xl-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 12px; align-items: start; column-gap: 0.65rem; width: 100%; min-height: 44px; padding: 0.6rem 0.65rem; border: 0; border-radius: 14px; background: transparent; text-align: left; font: inherit; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.25s ease; }
.xl-row:hover, .xl-item.is-hot .xl-row, .xl-item.is-open .xl-row { background: color-mix(in srgb, var(--c-soft) 72%, transparent); }
.xl-mark { width: 18px; height: 18px; margin-top: 0.2rem; overflow: visible; color: color-mix(in srgb, var(--c-edge) 62%, #fff); --center: #fff6d8; transition: rotate 0.7s var(--spring), scale 0.45s var(--spring), color 0.3s; }
.xl-item.is-hot .xl-mark, .xl-item.is-open .xl-mark { rotate: 72deg; scale: 1.2; color: var(--c-edge); }
.xl-text { display: grid; gap: 0.08rem; }
.xl-role { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; line-height: 1.25; color: var(--ink); }
.xl-org { font-size: 0.86rem; font-weight: 600; line-height: 1.35; color: var(--c-ink); }
.xl-chev { width: 7px; height: 7px; margin-top: 0.5rem; border-right: 1.5px solid color-mix(in srgb, var(--c-ink) 70%, transparent); border-bottom: 1.5px solid color-mix(in srgb, var(--c-ink) 70%, transparent); rotate: 45deg; transition: rotate 0.3s ease; }
.xl-item.is-open .xl-chev { rotate: 225deg; margin-top: 0.7rem; }
.xl-detail { padding: 0.05rem 0.7rem 0.85rem 2.35rem; }
.xl-detail:not([hidden]) { animation: noteIn 0.4s var(--glide); }
.xl-detail .gn-text { margin-top: 0.3rem; font-size: 0.93rem; }
.xl-date { font-family: var(--font-hand); font-size: 1.15rem; line-height: 1.1; color: var(--c-ink); }
.xl-also { margin: 0.9rem 0 0.1rem 0.65rem; font-family: var(--font-hand); font-size: 1.15rem; color: #8c7f92; }
.xl-list--quiet .xl-role { font-size: 0.96rem; }
.xl-list--quiet .xl-mark { width: 14px; height: 14px; margin-left: 2px; }
/* the bud that matches a hovered row opens a little and lifts */
.gs-bud.is-hot { --open: 0.86; z-index: 4; }
.gs-bud.is-hot .gb-art { transform: scale(1.18); }
@media (max-width: 700px) {
    .gs-exp .gs-plant { position: relative; top: auto; width: min(100%, 360px); margin-top: 2.9rem; }
    .gs-exp .gs-note { grid-row: 3; min-height: 0; padding: 0.4rem 0 0.6rem 1rem; }
    .xl-row { padding: 0.65rem 0.4rem; }
    .xl-detail { padding-left: 2.05rem; padding-right: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) { .xl-item, .xl-detail:not([hidden]) { animation: none; } }

/* --- the fawn: with a branch open it walks along the small row of flowers, never across the list --- */

/* --- the chrysalis on the vine (the twig keeps the caterpillar; the chrysalis moves to the vine when vines show) --- */
.w-story.on-vine .ws-chrysalis { display: none; }
.v11-chrys { opacity: 0; transition: opacity 1.6s ease; }
.v11-chrys.on { opacity: 1; }
.v11-chrys .vc-hang { transform-box: fill-box; transform-origin: 50% 0; animation: hang 6s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .v11-chrys .vc-hang { animation: none; } }

/* --- dandelions: a slow sway from the base, the head lightly trembling; seeds that left are really gone --- */
.v11-dand { touch-action: pan-y; animation: dandSway var(--sw, 6s) ease-in-out var(--swd, 0s) infinite alternate; }
.v11-dand::after { content: ''; position: absolute; inset: -6px -10px 40% -10px; }   /* a forgiving touch target around the head */
.v11-dand .wd-puff { transform-box: view-box; transform-origin: 22px 21px; animation: puffBreath 3.4s ease-in-out infinite alternate; }
.v11-dand .wd-seed.gone { opacity: 0; pointer-events: none; }
.v11-dand .wd-bare { opacity: 0; transition: opacity 0.6s ease 0.3s; }
.v11-dand.bare .wd-bare { opacity: 1; }
.v11-dand.bare .wd-core { opacity: 0; }
.v11-dand.puffed { animation: dandPuff 0.7s ease-out, dandSway var(--sw, 6s) ease-in-out 0.7s infinite alternate; }
.v11-dand.is-yellow .wd-flower { transform-box: fill-box; transform-origin: center; animation: flSpin 60s linear infinite; }
@keyframes dandSway { from { rotate: -2.2deg; } to { rotate: 2.6deg; } }
@keyframes puffBreath { from { rotate: -1.5deg; scale: 1; } to { rotate: 1.5deg; scale: 1.015; } }
@keyframes dandPuff { 0% { rotate: 0deg; } 35% { rotate: 5deg; } 70% { rotate: -2deg; } 100% { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .v11-dand, .v11-dand .wd-puff, .v11-dand.is-yellow .wd-flower { animation: none !important; } }

/* --- sunlight: flowers with stems lean a few degrees toward the cursor from their base --- */
.page-posy, .w-sprout, .v11-bud { transform: rotate(var(--sun, 0deg)); transform-origin: 50% 100%; transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.3, 1); }

/* --- a bird carrying nest material in its beak --- */
.w-twig { position: absolute; left: calc(33px * var(--fs, 1)); top: calc(12px * var(--fs, 1)); width: calc(15px * var(--fs, 1)); height: 2px; border-radius: 2px; background: #9a6b3a; rotate: 12deg; pointer-events: none; }
.w-twig::after { content: ''; position: absolute; left: 7px; top: -3px; width: 6px; height: 1.5px; border-radius: 2px; background: inherit; rotate: -35deg; }
.w-twig.is-grass { background: #a7b86a; height: 1.5px; width: 17px; }
.w-twig.is-grass::after { background: #a7b86a; left: 5px; }
.w-twig.is-fluff { width: 8px; height: 8px; left: calc(36px * var(--fs, 1)); top: calc(9px * var(--fs, 1)); border-radius: 50%; background: radial-gradient(circle, #fffdf6 40%, rgba(255, 253, 246, 0) 72%); }
.w-twig.is-fluff::after { display: none; }
.flyby-bird .c-body { position: relative; }

/* --- phones: the vines keep to the very edge (smaller blooms, a little further out) so they never sit on labels,
       and the open branch is a little smaller so the list of roles starts sooner --- */
@media (max-width: 700px) {
    .vine-left { left: 0; } .vine-right { right: 0; }
    .vine-item.on { transform: scale(0.72) rotate(0deg); }
    .vine-item.near { transform: scale(0.95) rotate(12deg); }
    .gs-exp .gs-plant { width: min(80%, 300px); margin-top: 2.6rem; }
}

/* ---------------------------------------------------------------------
   Experience flowers and Skills specimens: a gentle breeze, a livelier
   hover, and a tap response on touch screens. Rotate / translate / scale
   are the individual properties, so they stack on the hover transforms
   instead of fighting them. (Reduced motion: see the media query above.)
   --------------------------------------------------------------------- */
.g-art { animation: gardenBreeze 6.5s ease-in-out infinite alternate; }
.h-art { animation: specimenBreeze 8s ease-in-out infinite alternate; }
.g-cat:hover .g-art, .g-cat:focus-visible .g-art, .g-cat.is-tapped .g-art { transform: translateY(-7px) rotate(calc(var(--sun, 0deg) - 3deg)) scale(1.07); }
.h-spec:hover .h-art, .h-spec:focus-visible .h-art, .h-spec.is-tapped .h-art { transform: translateY(-8px) rotate(calc(var(--sun, 0deg) - 3.5deg)) scale(1.08); }
.g-row.compact .g-cat:hover .g-art, .g-row.compact .g-cat.is-tapped .g-art, .h-row.compact .h-spec:hover .h-art, .h-row.compact .h-spec.is-tapped .h-art { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .g-art, .h-art { animation: none !important; }
    .g-cat:hover .g-art, .g-cat.is-tapped .g-art, .h-spec:hover .h-art, .h-spec.is-tapped .h-art { transform: none; }
}

/* until script.js builds the garden at the bottom, hold its space so the page height (and a restored scroll position) does not jump */
footer:not(:has(.garden-bed)) { min-height: 320px; }
@media (max-width: 768px) { footer:not(:has(.garden-bed)) { min-height: 300px; } }
.mb-bouquet.is-picking .bq-label { opacity: 0 !important; }

/* an instanced <symbol> is its own little viewport that clips to its viewBox; flowers that turn about their content centre, or
   whose art runs a hair past the box, must never lose a petal to it */
symbol, use { overflow: visible; }