/* =========================================================
   ACCUEIL - ANIMATIONS PREMIUM LÉGÈRES
   - Titre : Staggered SplitText sans modifier l'espacement
   - Sous-titre : révélation lettre par lettre, sans glyphes Matrix
   - Réseaux sociaux : bouton flottant
========================================================= */

/* ---------- Titre principal ---------- */
.hero-stagger-title {
  perspective: 1200px;
  color: var(--dark) !important;
}

.hero-stagger-title span,
.hero-stagger-title .split-char {
  color: inherit !important;
}

body.dark-mode .hero-stagger-title,
body.dark-mode .hero-stagger-title span,
body.dark-mode .hero-stagger-title .split-char {
  color: #ffffff !important;
}

.hero-stagger-title .split-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.72em, 0) rotate(7deg) scale(0.94);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.hero-stagger-title.is-animated .split-char {
  animation: hopesSplitBounce 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--char-index, 0) * 38ms);
}

@keyframes hopesSplitBounce {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.72em, 0) rotate(7deg) scale(0.94);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -0.1em, 0) rotate(-2deg) scale(1.012);
  }
  82% {
    transform: translate3d(0, 0.035em, 0) rotate(0.8deg) scale(0.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

/* ---------- Sous-titre : seulement la vraie lettre ---------- */
.hero-description-matrix {
  display: inline-block;
  max-width: 38rem;
  text-shadow: none !important;
}

.hero-description-matrix .matrix-char {
  display: inline-block;
  color: var(--text);
  opacity: 0;
  filter: blur(6px);
  transform: translate3d(0, -1.15em, 0) rotate(-4deg);
  will-change: opacity, transform, filter;
}

.hero-description-matrix.is-animated .matrix-char {
  animation: hopesCleanMatrixReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--matrix-index, 0) * 30ms);
}

@keyframes hopesCleanMatrixReveal {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, -1.15em, 0) rotate(-4deg);
  }
  70% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0.08em, 0) rotate(1deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

/* ---------- Bouton flottant réseaux sociaux ---------- */
.floating-social {
  position: fixed;
  right: clamp(1rem, 2.2vw, 1.8rem);
  bottom: clamp(1rem, 2.2vw, 1.8rem);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
}

.floating-social-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.8rem) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.floating-social.is-open .floating-social-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.floating-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  min-width: 13rem;
  padding: 0.82rem 0.95rem 0.82rem 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  background: rgba(3, 7, 18, 0.92);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  color: var(--white);
  backdrop-filter: blur(14px);
  transform: translateX(1.1rem);
  opacity: 0;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
  transition-delay: calc(var(--social-index, 0) * 55ms);
}

.floating-social.is-open .floating-social-link {
  opacity: 1;
  transform: translateX(0);
}

.floating-social-link:hover {
  border-color: rgba(112, 197, 0, 0.45);
  background-color: rgba(10, 18, 31, 0.96);
  transform: translateX(-0.18rem);
}

.floating-social-link-label {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.12;
}

.floating-social-link-label small {
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
}

.floating-social-link-label strong {
  font-size: 0.92rem;
  color: var(--white);
}

.floating-social-link-icon,
.floating-social-toggle {
  width: 3.45rem;
  height: 3.45rem;
  border-radius: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.floating-social-link-icon {
  background: linear-gradient(135deg, rgba(112, 197, 0, 0.22), rgba(112, 197, 0, 0.08));
  color: var(--primary);
  font-size: 1.1rem;
}

.floating-social-toggle {
  position: relative;
  border: 0;
  background: linear-gradient(135deg, var(--primary), #96cf3f);
  color: var(--white);
  box-shadow: 0 18px 42px rgba(112, 197, 0, 0.35);
  cursor: pointer;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.floating-social-toggle:hover {
  transform: translateY(-0.18rem) scale(1.02);
  box-shadow: 0 22px 46px rgba(112, 197, 0, 0.42);
}

.floating-social-toggle .floating-social-toggle-text {
  position: absolute;
  right: 4.2rem;
  white-space: nowrap;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: rgba(3, 7, 18, 0.86);
  color: var(--white);
  font-size: 0.83rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(0.55rem);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.floating-social:hover .floating-social-toggle-text,
.floating-social.is-open .floating-social-toggle-text {
  opacity: 1;
  transform: translateX(0);
}

.floating-social-toggle .floating-social-close {
  display: none;
}

.floating-social.is-open .floating-social-toggle .floating-social-open {
  display: none;
}

.floating-social.is-open .floating-social-toggle .floating-social-close {
  display: inline-block;
}

@media (max-width: 767px) {
  .floating-social-link {
    min-width: 11.5rem;
  }

  .floating-social-toggle .floating-social-toggle-text {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stagger-title .split-char,
  .hero-description-matrix .matrix-char,
  .floating-social-menu,
  .floating-social-link,
  .floating-social-toggle .floating-social-toggle-text {
    animation: none !important;
    transition: none !important;
  }

  .hero-stagger-title .split-char,
  .hero-description-matrix .matrix-char {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* =========================================================
   V15 — ILLUSTRATION « NOTRE DIFFÉRENCE » EN CALQUES

   Le PNG d'origine était plat : impossible d'animer une partie
   seule. Il a été découpé en calques (voir docs/CORRECTIONS_V15.md) :
     hero-central-base.png : le socle, la sphère et les anneaux,
                             sans les cubes ni le logo gravé ;
     hero-cube-1..4.png    : les 4 cubes, chacun isolé ;
     le logo animé du header vient au centre de la sphère.

   Les déplacements sont exprimés en % de la taille du cube :
   ils restent donc proportionnés quelle que soit la largeur d'écran.
========================================================= */
.about-main-image.about-stage {
  aspect-ratio: 1920 / 1080;
  max-height: none;
  overflow: visible;
}

.about-stage-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-stage .about-cube,
.about-stage .about-orb-logo {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* ---------- Les cubes : léger flottement ---------- */
.about-stage .about-cube {
  will-change: transform;
  animation: hopesCubeFloat var(--cube-duree, 7s) ease-in-out var(--cube-retard, 0s) infinite;
}

@keyframes hopesCubeFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% {
    transform:
      translate3d(var(--cube-dx, 0%), var(--cube-dy, -16%), 0)
      rotate(var(--cube-rot, 5deg));
  }
}

/* Positions relevées au pixel près sur l'illustration d'origine (1920×1080). */
.about-cube--1 {
  left: 13.490%;
  top: 31.667%;
  width: 5.469%;
  --cube-dx: 4%;
  --cube-dy: -16%;
  --cube-rot: 5deg;
  --cube-duree: 7.5s;
}

.about-cube--2 {
  left: 81.146%;
  top: 40.370%;
  width: 5.313%;
  --cube-dx: -4%;
  --cube-dy: 14%;
  --cube-rot: -5deg;
  --cube-duree: 8.6s;
  --cube-retard: -2.2s;
}

.about-cube--3 {
  left: 29.896%;
  top: 50.833%;
  width: 2.708%;
  --cube-dx: 6%;
  --cube-dy: -20%;
  --cube-rot: 8deg;
  --cube-duree: 6.2s;
  --cube-retard: -3.4s;
}

.about-cube--4 {
  left: 67.552%;
  top: 53.426%;
  width: 2.552%;
  --cube-dx: -5%;
  --cube-dy: 18%;
  --cube-rot: -7deg;
  --cube-duree: 6.9s;
  --cube-retard: -1.1s;
}

/* ---------- Le logo animé au centre de la sphère ---------- */
.about-stage .about-orb-logo {
  left: 51.641%;
  top: 38.843%;
  height: 28.5%;
  width: auto;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .about-stage .about-cube {
    animation: none !important;
  }
}