/* ============================================================
   Advanced Features — Navigation, Animations, Scroll Reveal
   MbM Portfolio (2026 Redesign)
   ============================================================ */

/* ─── Global scroll behavior ─── */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 72px; }

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  z-index: 10001;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  background: var(--color-primary);
  width: 0%;
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(var(--color-primary-rgb, 13,148,136), 0.6);
}

/* ============================================================
   SECTION INDICATOR DOTS
   ============================================================ */
.section-indicators {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.section-indicators.visible {
  opacity: 1;
  pointer-events: auto;
}

.section-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  border: 1.5px solid var(--color-border-strong, rgba(0,0,0,0.2));
  cursor: pointer;
  position: relative;
  transition: all 0.25s ease;
  padding: 0;
}
.section-indicator:hover {
  background: rgba(var(--color-primary-rgb, 13,148,136), 0.4);
  border-color: var(--color-primary);
  transform: scale(1.3);
}
.section-indicator.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 13,148,136), 0.2);
}
[data-theme="light"] .section-indicator,
[data-color-scheme="light"] .section-indicator {
  background: var(--c-neutral-200, #e4e4e3);
  border-color: var(--c-neutral-300, #c8c8c6);
}
[data-theme="dark"] .section-indicator,
[data-color-scheme="dark"] .section-indicator {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}

/* Tooltip */
.section-indicator__tooltip {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 4px 10px;
  border-radius: var(--radius-full, 9999px);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-family-base);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  letter-spacing: 0.02em;
  pointer-events: none;
}
.section-indicator:hover .section-indicator__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
  .section-indicators { right: 10px; gap: 10px; }
  .section-indicator { width: 6px; height: 6px; }
  .section-indicator__tooltip { display: none; }
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
@media (pointer: fine) {
  body.custom-cursor-active { cursor: none; }

  .custom-cursor {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 10000;
    display: none;
  }

  .custom-cursor__dot {
    width: 5px; height: 5px;
    background: var(--color-primary);
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: transform 0.08s ease;
  }

  .custom-cursor__outline {
    width: 32px; height: 32px;
    border: 1.5px solid rgba(var(--color-primary-rgb, 13,148,136), 0.45);
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition:
      width 0.18s ease,
      height 0.18s ease,
      background-color 0.18s ease,
      border-color 0.18s ease,
      transform 0.08s ease;
  }

  .custom-cursor.hovering .custom-cursor__outline {
    width: 48px; height: 48px;
    background-color: rgba(var(--color-primary-rgb, 13,148,136), 0.08);
    border-color: var(--color-primary);
  }
  .custom-cursor.hovering .custom-cursor__dot {
    transform: translate(-50%, -50%) scale(0);
  }
  .custom-cursor.clicking .custom-cursor__outline {
    width: 24px; height: 24px;
    background-color: rgba(var(--color-primary-rgb, 13,148,136), 0.2);
  }
}

/* ============================================================
   SCROLL REVEAL SYSTEM
   Adds [data-reveal] attributes progressively via JS observer.
   This CSS handles the animation states.
   ============================================================ */

/* Hero content stagger */
.hero-eyebrow,
.hero-title,
.hero-subtitle,
.hero-actions,
.hero-highlights {
  animation: hero-fade-up 0.7s var(--ease-out, cubic-bezier(0,0,0.2,1)) both;
}
.hero-eyebrow  { animation-delay: 0.05s; }
.hero-title    { animation-delay: 0.15s; }
.hero-subtitle { animation-delay: 0.25s; }
.hero-actions  { animation-delay: 0.32s; }
.hero-highlights { animation-delay: 0.40s; }

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section headers fade up */
.section-header {
  animation: none; /* handled by observer after initial load */
}

/* Project cards — staggered entry via JS adding .is-visible */
.project-card {
  transition:
    transform 0.3s var(--ease-standard),
    box-shadow 0.3s var(--ease-standard),
    border-color 0.3s var(--ease-standard),
    opacity 0.4s var(--ease-out),
    scale 0.4s var(--ease-out);
}

/* Card appear animation triggered by IntersectionObserver (JS adds .card-visible) */
.project-card:not(.filtered) {
  animation: card-appear 0.5s var(--ease-out) both;
}

/* Cascade delays for visible grid items */
.project-card:nth-child(1)  { animation-delay: 0.04s; }
.project-card:nth-child(2)  { animation-delay: 0.09s; }
.project-card:nth-child(3)  { animation-delay: 0.14s; }
.project-card:nth-child(4)  { animation-delay: 0.04s; }
.project-card:nth-child(5)  { animation-delay: 0.09s; }
.project-card:nth-child(6)  { animation-delay: 0.14s; }
.project-card:nth-child(7)  { animation-delay: 0.04s; }
.project-card:nth-child(8)  { animation-delay: 0.09s; }
.project-card:nth-child(9)  { animation-delay: 0.14s; }

@keyframes card-appear {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Filtered card exit */
.project-card.filtered {
  animation: none;
  opacity: 0;
  transform: scale(0.94) translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* Sections reveal — JS ajoute .js-reveal-ready sur <html> avant d'activer les animations */
/* Sans JS, les sections restent visibles */
.js-reveal-ready .certifications,
.js-reveal-ready .about,
.js-reveal-ready .contact {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.certifications.section-revealed,
.about.section-revealed,
.contact.section-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Cert card */
.js-reveal-ready .cert-card {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.cert-card.section-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PARALLAX BASE
   ============================================================ */
.parallax-bg {
  transform: translateZ(0);
  will-change: transform;
}

/* ============================================================
   KEYBOARD NAV HIGHLIGHT
   ============================================================ */
section.keyboard-nav-active {
  position: relative;
}
section.keyboard-nav-active::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--color-primary);
  box-shadow: 0 0 12px var(--color-primary);
  animation: pulse-nav 1s infinite alternate;
  z-index: 50;
}
@keyframes pulse-nav {
  from { opacity: 0.5; }
  to   { opacity: 1;   }
}

/* ============================================================
   PAGE TRANSITION (optional, applied by JS class)
   ============================================================ */
body.page-enter { animation: page-enter 0.3s var(--ease-out) both; }
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   SCROLL REVEAL OBSERVER SCRIPT (inject via JS, or use below)
   Add this script once DOMContentLoaded fires to activate
   section reveals and [data-reveal] attributes.

   Script is in scroll-reveal.js (see separate file)
   ============================================================ */


/* ============================================================
   PREFERS-REDUCED-MOTION
   Désactive toutes les animations pour les utilisateurs
   qui ont activé cette préférence système.
   ============================================================ */
@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;
  }

  html { scroll-behavior: auto; }

  .hero-eyebrow,
  .hero-title,
  .hero-subtitle,
  .hero-actions,
  .hero-highlights {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js-reveal-ready .certifications,
  .js-reveal-ready .about,
  .js-reveal-ready .contact,
  .js-reveal-ready .cert-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .project-card:not(.filtered) {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .scroll-progress__bar {
    transition: none;
  }

  .parallax-bg {
    will-change: auto;
  }
}

/* Classe JS ajoutée par scroll-reveal.js quand reduced-motion est actif */
.js-reduced-motion .certifications,
.js-reduced-motion .about,
.js-reduced-motion .contact,
.js-reduced-motion .cert-card {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}