* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #052135;
  color: #fff;
}
/* HEADER */
.header {
  height: 100vh;
  padding: 30px 80px;

  background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url("https://motosniff.com/wp-content/uploads/2024/12/100-yamaha-rx.webp");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  animation: bgZoom 8s ease forwards;
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 26px;
  font-weight: bold;
  opacity: 0;
  animation: slideLeft 1s ease forwards;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-links li {
  cursor: pointer;
  opacity: 0;
  animation: slideDown 1s ease forwards;
}

.nav-links li:nth-child(1) { animation-delay: 0.3s; }
.nav-links li:nth-child(2) { animation-delay: 0.5s; }
.nav-links li:nth-child(3) { animation-delay: 0.7s; }
.nav-links li:nth-child(4) { animation-delay: 0.9s; }

/* HERO */
.hero {
  margin-top: 140px;
  max-width: 600px;
}

.hero h1 {
  font-size: 60px;
  opacity: 0;
  animation: fadeUp 1s ease forwards;
  animation-delay: 1.2s;
  text-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.hero p {
  margin-top: 20px;
  font-size: 20px;
  opacity: 0;
  animation: fadeUp 1s ease forwards;
  animation-delay: 1.6s;
}

.hero button {
  margin-top: 30px;
  padding: 14px 34px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background: #38bdf8;
  color: #000;
  cursor: pointer;
  opacity: 0;
  animation: scaleIn 0.8s ease forwards;
  animation-delay: 2s;
}

.hero button:hover {
  background: #0ea5e9;
}

/* ANIMATIONS */
@keyframes slideLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

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

@keyframes scaleIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes bgZoom {
  from { background-size: 100%; }
  to { background-size: 110%; }
}