/* ============================================================
   PulsX — animations.css
   Contient uniquement les @keyframes et les classes
   d'animation. Tout déclenchement scroll utilise le
   pattern [data-animate] + .is-visible (via main.js).
   ============================================================ */

/* ── PulsX hero logo ──────────────────────────────────────── */

/* Heartbeat rhythm: lub (5%) — dub (14%) — long rest */
@keyframes pulsxHeartbeat {
  0%        { transform: scale(1); }
  5%        { transform: scale(1.028); }
  10%       { transform: scale(0.992); }
  14%       { transform: scale(1.016); }
  22%, 100% { transform: scale(1); }
}

@keyframes pulsxGlow {
  0%        {
    text-shadow:
      0 0 20px rgba(168, 85, 247, 0.4),
      0 0 55px rgba(124, 58, 237, 0.18);
  }
  5%        {
    text-shadow:
      0 0 50px rgba(216, 180, 254, 0.85),
      0 0 100px rgba(168, 85, 247, 0.55),
      0 0 160px rgba(124, 58, 237, 0.22);
  }
  10%       {
    text-shadow:
      0 0 16px rgba(168, 85, 247, 0.3),
      0 0 40px rgba(124, 58, 237, 0.1);
  }
  14%       {
    text-shadow:
      0 0 36px rgba(216, 180, 254, 0.65),
      0 0 80px rgba(168, 85, 247, 0.38);
  }
  22%, 100% {
    text-shadow:
      0 0 20px rgba(168, 85, 247, 0.4),
      0 0 55px rgba(124, 58, 237, 0.18);
  }
}

/* The X softly brightens on each beat */
@keyframes pulsxXFlash {
  0%        { color: #a855f7; }
  5%        { color: #e2c8ff; }
  10%       { color: #8b45f5; }
  14%       { color: #c4a0f8; }
  22%, 100% { color: #a855f7; }
}

.hero__logo {
  font-size: var(--fs-hero);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  color: var(--clr-text-primary);
  animation:
    fadeInUp        0.6s  ease-out    both,
    pulsxHeartbeat  3.6s  ease-in-out 400ms infinite,
    pulsxGlow       3.6s  ease-in-out 400ms infinite;
}

.hero__logo-x {
  color: #a855f7;
  animation: pulsxXFlash 3.6s ease-in-out 400ms infinite;
}

/* Delay for hero sub-elements (already visible, just fade in) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.anim-fade-in-up { animation: fadeInUp var(--dur-slow) var(--ease-out) both; }
.anim-delay-1    { animation-delay: 200ms; }
.anim-delay-2    { animation-delay: 400ms; }
.anim-delay-3    { animation-delay: 600ms; }
.anim-delay-4    { animation-delay: 800ms; }
.anim-delay-5    { animation-delay: 1000ms; }

/* ── Shimmer (portfolio placeholders) ─────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.card--placeholder .card__image {
  animation: shimmer 2.5s linear infinite;
  background: linear-gradient(
    90deg,
    rgba(124, 58, 237, 0.08) 0%,
    rgba(168, 85, 247, 0.22) 50%,
    rgba(124, 58, 237, 0.08) 100%
  );
  background-size: 200% 100%;
}

/* ── Border glow pulse (featured pricing card) ────────────── */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.35), 0 0 30px rgba(124, 58, 237, 0.15); }
  50%       { box-shadow: 0 0 20px rgba(168, 85, 247, 0.65), 0 0 60px rgba(124, 58, 237, 0.3); }
}

.pricing-card--featured {
  animation: borderGlow 3s ease-in-out infinite;
}

/* ── Availability dot blink ───────────────────────────────── */
@keyframes dotBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: dotBlink 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Scroll-triggered stagger helper ─────────────────────── */
/* Extra stagger for grid children when parent is .stagger-grid */
.stagger-grid > *:nth-child(1) { transition-delay:  50ms; }
.stagger-grid > *:nth-child(2) { transition-delay: 150ms; }
.stagger-grid > *:nth-child(3) { transition-delay: 250ms; }
.stagger-grid > *:nth-child(4) { transition-delay: 350ms; }
.stagger-grid > *:nth-child(5) { transition-delay: 450ms; }

/* ── Cookie panel entry ────────────────────────────────────── */
@keyframes cookiePanelIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 16px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.cookie-panel:not([hidden]) {
  animation: cookiePanelIn var(--dur-base) var(--ease-out) both;
}

@keyframes cookieOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.cookie-overlay:not([hidden]) {
  animation: cookieOverlayIn var(--dur-base) ease both;
}
.stagger-grid > *:nth-child(6) { transition-delay: 550ms; }