:root {
  --amber-500:#f59e0b; --amber-400:#fbbf24; --purple-500:#a855f7; --cyan-400:#22d3ee;
  --white-05:rgba(255,255,255,.05); --white-08:rgba(255,255,255,.08); --white-10:rgba(255,255,255,.10);
  --white-12:rgba(255,255,255,.12); --white-15:rgba(255,255,255,.15); --white-30:rgba(255,255,255,.30);
  --white-60:rgba(255,255,255,.60); --white-70:rgba(255,255,255,.70); --white-80:rgba(255,255,255,.80);
}

.glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;z-index:90}
.modal-overlay.is-open{display:block}
.modal-panel{position:relative;max-width:960px;margin:40px auto;background:#0b0c0f;color:#fff;border-radius:16px;padding:20px;max-height:calc(100vh - 80px);overflow:auto;border:1px solid rgba(255,255,255,.08)}
.modal-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:9999px;background:rgba(255,255,255,.08);display:grid;place-items:center;}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:9999px;background:rgba(255,255,255,.08);display:grid;place-items:center}
.modal-panel::-webkit-scrollbar{width:6px;}
.modal-panel::-webkit-scrollbar-track{background:transparent;}
.modal-panel::-webkit-scrollbar-thumb{background-color: rgba(255,255,255,0.25);border-radius: 9999px;}
.modal-panel::-webkit-scrollbar-thumb:hover{background-color: rgba(255,255,255,0.4);}
.modal-panel{scrollbar-width:thin;scrollbar-color: rgba(255,255,255,0.25)transparent;}
.gradient-text{background: linear-gradient(90deg,#dc2626,#ef4444,#f91616,#fa1515);-webkit-background-clip: text;background-clip: text;color: transparent;}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1.25rem;border-radius:1rem;font-weight:600;border:1px solid transparent;transition:all .2s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.btn--primary{background:var(--amber-500);color:#000;}
.btn--primary:hover{background:var(--amber-400);}
.btn--secondary{background:#fff;color:#000;}
.btn--secondary:hover{background:rgba(255,255,255,.9);}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.15);color:#fff;}
.btn--ghost:hover{border-color:rgba(255,255,255,.30);}

.car-img{width:100%;height:auto;object-fit:cover;display:block;background:transparent;padding:0;box-sizing:border-box;}
.car-body{padding:1.25rem;}
.car-title{font-size:1.25rem;font-weight:800;}
.car-spec{color:rgba(255,255,255,.6);font-size:.875rem;margin-top:.25rem;}
.car-price{margin-top:1rem;font-size:1.5rem;font-weight:900;}
.car-price span{font-size:.875rem;font-weight:500;color:rgba(255,255,255,.6);}
.car-cta{margin-top:1rem;display:flex;align-items:center;gap:.75rem;}
.car-card{overflow:hidden;border-radius:1.5rem;border:1px solid var(--white-10);background:var(--white-05);backdrop-filter:blur(6px);box-shadow:0 10px 25px rgba(0,0,0,.3);transform:translateY(0);transition:transform .2s, box-shadow .2s;}
.car-card:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(0,0,0,.35);}
#fleet-grid .car-card:hover .car-img { transform: scale(1.02); }
#fleet-grid .car-img { transition: transform .5s ease; }

/* ŁADOWANIE KART GDY SĄ BLISKO VIEWPORTU*/
#fleet-grid > * {
  content-visibility: auto;
  contain-intrinsic-size: 300px 200px; /* ZAPOBIEGANIE CLS NIM SIĘ ZAŁADUJE */
}

.car-img { aspect-ratio: 16 / 9; object-fit: cover; }

.car-float{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-28px;           
  height: 220px;           
  filter:
    drop-shadow(0 14px 24px rgba(0, 0, 0, 0))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0));
}

select {
  color: #fff;
  background-color: #111;
}

select option {
  color: #fff;
  background: #111;
}

select option:hover,
select option:checked {
  background: #333; 
}


.car-hero { position: relative; isolation: isolate; }
.car-hero img { position: relative; z-index: 10; }

@keyframes streaksMove {
  0%   { transform: translateX(20%) skewX(-12deg); opacity: .9; }
  80%  { opacity: .5; }
  100% { transform: translateX(-20%) skewX(-12deg); opacity: 0; }
}
.speedlines{
  position:absolute;
  left: 20%;    
  right: 0;
  bottom: 8%; 
  height: 20%;  
 
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.15) 0 14px,
      transparent 14px 30px
    );
  filter: blur(2px);
  mix-blend-mode: screen;
  -webkit-mask:
    linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask:
    linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  animation: streaksMove 1.1s ease-out 0.05s both;
  transform: translateX(0) skewX(-12deg);
}
@media (max-width: 767px){
  .speedlines{ display:none; }            
}

@keyframes streaksMove {
  0%   { transform: translateX(20%) skewX(-12deg); opacity: .9; }
  80%  { opacity: .5; }
  100% { transform: translateX(-20%) skewX(-12deg); opacity: 0; }
}

@keyframes ledPulse {
  0%,100% { opacity: .85; }
  50%     { opacity: .92; }
}

.headlights{
  position:absolute;
  left: 5%;         
  bottom: 42.5%;      
  width: 64%;         
  height: 12%;         

  transform-origin: 0% 50%;
  transform: scaleX(-1.2) rotate(-7.4deg) skewX(-6deg);
  pointer-events:none;
  z-index: 12;          
  opacity: 0;
  mix-blend-mode: screen;
  animation: headlightsOn .8s ease-out .9s forwards, ledPulse 3.6s ease-in-out 1.7s infinite;
}

.headlights::before {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(
    ellipse farthest-side at 0% 50%, 
    rgba(230,240,255,0.75) 0%,
    rgba(230,240,255,0.35) 30%,
    rgba(230,240,255,0.10) 60%,
    transparent 100%
  );
  filter: blur(12px);
}

.headlights::after {
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(
    ellipse farthest-side at 0% 50%, 
    rgba(240,248,255,0.85) 0%,
    rgba(240,248,255,0.45) 25%,
    transparent 85%
  );
  filter: blur(6px);
}

@keyframes ledPulse { 0%,100%{opacity:.9} 50%{opacity:1} }
.headlights{ animation: headlightsOn .8s ease-out .9s forwards, ledPulse 3.6s ease-in-out 1.7s infinite; }


@media (max-width: 767px){
  .headlights{ display:none; }
}


@keyframes slideInRight {
  0%   { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.animate-slideInRight {
  animation: slideInRight 1s ease-out forwards;
}

@keyframes coverWipeRTL {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 100% 0 0); }
}

.reveal-by-light {
  position: relative;          
  display: inline-block;
  --reveal-delay: 1.65s;         
}

.reveal-by-light::after {
  content: "";
  position: absolute;
  inset: -2px 0 -2px 0;         
  background: rgb(10, 10, 10);          
  pointer-events: none;
  z-index: 2;                  
  animation: coverWipeRTL 0.95s ease-out var(--reveal-delay) forwards;
}

@keyframes shineRTL {
  from { right: 0%;   opacity: .85; }
  to   { right: 100%; opacity: .85; }
}
.reveal-by-light::before {
  content: "";
  position: absolute;
  top: -8px; bottom: -8px;
  right: 0;                     
  width: 14%;
  pointer-events: none;
  z-index: 3;                  
  background: radial-gradient(ellipse at right,
              rgba(235,242,255,.45) 0%,
              rgba(235,242,255,.18) 45%,
              rgba(235,242,255,0) 80%);
  filter: blur(8px);
  mix-blend-mode: screen;
  opacity: 0;                   
  animation: shineRTL 0.95s ease-out var(--reveal-delay) forwards;
}