/* Animaciones de plantilla - Elegantes y suaves + replicas specially.love */

/* ============================
   ENTRADA (7) — Suaves, duracion larga, easing cubic-bezier
   cubic-bezier(0.25, 0.1, 0.25, 1) = arranque muy suave, desaceleracion natural
   ============================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.animate-fade-in {
    animation-name: fadeIn;
    animation-duration: 1800ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation-name: fadeInUp;
    animation-duration: 1800ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-down {
    animation-name: fadeInDown;
    animation-duration: 1800ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-left {
    animation-name: fadeInLeft;
    animation-duration: 1800ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-right {
    animation-name: fadeInRight;
    animation-duration: 1800ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.animate-zoom-in {
    animation-name: zoomIn;
    animation-duration: 1500ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

@keyframes bloom {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

.animate-bloom {
    animation-name: bloom;
    animation-duration: 2200ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

/* ============================
   LOOP (2)
   ============================ */

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.animate-pulse {
    animation-name: pulse;
    animation-duration: 2000ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.animate-float {
    animation-name: float;
    animation-duration: 3000ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

/* ============================
   ESPECIAL (3) — Mas suaves
   ============================ */

@keyframes textReveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

.animate-text-reveal {
    animation-name: textReveal;
    animation-duration: 1600ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

@keyframes textMasking {
    from { clip-path: inset(0 50% 0 50%); }
    to   { clip-path: inset(0 0 0 0); }
}

.animate-text-masking {
    animation-name: textMasking;
    animation-duration: 1400ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

@keyframes blurEntrance {
    from { filter: blur(8px); opacity: 0; }
    to   { filter: blur(0); opacity: 1; }
}

.animate-blur-entrance {
    animation-name: blurEntrance;
    animation-duration: 1800ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-delay: 0ms;
    animation-fill-mode: both;
}

/* ============================
   REPLICAS (4) - Inspiradas en specially.love/demo-classic
   Loops continuos: dan vida organica a decos florales
   Usar transform-origin para anclar el punto de balanceo
   ============================ */

@keyframes sway {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    16%      { transform: translateX(2px) rotate(2deg); }
    33%      { transform: translateX(-2px) rotate(-2deg); }
    50%      { transform: translateX(1px) rotate(1deg); }
    66%      { transform: translateX(-1px) rotate(-1deg); }
}

.animate-sway {
    animation-name: sway;
    animation-duration: 10000ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes swaySoft {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    16%      { transform: rotate(1deg); }
    33%      { transform: translateX(-1px) rotate(-1deg); }
    50%      { transform: rotate(1deg); }
    66%      { transform: translateX(-1px) rotate(-1deg); }
}

.animate-sway-soft {
    animation-name: swaySoft;
    animation-duration: 10000ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes wind {
    0%, 100% { transform: rotate(0deg) translateX(0) translateY(0); }
    25%      { transform: rotate(2deg) translateX(2px) translateY(-2px); }
    50%      { transform: rotate(-2deg) translateX(-2px) translateY(2px); }
    75%      { transform: rotate(1deg) translateX(1px) translateY(-1px); }
}

.animate-wind {
    animation-name: wind;
    animation-duration: 5000ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes windy {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25%      { transform: rotate(2deg) translateY(-2px); }
    50%      { transform: rotate(-2deg) translateY(2px); }
    75%      { transform: rotate(1deg) translateY(-1px); }
}

.animate-windy {
    animation-name: windy;
    animation-duration: 5000ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}