/* ============================================================
   Codex des Légendaires : animations
   Chargé après site.css. Tout est conditionné à html.anim, classe posée
   par js/animations.js uniquement si le visiteur n'a pas demandé de
   réduire les animations. Sans JavaScript, le site reste complet.
   ============================================================ */

/* ---------- apparition au défilement ---------- */
@keyframes rvIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
.anim .rv{opacity:0}
.anim .rv-in{animation:rvIn .75s cubic-bezier(.2,.7,.2,1) var(--d,0ms) backwards}

/* ---------- transition entre pages ---------- */
@keyframes pg{from{opacity:0}to{opacity:1}}
.anim #app.pg{animation:pg .4s ease both}

/* ---------- en-tête, barre de progression ---------- */
#sp{position:fixed;left:0;top:0;right:0;height:2px;z-index:90;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold2));box-shadow:0 0 10px rgba(201,169,110,.55);pointer-events:none}
.anim .top{transition:box-shadow .35s,border-color .35s}
.anim .top.sc{box-shadow:0 10px 34px rgba(0,0,0,.28);border-bottom-color:var(--line2)}
.anim .brand svg g:last-child{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.anim .brand:hover svg g:last-child{transform:translateY(-2px)}
.anim .brand svg{transition:filter .4s}
.anim .brand:hover svg{filter:drop-shadow(0 0 7px rgba(201,169,110,.55))}

/* ---------- accueil ---------- */
@keyframes shimmer{0%,55%{background-position:120% 0}100%{background-position:-20% 0}}
.anim .hero h1 em{color:var(--gold);background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 38%,var(--gold2) 50%,var(--gold) 62%,var(--gold) 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 7s ease-in-out infinite}
.hero #fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.anim .hero .w{position:relative;z-index:1}
.anim .cover{will-change:transform;transform:perspective(1100px) translate3d(0,var(--py,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.anim .cover::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(255,236,190,.2),transparent 55%);opacity:var(--glow,0);transition:opacity .45s;mix-blend-mode:screen}

/* ---------- cartes : inclinaison et reflet ---------- */
.anim .card,.anim .card:hover{transform:perspective(900px) translate3d(0,var(--ty,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .35s,box-shadow .35s}
.anim .card:hover{--ty:-4px}
.anim .card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(230,207,154,.15),transparent 60%);opacity:0;transition:opacity .3s}
.anim .card:hover::after{opacity:1}

/* ---------- frise ---------- */
.anim .tl-track::after{content:"";position:absolute;top:18px;left:calc(84px + 14px - 1px);width:2px;height:calc((100% - 36px) * var(--p,0));background:linear-gradient(180deg,var(--gold),var(--gold2));border-radius:2px;box-shadow:0 0 12px rgba(201,169,110,.45);pointer-events:none}
.anim .tn .dot{transition:transform .25s,background .4s,box-shadow .4s}
.anim .tn.on .dot{background:var(--acc);box-shadow:0 0 0 5px color-mix(in srgb,var(--acc) 22%,transparent)}

/* ---------- fiche ---------- */
.anim .fhero>img{transform:translate3d(0,var(--fy,0px),0) scale(1.1);will-change:transform}
.anim .lr.rv .bar i{transform:scaleX(0)}
.anim .bar i{transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .2s}
.anim .ring .fg{transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1),stroke .4s}
.anim .cb,.anim .num{position:relative}
.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.82)}60%{transform:scale(1.14)}100%{transform:scale(1)}}
.spk{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--gold2);box-shadow:0 0 8px var(--gold);pointer-events:none;z-index:5;animation:spk .75s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes spk{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.pan.full{animation:glow 1.8s ease 1}
.pan.full .ring .fg{stroke:var(--gold2)}
@keyframes glow{0%{box-shadow:0 0 0 0 rgba(201,169,110,0)}30%{box-shadow:0 0 0 6px rgba(201,169,110,.35),0 0 40px rgba(201,169,110,.35)}100%{box-shadow:0 0 0 0 rgba(201,169,110,0)}}

/* ---------- recherche ---------- */
@keyframes palIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes palBg{from{opacity:0}to{opacity:1}}
.anim .pal.on{animation:palBg .2s ease}
.anim .pal.on .pbox{animation:palIn .3s cubic-bezier(.2,.7,.2,1)}

@media print{.rv{opacity:1!important}#sp,#fx{display:none!important}}