/* ============================================================
   TE Motion System — subtle, print-shop-branded motion details
   House rules: transform/opacity only · one easing token ·
   everything <= 400ms (count-ups 1.2s) · reduced-motion = off
   ============================================================ */

:root {
    --te-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Step 2: Count-up tickers ----------
   Tabular numerals while counting so digits do not jitter. */
.te-counting {
    font-variant-numeric: tabular-nums;
}

/* ---------- Step 3: Swatch & image choreography ---------- */

/* Swatch hover: lift slightly more, ring in the swatch's own colour */
.color-swatches .swatch {
    transition: transform 200ms var(--te-ease), box-shadow 200ms var(--te-ease);
}

.color-swatches .swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--swatch-c, #1776C8);
    z-index: 2;
}

/* Product image cross-fade while the new colour loads */
#main-product-image {
    transition: opacity 150ms var(--te-ease), transform 150ms var(--te-ease);
}

#main-product-image.te-img-swap {
    opacity: 0.25;
    transform: scale(1.02);
}

/* Colour name dips and settles when it changes */
.color-name {
    display: inline-block;
    transition: opacity 150ms var(--te-ease), transform 150ms var(--te-ease);
}

.color-name.te-name-swap {
    opacity: 0;
    transform: translateY(3px);
}

@media (prefers-reduced-motion: reduce) {
    .color-swatches .swatch,
    #main-product-image,
    .color-name {
        transition: none;
    }
    .color-swatches .swatch:hover {
        transform: none;
    }
}

/* ---------- Step 6: Halftone texture accents ----------
   A barely-there print-dot pattern — the visual vocabulary of
   screen printing at 4-5% opacity. */
.hero-new {
    position: relative;
}

.hero-new::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.09;
    pointer-events: none;
    /* dots fade out from the top-left corner */
    -webkit-mask-image: radial-gradient(circle at 0% 0%, #000 0%, transparent 50%);
    mask-image: radial-gradient(circle at 0% 0%, #000 0%, transparent 50%);
}

footer {
    position: relative;
}

footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.08;
    pointer-events: none;
    /* strongest along the top edge, fading down */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
}

/* ---------- Step 7: Elephant micro-moment ----------
   The logo perks up when noticed. (The SVG is a single flat path,
   so the whole mark moves rather than an individual ear.) */
@media (hover: hover) {
    .navbar-logo img {
        transition: transform 350ms var(--te-ease);
        transform-origin: 50% 60%;
    }

    .navbar-logo:hover img {
        transform: scale(1.05) rotate(-2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-logo img {
        transition: none;
    }
    .navbar-logo:hover img {
        transform: none;
    }
}

/* ---------- Step 5: Squeegee section reveals ----------
   A horizontal wipe like a screen-print squeegee pass. */
.te-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 600ms var(--te-ease);
}

.te-reveal.te-reveal-in {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    .te-reveal {
        clip-path: none;
        transition: none;
    }
}

/* ---------- Step 4: Product card lift (desktop pointers only) ---------- */
@media (hover: hover) {
    /* pp-card already lifts (te-landing.css); add the shirt tilt */
    .pp-card .pp-card-image img,
    .product-card-v2 img,
    .related-product-card img {
        transition: transform 250ms var(--te-ease);
    }

    .pp-card:hover .pp-card-image img,
    .product-card-v2:hover img,
    .related-product-card:hover img {
        transform: rotate(2deg) scale(1.05);
    }

    /* cards without an existing lift get one */
    .product-card-v2,
    .related-product-card {
        transition: transform 250ms var(--te-ease), box-shadow 250ms var(--te-ease);
    }

    .product-card-v2:hover,
    .related-product-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(13, 79, 140, 0.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pp-card .pp-card-image img,
    .product-card-v2 img,
    .related-product-card img,
    .product-card-v2,
    .related-product-card {
        transition: none;
    }
    .pp-card:hover .pp-card-image img,
    .product-card-v2:hover img,
    .related-product-card:hover img,
    .product-card-v2:hover,
    .related-product-card:hover {
        transform: none;
    }
}