/* Spectra Shop — motion (sobre) : apparition des sections/cartes + animation de succès. Aucune animation décorative permanente. Contenu jamais bloqué caché (fill:both). */ @media (prefers-reduced-motion: no-preference){ [data-reveal]{ animation:sxReveal .45s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--sx-delay, 0ms); } [data-reveal="left"]{ animation-name:sxRevealLeft; } [data-reveal="right"]{ animation-name:sxRevealRight; } } /* Apparition au scroll — armée seulement par JS (classe sur ) */ @media (prefers-reduced-motion: no-preference){ .sx-sr-armed .sx-sr{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); } .sx-sr-armed .sx-sr.sx-in{ opacity:1; transform:none; } .sx-sr-armed [data-reveal].sx-wait{ animation-play-state:paused; } } @keyframes sxReveal{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } @keyframes sxRevealLeft{ from{ opacity:0; transform:translateX(-16px); } to{ opacity:1; transform:none; } } @keyframes sxRevealRight{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:none; } } /* ── Succès connexion / inscription ───────────────────────────────────────── */ #sx-success-overlay{ position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:rgba(13,11,20,.8); backdrop-filter:blur(8px); } .sx-success-ring{ position:relative; width:104px; height:104px; } .sx-success-ring svg{ position:relative; width:104px; height:104px; } .sx-success-circle{ fill:none; stroke:var(--sx-primary, #7c3aed); stroke-width:3.5; stroke-linecap:round; } .sx-success-check{ fill:none; stroke:var(--sx-text, #f4f1fb); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; } .sx-success-text{ text-align:center; } .sx-success-text .t1{ font:700 17px/1.3 var(--sx-font, Poppins, sans-serif); color:var(--sx-text, #f4f1fb); letter-spacing:-.01em; } .sx-success-text .t2{ margin-top:5px; font:400 13px/1.3 var(--sx-font, Poppins, sans-serif); color:var(--sx-muted, #b4abc9); }