/* ════════════════════════════════════════════════════
   AUTOMOTIVE ANIMATED BACKGROUND SYSTEM
   Floating car parts, spinning cogs, particles
   ════════════════════════════════════════════════════ */

/* ── Hero floating icons layer ── */
.hero-float-icons {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.float-icon {
    position: absolute;
    color: rgba(255, 255, 255, 0.06);
    animation: floatUp linear infinite;
}

/* ── Individual icon sizes and positions ── */
.fi-1  { font-size: 80px;  left: 5%;   bottom: -100px; animation-duration: 14s; animation-delay: 0s;   }
.fi-2  { font-size: 60px;  left: 15%;  bottom: -100px; animation-duration: 18s; animation-delay: 2s;   }
.fi-3  { font-size: 120px; left: 28%;  bottom: -100px; animation-duration: 12s; animation-delay: 0.5s; }
.fi-4  { font-size: 50px;  left: 42%;  bottom: -100px; animation-duration: 20s; animation-delay: 4s;   }
.fi-5  { font-size: 90px;  left: 55%;  bottom: -100px; animation-duration: 16s; animation-delay: 1s;   }
.fi-6  { font-size: 70px;  left: 68%;  bottom: -100px; animation-duration: 13s; animation-delay: 6s;   }
.fi-7  { font-size: 45px;  left: 78%;  bottom: -100px; animation-duration: 22s; animation-delay: 3s;   }
.fi-8  { font-size: 100px; left: 88%;  bottom: -100px; animation-duration: 17s; animation-delay: 5s;   }
.fi-9  { font-size: 55px;  left: 95%;  bottom: -100px; animation-duration: 15s; animation-delay: 8s;   }
.fi-10 { font-size: 65px;  left: 35%;  bottom: -100px; animation-duration: 19s; animation-delay: 7s;   }
.fi-11 { font-size: 85px;  left: 50%;  bottom: -100px; animation-duration: 11s; animation-delay: 9s;   }
.fi-12 { font-size: 40px;  left: 72%;  bottom: -100px; animation-duration: 21s; animation-delay: 11s;  }

@keyframes floatUp {
    0%   { transform: translateY(0) rotate(0deg);   opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}

/* Spinning icons get their own rotation */
.float-icon.spin {
    animation: floatUpSpin linear infinite;
}

@keyframes floatUpSpin {
    0%   { transform: translateY(0) rotate(0deg);  opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateY(-120vh) rotate(720deg); opacity: 0; }
}

/* ── Reward section particle drift ── */
.rewards-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.rp-dot {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    animation: driftDot ease-in-out infinite;
}

.rp-dot:nth-child(1)  { width:6px;  height:6px;  top:20%; left:10%; animation-duration:8s; animation-delay:0s; }
.rp-dot:nth-child(2)  { width:4px;  height:4px;  top:60%; left:25%; animation-duration:12s; animation-delay:1s; }
.rp-dot:nth-child(3)  { width:8px;  height:8px;  top:40%; left:40%; animation-duration:10s; animation-delay:3s; }
.rp-dot:nth-child(4)  { width:5px;  height:5px;  top:75%; left:55%; animation-duration:7s; animation-delay:2s; }
.rp-dot:nth-child(5)  { width:3px;  height:3px;  top:30%; left:70%; animation-duration:14s; animation-delay:4s; }
.rp-dot:nth-child(6)  { width:7px;  height:7px;  top:55%; left:82%; animation-duration:9s; animation-delay:1.5s; }
.rp-dot:nth-child(7)  { width:4px;  height:4px;  top:15%; left:90%; animation-duration:11s; animation-delay:5s; }
.rp-dot:nth-child(8)  { width:6px;  height:6px;  top:85%; left:15%; animation-duration:13s; animation-delay:6s; }
.rp-dot:nth-child(9)  { width:9px;  height:9px;  top:50%; left:5%;  animation-duration:8s;  animation-delay:7s; }
.rp-dot:nth-child(10) { width:5px;  height:5px;  top:10%; left:60%; animation-duration:16s; animation-delay:9s; }

@keyframes driftDot {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
    33%  { transform: translate(30px, -20px) scale(1.2); opacity: 1; }
    66%  { transform: translate(-20px, 15px) scale(0.8); opacity: 0.7; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
}

/* ── Floating parts stripe over featured section ── */
.featured-animated-icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.feat-icon {
    position: absolute;
    color: rgba(0, 0, 0, 0.06);
    animation: featFloat ease-in-out infinite alternate;
}

.feat-icon:nth-child(1) { font-size:90px;  top: 10%; left: 3%;  animation-duration:6s; animation-delay:0s; }
.feat-icon:nth-child(2) { font-size:60px;  top: 50%; left: 18%; animation-duration:9s; animation-delay:1s; }
.feat-icon:nth-child(3) { font-size:120px; top: 20%; left: 35%; animation-duration:7s; animation-delay:2s; color: rgba(0,0,0,0.04); }
.feat-icon:nth-child(4) { font-size:70px;  top: 65%; left: 52%; animation-duration:8s; animation-delay:0.5s; }
.feat-icon:nth-child(5) { font-size:100px; top: 15%; left: 68%; animation-duration:10s; animation-delay:3s; color: rgba(0,0,0,0.04); }
.feat-icon:nth-child(6) { font-size:50px;  top: 55%; left: 82%; animation-duration:5s; animation-delay:1.5s; }
.feat-icon:nth-child(7) { font-size:80px;  top: 30%; left: 92%; animation-duration:11s; animation-delay:4s; }

@keyframes featFloat {
    0%   { transform: translateY(0) rotate(-5deg); }
    100% { transform: translateY(-20px) rotate(5deg); }
}

/* ── Spinning cog decoration on trust bar ── */
.trust-cog-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.trust-cog-bg i {
    position: absolute;
    color: rgba(227, 24, 55, 0.04);
    animation: slowSpin linear infinite;
}

.trust-cog-bg i:nth-child(1) { font-size:200px; top:-50px;  left:-50px;  animation-duration: 30s; }
.trust-cog-bg i:nth-child(2) { font-size:150px; top:20px;   right:-30px; animation-duration: 20s; animation-direction:reverse; }
.trust-cog-bg i:nth-child(3) { font-size:100px; bottom:-20px; left:40%;  animation-duration: 25s; }

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

/* ── Category section subtle cars ── */
.categories {
    position: relative;
    overflow: hidden;
}

.categories::before {
    content: '\f1b9'; /* fa-car unicode */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: -60px;
    bottom: -30px;
    font-size: 280px;
    color: rgba(227, 24, 55, 0.04);
    animation: slowSpin 40s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* ── Canvas particle overlay ── */
#rs-particle-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
}

/* Ensure hero has relative positioning for layers */
.hero { position: relative; }
.hero .hero-content { position: relative; z-index: 5; }

.trust-section { position: relative; overflow: hidden; }
.trust-section .trust-grid { position: relative; z-index: 2; }

.featured-section { position: relative; overflow: hidden; }
.featured-section .container { position: relative; z-index: 2; }

/* ── Glowing red dot pulse (tracks accent) ── */
.pulse-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--red, #E31837);
    animation: pulseDot 2.5s ease-in-out infinite;
    z-index: 10;
    pointer-events: none;
}

@keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(227, 24, 55, 0.7); transform: scale(1); }
    50%  { box-shadow: 0 0 0 15px rgba(227, 24, 55, 0); transform: scale(1.2); }
    100% { box-shadow: 0 0 0 0 rgba(227, 24, 55, 0); transform: scale(1); }
}

/* ── Wipe-in shimmer for section titles on scroll ── */
.section-title .shimmer-word {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.section-title .shimmer-word::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: textShimmer 3s ease-in-out infinite;
}

@keyframes textShimmer {
    0%   { left: -100%; }
    50%  { left: 150%; }
    100% { left: 150%; }
}