/* ==========================================================================
   AURA FINANCES : système d'animations (site public, espace client, back-office)

   Principes
   - Seuls transform et opacity sont animés : aucune relayout, aucun débordement.
   - Révélation au défilement : les blocs ciblés partent légèrement décalés et
     apparaissent en cascade quand ils entrent à l'écran (public/js/ui.js).
     La classe .aura-js est posée dans le <head> : sans JavaScript, rien n'est masqué.
   - Filet de sécurité : si le script ne tourne pas, tout réapparaît après 2,5 s.
   - Les composants Livewire sont exclus de la révélation (leur DOM est recalculé).
   - prefers-reduced-motion : toutes les animations sont neutralisées.
   ========================================================================== */

:root {
  --motion-fast: 160ms;
  --motion-base: 420ms;
  --motion-slow: 900ms;
  --motion-stagger: 70ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --reveal-distance: 18px;
  --lift-distance: -4px;
  --gold-sheen: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.55) 45%, transparent 70%);
}

/* Transitions de page natives (Chrome, Edge, Safari récents) : fondu entre deux pages */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: aura-vt-out 180ms ease both; }
::view-transition-new(root) { animation: aura-vt-in 320ms var(--ease-out-expo) both; }
@keyframes aura-vt-out { to { opacity: 0; } }
@keyframes aura-vt-in { from { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------------------
   1. Révélation au défilement
   -------------------------------------------------------------------------- */
.aura-js :is(
    .hero-pills, .hero-title, .hero-description, .hero-cta-group, .hero-card-side,
    main section > .card, main .product-card, main .kpi-card, main .score-card,
    .contract-sign, .auth-card, .guarantee-row, .admin-product-grid > .card,
    .admin-content > .card, .admin-content > div > .card, .admin-guarantees > section,
    [data-reveal]
  ):not(:where([wire\:id] *, [wire\:id], [data-dash-reveal], [data-dash-reveal] *)):not(.is-revealed) {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  animation: aura-reveal-fallback 0s linear 2.5s forwards;
}

.aura-js .is-revealed {
  /* backwards (et non both) : une fois jouée, l'animation rend la main aux :hover */
  animation: aura-reveal var(--motion-base) var(--ease-out-expo) backwards;
  animation-delay: calc(var(--aura-i, 0) * var(--motion-stagger));
}

@keyframes aura-reveal {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
  to { opacity: 1; transform: none; }
}

@keyframes aura-reveal-fallback {
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   2. Héros de l'accueil : fond vivant, titre doré, carte flottante
   -------------------------------------------------------------------------- */
.hero-section { position: relative; isolation: isolate; overflow: hidden; }
.hero-section::before,
.hero-section::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  will-change: transform;
}
.hero-section::before {
  top: -22vmax;
  right: -14vmax;
  background: radial-gradient(circle, rgba(245, 181, 27, 0.55), transparent 65%);
  animation: aura-drift-a 18s ease-in-out infinite alternate;
}
.hero-section::after {
  bottom: -26vmax;
  left: -16vmax;
  background: radial-gradient(circle, rgba(8, 117, 209, 0.5), transparent 65%);
  animation: aura-drift-b 22s ease-in-out infinite alternate;
}
@keyframes aura-drift-a { to { transform: translate(-8vmax, 6vmax) scale(1.12); } }
@keyframes aura-drift-b { to { transform: translate(10vmax, -5vmax) scale(0.9); } }

.hero-title span,
.hero-title .text-gold {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold), var(--gold-dark));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aura-gold-flow 6s ease-in-out infinite;
}
@keyframes aura-gold-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-pill { animation: aura-pop var(--motion-base) var(--ease-spring) both; }
.hero-pill:nth-child(2) { animation-delay: 80ms; }
.hero-pill:nth-child(3) { animation-delay: 160ms; }
.hero-pill:nth-child(4) { animation-delay: 240ms; }
@keyframes aura-pop {
  from { opacity: 0; transform: scale(0.8) translateY(6px); }
  to { opacity: 1; transform: none; }
}

.hero-card-side.is-revealed { animation: aura-reveal var(--motion-base) var(--ease-out-expo) backwards, aura-float 7s ease-in-out 1s infinite; }
@keyframes aura-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* --------------------------------------------------------------------------
   3. Micro-interactions : cartes, boutons, onglets, navigation
   -------------------------------------------------------------------------- */
.product-card,
.kpi-card,
.score-card,
.admin-product-grid > .card,
.sim-product-tab,
.guarantee-row {
  transition: transform var(--motion-fast) var(--ease-out-expo), box-shadow var(--motion-fast) var(--ease-out-expo), border-color var(--motion-fast) ease;
}
.product-card:hover,
.kpi-card:hover,
.admin-product-grid > .card:hover {
  transform: translateY(var(--lift-distance));
  box-shadow: var(--shadow-lg);
}
.guarantee-row:hover { box-shadow: var(--shadow-md); }

.btn { position: relative; overflow: hidden; transition: transform var(--motion-fast) var(--ease-out-expo), box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease, filter var(--motion-fast) ease; }
.btn:active:not([disabled]) { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Reflet qui balaie les boutons dorés au survol */
.btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-sheen);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn-gold:hover::after { transition: transform 700ms var(--ease-out-expo); transform: translateX(120%); }

.nav-link,
.admin-nav-item,
.mobile-nav-item { transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out-expo); }
.admin-nav-item:hover { transform: translateX(3px); }
.mobile-nav-item:active { transform: scale(0.92); }
.mobile-nav-item.active .mobile-nav-icon { animation: aura-pop var(--motion-base) var(--ease-spring) both; }

/* En-tête qui se compacte au défilement */
.site-header { transition: box-shadow var(--motion-base) ease, background-color var(--motion-base) ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(3, 29, 59, 0.45); }
.site-header .brand-logo-img { transition: transform var(--motion-base) var(--ease-out-expo); transform-origin: left center; }
.site-header.is-scrolled .brand-logo-img { transform: scale(0.88); }

/* --------------------------------------------------------------------------
   4. Données vivantes : jauges, barres, montants qui changent
   -------------------------------------------------------------------------- */
.aura-progress-fill { transform-origin: left center; animation: aura-grow-x var(--motion-slow) var(--ease-out-expo) 200ms both; }
@keyframes aura-grow-x { from { transform: scaleX(0); } }

/* Montant recalculé (simulateur, formulaire) : petite impulsion pour signaler le changement */
.aura-bump { animation: aura-bump 520ms var(--ease-spring); }
@keyframes aura-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); color: var(--emerald); }
  100% { transform: scale(1); }
}

/* Contenu d'une nouvelle étape (formulaire de demande, Livewire) */
.aura-step-enter { animation: aura-step-in var(--motion-base) var(--ease-out-expo) both; }
@keyframes aura-step-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

.step-item.active .step-circle { animation: aura-ring 2.4s ease-out infinite; }
@keyframes aura-ring {
  0% { box-shadow: 0 0 0 0 rgba(245, 181, 27, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(245, 181, 27, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 181, 27, 0); }
}

/* Écrans de succès : l'icône « tombe » en place avec un rebond */
.aura-success-pop { animation: aura-success var(--motion-slow) var(--ease-spring) both; }
@keyframes aura-success {
  0% { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { transform: none; }
}

/* Pastilles de statut « en retard » : battement discret pour attirer l'œil */
.status-pill-red { position: relative; }
.status-pill-red::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid currentColor;
  opacity: 0;
  animation: aura-alert 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes aura-alert {
  0% { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

/* Lignes de tableaux admin : apparition en cascade (15 premières) */
.aura-js .admin-content tbody tr:nth-child(-n+15) { animation: aura-row-in var(--motion-base) var(--ease-out-expo) backwards; }
.aura-js .admin-content tbody tr:nth-child(2) { animation-delay: 30ms; }
.aura-js .admin-content tbody tr:nth-child(3) { animation-delay: 60ms; }
.aura-js .admin-content tbody tr:nth-child(4) { animation-delay: 90ms; }
.aura-js .admin-content tbody tr:nth-child(5) { animation-delay: 120ms; }
.aura-js .admin-content tbody tr:nth-child(n+6) { animation-delay: 150ms; }
@keyframes aura-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .hero-section::before, .hero-section::after { animation: none; }
  @view-transition { navigation: none; }
}

/* Courbe du taux USD/CDF : tracé progressif */
.rate-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rate-draw 1.1s cubic-bezier(.2, .8, .2, 1) .15s forwards; }
@keyframes rate-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rate-line { animation: none; stroke-dashoffset: 0; } }

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .aura-js * { opacity: 1 !important; transform: none !important; }
}