/*
 * GicoPlay — DISFRAZ DE HALLOWEEN (15-oct-2026, se apaga solo el 1-nov 00:00 Colombia).
 * Todo cuelga de `html.gp-halloween`, que pone js/halloween.js sólo dentro de la fecha.
 * Sólo transform/opacity en lo que se mueve (el dueño: «que no bajen los FPS»).
 */

/* ── Colores: la marca se viste de calabaza ── */
html.gp-halloween {
    --primary: #FF7A1A;
    --primary-dark: #E8620A;
    --primary-gradient: linear-gradient(135deg, #FFB347, #FF7A1A 55%, #E8590C);
    --gph-morado: #9D4EDD;
    --gph-verde: #9BE564;
}
html.gp-halloween[data-theme="light"] {
    --primary: #E8590C;
    --primary-dark: #C2410C;
    --primary-gradient: linear-gradient(135deg, #FF9F43, #E8590C);
}

/* «Play» del logo: su degradado va de --primary a --secondary (cian). Con --primary en
   naranja quedaba partido en dos colores; aquí va entero en tonos de calabaza. */
html.gp-halloween .logo-salen { background-image: linear-gradient(135deg, #FFB347, #FF7A1A 60%, #E8590C); }
html.gp-halloween[data-theme="light"] .logo-salen { background-image: linear-gradient(135deg, #FF8C1A, #E8590C 60%, #C2410C); }

/* ── Escena 3D de fondo (Three.js): detrás de todo, no recibe clics ── */
.gph-escena {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.gph-escena.on { opacity: 1; }
.gph-escena canvas { width: 100% !important; height: 100% !important; display: block; }
html[data-theme="light"] .gph-escena.on { opacity: .55; }

/* ── Banda superior ── */
.gph-banda {
    position: relative;
    z-index: 1001;
    overflow: hidden;
    text-align: center;
    padding: 7px 14px;
    font-weight: 800;
    font-size: .92rem;
    letter-spacing: .02em;
    color: #FFF4E6;
    background: linear-gradient(90deg, #2B0A3D, #5A189A 30%, #C2410C 70%, #2B0A3D);
    border-bottom: 1px solid rgba(255, 122, 26, .45);
}
.gph-banda .gph-l { display: inline-block; white-space: pre; }
.gph-banda small { font-weight: 600; opacity: .85; margin-left: 6px; }
@media (max-width: 600px) {
    .gph-banda { font-size: .8rem; padding: 6px 10px; }
    .gph-banda small { display: none; }
}

/* ── Telarañas en las esquinas de la cabecera ── */
.gp-halloween .header { position: sticky; }
.gph-tela {
    position: absolute;
    top: 0;
    width: 86px;
    height: 86px;
    pointer-events: none;
    opacity: .45;
    color: #E9E3F5;
    z-index: 0;
}
/* El contenido de la cabecera va por encima de las telarañas: el logo no queda rayado. */
.gp-halloween .header > .container { position: relative; z-index: 1; }
.gph-tela.izq { left: 0; }
.gph-tela.der { right: 0; transform: scaleX(-1); }
html[data-theme="light"] .gph-tela { color: #5A4A6E; opacity: .4; }
@media (max-width: 768px) { .gph-tela { width: 44px; height: 44px; } }

/* ── Araña que baja con el scroll (cuelga de la cabecera) ── */
.gph-arana {
    position: absolute;
    top: 100%;
    right: 12%;
    width: 2px;
    pointer-events: none;
}
.gph-hilo {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 160px;
    background: rgba(233, 227, 245, .55);
    transform-origin: top;
    transform: scaleY(.15);
}
.gph-bicho {
    position: absolute;
    left: -14px;
    top: 0;
    width: 30px;
    height: 30px;
    transform: translateY(24px);
}
html[data-theme="light"] .gph-hilo { background: rgba(60, 40, 80, .45); }
@media (max-width: 768px) { .gph-arana { right: 22%; } }

/* ── Gorro de bruja sobre el emblema ── */
.gp-halloween .header .logo { position: relative; }
.gph-gorro {
    position: absolute;
    left: -9px;
    top: -9px;
    width: 26px;
    height: 22px;
    z-index: 2;
    pointer-events: none;
    transform-origin: 50% 90%;
    animation: gph-balanceo 3.2s ease-in-out infinite alternate;
}
@media (max-width: 768px) { .gph-gorro { left: -3px; } }
@keyframes gph-balanceo {
    from { transform: rotate(-14deg); }
    to   { transform: rotate(4deg); }
}

/* ── Tarjetas: un poco de telaraña y borde de calabaza al pasar ── */
.gp-halloween #product-grid > .card { position: relative; }
.gp-halloween #product-grid > .card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    pointer-events: none;
    opacity: .35;
    z-index: 3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23E9E3F5' stroke-width='1.6'%3E%3Cpath d='M100 0L0 100M100 0L35 100M100 0L0 35M100 0L70 100M100 0L0 70'/%3E%3Cpath d='M78 0Q84 16 100 22M56 0Q66 32 100 44M34 0Q48 50 100 66M14 0Q30 70 100 88'/%3E%3C/svg%3E") no-repeat top right / contain;
}
html.gp-halloween[data-theme="light"] #product-grid > .card::after { filter: invert(.7); }
@media (hover: hover) and (pointer: fine) {
    .gp-halloween #product-grid > .card:hover { border-color: rgba(255, 122, 26, .7); }
}

/* ── Capa de efectos sueltos (fantasmas, estallidos, rastro del cursor) ── */
.gph-capa {
    position: fixed;
    inset: 0;
    z-index: 990;               /* bajo la cabecera (1000), el carrito y los modales */
    pointer-events: none;
    overflow: hidden;
}
.gph-capa > * { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.gph-fantasma { width: 64px; height: 76px; opacity: 0; }
.gph-chispa {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFE08A, #FF7A1A 60%, transparent 70%);
    opacity: 0;
}
.gph-emoji { font-size: 22px; line-height: 1; margin: -11px 0 0 -11px; opacity: 0; }

/* Ligero o «reducir movimiento»: nada que se mueva solo. */
html.gpa-lite .gph-gorro { animation: none; transform: rotate(-8deg); }
@media (prefers-reduced-motion: reduce) {
    .gph-gorro { animation: none; transform: rotate(-8deg); }
    .gph-escena, .gph-capa, .gph-arana { display: none; }
}