/* Salwane, animations. Sobres et dignes. */

/* Apparition au scroll (activée uniquement si JS present, via html.anim-ready) */
html.anim-ready .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
html.anim-ready .reveal.is-visible{opacity:1;transform:none}

/* Logo anime: respiration douce + onde qui se propage (la compassion qui essaime) */
.logo .mark{position:relative;animation:salwane-breathe 4.6s ease-in-out infinite}
.logo .mark::before,
.logo .mark::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--gold-soft, #C9A86A);
  opacity:0;pointer-events:none;
}
.logo .mark::before{animation:salwane-ripple 3.8s ease-out infinite}
.logo .mark::after{animation:salwane-ripple 3.8s ease-out infinite 1.9s}
@keyframes salwane-breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(184,146,90,0)}
  50%{box-shadow:0 0 16px 1px rgba(184,146,90,.40)}
}
@keyframes salwane-ripple{
  0%{transform:scale(1);opacity:.55}
  70%{opacity:.12}
  100%{transform:scale(2.2);opacity:0}
}

/* Hero, derive lente de la lumiere */
.hero:after, .cover:after, .head{will-change:transform}
.hero:after{animation:salwane-drift 18s ease-in-out infinite alternate}
@keyframes salwane-drift{from{transform:translate(0,0)}to{transform:translate(-34px,22px)}}

/* Barres de progression, remplissage anime (collecte + suivi) */
.bar > div{transition:width 1.5s cubic-bezier(.2,.7,.2,1)}

/* Boutons, micro-elevation */
.btn{transition:transform .2s ease, background .2s ease, box-shadow .2s ease}
.btn-gold:hover{box-shadow:0 8px 22px -8px rgba(184,146,90,.7)}

/* Timeline de suivi, trait qui se revele */
html.anim-ready .tl-item{opacity:0;transform:translateX(-14px);transition:opacity .7s ease, transform .7s ease}
html.anim-ready .tl-item.is-visible{opacity:1;transform:none}
.tl-dot.live{animation:salwane-pulse 1.8s ease-in-out infinite}
@keyframes salwane-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(184,146,90,.55)}
  50%{box-shadow:0 0 0 8px rgba(184,146,90,0)}
}

/* Accessibilite, respect du reglage systeme */
@media (prefers-reduced-motion: reduce){
  html.anim-ready .reveal,
  html.anim-ready .tl-item{opacity:1 !important;transform:none !important;transition:none !important}
  .logo .mark, .logo .mark::before, .logo .mark::after,
  .hero:after, .tl-dot.live{animation:none !important}
  .bar > div{transition:none !important}
}

/* Focus visible au clavier (accessibilité) */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, .chip:focus-visible, [role="button"]:focus-visible{
  outline:3px solid var(--gold-soft, #C9A86A);
  outline-offset:2px;
  border-radius:8px;
}

/* Eyebrow plus foncé pour le contraste AA sur fond clair
   (les eyebrows sur fond sombre gardent leur couleur via style inline) */
.eyebrow{color:#8a6a2e}

/* Chips de montant rendus en <button> */
.chip{font-family:inherit;-webkit-appearance:none;appearance:none}

/* Sélecteur de langue */
.lang-select{font-family:inherit;font-size:13px;font-weight:600;color:var(--forest);background:transparent;border:1.5px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer}
.lang-select:hover{border-color:var(--forest)}
@media(max-width:560px){.lang-select{font-size:12px;padding:6px 10px}}

/* Sens d'écriture droite-à-gauche (arabe, urdu) */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .hero-inner,
html[dir="rtl"] .sec-head,
html[dir="rtl"] .cover .wrap,
html[dir="rtl"] .head .wrap{text-align:right}
html[dir="rtl"] .hero-trust,
html[dir="rtl"] .hero-cta,
html[dir="rtl"] .meta{flex-direction:row-reverse}
html[dir="rtl"] .step,
html[dir="rtl"] .rite,
html[dir="rtl"] .tip,
html[dir="rtl"] .item{flex-direction:row-reverse;text-align:right}
html[dir="rtl"] .tl-item{border-left:none;border-right:2px solid var(--line);padding:0 38px 26px 0;margin-right:8px;margin-left:0}
html[dir="rtl"] .tl-dot{left:auto;right:-11px}