/*
 * Leaftide public wizard: decorative garden canvas (garden_canvas.js).
 * Every selector is scoped under .gc so the canvas can sit on any page.
 * Ground tiles are the plot designer's texture art, copied to static.
 */

.gc {
    --gc-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --gc-sky1: #c3dbeb;
    --gc-sky2: #dce9ef;
    --gc-sky3: #f8eadb;
    --gc-sun-bg: radial-gradient(circle, #fff3c9 0 20%, #ffdc80 31%, rgba(255, 214, 122, .42) 40%, rgba(255, 214, 122, .14) 55%, rgba(255, 214, 122, 0) 70%);
    --gc-glow: radial-gradient(ellipse 75% 65% at 88% 8%, rgba(255, 226, 164, .34), rgba(255, 226, 164, 0) 70%);
    --gc-stars: none;
    --gc-cloud-opacity: .95;
    --gc-lawn1: #a9c27f;
    --gc-haze0: rgba(248, 238, 218, .74);
    --gc-haze1: rgba(234, 232, 204, .42);
    --gc-haze2: rgba(218, 224, 186, .2);
    --gc-stripe: rgba(255, 255, 255, .13);
    --gc-soil-wash: rgba(60, 35, 20, .18);
    --gc-soil: #a5805f;
    --gc-soil2: #8b6a4e;
    --gc-path-wash1: rgba(214, 214, 170, .78);
    --gc-path-wash2: rgba(206, 188, 146, .5);
    --gc-bedwood: #9b6c47;
    --gc-bedsoil: #7a583f;
    --gc-deck: #c9a57c;
    --gc-rail: #4a564d;
    --gc-wall: #ece4d5;
    --gc-roof: #dfe3d6;
    --gc-tagbg: #fffdf8;
    --gc-border: #e5e3db;
    --gc-ink: #111827;
    --gc-ink2: #4b5563;
    --gc-ink3: #6b7280;
    --gc-brand: #256c42;
    --gc-red: #b91c1c;
    --gc-gold: #d97706;
    --gc-contact: rgba(0, 0, 0, .13);
    --gc-paver: #ddd2bd;
    --gc-leaf1: #2f7a4f;
    --gc-leaf2: #1d4f33;
    --gc-img-filter: none;
    --gc-ground-filter: none;

    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    container: gc / size;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--gc-sky1) 0%, var(--gc-sky2) 30%, var(--gc-sky3) 52%);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark: class-based theme first, OS preference only when the user has not forced light. */
html.dark .gc {
    --gc-sky1: #17203d;
    --gc-sky2: #252b55;
    --gc-sky3: #403b66;
    --gc-sun-bg: radial-gradient(circle at 43% 45%, rgba(176, 166, 136, .32) 0 3.4%, transparent 3.9%), radial-gradient(circle at 57% 56%, rgba(176, 166, 136, .26) 0 2.3%, transparent 2.8%), radial-gradient(circle at 53% 38%, rgba(176, 166, 136, .2) 0 1.6%, transparent 2.1%), radial-gradient(circle, #fbf5e2 0, #ece2c6 27.5%, rgba(236, 226, 198, 0) 28.1%), radial-gradient(circle, rgba(214, 210, 255, .22) 28%, rgba(200, 196, 240, .08) 45%, rgba(200, 196, 240, 0) 68%);
    --gc-glow: radial-gradient(ellipse 70% 60% at 88% 8%, rgba(196, 190, 255, .12), rgba(196, 190, 255, 0) 70%);
    --gc-stars: block;
    --gc-cloud-opacity: .32;
    --gc-lawn1: #33422c;
    --gc-haze0: rgba(52, 48, 88, .58);
    --gc-haze1: rgba(40, 40, 72, .34);
    --gc-haze2: rgba(28, 32, 52, .16);
    --gc-stripe: rgba(255, 255, 255, .04);
    --gc-soil-wash: rgba(0, 0, 0, .3);
    --gc-soil: #5a4635;
    --gc-soil2: #4a392b;
    --gc-path-wash1: rgba(150, 146, 112, .55);
    --gc-path-wash2: rgba(140, 120, 92, .4);
    --gc-bedwood: #7a5538;
    --gc-bedsoil: #3f3023;
    --gc-deck: #5d4834;
    --gc-rail: #8a958c;
    --gc-wall: #2c2a26;
    --gc-roof: #2b322d;
    --gc-tagbg: #232323;
    --gc-border: #3a3a3a;
    --gc-ink: #f3f4f6;
    --gc-ink2: #d1d5db;
    --gc-ink3: #a3a8b0;
    --gc-brand: #5cae79;
    --gc-red: #f87171;
    --gc-gold: #fbbf24;
    --gc-contact: rgba(0, 0, 0, .22);
    --gc-paver: #a69c88;
    --gc-leaf1: #3d8a5c;
    --gc-leaf2: #245a3b;
    --gc-img-filter: brightness(.92) saturate(.95);
    --gc-ground-filter: brightness(.6) saturate(.85);
}
@media (prefers-color-scheme: dark) {
    html:not(.light) .gc {
        --gc-sky1: #17203d;
        --gc-sky2: #252b55;
        --gc-sky3: #403b66;
        --gc-sun-bg: radial-gradient(circle at 43% 45%, rgba(176, 166, 136, .32) 0 3.4%, transparent 3.9%), radial-gradient(circle at 57% 56%, rgba(176, 166, 136, .26) 0 2.3%, transparent 2.8%), radial-gradient(circle at 53% 38%, rgba(176, 166, 136, .2) 0 1.6%, transparent 2.1%), radial-gradient(circle, #fbf5e2 0, #ece2c6 27.5%, rgba(236, 226, 198, 0) 28.1%), radial-gradient(circle, rgba(214, 210, 255, .22) 28%, rgba(200, 196, 240, .08) 45%, rgba(200, 196, 240, 0) 68%);
        --gc-glow: radial-gradient(ellipse 70% 60% at 88% 8%, rgba(196, 190, 255, .12), rgba(196, 190, 255, 0) 70%);
        --gc-stars: block;
        --gc-cloud-opacity: .32;
        --gc-lawn1: #33422c;
        --gc-haze0: rgba(52, 48, 88, .58);
        --gc-haze1: rgba(40, 40, 72, .34);
        --gc-haze2: rgba(28, 32, 52, .16);
        --gc-stripe: rgba(255, 255, 255, .04);
        --gc-soil-wash: rgba(0, 0, 0, .3);
        --gc-soil: #5a4635;
        --gc-soil2: #4a392b;
        --gc-path-wash1: rgba(150, 146, 112, .55);
        --gc-path-wash2: rgba(140, 120, 92, .4);
        --gc-bedwood: #7a5538;
        --gc-bedsoil: #3f3023;
        --gc-deck: #5d4834;
        --gc-rail: #8a958c;
        --gc-wall: #2c2a26;
        --gc-roof: #2b322d;
        --gc-tagbg: #232323;
        --gc-border: #3a3a3a;
        --gc-ink: #f3f4f6;
        --gc-ink2: #d1d5db;
        --gc-ink3: #a3a8b0;
        --gc-brand: #5cae79;
        --gc-red: #f87171;
        --gc-gold: #fbbf24;
        --gc-contact: rgba(0, 0, 0, .22);
        --gc-paver: #a69c88;
        --gc-leaf1: #3d8a5c;
        --gc-leaf2: #245a3b;
        --gc-img-filter: brightness(.92) saturate(.95);
        --gc-ground-filter: brightness(.6) saturate(.85);
    }
}

.gc > * { position: absolute; }
.gc img { max-width: none; user-select: none; -webkit-user-drag: none; }

/* ---------------------------------------------------------------- sky */
.gc-stars {
    display: var(--gc-stars); inset: 0 0 48% 0; z-index: 1; opacity: .85;
    background:
        radial-gradient(circle at 8% 14%, #fff8e6 0 1px, transparent 1.6px),
        radial-gradient(circle at 22% 34%, #fff8e6 0 .8px, transparent 1.4px),
        radial-gradient(circle at 37% 9%, #fff8e6 0 1.1px, transparent 1.7px),
        radial-gradient(circle at 51% 27%, #fff8e6 0 .8px, transparent 1.4px),
        radial-gradient(circle at 63% 12%, #fff8e6 0 1px, transparent 1.6px),
        radial-gradient(circle at 72% 44%, #fff8e6 0 .7px, transparent 1.3px),
        radial-gradient(circle at 30% 58%, #fff8e6 0 .7px, transparent 1.3px),
        radial-gradient(circle at 95% 52%, #fff8e6 0 .8px, transparent 1.4px);
    animation: gc-twinkle 6s ease-in-out infinite alternate;
}
@keyframes gc-twinkle { from { opacity: .85; } to { opacity: .55; } }
.gc-sun {
    z-index: 2; right: 5%; top: 2%; width: 15cqh; height: 15cqh; border-radius: 50%;
    background: var(--gc-sun-bg);
}
.gc[data-scene="balcony"] .gc-sun { right: 11%; }
.gc-clouds { inset: 0; z-index: 3; }
.gc-clouds img { position: absolute; width: auto; opacity: var(--gc-cloud-opacity); filter: brightness(1.12) saturate(.45); }
.gc-c1 { top: 17%; left: 9%; height: 6cqh; animation: gc-drift 120s ease-in-out infinite alternate; }
@keyframes gc-drift { from { transform: translateX(-3cqw); } to { transform: translateX(8cqw); } }
/* a very gentle warm (dusk: cool) light wash from the sun's corner over the whole scene */
.gc-glow { inset: 0; z-index: 4; background: var(--gc-glow); }

/* ---------------------------------------------------------------- ground */
.gc-grounds { inset: 0; z-index: 3; }
.gc-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--gc-ease); }
.gc-layer.gc-on { opacity: 1; }
.gc-lawn, .gc-path, .gc-bed, .gc-hedge, .gc-deck { filter: var(--gc-ground-filter); }

/* the plot designer's grass-lawn tile, muted under a soft horizon haze */
.gc-lawn {
    position: absolute; left: -20%; right: -20%; bottom: 0;
    border-radius: 50% 50% 0 0 / 7% 7% 0 0;
    background:
        linear-gradient(180deg, var(--gc-haze0) 0%, var(--gc-haze1) 30%, var(--gc-haze2) 100%),
        url("../images/wizard/ground/grass-lawn.846c66c5595e.webp") 0 0 / 150px 150px,
        var(--gc-lawn1);
}
.gc-lawn-large {
    background:
        linear-gradient(180deg, var(--gc-haze0) 0%, var(--gc-haze1) 30%, var(--gc-haze2) 100%),
        repeating-linear-gradient(90deg, var(--gc-stripe) 0, var(--gc-stripe) 4%, transparent 6%, transparent 10%, var(--gc-stripe) 12%),
        url("../images/wizard/ground/grass-lawn.846c66c5595e.webp") 0 0 / 150px 150px,
        var(--gc-lawn1);
}
.gc-bed {
    position: absolute; border-radius: 4px; overflow: hidden;
    background:
        linear-gradient(180deg, transparent 0 52%, var(--gc-bedwood) 52% 100%),
        linear-gradient(180deg, var(--gc-soil-wash), var(--gc-soil-wash)),
        url("../images/wizard/ground/soil-medium.d763b48d90a8.webp") 0 0 / 90px 90px,
        var(--gc-bedsoil);
}
.gc-bed::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
    background:
        repeating-linear-gradient(90deg, transparent 0 24.6%, rgba(0, 0, 0, .10) 24.6% 25%),
        linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 30%);
}
.gc-path {
    position: absolute; left: 50%; bottom: 0; width: 12%; transform: translateX(-50%); opacity: .8;
    clip-path: polygon(0 100%, 100% 100%, 64% 0, 36% 0);
    background:
        linear-gradient(180deg, var(--gc-path-wash1), var(--gc-path-wash2)),
        url("../images/wizard/ground/soil-medium.d763b48d90a8.webp") 0 0 / 110px 110px,
        var(--gc-soil);
}
.gc-hedge {
    position: absolute; left: -5%; right: -5%;
    border-radius: 40% 40% 0 0 / 100% 100% 0 0;
    background: color-mix(in srgb, var(--gc-lawn1) 70%, #3d5a2f); opacity: .55;
}
.gc-tuft { position: absolute; width: auto; transform: translateX(-50%); transform-origin: 50% 100%; filter: var(--gc-img-filter); opacity: .9; }
.gc-l-garden .gc-tuft:nth-of-type(odd), .gc-l-large .gc-tuft:nth-of-type(odd) { animation: gc-tuft 7s ease-in-out infinite alternate; }
@keyframes gc-tuft { from { transform: translateX(-50%) rotate(-1.5deg); } to { transform: translateX(-50%) rotate(1.5deg); } }

/* balcony: rooftops, a railing and the decking tile */
.gc-deck {
    position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 14%, transparent 70%, rgba(60, 35, 20, .12)),
        url("../images/wizard/ground/wood-decking.25a4e9b2650c.webp") 0 0 / 140px 140px,
        var(--gc-deck);
}
.gc-rail {
    position: absolute; left: 0; right: 0; bottom: 32%; height: 20%; opacity: .7;
    background: repeating-linear-gradient(90deg, var(--gc-rail) 0 .7cqh, transparent .7cqh 4.5cqh);
}
.gc-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.4cqh; background: var(--gc-rail); border-radius: 2px; }
.gc-rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12%; height: .8cqh; background: var(--gc-rail); }
.gc-roofs {
    position: absolute; left: 0; right: 0; bottom: 44%; height: 16%;
    background:
        linear-gradient(var(--gc-roof), var(--gc-roof)) 4% 100% / 12% 60% no-repeat,
        linear-gradient(var(--gc-roof), var(--gc-roof)) 20% 100% / 9% 85% no-repeat,
        linear-gradient(var(--gc-roof), var(--gc-roof)) 38% 100% / 14% 50% no-repeat,
        linear-gradient(var(--gc-roof), var(--gc-roof)) 58% 100% / 8% 95% no-repeat,
        linear-gradient(var(--gc-roof), var(--gc-roof)) 72% 100% / 13% 65% no-repeat,
        linear-gradient(var(--gc-roof), var(--gc-roof)) 92% 100% / 10% 80% no-repeat;
}
.gc-walls { inset: 0; z-index: 6; }
.gc-wall {
    position: absolute; top: 0; bottom: 0; width: 9%; background: var(--gc-wall);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc-ink) 5%, transparent);
    transition: transform .3s var(--gc-ease);
}
.gc-wall-l { left: 0; transform: translateX(-100%); }
.gc-wall-r { right: 0; transform: translateX(100%); }
.gc[data-scene="balcony"] .gc-wall { transform: none; }

/* ---------------------------------------------------------------- pots, seedlings */
.gc-pot {
    position: relative; display: block;
    height: calc(var(--ph, 0) * var(--k, 1) * var(--g, 1) * 1cqh);
    width: calc(var(--ph, 0) * var(--k, 1) * var(--g, 1) * 1.25cqh);
    filter: var(--gc-img-filter);
    transition: height .3s var(--gc-ease), width .3s var(--gc-ease);
}
/* overflow: hidden, not visible: WebKit maps a 0x0 svg's viewBox with an identity transform
   and only skips painting an empty viewport when it clips, so the lawn plants' 0px pots
   (--ph: 0) drew at the viewBox size, 125 x 100px, below each plant on iOS Safari. The pot
   artwork stays inside its viewBox, so clipping costs nothing at any other size. */
.gc-pot svg { display: block; width: 100%; height: 100%; overflow: hidden; }
/* Pot layering: the whole pot paints behind the plant, so the plant's lower part (stems,
   lower leaves) sits in front of the rim and reads as growing out of the pot rather than
   hiding behind it. Plants are anchored 18% down the pot, on the soil (shared pot renderer:
   its plant slot; visible soil runs ~15-23% down). Shadows go below the pot. */
.gc-pot { z-index: -1; }
.gc-defs-wrap { width: 0; height: 0; overflow: hidden; }
.gc-defs { position: absolute; width: 0; height: 0; }
.gc-seedling {
    position: relative; display: block;
    height: calc(var(--h) * var(--k, 1) * var(--g, 1) * var(--f, 1) * 1cqh); aspect-ratio: 1 / 1;
    transform-origin: 50% 100%;
}
.gc-pl-in > .gc-seedling { margin-bottom: calc(var(--ph) * var(--k, 1) * var(--g, 1) * -.18cqh); }
.gc-seedling svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gc-sd-stem { fill: none; stroke: var(--gc-leaf2); stroke-width: 2.6; stroke-linecap: round; }
.gc-sd-leaf { fill: var(--gc-leaf1); }
.gc-sd-rib { fill: none; stroke: var(--gc-leaf2); stroke-width: 1.4; stroke-linecap: round; }

.gc-intro { inset: 0; z-index: 5; transition: opacity .3s var(--gc-ease), transform .3s var(--gc-ease); }
.gc-intro.gc-gone { opacity: 0; transform: translateY(1.5cqh); }
.gc-intro-pot {
    position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    --h: 8.5; --ph: 7;
}
.gc-intro-pot > .gc-seedling { margin-bottom: calc(var(--ph) * var(--k, 1) * -.18cqh); }
.gc-intro-pot::after {
    content: ""; position: absolute; left: -8%; right: -8%; bottom: -1cqh; height: 2cqh; z-index: -2; border-radius: 50%;
    background: radial-gradient(closest-side, var(--gc-contact), transparent); filter: blur(1px);
}
.gc-intro-bfly {
    position: absolute; left: calc(50% + 6.5cqh * var(--k, 1)); bottom: 26%;
    animation: gc-flutter 7s ease-in-out infinite;
}
.gc-intro-bfly-img {
    display: block; width: auto; height: calc(4.2cqh * var(--k, 1)); filter: var(--gc-img-filter);
    transform-origin: 50% 50%; animation: gc-flap .6s ease-in-out infinite alternate;
}
@keyframes gc-flap { to { transform: scaleX(.72); } }

/* ---------------------------------------------------------------- plants */
/* --g (set per plant by garden_canvas.js growth()) enlarges a plant with its pot, seedling and
   patio so plants stay the subject; ground, tufts, tags and critters do not use it. */
.gc-plants { inset: 0; z-index: 5; }
.gc-pl {
    position: absolute; left: calc(var(--x) * 1% + var(--dx, 0) * var(--k, 1) * var(--g, 1) * 1cqh); bottom: calc(var(--b) * 1%);
    transform: translateX(-50%);
    transition: left .3s var(--gc-ease), bottom .3s var(--gc-ease);
}
.gc-pl.gc-featured { --f: 1.18; }
.gc-pl::before {
    content: ""; z-index: -2; position: absolute; left: 12%; right: 12%; bottom: -.9cqh; height: 1.8cqh; border-radius: 50%;
    background: radial-gradient(closest-side, var(--gc-contact), transparent);
    filter: blur(1px);
    transition: opacity .2s var(--gc-ease);
}
/* trees, shrubs and flowers on the lawn: a wider, equally soft contact shadow (no soil disc) */
.gc-pl.gc-wide::before { left: 2%; right: 2%; bottom: -1.1cqh; height: 2.2cqh; }
.gc-pl.gc-flat::before { display: none; }
/* small paved patio the potted houseplants stand on (never planted in the lawn) */
.gc-patio {
    display: block; width: calc(26cqh * var(--k, 1) * var(--g, 1)); height: calc(4.4cqh * var(--k, 1) * var(--g, 1)); border-radius: 50%;
    background:
        radial-gradient(closest-side, transparent 72%, color-mix(in srgb, var(--gc-lawn1) 60%, transparent) 100%),
        repeating-linear-gradient(90deg, transparent 0 calc(3.2cqh - 1px), rgba(90, 76, 56, .22) calc(3.2cqh - 1px) 3.2cqh),
        repeating-linear-gradient(0deg, transparent 0 calc(1.45cqh - 1px), rgba(90, 76, 56, .22) calc(1.45cqh - 1px) 1.45cqh),
        var(--gc-paver);
    filter: var(--gc-ground-filter);
}
.gc-pl-in { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%; }
.gc-pl img {
    display: block; width: auto; max-width: none;
    height: calc(var(--h) * var(--k, 1) * var(--g, 1) * var(--f, 1) * 1cqh);
    margin-bottom: calc(var(--ph) * var(--k, 1) * var(--g, 1) * -.18cqh);
    filter: var(--gc-img-filter); transform-origin: 50% 100%;
    transition: height .3s var(--gc-ease), opacity .2s var(--gc-ease);
}
/* A hand-marked plant in a pot (garden_canvas.js applyMark): the whole image, its marked
   base point (--bx, --by: image fractions) on the soil where an unmarked plant's bottom edge
   sits, centred over the pot; the part below the base (a trail) hangs in front of the pot. */
.gc-pl.gc-marked img {
    margin-bottom: calc(var(--ph) * var(--k, 1) * var(--g, 1) * -.18cqh - (1 - var(--by)) * var(--h) * var(--k, 1) * var(--g, 1) * var(--f, 1) * 1cqh);
    translate: calc((.5 - var(--bx)) * 100%) 0;
    transform-origin: calc(var(--bx) * 100%) calc(var(--by) * 100%);
}
.gc-pl.gc-scenery img { filter: saturate(.7) brightness(1.04) var(--gc-img-filter); opacity: .92; }

/* placeholder sprout: shows at once, before the image decodes */
.gc-sprout { position: absolute; left: 50%; bottom: calc(var(--ph) * var(--k, 1) * var(--g, 1) * .9cqh); transform: translateX(-50%); opacity: 0; transition: opacity .15s var(--gc-ease); }
.gc-sprout .gc-seedling { height: calc(min(var(--h), 5) * var(--k, 1) * var(--g, 1) * 1cqh); }
.gc-pl.gc-wait .gc-sprout { opacity: 1; }
.gc-pl.gc-wait img { opacity: 0; }
.gc-pl.gc-scenery .gc-sprout { display: none; }

.gc-pl.gc-new .gc-pl-in { animation: gc-grow .3s var(--gc-ease) both; animation-delay: var(--d, 0ms); }
.gc-pl.gc-new::before { animation: gc-shadow .3s var(--gc-ease) both; animation-delay: var(--d, 0ms); }
.gc-pl.gc-leaving .gc-pl-in { animation: gc-leave .2s var(--gc-ease) forwards; }
.gc-pl.gc-leaving::before { opacity: 0; }
@keyframes gc-grow { from { opacity: 0; transform: translateY(1.5cqh) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes gc-shadow { from { opacity: 0; transform: scaleX(.3); } to { opacity: 1; transform: none; } }
@keyframes gc-leave { to { opacity: 0; transform: translateY(1.5cqh) scale(.96); } }
.gc-celebrate .gc-pl:not(.gc-scenery) img, .gc-celebrate .gc-pl .gc-seedling {
    animation: gc-sway 1.8s cubic-bezier(.45, 0, .55, 1) both;
    animation-delay: calc(var(--i, 0) * 70ms + 500ms);
}
@keyframes gc-sway { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(1.4deg); } 70% { transform: rotate(-.8deg); } }

/* ---------------------------------------------------------------- critters */
.gc-critters { inset: 0; z-index: 7; }
.gc-critter { position: absolute; width: auto; opacity: 0; filter: var(--gc-img-filter); transition: opacity .3s var(--gc-ease); }
.gc-bfly { height: 4.5cqh; left: 40%; bottom: 64%; }
/* The white one (hero only) keeps to the right half, well apart from the orange one. */
.gc-bfly2 { height: 3.6cqh; left: 63%; bottom: 57%; }
.gc-has-bfly .gc-bfly { opacity: 1; animation: gc-flutter-in 1.4s var(--gc-ease) both, gc-flutter 7s ease-in-out 1.4s infinite; }
.gc-hero.gc-has-bfly .gc-bfly { left: 31%; bottom: 50%; }
.gc-hero.gc-has-bfly .gc-bfly2 { opacity: 1; animation: gc-flutter-in 1.4s var(--gc-ease) .8s both, gc-wander 14s ease-in-out 2.2s infinite; }
/* Static scenes (welcome, login, signup) open with the butterflies already in place:
   no fly-in or fade, just the idle loops. */
.gc-static.gc-has-bfly .gc-bfly { transition: none; animation: gc-flutter 7s ease-in-out infinite; }
.gc-static.gc-hero.gc-has-bfly .gc-bfly2 { transition: none; animation: gc-wander 14s ease-in-out infinite; }
@keyframes gc-flutter-in { from { opacity: 0; transform: translate(-8cqw, 6cqh) rotate(-10deg); } to { opacity: 1; transform: none; } }
@keyframes gc-flutter {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    33% { transform: translate(2cqw, -1.5cqh) rotate(6deg); }
    66% { transform: translate(-1cqw, -.5cqh) rotate(-4deg); }
}
/* a wider, slower loop than gc-flutter so the white butterfly visibly roams */
@keyframes gc-wander {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(-4cqw, -3cqh) rotate(-8deg); }
    50% { transform: translate(-7cqw, 1cqh) rotate(5deg); }
    75% { transform: translate(-2cqw, 3cqh) rotate(-4deg); }
}
/* the robin crosses the upper scene in hero mode (garden_canvas.js flyRobin) */
.gc-flyer { position: absolute; left: 0; top: 15%; will-change: transform; }
.gc-flyer .gc-robin { display: block; width: auto; max-width: none; filter: var(--gc-img-filter); }

/* ---------------------------------------------------------------- caption + tags */
.gc-caption {
    z-index: 8; left: 50%; top: 7%; transform: translateX(-50%); margin: 0;
    width: max-content; max-width: 86%; text-align: center;
    font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; font-style: italic;
    font-size: clamp(13px, 2.4cqh, 19px); color: var(--gc-ink2);
    transition: opacity .3s var(--gc-ease);
}
.gc-caption.gc-gone { opacity: 0; }

.gc-tags {
    z-index: 9; top: 20px; left: 20px; right: 20px;
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start;
    transition: opacity .3s var(--gc-ease);
}
.gc-tag {
    display: flex; gap: 10px; align-items: center;
    background: var(--gc-tagbg); border: 1px solid var(--gc-border); border-radius: 8px;
    padding: 8px 12px 8px 8px; box-shadow: 0 2px 8px rgba(30, 40, 20, .08);
    animation: gc-tag-in .3s var(--gc-ease) both;
}
.gc-tag[hidden] { display: none; }
.gc-tag-place { transform: rotate(.8deg); }
.gc-tag-season { transform: rotate(-1deg); }
.gc-tag-t { display: block; font-weight: 600; font-size: .875rem; line-height: 1.25; color: var(--gc-ink); }
.gc-tag-s { display: block; font-size: .8125rem; line-height: 1.25; color: var(--gc-ink3); }
.gc-badge { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; flex: 0 0 auto; }
.gc-badge svg { width: 18px; height: 18px; fill: currentColor; }
.gc-badge-red { color: var(--gc-red); background: color-mix(in srgb, var(--gc-red) 12%, transparent); }
.gc-badge-gold { color: var(--gc-gold); background: color-mix(in srgb, var(--gc-gold) 14%, transparent); }
@keyframes gc-tag-in { from { opacity: 0; translate: 0 -10px; } }
.gc-hero .gc-tags { opacity: 0; }

/* ---------------------------------------------------------------- ring pulse */
.gc-ring {
    inset: 0; z-index: 10; border-radius: inherit; opacity: 0;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--gc-brand) 60%, transparent),
        inset 0 -24px 40px -28px color-mix(in srgb, var(--gc-brand) 45%, transparent);
}
.gc-ring.gc-pulse { animation: gc-pulse .9s var(--gc-ease); }
@keyframes gc-pulse { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@media (min-width: 960px) { .gc-ring.gc-pulse { animation: none; } }

/* ---------------------------------------------------------------- container sizes */
@container gc (max-width: 599px) {
    .gc-tags { top: 10px; left: 10px; right: 10px; gap: 6px; }
    .gc-tag { padding: 5px 9px; gap: 7px; }
    .gc-badge { display: none; }
    .gc-tag-t { font-size: .75rem; }
    .gc-tag-s { font-size: .6875rem; }
    .gc-caption { top: 6%; }
}
@container gc (max-height: 150px) {
    .gc-tags, .gc-caption { display: none; }
}

/* ---------------------------------------------------------------- motion */
.gc-paused .gc-c1, .gc-paused .gc-stars, .gc-paused .gc-tuft, .gc-paused .gc-critter, .gc-paused .gc-intro-bfly, .gc-paused .gc-intro-bfly-img { animation-play-state: paused; }
.gc-rm *, .gc-rm *::before, .gc-rm *::after {
    animation: none !important;
    transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .gc *, .gc *::before, .gc *::after {
        animation: none !important;
        transition: none !important;
    }
}