@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Scroll snap */
.snap-y {
    scroll-snap-type: y mandatory;
}
.snap-start {
    scroll-snap-align: start;
}

/* Section animations */
@keyframes titleIn {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-title-in {
    animation: titleIn 1s ease-out forwards;
}

@keyframes subtitleIn {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-subtitle-in {
    animation: subtitleIn 1s ease-out 0.2s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 1s ease-out 0.4s forwards;
}

/* Charger cards */
.charger-card {
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.charger-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 219, 255, 0.1);
}

/* Video backgrounds */
video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    filter: brightness(0.8) contrast(1.2);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #111;
}
::-webkit-scrollbar-thumb {
    background: #00DBFF;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #00c4e6;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 219, 255, 0.1), 0 10px 10px -5px rgba(0, 219, 255, 0.04);
}
/* Animation classes */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 1.5s ease-out forwards;
}
/* Video background */
video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;
    filter: brightness(0.8) contrast(1.2);
}
.logo img {
    transition: filter 0.3s ease;
}

.logo:hover img {
    filter: drop-shadow(0 0 12px rgba(0, 219, 255, 0.8));
}

/* HERO headlights + logo glow */
.headlight {
  position: absolute;
  top: 42%;              /* pomeraj gore/dole */
  width: 22vw;           /* veličina “snopa” */
  height: 16vw;
  max-width: 240px;
  max-height: 220px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;

  /* snop svetla */
  background: radial-gradient(
    ellipse at center,
    rgba(0, 219, 255, 0.30) 0%,
    rgba(0, 219, 255, 0.18) 35%,
    rgba(0, 0, 0, 0) 70%
  );

  filter: blur(10px);
  opacity: 0.0;
  animation: headlightPulse 2.8s ease-in-out infinite;
  mix-blend-mode: screen; /* lepše “legne” na tamnu sliku */
}

.headlight.left {
  left: 18%;             /* pomeraj levo/desno */
  transform: rotate(-8deg);
  animation-delay: 0.1s;
}

.headlight.right {
  right: 18%;
  transform: rotate(8deg);
  animation-delay: 0.25s;
}

/* Tesla logo glow (u sredini) */
.logo-glow {
  position: absolute;
  top: 56%;
  left: 50%;
  width: 10vw;
  height: 10vw;
  max-width: 140px;
  max-height: 140px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;

  background: radial-gradient(
    circle at center,
    rgba(0, 219, 255, 0.35) 0%,
    rgba(0, 219, 255, 0.12) 45%,
    rgba(0, 0, 0, 0) 75%
  );

  filter: blur(8px);
  opacity: 0.15;
  animation: logoBreath 3.6s ease-in-out infinite;
  mix-blend-mode: screen;
}

/* Animacije */
@keyframes headlightPulse {
  0%, 100% { opacity: 0.04; transform: translateZ(0) scale(0.98); }
  40%      { opacity: 0.65; transform: translateZ(0) scale(1.03); }
  50%      { opacity: 0.95; transform: translateZ(0) scale(1.05); }
  55%      { opacity: 0.55; transform: translateZ(0) scale(1.02); }
  70%      { opacity: 0.82; transform: translateZ(0) scale(1.04); }
}

@keyframes logoBreath {
  0%, 100% { opacity: 0.08; transform: translate(-50%, -50%) scale(0.98); }
  50%      { opacity: 0.28; transform: translate(-50%, -50%) scale(1.05); }
}