/**
 * Pawfinity UI/UX Pro Enhancements
 * Non-conflicting additions only — card/button/input transitions
 * are already handled by theme-override.css with !important.
 * This file adds: accessibility, cursor states, keyframe animations,
 * tooltips, notifications, and opt-in scroll animations.
 */

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */

:root {
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
}

/* ========================================
   ACCESSIBILITY - REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========================================
   FOCUS STATES - KEYBOARD NAVIGATION
   ======================================== */

*:focus-visible {
    outline: 2px solid var(--green-primary, #22c55e);
    outline-offset: 2px;
    border-radius: 4px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* ========================================
   CURSOR STATES
   ======================================== */

button,
a,
[role="button"],
[onclick],
.clickable,
.product-card,
.category-card,
.btn,
.nav-link,
input[type="submit"],
input[type="button"],
label[for] {
    cursor: pointer;
}

button:disabled,
.btn:disabled,
[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ========================================
   SKELETON SHIMMER (loading states)
   ======================================== */

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

.skeleton,
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: 8px;
}

/* ========================================
   PAGE FADE-IN (opt-in only)
   ======================================== */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
}

/* ========================================
   SCROLL ANIMATIONS (opt-in via class)
   ======================================== */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-slow) var(--ease-out-expo),
                transform var(--duration-slow) var(--ease-out-expo);
}

.animate-on-scroll.visible,
.animate-on-scroll.no-hide {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   TOAST / NOTIFICATION ANIMATIONS
   ======================================== */

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(100%); }
}

.notification-enter {
    animation: slideInRight var(--duration-slow) var(--ease-spring) forwards;
}

.notification-exit {
    animation: slideOutRight var(--duration-normal) ease forwards;
}

/* ========================================
   CART BADGE BOUNCE
   ======================================== */

@keyframes bounceIn {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.badge-bounce {
    animation: bounceIn var(--duration-slow) var(--ease-spring);
}

/* ========================================
   ADD-TO-CART SUCCESS FLASH (opt-in)
   ======================================== */

@keyframes addToCartSuccess {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.95); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.add-to-cart.success {
    animation: addToCartSuccess 0.4s var(--ease-spring);
}

/* ========================================
   PRICE CHANGE HIGHLIGHT (opt-in)
   ======================================== */

@keyframes priceChange {
    0%   { transform: scale(1); color: inherit; }
    50%  { transform: scale(1.15); color: var(--green-primary, #22c55e); }
    100% { transform: scale(1); color: inherit; }
}

.price-changed {
    display: inline-block;
    animation: priceChange var(--duration-slow) var(--ease-spring);
}

/* ========================================
   TOOLTIP (data-tooltip attribute)
   ======================================== */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    padding: 6px 12px;
    background: #1a1a1a;
    color: #ffffff;
    font-size: 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) ease,
                transform var(--duration-fast) var(--ease-spring),
                visibility var(--duration-fast);
    z-index: 1000;
    pointer-events: none;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* ========================================
   MOBILE BOTTOM NAV TAP FEEDBACK
   ======================================== */

.mobile-bottom-nav a:active,
.mobile-bottom-nav button:active {
    transform: scale(0.92);
}