/**
 * DigiFest — motor de efectos.
 *
 * Cada partícula es un <span.df-p> posicionado por el JS; el comportamiento
 * se define con la clase .df-behavior-<tipo> y el vaivén interior con
 * .df-sway sobre el SVG.
 */

#df-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
}

#df-stage .df-p {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    will-change: transform;
}

#df-stage .df-p svg {
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
}

/* ---------- Comportamientos ---------- */

/* Caída libre con vaivén horizontal (nieve, confeti, copos). */
.df-behavior-fall {
    animation-name: df-fall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Subida flotante (corazones, fantasmas, serpentinas). */
.df-behavior-float {
    animation-name: df-float-up;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Cruce horizontal de pantalla (Papá Noel, gaviotas). */
.df-behavior-fly {
    animation-name: df-fly-across;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Rebote (calabazas, huevos, regalos). */
.df-behavior-bounce {
    animation-name: df-bounce;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Estallido in situ (fuegos artificiales). */
.df-behavior-burst {
    animation-name: df-burst;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Vaivén interior aplicado al SVG. */
.df-sway {
    animation: df-sway ease-in-out infinite alternate;
}

/* ---------- Keyframes ---------- */

@keyframes df-fall {
    0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); }
    100% { transform: translate3d(var(--df-drift, 0px), 112vh, 0) rotate(var(--df-spin, 360deg)); }
}

@keyframes df-float-up {
    0%   { transform: translate3d(0, 110vh, 0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate3d(var(--df-drift, 0px), -12vh, 0); opacity: 0; }
}

@keyframes df-fly-across {
    0%   { transform: translate3d(-18vw, 0, 0); }
    100% { transform: translate3d(118vw, var(--df-dip, 0px), 0); }
}

@keyframes df-bounce {
    0%   { transform: translate3d(0, -12vh, 0); }
    100% { transform: translate3d(var(--df-drift, 0px), 100vh, 0); }
}

@keyframes df-sway {
    from { transform: translateX(calc(var(--df-sway, 24px) * -1)) rotate(-10deg); }
    to   { transform: translateX(var(--df-sway, 24px)) rotate(10deg); }
}

@keyframes df-burst {
    0%   { transform: scale(0.2); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ---------- Zoom-susto ---------- */

#df-scare {
    position: fixed;
    inset: 0;
    z-index: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%);
    opacity: 0;
}

#df-scare.df-scare-show {
    animation: df-scare-vignette 2.4s ease-out forwards;
}

#df-scare .df-scare-inner {
    width: 40vmin;
    opacity: 0;
    filter: blur(6px);
}

#df-scare.df-scare-show .df-scare-inner {
    animation: df-scare-zoom 2.4s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
}

#df-scare svg {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes df-scare-zoom {
    0%   { transform: scale(0.1); opacity: 0; filter: blur(6px); }
    15%  { opacity: 1; }
    70%  { transform: scale(3.2); opacity: 1; filter: blur(0); }
    85%  { transform: scale(3.6); opacity: 1; }
    100% { transform: scale(4); opacity: 0; filter: blur(4px); }
}

@keyframes df-scare-vignette {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---------- Banner temático WooCommerce ---------- */

.df-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.7em 2.5em 0.7em 1em;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    position: relative;
    z-index: 999998;
}

.df-banner-sticky {
    position: sticky;
    top: 0;
}

.df-banner-icon {
    font-size: 1.3em;
    line-height: 1;
}

.df-banner-close {
    position: absolute;
    right: 0.6em;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    padding: 0.2em 0.4em;
    opacity: 0.8;
}

.df-banner-close:hover {
    opacity: 1;
}

/* ---------- Accesibilidad: sin animaciones si el usuario lo pidió ---------- */

@media (prefers-reduced-motion: reduce) {
    #df-stage,
    #df-scare,
    #df-ambient {
        display: none !important;
    }
}

/* =========================================================
   Capa de ambiente (decoración fija de pantalla) — Pro
   ========================================================= */

#df-ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

/* --- Telarañas de esquina (Halloween) --- */

.df-web {
    position: absolute;
    width: 20vmin;
    height: 20vmin;
    opacity: 0.9;
}

.df-web svg {
    width: 100%;
    height: 100%;
    display: block;
}

.df-web-tl { top: 0; left: 0; transform-origin: top left; animation: df-web-sway 7s ease-in-out infinite alternate; }
.df-web-tr { top: 0; right: 0; transform: scaleX(-1); transform-origin: top right; animation: df-web-sway-r 8s ease-in-out infinite alternate; }

@keyframes df-web-sway {
    from { transform: rotate(0deg); }
    to   { transform: rotate(1.6deg); }
}

@keyframes df-web-sway-r {
    from { transform: scaleX(-1) rotate(0deg); }
    to   { transform: scaleX(-1) rotate(1.6deg); }
}

/* --- Araña que se descuelga (Halloween) --- */

.df-spider-rig {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.df-spider-thread {
    width: 2px;
    flex: 0 0 auto;
    background: rgba(230, 230, 230, 0.85);
    animation: df-spider-thread 6s ease-in-out forwards;
}

.df-spider-swing {
    animation: df-spider-swing 1.6s ease-in-out infinite alternate;
    transform-origin: top center;
}

.df-spider-swing svg {
    display: block;
    width: 56px;
    height: auto;
}

@keyframes df-spider-thread {
    0%   { height: 0; }
    25%  { height: 42vh; }
    75%  { height: 42vh; }
    100% { height: 0; }
}

@keyframes df-spider-swing {
    from { transform: rotate(-9deg); }
    to   { transform: rotate(9deg); }
}

/* --- Guirnaldas superiores (luces, corazones, banderines) --- */

.df-garland {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.df-garland svg {
    flex: 1 1 0;
    max-width: 340px;
    height: auto;
    display: block;
}

/* Luces de Navidad: parpadeo escalonado. */
.df-garland .df-bulb {
    animation: df-blink 1.5s ease-in-out infinite;
}

.df-garland svg:nth-child(odd) .df-bulb:nth-of-type(2n) { animation-delay: 0.4s; }
.df-garland svg:nth-child(even) .df-bulb:nth-of-type(2n+1) { animation-delay: 0.8s; }
.df-garland .df-bulb:nth-of-type(3n) { animation-delay: 1.1s; }

@keyframes df-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.2; }
}

/* Corazones y banderines: balanceo colgante. */
.df-hheart,
.df-flag {
    transform-box: fill-box;
    transform-origin: top center;
    animation: df-hang-sway 2.6s ease-in-out infinite alternate;
}

.df-hheart:nth-of-type(2n),
.df-flag:nth-of-type(2n) { animation-delay: 0.7s; }
.df-hheart:nth-of-type(3n),
.df-flag:nth-of-type(3n) { animation-delay: 1.3s; }

@keyframes df-hang-sway {
    from { transform: rotate(-5deg); }
    to   { transform: rotate(5deg); }
}

/* --- Cinta de oferta (Black Friday) --- */

.df-tape {
    position: absolute;
    width: 220px;
    opacity: 0.95;
}

.df-tape svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.df-tape-tl {
    top: 70px;
    left: -60px;
    transform: rotate(-35deg);
    animation: df-tape-float 5s ease-in-out infinite alternate;
}

.df-tape-br {
    bottom: 70px;
    right: -60px;
    transform: rotate(145deg);
    animation: df-tape-float 6s ease-in-out infinite alternate;
}

@keyframes df-tape-float {
    from { margin-top: 0; }
    to   { margin-top: 8px; }
}

/* --- Rincón de Pascua --- */

.df-easter {
    position: absolute;
    width: 20vmin;
    height: 20vmin;
}

.df-easter svg {
    width: 100%;
    height: 100%;
    display: block;
}

.df-easter-bl { bottom: 0; left: 0; }
.df-easter-br { bottom: 0; right: 0; transform: scaleX(-1); }

.df-easter .df-egg {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: df-egg-bob 3.4s ease-in-out infinite alternate;
}

.df-easter .df-egg:nth-of-type(2n) { animation-delay: 1.2s; }

@keyframes df-egg-bob {
    from { transform: translateY(0); }
    to   { transform: translateY(-5px); }
}

/* --- Olas de verano --- */

.df-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 54px;
    overflow: hidden;
}

.df-wave-track {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: 200%;
    animation: df-wave-slide 9s linear infinite;
}

.df-wave-track svg {
    width: 50%;
    height: 54px;
    display: block;
}

.df-wave-track.df-wave-back {
    opacity: 0.7;
    animation-duration: 14s;
    animation-direction: reverse;
}

@keyframes df-wave-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}