/* ===== RESET ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  display:grid;
  place-items:center;
  background:#1f2022; /* fondo estático */
  overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.banner-text {
  position: absolute;
  top: 140px;
  width: 100%;
  text-align: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ffd400;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  letter-spacing: 1px;
  z-index: 10;
}

.banner-text strong {
  font-size: 28px;
  display: block;
}

.banner-text span {
  font-size: 16px;
  color: #fff;
  opacity: 0.9;
}
/* ===== ESCENA ===== */
.stage{
  position:relative;
  width:min(92vw, 760px);
  height:min(70vh, 520px);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  background:#2b2b2b;
}

/* Fondo estático */
.bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(1100px 700px at 30% 120%, rgba(0,0,0,.35), transparent 55%),
    linear-gradient(180deg, #4b4a3a 0%, #3c3a2c 50%, #2c2b22 100%);
}
.road{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-10%;
  height:40%;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 34px, rgba(255,255,255,.06) 34px 38px),
    linear-gradient(90deg, #2a2a2a, #232323);
  transform:skewX(-12deg);
  filter:blur(.1px);
}
.noise{
  position:absolute; inset:0;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ===== CAMIONETA (se mueve, fondo NO) ===== */
.truck{
  position:absolute;
  left:50%;
  bottom:10%;
  width:min(520px, 78%);
  transform:translateX(-50%);
  animation: baches 1.15s infinite ease-in-out;
  will-change: transform;
}
.truck-body{
  width:100%;
  display:block;
}

/* Hat overlay: posicionado relativo al PNG del cuerpo */
.truck-hat{
  position:absolute;
  /* valores sacados del recorte real para que calce */
  left: 5.1%;
  top: 3.2%;
  width: 90%;
  animation: gorra 0.55s infinite ease-in-out;
  will-change: transform;
  pointer-events:none;
}

/* ===== RUEDAS (CSS) ===== */
.wheel{
  position:absolute;
  width:10.3%;
  aspect-ratio:1/1;
  border-radius:50%;
  border:3px solid rgba(0,0,0,.75);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.85) 0 12%, rgba(255,255,255,.20) 13% 18%, rgba(0,0,0,.10) 19% 55%, rgba(0,0,0,.55) 56% 100%);
  animation: rueda 0.5s linear infinite;
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));
}
.wheel::after{
  content:"";
  position:absolute; inset:12%;
  border-radius:50%;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,.0) 0 8%,
      rgba(255,255,255,.25) 8% 10%,
      rgba(255,255,255,.0) 10% 25%,
      rgba(255,255,255,.25) 25% 27%,
      rgba(255,255,255,.0) 27% 42%,
      rgba(255,255,255,.25) 42% 44%,
      rgba(255,255,255,.0) 44% 59%,
      rgba(255,255,255,.25) 59% 61%,
      rgba(255,255,255,.0) 61% 76%,
      rgba(255,255,255,.25) 76% 78%,
      rgba(255,255,255,.0) 78% 100%);
  mix-blend-mode:overlay;
  opacity:.8;
}
.wheel--front{ left:16.6%; bottom:6.2%; }
.wheel--back{ left:66.4%; bottom:6.2%; }
/* Animación entrada lateral */
.enter-side {
  animation: enterFromLeft 4s  forwards;
  animation-delay: 2s; /* espera 1 segundo */
    opacity: 0;

}

@keyframes enterFromLeft {
  0% {
    transform: translateX(-120%) scale(0.95);
    opacity: 0;
  }
  80% {
    transform: translateX(5%) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}
/* ===== POLVO ===== */
.dust{
  position:absolute;
  width:12%;
  height:12%;
  bottom:6%;
  left:6%;
  opacity:0;
  filter:blur(.2px);
  background:
    radial-gradient(circle at 30% 60%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.25), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 55% 70%, rgba(255,255,255,.18), rgba(255,255,255,0) 62%);
  border-radius:50%;
  animation: polvo 1.0s infinite ease-out;
}
.dust--2{
  left:10%;
  bottom:7%;
  animation-delay:.35s;
  transform:scale(.85);
    opacity: 1;
}

/* ===== KEYFRAMES ===== */
@keyframes baches{
  0%   { transform:translate(-50%, 0) rotate(0deg); }
  20%  { transform:translate(-50.4%, -4px) rotate(-0.2deg); }
  40%  { transform:translate(-49.6%, 1px) rotate(0.15deg); }
  60%  { transform:translate(-50.2%, -3px) rotate(-0.15deg); }
  80%  { transform:translate(-49.8%, -1px) rotate(0.1deg); }
  100% { transform:translate(-50%, 0) rotate(0deg); }
}
@keyframes gorra{
  0%{ transform:translate(0,0) rotate(0deg); }
  25%{ transform:translate(-1px,-1px) rotate(-6deg); }
  50%{ transform:translate(1px,0) rotate(3deg); }
  75%{ transform:translate(-1px,-1px) rotate(-4deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}
@keyframes rueda{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@keyframes polvo{
  0%{ transform:translate(0,0) scale(.6); opacity:0; }
  20%{ opacity:.65; }
  55%{ opacity:.25; }
  100%{ transform:translate(-28px,-16px) scale(1.15); opacity:0; }
}

/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce){
  .truck,.truck-hat,.wheel,.dust{ animation:none !important; }
}