/**
 * SNT Jeans - Halloween campaign skin.
 * Keeps the regular white site and adds orange/black Halloween accents.
 * Everything is scoped to body.snt-halloween, added by inc/campaign-halloween.php
 * only while the campaign is active.
 */

body.snt-halloween {
    --hw-orange: #ff7417;
    --hw-deep: #e85d04;
    --hw-black: #141414;
    --hw-purple: #4a1d6e;
}

/* --- Promo bar: black/orange flow + flying bats --- */
body.snt-halloween #snt-header > div:first-child {
    background: linear-gradient(90deg, var(--hw-black), #3a1a05, var(--hw-deep), #3a1a05, var(--hw-black));
    background-size: 300% 100%;
    animation: snt-hw-flow 10s linear infinite;
    color: #fff;
}
.snt-hw-bat {
    position: absolute;
    top: 50%;
    left: -40px;
    z-index: 1;
    width: 22px;
    height: 12px;
    color: var(--hw-orange);
    pointer-events: none;
    animation: snt-hw-bat-fly 14s linear infinite;
}
.snt-hw-bat svg { display: block; width: 100%; height: 100%; animation: snt-hw-flap .25s ease-in-out infinite alternate; }
.snt-hw-bat:nth-child(3) { animation-delay: -5s; animation-duration: 17s; width: 16px; height: 9px; }
.snt-hw-bat:nth-child(4) { animation-delay: -11s; animation-duration: 12s; }
@media (max-width: 1023px) { .snt-hw-bat { display: none; } }

/* --- Header: orange line --- */
body.snt-halloween #snt-header { box-shadow: 0 2px 0 var(--hw-orange); }
body.snt-halloween .snt-ofertas-link { color: var(--hw-deep) !important; }

/* --- Texts and badges --- */
body.snt-halloween .section-subtitle,
body.snt-halloween .snt-season-label { color: var(--hw-deep); }
body.snt-halloween .snt-sale-badge {
    background: var(--hw-black) !important;
    color: var(--hw-orange) !important;
}
body.snt-halloween .snt-hero-swiper .swiper-pagination-bullet-active { background: var(--hw-orange); }

/* --- Hero: spider web in the corner + hanging spider --- */
.snt-hw-web {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    width: clamp(90px, 16vw, 220px);
    height: auto;
    color: rgba(255, 255, 255, .85);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
    pointer-events: none;
}
.snt-hw-spider {
    position: absolute;
    top: 0;
    right: clamp(40px, 9vw, 130px);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    transform-origin: top center;
    animation: snt-hw-drop 6s ease-in-out infinite;
}
.snt-hw-spider::before {
    content: '';
    width: 1px;
    height: clamp(50px, 9vw, 120px);
    background: rgba(255, 255, 255, .8);
}
.snt-hw-spider svg { width: clamp(22px, 2.6vw, 34px); height: auto; }

/* --- Home strip above Nueva Colección --- */
.snt-hw-strip {
    position: relative;
    overflow: hidden;
    padding: 22px 16px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(circle at 15% 120%, rgba(255, 116, 23, .45), transparent 45%),
        radial-gradient(circle at 85% -20%, rgba(74, 29, 110, .7), transparent 50%),
        var(--hw-black);
}
.snt-hw-strip strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(26px, 6vw, 60px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--hw-orange);
    text-shadow: 0 0 18px rgba(255, 116, 23, .45);
}
.snt-hw-strip span {
    display: block;
    margin-top: 8px;
    font-size: clamp(11px, 2vw, 16px);
    font-weight: 800;
    letter-spacing: .25em;
    text-transform: uppercase;
}
.snt-hw-strip .snt-hw-pumpkin {
    position: absolute;
    bottom: -6px;
    font-size: clamp(34px, 6vw, 64px);
    line-height: 1;
    animation: snt-hw-bob 3s ease-in-out infinite;
}
.snt-hw-strip .snt-hw-pumpkin--l { left: 4%; }
.snt-hw-strip .snt-hw-pumpkin--r { right: 4%; animation-delay: -1.5s; }
.snt-hw-strip .snt-hw-ghost {
    position: absolute;
    top: 10px;
    font-size: clamp(18px, 3vw, 30px);
    opacity: .8;
    animation: snt-hw-float 5s ease-in-out infinite;
}
.snt-hw-strip .snt-hw-ghost--l { left: 18%; }
.snt-hw-strip .snt-hw-ghost--r { right: 18%; animation-delay: -2.5s; }
@media (max-width: 640px) {
    .snt-hw-strip { padding: 18px 56px; }
    .snt-hw-strip .snt-hw-ghost { display: none; }
}

@keyframes snt-hw-flow { to { background-position: 300% 0; } }
@keyframes snt-hw-bat-fly {
    0%   { transform: translate(0, -50%); }
    25%  { transform: translate(25vw, -90%); }
    50%  { transform: translate(50vw, -20%); }
    75%  { transform: translate(75vw, -80%); }
    100% { transform: translate(calc(100vw + 80px), -50%); }
}
@keyframes snt-hw-flap { to { transform: scaleY(.45); } }
@keyframes snt-hw-drop { 0%, 100% { transform: translateY(-30%); } 50% { transform: translateY(0); } }
@keyframes snt-hw-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes snt-hw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
    body.snt-halloween #snt-header > div:first-child,
    .snt-hw-bat, .snt-hw-bat svg, .snt-hw-spider,
    .snt-hw-strip .snt-hw-pumpkin, .snt-hw-strip .snt-hw-ghost { animation: none; }
    .snt-hw-bat { display: none; }
}