/**
 * Animación balde blanco → planta con flor.
 *
 * Autor: Juan Morel (jcmorelm@mvisual.cl)
 */

.compost-escena {
    margin: 0 auto 0.75rem;
    max-width: 7.5rem;
    width: 72%;
}

.compost-escena__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.compost-escena__suelo {
    fill: none;
    stroke: rgba(30, 70, 32, 0.22);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.compost-escena__sombra {
    fill: rgba(26, 36, 28, 0.08);
    opacity: 0;
}

.compost-escena__compost {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
}

.compost-escena__vegetal {
    transform-box: fill-box;
    transform-origin: 80px 114px;
    opacity: 0;
}

.compost-escena__tallo {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
}

.compost-escena__hoja {
    transform-box: fill-box;
    opacity: 0;
    transform: scale(0.15);
}

.compost-escena__hoja--1 {
    transform-origin: 80px 106px;
}

.compost-escena__hoja--2 {
    transform-origin: 80px 96px;
}

.compost-escena__hoja--3 {
    transform-origin: 80px 88px;
}

.compost-escena__flor {
    transform-box: fill-box;
    transform-origin: 0 0;
}

.compost-escena__flor-brote {
    transform-box: fill-box;
    transform-origin: 0 -3px;
    opacity: 0;
    transform: scale(0);
}

.compost-escena__flor-corola {
    transform-box: fill-box;
    transform-origin: 0 -4px;
    opacity: 0;
    transform: scale(0.2);
}

.compost-escena__flor-caliz {
    transform-box: fill-box;
    transform-origin: 0 0;
    opacity: 0;
}

.compost-escena__petalo {
    transform-box: fill-box;
    transform-origin: 0 -4px;
    opacity: 0;
    transform: scale(0);
}

.compost-escena__flor-centro {
    transform-box: fill-box;
    transform-origin: 0 -4px;
    opacity: 0;
    transform: scale(0);
}

.compost-escena__balde {
    transform-box: fill-box;
    transform-origin: center bottom;
}

.compost-escena__restos {
    transform-box: fill-box;
    transform-origin: center;
}

.compost-escena__gota {
    opacity: 0;
}

.compost-escena__particula {
    opacity: 0;
}

/* —— Ciclo principal (8 s) —— */

.pagina-mantenimiento--animada .compost-escena {
    animation-name: dv-entrar-arriba;
    animation-duration: 0.65s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.12s;
    animation-fill-mode: both;
}

.pagina-mantenimiento--animada .compost-escena__balde {
    animation-name: compost-balde-ciclo;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__restos {
    animation-name: compost-restos-ciclo;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__gota--1,
.pagina-mantenimiento--animada .compost-escena__gota--2 {
    animation-name: compost-gota-cae;
    animation-duration: 8s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__gota--2 {
    animation-delay: 0.08s;
}

.pagina-mantenimiento--animada .compost-escena__sombra {
    animation-name: compost-sombra-ciclo;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__compost {
    animation-name: compost-monticulo-ciclo;
    animation-duration: 8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__particula--1,
.pagina-mantenimiento--animada .compost-escena__particula--2,
.pagina-mantenimiento--animada .compost-escena__particula--3 {
    animation-name: compost-particula-brilla;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__particula--2 {
    animation-delay: 0.15s;
}

.pagina-mantenimiento--animada .compost-escena__particula--3 {
    animation-delay: 0.3s;
}

.pagina-mantenimiento--animada .compost-escena__tallo {
    animation-name: compost-tallo-dibujo;
    animation-duration: 8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__hoja--1 {
    animation-name: compost-hoja-abre;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__hoja--2 {
    animation-name: compost-hoja-abre;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
    animation-iteration-count: infinite;
    animation-delay: 0.06s;
}

.pagina-mantenimiento--animada .compost-escena__hoja--3 {
    animation-name: compost-hoja-abre;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
    animation-iteration-count: infinite;
    animation-delay: 0.12s;
}

.pagina-mantenimiento--animada .compost-escena__flor {
    animation-name: compost-flor-subir;
    animation-duration: 8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__flor-caliz {
    animation-name: compost-caliz-aparece;
    animation-duration: 8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__flor-brote {
    animation-name: compost-brote-aparece;
    animation-duration: 8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__flor-corola {
    animation-name: compost-corola-abre;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1);
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__petalo {
    animation-name: compost-petalo-abre;
    animation-duration: 8s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__petalo--1 { animation-delay: 0s; }
.pagina-mantenimiento--animada .compost-escena__petalo--2 { animation-delay: 0.04s; }
.pagina-mantenimiento--animada .compost-escena__petalo--3 { animation-delay: 0.08s; }
.pagina-mantenimiento--animada .compost-escena__petalo--4 { animation-delay: 0.12s; }
.pagina-mantenimiento--animada .compost-escena__petalo--5 { animation-delay: 0.16s; }

.pagina-mantenimiento--animada .compost-escena__flor-centro {
    animation-name: compost-centro-flor;
    animation-duration: 8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .compost-escena__vegetal {
    animation-name: compost-vegetal-visible, compost-vegetal-balanceo;
    animation-duration: 8s, 2.5s;
    animation-timing-function: ease-out, ease-in-out;
    animation-delay: 0s, 5.4s;
    animation-iteration-count: infinite, infinite;
}

@keyframes compost-balde-ciclo {
    0%,
    8% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    12% {
        transform: translateY(-2px) scale(1.02);
    }

    16%,
    22% {
        transform: translateY(0) scale(1);
    }

    32% {
        opacity: 1;
        transform: translateY(6px) scale(0.94);
    }

    42%,
    100% {
        opacity: 0;
        transform: translateY(14px) scale(0.82);
    }
}

@keyframes compost-restos-ciclo {
    0%,
    10% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }

    18% {
        transform: translateY(3px) rotate(-4deg);
    }

    26% {
        opacity: 0.6;
        transform: translateY(10px) scale(0.85);
    }

    34%,
    100% {
        opacity: 0;
        transform: translateY(18px) scale(0.5);
    }
}

@keyframes compost-gota-cae {
    0%,
    14% {
        opacity: 0;
        transform: translateY(0);
    }

    18% {
        opacity: 0.8;
    }

    28% {
        opacity: 0;
        transform: translateY(28px);
    }

    100% {
        opacity: 0;
        transform: translateY(28px);
    }
}

@keyframes compost-sombra-ciclo {
    0%,
    38% {
        opacity: 0;
        transform: scaleX(0.6);
    }

    48%,
    88% {
        opacity: 1;
        transform: scaleX(1);
    }

    96%,
    100% {
        opacity: 0;
        transform: scaleX(0.6);
    }
}

@keyframes compost-monticulo-ciclo {
    0%,
    36% {
        opacity: 0;
        transform: scale(0.5);
    }

    46%,
    88% {
        opacity: 1;
        transform: scale(1);
    }

    96%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes compost-particula-brilla {
    0%,
    44% {
        opacity: 0;
    }

    52%,
    70% {
        opacity: 1;
    }

    88%,
    100% {
        opacity: 0;
    }
}

@keyframes compost-tallo-dibujo {
    0%,
    38% {
        stroke-dashoffset: 44;
    }

    52%,
    88% {
        stroke-dashoffset: 0;
    }

    96%,
    100% {
        stroke-dashoffset: 44;
    }
}

@keyframes compost-hoja-abre {
    0%,
    46% {
        opacity: 0;
        transform: scale(0.12);
    }

    56%,
    88% {
        opacity: 1;
        transform: scale(1);
    }

    96%,
    100% {
        opacity: 0;
        transform: scale(0.12);
    }
}

@keyframes compost-vegetal-visible {
    0%,
    38% {
        opacity: 0;
    }

    44%,
    88% {
        opacity: 1;
    }

    96%,
    100% {
        opacity: 0;
    }
}

@keyframes compost-flor-subir {
    0%,
    50% {
        transform: translateY(6px);
    }

    58%,
    88% {
        transform: translateY(0);
    }

    96%,
    100% {
        transform: translateY(6px);
    }
}

@keyframes compost-caliz-aparece {
    0%,
    52% {
        opacity: 0;
        transform: scale(0.5);
    }

    58%,
    88% {
        opacity: 1;
        transform: scale(1);
    }

    96%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes compost-brote-aparece {
    0%,
    54% {
        opacity: 0;
        transform: scale(0);
    }

    60%,
    66% {
        opacity: 1;
        transform: scale(1.08);
    }

    68%,
    88% {
        opacity: 0;
        transform: scale(0.6);
    }

    96%,
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

@keyframes compost-corola-abre {
    0%,
    62% {
        opacity: 0;
        transform: scale(0.15);
    }

    72%,
    88% {
        opacity: 1;
        transform: scale(1);
    }

    96%,
    100% {
        opacity: 0;
        transform: scale(0.15);
    }
}

@keyframes compost-petalo-abre {
    0%,
    64% {
        opacity: 0;
        transform: scale(0);
    }

    70%,
    88% {
        opacity: 1;
        transform: scale(1);
    }

    96%,
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

@keyframes compost-centro-flor {
    0%,
    66% {
        opacity: 0;
        transform: scale(0);
    }

    74%,
    88% {
        opacity: 1;
        transform: scale(1);
    }

    96%,
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

@keyframes compost-vegetal-balanceo {
    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(2.5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-mantenimiento--animada .compost-escena,
    .pagina-mantenimiento--animada .compost-escena__balde,
    .pagina-mantenimiento--animada .compost-escena__restos,
    .pagina-mantenimiento--animada .compost-escena__gota,
    .pagina-mantenimiento--animada .compost-escena__sombra,
    .pagina-mantenimiento--animada .compost-escena__compost,
    .pagina-mantenimiento--animada .compost-escena__particula,
    .pagina-mantenimiento--animada .compost-escena__tallo,
    .pagina-mantenimiento--animada .compost-escena__hoja,
    .pagina-mantenimiento--animada .compost-escena__flor,
    .pagina-mantenimiento--animada .compost-escena__flor-brote,
    .pagina-mantenimiento--animada .compost-escena__flor-corola,
    .pagina-mantenimiento--animada .compost-escena__petalo,
    .pagina-mantenimiento--animada .compost-escena__flor-centro,
    .pagina-mantenimiento--animada .compost-escena__flor-caliz,
    .pagina-mantenimiento--animada .compost-escena__vegetal {
        animation: none;
    }

    .compost-escena__balde {
        opacity: 0;
    }

    .compost-escena__compost,
    .compost-escena__sombra {
        opacity: 1;
    }

    .compost-escena__vegetal {
        opacity: 1;
        transform: none;
    }

    .compost-escena__tallo {
        stroke-dashoffset: 0;
    }

    .compost-escena__hoja,
    .compost-escena__flor-corola,
    .compost-escena__petalo,
    .compost-escena__flor-centro,
    .compost-escena__flor-caliz {
        opacity: 1;
        transform: scale(1);
    }

    .compost-escena__flor {
        transform: translateY(0);
    }

    .compost-escena__flor-brote {
        opacity: 0;
    }
}

@media (min-width: 576px) {
    .compost-escena {
        max-width: 8.5rem;
    }
}