/* ============================================
   FLOWERS-WEB-2026 (React → Django)
   Helpers y keyframes que vivían en index.html y en <style> de componentes React.
   Compatible con Bootstrap 5 como base de layout/componentes.
   ============================================ */

/* ----- index.html (React), capa film / layout helpers ----- */

.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.05%22/%3E%3C/svg%3E");
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.img-loading {
    background: #fce8eb;
}

/* Opcional: clase del body React (fs-bg-hearts en Django ya cubre papel + corazones) */
.bg-hearts {
    background-color: #fff5f7;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z' fill='%23C25E66' fill-opacity='0.03'/%3E%3C/svg%3E");
}

/* ----- Hero.tsx ----- */

.clip-tear {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.animate-blink {
    animation: fw2026-blink 1s step-end infinite;
}

@keyframes fw2026-blink {
    50% {
        opacity: 0;
    }
}

.path-draw {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: fw2026-draw 2s linear forwards;
    animation-delay: 1s;
}

@keyframes fw2026-draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ----- Preloader.tsx ----- */

@keyframes fw2026-fall {
    0% {
        transform: translateY(-10vh) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(110vh) scale(1);
        opacity: 0;
    }
}

@keyframes fw2026-shine {
    0% {
        transform: translateX(-150%) skewX(-20deg);
    }

    100% {
        transform: translateX(250%) skewX(-20deg);
    }
}

.animate-fall {
    animation: fw2026-fall linear forwards;
}

.animate-shine {
    animation: fw2026-shine 3s ease-in-out infinite;
}

/* ----- ThematicTicker.tsx ----- */

.animate-marquee {
    animation: fw2026-marquee 40s linear infinite;
}

@keyframes fw2026-marquee {
    0% {
        transform: translateX(0);
    }

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

/* ----- ThematicOverlay.tsx ----- */

@keyframes fw2026-float-up {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(-110vh) rotate(20deg);
        opacity: 0;
    }
}

.animate-float-up {
    animation-name: fw2026-float-up;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}