/* -------------------------------------------------------------
   MPI AUTOMOTIVE - OPTIMIZED CINEMATIC CSS STYLESHEET
   ------------------------------------------------------------- */

:root {
  --transition-cinematic: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-elastic: all 0.7s cubic-bezier(0.25, 1.35, 0.45, 1.15);
  --transition-fast: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --ev-blue: #00c8ff;
  --h2-green: #00ff80;
  --dark-bg: #060913;
  --border: rgba(255, 255, 255, 0.08);
}

/* GLOBAL OVERFLOW SAFEGUARDS */
html, body {
  overflow-x: hidden !important;
}

/* GLOWING SCROLL PROGRESS INDICATOR */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-blue), var(--h2-green));
  z-index: 100001;
  width: 0%;
  transition: width 0.1s ease-out;
  pointer-events: none !important;
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.4);
}

/* FLOATING AMBIENT BACKGROUND GRADIENT BLOBS */
.ambient-blob-1, .ambient-blob-2 {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.04) 0%, rgba(0, 255, 128, 0.01) 45%, transparent 70%);
  pointer-events: none !important;
  z-index: 0;
  filter: blur(60px);
  animation: floatBlob 30s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

.ambient-blob-1 { top: -15%; left: -15%; }
.ambient-blob-2 { bottom: -15%; right: -15%; animation-delay: -15s; }

@keyframes floatBlob {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(80px, 60px) scale(1.08) rotate(180deg); }
  100% { transform: translate(-40px, 80px) scale(0.95) rotate(360deg); }
}

/* DYNAMIC CLICK PARTICLES */
.click-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, var(--ev-blue) 0%, transparent 80%);
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 10000000;
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* 3D PERSPECTIVE TILT CARDS & SPOTLIGHTS */
.product-card, .feature-card, .testimonial-card, .stats-card, .testing-card, .design-studio-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.25, 1), 
              box-shadow 0.5s cubic-bezier(0.25, 1, 0.25, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}

.product-card:hover, .feature-card:hover, .testimonial-card:hover, .stats-card:hover, .testing-card:hover, .design-studio-card:hover {
  box-shadow: 0 15px 35px rgba(0, 200, 255, 0.15);
  border-color: rgba(0, 200, 255, 0.25) !important;
}

/* Lift inner elements in 3D plane */
.product-card > *, .feature-card > *, .testimonial-card > *, .stats-card > *, .testing-card > * {
  transform: translateZ(25px);
  position: relative;
  z-index: 2;
}

/* Card moving light reflection overlay */
.card-reflection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    250px circle at var(--ref-x, 0%) var(--ref-y, 0%),
    rgba(255, 255, 255, 0.04) 0%,
    transparent 80%
  );
  pointer-events: none !important;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s;
}

.product-card:hover .card-reflection,
.feature-card:hover .card-reflection,
.testimonial-card:hover .card-reflection,
.stats-card:hover .card-reflection,
.testing-card:hover .card-reflection {
  opacity: 1;
}

/* SHIMMER TEXT REVEALS */
.text-shimmer {
  background: linear-gradient(
    110deg,
    #ffffff 20%,
    var(--ev-blue) 45%,
    var(--h2-green) 55%,
    #ffffff 80%
  );
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmerSweep 8s linear infinite;
  display: inline-block;
}

@keyframes shimmerSweep {
  to { background-position: 200% center; }
}

/* DYNAMIC COSMIC BACKGROUND PARTICLES */
.space-particle {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 0;
  animation: floatBackgroundParticle 35s linear infinite;
}

@keyframes floatBackgroundParticle {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.4; }
  90% { opacity: 0.4; }
  100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}

/* GLASS NAVBAR */
nav {
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  background: rgba(6, 9, 19, 0.72) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s !important;
}

/* SMOOTH FADE PAGE TRANSITION OVERLAY */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--dark-bg);
  z-index: 999999;
  pointer-events: none !important;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.page-transition-overlay.fade-out {
  opacity: 0;
}
.page-transition-overlay.active {
  opacity: 1;
}

/* PREMIUM SCROLL REVEALS */
.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 45px, 0) scale(0.97) rotateX(2deg);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.scroll-reveal.reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* SCROLL PARALLAX BASES */
.hero-visual, .hero-img, .page-header-img, .page-header-art {
  will-change: transform;
  transition: transform 0.15s ease-out;
}

/* CINEMATIC FLOATING ELEMENT */
.float-visual {
  animation: floatVisual 7.5s ease-in-out infinite;
}

@keyframes floatVisual {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-14px) rotate(0.6deg) scale(1.015); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

/* ELASTIC MAGNETIC BUTTON BASE TRANSITIONS */
.btn-primary, .btn-secondary, .btn-blue, .form-submit, .directions-btn, .nav-cta {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.25, 1.25, 0.5, 1.2),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* FORM ENHANCEMENTS */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ev-blue) !important;
  box-shadow: 0 0 15px rgba(0, 200, 255, 0.25) !important;
  transform: scale(1.01);
}

/* Zoom container for gallery images */
.image-zoom-container {
  overflow: hidden;
  border-radius: 8px;
}
.image-zoom-container img {
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.image-zoom-container:hover img {
  transform: scale(1.05);
}