/* ============================================================
   grace-fx.css — couche d'animation et d'ambiance (additive)
   Aucune règle ne masque un contenu sans que grace-fx.js
   ait d'abord posé html[data-fx="on"] : sans JS, rien ne change.
   ============================================================ */

html[data-fx="on"]{
  --fx-ease:cubic-bezier(.16,.84,.24,1);
  --fx-bleed:-44px;
  background:var(--paper);
}
html[data-fx="on"] body{background:transparent}

/* ---------- 1. Ambiance : derrière le texte (z-index négatif) ---------- */
.fx-amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.fx-aurore{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:multiply;will-change:transform}
.fx-aurore.g1{width:52vw;height:52vw;left:-12vw;top:-14vw;background:radial-gradient(circle at 50% 50%,rgba(234,216,181,.85),rgba(234,216,181,0) 68%);animation:fxDrift1 46s ease-in-out infinite}
.fx-aurore.g2{width:44vw;height:44vw;right:-10vw;top:22vh;background:radial-gradient(circle at 50% 50%,rgba(226,230,238,.9),rgba(226,230,238,0) 70%);animation:fxDrift2 61s ease-in-out infinite}
.fx-aurore.g3{width:38vw;height:38vw;left:28vw;bottom:-14vw;background:radial-gradient(circle at 50% 50%,rgba(243,221,213,.8),rgba(243,221,213,0) 70%);animation:fxDrift3 54s ease-in-out infinite}
@keyframes fxDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,7vh,0) scale(1.14)}}
@keyframes fxDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-7vw,-6vh,0) scale(.92)}}
@keyframes fxDrift3{0%,100%{transform:translate3d(0,0,0) scale(.96)}50%{transform:translate3d(-5vw,-8vh,0) scale(1.12)}}

/* poussière d'or */
.fx-dust{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.75}

/* halo doux qui suit le pointeur : la page semble éclairée à la main */
.fx-light{position:absolute;left:0;top:0;width:78vmax;height:78vmax;margin:-39vmax 0 0 -39vmax;
  background:radial-gradient(circle at 50% 50%,rgba(255,249,232,.92),rgba(253,242,219,.5) 32%,rgba(248,245,237,0) 66%);
  mix-blend-mode:screen;opacity:.9;will-change:transform}

/* ---------- 2. Grain de papier, au-dessus (très discret) ---------- */
.fx-grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.34;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:fxGrain 1.1s steps(5) infinite}
@keyframes fxGrain{
  0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-6px,4px,0)}40%{transform:translate3d(5px,-7px,0)}
  60%{transform:translate3d(-8px,-3px,0)}80%{transform:translate3d(7px,6px,0)}100%{transform:translate3d(0,0,0)}}

/* ---------- 3. Fil de lecture (progression) ---------- */
.fx-thread{position:fixed;left:0;top:0;height:2px;z-index:65;pointer-events:none;width:0;
  background:linear-gradient(90deg,rgba(189,123,32,0),var(--gold) 45%,#e8bd6d);
  box-shadow:0 0 14px rgba(189,123,32,.55)}

/* ---------- 4. Apparitions au défilement ---------- */
html[data-fx="on"] .fx-rise{opacity:0;transform:translate3d(0,26px,0);filter:blur(8px);
  transition:opacity .9s var(--fx-ease),transform 1s var(--fx-ease),filter .9s ease}
html[data-fx="on"] .fx-rise.fx-on{opacity:1;transform:none;filter:none}

html[data-fx="on"] .fx-veil{opacity:0;clip-path:inset(0 0 100% 0);
  transition:opacity .75s ease,clip-path 1.05s var(--fx-ease),transform .5s var(--fx-ease),box-shadow .4s ease,border-color .3s ease}
html[data-fx="on"] .fx-veil.fx-on{opacity:1;clip-path:inset(var(--fx-bleed) var(--fx-bleed) var(--fx-bleed) var(--fx-bleed))}

/* titres : révélation par masque, mot à mot */
html[data-fx="on"] .fx-split .fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
html[data-fx="on"] .fx-split .fx-wi{display:inline-block;transform:translate3d(0,112%,0) rotate(2.5deg);opacity:0;
  transition:transform 1.05s var(--fx-ease),opacity .7s ease}
html[data-fx="on"] .fx-split.fx-on .fx-wi{transform:none;opacity:1}

/* règle d'or qui se trace sous les titres d'étape */
html[data-fx="on"] .chapter h2.fx-split:after,
html[data-fx="on"] .section-head h2.fx-split:after,
html[data-fx="on"] .start-guide h2.fx-split:after{
  content:"";display:block;height:1px;width:min(260px,44%);margin-top:.46em;
  background:linear-gradient(90deg,var(--gold),rgba(189,123,32,0));
  transform:scaleX(0);transform-origin:left center;transition:transform 1.3s .2s var(--fx-ease)}
html[data-fx="on"] .chapter h2.fx-split.fx-on:after,
html[data-fx="on"] .section-head h2.fx-split.fx-on:after,
html[data-fx="on"] .start-guide h2.fx-split.fx-on:after{transform:none}

/* ---------- 5. Chiffre fantôme de chaque étape (parallaxe) ---------- */
html[data-fx="on"] .chapter{isolation:isolate}
.fx-ghost{position:absolute;z-index:-1;right:-.04em;top:-.18em;pointer-events:none;user-select:none;
  font:400 clamp(9rem,21vw,19rem)/1 var(--serif);color:transparent;
  -webkit-text-stroke:1px rgba(189,123,32,.17);opacity:0;
  transition:opacity 1.4s ease;will-change:transform}
.fx-ghost.fx-on{opacity:1}

/* ---------- 6. Orbite du titre : rotation lente, halo vivant ---------- */
html[data-fx="on"] .ring{will-change:transform}
html[data-fx="on"] .ring.one{animation:fxRing 82s linear infinite}
html[data-fx="on"] .ring.two{animation:fxRing 118s linear infinite reverse}
html[data-fx="on"] .ring.three{animation:fxPulse 11s ease-in-out infinite}
@keyframes fxRing{to{transform:rotate(calc(var(--r) + 360deg))}}
@keyframes fxPulse{0%,100%{transform:rotate(var(--r)) scale(1);box-shadow:0 0 0 24px rgba(234,216,181,.25)}
  50%{transform:rotate(var(--r)) scale(1.045);box-shadow:0 0 0 40px rgba(234,216,181,.16)}}
.fx-halo{position:absolute;width:76%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(189,123,32,.42),rgba(37,50,73,.28) 28%,rgba(159,63,45,.3) 55%,rgba(234,216,181,.5) 78%,rgba(189,123,32,.42));
  filter:blur(26px);opacity:.5;mix-blend-mode:multiply;animation:fxSpin 38s linear infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}
html[data-fx="on"] .core{animation:fxBreathe 13s ease-in-out infinite}
@keyframes fxBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
html[data-fx="on"] .orbit-label{animation:fxFloat 9s ease-in-out infinite}
html[data-fx="on"] .orbit-label.b{animation-duration:11.5s;animation-delay:-3s}
html[data-fx="on"] .orbit-label.c{animation-duration:13s;animation-delay:-6s}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- 7. Or liquide sur les mots anciens ---------- */
html[data-fx="on"] h1 em,
html[data-fx="on"] .word code,
html[data-fx="on"] .bilan h3{
  background:linear-gradient(100deg,#a86a15 0%,#bd7b20 28%,#f0cd86 48%,#bd7b20 68%,#8f5c15 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:fxSheen 9s linear infinite}
html[data-fx="on"] .bilan h3{background-image:linear-gradient(100deg,#17362f 0%,#17362f 34%,#bd7b20 50%,#17362f 66%,#17362f 100%);animation-duration:14s}
@keyframes fxSheen{0%{background-position:0% 0}100%{background-position:280% 0}}
html[data-fx="on"] .lex .ow,html[data-fx="on"] .orig .w{transition:text-shadow .3s ease,transform .3s var(--fx-ease)}
html[data-fx="on"] .lex:hover .ow{text-shadow:0 0 22px rgba(189,123,32,.45);transform:translateY(-2px)}

/* ---------- 8. Cartes : inclinaison douce + reflet suivant le pointeur ---------- */
html[data-fx="on"] .fx-card{position:relative;transform-style:preserve-3d;will-change:transform}
html[data-fx="on"] .fx-card:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,247,226,.85),rgba(255,247,226,0) 62%)}
html[data-fx="on"] .fx-card.fx-hot:before{opacity:1}
html[data-fx="on"] .fx-card.fx-hot{box-shadow:0 26px 60px rgba(32,42,37,.16);border-color:var(--gold);z-index:3}

/* ---------- 9. Références : soulignement qui se remplit ---------- */
html[data-fx="on"] .vref:not(.chip){
  background:linear-gradient(var(--gold-soft),var(--gold-soft)) left center/0% 100% no-repeat;
  transition:background-size .32s var(--fx-ease),border-color .2s ease,color .2s ease}
html[data-fx="on"] .vref:not(.chip):hover,
html[data-fx="on"] .vref:not(.chip):focus-visible{background-size:100% 100%}
html[data-fx="on"] .vref.chip{overflow:hidden;position:relative;transition:transform .25s var(--fx-ease),border-color .2s,background .2s}
html[data-fx="on"] .vref.chip:hover{transform:translateY(-2px)}
html[data-fx="on"] .vref.fx-ping{animation:fxPing .6s ease-out}
@keyframes fxPing{from{box-shadow:0 0 0 0 rgba(189,123,32,.5)}to{box-shadow:0 0 0 14px rgba(189,123,32,0)}}

/* ---------- 10. Boutons et bandeaux ---------- */
html[data-fx="on"] .primary,html[data-fx="on"] .bilan-link{position:relative;overflow:hidden;isolation:isolate}
html[data-fx="on"] .primary:after,html[data-fx="on"] .bilan-link:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,240,205,.5) 48%,transparent 62%);
  transform:translateX(-120%);transition:transform .75s var(--fx-ease)}
html[data-fx="on"] .primary:hover:after,html[data-fx="on"] .bilan-link:hover:after{transform:translateX(120%)}
html[data-fx="on"] .summary{position:relative;overflow:hidden}
html[data-fx="on"] .summary:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(234,216,181,.14) 50%,transparent 62%);
  animation:fxBand 13s linear infinite}
@keyframes fxBand{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
html[data-fx="on"] .stat strong{display:block;transition:transform .5s var(--fx-ease),color .3s ease}
html[data-fx="on"] .stat:hover strong{transform:translateY(-3px);color:var(--gold-soft)}

/* ---------- 11. Thèse, encadrés, bilan ---------- */
html[data-fx="on"] .thesis,html[data-fx="on"] .essential-verse{position:relative;overflow:hidden}
html[data-fx="on"] .thesis.fx-veil,html[data-fx="on"] .essential-verse.fx-veil{border-left-color:transparent}
html[data-fx="on"] .thesis.fx-veil:before,html[data-fx="on"] .essential-verse.fx-veil:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold);
  transform:scaleY(0);transform-origin:top;transition:transform 1s .15s var(--fx-ease)}
html[data-fx="on"] .essential-verse.fx-veil:before{width:3px}
html[data-fx="on"] .thesis.fx-veil.fx-on:before,html[data-fx="on"] .essential-verse.fx-veil.fx-on:before{transform:none}
html[data-fx="on"] .bilan{position:relative;overflow:hidden;isolation:isolate}
html[data-fx="on"] .bilan:before{content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;opacity:.2;
  background:conic-gradient(from 0deg,rgba(189,123,32,.5),transparent 30%,rgba(159,63,45,.35) 58%,transparent 80%,rgba(189,123,32,.5));
  animation:fxSpin 44s linear infinite}
html[data-fx="on"] .bilan li:before{transition:transform .6s var(--fx-ease),background .3s,color .3s}
html[data-fx="on"] .bilan li:hover:before{transform:scale(1.12) rotate(-6deg);background:var(--gold);color:#fff}

/* ---------- 12. Frise historique : le fil se trace ---------- */
html[data-fx="on"] .timeline:before{transform:scaleY(0);transform-origin:top;transition:transform 1.6s var(--fx-ease)}
html[data-fx="on"] .timeline.fx-on:before{transform:none}
html[data-fx="on"] .moment:before{transition:box-shadow .4s ease,transform .4s var(--fx-ease)}
html[data-fx="on"] .moment:hover:before{transform:scale(1.35);box-shadow:0 0 0 6px rgba(234,216,181,.5)}

/* ---------- 13. Barre pilote : étape active qui respire ---------- */
html[data-fx="on"] .etapes button{transition:transform .25s var(--fx-ease),background .25s,color .25s,border-color .25s}
html[data-fx="on"] .etapes button:hover{transform:translateY(-2px)}
html[data-fx="on"] .etapes button[aria-current="step"]{animation:fxStep 3.4s ease-in-out infinite}
@keyframes fxStep{0%,100%{box-shadow:0 0 0 0 rgba(189,123,32,.42)}55%{box-shadow:0 0 0 9px rgba(189,123,32,0)}}
html[data-fx="on"] .pilote{transition:padding .3s ease,box-shadow .3s ease,backdrop-filter .3s}
html[data-fx="on"] .pilote.compact{background:rgba(248,245,237,.86);backdrop-filter:blur(10px) saturate(1.1)}

/* ---------- 14. Panneau de lecture : les versets entrent en cascade ---------- */
html[data-fx="on"] body.rp-open .rp-body>*{animation:fxUp .6s both var(--fx-ease)}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(1){animation-delay:.06s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(2){animation-delay:.11s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(3){animation-delay:.16s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(4){animation-delay:.21s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(5){animation-delay:.26s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(6){animation-delay:.31s}
html[data-fx="on"] body.rp-open .rp-body>*:nth-child(n+7){animation-delay:.36s}
@keyframes fxUp{from{opacity:0;transform:translate3d(0,16px,0);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
html[data-fx="on"] .vs mark,html[data-fx="on"] .cmp p mark,html[data-fx="on"] .bridge-card .orig-line mark{
  background:linear-gradient(var(--gold-soft),var(--gold-soft)) left center/0% 100% no-repeat;animation:fxMark 1.1s .3s both var(--fx-ease)}
@keyframes fxMark{to{background-size:100% 100%}}
html[data-fx="on"] .rp{will-change:transform}
html[data-fx="on"] .scrim{backdrop-filter:blur(3px) saturate(.9)}

/* ---------- 15. Détails dépliants ---------- */
html[data-fx="on"] details[open]>*:not(summary){animation:fxUp .45s both var(--fx-ease)}
html[data-fx="on"] .check summary:after,html[data-fx="on"] .faq summary:after{transition:transform .3s var(--fx-ease);display:inline-block}
html[data-fx="on"] .check details[open] summary:after,html[data-fx="on"] .faq details[open] summary:after{transform:rotate(180deg)}

/* ---------- 16. Occurrences, sources, lexique : glissement à l'entrée ---------- */
html[data-fx="on"] .occ{transition:transform .3s var(--fx-ease),border-color .25s,background .25s,box-shadow .3s}
html[data-fx="on"] .occ:hover{transform:translateX(5px)}
html[data-fx="on"] .occ:after{transition:transform .3s var(--fx-ease),opacity .25s}
html[data-fx="on"] .occ:hover:after{transform:translateX(5px);opacity:1}
html[data-fx="on"] .source-item{transition:background .3s ease}
html[data-fx="on"] .source-item:hover{background:rgba(255,253,248,.7)}

/* ---------- Respect des préférences et impression ---------- */
@media(prefers-reduced-motion:reduce){
  .fx-amb,.fx-grain,.fx-thread{display:none}
  html[data-fx="on"] .fx-rise,html[data-fx="on"] .fx-veil{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  html[data-fx="on"] .fx-split .fx-wi{opacity:1!important;transform:none!important}
}
@media print{
  .fx-amb,.fx-grain,.fx-thread,.fx-ghost,.fx-halo{display:none!important}
  html[data-fx="on"] .fx-rise,html[data-fx="on"] .fx-veil{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  html[data-fx="on"] .fx-split .fx-wi{opacity:1!important;transform:none!important}
  html[data-fx="on"] h1 em,html[data-fx="on"] .word code,html[data-fx="on"] .bilan h3{-webkit-text-fill-color:currentColor;background:none;animation:none}
}