/* ═══════════════════════════════════════════════
   PubliOSuite — Animations layer
   Complements style.css. Load AFTER style.css.
   Transform + opacity only. Easing: ease-out-expo.
   Respects prefers-reduced-motion.
   ═══════════════════════════════════════════════ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-entrance: 780ms;
}

/* ─── Stagger cascade for .reveal groups ─────────────
   Parents tag their children with --stagger-index via JS,
   each child fires --stagger-index * 70ms after observer.
*/
.reveal {
  transition-delay: calc(var(--stagger-index, 0) * 70ms);
}

/* ─── Scroll progress ──────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light));
  will-change: transform;
}

/* ─── Hero choreography (fires via body[data-hero-ready]) ─ */
.hero-text > .reveal,
.hero-visual.reveal,
nav.anim-ready {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-entrance) var(--ease-out-expo),
              transform var(--dur-entrance) var(--ease-out-expo);
}
nav.anim-ready { transform: translateY(-12px); }

body[data-hero-ready="1"] nav.anim-ready {
  opacity: 1;
  transform: translateY(0);
}
body[data-hero-ready="1"] .hero-text > .reveal {
  opacity: 1;
  transform: translateY(0);
}
body[data-hero-ready="1"] .hero-text > .reveal:nth-child(1) { transition-delay: 120ms; }
body[data-hero-ready="1"] .hero-text > .reveal:nth-child(2) { transition-delay: 200ms; }
body[data-hero-ready="1"] .hero-text > .reveal:nth-child(3) { transition-delay: 280ms; }
body[data-hero-ready="1"] .hero-text > .reveal:nth-child(4) { transition-delay: 360ms; }
body[data-hero-ready="1"] .hero-text > .reveal:nth-child(5) { transition-delay: 440ms; }

body[data-hero-ready="1"] .hero-visual.reveal {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 260ms;
}

/* Phone itself gets a subtle scale-in */
.hero-phone {
  transform: scale(0.94);
  opacity: 0;
  transition: transform 900ms var(--ease-out-expo) 380ms,
              opacity 600ms var(--ease-out-expo) 380ms;
}
body[data-hero-ready="1"] .hero-phone {
  transform: scale(1);
  opacity: 1;
}

/* Phone service rows cascade in */
.phone-service-item {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 500ms var(--ease-out-expo),
              transform 500ms var(--ease-out-expo);
}
body[data-hero-ready="1"] .phone-service-item { opacity: 1; transform: none; }
body[data-hero-ready="1"] .phone-service-item:nth-child(1) { transition-delay: 820ms; }
body[data-hero-ready="1"] .phone-service-item:nth-child(2) { transition-delay: 900ms; }
body[data-hero-ready="1"] .phone-service-item:nth-child(3) { transition-delay: 980ms; }
body[data-hero-ready="1"] .phone-service-item:nth-child(4) { transition-delay: 1060ms; }

/* Floating notifications: hold off the perpetual bob until they've slid in */
.floating-notif {
  opacity: 0;
  animation: none !important;
}
.floating-notif-1 {
  transform: translate(24px, -50%) scale(0.92);
  transition: opacity 560ms var(--ease-out-expo),
              transform 640ms var(--ease-out-expo);
}
.floating-notif-2 {
  transform: translate(-28px, 50%) scale(0.92);
  transition: opacity 560ms var(--ease-out-expo),
              transform 640ms var(--ease-out-expo);
}
body[data-hero-ready="1"] .floating-notif {
  opacity: 1;
  animation: floatNotif 4s ease-in-out infinite !important;
}
body[data-hero-ready="1"] .floating-notif-1 {
  transform: none;
  transition-delay: 1120ms;
  animation-delay: 2s !important;
}
body[data-hero-ready="1"] .floating-notif-2 {
  transform: none;
  transition-delay: 1260ms;
  animation-delay: 0s !important;
}

/* Badge "8 outils" subtle pulse */
.badge-24 {
  animation: badgePulse 4.5s ease-in-out infinite 1.6s;
  transform-origin: center;
}
@keyframes badgePulse {
  0%, 92%, 100% { transform: scale(1); }
  96% { transform: scale(1.06); }
}

/* ─── Chart bars — push up from floor on reveal ────── */
.mockup-chart .chart-bar {
  transform-origin: bottom center;
  transform: scaleY(0.02);
  transition: transform 720ms var(--ease-out-expo);
  will-change: transform;
}
.dark-visual.is-visible .mockup-chart .chart-bar { transform: scaleY(1); }
.dark-visual.is-visible .mockup-chart .chart-bar:nth-child(1) { transition-delay: 120ms; }
.dark-visual.is-visible .mockup-chart .chart-bar:nth-child(2) { transition-delay: 200ms; }
.dark-visual.is-visible .mockup-chart .chart-bar:nth-child(3) { transition-delay: 280ms; }
.dark-visual.is-visible .mockup-chart .chart-bar:nth-child(4) { transition-delay: 360ms; }
.dark-visual.is-visible .mockup-chart .chart-bar:nth-child(5) { transition-delay: 440ms; }
.dark-visual.is-visible .mockup-chart .chart-bar:nth-child(6) { transition-delay: 520ms; }
.dark-visual.is-visible .mockup-chart .chart-bar:nth-child(7) { transition-delay: 600ms; }

/* Mockup stat values fade-up after chart starts */
.mockup-stat span {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms var(--ease-out-expo),
              transform 400ms var(--ease-out-expo);
}
.dark-visual.is-visible .mockup-stat span { opacity: 1; transform: none; }
.dark-visual.is-visible .mockup-stat:nth-child(1) span { transition-delay: 80ms; }
.dark-visual.is-visible .mockup-stat:nth-child(2) span { transition-delay: 160ms; }
.dark-visual.is-visible .mockup-stat:nth-child(3) span { transition-delay: 240ms; }

/* ─── Suite cards — hover reveals accent underline ─── */
.suite-card {
  position: relative;
  overflow: hidden;
  transition: transform 420ms var(--ease-out-expo),
              box-shadow 420ms var(--ease-out-expo),
              border-color 260ms var(--ease-out-quart);
}
.suite-card::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 2px;
  background: var(--accent, var(--primary));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ease-out-expo);
  border-radius: 2px;
}
.suite-card:hover::after { transform: scaleX(1); }
.suite-card:hover .card-link {
  gap: 10px;
  color: var(--accent, var(--primary));
}
.suite-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 280ms var(--ease-out-expo),
              color 260ms var(--ease-out-quart);
}

/* ─── Suite tabs filtering — fade+lift instead of display:none ─ */
.suite-card {
  transition:
    transform 420ms var(--ease-out-expo),
    box-shadow 420ms var(--ease-out-expo),
    border-color 260ms var(--ease-out-quart),
    opacity 320ms var(--ease-out-quart);
}
.suite-card.is-hiding {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
}
.suite-card.is-entering {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
.tab-btn {
  position: relative;
  transition: color 200ms var(--ease-out-quart),
              background 200ms var(--ease-out-quart),
              transform 140ms var(--ease-out-quart);
}
.tab-btn:active { transform: translateY(1px) scale(0.98); }

/* ─── FAQ plus icon rotates to × on open ─────────────── */
.faq-plus {
  display: inline-block;
  transition: transform 360ms var(--ease-out-expo),
              color 240ms var(--ease-out-quart);
  will-change: transform;
}
.faq-item.open .faq-plus {
  transform: rotate(135deg);
  color: var(--primary);
}
.faq-item {
  transition: background 260ms var(--ease-out-quart);
}

/* ─── Pricing toggle — price swap ────────────────────── */
.price-amount {
  display: inline-block;
  transition: transform 260ms var(--ease-out-expo),
              opacity 220ms var(--ease-out-quart);
  will-change: transform;
}
.price-amount.is-swapping {
  opacity: 0;
  transform: translateY(-8px);
}
.price-amount.is-entering {
  opacity: 0;
  transform: translateY(10px);
}
.pricing-toggle-switch {
  transition: background 280ms var(--ease-out-quart);
}
.pricing-toggle-knob {
  transition: transform 320ms var(--ease-out-expo);
}
.pricing-save-badge {
  display: inline-block;
  transition: transform 320ms var(--ease-out-expo),
              opacity 280ms var(--ease-out-quart);
}
.pricing-save-badge.is-dim { opacity: 0.35; transform: scale(0.94); }

/* ─── Stats & proof numbers — count-up target ───────── */
.stat-num,
.proof-number,
.price-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ─── Buttons — press feedback ──────────────────────── */
.btn-primary-lg,
.btn-nav-primary,
.pricing-card-btn,
.mobile-cta-btn {
  transition: transform 160ms var(--ease-out-quart),
              background 200ms var(--ease-out-quart),
              box-shadow 260ms var(--ease-out-quart);
  will-change: transform;
}
.btn-primary-lg:active,
.btn-nav-primary:active,
.pricing-card-btn:active,
.mobile-cta-btn:active {
  transform: scale(0.97);
}
.btn-icon {
  display: inline-flex;
  transition: transform 320ms var(--ease-out-expo);
}
.btn-primary-lg:hover .btn-icon { transform: translateX(3px); }

/* ─── Mobile burger → X ─────────────────────────────── */
.nav-burger {
  cursor: pointer;
  background: transparent;
  border: none;
}
.nav-burger span {
  transition: transform 320ms var(--ease-out-expo),
              opacity 220ms var(--ease-out-quart);
  transform-origin: center;
  will-change: transform;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  transition: transform 420ms var(--ease-out-expo),
              opacity 320ms var(--ease-out-quart);
}

/* ─── Form inputs — focus glow ──────────────────────── */
.final-form-card input {
  transition: border-color 200ms var(--ease-out-quart),
              box-shadow 280ms var(--ease-out-expo),
              background 200ms var(--ease-out-quart);
}
.final-form-card input:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(232, 80, 30, 0.14);
}

/* ─── Proof cards — hover lift amplified ────────────── */
.proof-card { will-change: transform; }

/* ─── REDUCED MOTION — flatten everything ───────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-phone,
  .phone-service-item,
  .floating-notif,
  nav.anim-ready,
  .hero-text > .reveal,
  .hero-visual.reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .mockup-chart .chart-bar { transform: scaleY(1) !important; }
  .mockup-stat span { opacity: 1 !important; transform: none !important; }
  .scroll-progress { display: none !important; }
  .badge-24 { animation: none !important; }
  .floating-notif { animation: none !important; }
}