/* ==========================================================================
   VOLKS-WERK AG - Retro & Satire Visual Effects
   Endlospapier, Bakelit-Haptik, DIN-Stempel & Rauch-Animationen
   ========================================================================== */

/* Nadeldrucker / Lochrand-Papier Simulation */
.dot-matrix-paper {
  background-color: #faf8f0;
  color: #1a2228;
  font-family: 'Courier New', Courier, monospace;
  background-image: 
    radial-gradient(#d3cbbe 15%, transparent 16%),
    radial-gradient(#d3cbbe 15%, transparent 16%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border-left: 14px solid #ede8db;
  border-right: 14px solid #ede8db;
  position: relative;
}

/* KBA & TÜV Stempel-Animation */
.stamp-slap {
  animation: stampSlapAnim 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes stampSlapAnim {
  0% { transform: scale(2.5) rotate(-25deg); opacity: 0; }
  70% { transform: scale(0.9) rotate(-6deg); opacity: 1; }
  100% { transform: scale(1) rotate(-8deg); opacity: 0.9; }
}

/* Ruß- & Abgas-Rauch Simulation */
.exhaust-smoke-area {
  position: relative;
  height: 60px;
  overflow: hidden;
}

.exhaust-smoke-area.heavy-smoke::after {
  content: "💨 ☁️ ⬛";
  position: absolute;
  left: 50%;
  font-size: 2.2rem;
  animation: smokeDrift 1.5s infinite linear;
}

@keyframes smokeDrift {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0.8; }
  100% { transform: translate(-30%, -40px) scale(1.6); opacity: 0; }
}

/* Hupen-Erschütterungs-Animation */
.honking {
  animation: hornShake 0.4s ease-in-out;
}

@keyframes hornShake {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.08) rotate(-2deg); }
  75% { transform: scale(1.08) rotate(2deg); }
}

/* Scroll-Animations Trigger */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}