/* =====================================================================
   The garden ecosystem (ecosystem.js): seeds pouring, the yard, the
   watering can, the nest, the caterpillar and the butterfly, and the
   Experience / Skills breeze. Transforms and opacity only.
   ===================================================================== */
/* the passive versions of the nest and the caterpillar are replaced by the interactive ones in the yard */
.w-nest, .w-story, .w-jade { display: none !important; }

/* --- flowers that relied on overflowing their own svg box get room, so no petal can meet an invisible edge --- */
.page-posy svg { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; }

/* --- Experience / Skills: each flower breathes at its own pace (the JS sets --amp --dir and timings) --- */
@keyframes gardenBreeze { 0% { rotate: calc(var(--dir, 1) * var(--amp, 1) * -3.2deg); translate: calc(var(--amp, 1) * -1.5px) 1px; scale: 1; } 50% { rotate: calc(var(--dir, 1) * var(--amp, 1) * 0.6deg); translate: 0 calc(var(--amp, 1) * -4px); scale: 1.02; } 100% { rotate: calc(var(--dir, 1) * var(--amp, 1) * 3.4deg); translate: calc(var(--amp, 1) * 1.5px) 0; scale: 1; } }
@keyframes specimenBreeze { 0% { --sway: calc(var(--dir, 1) * var(--amp, 1) * -2.6deg); translate: 0 1px; } 50% { translate: 0 calc(var(--amp, 1) * -4px); } 100% { --sway: calc(var(--dir, 1) * var(--amp, 1) * 2.8deg); translate: 0 0; } }
@keyframes stemBend { from { transform: skewX(calc(var(--dir, 1) * var(--amp, 1) * -2.4deg)); } to { transform: skewX(calc(var(--dir, 1) * var(--amp, 1) * 2.6deg)); } }
.g-art > use, .h-art > use { transform-box: fill-box; transform-origin: 50% 100%; animation: stemBend var(--bd, 6s) ease-in-out var(--bl, 0s) infinite alternate; }
@media (prefers-reduced-motion: reduce) { .g-art > use, .h-art > use { animation: none !important; } }

/* --- seed packet: a clearer lift on hover, and the seeds that pour out --- */
.seed-wrap { position: relative; }
.seed-packet:hover { transform: translateY(-4px) rotate(-2deg); }
.pour-seed { position: absolute; z-index: 5; pointer-events: none; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 35% 30%, #e0aa70, #9a6b3a 60%, #7a4f26); box-shadow: 0 1px 1px rgba(80, 50, 20, 0.25); will-change: transform; }

/* --- the yard --- */











          /* comfortable touch target */




@keyframes nestHop { 50% { transform: translateY(-3px) rotate(-1.5deg); } }



@keyframes foodIn { from { transform: scale(0.2) translateY(-18px); opacity: 0; } }



/* eggs and chicks */



@keyframes eggWig { 0%, 100% { rotate: 0deg; } 18% { rotate: -9deg; } 40% { rotate: 8deg; } 62% { rotate: -6deg; } 82% { rotate: 4deg; } }
@keyframes eggTick { 0%, 100% { rotate: 0deg; } 25% { rotate: -5deg; } 55% { rotate: 4deg; } 80% { rotate: -2deg; } }







 
@keyframes chickBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-1.6px) rotate(-3deg); } 65% { transform: translateY(-0.6px) rotate(3deg); } }






@keyframes gulp { 40% { scale: 1.12 0.9; } 70% { scale: 0.96 1.06; } }
/* the caterpillar: a slow loop up its stem, across the leaf, round the tip and back down the underside */

@supports (offset-path: path('M0 0 L1 1')) {  }
@keyframes catLoop { 0% { offset-distance: 0%; } 14% { offset-distance: 22%; } 21% { offset-distance: 22%; } 40% { offset-distance: 41%; } 47% { offset-distance: 41%; } 62% { offset-distance: 66%; } 68% { offset-distance: 66%; } 90% { offset-distance: 96%; } 100% { offset-distance: 100%; } }
.cat-segs circle { transform-box: fill-box; transform-origin: 50% 100%; animation: catWave 1.2s ease-in-out infinite alternate; }
.cat-segs circle:nth-child(2) { animation-delay: -0.2s; } .cat-segs circle:nth-child(3) { animation-delay: -0.4s; } .cat-segs circle:nth-child(4) { animation-delay: -0.6s; } .cat-segs circle:nth-child(5) { animation-delay: -0.8s; }
@keyframes catWave { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-1.4px) scaleY(1.08); } }

@keyframes catNibble { 0%, 100% { transform: none; } 20% { transform: scale(1.08, 0.88); } 40% { transform: scale(0.94, 1.08) translateX(2px); } 60% { transform: scale(1.06, 0.9); } 80% { transform: scale(0.98, 1.04); } }





/* chrysalis */

@keyframes chSway { from { rotate: -2deg; } to { rotate: 2.5deg; } }






@keyframes chForm { 0% { transform: scale(0.5, 0.2); opacity: 0; filter: saturate(1.5); } 60% { transform: scale(1.1, 1.05); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes chThread { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }

@keyframes chShake { 0%, 100% { rotate: 0deg; } 15% { rotate: -9deg; } 35% { rotate: 8deg; } 55% { rotate: -6deg; } 75% { rotate: 4deg; } }





/* flowers to water */


@keyframes ydSway { from { rotate: -3.4deg; } to { rotate: 3.2deg; } }

@keyframes ydHit { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 55% { rotate: 7deg; } 80% { rotate: -3deg; } }


  


/* the watering can */



@keyframes canRock { 0%, 100% { rotate: 0deg; } 18% { rotate: -10deg; } 38% { rotate: 6deg; } 58% { rotate: -5deg; } 78% { rotate: 2deg; } }





body.is-watering .about-bloom, body.is-watering .title-bloom, body.is-watering .hero-flowers .bloom, body.is-watering .page-posy, body.is-watering .sc-bloom { filter: drop-shadow(0 0 5px rgba(120, 190, 230, 0.95)); cursor: pointer; }
/* the butterfly */






@keyframes ebFlap { from { transform: scaleX(1); } to { transform: scaleX(0.25); } }
@media (prefers-reduced-motion: reduce) {
    
    .cat-segs circle{ animation: none !important; }
    
}

/* Floating specimen labels retain clear space above their petals. */
.gs-skill .gs-inner { height: auto; min-height: var(--stage-h); }
.gs-skill .gs-plant { margin-top: var(--label-headroom, 60px); margin-bottom: 1rem; }
.gs-skill .gs-bud .gs-lab {
    inset: auto; left: var(--label-x, 50%); top: var(--label-y, -40px);
    width: var(--label-width, 120px); max-width: none;
    translate: none; transform: none; text-align: center;
    font-size: 1.12rem; font-weight: 500; line-height: 1.25;
    overflow-wrap: normal; text-wrap: balance;
    pointer-events: auto; cursor: pointer;
}
.gs-skill .gs-bud.is-active .gs-lab { font-weight: 500; }
.gs-skill .gs-note { max-height: none; overflow: visible; rotate: none; }
/* Patterned washi holds the opened skill index card at its top edge. */
.gs-skill .gs-note::after {
    content: ''; position: absolute; z-index: 1; top: -9px; left: var(--tape-left, 48%);
    width: clamp(64px, 28%, 108px); height: 20px;
    translate: -50% 0; rotate: var(--tape-angle, -5deg);
    background-color: color-mix(in srgb, var(--sk) 28%, #fff8ec);
    background-image: repeating-linear-gradient(115deg, transparent 0 6px, rgba(255, 255, 255, 0.38) 6px 8px);
    clip-path: polygon(2% 0, 98% 0, 96% 18%, 100% 34%, 97% 51%, 100% 72%, 97% 100%, 1% 100%, 3% 80%, 0 62%, 3% 44%, 0 23%);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.45), inset 0 -1px rgba(110, 80, 60, 0.1);
    opacity: 0.85; pointer-events: none;
}
.gs-skill:is([data-cat="ml"], [data-cat="art"]) .gs-note { --tape-left: 54%; --tape-angle: 4deg; }
.gs-skill:is([data-cat="ml"], [data-cat="art"]) .gs-note::after {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.65) 1px, transparent 1.5px);
    background-size: 7px 7px;
}
.gs-skill:is([data-cat="data"], [data-cat="writing"]) .gs-note { --tape-left: 45%; --tape-angle: -3deg; }
.gs-skill:is([data-cat="data"], [data-cat="writing"]) .gs-note::after {
    background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, 0.3) 5px 6px), repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, 0.3) 5px 6px);
}
.gs-skill:is([data-cat="cad"], [data-cat="hobbies"]) .gs-note { --tape-left: 51%; --tape-angle: 6deg; }
.gs-skill:is([data-cat="cad"], [data-cat="hobbies"]) .gs-note::after {
    background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.38) 9px 12px);
}

.gs-skill .gn-title, .gs-skill .gn-text { overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .gs-skill .gs-bud .gs-lab { font-size: 1rem; }
    .gs-skill .gs-inner { min-height: 0; row-gap: 0; }
    /* Reclaim the empty bottom of the diagram canvas; artwork stays full-size. */
    .gs-skill .gs-plant { margin-bottom: clamp(-48px, -10vw, -32px); }
    .gs-skill .gs-note {
        min-height: 0; margin-top: 0; padding: 0.85rem 0.8rem 0.5rem;
    }
    .gs-skill .gn-kicker { font-size: 1.1rem; }
    .gs-skill .gn-title { margin-top: 0.1rem; font-size: 1.2rem; }
    .gs-skill .gn-text { margin-top: 0.4rem; line-height: 1.4; }
    .gs-skill .gn-text a, .gs-skill .gn-text button {
        max-width: 100%; min-height: 32px; padding: 0.15rem 0.5rem;
        margin: 0.1rem 0.05rem; line-height: 1.3;
    }
    /* Keep controls in normal flow so short notes never reserve a tall footer. */
    .gs-skill .gn-nav { position: static; margin-top: 0.3rem; }
    .gs-skill .gn-nav button { width: 40px; height: 40px; }
}

/* Let the existing trunk finish beneath the tapered flower stalks. */
.gs-exp .settled .gs-stem { stroke-dasharray: none; }