/* =========================================================================
   Fleischmann — Capa de animación (PRUEBA DE CONCEPTO)
   Estilo inspirado en tostitos.com: texturas de marca, parallax y entradas
   escalonadas.

   ADITIVO y reversible: si se quitan los <script> de GSAP y este archivo
   del layout, el sitio vuelve exactamente a su estado anterior.
   Solo se activa cuando GSAP carga (clase .fx-enabled en <html>).
   ========================================================================= */

/* --- El contenido real siempre por encima de las capas animadas ---------- */
.fx-enabled .hero-content,
.fx-enabled .products-section .section-heading,
.fx-enabled .product-grid,
.fx-enabled .products-section .section-cta,
.fx-enabled .solution-copete,
.fx-enabled .audience-grid,
.fx-enabled .recipes-inner,
.fx-enabled .story-grid,
.fx-enabled .commercial-inner {
    position: relative;
    z-index: 2;
}

/* --- GSAP controla la entrada de estas secciones (evita doble animación
       con el sistema .home-reveal). El posible parpadeo queda bajo el fold. */
.fx-enabled .solution-section.home-reveal,
.fx-enabled .recipes-section.home-reveal,
.fx-enabled .story-section.home-reveal,
.fx-enabled .products-section.home-reveal,
.fx-enabled .commercial-section.home-reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* --- Texturas animadas (solo con GSAP activo) --------------------------- */
/* Cuando hay JS, la capa animada sustituye al fondo estático de textures.css
   para no duplicar el patrón. */
.fx-enabled .products-section {
    background: var(--blue);
}

.fx-enabled .commercial-section::after {
    display: none;
}

/* Quitar el watermark "AB" del fondo de la sección comercial (a pedido) */
.commercial-section::before {
    display: none;
}

.fx-tex {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.fx-tex-products {
    top: -12%;
    left: 0;
    right: 0;
    height: 124%;
    background-position: top left;
    background-size: 260px auto;
    background-repeat: repeat;
    will-change: transform;
}

.fx-tex-commercial {
    display: none;
    inset: 0;
    opacity: 0.22;
}

.fx-tex-commercial svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Timeline "Nosotros": versión dinámica (solo con GSAP activo) -------- */
.fx-enabled .timeline-item {
    opacity: 1;
    transform: none;
    transition: none;
}

.fx-enabled .timeline-year {
    transition: transform 340ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 320ms ease;
}

.fx-enabled .timeline-card {
    transition: box-shadow 300ms ease, border-color 300ms ease;
}

.timeline-item.fx-current .timeline-year {
    transform: scale(1.12);
}

.fx-enabled .timeline-year::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
}

.timeline-item.fx-current .timeline-year::before {
    opacity: 1;
    animation: fxYearPulse 1.8s ease-out infinite;
}

@keyframes fxYearPulse {
    0%   { box-shadow: 0 0 0 0 rgba(243, 194, 53, 0.5); }
    100% { box-shadow: 0 0 0 20px rgba(243, 194, 53, 0); }
}

.fx-timeline .timeline-track span {
    position: relative;
    overflow: visible;
}

.fx-timeline .timeline-track span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--gold);
    transform: translateX(-50%);
    box-shadow: 0 0 0 5px rgba(243, 194, 53, 0.22), 0 0 14px 3px rgba(243, 194, 53, 0.55);
}

/* --- Panes "voladores" con parallax (estilo Tostitos) ------------------- */
.fx-bread {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    will-change: transform, opacity;
}

.fx-bread img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.28));
}

/* contener los panes dentro de cada sección */
.fx-enabled .solution-section,
.fx-enabled .recipes-section,
.fx-enabled .story-section {
    overflow: hidden;
    position: relative;
}

/* posición y tamaño de cada pan */
.solution-section .fx-bread-2 { bottom: -24px; left: -34px;  width: clamp(120px, 14vw, 210px); }
.recipes-section .fx-bread-5  { top: 24px;     left: -26px;  width: clamp(115px, 13vw, 190px); }
.story-section .fx-bread-6    { bottom: -22px; right: -18px; width: clamp(120px, 13vw, 200px); }
.commercial-section .fx-bread-7 { bottom: -20px; left: -22px; width: clamp(115px, 13vw, 195px); }

@media (max-width: 1120px) {
    .fx-bread { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-bread { display: none !important; }
}

/* Panes flotantes en la página de recetarios (fuera del hero) */
.fx-enabled .recipe-library {
    overflow: hidden;
    position: relative;
}

.recipe-library .fx-bread-8  { top: 150px;    right: 2.5%; width: clamp(110px, 12vw, 180px); }
.recipe-library .fx-bread-9  { bottom: 190px; left: 2%;    width: clamp(110px, 12vw, 180px); }

/* Ronda 2026-07-20: la capa de textura animada nunca debe tapar contenido */
.products-section > :not(.fx-tex),
.commercial-section > :not(.fx-tex),
.products-intro > :not(.fx-tex) {
    position: relative;
    z-index: 1;
}

/* Ronda 2026-07-20 bis: la textura azul se mueve sola (drift diagonal
   continuo, un tile exacto = loop perfecto). Sustituye a los panes
   flotantes de la sección de productos del home, que se encimaban. */
@keyframes fx-tex-drift {
    from { background-position: 0px 0px, 0px 0px; }
    to   { background-position: 0px 0px, 260px 348.2px; }
}

.fx-tex-products {
    animation: fx-tex-drift 52s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fx-tex-products {
        animation: none;
    }
}
