/* ================================
   SESSE & CO — Premium Interactions
   ================================ */


/* ── A) PAGE TRANSITION OVERLAY ────────────────────────── */

#page-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#page-transition.entering {
  opacity: 1;
  pointer-events: all;
}


/* ── B) BOUTONS MAGNÉTIQUES ─────────────────────────────── */

.btn-primary,
.btn-outline {
  will-change: transform;
  transition:
    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


/* ── C) RIPPLE EFFECT ───────────────────────────────────── */

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}


/* ── D) CURSEUR CUSTOM — FLÈCHE AU HOVER .btn-primary ───── */
/* Affiche "→" via ::after quand le curseur est sur .btn-primary */

#cursor.on-btn::after {
  content: '→';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-family: 'Jost', sans-serif;
  color: var(--red);
  opacity: 1;
  transition: opacity 0.2s ease;
  line-height: 1;
  pointer-events: none;
}

/* État par défaut : pas de contenu dans le curseur */
#cursor::after {
  content: '';
  opacity: 0;
  transition: opacity 0.2s ease;
}


/* ── E) SMOOTH SCROLL GLOBAL ────────────────────────────── */

html {
  scroll-behavior: smooth;
}


/* ── F) LAZY FADE — Fade + dissipation du flou ──────────── */

.lazy-fade {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px);
  transition:
    opacity   0.9s ease,
    filter    0.9s ease,
    transform 0.9s ease;
}

.lazy-fade.lazy-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Délais en cascade pour les groupes d'éléments .lazy-fade */
.lazy-fade:nth-child(2) { transition-delay: 0.1s; }
.lazy-fade:nth-child(3) { transition-delay: 0.2s; }
.lazy-fade:nth-child(4) { transition-delay: 0.3s; }
.lazy-fade:nth-child(5) { transition-delay: 0.4s; }
.lazy-fade:nth-child(6) { transition-delay: 0.5s; }