/* ══════════════════════════════════════════════════════════════════════════
   CINEMATIC-3D.CSS — AES Audiovisual  |  3D depth & perspective layer
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── CANVAS PARTICULES ─────────────────────────────────────────────────── */
#cin-3d-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* ─── 3D CARD TILT ──────────────────────────────────────────────────────── */
.tilt-3d {
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-3d .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,107,0,0.06) 45%,
    rgba(255,255,255,0.04) 50%,
    transparent 55%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 10;
}
.tilt-3d:hover .tilt-shine {
  opacity: 1;
}

/* ─── 3D PERSPECTIVE REVEAL ─────────────────────────────────────────────── */
.reveal-3d {
  opacity: 0;
  transform: perspective(900px) rotateX(22deg) translateY(35px);
  transition:
    opacity   0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center top;
}
.reveal-3d.vis {
  opacity: 1;
  transform: perspective(900px) rotateX(0deg) translateY(0);
}

/* stagger delay variants */
.reveal-3d.d1 { transition-delay: 0.1s; }
.reveal-3d.d2 { transition-delay: 0.2s; }
.reveal-3d.d3 { transition-delay: 0.3s; }
.reveal-3d.d4 { transition-delay: 0.4s; }

/* ─── HERO LOGO 3D DEPTH ────────────────────────────────────────────────── */
.hero-logo-big img {
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

/* ─── 3D TEXT DEPTH SHADOW ──────────────────────────────────────────────── */
.hero h1,
.page-hero h1 {
  text-shadow:
    0   1px 0 rgba(255,107,0,0.15),
    0   2px 0 rgba(255,107,0,0.10),
    0   3px 0 rgba(255,107,0,0.07),
    0   4px 0 rgba(255,107,0,0.04),
    0  20px 30px rgba(0,0,0,0.5);
}

/* ─── FLOATING 3D BADGE ON SERVICE CARDS ───────────────────────────────── */
.service-card .svc-num,
.pack-badge {
  transform: translateZ(20px);
}

/* ─── FOG SUPPRIMÉ ──────────────────────────────────────────────────────── */
/* Pas de fog avec le système particules — les particules gèrent leur propre opacité */
#cin-3d-fog { display: none; }

/* ─── STATS BAR 3D NUMBERS ──────────────────────────────────────────────── */
.stat-num {
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat-item:hover .stat-num {
  transform: perspective(300px) translateZ(12px) scale(1.08);
}

/* ─── NAV LOGO 3D HOVER ─────────────────────────────────────────────────── */
.nav-logo img {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
  transform-style: preserve-3d;
}
.nav-logo:hover img {
  transform: perspective(400px) rotateY(-12deg) scale(1.05);
}

/* ─── PORTFOLIO ITEM DEPTH ──────────────────────────────────────────────── */
.portfolio-item {
  transform-style: preserve-3d;
}

/* ─── PROCESS STEP NODES ────────────────────────────────────────────────── */
.step-num {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;
}
.step-card:hover .step-num {
  transform: perspective(300px) translateZ(15px) scale(1.12);
  box-shadow: 0 0 35px rgba(255,107,0,0.6), inset 0 0 20px rgba(255,107,0,0.1), 0 15px 30px rgba(0,0,0,0.4) !important;
}

/* ─── BUTTON 3D LIFT ────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-orange,
.btn-ghost {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s !important;
}
.btn-primary:hover,
.btn-orange:hover {
  transform: perspective(400px) translateZ(8px) translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(255,107,0,0.4), 0 8px 16px rgba(255,107,0,0.2) !important;
}
.btn-secondary:hover,
.btn-ghost:hover {
  transform: perspective(400px) translateZ(6px) translateY(-3px) !important;
  box-shadow: 0 15px 30px rgba(0,0,0,0.35) !important;
}