/* ================================================================
   V51 — FX LAYER
   Couche d'animations partagée : curseur custom, transitions de page,
   glitch, reveals scroll, particules, grain. Non-invasive — s'ajoute
   par-dessus les styles existants sans les remplacer.
   ================================================================ */

/* ----------- VARIABLES ----------- */
:root{
  --fx-accent:#6c8cff;          /* accent prod (bleutée) */
  --fx-accent-wed:#b89a7a;      /* accent wedding (doré) */
  --fx-glitch-1:#ff2e63;        /* rouge glitch */
  --fx-glitch-2:#00fff2;        /* cyan glitch */
  --fx-ease:cubic-bezier(.16,1,.3,1);
  --fx-ease-out:cubic-bezier(.19,1,.22,1);
}

/* Détection automatique via body — overridable */
body.fx-wedding{--fx-accent:var(--fx-accent-wed);}

/* ----------- HIDE NATIVE CURSOR (desktop only) ----------- */
@media(hover:hover) and (pointer:fine){
  html.fx-ready,
  html.fx-ready body,
  html.fx-ready a,
  html.fx-ready button{cursor:none;}
}

/* ----------- CUSTOM CURSOR ----------- */
.fx-cursor{
  position:fixed;top:0;left:0;
  z-index:99999;
  pointer-events:none;
  mix-blend-mode:difference;
  transition:opacity .3s;
}
.fx-cursor-ring{
  position:absolute;
  width:36px;height:36px;
  border:1.2px solid rgba(255,255,255,.55);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:
    width .35s var(--fx-ease-out),
    height .35s var(--fx-ease-out),
    border-color .3s,
    border-radius .35s var(--fx-ease-out),
    background-color .3s,
    transform .35s var(--fx-ease-out);
}
.fx-cursor-dot{
  position:absolute;
  width:4px;height:4px;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,opacity .25s;
}
.fx-cursor-label{
  position:absolute;
  top:0;left:0;
  transform:translate(-50%,-50%);
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
  opacity:0;
  transition:opacity .25s;
  pointer-events:none;
}

/* States */
body.fx-hover-link .fx-cursor-ring{
  width:60px;height:60px;
  border-color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.04);
}
body.fx-hover-link .fx-cursor-dot{opacity:0;}

body.fx-hover-video .fx-cursor-ring{
  width:96px;height:96px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border-color:transparent;
}
body.fx-hover-video .fx-cursor-dot{opacity:0;}
body.fx-hover-video .fx-cursor-label{opacity:1;}

body.fx-hover-text .fx-cursor-ring{
  width:3px;height:28px;
  border-radius:1px;
  background:#fff;
  border-color:transparent;
}
body.fx-hover-text .fx-cursor-dot{opacity:0;}

body.fx-hover-drag .fx-cursor-ring{
  width:78px;height:78px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  border-color:transparent;
}
body.fx-hover-drag .fx-cursor-dot{opacity:0;}
body.fx-hover-drag .fx-cursor-label{opacity:1;}

/* Hide cursor on touch */
@media(hover:none),(pointer:coarse){
  .fx-cursor{display:none !important;}
}

/* ----------- PAGE TRANSITION OVERLAY ----------- */
.fx-transition{
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:99998;
  pointer-events:none;
  display:flex;
  flex-direction:column;
}
.fx-transition-panel{
  flex:1;
  background:#080808;
  transform:translateY(-100%);
  will-change:transform;
}
.fx-transition.is-entering .fx-transition-panel{transform:translateY(0);}
.fx-transition.is-leaving .fx-transition-panel{transform:translateY(100%);}

.fx-transition-label{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(64px,12vw,160px);
  line-height:1;
  letter-spacing:-6px;
  color:#f2ede6;
  opacity:0;
  white-space:nowrap;
  pointer-events:none;
  z-index:1;
}
body.fx-wedding .fx-transition-panel{background:#faf8f5;}
body.fx-wedding .fx-transition-label{color:#0f0f0d;}

/* ----------- SPLIT TEXT ----------- */
.fx-split-char{
  display:inline-block;
  will-change:transform,opacity;
  transform:translateY(110%) rotate(6deg);
  opacity:0;
}
.fx-split-char.fx-in{
  transform:translateY(0) rotate(0);
  opacity:1;
  transition:transform .9s var(--fx-ease-out),opacity .6s ease;
}
/* stagger handled inline via CSS var --fx-i */
.fx-split-char{transition-delay:calc(var(--fx-i,0) * 28ms);}

.fx-split-mask{display:inline-block;overflow:hidden;vertical-align:bottom;}
.fx-split-word{display:inline-block;white-space:nowrap;}

/* ----------- GLITCH EFFECT ----------- */
.fx-glitch{
  position:relative;
  display:inline-block;
}
.fx-glitch::before,
.fx-glitch::after{
  content:attr(data-text);
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:screen;
}
.fx-glitch::before{color:var(--fx-glitch-1);transform:translate(0,0);}
.fx-glitch::after{color:var(--fx-glitch-2);transform:translate(0,0);}

/* hover glitch (desktop) */
@media(hover:hover){
  .fx-glitch:hover::before{
    opacity:.85;
    animation:fx-glitch-1 .7s steps(2,jump-none) infinite;
  }
  .fx-glitch:hover::after{
    opacity:.85;
    animation:fx-glitch-2 .7s steps(2,jump-none) infinite;
  }
  .fx-glitch:hover{animation:fx-glitch-main .15s steps(1) infinite;}
}

/* Always-on subtle glitch loop (très discret) */
.fx-glitch-loop::before,
.fx-glitch-loop::after{opacity:.35;}
.fx-glitch-loop::before{animation:fx-glitch-1 5s steps(3,jump-none) infinite;}
.fx-glitch-loop::after{animation:fx-glitch-2 5s steps(3,jump-none) infinite;}

@keyframes fx-glitch-1{
  0%,88%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);}
  90%{transform:translate(-3px,1px);clip-path:inset(40% 0 20% 0);}
  93%{transform:translate(2px,-1px);clip-path:inset(10% 0 60% 0);}
  96%{transform:translate(-2px,2px);clip-path:inset(70% 0 5% 0);}
}
@keyframes fx-glitch-2{
  0%,87%,100%{transform:translate(0,0);clip-path:inset(0 0 0 0);}
  89%{transform:translate(3px,-1px);clip-path:inset(30% 0 50% 0);}
  92%{transform:translate(-2px,1px);clip-path:inset(60% 0 15% 0);}
  95%{transform:translate(2px,-2px);clip-path:inset(5% 0 70% 0);}
}
@keyframes fx-glitch-main{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(1px,-1px);}
}

/* ----------- SCROLL REVEALS ----------- */
/* Masque + slide depuis le bas */
.fx-reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1s var(--fx-ease-out),transform 1.1s var(--fx-ease-out);
  will-change:transform,opacity;
}
.fx-reveal.fx-in{opacity:1;transform:translateY(0);}

/* Slide latéral */
.fx-reveal-left{opacity:0;transform:translateX(-60px);transition:opacity 1s var(--fx-ease-out),transform 1.1s var(--fx-ease-out);}
.fx-reveal-left.fx-in{opacity:1;transform:translateX(0);}
.fx-reveal-right{opacity:0;transform:translateX(60px);transition:opacity 1s var(--fx-ease-out),transform 1.1s var(--fx-ease-out);}
.fx-reveal-right.fx-in{opacity:1;transform:translateX(0);}

/* Scale subtil */
.fx-reveal-scale{opacity:0;transform:scale(.92);transition:opacity 1s var(--fx-ease-out),transform 1.2s var(--fx-ease-out);}
.fx-reveal-scale.fx-in{opacity:1;transform:scale(1);}

/* Clip-path reveal (top->bottom) */
.fx-reveal-clip{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.3s var(--fx-ease-out);
}
.fx-reveal-clip.fx-in{clip-path:inset(0 0 0 0);}

/* Rotation subtile */
.fx-reveal-rotate{opacity:0;transform:rotate(-3deg) translateY(30px);transition:opacity 1s var(--fx-ease-out),transform 1.1s var(--fx-ease-out);}
.fx-reveal-rotate.fx-in{opacity:1;transform:rotate(0) translateY(0);}

/* Stagger enfants */
.fx-stagger > *{opacity:0;transform:translateY(30px);transition:opacity .8s var(--fx-ease-out),transform .9s var(--fx-ease-out);}
.fx-stagger.fx-in > *{opacity:1;transform:translateY(0);}
.fx-stagger.fx-in > *:nth-child(1){transition-delay:.05s;}
.fx-stagger.fx-in > *:nth-child(2){transition-delay:.12s;}
.fx-stagger.fx-in > *:nth-child(3){transition-delay:.19s;}
.fx-stagger.fx-in > *:nth-child(4){transition-delay:.26s;}
.fx-stagger.fx-in > *:nth-child(5){transition-delay:.33s;}
.fx-stagger.fx-in > *:nth-child(6){transition-delay:.4s;}
.fx-stagger.fx-in > *:nth-child(7){transition-delay:.47s;}
.fx-stagger.fx-in > *:nth-child(8){transition-delay:.54s;}
.fx-stagger.fx-in > *:nth-child(9){transition-delay:.61s;}
.fx-stagger.fx-in > *:nth-child(n+10){transition-delay:.68s;}

/* ----------- PARALLAX ----------- */
.fx-parallax{will-change:transform;}

/* ----------- GRAIN OVERLAY ----------- */
.fx-grain{
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:99990;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  animation:fx-grain-shift 8s steps(8) infinite;
}
@keyframes fx-grain-shift{
  0%{transform:translate(0,0);}
  10%{transform:translate(-5%,-5%);}
  20%{transform:translate(-10%,5%);}
  30%{transform:translate(5%,-10%);}
  40%{transform:translate(-5%,15%);}
  50%{transform:translate(-10%,5%);}
  60%{transform:translate(15%,0);}
  70%{transform:translate(0,10%);}
  80%{transform:translate(3%,15%);}
  90%{transform:translate(-10%,10%);}
  100%{transform:translate(0,0);}
}

/* ----------- PARTICLES CANVAS ----------- */
.fx-particles{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
}
.fx-particles canvas{display:block;width:100%;height:100%;}

/* ----------- MAGNETIC / HOVER SCALE ----------- */
.fx-magnetic{transition:transform .3s var(--fx-ease-out);will-change:transform;}

/* ----------- TEXT MARQUEE (utility optionnel) ----------- */
.fx-marquee{overflow:hidden;white-space:nowrap;display:flex;}
.fx-marquee-track{display:inline-flex;gap:80px;animation:fx-marquee-scroll 30s linear infinite;padding-right:80px;}
@keyframes fx-marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ----------- RESPECT USER MOTION PREFS ----------- */
@media(prefers-reduced-motion:reduce){
  .fx-reveal,.fx-reveal-left,.fx-reveal-right,.fx-reveal-scale,.fx-reveal-clip,.fx-reveal-rotate,.fx-stagger > *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
  }
  .fx-glitch::before,.fx-glitch::after{display:none !important;}
  .fx-grain,.fx-particles{display:none !important;}
  .fx-split-char{opacity:1;transform:none;}
  .fx-marquee-track{animation:none;}
}

/* ----------- MOBILE TWEAKS ----------- */
@media(max-width:768px){
  .fx-cursor{display:none !important;}
  .fx-grain{opacity:.025;}
  /* Désactive particules sur mobile pour perf */
  .fx-particles{display:none !important;}
  /* Transitions plus rapides sur mobile */
  .fx-reveal,.fx-reveal-left,.fx-reveal-right,.fx-reveal-scale,.fx-reveal-rotate{
    transition-duration:.7s;
    transform:translateY(20px);
  }
  .fx-transition-label{font-size:clamp(40px,15vw,80px);}
}