.loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.loader.active {
    opacity: 1;
}

.flower-loader {
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
}

.flower-loader .petal {
    fill: #d5b06a;
    opacity: 0.8;
}

.flower-loader .petal:nth-child(1) { animation: pulse 1.5s ease-in-out 0s infinite; }
.flower-loader .petal:nth-child(2) { animation: pulse 1.5s ease-in-out 0.1875s infinite; }
.flower-loader .petal:nth-child(3) { animation: pulse 1.5s ease-in-out 0.375s infinite; }
.flower-loader .petal:nth-child(4) { animation: pulse 1.5s ease-in-out 0.5625s infinite; }
.flower-loader .petal:nth-child(5) { animation: pulse 1.5s ease-in-out 0.75s infinite; }
.flower-loader .petal:nth-child(6) { animation: pulse 1.5s ease-in-out 0.9375s infinite; }
.flower-loader .petal:nth-child(7) { animation: pulse 1.5s ease-in-out 1.125s infinite; }
.flower-loader .petal:nth-child(8) { animation: pulse 1.5s ease-in-out 1.3125s infinite; }

.flower-loader .center {
    fill: #ffd277;
}

.flower-loader-btn {
    position: relative;
    z-index: 1;
    width: 1.2em;
    height: 1.2em;
    display: block;
    margin: 0 auto;
}

.loader-text {
    font-size: var(--fs-base);
    color: #e8d8c3;
    margin: 0;
}

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

@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.3; }
}

.can-loader {
    width: 80px;
    height: 80px;
}

.can-loader .can-group {
    transform-origin: 47px 60px;
    animation: canTilt 2.4s ease-in-out infinite;
}

.can-loader .can-body {
    fill: #7d9c6a;
}

.can-loader .can-dark {
    fill: #648153;
}

.can-loader .can-drop {
    fill: #9ec7d8;
    opacity: 0;
}

.can-loader .can-drop:nth-of-type(1) { animation: canDropFall 2.4s ease-in 0.9s infinite; }
.can-loader .can-drop:nth-of-type(2) { animation: canDropFall 2.4s ease-in 1.15s infinite; }
.can-loader .can-drop:nth-of-type(3) { animation: canDropFall 2.4s ease-in 1.4s infinite; }

@keyframes canTilt {
    0%, 15% { transform: rotate(0deg); }
    40%, 75% { transform: rotate(-24deg); }
    95%, 100% { transform: rotate(0deg); }
}

@keyframes canDropFall {
    0%, 34% { opacity: 0; transform: translateY(0); }
    40% { opacity: 1; }
    62% { opacity: 1; transform: translateY(22px); }
    70%, 100% { opacity: 0; transform: translateY(26px); }
}

.sprout-loader {
    width: 80px;
    height: 80px;
}

.sprout-loader .sprout-soil {
    fill: #4a2c16;
    stroke: #2a1a11;
    stroke-width: 2;
}

.sprout-loader .sprout-seed {
    fill: #d5b06a;
    animation: sproutSeedSink 3s ease-in-out infinite;
}

.sprout-loader .sprout-stem {
    stroke: #7d9c6a;
    stroke-width: 5;
    stroke-linecap: round;
    fill: none;
    transform-origin: 50px 70px;
    animation: sproutStemGrow 3s ease-out infinite;
}

.sprout-loader .sprout-leaf {
    fill: #8fb573;
    transform-origin: 50px 42px;
}

.sprout-loader .sprout-leaf-left {
    transform: rotate(-28deg);
    animation: sproutLeafPopLeft 3s ease-out infinite;
}

.sprout-loader .sprout-leaf-right {
    transform: rotate(28deg);
    animation: sproutLeafPopRight 3s ease-out infinite;
}

@keyframes sproutSeedSink {
    0% { opacity: 1; transform: translateY(-18px); }
    20% { opacity: 1; transform: translateY(0); }
    30%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes sproutStemGrow {
    0%, 25% { transform: scaleY(0); }
    55% { transform: scaleY(1); }
    92% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}

@keyframes sproutLeafPopLeft {
    0%, 50% { transform: rotate(-28deg) scale(0); }
    68% { transform: rotate(-28deg) scale(1.15); }
    78% { transform: rotate(-28deg) scale(1); }
    92% { transform: rotate(-28deg) scale(1); opacity: 1; }
    100% { transform: rotate(-28deg) scale(1); opacity: 0; }
}

@keyframes sproutLeafPopRight {
    0%, 50% { transform: rotate(28deg) scale(0); }
    68% { transform: rotate(28deg) scale(1.15); }
    78% { transform: rotate(28deg) scale(1); }
    92% { transform: rotate(28deg) scale(1); opacity: 1; }
    100% { transform: rotate(28deg) scale(1); opacity: 0; }
}

.barrow-loader {
    width: 80px;
    height: 80px;
}

.barrow-loader .barrow-body {
    animation: barrowBump 0.6s ease-in-out infinite;
}

.barrow-loader .barrow-wood {
    fill: #a87a43;
}

.barrow-loader .barrow-wood-dark {
    fill: #7d5a31;
}

.barrow-loader .barrow-leg {
    fill: #5a3f22;
}

.barrow-loader .barrow-seed {
    fill: #d5b06a;
}

.barrow-loader .barrow-wheel {
    transform-origin: 38px 72px;
    animation: spin 0.9s linear infinite;
}

.barrow-loader .barrow-tire {
    fill: none;
    stroke: #4a3520;
    stroke-width: 3.5;
}

.barrow-loader .barrow-spoke {
    stroke: #4a3520;
    stroke-width: 2.5;
}

.barrow-loader .barrow-hub {
    fill: #2a1a11;
}

@keyframes barrowBump {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-2.5px) rotate(-1.5deg); }
    65% { transform: translateY(-1px) rotate(1deg); }
}

.bee-loader {
    width: 80px;
    height: 80px;
}

.bee-loader .bee-group {
    animation: beeFloat 1.8s ease-in-out infinite;
}

.bee-loader .bee-body {
    fill: #ffd277;
}

.bee-loader .bee-stripe {
    fill: #3d2415;
}

.bee-loader .bee-head {
    fill: #3d2415;
}

.bee-loader .bee-sting {
    fill: #3d2415;
}

.bee-loader .bee-wing {
    fill: #e8f4f8;
    opacity: 0.85;
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: beeFlap 0.18s ease-in-out infinite alternate;
}

.bee-loader .bee-wing-back {
    opacity: 0.55;
    animation-delay: 0.09s;
}

@keyframes beeFloat {
    0%, 100% { transform: translate(0, 0); }
    30% { transform: translate(2px, -4px); }
    70% { transform: translate(-2px, -2px); }
}

@keyframes beeFlap {
    from { transform: scaleY(1); }
    to { transform: scaleY(0.35); }
}

.shovel-loader {
    width: 80px;
    height: 80px;
}

.shovel-loader .shovel-soil {
    fill: #4a2c16;
    stroke: #2a1a11;
    stroke-width: 2;
}

.shovel-loader .shovel-group {
    transform-origin: 50px 50px;
    animation: shovelDig 2.2s ease-in-out infinite;
}

.shovel-loader .shovel-grip {
    fill: #7d5a31;
}

.shovel-loader .shovel-shaft {
    fill: #a87a43;
}

.shovel-loader .shovel-collar {
    fill: #7d7468;
}

.shovel-loader .shovel-blade {
    fill: #a8a294;
}

.shovel-loader .shovel-dirt {
    fill: #5a3f22;
    opacity: 0;
}

.shovel-loader .shovel-dirt:nth-of-type(1) { animation: shovelDirtToss 2.2s ease-out 0s infinite; }
.shovel-loader .shovel-dirt:nth-of-type(2) { animation: shovelDirtToss 2.2s ease-out 0.08s infinite; }
.shovel-loader .shovel-dirt:nth-of-type(3) { animation: shovelDirtTossRight 2.2s ease-out 0.05s infinite; }

@keyframes shovelDig {
    0%, 12% { transform: translateY(-9px) rotate(-10deg); }
    32% { transform: translateY(3px) rotate(-10deg); }
    48% { transform: translateY(3px) rotate(-16deg); }
    62% { transform: translateY(3px) rotate(-8deg); }
    80%, 100% { transform: translateY(-9px) rotate(-10deg); }
}

@keyframes shovelDirtToss {
    0%, 30% { opacity: 0; transform: translate(0, 0); }
    38% { opacity: 1; }
    58% { opacity: 1; transform: translate(-9px, -13px); }
    68%, 100% { opacity: 0; transform: translate(-11px, -15px); }
}

@keyframes shovelDirtTossRight {
    0%, 30% { opacity: 0; transform: translate(0, 0); }
    38% { opacity: 1; }
    58% { opacity: 1; transform: translate(8px, -11px); }
    68%, 100% { opacity: 0; transform: translate(10px, -13px); }
}

.rake-loader {
    width: 80px;
    height: 80px;
}

.rake-loader .rake-soil {
    fill: #4a2c16;
    stroke: #2a1a11;
    stroke-width: 2;
}

.rake-loader .rake-group {
    animation: rakeDrag 1.3s ease-in-out infinite alternate;
}

.rake-loader .rake-handle {
    stroke: #a87a43;
    stroke-width: 5;
    stroke-linecap: round;
}

.rake-loader .rake-bar {
    stroke: #7d5a31;
    stroke-width: 4.5;
    stroke-linecap: round;
}

.rake-loader .rake-tooth {
    stroke: #7d5a31;
    stroke-width: 3;
    stroke-linecap: round;
}

.rake-loader .rake-pebble {
    fill: #5a3f22;
}

.rake-loader .rake-pebble:nth-of-type(1) { animation: rakePebbleShift 1.3s ease-in-out infinite alternate; }
.rake-loader .rake-pebble:nth-of-type(2) { animation: rakePebbleShift 1.3s ease-in-out 0.1s infinite alternate; }
.rake-loader .rake-pebble:nth-of-type(3) { animation: rakePebbleShift 1.3s ease-in-out 0.05s infinite alternate; }

@keyframes rakeDrag {
    from { transform: translateX(-6px); }
    to { transform: translateX(7px); }
}

@keyframes rakePebbleShift {
    from { transform: translateX(3px); }
    to { transform: translateX(-3px); }
}

.shears-loader {
    width: 80px;
    height: 80px;
}

.shears-loader .shears-soil {
    fill: #4a2c16;
    stroke: #2a1a11;
    stroke-width: 2;
}

.shears-loader .shears-bush {
    transform-origin: 40px 70px;
    animation: shearsBushSnip 1.8s ease-in-out infinite;
}

.shears-loader .shears-trunk {
    fill: #5a3f22;
}

.shears-loader .shears-foliage {
    fill: #7d9c6a;
}

.shears-loader .shears-foliage-light {
    fill: #8fb573;
}

.shears-loader .shears-blade {
    fill: #a8a294;
}

.shears-loader .shears-handle {
    stroke: #5a3f22;
    stroke-width: 4.5;
    stroke-linecap: round;
}

.shears-loader .shears-arm-top {
    transform-origin: 64px 46px;
    animation: shearsSnipTop 1.8s ease-in-out infinite;
}

.shears-loader .shears-arm-bottom {
    transform-origin: 64px 46px;
    animation: shearsSnipBottom 1.8s ease-in-out infinite;
}

.shears-loader .shears-pivot {
    fill: #2a1a11;
}

.shears-loader .shears-leaf {
    fill: #8fb573;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: shearsLeafFall 1.8s ease-in infinite;
}

@keyframes shearsSnipTop {
    0%, 52% { transform: rotate(-9deg); }
    58%, 62% { transform: rotate(7deg); }
    72%, 100% { transform: rotate(-9deg); }
}

@keyframes shearsSnipBottom {
    0%, 52% { transform: rotate(9deg); }
    58%, 62% { transform: rotate(-7deg); }
    72%, 100% { transform: rotate(9deg); }
}

@keyframes shearsBushSnip {
    0%, 56% { transform: rotate(0deg); }
    62% { transform: rotate(-2.5deg); }
    68% { transform: rotate(2deg); }
    74%, 100% { transform: rotate(0deg); }
}

@keyframes shearsLeafFall {
    0%, 56% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    61% { opacity: 1; }
    92% { opacity: 1; transform: translate(-5px, 24px) rotate(70deg); }
    97%, 100% { opacity: 0; transform: translate(-5px, 26px) rotate(75deg); }
}

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

    .flower-loader .petal {
        animation: none;
        opacity: 0.8;
    }

    .can-loader .can-group,
    .can-loader .can-drop,
    .sprout-loader .sprout-seed,
    .sprout-loader .sprout-stem,
    .sprout-loader .sprout-leaf-left,
    .sprout-loader .sprout-leaf-right,
    .barrow-loader .barrow-body,
    .barrow-loader .barrow-wheel,
    .bee-loader .bee-group,
    .bee-loader .bee-wing,
    .shovel-loader .shovel-group,
    .shovel-loader .shovel-dirt,
    .rake-loader .rake-group,
    .rake-loader .rake-pebble,
    .shears-loader .shears-bush,
    .shears-loader .shears-arm-top,
    .shears-loader .shears-arm-bottom,
    .shears-loader .shears-leaf {
        animation: none;
    }
}