/* Accueil — profondeur CSS 3D autour de la rosace SVG existante. */
.hero__inner { z-index: 3; }

.hero__depth {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  transform: perspective(1000px) rotateX(var(--hero-tilt-x, 0deg)) rotateY(var(--hero-tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}

.hero__sway {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: hero-3d-sway 10s ease-in-out infinite paused;
}

.hero__orbit {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: hero-3d-float 15s ease-in-out infinite paused;
}

.hero__orbit::before,
.hero__orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero__orbit::before {
  inset: 7%;
  z-index: 0;
  border: 1px solid rgba(229, 83, 75, .42);
  background: radial-gradient(ellipse at 34% 25%, rgba(229, 83, 75, .2), rgba(18, 19, 24, .52) 47%, rgba(8, 10, 18, .9) 78%);
  box-shadow: 0 42px 86px rgba(0, 0, 0, .55), inset 0 1px rgba(255, 255, 255, .15), 0 0 42px rgba(229, 83, 75, .1);
  transform: translateZ(-74px) scale(.92);
}

.hero__orbit::after {
  inset: 1%;
  z-index: 0;
  border: 2px solid rgba(195, 200, 214, .3);
  box-shadow: inset 0 0 0 4px rgba(8, 10, 18, .7), 0 0 18px rgba(229, 83, 75, .12);
  transform: translateZ(-36px) scale(.96);
}

.hero__orbit > .art {
  position: relative;
  z-index: 1;
  display: block;
  transform: translateZ(18px);
  transform-box: fill-box;
  transform-origin: center;
  animation: hero-3d-turn 100s linear infinite paused;
}

.hero__depth.is-active .hero__sway,
.hero__depth.is-active .hero__orbit,
.hero__depth.is-active .hero__orbit > .art {
  animation-play-state: running;
}

@keyframes hero-3d-sway {
  0%, 100% { transform: rotateX(-8deg) rotateY(11deg) rotateZ(-.8deg); }
  50% { transform: rotateX(8deg) rotateY(-11deg) rotateZ(.8deg); }
}

@keyframes hero-3d-float {
  0%, 100% { transform: translateY(0) rotateZ(-.35deg); }
  50% { transform: translateY(-9px) rotateZ(.35deg); }
}

@keyframes hero-3d-turn {
  from { transform: translateZ(18px) rotateZ(0deg); }
  to { transform: translateZ(18px) rotateZ(360deg); }
}

@media (max-width: 1023px) {
  .hero__depth { perspective: 850px; }
  .hero__sway { animation-duration: 14s; }
  .hero__orbit::before { box-shadow: 0 24px 50px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .1); }
  .hero__orbit > .art { animation-duration: 150s; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__depth { transform: none !important; transition: none !important; }
  .hero__sway, .hero__orbit, .hero__orbit > .art { animation: none !important; }
  .hero__orbit > .art { transform: none !important; }
}