/* ==========================================================================
   WESTORX Homepage Animations
   - Hero text fade-in cascade on load
   - Section headers + cards fade-in on scroll (uses existing .wstx-reveal)
   - Subtle parallax on category cards
   - Brand items stagger
   ========================================================================== */

/* ── HERO FALLBACK GRADIENTS (when hero-1.jpg etc. don't exist) ─────────── */
/* These act as a beautiful background until you drop in real hero images */
.hero-slide:nth-child(1) {
    background-color: #0a0a0a;
    background-image:
        linear-gradient(135deg, rgba(200, 169, 110, 0.20) 0%, rgba(10, 10, 10, 0) 60%),
        linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
}
.hero-slide:nth-child(2) {
    background-color: #0a0a0a;
    background-image:
        linear-gradient(135deg, rgba(120, 80, 60, 0.25) 0%, rgba(10, 10, 10, 0) 60%),
        linear-gradient(180deg, #161616 0%, #050505 100%);
}
.hero-slide:nth-child(3) {
    background-color: #0a0a0a;
    background-image:
        linear-gradient(135deg, rgba(200, 169, 110, 0.30) 0%, rgba(10, 10, 10, 0) 50%),
        linear-gradient(180deg, #1c1c1c 0%, #080808 100%);
}

/* ── HERO TEXT CASCADE ──────────────────────────────────────────────────── */
.hero-slide.active .hero-content > * {
    opacity: 0;
    transform: translateY(20px);
    animation: wstx-hero-in 0.9s cubic-bezier(.2, .7, .3, 1) forwards;
}
.hero-slide.active .hero-content .hero-eyebrow  { animation-delay: 0.25s; }
.hero-slide.active .hero-content .hero-title    { animation-delay: 0.45s; }
.hero-slide.active .hero-content .hero-subtitle { animation-delay: 0.65s; }
.hero-slide.active .hero-content .hero-ctas     { animation-delay: 0.85s; }

@keyframes wstx-hero-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero overlay gradient deepens slowly */
.hero-slide.active::before {
    animation: wstx-hero-overlay 1.2s ease forwards;
}
@keyframes wstx-hero-overlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Subtle ken-burns effect on the slide background image */
.hero-slide.active {
    animation: wstx-hero-zoom 12s ease-out forwards;
}
@keyframes wstx-hero-zoom {
    from { background-size: 100% auto; }
    to   { background-size: 108% auto; }
}

/* ── SECTION HEADERS ───────────────────────────────────────────────────── */
.section-eyebrow.wstx-reveal,
.section-title.wstx-reveal {
    transition-duration: 0.85s;
}

/* ── CATEGORY CARD GRADIENT FALLBACKS (when image is missing) ──────────── */
.category-card--men {
    background-image: linear-gradient(135deg, #1c1c1c 0%, #0a0a0a 100%);
}
.category-card--women {
    background-image: linear-gradient(135deg, #2a1f1a 0%, #0a0a0a 100%);
}
.category-card--new-arrivals {
    background-image: linear-gradient(135deg, #2a2410 0%, #0a0a0a 100%);
}
.category-card--sneakers {
    background-image: linear-gradient(135deg, #1a1a26 0%, #0a0a0a 100%);
}
.category-card--accessories {
    background-image: linear-gradient(135deg, #1a201a 0%, #0a0a0a 100%);
}

/* When image fails, the alt/text styling needs to be more prominent */
.category-card img[style*="display: none"] + .category-card-overlay,
.category-card img[style*="display:none"] + .category-card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);
    align-items: center;
    justify-content: center;
}
.category-card img[style*="display: none"] + .category-card-overlay .category-card-title,
.category-card img[style*="display:none"] + .category-card-overlay .category-card-title {
    font-size: 1.8rem;
    font-family: var(--font-secondary);
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* ── CATEGORY CARDS — subtle zoom + reveal ─────────────────────────────── */
.category-card {
    overflow: hidden;
    position: relative;
}
.category-card img {
    transition: transform 0.9s cubic-bezier(.2, .7, .3, 1);
}
.category-card:hover img {
    transform: scale(1.06);
}

/* Card title slide-up on hover */
.category-card-overlay {
    transition: background 0.3s ease;
}
.category-card-title {
    display: inline-block;
    position: relative;
}
.category-card-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.4s ease, left 0.4s ease;
}
.category-card:hover .category-card-title::after {
    width: 40px;
    left: calc(50% - 20px);
}

/* ── FEATURED PRODUCTS — stagger reveal ─────────────────────────────────── */
.section-featured .woocommerce ul.products li.product {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(.2, .7, .3, 1), transform 0.7s cubic-bezier(.2, .7, .3, 1);
}
.section-featured.is-in-view .woocommerce ul.products li.product {
    opacity: 1;
    transform: translateY(0);
}
.section-featured.is-in-view .woocommerce ul.products li.product:nth-child(1) { transition-delay: 0.00s; }
.section-featured.is-in-view .woocommerce ul.products li.product:nth-child(2) { transition-delay: 0.08s; }
.section-featured.is-in-view .woocommerce ul.products li.product:nth-child(3) { transition-delay: 0.16s; }
.section-featured.is-in-view .woocommerce ul.products li.product:nth-child(4) { transition-delay: 0.24s; }
.section-featured.is-in-view .woocommerce ul.products li.product:nth-child(5) { transition-delay: 0.32s; }
.section-featured.is-in-view .woocommerce ul.products li.product:nth-child(6) { transition-delay: 0.40s; }
.section-featured.is-in-view .woocommerce ul.products li.product:nth-child(7) { transition-delay: 0.48s; }
.section-featured.is-in-view .woocommerce ul.products li.product:nth-child(8) { transition-delay: 0.56s; }

/* Card hover: lift + shadow */
.section-featured .woocommerce ul.products li.product {
    transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s ease, opacity 0.7s, translate 0.7s;
}
.section-featured .woocommerce ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

/* ── BRANDS STRIP — stagger fade ────────────────────────────────────────── */
.section-brands .brand-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease, color 0.3s ease;
}
.section-brands.is-in-view .brand-item {
    opacity: 1;
    transform: translateY(0);
}
.section-brands.is-in-view .brand-item:nth-child(1) { transition-delay: 0.05s; }
.section-brands.is-in-view .brand-item:nth-child(2) { transition-delay: 0.13s; }
.section-brands.is-in-view .brand-item:nth-child(3) { transition-delay: 0.21s; }
.section-brands.is-in-view .brand-item:nth-child(4) { transition-delay: 0.29s; }
.section-brands.is-in-view .brand-item:nth-child(5) { transition-delay: 0.37s; }
.section-brands.is-in-view .brand-item:nth-child(6) { transition-delay: 0.45s; }
.section-brands.is-in-view .brand-item:nth-child(7) { transition-delay: 0.53s; }
.section-brands.is-in-view .brand-item:nth-child(8) { transition-delay: 0.61s; }

.section-brands .brand-item {
    position: relative;
}
.section-brands .brand-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s ease;
}
.section-brands .brand-item:hover::after {
    transform: scaleX(1);
}

/* ── CATEGORY CARDS — stagger reveal ────────────────────────────────────── */
.section-categories .category-card {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(.2,.7,.3,1), transform 0.75s cubic-bezier(.2,.7,.3,1);
}
.section-categories.is-in-view .category-card {
    opacity: 1;
    transform: translateY(0);
}
.section-categories.is-in-view .category-card:nth-child(1) { transition-delay: 0.10s; }
.section-categories.is-in-view .category-card:nth-child(2) { transition-delay: 0.22s; }
.section-categories.is-in-view .category-card:nth-child(3) { transition-delay: 0.34s; }

/* ── Respect reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-slide.active .hero-content > *,
    .hero-slide.active,
    .section-featured .woocommerce ul.products li.product,
    .section-brands .brand-item,
    .section-categories .category-card {
        animation: none !important;
        transition: opacity 0.001s, transform 0.001s !important;
        opacity: 1 !important;
        transform: none !important;
    }
}