/* ==========================================================================
   EMPIRE MOTION, couche d'animation premium, agnostique framework.
   Sœur motion de maison-saywa. Zéro dépendance. Opt-in (data-em-* / classes .em-*).
   Token-driven : hérite de --accent du site hôte (fallback interne).
   Toujours dégradable : tout effet respecte prefers-reduced-motion.
   Échelle technique : CSS d'abord ; le JS (empire-motion.js) ne fait que
   piloter des variables (--em-mx/--em-my, --em-p) et poser des classes d'état.
   ========================================================================== */

:root{
  /* accent hérité du site (maison-saywa/app) ; fallback wasabi doux si absent */
  --em-accent: var(--accent, #e9f056);
  --em-ink:    var(--ink, #f4eef2);
  --em-surface:var(--surface, #241726);
  /* réglages globaux (surchargables par site via style inline sur :root) */
  --em-speed: 1;            /* multiplicateur de durée (0.6 = plus vif) */
  --em-depth: 1;            /* multiplicateur d'amplitude (parallax/tilt/float) */
  --em-ease: cubic-bezier(.22,.61,.36,1);
  --em-ease-out: cubic-bezier(.16,1,.3,1);
  /* variables pilotées par JS (curseur normalisé -0.5..0.5, progression 0..1) */
  --em-mx: 0; --em-my: 0;   /* position curseur relative au viewport */
  --em-p: 0;                /* progression générique (scroll/inview) */
}

/* Respect ABSOLU de l'accessibilité : on neutralise tout mouvement non essentiel. */
@media (prefers-reduced-motion: reduce){
  .em-reveal,[data-em-reveal]{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
  .em-float,[data-em-float],.em-particles,.em-world::before,.em-world::after{animation:none !important}
  [data-em-magnetic],[data-em-cursor],[data-em-tilt]{transform:none !important}
  *{scroll-behavior:auto !important}
}

/* --------------------------------------------------------------------------
   1. REVEAL (apparition au scroll), JS ajoute .is-in quand visible
   -------------------------------------------------------------------------- */
.em-reveal,[data-em-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity calc(.62s * var(--em-speed)) var(--em-ease-out),
             transform calc(.62s * var(--em-speed)) var(--em-ease-out),
             filter calc(.62s * var(--em-speed)) var(--em-ease-out);
  will-change:opacity,transform;
}
[data-em-reveal="fade"]{transform:none}
[data-em-reveal="left"]{transform:translateX(-26px)}
[data-em-reveal="right"]{transform:translateX(26px)}
[data-em-reveal="scale"]{transform:scale(.94)}
[data-em-reveal="blur"]{filter:blur(10px)}
.em-reveal.is-in,[data-em-reveal].is-in{opacity:1;transform:none;filter:none}
/* stagger : delai auto posé par JS via --em-i (index) */
[data-em-stagger] > *{transition-delay:calc(var(--em-i,0) * 70ms * var(--em-speed))}

/* --------------------------------------------------------------------------
   2. HOVER élégants (pur CSS)
   -------------------------------------------------------------------------- */
.em-hover-lift{transition:transform .28s var(--em-ease),box-shadow .28s var(--em-ease)}
.em-hover-lift:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px color-mix(in srgb,var(--em-accent) 40%,transparent),0 2px 6px rgba(0,0,0,.3)}
.em-hover-glow{transition:box-shadow .3s var(--em-ease),border-color .3s}
.em-hover-glow:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--em-accent) 40%,transparent),0 0 40px -6px color-mix(in srgb,var(--em-accent) 45%,transparent)}
/* soulignement qui se dessine */
.em-underline{position:relative}
.em-underline::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--em-accent);transform:scaleX(0);transform-origin:left;transition:transform .34s var(--em-ease-out)}
.em-underline:hover::after{transform:scaleX(1)}
/* bordure qui se trace au survol */
.em-border-draw{position:relative;isolation:isolate}
.em-border-draw::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(120deg,var(--em-accent),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.em-border-draw:hover::before{opacity:1}

/* --------------------------------------------------------------------------
   3. MICRO-INTERACTIONS (feedback)
   -------------------------------------------------------------------------- */
.em-press{transition:transform .12s var(--em-ease)}
.em-press:active{transform:scale(.96)}
/* balayage lumineux (sheen), au survol du parent [data-em-sheen] */
[data-em-sheen]{position:relative;overflow:hidden}
[data-em-sheen]::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 34%,color-mix(in srgb,#fff 16%,transparent) 48%,color-mix(in srgb,var(--em-accent) 12%,transparent) 53%,transparent 66%);transform:translateX(-135%);transition:transform .9s var(--em-ease)}
[data-em-sheen]:hover::after{transform:translateX(135%)}
/* ripple (posé par JS : span.em-ripple) */
.em-ripple{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(0);background:color-mix(in srgb,var(--em-accent) 35%,transparent);animation:em-ripple .6s var(--em-ease-out) forwards}
@keyframes em-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* --------------------------------------------------------------------------
   4. MAGNÉTIQUE + CURSEUR (JS pose --em-tx/--em-ty en px)
   -------------------------------------------------------------------------- */
[data-em-magnetic]{transition:transform .25s var(--em-ease-out);transform:translate(var(--em-tx,0),var(--em-ty,0))}
[data-em-cursor]{transition:transform .5s var(--em-ease-out);transform:translate(calc(var(--em-mx) * var(--em-cur,18px) * var(--em-depth)),calc(var(--em-my) * var(--em-cur,18px) * var(--em-depth)))}

/* --------------------------------------------------------------------------
   5. CARTES FLOTTANTES + TILT 3D (JS pose --em-rx/--em-ry deg + glare)
   -------------------------------------------------------------------------- */
.em-float,[data-em-float]{animation:em-float calc(7s / var(--em-speed)) ease-in-out infinite}
@keyframes em-float{50%{transform:translateY(calc(-12px * var(--em-depth)))}}
[data-em-tilt]{transform-style:preserve-3d;transition:transform .2s var(--em-ease-out);transform:perspective(900px) rotateX(var(--em-rx,0)) rotateY(var(--em-ry,0))}
[data-em-tilt] .em-tilt-layer{transform:translateZ(40px)}
[data-em-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--em-glare,0);background:radial-gradient(circle at var(--em-gx,50%) var(--em-gy,50%),color-mix(in srgb,#fff 55%,transparent),transparent 45%);transition:opacity .2s}

/* --------------------------------------------------------------------------
   6. PARALLAX + SCROLL-DRIVEN (JS pose --em-p 0..1, ou scroll-timeline natif)
   -------------------------------------------------------------------------- */
[data-em-parallax]{transform:translateY(calc((var(--em-p) - .5) * var(--em-par,60px) * var(--em-depth)));will-change:transform}
@supports (animation-timeline: view()){
  .em-scroll-fade{animation:em-sfade linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  @keyframes em-sfade{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}

/* --------------------------------------------------------------------------
   7. GLOW / AURA + GRADIENTS DYNAMIQUES
   -------------------------------------------------------------------------- */
.em-glow{position:relative}
.em-glow::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:radial-gradient(60% 120% at 50% 0%,color-mix(in srgb,var(--em-accent) 40%,transparent),transparent 70%);opacity:.7;filter:blur(14px)}
.em-gradient-anim{background-size:200% 200%;animation:em-grad calc(14s / var(--em-speed)) ease infinite}
@keyframes em-grad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* texte à remplissage dégradé animé */
.em-gradient-text{background:linear-gradient(100deg,var(--em-accent),color-mix(in srgb,var(--em-accent) 40%,var(--em-ink)),var(--em-accent));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:em-grad calc(8s / var(--em-speed)) linear infinite}

/* --------------------------------------------------------------------------
   8. GLASS / BLUR animés + PROFONDEUR
   -------------------------------------------------------------------------- */
.em-glass{background:color-mix(in srgb,var(--em-surface) 55%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid color-mix(in srgb,#fff 10%,transparent);transition:backdrop-filter .4s,background .4s}
.em-glass:hover{backdrop-filter:blur(20px) saturate(1.35);-webkit-backdrop-filter:blur(20px) saturate(1.35)}
.em-depth{transform-style:preserve-3d}
.em-depth-1{transform:translateZ(0)}
.em-depth-2{transform:translateZ(30px)}
.em-depth-3{transform:translateZ(60px)}

/* --------------------------------------------------------------------------
   9. GRILLES INTERACTIVES (spotlight qui suit le curseur, JS pose --em-mx/my en px locaux)
   -------------------------------------------------------------------------- */
[data-em-grid]{position:relative}
[data-em-grid]::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .3s;background:radial-gradient(200px circle at var(--em-lx,50%) var(--em-ly,50%),color-mix(in srgb,var(--em-accent) 16%,transparent),transparent 60%)}
[data-em-grid]:hover::before{opacity:1}

/* --------------------------------------------------------------------------
   10. TRANSITIONS DE PAGES (View Transitions API, progressif)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:em-vt-out .28s var(--em-ease) both}
  ::view-transition-new(root){animation:em-vt-in .34s var(--em-ease-out) both}
  @keyframes em-vt-out{to{opacity:0}}
  @keyframes em-vt-in{from{opacity:0;transform:translateY(8px)}}
}

/* --------------------------------------------------------------------------
   11. PARTICULES / BACKGROUNDS animés, conteneur (canvas ou pseudo)
   -------------------------------------------------------------------------- */
.em-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.em-particles canvas{display:block;width:100%;height:100%}

/* ==========================================================================
   VISUAL WORLDS, fonds d'ambiance prêts à l'emploi (data-em-world="…")
   Chaque World = fond animé + humeur, adapté à --em-accent du site.
   Se place sur un conteneur en position:fixed/absolute z-index derrière le contenu.
   ========================================================================== */
[data-em-world]{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
[data-em-world] + *{position:relative;z-index:1}

/* AURA, glows chauds/froids qui dérivent (défaut premium sombre) */
[data-em-world="aura"]::before,[data-em-world="aura"]::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen}
[data-em-world="aura"]::before{width:60vw;height:60vw;left:-10vw;top:-16vw;background:radial-gradient(circle,color-mix(in srgb,var(--em-accent) 16%,transparent),transparent 66%);animation:em-drift-a calc(26s / var(--em-speed)) var(--em-ease) infinite alternate}
[data-em-world="aura"]::after{width:52vw;height:52vw;right:-12vw;top:26vh;background:radial-gradient(circle,color-mix(in srgb,var(--em-accent) 20%,transparent),transparent 64%);animation:em-drift-b calc(34s / var(--em-speed)) var(--em-ease) infinite alternate}
@keyframes em-drift-a{to{transform:translate(8vw,6vw) scale(1.18)}}
@keyframes em-drift-b{to{transform:translate(-7vw,-5vw) scale(1.14)}}

/* FLUID, dégradé conique/liquide lent */
[data-em-world="fluid"]::before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 0deg at 50% 50%,color-mix(in srgb,var(--em-accent) 22%,transparent),transparent 30%,color-mix(in srgb,var(--em-accent) 16%,transparent) 60%,transparent 85%,color-mix(in srgb,var(--em-accent) 22%,transparent));filter:blur(70px);animation:em-spin calc(40s / var(--em-speed)) linear infinite}
@keyframes em-spin{to{transform:rotate(360deg)}}

/* ORBIT, anneaux concentriques qui tournent */
[data-em-world="orbit"]::before,[data-em-world="orbit"]::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid color-mix(in srgb,var(--em-accent) 18%,transparent);transform:translate(-50%,-50%)}
[data-em-world="orbit"]::before{width:60vmin;height:60vmin;animation:em-spin calc(60s / var(--em-speed)) linear infinite}
[data-em-world="orbit"]::after{width:100vmin;height:100vmin;border-style:dashed;opacity:.5;animation:em-spin calc(90s / var(--em-speed)) linear infinite reverse}

/* GLASS, panneaux de verre flottants flous */
[data-em-world="glass"]{background:radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--em-accent) 10%,transparent),transparent 60%)}
[data-em-world="glass"]::before{content:"";position:absolute;inset:0;backdrop-filter:blur(2px);background:repeating-linear-gradient(115deg,transparent 0 60px,color-mix(in srgb,#fff 3%,transparent) 60px 61px)}

/* GRID, grille en perspective qui défile */
[data-em-world="grid"]::before{content:"";position:absolute;inset:-50%;background:linear-gradient(color-mix(in srgb,var(--em-accent) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--em-accent) 14%,transparent) 1px,transparent 1px);background-size:48px 48px;transform:perspective(500px) rotateX(60deg);mask-image:linear-gradient(to bottom,transparent,#000 40%,transparent);animation:em-grid-move calc(20s / var(--em-speed)) linear infinite}
@keyframes em-grid-move{to{background-position:0 48px}}

/* ORGANIC, blobs qui morphent lentement */
[data-em-world="organic"]::before{content:"";position:absolute;width:70vmin;height:70vmin;left:20%;top:15%;background:color-mix(in srgb,var(--em-accent) 22%,transparent);filter:blur(60px);border-radius:42% 58% 63% 37%/42% 42% 58% 58%;animation:em-morph calc(18s / var(--em-speed)) ease-in-out infinite}
@keyframes em-morph{50%{border-radius:58% 42% 37% 63%/58% 58% 42% 42%;transform:translate(6vw,4vh) scale(1.1)}}

/* DIGITAL, pluie de points / scanlines discrètes */
[data-em-world="digital"]::before{content:"";position:absolute;inset:0;background:radial-gradient(color-mix(in srgb,var(--em-accent) 30%,transparent) 1px,transparent 1.5px);background-size:26px 26px;opacity:.35;mask-image:linear-gradient(to bottom,#000,transparent);animation:em-grid-move calc(14s / var(--em-speed)) linear infinite}

/* DEPTH, couches parallax de profondeur (JS enrichit via --em-p) */
[data-em-world="depth"]::before,[data-em-world="depth"]::after{content:"";position:absolute;border-radius:50%;filter:blur(80px)}
[data-em-world="depth"]::before{width:50vw;height:50vw;left:10vw;top:-10vw;background:radial-gradient(circle,color-mix(in srgb,var(--em-accent) 18%,transparent),transparent 65%);transform:translateY(calc(var(--em-p,0) * -60px))}
[data-em-world="depth"]::after{width:40vw;height:40vw;right:6vw;bottom:-12vw;background:radial-gradient(circle,color-mix(in srgb,var(--em-accent) 20%,transparent),transparent 62%);transform:translateY(calc(var(--em-p,0) * 40px))}

/* 3D, placeholder ; le vrai WebGL est monté par empire-motion.js (lazy) dans .em-particles */
[data-em-world="3d"]{background:radial-gradient(80% 60% at 50% 40%,color-mix(in srgb,var(--em-accent) 10%,transparent),transparent 70%)}