/* ============================================================
   ABDUL CAR RECOVERY — UNIQUE ANIMATIONS
   Pure CSS + tiny Intersection Observer (no libraries)
   All animations use transform/opacity only → GPU composited
   ============================================================ */





/* ── PAGE LOADER ────────────────────────────────────────────── */
#page-loader {
    position: fixed; inset: 0;
    background: var(--black);
    z-index: 100000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 24px;
}
.loader-truck {
    font-size: 56px;
    animation: truckDrive 1s ease-in-out infinite alternate;
}
@keyframes truckDrive {
    from { transform: translateX(-20px) rotate(-2deg); }
    to   { transform: translateX(20px)  rotate( 2deg); }
}
.loader-bar-wrap {
    width: 200px; height: 4px;
    background: rgba(255,255,255,.1);
    border-radius: 2px; overflow: hidden;
}
.loader-bar {
    height: 100%;
    background: var(--yellow);
    border-radius: 2px;
    animation: loadProgress 1.6s ease forwards;
}
@keyframes loadProgress { from { width: 0; } to { width: 100%; } }
.loader-text {
    font-family: var(--font-condensed);
    font-size: 13px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(255,255,255,.5);
    animation: loadTextBlink 1s ease infinite;
}
@keyframes loadTextBlink { 0%,100% { opacity:.5; } 50% { opacity:1; } }
#page-loader.hide {
    animation: loaderOut .6s ease forwards;
}
@keyframes loaderOut {
    to { opacity: 0; pointer-events: none; }
}

/* ── SCROLL-REVEAL BASE ─────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.4,0,.2,1),
                transform .7s cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(50px); }
[data-reveal="down"]  { transform: translateY(-40px); }
[data-reveal="left"]  { transform: translateX(-60px); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="scale"] { transform: scale(.85); }
[data-reveal="flip"]  { transform: perspective(600px) rotateX(20deg); }
[data-reveal="slide-fade"] { transform: translateY(30px) scale(.96); }

[data-reveal].revealed {
    opacity: 1;
    transform: none;
}
/* staggered delays via data-delay */
[data-delay="100"].revealed { transition-delay: .1s; }
[data-delay="200"].revealed { transition-delay: .2s; }
[data-delay="300"].revealed { transition-delay: .3s; }
[data-delay="400"].revealed { transition-delay: .4s; }
[data-delay="500"].revealed { transition-delay: .5s; }
[data-delay="600"].revealed { transition-delay: .6s; }
[data-delay="700"].revealed { transition-delay: .7s; }
[data-delay="800"].revealed { transition-delay: .8s; }

/* ── HERO TEXT ENTRANCE ─────────────────────────────────────── */
.hero-badge       { animation: heroFadeUp .8s .1s both; }
.hero-title       { animation: heroFadeUp .9s .25s both; }
.hero-desc        { animation: heroFadeUp .8s .4s both; }
.hero-actions     { animation: heroFadeUp .8s .55s both; }
.hero-stats       { animation: heroFadeUp .8s .7s both; }
.hero-right       { animation: heroSlideIn .9s .3s both; }

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideIn {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── HERO PHONE RING ────────────────────────────────────────── */
.hero-phone-icon { animation: phoneRing 3s 2s infinite; }
@keyframes phoneRing {
    0%,80%,100% { transform: rotate(0); }
    82% { transform: rotate(-15deg); }
    86% { transform: rotate(15deg); }
    90% { transform: rotate(-10deg); }
    94% { transform: rotate(8deg); }
    97% { transform: rotate(-4deg); }
}

/* ── SCROLLING MARQUEE STRIP ────────────────────────────────── */
.strip-track { animation: scrollTrack 22s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }

/* ── COUNTER NUMBERS ────────────────────────────────────────── */
.count-up {
    display: inline-block;
}

/* ── STAT CARD HOVER ────────────────────────────────────────── */
.stat-box {
    transition: transform .35s ease, box-shadow .35s ease;
}
.stat-box:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 16px 40px rgba(245,197,24,.25);
}

/* ── SERVICE CARD SHINE EFFECT ──────────────────────────────── */
.service-card, .srv-card {
    position: relative;
    overflow: hidden;
}
.service-card::after, .srv-card::after {
    content: '';
    position: absolute;
    top: -60%; left: -60%;
    width: 60%; height: 200%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,.18) 50%,
        transparent 60%
    );
    transform: skewX(-15deg) translateX(-100%);
    transition: none;
    pointer-events: none;
}
.service-card:hover::after, .srv-card:hover::after {
    animation: cardShine .6s ease forwards;
}
@keyframes cardShine {
    to { transform: skewX(-15deg) translateX(350%); }
}

/* ── FLOATING BUTTON PULSE RINGS ────────────────────────────── */
.float-call::before,
.float-wa::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: rippleOut 2s ease infinite;
    pointer-events: none;
}
.float-call::before { background: rgba(245,197,24,.4); animation-delay: 0s; }
.float-wa::before   { background: rgba(37,211,102,.4);  animation-delay: .8s; }
.float-call, .float-wa { position: relative; }

@keyframes rippleOut {
    0%   { transform: scale(1); opacity: .7; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ── NAVBAR SLIDE DOWN ──────────────────────────────────────── */
.navbar {
    animation: navbarIn .6s ease both;
}
@keyframes navbarIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ── TOPBAR ENTRANCE ────────────────────────────────────────── */
.topbar {
    animation: topbarIn .5s ease both;
}
@keyframes topbarIn {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* ── SECTION LABEL DRAW ─────────────────────────────────────── */
.section-label.revealed::before {
    animation: drawLine .5s ease forwards;
}
@keyframes drawLine {
    from { width: 0; }
    to   { width: 32px; }
}

/* ── YELLOW BAR DRAW ────────────────────────────────────────── */
.yellow-bar {
    width: 0;
    transition: width .8s cubic-bezier(.4,0,.2,1);
}
.yellow-bar.revealed { width: 60px; }

/* ── FEATURE BOX BORDER SLIDE ───────────────────────────────── */
.feature-box {
    position: relative;
}
.feature-box::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--yellow);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .5s .2s ease;
    border-radius: 4px 0 0 4px;
}
.feature-box.revealed::before { transform: scaleY(1); }

/* ── ABOUT IMAGE FLOAT ──────────────────────────────────────── */
.about-img-main {
    animation: imgFloat 6s ease-in-out infinite;
}
.about-img-secondary {
    animation: imgFloat 6s 2s ease-in-out infinite;
}
@keyframes imgFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-12px); }
}

/* ── NUMBER TICKER SPIN ─────────────────────────────────────── */
.hero-stat-num,
.why-stat-num {
    display: inline-block;
    transition: transform .3s ease;
}
.hero-stat-num:hover,
.why-stat-num:hover {
    transform: scale(1.15) rotate(-3deg);
    color: var(--yellow) !important;
}

/* ── PAGE HEADER ENTRANCE ───────────────────────────────────── */
.page-header .label  { animation: phLabel  .6s .1s both; }
.page-header h1      { animation: phTitle  .8s .25s both; }
.page-header .breadcrumb { animation: phLabel .6s .5s both; }

@keyframes phLabel {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes phTitle {
    from { opacity: 0; transform: translateY(30px) scale(.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── PROCESS STEPS CONNECTOR ────────────────────────────────── */
.process-steps::after {
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1.2s .5s ease;
}
.process-steps.revealed::after { transform: scaleX(1); }

/* ── STEP NUMBER BOUNCE ─────────────────────────────────────── */
.step-num {
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.process-step:hover .step-num {
    transform: scale(1.15) rotate(-5deg);
    box-shadow: 0 8px 32px rgba(245,197,24,.5);
}

/* ── TESTIMONIAL CARD TILT ──────────────────────────────────── */
.testimonial-card {
    transition: transform .4s ease, box-shadow .4s ease;
    transform-style: preserve-3d;
}
.testimonial-card:hover {
    transform: perspective(800px) rotateY(-4deg) rotateX(2deg) translateY(-4px);
}

/* ── NAV LINK UNDERLINE ANIMATION ───────────────────────────── */
.nav-links a::after {
    transform-origin: left;
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── FOOTER LINK ARROW SLIDE ────────────────────────────────── */
.footer-links a i {
    transition: transform .25s ease;
}
.footer-links a:hover i {
    transform: translateX(4px);
}

/* ── BTN RIPPLE ─────────────────────────────────────────────── */
.btn-primary, .btn-cta-dark, .btn-call, .srv-card-cta {
    overflow: hidden;
    position: relative;
}
.btn-ripple {
    position: absolute;
    width: 0; height: 0;
    background: rgba(255,255,255,.25);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    animation: ripple .6s ease forwards;
    pointer-events: none;
}
@keyframes ripple {
    to { width: 400px; height: 400px; opacity: 0; }
}

/* ── HERO CANVAS PARTICLES ──────────────────────────────────── */
#particles-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ── SECTION DIVIDER WAVE ───────────────────────────────────── */
.wave-divider {
    display: block;
    line-height: 0;
    overflow: hidden;
}
.wave-divider svg {
    display: block;
    width: 100%;
}

/* ── SCROLL PROGRESS BAR ────────────────────────────────────── */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(to right, var(--yellow), var(--yellow-dark));
    z-index: 99999;
    width: 0%;
    transition: width .1s linear;
    border-radius: 0 2px 2px 0;
}

/* ── TILT CARD EFFECT ───────────────────────────────────────── */
.tilt-card {
    transition: transform .2s ease;
    will-change: transform;
}

/* ── MAGNETIC BUTTON ────────────────────────────────────────── */
.magnetic-btn {
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    display: inline-block;
}

/* ── CTA BANNER PARALLAX TEXT ───────────────────────────────── */
.cta-banner {
    overflow: hidden;
    position: relative;
}

/* ── GLITCH EFFECT ON HOVER (hero title) ────────────────────── */
.glitch-text {
    position: relative;
    display: inline-block;
}
.glitch-text:hover {
    animation: glitch .4s steps(1) forwards;
}
@keyframes glitch {
    0%   { clip-path: inset(40% 0 61% 0); transform: translate(-3px,0); }
    20%  { clip-path: inset(92% 0 1%  0); transform: translate(3px,0);  }
    40%  { clip-path: inset(43% 0 1%  0); transform: translate(-3px,0); }
    60%  { clip-path: inset(25% 0 58% 0); transform: translate(3px,0);  }
    80%  { clip-path: inset(54% 0 7%  0); transform: translate(-3px,0); }
    100% { clip-path: none; transform: translate(0,0); }
}

/* ── MOBILE: disable heavy transforms ──────────────────────── */
@media (max-width:640px) {
    .about-img-main, .about-img-secondary { animation: none; }
    .testimonial-card:hover { transform: translateY(-4px); }
}