/* ================================
   MICRO-INTERACTIONS & ANIMATIONS
   ================================ */

/* Smooth Page Load */
body {
  animation: fadeInPage 0.6s ease;
}

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

/* ─── HOVER CARDS ─── */
.expertise-card,
.pub-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.expertise-card:hover,
.pub-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(194,96,58,0.2);
}

/* ─── BUTTONS WITH RIPPLE EFFECT ─── */
.btn-primary,
.btn-outline {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-primary::after,
.btn-outline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  transform: scale(0);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.btn-primary:hover::after,
.btn-outline:hover::after {
  transform: scale(2);
}

.btn-primary:active,
.btn-outline:active {
  transform: scale(0.98);
}

/* ─── TIMELINE SLIDE-IN ON SCROLL ─── */
.timeline-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delay pour effet cascade */
.timeline-item:nth-child(1) { transition-delay: 0.1s; }
.timeline-item:nth-child(2) { transition-delay: 0.2s; }
.timeline-item:nth-child(3) { transition-delay: 0.3s; }
.timeline-item:nth-child(4) { transition-delay: 0.4s; }
.timeline-item:nth-child(5) { transition-delay: 0.5s; }

/* ─── NAVIGATION STICKY AVEC BLUR ─── */
nav {
  transition: backdrop-filter 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

nav.scrolled {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(250, 246, 239, 0.95);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* ─── IMAGE HOVER ZOOM ─── */
.portrait-frame {
  overflow: hidden;
}

.portrait-frame img {
  transition: transform 0.5s ease;
}

.portrait-frame:hover img {
  transform: scale(1.05);
}

/* ─── CONTACT LINKS HOVER ─── */
.contact-link {
  transition: color 0.3s ease, background 0.3s ease, transform 0.2s ease;
}

.contact-link:hover {
  background: rgba(194,96,58,0.08);
  transform: translateY(-2px);
}

.contact-link svg {
  transition: transform 0.3s ease;
}

.contact-link:hover svg {
  transform: scale(1.1);
}

/* ─── GRADIENT ANIMÉ SUR TITRES ─── */
@media (prefers-reduced-motion: no-preference) {
  h1 {
    background: linear-gradient(
      45deg,
      var(--terracotta),
      var(--gold),
      var(--terracotta)
    );
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 8s ease infinite;
  }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ─── SCROLL INDICATOR PULSE ─── */
.scroll-hint {
  animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* ─── SECTION LABEL ANIMATION ─── */
.section-label {
  position: relative;
  display: inline-block;
}

.section-label::after {
  transition: max-width 0.6s ease;
}

.section-label.visible::after {
  animation: lineGrow 0.8s ease forwards;
}

@keyframes lineGrow {
  from { max-width: 0; }
  to { max-width: 80px; }
}

/* ─── EXPERTISE CARDS STAGGER ─── */
.expertise-card {
  opacity: 0;
  transform: translateY(20px);
  animation: cardFadeUp 0.6s ease forwards;
}

.expertise-card:nth-child(1) { animation-delay: 0.1s; }
.expertise-card:nth-child(2) { animation-delay: 0.2s; }
.expertise-card:nth-child(3) { animation-delay: 0.3s; }
.expertise-card:nth-child(4) { animation-delay: 0.4s; }
.expertise-card:nth-child(5) { animation-delay: 0.5s; }
.expertise-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes cardFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── SMOOTH SCROLL BEHAVIOR ─── */
html {
  scroll-behavior: smooth;
}

/* ─── ACCESSIBILITY: RESPECT REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── LOADING SKELETON (optionnel) ─── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(240,226,200,0.1) 25%,
    rgba(212,146,75,0.2) 50%,
    rgba(240,226,200,0.1) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}