/* ================================================
   SpeedPaper Animation Library - Enhanced
   Performance optimized with GPU acceleration
   ================================================ */

/* ================================================
   Keyframe Animations - GPU Optimized
   ================================================ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -24px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-24px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(24px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale3d(0.92, 0.92, 1); }
    to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes slideInUp {
    from { transform: translate3d(0, 100%, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translate3d(0, -16px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale3d(0.5, 0.5, 1); }
    to { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes bounce {
    0%, 20%, 53%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); }
    40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -20px, 0); }
    70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -10px, 0); }
    80% { transform: translate3d(0, 0, 0); }
    90% { transform: translate3d(0, -4px, 0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale3d(1, 1, 1); }
    50% { opacity: 0.85; transform: scale3d(1.02, 1.02, 1); }
}

@keyframes float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -8px, 0); }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes shake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate3d(-4px, 0, 0); }
    20%, 40%, 60%, 80% { transform: translate3d(4px, 0, 0); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(37, 99, 235, 0.4), 0 0 12px rgba(37, 99, 235, 0.2); }
    50% { box-shadow: 0 0 12px rgba(37, 99, 235, 0.6), 0 0 24px rgba(37, 99, 235, 0.3); }
}

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

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes ripple {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}

/* NEW: Modern micro-interactions */
@keyframes popIn {
    0% { opacity: 0; transform: scale3d(0.8, 0.8, 1); }
    60% { opacity: 1; transform: scale3d(1.05, 1.05, 1); }
    100% { transform: scale3d(1, 1, 1); }
}

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

@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.15); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    70% { transform: scale(1); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

@keyframes countUp {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes morphBg {
    0% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; }
}

/* ================================================
   Animation Utility Classes - Enhanced
   ================================================ */

/* Fade Animations */
.animate-fade-in { animation: fadeIn 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.animate-fade-in-up { animation: fadeInUp 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.animate-fade-in-down { animation: fadeInDown 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.animate-fade-in-left { animation: fadeInLeft 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.animate-fade-in-right { animation: fadeInRight 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards; }

/* Scale & Zoom Animations */
.animate-scale-in { animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-zoom-in { animation: zoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.animate-pop-in { animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Slide Animations */
.animate-slide-in-up { animation: slideInUp 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.animate-slide-down { animation: slideDown 0.35s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
.animate-slide-in-right { animation: slideInRight 0.4s cubic-bezier(0.33, 1, 0.68, 1) forwards; }

/* Effect Animations */
.animate-bounce { animation: bounce 0.8s; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-rotate { animation: rotate 1.5s linear infinite; }
.animate-shake { animation: shake 0.5s; }
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.animate-wiggle { animation: wiggle 0.5s ease-in-out; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-morph { animation: morphBg 8s ease-in-out infinite; }

/* ================================================
   Scroll Reveal - Performance Optimized
   ================================================ */

.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1),
                transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: opacity, transform;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
    transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1),
                transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: opacity, transform;
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
    transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1),
                transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: opacity, transform;
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale3d(0.92, 0.92, 1);
    transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1),
                transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: opacity, transform;
}

.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale3d(1, 1, 1);
}

/* Stagger delays */
.delay-75 { animation-delay: 75ms; transition-delay: 75ms; }
.delay-100 { animation-delay: 100ms; transition-delay: 100ms; }
.delay-150 { animation-delay: 150ms; transition-delay: 150ms; }
.delay-200 { animation-delay: 200ms; transition-delay: 200ms; }
.delay-300 { animation-delay: 300ms; transition-delay: 300ms; }
.delay-400 { animation-delay: 400ms; transition-delay: 400ms; }
.delay-500 { animation-delay: 500ms; transition-delay: 500ms; }
.delay-700 { animation-delay: 700ms; transition-delay: 700ms; }

/* ================================================
   Hover Effects - Enhanced
   ================================================ */

.hover-lift {
    transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1),
                box-shadow 0.25s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: transform;
}

.hover-lift:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.hover-scale {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.hover-scale:hover {
    transform: scale3d(1.05, 1.05, 1);
}

.hover-scale-sm:hover {
    transform: scale3d(1.02, 1.02, 1);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 24px rgba(37, 99, 235, 0.4);
}

.hover-rotate {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

.hover-brightness {
    transition: filter 0.25s ease;
}

.hover-brightness:hover {
    filter: brightness(1.08);
}

/* NEW: Advanced hover effects */
.hover-card-pop {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hover-card-pop:hover {
    transform: translate3d(0, -8px, 0) scale3d(1.01, 1.01, 1);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);
}

.hover-shine {
    position: relative;
    overflow: hidden;
}

.hover-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg) translate(-100%, -100%);
    transition: transform 0.6s;
}

.hover-shine:hover::after {
    transform: rotate(30deg) translate(100%, 100%);
}

/* ================================================
   Loading Animations - Improved
   ================================================ */

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

.spinner {
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: #2563eb;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: rotate 0.7s linear infinite;
}

.spinner-sm { width: 20px; height: 20px; border-width: 2px; }
.spinner-lg { width: 48px; height: 48px; border-width: 4px; }

/* Dots Loader */
.dots-loader {
    display: flex;
    gap: 6px;
}

.dots-loader span {
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
}

.dots-loader span:nth-child(1) { animation-delay: -0.32s; }
.dots-loader span:nth-child(2) { animation-delay: -0.16s; }
.dots-loader span:nth-child(3) { animation-delay: 0s; }

/* Progress bar loading */
.progress-loading {
    position: relative;
    overflow: hidden;
}

.progress-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.3), transparent);
    animation: shimmer 1.5s infinite;
}

/* ================================================
   Transitions - Smooth & Consistent
   ================================================ */

.transition-all {
    transition: all 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}

.transition-smooth {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-bounce {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.transition-fast {
    transition: all 0.15s ease;
}

.transition-colors {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.transition-transform {
    transition: transform 0.25s cubic-bezier(0.33, 1, 0.68, 1);
}

.transition-opacity {
    transition: opacity 0.25s ease;
}

/* ================================================
   Gradient Animations
   ================================================ */

.gradient-animated {
    background: linear-gradient(-45deg, #2563eb, #3b82f6, #0ea5e9, #2563eb);
    background-size: 400% 400%;
    animation: gradientShift 6s ease infinite;
}

.gradient-text {
    background: linear-gradient(135deg, #2563eb, #7c3aed, #2563eb);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s linear infinite;
}

/* ================================================
   Button Ripple Effect
   ================================================ */

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.btn-ripple:active::after {
    width: 300px;
    height: 300px;
}

/* ================================================
   Page Transitions
   ================================================ */

.page-transition {
    animation: fadeInUp 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.page-transition-fast {
    animation: fadeIn 0.25s ease;
}

/* View transitions API support */
@supports (view-transition-name: page) {
    ::view-transition-old(root) {
        animation: fadeIn 0.25s ease reverse;
    }
    
    ::view-transition-new(root) {
        animation: fadeIn 0.25s ease;
    }
}

/* ================================================
   Focus Ring Animation
   ================================================ */

.focus-ring-animated:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb;
    animation: glow 2s ease-in-out infinite;
}

/* ================================================
   Cart Animations
   ================================================ */

.cart-add-animation {
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-badge-bounce {
    animation: bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cart-item-remove {
    animation: fadeInRight 0.3s ease reverse forwards;
}

/* ================================================
   Advanced Micro-Interactions
   ================================================ */

/* Magnetic Button Effect */
.btn-magnetic {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Elastic Scale */
@keyframes elasticScale {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    50% { transform: scale(0.95); }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.animate-elastic {
    animation: elasticScale 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Jelly Effect */
@keyframes jelly {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.25, 0.75); }
    40% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.15, 0.85); }
    65% { transform: scale(0.95, 1.05); }
    75% { transform: scale(1.05, 0.95); }
    100% { transform: scale(1, 1); }
}

.animate-jelly:active {
    animation: jelly 0.5s ease;
}

/* Success Check Animation */
@keyframes checkmark {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

.animate-checkmark path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: checkmark 0.6s ease forwards;
}

/* Flip Card Animation */
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Slide & Reveal Effect */
@keyframes slideReveal {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.animate-slide-reveal {
    animation: slideReveal 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Blur In Animation */
@keyframes blurIn {
    0% { opacity: 0; filter: blur(20px); }
    100% { opacity: 1; filter: blur(0); }
}

.animate-blur-in {
    animation: blurIn 0.5s ease forwards;
}

/* Typewriter Effect */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

.animate-typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 2s steps(30, end);
}

/* Counter Flip */
@keyframes counterFlip {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-100%); opacity: 0; }
    51% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.counter-flip {
    animation: counterFlip 0.3s ease-in-out;
}

/* Confetti Burst */
@keyframes confettiBurst {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-200px) rotate(720deg); opacity: 0; }
}

.confetti {
    animation: confettiBurst 1s ease-out forwards;
}

/* Notification Slide */
@keyframes notificationSlide {
    0% { transform: translateX(100%); opacity: 0; }
    10% { transform: translateX(0); opacity: 1; }
    90% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

.notification-slide {
    animation: notificationSlide 3s ease-in-out forwards;
}

/* Price Change Highlight */
@keyframes priceHighlight {
    0% { background-color: transparent; }
    25% { background-color: rgba(34, 197, 94, 0.2); }
    75% { background-color: rgba(34, 197, 94, 0.2); }
    100% { background-color: transparent; }
}

.price-updated {
    animation: priceHighlight 1s ease;
}

/* Skeleton Wave */
@keyframes skeletonWave {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-wave {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 100%
    );
    background-size: 200% 100%;
    animation: skeletonWave 1.5s ease-in-out infinite;
}

/* Card Stack Effect */
.card-stack {
    position: relative;
}

.card-stack::before,
.card-stack::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    transition: transform 0.3s ease;
}

.card-stack::before {
    transform: translateY(8px) scale(0.95);
    opacity: 0.6;
}

.card-stack::after {
    transform: translateY(16px) scale(0.9);
    opacity: 0.3;
}

.card-stack:hover::before {
    transform: translateY(4px) scale(0.98);
}

.card-stack:hover::after {
    transform: translateY(8px) scale(0.95);
}

/* Morphing Button */
.btn-morph {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-morph.loading {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
}

.btn-morph.success {
    background: #22c55e;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* Parallax Depth Layers */
.parallax-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.parallax-layer {
    transform: translateZ(0);
    transition: transform 0.1s ease-out;
}

.parallax-layer-1 { transform: translateZ(20px) scale(0.98); }
.parallax-layer-2 { transform: translateZ(40px) scale(0.96); }
.parallax-layer-3 { transform: translateZ(60px) scale(0.94); }

/* ================================================
   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;
    }
    
    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right,
    .scroll-reveal-scale {
        opacity: 1;
        transform: none;
    }
}