/* ============================================================
   IRONHAUS — Forge motion layer (punchy, athletic, industrial).
   Progressive enhancement: motion.js adds `html.motion` ONLY when JS runs
   and the user hasn't asked for reduced motion. Every "hidden" start state is
   scoped under `.motion`, so without JS (or with prefers-reduced-motion) all
   content is fully visible — no stuck-invisible elements, SEO-safe.
   GPU-friendly (transform/opacity/clip only). Easings are snappier than the
   editorial layer to read as "forged / driven" rather than "drifting".
   ============================================================ */

/* Forge easings */
:root {
    --ease-forge: cubic-bezier(.16,.84,.28,1);   /* fast-out, firm settle (reveals) */
    --ease-punch: cubic-bezier(.34,1.4,.5,1);    /* slight overshoot (hover/pop)    */
    --ease-slash: cubic-bezier(.76,0,.24,1);     /* mechanical wipe (rules/images)  */
}

/* ---- Scroll reveal (rise + firm settle) ---- */
.motion .reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .7s var(--ease-forge), transform .7s var(--ease-forge);
    will-change: opacity, transform;
}
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal-left  { transform: translateX(-46px); }
.motion .reveal-right { transform: translateX(46px); }
.motion .reveal-up    { transform: translateY(48px); }
.motion .reveal-left.in, .motion .reveal-right.in, .motion .reveal-up.in { transform: none; }

/* Punch-in: scale-up snap for badges / icons / eyebrows */
.motion .reveal-pop { opacity: 0; transform: scale(.88) translateY(12px); transition: opacity .5s var(--ease-forge), transform .55s var(--ease-punch); }
.motion .reveal-pop.in { opacity: 1; transform: none; }

/* ---- Staggered children (grids, hero content) — tighter cadence ---- */
.motion .reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s var(--ease-forge), transform .6s var(--ease-forge);
    will-change: opacity, transform;
}
.motion .reveal-stagger.in > * { opacity: 1; transform: none; }
.motion .reveal-stagger.in > *:nth-child(1) { transition-delay: .00s; }
.motion .reveal-stagger.in > *:nth-child(2) { transition-delay: .07s; }
.motion .reveal-stagger.in > *:nth-child(3) { transition-delay: .14s; }
.motion .reveal-stagger.in > *:nth-child(4) { transition-delay: .21s; }
.motion .reveal-stagger.in > *:nth-child(5) { transition-delay: .28s; }
.motion .reveal-stagger.in > *:nth-child(6) { transition-delay: .35s; }
.motion .reveal-stagger.in > *:nth-child(7) { transition-delay: .42s; }
.motion .reveal-stagger.in > *:nth-child(8) { transition-delay: .49s; }

/* ---- Image clip-wipe reveal (mechanical, diagonal-feel) ---- */
.motion .reveal-img { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-slash); will-change: clip-path; }
.motion .reveal-img.in { clip-path: inset(0 0 0 0); }

/* ---- Rules / slash motifs draw in from the left ---- */
.motion .brass-rule, .motion .draw-rule, .motion .ember-rule {
    transform: scaleX(0); transform-origin: left;
    transition: transform .75s var(--ease-slash) .1s;
}
.motion .brass-rule.in, .motion .draw-rule.in, .motion .ember-rule.in { transform: scaleX(1); }

/* The 6° energy slash under section titles flares in once the head reveals */
.motion .section-head .section-title::after,
.motion .section-title.draw-slash::after { transform: skewX(-6deg) scaleX(0); transform-origin: left; transition: transform .6s var(--ease-slash) .15s; }
.motion .section-head.in .section-title::after { transform: translateX(-50%) skewX(-6deg) scaleX(1); }
.motion .section-head.start.in .section-title::after,
.motion .section-title.draw-slash.in::after { transform: skewX(-6deg) scaleX(1); }

/* ============================================================
   Hover energy (applies regardless of JS — GPU only)
   ============================================================ */
.card-vet, .feature-card, .svc-card, .service-card, .team-card, .tech-card,
.product-card, .plan-card, .price-card, .offer-card, .pkg-card, .post-card,
.value-card, .branch-card, .info-card, .testi-card {
    transition: transform .35s var(--ease-punch), box-shadow .35s ease, border-color .35s ease;
}
.card-vet:hover, .feature-card:hover, .svc-card:hover, .service-card:hover,
.team-card:hover, .tech-card:hover, .product-card:hover, .plan-card:hover,
.price-card:hover, .offer-card:hover, .pkg-card:hover, .post-card:hover,
.value-card:hover, .branch-card:hover, .info-card:hover {
    transform: translateY(-8px);
}

/* Image zoom inside cards / figures — punchy but smooth */
figure img, .card-vet .card-img img, .gallery-item img, .product-card img, .team-card img {
    transition: transform .8s var(--ease-forge);
}
.card-vet:hover .card-img img, .gallery-item:hover img, .product-card:hover img,
.team-card:hover img, figure:hover > img { transform: scale(1.07); }

/* Category / filter chips snap up with a touch of overshoot */
.animal-chip, .category-chip, .brand-chip { transition: transform .3s var(--ease-punch), box-shadow .3s ease, border-color .3s ease; }

/* CTA + outline buttons: lift + firm-press feedback */
.btn-cta, .btn-accent, .btn-outline-cta { transition: transform .22s var(--ease-punch), box-shadow .22s ease, background .22s ease, color .22s ease; }
.btn-cta:active, .btn-accent:active, .btn-outline-cta:active { transform: translateY(0) scale(.97); }

/* Floating action + back-to-top pop on hover */
.float-actions a { transition: transform .22s var(--ease-punch), box-shadow .22s ease; }

/* ============================================================
   Hero — slow Ken-Burns push on the active slide
   (motion.js parallax drives .hero-content separately; its reveal must
    end at translateY(0), which it does above)
   ============================================================ */
.hero-slide.active { animation: forge-kenburns 18s ease-out forwards; }
@keyframes forge-kenburns { from { transform: scale(1.001); } to { transform: scale(1.1); } }

/* Hero eyebrow / CTA "ignite" entrance when JS reveals the hero copy */
.motion .hero-content .hero-eyebrow { opacity: 0; transform: translateY(14px) scale(.94); transition: opacity .55s var(--ease-forge), transform .6s var(--ease-punch) .05s; }
.motion .hero-content.in .hero-eyebrow { opacity: 1; transform: none; }

/* ============================================================
   Reduced-motion / no-JS safety net
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-slide.active { animation: none; }
    .card-vet, .feature-card, .svc-card, .service-card, .team-card, .tech-card,
    .product-card, .plan-card, .price-card, .offer-card, .pkg-card, .post-card,
    .value-card, .branch-card, .info-card, .testi-card,
    .animal-chip, .category-chip, .brand-chip,
    .btn-cta, .btn-accent, .btn-outline-cta, .float-actions a,
    figure img, .card-vet .card-img img, .gallery-item img, .product-card img, .team-card img {
        transition: none !important;
    }
    .card-vet:hover, .feature-card:hover, .svc-card:hover, .service-card:hover,
    .team-card:hover, .product-card:hover, .plan-card:hover, .price-card:hover,
    .offer-card:hover, .pkg-card:hover, .post-card:hover, .value-card:hover,
    .branch-card:hover, .info-card:hover { transform: none; }
}