/* =============================================================================
   NOVECENTO — ANIMATIONS.CSS
   Keyframes · Reveal states · Scroll transitions · Motion utilities
   ============================================================================= */

/* ─── KEYFRAMES ──────────────────────────────────────────────────────────── */

@keyframes grain {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(3%, 2%); }
  30%  { transform: translate(-1.5%, 4%); }
  40%  { transform: translate(2.5%, -1%); }
  50%  { transform: translate(-3%, 3%); }
  60%  { transform: translate(1%, -2.5%); }
  70%  { transform: translate(-2%, 1.5%); }
  80%  { transform: translate(3%, -3%); }
  90%  { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

@keyframes scrollThumb {
  0%   { top: -100%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes loaderPulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}

/* ─── REVEAL INITIAL STATES ──────────────────────────────────────────────── */
/* Elements start invisible; GSAP/IntersectionObserver animates them in.     */

.reveal-fade {
  opacity: 0;
  will-change: opacity;
}

.reveal-slide {
  opacity: 0;
  transform: translateY(50px);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  will-change: opacity, transform;
}

/* ─── PARALLAX ELEMENT ───────────────────────────────────────────────────── */
.parallax-el { will-change: transform; }

/* ─── LOADER ANIMATION ───────────────────────────────────────────────────── */
.loader.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── HERO ELEMENTS — état initial caché ────────────────────────────────────
   GSAP écrase ces propriétés via gsap.set() dans initLoader() dès le départ.
   Ces règles servent de filet de sécurité si JS n'est pas encore chargé.     */
.hero-eyebrow,
.hero-line,
.hero-tagline,
.hero-cta,
.hero-scroll {
  opacity: 0;
}

/* NOTE : les anciennes règles .page-ready .hero-* (opacity: 1) ont été
   supprimées — elles causaient un flash instantané avant que GSAP puisse
   animer les éléments. GSAP gère entièrement la visibilité via inline styles. */

/* ─── NAV LINK UNDERLINE ─────────────────────────────────────────────────── */
.nav-link {
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── MENU CARD APPEAR ───────────────────────────────────────────────────── */
.menu-card {
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-card.entering {
  animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── GALLERY ITEM HOVER ─────────────────────────────────────────────────── */
.gallery-item {
  transition: opacity 0.35s;
}
.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(200, 169, 107, 0.0);
  z-index: 1;
  pointer-events: none;
  transition: background 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── BUTTON RIPPLE ──────────────────────────────────────────────────────── */
.btn {
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  transform: translate(-50%, -50%);
  transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), opacity 0.4s;
  opacity: 0;
  pointer-events: none;
}
.btn:active::before {
  width: 300px; height: 300px;
  opacity: 1;
}

/* ─── THEME TRANSITION ───────────────────────────────────────────────────── */
html {
  transition: none;
}
body {
  transition: background-color 0.65s cubic-bezier(0.45, 0, 0.55, 1),
              color 0.65s cubic-bezier(0.45, 0, 0.55, 1);
}

/* ─── MOBILE MENU LINKS STAGGER ──────────────────────────────────────────── */
.mobile-menu.open .mobile-link {
  animation: mobileIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mobile-menu.open .mobile-nav-list li:nth-child(1) .mobile-link { animation-delay: 0.08s; }
.mobile-menu.open .mobile-nav-list li:nth-child(2) .mobile-link { animation-delay: 0.13s; }
.mobile-menu.open .mobile-nav-list li:nth-child(3) .mobile-link { animation-delay: 0.18s; }
.mobile-menu.open .mobile-nav-list li:nth-child(4) .mobile-link { animation-delay: 0.23s; }
.mobile-menu.open .mobile-nav-list li:nth-child(5) .mobile-link { animation-delay: 0.28s; }
.mobile-menu.open .mobile-menu-foot            { animation: mobileIn 0.55s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes mobileIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .grain { animation: none; }
  .scroll-thumb { animation: none; }
  .reveal-fade,
  .reveal-slide,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}