/*!
 * True Makeup Theme — editorial-cards.css
 *
 * Grab-bag stylesheet for the homepage editorial card family:
 *
 *   - .tmt-collection-card         collection grid tiles
 *   - .brand-card                  8-tile brand directory
 *   - .tmt-quiz-hero / split panels  large hero blocks
 *   - .tmt-bar-icons               black-bar icon row
 *   - legacy .review-card border   still used by older carousels
 *
 * Plus a handful of background utility classes and the
 * "reveal is disabled" placeholder that the reveal IIFE checks.
 */


/* ─── Collection cards ───────────────────────────────────── */

.tmt-collection-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s, box-shadow 0.3s;
}
.tmt-collection-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.tmt-collection-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 3px solid transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    background:
        linear-gradient(
            90deg,
            #554350,
            var(--ep-primary),
            var(--ep-secondary),
            var(--ep-blush-block),
            #FAE8DD,
            var(--ep-blush-block),
            var(--ep-secondary),
            var(--ep-primary),
            #554350
        ) border-box;
    background-size: 200% 100%;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: tmt-gradient-flow 4s ease infinite;
}
.tmt-collection-card:hover::after { opacity: 1; }

.tmt-collection-card:hover .tmt-collection-title { transform: scale(1.1); }
.tmt-collection-card:hover .tmt-collection-img   { opacity: 1 !important; }


/* ─── Legacy review card border (kept for older carousel) ── */

.review-card { position: relative; }

.review-card::after,
.review-trans-1::after,
.review-trans-2::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
    border: 3px solid transparent;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            #554350, #B07B5F, #CC9E80, #E0BAB2,
            #FAE8DD,
            #E0BAB2, #CC9E80, #B07B5F, #554350
        ) border-box;
    background-size: 200% 100%;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: tmt-gradient-flow 4s ease infinite;
}


/* ─── Brand cards ────────────────────────────────────────── */

.brand-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s;
}
.brand-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}


/* ─── Split panels + quiz hero drop-shadow ───────────────── */

.tmt-gradient-top[style*="grid-template-columns"] {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.tmt-quiz-hero,
.tmt-gradient-top[style*="min-height:500px"] {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
}


/* ─── Black bar icons ────────────────────────────────────── */

.tmt-bar-icons img {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.tmt-bar-icons img:hover {
    transform: scale(1.05);
}


/* ─── Scroll reveal neutraliser ───────────────────────────── *
 * Reveal is currently disabled — the JS IIFE still adds the
 * classes but the animation is a no-op. Keeping this here so
 * nothing surprise-animates if someone reenables the hook. */

.tmt-reveal,
.tmt-reveal-left,
.tmt-reveal-right,
.tmt-reveal-scale,
.tmt-reveal-stagger > * {
    opacity:   1    !important;
    transform: none !important;
}


/* ─── Full-bleed section helpers ──────────────────────────── */

.bg-surface,
section,
.py-20 {
    width:      100%  !important;
    max-width:  100vw !important;
    box-sizing: border-box;
}

#hero-slideshow { width: 100% !important; }


/* ─── Background helpers (legacy names, still referenced) ── */

.has-bg-light-grey-1     { background-color: #f5f5f5; }
.has-bg-pastel-pink-light { background-color: #FAE8DD; }