/**
 * Effets DA « Lin & Ardoise » — landing (home).
 * Sélection validée, placée par contexte :
 *  - cursor glow : halo d'accent qui suit la souris (ambiance, discret) ;
 *  - bouton magnétique : CTA importants (hero + formation) ;
 *  - zoom lent : images formation / cours au scroll ;
 *  - reveal masqué : grands titres.
 * Les états « cachés » ne s'appliquent que si body.home-fx-ready est posé (JS).
 */

/* --- Cursor glow : halo d'accent, derrière le contenu --- */
#homeFxGlow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  background:
    radial-gradient(
      28% 32% at var(--mx, 50%) var(--my, 30%),
      rgba(92, 125, 151, 0.07) 0%,
      transparent 62%
    ),
    radial-gradient(
      32% 30% at calc(100% - var(--mx, 50%) * 0.55) 84%,
      rgba(156, 139, 118, 0.04) 0%,
      transparent 64%
    );
  will-change: background;
}

#homeFxGlow.is-live {
  opacity: 0.72;
}

/* --- Zoom lent (images, lié au scroll) --- */
body.home-fx-ready [data-zoom] {
  transform: scale(1);
  transform-origin: 50% 42%;
  transition: transform 0.2s linear;
  will-change: transform;
}

/* --- Reveal masqué (clip-path) : grands titres --- */
body.home-fx-ready [data-fx="mask"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1);
  transition-delay: var(--fx-d, 0s);
}

body.home-fx-ready [data-fx="mask"].is-in {
  clip-path: inset(0 0 0 0);
}

/* --- Bouton magnétique --- */
.home-btn--magnetic {
  will-change: transform;
}

/* --- Vignettes « Mon approche » --- */
body.home-page .home-pillar.home-pillar--fx {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.4s var(--home-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.4s ease,
    border-color 0.35s ease;
}

body.home-page .home-pillar.home-pillar--fx::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(92, 125, 151, 0.14) 0%, transparent 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(156, 139, 118, 0.08) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

body.home-page .home-pillar.home-pillar--fx::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  z-index: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(92, 125, 151, 0.5) 50%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

body.home-page .home-pillar.home-pillar--fx:hover::before {
  opacity: 1;
}

body.home-page .home-pillar.home-pillar--fx:hover::after {
  transform: scaleX(1);
}

body.home-page .home-pillar.home-pillar--fx:hover {
  border-color: rgba(92, 125, 151, 0.24);
  box-shadow:
    0 12px 28px rgba(92, 125, 151, 0.11),
    0 0 0 1px rgba(92, 125, 151, 0.08);
}

body.home-page .home-pillar.home-pillar--fx .home-pillar__icon,
body.home-page .home-pillar.home-pillar--fx h3,
body.home-page .home-pillar.home-pillar--fx p {
  position: relative;
  z-index: 1;
}

body.home-page .home-pillar.home-pillar--fx .home-pillar__icon {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    color 0.35s ease;
}

body.home-page .home-pillar.home-pillar--fx:hover .home-pillar__icon {
  transform: translateY(-3px);
  opacity: 1;
  color: var(--home-accent-hover, #4a6a82);
}

body.home-page .home-pillar.home-pillar--fx h3 {
  transition: color 0.35s ease;
}

body.home-page .home-pillar.home-pillar--fx:hover h3 {
  color: var(--home-accent, #5c7d97);
}

body.home-page .home-pillar.home-pillar--fx.is-pillar-in .home-pillar__icon {
  animation: homePillarIconIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--pillar-d, 0s);
}

@keyframes homePillarIconIn {
  from {
    opacity: 0.35;
    transform: translateY(8px);
  }

  to {
    opacity: 0.82;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #homeFxGlow {
    display: none;
  }

  body.home-fx-ready [data-zoom] {
    transform: none !important;
    transition: none !important;
  }

  body.home-fx-ready [data-fx="mask"] {
    clip-path: none !important;
    transition: none !important;
  }

  body.home-page .home-pillar.home-pillar--fx::before,
  body.home-page .home-pillar.home-pillar--fx::after {
    display: none;
  }

  body.home-page .home-pillar.home-pillar--fx.is-pillar-in .home-pillar__icon {
    animation: none;
  }
}