/* ============================================================
   PAGE FX — Animations hyperdesign appliquées à toutes les pages
   Activé par page-fx.js (ajout des classes .pfx-* sur les éléments)
   Chaque page peut override --fx-hue pour sa propre teinte
   ============================================================ */

:root {
  --fx-hue: 178;                   /* cyan par défaut, override par page */
  --fx-primary: hsl(var(--fx-hue), 64%, 38%);
  --fx-primary-light: hsl(var(--fx-hue), 70%, 55%);
  --fx-primary-dim: hsl(var(--fx-hue), 64%, 25%);
}

body.pfx-active {
  position: relative;
  overflow-x: hidden;
}

/* === ORBES FLOTTANTES (injectés JS sur 1ère section) === */
.pfx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
  animation: pfxOrbFloat var(--dur, 18s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  mix-blend-mode: screen;
}
@keyframes pfxOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.1); }
  66% { transform: translate(-30px, 20px) scale(.95); }
}

/* === CONIC AURORA (background slow rotation) === */
.pfx-aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    hsla(var(--fx-hue), 60%, 50%, 0) 0deg,
    hsla(var(--fx-hue), 70%, 55%, .22) 70deg,
    hsla(var(--fx-hue), 60%, 50%, 0) 140deg,
    hsla(var(--fx-hue), 50%, 30%, .28) 210deg,
    hsla(var(--fx-hue), 60%, 50%, 0) 280deg,
    hsla(var(--fx-hue), 70%, 55%, .16) 340deg,
    hsla(var(--fx-hue), 60%, 50%, 0) 360deg);
  filter: blur(100px);
  animation: pfxAuroraSpin 28s linear infinite;
  opacity: .45;
}
@keyframes pfxAuroraSpin { to { transform: rotate(360deg); } }

/* === GRILLE TECH (overlay subtil) === */
.pfx-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(hsla(var(--fx-hue), 60%, 50%, .06) 1px, transparent 1px),
    linear-gradient(90deg, hsla(var(--fx-hue), 60%, 50%, .06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black 20%, transparent 80%);
  animation: pfxGridBreathe 8s ease-in-out infinite;
}
@keyframes pfxGridBreathe {
  0%, 100% { opacity: .5; }
  50% { opacity: .9; }
}

/* === PARTICULES AMBIANTES === */
.pfx-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.pfx-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, hsl(var(--fx-hue), 75%, 55%) 0%, hsla(var(--fx-hue), 70%, 55%, .4) 40%, transparent 100%);
  box-shadow: 0 0 12px hsl(var(--fx-hue), 75%, 55%), 0 0 24px hsla(var(--fx-hue), 70%, 55%, .5);
  opacity: 0;
  animation: pfxParticleFloat var(--dur, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes pfxParticleFloat {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  10%  { opacity: .9; }
  90%  { opacity: .6; }
  100% { opacity: 0; transform: translate(var(--dx, 40px), var(--dy, -300px)) scale(1.2); }
}

/* === STAGGER WORD REVEAL sur les h1 === */
.pfx-h1-staggered .pfx-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(10px);
  animation: pfxWordIn .9s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes pfxWordIn {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* === GRADIENT SWEEP sur certains mots (highlight) === */
.pfx-h1-staggered .pfx-word-highlight {
  background: linear-gradient(135deg,
    hsl(var(--fx-hue), 70%, 55%) 0%,
    hsl(var(--fx-hue), 80%, 65%) 50%,
    hsl(var(--fx-hue), 55%, 40%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  position: relative;
}
.pfx-h1-staggered .pfx-word-highlight::after {
  content: '';
  position: absolute;
  inset: -10% -5%;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.6) 47%,
    rgba(220,255,253,.85) 50%,
    rgba(255,255,255,.6) 53%,
    transparent 70%);
  mix-blend-mode: overlay;
  pointer-events: none;
  transform: translateX(-100%);
  animation: pfxShimmer 5s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes pfxShimmer {
  0%, 30% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* === MAGNETIC CTA — classe ajoutée par JS === */
.pfx-magnetic {
  --mag-x: 0; --mag-y: 0;
  position: relative;
  transform: translate(var(--mag-x), var(--mag-y));
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
.pfx-magnetic-glow::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    hsl(var(--fx-hue), 80%, 55%),
    hsl(var(--fx-hue), 65%, 45%),
    hsl(var(--fx-hue), 80%, 55%));
  z-index: -1;
  opacity: 0;
  filter: blur(18px);
  animation: pfxBtnGlow 3.5s ease-in-out infinite;
}
@keyframes pfxBtnGlow {
  0%, 100% { opacity: .35; transform: scale(.97); }
  50% { opacity: .65; transform: scale(1.04); }
}

/* === TILT 3D pour les cartes === */
.pfx-tilt {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
  will-change: transform;
}
.pfx-tilt-spotlight {
  position: relative;
  overflow: hidden;
}
.pfx-tilt-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 250px at var(--spot-x, 50%) var(--spot-y, 50%),
    hsla(var(--fx-hue), 75%, 55%, .14) 0%,
    transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 0;
}
.pfx-tilt-spotlight:hover::before { opacity: 1; }
.pfx-tilt-spotlight > * { position: relative; z-index: 1; }

/* === CURSOR BLOOM global === */
.pfx-cursor-bloom {
  position: fixed;
  pointer-events: none;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle,
    hsla(var(--fx-hue), 75%, 55%, .14) 0%,
    hsla(var(--fx-hue), 70%, 55%, .05) 35%,
    transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .5s ease;
  filter: blur(20px);
}
body.pfx-cursor-active .pfx-cursor-bloom { opacity: 1; }

/* === ÉLÉMENTS QUI APPARAISSENT AU SCROLL === */
.pfx-reveal {
  opacity: 0;
  transform: translateY(30px) scale(.97);
  filter: blur(8px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1),
              filter .8s ease;
}
.pfx-reveal.pfx-reveal-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .pfx-cursor-bloom { display: none; }
  .pfx-particle { width: 3px; height: 3px; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  .pfx-orb, .pfx-aurora, .pfx-grid, .pfx-particle, .pfx-word,
  .pfx-magnetic-glow::after, .pfx-h1-staggered .pfx-word-highlight::after,
  .pfx-tilt {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}