/* ============================================================
   ANIMATIONS.CSS
   All keyframe animations, scroll reveal classes, page
   transitions, loading states, and motion utilities.

   TABLE OF CONTENTS:
   1.  Page Transition Overlay
   2.  Scroll Reveal — Base Classes
   3.  Scroll Reveal — Directional Variants
   4.  Scroll Reveal — Scale Variant
   5.  Stagger Children Animation
   6.  Keyframe Definitions
   7.  Counter Animation
   8.  Ripple Effect
   9.  Skeleton Loading
   10. Pulse / Blink Animations
   11. Spinner / Loader
   12. Hover Motion Utilities
   13. Particle Animation
   14. Brands Ticker
   15. Reduced Motion Support
============================================================ */


/* ============================================================
   1. PAGE TRANSITION OVERLAY
   Full-screen overlay shown during page navigation.
   Controlled by app.js — adds/removes .active class.
============================================================ */

.page-transition {
    position:           fixed;
    inset:              0;
    background:         var(--bg);
    z-index:            var(--z-transition);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    opacity:            0;
    pointer-events:     none;
    transition:         opacity 0.35s ease;
}

/* Active state — shown during navigation */
.page-transition.active {
    opacity:            1;
    pointer-events:     all;
}

/* Inner wrapper for centering */
.pt-inner {
    display:            flex;
    align-items:        center;
    justify-content:    center;
}

/* Logo + name + spinner inside transition */
.pt-logo {
    display:            flex;
    flex-direction:     column;
    align-items:        center;
    gap:                16px;
    animation:          ptFadeIn 0.3s ease both;
}

.pt-name {
    font-size:          18px;
    font-weight:        800;
    color:              var(--text);
    letter-spacing:     -0.5px;
}

/* Spinning loader circle */
.pt-loader {
    width:              44px;
    height:             44px;
    border:             3px solid var(--bg-3);
    border-top-color:   var(--primary);
    border-radius:      50%;
    animation:          spin 0.8s linear infinite;
}

@keyframes ptFadeIn {
    from {
        opacity:            0;
        transform:          scale(0.95) translateY(10px);
    }
    to {
        opacity:            1;
        transform:          scale(1) translateY(0);
    }
}


/* ============================================================
   2. SCROLL REVEAL — BASE CLASS
   Elements with .reveal start invisible and translate up.
   JavaScript IntersectionObserver adds .active when in view.
============================================================ */

.reveal {
    opacity:            0;
    transform:          translateY(36px);
    transition:
        opacity     0.75s cubic-bezier(0.4, 0, 0.2, 1),
        transform   0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Triggered state — element is now visible */
.reveal.active {
    opacity:            1;
    transform:          translateY(0);
}


/* ============================================================
   3. SCROLL REVEAL — DIRECTIONAL VARIANTS
   Slide in from different directions on scroll.
============================================================ */

/* Slide in from left */
.reveal-left {
    opacity:            0;
    transform:          translateX(-52px);
    transition:
        opacity     0.75s cubic-bezier(0.4, 0, 0.2, 1),
        transform   0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
    opacity:            1;
    transform:          translateX(0);
}

/* Slide in from right */
.reveal-right {
    opacity:            0;
    transform:          translateX(52px);
    transition:
        opacity     0.75s cubic-bezier(0.4, 0, 0.2, 1),
        transform   0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
    opacity:            1;
    transform:          translateX(0);
}

/* Slide in from bottom (stronger offset) */
.reveal-up {
    opacity:            0;
    transform:          translateY(60px);
    transition:
        opacity     0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform   0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-up.active {
    opacity:            1;
    transform:          translateY(0);
}

/* Slide in from top */
.reveal-down {
    opacity:            0;
    transform:          translateY(-36px);
    transition:
        opacity     0.75s cubic-bezier(0.4, 0, 0.2, 1),
        transform   0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-down.active {
    opacity:            1;
    transform:          translateY(0);
}


/* ============================================================
   4. SCROLL REVEAL — SCALE VARIANT
   Scales up from slightly smaller when scrolled into view.
   Used on hero cards, CTA banners, featured cards.
============================================================ */

.reveal-scale {
    opacity:            0;
    transform:          scale(0.92);
    transition:
        opacity     0.75s cubic-bezier(0.4, 0, 0.2, 1),
        transform   0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.active {
    opacity:            1;
    transform:          scale(1);
}


/* ============================================================
   5. STAGGER CHILDREN ANIMATION
   Parent gets .stagger class. Each direct child animates
   in sequence with increasing delays when parent is active.
   JavaScript adds .active to the parent.
============================================================ */

/* All children start hidden */
.stagger > * {
    opacity:            0;
    transform:          translateY(28px);
    transition:
        opacity     0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform   0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Each child gets a delay increment */
.stagger.active > *:nth-child(1)  {
    transition-delay:   0.05s;
    opacity:            1;
    transform:          translateY(0);
}
.stagger.active > *:nth-child(2)  {
    transition-delay:   0.12s;
    opacity:            1;
    transform:          translateY(0);
}
.stagger.active > *:nth-child(3)  {
    transition-delay:   0.19s;
    opacity:            1;
    transform:          translateY(0);
}
.stagger.active > *:nth-child(4)  {
    transition-delay:   0.26s;
    opacity:            1;
    transform:          translateY(0);
}
.stagger.active > *:nth-child(5)  {
    transition-delay:   0.33s;
    opacity:            1;
    transform:          translateY(0);
}
.stagger.active > *:nth-child(6)  {
    transition-delay:   0.40s;
    opacity:            1;
    transform:          translateY(0);
}
.stagger.active > *:nth-child(7)  {
    transition-delay:   0.47s;
    opacity:            1;
    transform:          translateY(0);
}
.stagger.active > *:nth-child(8)  {
    transition-delay:   0.54s;
    opacity:            1;
    transform:          translateY(0);
}
.stagger.active > *:nth-child(9)  {
    transition-delay:   0.61s;
    opacity:            1;
    transform:          translateY(0);
}
.stagger.active > *:nth-child(10) {
    transition-delay:   0.68s;
    opacity:            1;
    transform:          translateY(0);
}


/* ============================================================
   6. KEYFRAME DEFINITIONS
   All @keyframes used throughout the project.
============================================================ */

/* Spin — used by loaders and spinners */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Pulse background — used by hero radial glows */
@keyframes heroPulse {
    0%, 100% {
        transform:  scale(1);
        opacity:    0.6;
    }
    50% {
        transform:  scale(1.25);
        opacity:    1;
    }
}

/* Fade in downward — used by hero badge */
@keyframes fadeInDown {
    from {
        opacity:    0;
        transform:  translateY(-16px);
    }
    to {
        opacity:    1;
        transform:  translateY(0);
    }
}

/* Fade in upward */
@keyframes fadeInUp {
    from {
        opacity:    0;
        transform:  translateY(20px);
    }
    to {
        opacity:    1;
        transform:  translateY(0);
    }
}

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Blink — used by live indicator dot */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

/* Pop in — used by modal success icon */
@keyframes popIn {
    0%   { transform: scale(0);    }
    70%  { transform: scale(1.18); }
    100% { transform: scale(1);    }
}

/* Bounce — subtle bounce for elements */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* Shake — used on login error */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-8px); }
    30%       { transform: translateX(8px); }
    45%       { transform: translateX(-6px); }
    60%       { transform: translateX(6px); }
    75%       { transform: translateX(-4px); }
    90%       { transform: translateX(4px); }
}

/* Slide in from right — used by toast notifications */
@keyframes toastIn {
    from {
        transform:  translateX(110%);
        opacity:    0;
    }
    to {
        transform:  translateX(0);
        opacity:    1;
    }
}

/* Slide out to right — used when toast is dismissed */
@keyframes toastOut {
    from {
        transform:  translateX(0);
        opacity:    1;
    }
    to {
        transform:  translateX(110%);
        opacity:    0;
    }
}

/* Slide in from left — for mobile nav */
@keyframes slideInLeft {
    from {
        transform:  translateX(-100%);
        opacity:    0;
    }
    to {
        transform:  translateX(0);
        opacity:    1;
    }
}

/* Scale in — modal box appears */
@keyframes scaleIn {
    from {
        transform:  scale(0.88);
        opacity:    0;
    }
    to {
        transform:  scale(1);
        opacity:    1;
    }
}

/* Ripple — button click effect */
@keyframes rippleAnim {
    to {
        transform:  scale(4);
        opacity:    0;
    }
}

/* Shimmer — skeleton loading */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Scroll brands ticker */
@keyframes scrollBrands {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Float particle */
@keyframes floatParticle {
    0% {
        transform:  translateY(100vh) rotate(0deg);
        opacity:    0;
    }
    10%  { opacity: 0.4; }
    90%  { opacity: 0.4; }
    100% {
        transform:  translateY(-10vh) rotate(720deg);
        opacity:    0;
    }
}

/* Glow pulse — for price panels, CTAs */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(204, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 0 40px rgba(204, 0, 0, 0.30);
    }
}

/* Number count up flicker */
@keyframes countUp {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}


/* ============================================================
   7. COUNTER ANIMATION
   Numbers that count up when scrolled into view.
   Controlled by app.js initCounters().
============================================================ */

.counter {
    display:            inline-block;
    animation:          countUp 0.3s ease both;
}

/* Wrapper for counter + suffix */
.counter-wrap {
    display:            inline-flex;
    align-items:        baseline;
    gap:                2px;
}


/* ============================================================
   8. RIPPLE EFFECT
   Button click ripple animation.
   Wave element is injected by app.js on click.
============================================================ */

/* Any element that should have ripple */
.ripple {
    position:           relative;
    overflow:           hidden;
}

/* The ripple wave element */
.ripple-wave {
    position:           absolute;
    border-radius:      50%;
    background:         rgba(255, 255, 255, 0.35);
    transform:          scale(0);
    animation:          rippleAnim 0.6s linear;
    pointer-events:     none;
    z-index:            1;
}

/* Dark ripple variant — for light buttons */
.ripple-dark .ripple-wave {
    background:         rgba(0, 0, 0, 0.12);
}


/* ============================================================
   9. SKELETON LOADING
   Animated placeholder shown while content is loading.
   Applied with .skeleton class to any element.
============================================================ */

.skeleton {
    background:         linear-gradient(
                            90deg,
                            var(--bg-3)   0%,
                            var(--bg-4)   50%,
                            var(--bg-3)   100%
                        );
    background-size:    200% 100%;
    animation:          shimmer 1.5s ease-in-out infinite;
    border-radius:      var(--radius-sm);
    color:              transparent !important;
    pointer-events:     none;
    user-select:        none;
}

/* Common skeleton shape variants */
.skeleton-text {
    height:         16px;
    border-radius:  var(--radius-full);
    margin-bottom:  8px;
}

.skeleton-title {
    height:         28px;
    width:          60%;
    border-radius:  var(--radius-full);
    margin-bottom:  12px;
}

.skeleton-img {
    width:          100%;
    height:         200px;
    border-radius:  var(--radius-md);
}

.skeleton-circle {
    width:          48px;
    height:         48px;
    border-radius:  50%;
}


/* ============================================================
   10. PULSE / BLINK ANIMATIONS
   Used by live indicators, notification dots, status badges.
============================================================ */

/* Live dot — green pulsing indicator */
.dot-live {
    width:          7px;
    height:         7px;
    background:     var(--green);
    border-radius:  50%;
    display:        inline-block;
    animation:      blink 2s ease-in-out infinite;
    flex-shrink:    0;
}

/* Unread indicator dot */
.dot-unread {
    width:          8px;
    height:         8px;
    background:     var(--primary);
    border-radius:  50%;
    display:        inline-block;
    flex-shrink:    0;
}

/* Pulse ring — larger animated ring */
.pulse-ring {
    position:       relative;
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
}

.pulse-ring::before {
    content:        '';
    position:       absolute;
    inset:          -4px;
    border-radius:  50%;
    background:     rgba(22, 163, 74, 0.25);
    animation:      blink 2s ease-in-out infinite;
}


/* ============================================================
   11. SPINNER / LOADER
   Used inside submit buttons and loading states.
============================================================ */

/* Spinner inside buttons */
.spin {
    display:        none;
    width:          20px;
    height:         20px;
    border:         2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius:  50%;
    animation:      spin 0.8s linear infinite;
    margin:         0 auto;
    flex-shrink:    0;
}

/* Show spinner, hide text when loading */
.btn-submit.loading .btn-txt {
    display:    none;
}

.btn-submit.loading .spin {
    display:    block;
}

/* Page-level full screen loader */
.page-loader {
    position:           fixed;
    inset:              0;
    background:         var(--bg);
    z-index:            var(--z-transition);
    display:            flex;
    align-items:        center;
    justify-content:    center;
}

.page-loader-spinner {
    width:              52px;
    height:             52px;
    border:             4px solid var(--bg-3);
    border-top-color:   var(--primary);
    border-radius:      50%;
    animation:          spin 0.9s linear infinite;
}

/* Inline small spinner */
.spinner-sm {
    width:              16px;
    height:             16px;
    border:             2px solid var(--border);
    border-top-color:   var(--primary);
    border-radius:      50%;
    animation:          spin 0.7s linear infinite;
    display:            inline-block;
}


/* ============================================================
   12. HOVER MOTION UTILITIES
   Reusable hover effects applied directly as classes.
============================================================ */

/* Lift on hover */
.hover-lift {
    transition: transform var(--transition), box-shadow var(--transition);
}
.hover-lift:hover {
    transform:  translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* Gentle lift */
.hover-lift-sm {
    transition: transform var(--transition);
}
.hover-lift-sm:hover {
    transform:  translateY(-3px);
}

/* Scale on hover */
.hover-scale {
    transition: transform var(--transition);
}
.hover-scale:hover {
    transform:  scale(1.04);
}

/* Glow on hover */
.hover-glow {
    transition: box-shadow var(--transition);
}
.hover-glow:hover {
    box-shadow: var(--shadow-red);
}

/* Grow slightly */
.hover-grow {
    transition: transform var(--transition);
}
.hover-grow:hover {
    transform:  scale(1.08);
}


/* ============================================================
   13. PARTICLE ANIMATION
   Floating particles in the hero section background.
   Individual particles are injected by app.js.
============================================================ */

/* Particle container */
.hero-particles {
    position:       absolute;
    inset:          0;
    overflow:       hidden;
    pointer-events: none;
    z-index:        0;
}

/* Individual particle */
.particle {
    position:       absolute;
    width:          4px;
    height:         4px;
    background:     var(--primary);
    border-radius:  50%;
    opacity:        0;
    animation:      floatParticle linear infinite;
}

/* Larger particle variant */
.particle-lg {
    width:          6px;
    height:         6px;
}

/* Subtle particle variant */
.particle-faint {
    background:     rgba(204, 0, 0, 0.3);
}


/* ============================================================
   14. BRANDS TICKER
   Horizontally scrolling marquee of brand names.
   Duplicated content in HTML for seamless loop.
============================================================ */

/* Outer overflow container */
.brands-overflow {
    overflow:       hidden;
    width:          100%;
}

/* The moving track */
.brands-track {
    display:        flex;
    gap:            40px;
    width:          max-content;
    animation:      scrollBrands 22s linear infinite;
}

/* Pause on hover */
.brands-track:hover {
    animation-play-state: paused;
}

/* Individual brand item */
.brand-item {
    display:        flex;
    align-items:    center;
    gap:            7px;
    font-size:      14px;
    font-weight:    700;
    color:          var(--text-3);
    opacity:        0.65;
    white-space:    nowrap;
    transition:     var(--transition);
    cursor:         default;
    user-select:    none;
}

.brand-item:hover {
    opacity:        1;
    color:          var(--primary);
}

/* Dot between brand name and next */
.brand-dot {
    width:          5px;
    height:         5px;
    background:     var(--primary);
    border-radius:  50%;
    opacity:        0.4;
    flex-shrink:    0;
}


/* ============================================================
   15. REDUCED MOTION SUPPORT
   Respects user's system preference for reduced motion.
   Disables all animations and transitions when active.
============================================================ */

@media (prefers-reduced-motion: reduce) {

    /* Disable all animations */
    *,
    *::before,
    *::after {
        animation-duration:     0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:    0.01ms !important;
        scroll-behavior:        auto !important;
    }

    /* Keep reveal elements visible immediately */
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-up,
    .reveal-down,
    .reveal-scale {
        opacity:    1;
        transform:  none;
        transition: none;
    }

    /* Keep stagger children visible immediately */
    .stagger > * {
        opacity:    1;
        transform:  none;
        transition: none;
    }

    /* Keep page transition hidden */
    .page-transition {
        transition: none;
    }

    /* Stop brands ticker */
    .brands-track {
        animation: none;
    }

    /* Stop particles */
    .particle {
        display: none;
    }

    /* Stop loader spin */
    .pt-loader,
    .spin,
    .page-loader-spinner,
    .spinner-sm {
        animation: none;
    }

    /* Stop blink */
    .dot-live {
        animation: none;
    }
}