/* ===== UCARE UTS — Animations 3D Premium ===== */

/* --- Canvas Three.js hero --- */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Hero bg et content doivent être au-dessus du canvas */
.hero-bg-img { z-index: 0; }
.hero-content { z-index: 3; }
.hero-visual  { z-index: 3; }
.scroll-indicator { z-index: 3; }

/* --- Logo 3D rotation subtile --- */
.logo-icon {
  perspective: 300px;
  transform-style: preserve-3d;
}
.logo-icon img,
.logo-icon svg {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
  transform-origin: center;
  will-change: transform;
}
.navbar:not(.scrolled) .logo-icon img { filter: drop-shadow(0 0 8px rgba(107,33,168,0.6)); }
.logo-icon:hover img,
.logo-icon:hover svg {
  transform: rotateY(360deg) scale(1.1);
  box-shadow: 0 0 20px rgba(107,33,168,0.7), 0 0 40px rgba(236,72,153,0.4);
}

/* --- Cards cycles — apparition 3D au scroll --- */
.cycle-card {
  transform: perspective(800px) rotateY(12deg) translateY(40px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.7s ease,
              box-shadow 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.cycle-card.visible {
  transform: perspective(800px) rotateY(0deg) translateY(0);
  opacity: 1;
}
.cycle-card:nth-child(odd) {
  transform: perspective(800px) rotateY(-12deg) translateY(40px);
}
.cycle-card:nth-child(odd).visible {
  transform: perspective(800px) rotateY(0deg) translateY(0);
}
/* Hover tilt 3D */
.cycle-card:not(.featured) {
  transition: transform 0.15s ease, box-shadow 0.3s ease, opacity 0.7s ease;
}
.cycle-card:not(.featured):hover {
  transform: perspective(800px) rotateY(-4deg) rotateX(4deg) translateY(-6px) scale(1.01);
  box-shadow: 12px 20px 48px rgba(107,33,168,0.22), -4px -4px 20px rgba(236,72,153,0.1);
}
.cycle-card.featured:hover {
  transform: perspective(800px) rotateY(-2deg) rotateX(2deg) translateY(-8px) scale(1.02);
  box-shadow: 0 24px 64px rgba(107,33,168,0.5);
}

/* --- Stats hero — flip 3D entrée --- */
.stat-card {
  transform: perspective(400px) rotateX(30deg);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.5s ease;
}
.stat-card.visible {
  transform: perspective(400px) rotateX(0deg);
  opacity: 1;
}
.stat-card:nth-child(1) { transition-delay: 0.05s; }
.stat-card:nth-child(3) { transition-delay: 0.15s; }
.stat-card:nth-child(5) { transition-delay: 0.25s; }

/* --- Résultats stats — zoom 3D --- */
.result-stat-card {
  transform: perspective(600px) rotateX(20deg) scale(0.92);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.5s ease;
}
.result-stat-card.visible {
  transform: perspective(600px) rotateX(0) scale(1);
  opacity: 1;
}
.result-stat-card:nth-child(1) { transition-delay: 0s; }
.result-stat-card:nth-child(2) { transition-delay: 0.1s; }
.result-stat-card:nth-child(3) { transition-delay: 0.2s; }
.result-stat-card:nth-child(4) { transition-delay: 0.3s; }
.result-stat-card:hover {
  transform: perspective(600px) rotateX(-5deg) rotateY(5deg) scale(1.04) translateY(-4px);
}

/* --- Galerie — flip 3D au hover --- */
.galerie-item {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.galerie-item:hover {
  transform: perspective(900px) rotateY(-6deg) rotateX(4deg) scale(1.04) translateZ(16px);
  box-shadow: 20px 20px 50px rgba(107,33,168,0.35), -8px -8px 30px rgba(236,72,153,0.15);
  z-index: 5;
}
.galerie-item:nth-child(even):hover {
  transform: perspective(900px) rotateY(6deg) rotateX(4deg) scale(1.04) translateZ(16px);
}
/* Entrée galerie scroll */
.galerie-item {
  opacity: 0;
  transform: perspective(900px) rotateY(15deg) scale(0.9);
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.6s ease,
              box-shadow 0.3s ease;
}
.galerie-item:nth-child(even) {
  transform: perspective(900px) rotateY(-15deg) scale(0.9);
}
.galerie-item.visible {
  opacity: 1;
  transform: perspective(900px) rotateY(0) scale(1);
}
.galerie-item:nth-child(even).visible {
  transform: perspective(900px) rotateY(0) scale(1);
}
.galerie-item:nth-child(1) { transition-delay: 0s; }
.galerie-item:nth-child(2) { transition-delay: 0.08s; }
.galerie-item:nth-child(3) { transition-delay: 0.16s; }
.galerie-item:nth-child(4) { transition-delay: 0.24s; }
.galerie-item:nth-child(5) { transition-delay: 0.32s; }
.galerie-item:nth-child(6) { transition-delay: 0.4s; }

/* --- Témoignages — entrée 3D --- */
.temoignage-card {
  opacity: 0;
  transform: perspective(700px) rotateX(15deg) translateY(30px);
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.6s ease;
}
.temoignage-card.visible {
  opacity: 1;
  transform: perspective(700px) rotateX(0) translateY(0);
}
.temoignage-card.featured-temo.visible {
  transform: perspective(700px) rotateX(0) translateY(0) scale(1.02);
}
.temoignage-card:nth-child(1) { transition-delay: 0s; }
.temoignage-card:nth-child(2) { transition-delay: 0.12s; }
.temoignage-card:nth-child(3) { transition-delay: 0.24s; }
.temoignage-card:not(.featured-temo):hover {
  transform: perspective(700px) rotateX(-4deg) rotateY(4deg) translateY(-6px) scale(1.01);
  box-shadow: 8px 16px 40px rgba(107,33,168,0.18);
}

/* --- Activités entrée 3D --- */
.activite-card {
  opacity: 0;
  transform: perspective(600px) rotateY(20deg) translateX(30px);
  transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.6s ease;
}
.activite-card:nth-child(even) {
  transform: perspective(600px) rotateY(-20deg) translateX(-30px);
}
.activite-card.visible {
  opacity: 1;
  transform: perspective(600px) rotateY(0) translateX(0);
}
.activite-card:hover {
  transform: perspective(600px) rotateY(-4deg) rotateX(3deg) translateY(-6px) scale(1.02) !important;
}
.activite-card:nth-child(1) { transition-delay: 0s; }
.activite-card:nth-child(2) { transition-delay: 0.1s; }
.activite-card:nth-child(3) { transition-delay: 0.2s; }
.activite-card:nth-child(4) { transition-delay: 0.3s; }
.activite-card:nth-child(5) { transition-delay: 0.4s; }

/* --- Contact cards entrée --- */
.contact-card {
  opacity: 0;
  transform: perspective(500px) rotateX(10deg) translateY(20px);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.5s ease;
}
.contact-card.visible {
  opacity: 1;
  transform: perspective(500px) rotateX(0) translateY(0);
}
.contact-card:nth-child(1) { transition-delay: 0s; }
.contact-card:nth-child(2) { transition-delay: 0.1s; }
.contact-card:nth-child(3) { transition-delay: 0.2s; }
.contact-card:nth-child(4) { transition-delay: 0.3s; }
.contact-card:hover {
  transform: perspective(500px) rotateX(-3deg) rotateY(3deg) translateY(-4px) !important;
  box-shadow: 6px 12px 30px rgba(107,33,168,0.18);
}

/* --- Hero visual card 3D tilt --- */
.hero-card.main-card {
  transition: transform 0.2s ease;
}
.hero-visual {
  perspective: 1000px;
}

/* --- Result hero card 3D --- */
.result-hero-card {
  transform: perspective(800px) rotateY(-8deg);
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.7s ease;
}
.result-hero-card.visible {
  opacity: 1;
  transform: perspective(800px) rotateY(0deg);
}
.result-hero-card:hover {
  transform: perspective(800px) rotateY(4deg) rotateX(-3deg) scale(1.02);
}

/* --- Inscription form 3D --- */
.inscription-form-wrapper {
  opacity: 0;
  transform: perspective(800px) rotateY(15deg) translateX(30px);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.7s ease;
}
.inscription-form-wrapper.visible {
  opacity: 1;
  transform: perspective(800px) rotateY(0) translateX(0);
}

/* --- Bouton 3D press effect --- */
.btn-primary, .btn-secondary, .cycle-btn, .btn-form, .btn-nav {
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
  transform-style: preserve-3d;
}
.btn-primary:active  { transform: translateY(2px) scale(0.98) !important; }
.btn-secondary:active { transform: translateY(2px) scale(0.98) !important; }
.cycle-btn:active    { transform: translateY(2px) scale(0.97) !important; }
.btn-form:active     { transform: translateY(2px) scale(0.98) !important; }

/* --- Section headers entrée 3D --- */
.section-header {
  opacity: 0;
  transform: perspective(600px) rotateX(12deg) translateY(20px);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.7s ease;
}
.section-header.visible {
  opacity: 1;
  transform: perspective(600px) rotateX(0) translateY(0);
}

/* --- Ombre dynamique sur l'image hero principale --- */
.main-card img {
  box-shadow: 0 32px 80px rgba(107,33,168,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  transition: box-shadow 0.3s ease;
}
.main-card:hover img {
  box-shadow: 0 40px 100px rgba(107,33,168,0.65), 0 0 60px rgba(236,72,153,0.3);
}

/* --- Floating badges 3D --- */
.float-badge {
  animation: floatBadge 3s ease-in-out infinite;
}
.mini-card {
  animation: floatBadge 4s ease-in-out infinite;
}
.card-top-right { animation-delay: -1.5s; }
.card-bottom-left { animation-delay: -0.8s; }

@keyframes floatBadge {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  33% { transform: translateY(-8px) rotateZ(1deg); }
  66% { transform: translateY(-4px) rotateZ(-0.5deg); }
}

/* --- Chat widget 3D entrée --- */
.chat-window.open {
  animation: chatOpen 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes chatOpen {
  from { opacity: 0; transform: perspective(600px) rotateX(15deg) scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0) scale(1) translateY(0); }
}

/* --- Réduction motion si préférence système --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  #hero-canvas { display: none; }
}

/* --- Responsive — désactiver 3D lourds sur mobile --- */
@media (max-width: 768px) {
  .cycle-card { transform: translateY(30px) !important; }
  .cycle-card.visible { transform: translateY(0) !important; }
  .galerie-item:hover { transform: scale(1.02) !important; }
  .temoignage-card:hover { transform: none !important; }
}