/* =====================================================
   Animaciones SCP — scoped a .scp-animations
   Desactivar desde Personalizar → Animaciones SCP
   ===================================================== */

/* ----- Carga en gris (imágenes) ----- */
.scp-animations .scp-img-load {
    position: relative;
    display: block;
    overflow: hidden;
    background: linear-gradient(135deg, #e4e4ea 0%, #f0f0f4 50%, #e4e4ea 100%);
    background-size: 200% 200%;
    animation: scp-img-shimmer 1.6s ease-in-out infinite;
}

.scp-animations .scp-img-load::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(255, 255, 255, 0.55) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    animation: scp-img-shimmer-sweep 1.8s ease-in-out infinite;
}

.scp-animations .scp-img-load__img,
.scp-animations .scp-img-load img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    filter: grayscale(1) contrast(0.92);
    transition:
        opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Logo del header: mantener proporción (no estirar al ancho del contenedor) */
.scp-animations .site-branding .scp-img-load__img,
.scp-animations .site-branding .scp-img-load img,
.scp-animations .site-branding .site-logo,
.scp-animations .site-branding .custom-logo {
    width: auto;
    max-width: 100%;
}

.scp-animations .offer-card__media .scp-img-load,
.scp-animations .hprod-img .scp-img-load,
.scp-animations .scp-cat-card__media .scp-img-load,
.scp-animations .cat-hub-item__media .scp-img-load,
.scp-animations .slide-picture.scp-img-load {
    width: 100%;
    height: 100%;
}

.scp-animations .slide-picture.scp-img-load {
    display: block;
}

.scp-animations .slide-picture.scp-img-load .slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scp-animations .offer-card__media .scp-img-load__img,
.scp-animations .offer-card__media .scp-img-load img,
.scp-animations .hprod-img .scp-img-load__img,
.scp-animations .hprod-img .scp-img-load img,
.scp-animations .scp-cat-card__media .scp-img-load__img,
.scp-animations .scp-cat-card__media .scp-img-load img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.scp-animations .cat-hub-item__media .scp-img-load__img,
.scp-animations .cat-hub-item__media .scp-img-load img {
    object-fit: contain;
}

.scp-animations .promo-card--image-only .promo-card-img,
.scp-animations .promo-card--image-only .scp-img-load__img {
    opacity: 1;
    filter: none;
}

/* Pedido confirmado / Mi cuenta: sin animación de carga en miniaturas */
.scp-animations .scp-order-view__thumb .scp-img-load {
    animation: none;
    background: #fafafa;
}

.scp-animations .scp-order-view__thumb .scp-img-load::after {
    display: none !important;
}

.scp-animations .scp-order-view__thumb img,
.scp-animations .scp-order-view__thumb .scp-img-load__img {
    opacity: 1 !important;
    filter: none !important;
}

.scp-animations .scp-img-load.is-loaded {
    animation: none;
    background: transparent;
}

.scp-animations .scp-img-load.is-loaded::after {
    display: none;
}

.scp-animations .scp-img-load.is-loaded .scp-img-load__img,
.scp-animations .scp-img-load.is-loaded img {
    opacity: 1;
    filter: grayscale(0) contrast(1);
}

@keyframes scp-img-shimmer {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes scp-img-shimmer-sweep {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

/* ----- Aparición del inicio (stagger) ----- */
.scp-animations .scp-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--scp-reveal-delay, 0s);
    will-change: opacity, transform;
}

.scp-animations .scp-reveal.scp-revealed {
    opacity: 1;
    transform: translateY(0);
}

.scp-animations .hero-slider-section.scp-reveal {
    transform: translateY(14px) scale(0.985);
}

.scp-animations .hero-slider-section.scp-reveal.scp-revealed {
    transform: translateY(0) scale(1);
}

.scp-animations.scp-page-ready .scp-reveal--immediate {
    opacity: 1;
    transform: none;
}

/* Tarjetas dentro de secciones reveladas */
.scp-animations .scp-reveal.scp-revealed .offer-card,
.scp-animations .scp-reveal.scp-revealed .hprod-card,
.scp-animations .scp-reveal.scp-revealed .cat-hub-item,
.scp-animations .scp-reveal.scp-revealed .promo-card {
    animation: scp-card-pop-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--scp-card-index, 0) * 0.06s + 0.12s);
}

@keyframes scp-card-pop-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----- Catálogo: skeleton al filtrar ----- */
.scp-animations .scp-catalog-results.is-loading {
    position: relative;
    opacity: 1;
    pointer-events: none;
    min-height: 280px;
}

.scp-animations .scp-catalog-results.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 10px;
    background: linear-gradient(135deg, #ececf0 0%, #f5f5f7 50%, #ececf0 100%);
    background-size: 200% 200%;
    animation: scp-img-shimmer 1.4s ease-in-out infinite;
    opacity: 0.92;
}

.scp-animations .scp-catalog-results.is-loading::after {
    content: attr(data-loading-label);
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.02em;
}

.scp-animations .scp-catalog-results.is-loading > * {
    opacity: 0.15;
    filter: grayscale(1);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* ----- Transiciones suaves en header al cargar ----- */
.scp-animations.scp-page-ready .site-header {
    animation: scp-header-fade-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes scp-header-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ----- Desactivar animaciones existentes del tema ----- */
.scp-animations-off .offer-card__fire--animate .offer-card__fire-emoji,
.scp-animations-off .nav-pc-btn--animated::before,
.scp-animations-off .page-hero--destacado::before,
.scp-animations-off .benefit-icon__fa--truck,
.scp-animations-off .benefit-shield-check {
    animation: none !important;
}

.scp-animations-off .benefit-shield-check {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .scp-animations .scp-img-load,
    .scp-animations .scp-img-load::after,
    .scp-animations .scp-catalog-results.is-loading::before {
        animation: none;
    }

    .scp-animations .scp-img-load__img,
    .scp-animations .scp-img-load img {
        opacity: 1;
        filter: none;
        transition: none;
    }

    .scp-animations .scp-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .scp-animations .scp-reveal.scp-revealed .offer-card,
    .scp-animations .scp-reveal.scp-revealed .hprod-card,
    .scp-animations .scp-reveal.scp-revealed .cat-hub-item,
    .scp-animations .scp-reveal.scp-revealed .promo-card {
        animation: none;
    }

    .scp-animations.scp-page-ready .site-header {
        animation: none;
    }
}