/* AlloXYZ — Motion vivante : respiration, accueil, feedback */

:root {
  --ease-organic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-breathe: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-drift: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-welcome: 1s;
  --motion-gentle: 0.8s;
  --motion-breathe: 7s;
  --motion-shadow: 30s;
  --ambient-warmth: 0;
  --ambient-brightness: 1;
}

html.time-morning { --ambient-warmth: 0.05; --ambient-brightness: 1.02; }
html.time-afternoon { --ambient-warmth: 0; --ambient-brightness: 1; }
html.time-evening { --ambient-warmth: 0.12; --ambient-brightness: 0.96; }
html.time-night { --ambient-warmth: 0.08; --ambient-brightness: 0.92; }

body.is-loading { overflow: hidden; }
body.is-loading .site-main { visibility: hidden; }

/* ── 1. Respiration ambiante ── */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient-breath {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(26, 54, 104, calc(0.04 + var(--ambient-warmth))) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 75% 80%, rgba(26, 54, 104, calc(0.03 + var(--ambient-warmth))) 0%, transparent 50%);
  animation: ambient-breathe var(--motion-breathe) var(--ease-breathe) infinite;
  filter: brightness(var(--ambient-brightness));
}

.ambient-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.25;
}

.ambient-idle {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.ambient-idle .idle-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  box-shadow: 0 0 8px var(--accent-glow);
  animation: idle-spark 2.5s var(--ease-organic) forwards;
}

@keyframes ambient-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.85; }
  50% { transform: scale(1.04) translate(0, -1%); opacity: 1; }
}

@keyframes idle-spark {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  20% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-80px) scale(0.2); }
}

/* Ombres vivantes */
.card,
.stat-card,
.pricing-card,
.problem-box,
.solution-box,
.cta-section {
  animation: shadow-breathe var(--motion-shadow) var(--ease-breathe) infinite;
}

@keyframes shadow-breathe {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: var(--shadow-md); }
}

.pricing-card.featured {
  animation: shadow-breathe-featured var(--motion-shadow) var(--ease-breathe) infinite;
}

@keyframes shadow-breathe-featured {
  0%, 100% { box-shadow: var(--shadow-glow); }
  50% { box-shadow: 0 16px 48px rgba(26, 54, 104, 0.18); }
}

/* ── 2. Accueil chaleureux ── */
.welcome-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--motion-welcome) var(--ease-organic);
}

.welcome-curtain-logo {
  height: clamp(72px, 18vw, 96px);
  width: auto;
  max-width: min(280px, 80vw);
  object-fit: contain;
  animation: logo-awake 1.2s var(--ease-organic) forwards;
}

.welcome-curtain.is-open {
  transform: translateY(-100%);
  pointer-events: none;
}

@keyframes logo-awake {
  0% { opacity: 0; transform: scale(0.88) translateY(12px); }
  40% { opacity: 1; transform: scale(1.06) translateY(-4px); }
  70% { transform: scale(0.98) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.logo-awake img {
  animation: logo-settle 1s var(--ease-organic) 0.8s both;
}

@keyframes logo-settle {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

.site-main {
  position: relative;
  z-index: 2;
  transition: transform 0.6s var(--ease-organic);
}

body.scroll-end-bounce .site-main {
  animation: scroll-end-bounce 0.7s var(--ease-organic);
}

@keyframes scroll-end-bounce {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-5px); }
  65% { transform: translateY(2px); }
}

/* Vague d'accueil — délais organiques */
.hero-copy > *:nth-child(1) { animation-delay: 0ms; }
.hero-copy > *:nth-child(2) { animation-delay: 120ms; }
.hero-copy > *:nth-child(3) { animation-delay: 280ms; }
.hero-copy > *:nth-child(4) { animation-delay: 420ms; }
.hero-copy > *:nth-child(5) { animation-delay: 560ms; }
.hero-copy > *:nth-child(6) { animation-delay: 700ms; }

.hero-stats .stat-card:nth-child(1) { animation-delay: 820ms; }
.hero-stats .stat-card:nth-child(2) { animation-delay: 940ms; }
.hero-stats .stat-card:nth-child(3) { animation-delay: 1060ms; }
.hero-stats .stat-card:nth-child(4) { animation-delay: 1180ms; }

/* ── 3. Navigation fluide ── */
.nav {
  position: relative;
}

.nav-indicator {
  position: absolute;
  bottom: -6px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
  pointer-events: none;
  opacity: 0;
  transition:
    left 0.5s var(--ease-organic),
    width 0.5s var(--ease-organic),
    opacity 0.4s var(--ease-organic);
}

.nav:hover .nav-indicator,
.nav:focus-within .nav-indicator { opacity: 1; }

.section.is-entering {
  animation: section-enter 0.6s var(--ease-organic);
}

@keyframes section-enter {
  from { opacity: 0.7; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 4. Micro-interactions humaines ── */
.btn {
  border-radius: var(--radius-sm);
  transition:
    transform var(--motion-gentle) cubic-bezier(0.34, 1.45, 0.64, 1),
    border-radius var(--motion-gentle) var(--ease-organic),
    background var(--motion-gentle) var(--ease-organic),
    border-color var(--motion-gentle) var(--ease-organic),
    color var(--motion-gentle) var(--ease-organic),
    box-shadow var(--motion-gentle) var(--ease-organic);
}

.btn:hover {
  border-radius: calc(var(--radius-sm) + 4px);
}

.btn-pulse {
  animation: btn-heartbeat 3s var(--ease-breathe) infinite;
}

@keyframes btn-heartbeat {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: 0 0 0 6px rgba(26, 54, 104, 0.08); }
}

.tilt-image {
  transition: transform 0.6s var(--ease-organic);
  transform-style: preserve-3d;
}

.form-group {
  position: relative;
}

.form-group input,
.form-group select,
.form-group textarea {
  transition:
    transform var(--motion-gentle) var(--ease-organic),
    border-color var(--motion-gentle) var(--ease-organic),
    box-shadow var(--motion-gentle) var(--ease-organic),
    padding var(--motion-gentle) var(--ease-organic);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  transform: scale(1.015);
  padding-left: 16px;
  box-shadow: 0 4px 16px rgba(26, 54, 104, 0.08);
}

.form-group::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
  transition: width 0.8s var(--ease-organic);
  pointer-events: none;
}

.form-group:focus-within::after {
  width: 100%;
}

/* ── Feedback : ripple ── */
.ripple {
  position: fixed;
  border-radius: 50%;
  background: rgba(26, 54, 104, 0.15);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-out 0.8s var(--ease-organic) forwards;
  pointer-events: none;
  z-index: 9998;
}

@keyframes ripple-out {
  to { transform: translate(-50%, -50%) scale(4); opacity: 0; }
}

/* ── Toast câlin ── */
.toast-host {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9990;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  padding: 14px 22px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.92rem;
  box-shadow: var(--shadow-md);
  animation: toast-in 0.9s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
  pointer-events: auto;
}

.toast.is-leaving {
  animation: toast-out 0.5s var(--ease-organic) forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(40px) scale(0.92); }
  60% { transform: translateY(-6px) scale(1.02); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(20px) scale(0.95); }
}

/* ── 6. Révélation au scroll (dépliage) ── */
.reveal {
  transform: translateY(var(--slide-up)) scale(0.97);
  transition:
    opacity var(--motion-reveal) var(--ease-organic),
    transform var(--motion-reveal) var(--ease-organic);
}

.reveal.visible {
  transform: translate(0, 0) scale(1);
}

.reveal-slide-left { transform: translateX(-32px) scale(0.98); }
.reveal-slide-right { transform: translateX(32px) scale(0.98); }

.reveal-unfold {
  transform: perspective(800px) rotateX(8deg) scale(0.96);
  transform-origin: center top;
}

.reveal-unfold.visible {
  transform: perspective(800px) rotateX(0) scale(1);
}

/* Sections en calques */
.section {
  position: relative;
  transition: opacity 0.5s var(--ease-organic);
}

.section + .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--container-max, 1200px), calc(100% - 2 * var(--gutter, 1.5rem)));
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26, 54, 104, 0.1), transparent);
}

/* Parallaxe calme */
.hero-bg {
  transition: transform 0.1s linear;
}

/* Modal — fondu enchaîné */
.modal-overlay.open {
  background: rgba(0, 0, 0, 0.78);
}

.btn-full { width: 100%; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ambient-breath,
  .card,
  .stat-card,
  .pricing-card,
  .problem-box,
  .solution-box,
  .cta-section,
  .btn-pulse,
  .welcome-curtain-logo,
  .logo-awake img {
    animation: none !important;
  }

  .welcome-curtain { display: none; }
  body.is-loading .site-main { visibility: visible; }
  body.is-loading { overflow: auto; }

  .btn:hover { border-radius: var(--radius-sm); }
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus { transform: none; }
}