/* =====================================================
   DUTCH CORPORATION — ANIMATIONS CSS
   Scroll-triggered & entrance animations
   ===================================================== */

/* ── Reveal Animations ── */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.reveal-up     { transform: translateY(40px); }
.reveal-left   { transform: translateX(-50px); }
.reveal-right  { transform: translateX(50px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Entrance utility ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

/* ── Shimmer on gradient text ── */
.gradient-text {
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

/* ── Hover glow for cards ── */
.product-card,
.mvv-card,
.tt-card,
.timeline-content {
  position: relative;
  overflow: hidden;
}
.product-card::before,
.mvv-card::before,
.tt-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.03), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.product-card:hover::before,
.mvv-card:hover::before,
.tt-card:hover::before {
  left: 150%;
}

/* ── Number counter pulsate on load ── */
.stat-number {
  animation: statPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes statPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Floating badge ── */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

/* ── Timeline animation ── */
.timeline-item .timeline-content {
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.timeline-item.visible .timeline-content { transform: translateY(0); }

/* ── Navbar entrance ── */
#navbar {
  animation: navDrop 0.6s ease both;
}
@keyframes navDrop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Strip icon pulse on hover ── */
.strip-icon { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease; }

/* ── Preloader fade ── */
.preloader-inner { animation: fadeInUp 0.5s ease; }

/* ── Scroll progress indicator ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red-500, #e63946), var(--red-deep, #c1121f));
  width: 0%;
  z-index: 10001;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(230,57,70,0.7);
}

/* ── Page transition overlay ── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--dark-950, #ffffff);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.page-transition.active { opacity: 1; pointer-events: all; }

/* ── Contact form validation shake ── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.form-group.error input,
.form-group.error textarea,
.form-group.error select {
  border-color: #ef4444;
  animation: shake 0.4s ease;
}
.form-group.error label { color: #ef4444; }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #ffffff; }
::-webkit-scrollbar-thumb { background: rgba(230,57,70,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(230,57,70,0.7); }

/* ── Selection ── */
::selection { background: rgba(230,57,70,0.35); color: #fff; }