/* ==========================================================
   PETSCOMPARE - MICRO-ANIMATIONS
   ==========================================================
   Pack d'animations légères pour donner du peps sans alourdir.
   Toutes les animations sont désactivées pour les users avec
   prefers-reduced-motion: reduce (accessibilité).
   ========================================================== */

/* ============================================================
   1. TRANSITIONS GLOBALES DOUCES sur les liens / boutons
   ============================================================ */

a,
button,
input,
select,
textarea,
.rubric-card,
.animal-cat-card,
.animal-deal-card,
.compare-row,
.brand-card,
.pet-pill,
.card,
.product-card {
    transition:
        transform .2s cubic-bezier(.4, 0, .2, 1),
        box-shadow .2s ease,
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        opacity .15s ease;
}

/* ============================================================
   2. HOVER LIFT sur les cards principales
   ============================================================ */

/* Card "produits" / catégories */
.rubric-card:hover,
.animal-cat-card:hover,
.animal-deal-card:hover,
.brand-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

/* Pet pills (les pastilles "Pour quel animal ?") */
.pet-pill:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
}

/* Card produits sur la page comparateur */
.compare-row:hover {
    background: #fff7ed;
    transform: translateX(2px);
}

/* CTA principaux : effet "press" */
.hero-card-cta-btn:active,
.pp-buy-btn:active,
.scan-submit:active {
    transform: translateY(1px) scale(.98);
    transition: transform .08s ease;
}

/* ============================================================
   3. FOCUS STATES (accessibilité visuelle)
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #047857;
    outline-offset: 2px;
    border-radius: 4px;
}

.hero-card-cta-btn:focus-visible,
.pp-buy-btn:focus-visible,
.scan-submit:focus-visible {
    outline: 3px solid rgba(4, 120, 87, .4);
    outline-offset: 3px;
}

/* ============================================================
   4. SCROLL REVEAL (fade-in + slide-up)
   ============================================================ */

[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity .7s cubic-bezier(.2, .7, .3, 1),
        transform .7s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger : si plusieurs enfants reveal-stagger, ils apparaissent
   les uns après les autres */
[data-reveal-stagger] > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger] > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger] > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger] > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger] > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger] > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger] > *:nth-child(7) { transition-delay: 480ms; }

/* ============================================================
   5. PULSE animation pour les éléments "live" (En direct, etc.)
   ============================================================ */

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .55;
        transform: scale(1.15);
    }
}

.dot-live,
.live-pulse,
.flash-tag {
    animation: pulse-dot 2.2s ease-in-out infinite;
}

/* ============================================================
   6. SHIMMER pour les images en cours de chargement
   ============================================================ */

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.img-loading,
img.lazyload {
    background: linear-gradient(
        90deg,
        #f3f4f6 0%,
        #e5e7eb 50%,
        #f3f4f6 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

/* ============================================================
   7. TOAST NOTIFICATIONS (système global d'alerts visuelles)
   ============================================================ */

.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}

@media (max-width: 640px) {
    .toast-container {
        bottom: 16px;
        left: 16px;
        right: 16px;
    }
}

.toast {
    background: #1f2937;
    color: #fff;
    padding: 14px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    font-size: 14px;
    line-height: 1.45;
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    max-width: 360px;
    animation: toast-slide-in .35s cubic-bezier(.2, .7, .3, 1);
}

.toast.toast-success { background: #047857; }
.toast.toast-error   { background: #b91c1c; }
.toast.toast-warning { background: #d97706; }
.toast.toast-info    { background: #1f2937; }

.toast-icon { font-size: 18px; flex-shrink: 0; }

.toast.is-leaving {
    animation: toast-slide-out .35s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes toast-slide-in {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-slide-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(60px); }
}

/* ============================================================
   8. CHECK MARK ANIMÉ (confirmation visuelle)
   ============================================================ */

@keyframes check-circle-fill {
    0% { stroke-dashoffset: 167; }
    100% { stroke-dashoffset: 0; }
}

@keyframes check-mark-draw {
    0% { stroke-dashoffset: 50; }
    100% { stroke-dashoffset: 0; }
}

.animated-check {
    width: 64px;
    height: 64px;
}
.animated-check circle {
    stroke: #047857;
    stroke-width: 4;
    fill: none;
    stroke-dasharray: 167;
    stroke-dashoffset: 167;
    animation: check-circle-fill .55s ease-out forwards;
}
.animated-check path {
    stroke: #047857;
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: check-mark-draw .35s ease-out .45s forwards;
}

/* ============================================================
   9. SKELETON / placeholder loading
   ============================================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        #f3f4f6 0%,
        #e5e7eb 50%,
        #f3f4f6 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.skeleton-text-large { height: 22px; }
.skeleton-img {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}

/* ============================================================
   10. BUTTON RIPPLE (effet Material doux)
   ============================================================ */

.hero-card-cta-btn,
.pp-buy-btn,
.scan-submit,
.savings-badge {
    position: relative;
    overflow: hidden;
}

.hero-card-cta-btn::after,
.pp-buy-btn::after,
.scan-submit::after,
.savings-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, .3) 0%,
        transparent 70%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.hero-card-cta-btn:hover::after,
.pp-buy-btn:hover::after,
.scan-submit:hover::after,
.savings-badge:hover::after {
    opacity: 1;
}

/* ============================================================
   11. PRIX QUI "POP" quand la card est révélée
   ============================================================ */

@keyframes price-pop {
    0% { transform: scale(.6); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

[data-reveal].is-visible .verdict-price,
[data-reveal].is-visible .pp-cheapest-price,
[data-reveal].is-visible .animal-deal-price,
[data-reveal].is-visible .savings-hero-num {
    animation: price-pop .55s cubic-bezier(.2, .7, .3, 1);
    animation-delay: .25s;
    animation-fill-mode: backwards;
}

/* ============================================================
   12. BADGE NUTRI-SCORE qui rebondit légèrement
   ============================================================ */

@keyframes badge-bounce-in {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.nutri-badge-letter {
    animation: badge-bounce-in .65s cubic-bezier(.34, 1.56, .64, 1);
    display: inline-block;
}

/* ============================================================
   13. ACCESSIBILITÉ — désactive tout pour reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    .dot-live,
    .live-pulse,
    .flash-tag {
        animation: none;
    }
}