/* Slotia — site public : registre "refined / premium" 2026 (épuré, calme, produit en vedette).
   Palette emerald/slate. Tout en transform/opacity (GPU). Respecte prefers-reduced-motion. */

/* ---------- Auras douces (dégradés calmes derrière hero / sections) ---------- */
.hero-aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-aura::before, .hero-aura::after {
  content: ""; position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .5; will-change: transform;
}
.hero-aura::before { width: 46rem; height: 46rem; top: -18rem; left: 50%; transform: translateX(-50%);
  background: radial-gradient(closest-side, #6ee7b7, #99f6e4 55%, transparent 75%);
  animation: auraDrift 26s ease-in-out infinite; }
.hero-aura::after { width: 30rem; height: 30rem; top: -6rem; right: 8%;
  background: radial-gradient(closest-side, #a7f3d0, transparent 70%);
  animation: auraDrift 32s ease-in-out infinite reverse; }
@keyframes auraDrift { 0%,100%{transform:translate(-50%,0) scale(1)} 50%{transform:translate(-50%,3rem) scale(1.08)} }

/* Glow doux derrière le mockup produit */
.mockup-glow { position: absolute; inset: -8%; z-index: 0; border-radius: 2rem; filter: blur(48px); opacity: .55;
  background: radial-gradient(60% 50% at 50% 30%, #6ee7b7, transparent 70%); }

/* ---------- Carte épurée (registre refined) ---------- */
.card-soft {
  background: #fff; border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.10);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.card-soft:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 28px 50px -22px rgba(16,185,129,.28); }

/* ---------- Glass (réservé aux pills flottantes sur le mockup) ---------- */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 16px 40px -18px rgba(2,44,34,.25);
}
.glass-dark { background: #0b1120; border: 1px solid rgba(255,255,255,.08); }

/* ---------- Texte dégradé (calme) ---------- */
.text-gradient {
  background: linear-gradient(100deg, #059669, #0d9488, #0891b2);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift { 0%,100%{background-position:0 0} 50%{background-position:100% 0} }

/* ---------- Reveal au scroll (sobre) ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"]{transition-delay:.07s} .reveal[data-delay="2"]{transition-delay:.14s} .reveal[data-delay="3"]{transition-delay:.21s} .reveal[data-delay="4"]{transition-delay:.28s}

/* ---------- Flottement léger ---------- */
.floaty { animation: floaty 7s ease-in-out infinite; will-change: transform; }
.floaty--slow { animation-duration: 10s; }
.floaty--rev { animation-direction: reverse; }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ---------- Bouton brillant ---------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); }
.btn-shine:hover::after { animation: shine 1.1s ease; }
@keyframes shine { to { left: 140%; } }

/* ---------- Marquee (bandeau logos/secteurs, discret) ---------- */
.marquee { overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display:inline-flex; gap:3rem; white-space:nowrap; animation: marquee 32s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-aura::before, .hero-aura::after, .text-gradient, .floaty, .marquee__track { animation: none !important; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}