/*
 * CV2 Animation System v1.0
 * GPU-composited animations — transform + opacity only
 * Eliminates FPS drops, layout reflows, paint thrashing
 */

/* ─────────────────────────────────────────────
   1. Animation Timing Tokens
───────────────────────────────────────────── */
:root {
    --cv2-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --cv2-ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
    --cv2-ease-decel:  cubic-bezier(0, 0, 0.3, 1);
    --cv2-dur-instant: 0.1s;
    --cv2-dur-fast:    0.18s;
    --cv2-dur-base:    0.26s;
    --cv2-dur-slow:    0.4s;
}

/* ─────────────────────────────────────────────
   2. Mobile Drawer — definitive GPU transition
   (prevents jump when main-head.css loads async)
───────────────────────────────────────────── */
.CoreV2-mobile-drawer {
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.28s ease !important;
    will-change: transform !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ─────────────────────────────────────────────
   3. Card hover — compositor-only
   No margin/height/width changes (layout triggers)
───────────────────────────────────────────── */
.pack,
.CoreV2paktsb-card,
.corenedenbiz-card,
.cv2-ssteps__card,
.ws-product-card,
.coreservercart-card,
.coreyorumcrt-card {
    transition: transform var(--cv2-dur-fast) var(--cv2-ease-out),
                box-shadow var(--cv2-dur-fast) ease !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@media (hover: hover) {
    .pack:hover,
    .CoreV2paktsb-card:hover,
    .corenedenbiz-card:hover,
    .cv2-ssteps__card:hover {
        transform: translateY(-4px) translateZ(0) !important;
    }
}

/* ─────────────────────────────────────────────
   4. Buttons — snappy GPU response
───────────────────────────────────────────── */
.pack-cart-btn,
.coredomain-search-floating__btn,
.cv2-hcta__submit-btn,
.corev2btn,
[class*="pack-cart-btn"] {
    transition:
        transform var(--cv2-dur-instant) var(--cv2-ease-out),
        background-color var(--cv2-dur-instant) ease,
        box-shadow var(--cv2-dur-instant) ease !important;
}
@media (hover: hover) {
    .pack-cart-btn:hover,
    .coredomain-search-floating__btn:hover {
        transform: translateY(-1px) translateZ(0) !important;
    }
}
.pack-cart-btn:active,
.coredomain-search-floating__btn:active {
    transform: scale(0.97) translateZ(0) !important;
    transition-duration: 0.06s !important;
}

/* ─────────────────────────────────────────────
   5. Mega-menu — smooth appear/disappear
───────────────────────────────────────────── */
.megahedars-mega-menu-container {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ─────────────────────────────────────────────
   6. IntersectionObserver Scroll Animations
   Usage: <div data-cv2-anim="up">
          <div data-cv2-anim="fade" data-cv2-anim-delay="100">
───────────────────────────────────────────── */
[data-cv2-anim] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity var(--cv2-dur-slow) var(--cv2-ease-out),
                transform var(--cv2-dur-slow) var(--cv2-ease-out);
}
[data-cv2-anim="fade"]        { transform: none; }
[data-cv2-anim="slide-left"]  { transform: translateX(-22px); }
[data-cv2-anim="slide-right"] { transform: translateX(22px); }
[data-cv2-anim="scale"]       { transform: scale(0.94); }
[data-cv2-anim="up"]          { transform: translateY(22px); }

.cv2-anim-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* ─────────────────────────────────────────────
   7. Skeleton Loading
───────────────────────────────────────────── */
.cv2-skeleton {
    border-radius: var(--cv2-radius-input, 8px);
    background: linear-gradient(
        90deg,
        var(--border-color, #e2e8f0) 25%,
        rgba(148, 163, 184, 0.2) 50%,
        var(--border-color, #e2e8f0) 75%
    );
    background-size: 200% 100%;
    animation: cv2Shimmer 1.6s ease-in-out infinite;
    min-height: 16px;
}
[data-theme="dark"] .cv2-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.06) 25%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.06) 75%
    );
    background-size: 200% 100%;
}
@keyframes cv2Shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.cv2-skeleton--text   { height: 14px; border-radius: 4px; }
.cv2-skeleton--title  { height: 22px; border-radius: 6px; }
.cv2-skeleton--card   { height: 120px; border-radius: var(--cv2-radius-card, 16px); }
.cv2-skeleton--circle { border-radius: 50%; }

/* ─────────────────────────────────────────────
   8. Utility Animation Classes
───────────────────────────────────────────── */
.cv2-fadein {
    animation: cv2FadeIn var(--cv2-dur-base) var(--cv2-ease-out) both;
}
.cv2-slidein-up {
    animation: cv2SlideInUp var(--cv2-dur-base) var(--cv2-ease-out) both;
}
.cv2-slidein-left {
    animation: cv2SlideInLeft var(--cv2-dur-base) var(--cv2-ease-out) both;
}
@keyframes cv2FadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes cv2SlideInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cv2SlideInLeft { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────
   9. Scroll Performance Lock
   Disables hover repaints during fast scroll
───────────────────────────────────────────── */
html.cv2-scrolling .pack,
html.cv2-scrolling .CoreV2paktsb-card,
html.cv2-scrolling .corenedenbiz-card,
html.cv2-scrolling .cv2-ssteps__card {
    pointer-events: none;
    transition: none !important;
}

/* ─────────────────────────────────────────────
   10. Mobile — strip heavy effects
───────────────────────────────────────────── */
@media (max-width: 991px) {
    /* No backdrop-filter on mobile (GPU-heavy) */
    .CoreV2-mobile-header *,
    .CoreV2-mobile-drawer {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* No hover lifts on touch */
    .pack:hover, .CoreV2paktsb-card:hover,
    .corenedenbiz-card:hover, .cv2-ssteps__card:hover {
        transform: translateZ(0) !important;
    }
    /* Faster durations on mobile */
    :root {
        --cv2-dur-slow: 0.28s;
        --cv2-dur-base: 0.2s;
        --cv2-dur-fast: 0.14s;
    }
    /* Reduce will-change (saves GPU memory) */
    *:not(.CoreV2-mobile-drawer) {
        will-change: auto !important;
    }
}

/* ─────────────────────────────────────────────
   11. Touch device — class added by JS
───────────────────────────────────────────── */
html.cv2-touch .pack:hover,
html.cv2-touch .CoreV2paktsb-card:hover,
html.cv2-touch .corenedenbiz-card:hover {
    transform: translateZ(0) !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────
   12. Low Performance Mode (set by animation engine JS)
───────────────────────────────────────────── */
html.cv2-low-perf *,
html.cv2-low-perf *::before,
html.cv2-low-perf *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
html.cv2-low-perf [data-cv2-anim] {
    opacity: 1 !important;
    transform: none !important;
}
html.cv2-low-perf .cv2-skeleton {
    animation: none !important;
    background: var(--border-color, #e2e8f0) !important;
}

/* ─────────────────────────────────────────────
   13. Reduced Motion (accessibility)
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .CoreV2-mobile-drawer { transition: none !important; }
    [data-cv2-anim]       { opacity: 1 !important; transform: none !important; transition: none !important; }
    .cv2-fadein, .cv2-slidein-up, .cv2-slidein-left { animation: none !important; opacity: 1; }
    .cv2-skeleton         { animation: none !important; }
}

/* ─────────────────────────────────────────────
   14. GPU promotion for heavy modals
   (applied only on open, removed on close)
───────────────────────────────────────────── */
#cv2-quickauth-backdrop,
.iziModal-wrap,
.CoreV2-modal-overlay {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}