/* =============================================================
   JAI AMBEY ROADLINE — animations.css
   Custom animations, GSAP helper classes, hover effects,
   page transitions, micro-interactions
   ============================================================= */

/* ---------------------------------------------------------------
   1. PAGE TRANSITION OVERLAY
--------------------------------------------------------------- */
.page-transition {
    position: fixed;
    inset: 0;
    background: var(--color-secondary);
    z-index: calc(var(--z-loader) - 1);
    transform: translateX(-100%);
    pointer-events: none;
}

.page-transition.entering {
    animation: pageSlideIn 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.page-transition.leaving {
    animation: pageSlideOut 0.45s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes pageSlideIn {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

@keyframes pageSlideOut {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

/* ---------------------------------------------------------------
   2. GSAP INITIAL STATES
   (GSAP animates these — set hidden defaults here)
--------------------------------------------------------------- */
.gsap-fade-up {
    opacity: 0;
    transform: translateY(40px);
}

.gsap-fade-down {
    opacity: 0;
    transform: translateY(-40px);
}

.gsap-fade-left {
    opacity: 0;
    transform: translateX(-40px);
}

.gsap-fade-right {
    opacity: 0;
    transform: translateX(40px);
}

.gsap-scale-in {
    opacity: 0;
    transform: scale(0.85);
}

.gsap-clip-up {
    clip-path: inset(100% 0 0 0);
}

/* ---------------------------------------------------------------
   3. HERO TEXT SPLIT ANIMATION
--------------------------------------------------------------- */
.hero-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.hero-word-inner {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
}

/* Stagger handled via GSAP — these are the initial states */

/* ---------------------------------------------------------------
   4. FLOATING ELEMENTS
--------------------------------------------------------------- */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-16px); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%       { transform: translateY(-10px) rotate(3deg); }
}

@keyframes floatX {
    0%, 100% { transform: translateX(0px); }
    50%       { transform: translateX(12px); }
}

.float-anim {
    animation: float 4s ease-in-out infinite;
}

.float-anim--slow {
    animation: floatSlow 6s ease-in-out infinite;
}

.float-anim--x {
    animation: floatX 5s ease-in-out infinite;
}

/* ---------------------------------------------------------------
   5. PULSE ANIMATIONS
--------------------------------------------------------------- */
@keyframes pulse-ring {
    0%   { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(2);   opacity: 0; }
}

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

.pulse-dot {
    position: relative;
    display: inline-block;
}

.pulse-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--color-primary);
    animation: pulse-ring 1.8s ease-out infinite;
}

/* ---------------------------------------------------------------
   6. TYPING / HIGHLIGHT TEXT EFFECT
--------------------------------------------------------------- */
.text-highlight-anim {
    position: relative;
    display: inline-block;
    z-index: 0;
}

.text-highlight-anim::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: -4px;
    right: -4px;
    height: 40%;
    background: rgba(213,0,0,0.15);
    z-index: -1;
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-highlight-anim.in-view::after {
    transform: scaleX(1);
}

/* ---------------------------------------------------------------
   7. NUMBER COUNTER — ROLL UP
--------------------------------------------------------------- */
.count-up-number {
    display: inline-block;
    transition: transform 0.2s ease;
}

/* ---------------------------------------------------------------
   8. HOVER LIFT — general utility
--------------------------------------------------------------- */
.hover-lift {
    transition: transform 0.3s cubic-bezier(0.34, 1.1, 0.64, 1),
                box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.hover-lift-sm:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------
   9. SHINE / SHIMMER EFFECT (on cards & buttons)
--------------------------------------------------------------- */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.25) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-20deg);
    transition: none;
    pointer-events: none;
    z-index: 1;
}

.shine-effect:hover::before {
    animation: shineSlide 0.6s ease forwards;
}

@keyframes shineSlide {
    from { left: -75%; }
    to   { left: 125%; }
}

/* ---------------------------------------------------------------
   10. ROTATING BORDER GRADIENT (section accents)
--------------------------------------------------------------- */
@keyframes borderRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.border-gradient-spin {
    position: relative;
}

.border-gradient-spin::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        var(--color-primary),
        var(--color-secondary),
        var(--color-primary)
    );
    animation: borderRotate 4s linear infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.border-gradient-spin:hover::before {
    opacity: 1;
}

/* ---------------------------------------------------------------
   11. STAGGERED GRID REVEAL
--------------------------------------------------------------- */
[data-aos="stagger-up"] {
    opacity: 0;
    transform: translateY(30px);
    transition-property: opacity, transform;
}

[data-aos="stagger-up"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------------
   12. HERO PARALLAX HINT (subtle bg movement via JS)
--------------------------------------------------------------- */
.parallax-layer {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ---------------------------------------------------------------
   13. ICON SPIN ON HOVER
--------------------------------------------------------------- */
.icon-spin-hover {
    transition: transform 0.4s ease;
}

.icon-spin-hover:hover {
    transform: rotate(360deg);
}

/* ---------------------------------------------------------------
   14. UNDERLINE DRAW ANIMATION
--------------------------------------------------------------- */
.underline-draw {
    position: relative;
    display: inline-block;
}

.underline-draw::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s ease;
}

.underline-draw:hover::after,
.underline-draw.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---------------------------------------------------------------
   15. ROAD TRACK ANIMATION (decorative accent line)
--------------------------------------------------------------- */
@keyframes roadMove {
    0%   { background-position: 0 0; }
    100% { background-position: 110px 0; }
}

.road-track {
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        var(--color-primary) 0px,
        var(--color-primary) 40px,
        transparent 40px,
        transparent 70px
    );
    background-size: 110px 4px;
    animation: roadMove 1.2s linear infinite;
    border-radius: var(--radius-full);
    opacity: 0.6;
}

/* ---------------------------------------------------------------
   16. TRUCK DASH LINE DECORATION
--------------------------------------------------------------- */
.dash-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-line::before,
.dash-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-gray-200);
}

/* ---------------------------------------------------------------
   17. GRADIENT BORDER CARD
--------------------------------------------------------------- */
.card-gradient-border {
    position: relative;
    border-radius: var(--radius-xl);
    background: var(--color-white);
    z-index: 0;
}

.card-gradient-border::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: calc(var(--radius-xl) + 2px);
    background: var(--gradient-red-blue);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-gradient-border:hover::before {
    opacity: 1;
}

/* ---------------------------------------------------------------
   18. SECTION ENTRANCE — custom AOS overrides
--------------------------------------------------------------- */
[data-aos="fade-up-sm"] {
    opacity: 0;
    transform: translateY(20px);
    transition-property: opacity, transform;
}

[data-aos="fade-up-sm"].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="zoom-in-sm"] {
    opacity: 0;
    transform: scale(0.93);
    transition-property: opacity, transform;
}

[data-aos="zoom-in-sm"].aos-animate {
    opacity: 1;
    transform: scale(1);
}

/* ---------------------------------------------------------------
   19. SKELETON LOADING (lazy image placeholders)
--------------------------------------------------------------- */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-gray-100) 25%,
        var(--color-light-gray) 50%,
        var(--color-gray-100) 75%
    );
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.5s infinite linear;
    border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------
   20. REDUCED MOTION — disable all custom animations
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .float-anim,
    .float-anim--slow,
    .float-anim--x,
    .road-track,
    .whatsapp-pulse,
    .loader-progress,
    .border-gradient-spin::before,
    .page-transition,
    .pulse-dot::before,
    .shine-effect::before {
        animation: none !important;
    }

    .hover-lift:hover,
    .hover-lift-sm:hover,
    .shine-effect::before,
    .icon-spin-hover:hover,
    .underline-draw:hover::after {
        transform: none !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    .gsap-fade-up,
    .gsap-fade-down,
    .gsap-fade-left,
    .gsap-fade-right,
    .gsap-scale-in,
    .gsap-clip-up,
    .hero-word-inner,
    .hero-badge,
    .hero-title,
    .hero-subtitle,
    .hero-actions .btn,
    .hero-stat-card,
    .hero-trust-card,
    .hero-trust-item,
    .hero-scroll-hint,
    .hero-road-line,
    .trust-strip-item {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
}

/* ---------------------------------------------------------------
   21. GSAP FAILSAFE — reveal content if JS fails to load
--------------------------------------------------------------- */
.gsap-fade-up,
.gsap-fade-down,
.gsap-fade-left,
.gsap-fade-right,
.gsap-scale-in,
.gsap-clip-up,
.hero-word-inner {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

noscript + .gsap-fade-up,
noscript + .gsap-fade-down,
noscript + .gsap-fade-left,
noscript + .gsap-fade-right,
noscript + .gsap-scale-in {
    opacity: 1 !important;
    transform: none !important;
}

/* ---------------------------------------------------------------
   22. TOUCH DEVICE — prevent sticky hover transforms
--------------------------------------------------------------- */
@media (hover: none) {
    .hover-lift:hover,
    .hover-lift-sm:hover,
    .service-card:hover,
    .fleet-card:hover,
    .testimonial-card:hover,
    .industry-card:hover,
    .branch-card:hover,
    .network-stat-card:hover,
    .contact-info-card:hover,
    .whatsapp-cta-card:hover,
    .social-icon-btn:hover,
    .footer-social-link:hover,
    .value-card:hover,
    .infra-card:hover,
    .cert-badge:hover,
    .card-gradient-border:hover::before {
        transform: none;
        box-shadow: none;
    }

    .shine-effect:hover::before {
        animation: none;
    }

    .icon-spin-hover:hover {
        transform: none;
    }
}