/* ============================================
   THÈME 3D AVANCÉ - SMM ALUMINIUM 2026
   ============================================ */

/* ========== PERSPECTIVE GLOBALE ========== */
html {
  perspective: 1000px;
  perspective-origin: center;
}

body {
  transform-style: preserve-3d;
}

/* ========== ANIMATIONS 3D PRINCIPALES ========== */

@keyframes flip3D {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
    opacity: 1;
  }
  50% {
    transform: rotateY(90deg) rotateX(10deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes rotateIn3D {
  from {
    opacity: 0;
    transform: rotateX(90deg) rotateY(45deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg) rotateY(0deg) scale(1);
  }
}

@keyframes rotateCube {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(10deg) rotateY(20deg) rotateZ(5deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}

@keyframes float3D {
  0%, 100% {
    transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translateZ(30px) rotateX(5deg) rotateY(5deg);
  }
  50% {
    transform: translateZ(50px) rotateX(0deg) rotateY(10deg);
  }
  75% {
    transform: translateZ(30px) rotateX(-5deg) rotateY(-5deg);
  }
}

@keyframes slideIn3D {
  from {
    opacity: 0;
    transform: translateZ(-500px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: translateZ(0) rotateY(0deg);
  }
}

@keyframes twistIn3D {
  from {
    opacity: 0;
    transform: rotateZ(180deg) rotateX(90deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg) rotateX(0deg) scale(1);
  }
}

@keyframes wobble3D {
  0%, 100% {
    transform: translate(0, 0) rotateZ(0deg) rotateX(0deg);
  }
  15% {
    transform: translate(-5px, -5px) rotateZ(-5deg) rotateX(3deg);
  }
  30% {
    transform: translate(5px, -5px) rotateZ(5deg) rotateX(-3deg);
  }
  45% {
    transform: translate(5px, 5px) rotateZ(5deg) rotateX(3deg);
  }
  60% {
    transform: translate(-5px, 5px) rotateZ(-5deg) rotateX(-3deg);
  }
  75% {
    transform: translate(5px, 0) rotateZ(3deg) rotateX(2deg);
  }
}

@keyframes scaleRotate3D {
  0% {
    transform: scale(0) rotateX(360deg) rotateY(180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotateX(0deg) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes glowRotate3D {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
    box-shadow: 0 0 10px rgba(198, 148, 74, 0.3);
  }
  50% {
    transform: rotateX(10deg) rotateY(20deg);
    box-shadow: 0 0 40px rgba(198, 148, 74, 0.8), inset 0 0 20px rgba(198, 148, 74, 0.2);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
    box-shadow: 0 0 10px rgba(198, 148, 74, 0.3);
  }
}

/* ========== CLASSE 3D POUR ÉLÉMENTS ========== */

.flip-3d {
  animation: flip3D 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

.rotate-3d {
  animation: rotateCube 4s ease-in-out infinite;
  transform-style: preserve-3d;
}

.float-3d {
  animation: float3D 5s ease-in-out infinite;
  transform-style: preserve-3d;
}

.slide-in-3d {
  animation: slideIn3D 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}

.twist-in-3d {
  animation: twistIn3D 1s ease-out;
  transform-style: preserve-3d;
}

.wobble-3d {
  animation: wobble3D 0.8s ease-in-out;
  transform-style: preserve-3d;
}

.scale-rotate-3d {
  animation: scaleRotate3D 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
}

.glow-rotate-3d {
  animation: glowRotate3D 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* ========== 3D CARD FLIP ========== */

.card-3d-wrapper {
  perspective: 1000px;
  width: 100%;
  height: 100%;
}

.card-3d {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-style: preserve-3d;
}

.card-3d-wrapper:hover .card-3d {
  transform: rotateY(180deg);
}

.card-3d-front,
.card-3d-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  padding: 20px;
}

.card-3d-front {
  background: linear-gradient(135deg, rgba(255, 253, 248, 0.95) 0%, rgba(246, 237, 225, 0.95) 100%);
  border: 1px solid rgba(198, 148, 74, 0.2);
}

.card-3d-back {
  background: linear-gradient(135deg, #c6944a 0%, #9a6f31 100%);
  color: white;
  transform: rotateY(180deg);
}

/* ========== HERO 3D ========== */

.hero-3d {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.hero-3d-content {
  transform-style: preserve-3d;
  animation: slideIn3D 1.5s ease-out;
}

.hero-3d-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(198, 148, 74, 0.15) 0%, rgba(22, 38, 63, 0.1) 100%);
  z-index: -1;
  transform-style: preserve-3d;
}

/* ========== PRODUCT CARDS 3D ========== */

.product-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.product-3d:hover {
  transform: rotateX(5deg) rotateY(-15deg) translateZ(20px);
}

.product-visual-3d {
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  transform: translateZ(0);
}

.product-3d:hover .product-visual-3d {
  transform: translateZ(30px) rotateY(10deg);
}

/* ========== TRUST CARDS 3D ========== */

.trust-card-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 20px;
}

.trust-card-3d:hover {
  transform: rotateX(-10deg) rotateY(5deg) translateZ(30px);
  box-shadow: 0 40px 80px rgba(22, 38, 63, 0.3);
}

.trust-card-3d strong {
  display: block;
  transition: all 0.6s ease;
  transform: translateZ(20px);
}

.trust-card-3d:hover strong {
  transform: translateZ(40px) scale(1.1);
  color: #c6944a;
}

/* ========== PROJECT CARDS 3D ========== */

.project-3d {
  perspective: 1200px;
  transform-style: preserve-3d;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.project-3d-media {
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateZ(0);
}

.project-3d:hover .project-3d-media {
  transform: translateZ(40px) rotateX(8deg) rotateY(-8deg);
}

.project-3d-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(198, 148, 74, 0.7) 0%, rgba(22, 38, 63, 0.7) 100%);
  opacity: 0;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.project-3d:hover .project-3d-overlay {
  opacity: 1;
  transform: translateZ(50px);
}

/* ========== EXPERTISE CARDS 3D ========== */

.expertise-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.expertise-3d:hover {
  transform: rotateX(-5deg) rotateY(10deg) translateZ(30px);
}

.expertise-3d h3 {
  transform: translateZ(15px);
  transition: transform 0.6s ease;
}

.expertise-3d:hover h3 {
  transform: translateZ(30px);
}

/* ========== ABOUT SECTION 3D ========== */

.about-3d-image {
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: hidden;
  border-radius: 16px;
}

.about-3d-image img {
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateZ(0) scale(1);
}

.about-3d-image:hover img {
  transform: translateZ(20px) scale(1.05) rotateY(5deg);
}

/* ========== BUTTON 3D ========== */

.button-3d {
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.3s ease;
}

.button-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: inherit;
  transform: translateZ(-4px);
  z-index: -1;
  transition: all 0.3s ease;
}

.button-3d:hover {
  transform: translateZ(10px);
}

.button-3d:hover::before {
  transform: translateZ(-15px);
}

.button-3d:active {
  transform: translateZ(2px);
}

.button-3d:active::before {
  transform: translateZ(-8px);
}

/* ========== INPUT 3D ========== */

input.input-3d,
textarea.input-3d,
select.input-3d {
  perspective: 500px;
  transition: all 0.3s ease;
  transform: translateZ(0);
}

input.input-3d:focus,
textarea.input-3d:focus,
select.input-3d:focus {
  transform: translateZ(8px);
  box-shadow: 0 15px 40px rgba(198, 148, 74, 0.2), inset 0 0 0 3px rgba(198, 148, 74, 0.1);
}

/* ========== PARALLAX 3D AVANCÉ ========== */

.parallax-3d {
  perspective: 1200px;
  overflow: hidden;
  position: relative;
}

.parallax-3d-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.parallax-3d-bg {
  transform: translateZ(-200px) scale(1.5);
}

.parallax-3d-mid {
  transform: translateZ(-100px) scale(1.25);
}

.parallax-3d-front {
  transform: translateZ(0) scale(1);
}

/* ========== GLASS MORPHISM 3D ========== */

.glass-3d {
  background: rgba(255, 251, 245, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(198, 148, 74, 0.2);
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.6s ease;
}

.glass-3d:hover {
  background: rgba(255, 251, 245, 0.95);
  transform: translateZ(20px) rotateX(5deg) rotateY(-5deg);
  box-shadow: 0 30px 80px rgba(22, 38, 63, 0.2), inset 0 0 30px rgba(198, 148, 74, 0.1);
}

/* ========== NEON GLOW 3D ========== */

.neon-3d {
  perspective: 1000px;
  transition: all 0.6s ease;
  text-shadow: 0 0 10px rgba(198, 148, 74, 0.5);
  transform: translateZ(0);
}

.neon-3d:hover {
  transform: translateZ(20px);
  text-shadow: 0 0 20px rgba(198, 148, 74, 1), 0 0 30px rgba(198, 148, 74, 0.7);
  color: #c6944a;
}

/* ========== LOADER 3D ========== */

.loader-3d {
  width: 50px;
  height: 50px;
  position: relative;
  margin: auto;
  perspective: 1000px;
}

.loader-3d div {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid rgba(198, 148, 74, 0.3);
  border-radius: 50%;
  animation: spin3D 2s linear infinite;
}

.loader-3d div:nth-child(2) {
  border-color: transparent rgba(198, 148, 74, 0.5) transparent;
  animation: spin3D 3s linear infinite reverse;
}

@keyframes spin3D {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

/* ========== TEXT EFFECT 3D ========== */

.text-3d {
  perspective: 1000px;
  font-weight: 700;
}

.text-3d-char {
  display: inline-block;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.text-3d:hover .text-3d-char {
  transform: rotateX(360deg) rotateY(180deg) rotateZ(90deg);
}

.text-3d-char:nth-child(1) { animation-delay: 0s; }
.text-3d-char:nth-child(2) { animation-delay: 0.1s; }
.text-3d-char:nth-child(3) { animation-delay: 0.2s; }
.text-3d-char:nth-child(4) { animation-delay: 0.3s; }
.text-3d-char:nth-child(5) { animation-delay: 0.4s; }

/* ========== RESPONSIVE 3D ========== */

@media (max-width: 768px) {
  .product-3d:hover,
  .trust-card-3d:hover,
  .project-3d:hover,
  .expertise-3d:hover {
    transform: none;
  }
  
  .flip-3d {
    animation: none;
    transform: none;
  }
  
  /* Réduire les transforms 3D sur mobile */
  .card-3d-wrapper:hover .card-3d {
    transform: rotateY(0deg);
  }
  
  .text-3d:hover .text-3d-char {
    transform: none;
  }
}

/* ========== PRÉFÉRENCE MOUVEMENT RÉDUIT ========== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    perspective: none !important;
    transform-style: flat !important;
  }
  
  .flip-3d,
  .rotate-3d,
  .float-3d,
  .product-3d,
  .trust-card-3d,
  .project-3d,
  .expertise-3d,
  .glass-3d {
    animation: none;
    transform: none;
  }
}