/* Cada pétalo (capa exterior: SOLO cae) */
.sakura {
    position: fixed;
    top: -20px;
    left: 0;

    width: var(--size, 14px);
    height: var(--size, 14px);

    pointer-events: none;
    z-index: -1;

    /* caída vertical fluida */
    animation: fall var(--fallDur, 10s) linear forwards;
    will-change: transform;
}

/* Capa interior (SOLO bamboleo + giro) */
.sakura-inner {
    display: block;
    width: 100%;
    height: 100%;

    animation:
        sway var(--swayDur, 3.6s) ease-in-out infinite,
        spin var(--spinDur, 5.5s) linear infinite;

    will-change: transform;
}

/* SVG dentro: ocupa todo el tamaño */
.sakura svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================
   Animaciones
   ========================= */

/* Caída vertical: solo Y (sin X) */
@keyframes fall {
    from {
        transform: translateY(-20px);
    }

    to {
        transform: translateY(110vh);
    }
}

/* Bamboleo lateral: inicia y termina en 0 -> sin “saltos” */
@keyframes sway {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(calc(var(--drift, 40px) * 0.6));
    }

    50% {
        transform: translateX(var(--drift, 40px));
    }

    75% {
        transform: translateX(calc(var(--drift, 40px) * 0.6));
    }

    100% {
        transform: translateX(0);
    }
}

/* Giro suave */
@keyframes spin {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}