/* ============================================================
   animations-projets.css — v4 "PREMIUM"
   projets.mbm.lv
   ============================================================ */

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
  --glow:         rgba(var(--color-primary-rgb, 13,148,136), 0.22);
  --glow-mid:     rgba(var(--color-primary-rgb, 13,148,136), 0.38);
  --glow-strong:  rgba(var(--color-primary-rgb, 13,148,136), 0.56);
}

/* ============================================================
   1. SCROLLBAR CUSTOM (WebKit)
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border-strong, rgba(0,0,0,0.18));
  border-radius: 999px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-primary-rgb), 0.45);
}

/* ============================================================
   2. TEXT SELECTION
   ============================================================ */
::selection {
  background: rgba(var(--color-primary-rgb), 0.18);
  color: var(--color-text);
}

/* ============================================================
   3. SCROLL PROGRESS BAR
   ============================================================ */
.scroll-progress__bar {
  background: linear-gradient(90deg,
    var(--color-primary),
    var(--c-teal-300, #5eead4),
    var(--color-primary)
  );
  background-size: 200% 100%;
  box-shadow: 0 0 10px var(--glow), 0 0 2px var(--color-primary);
  animation: progress-shimmer 3s linear infinite;
}
@keyframes progress-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   4. NAVBAR
   ============================================================ */
.navbar {
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}
.navbar.navbar--scrolled {
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 32px rgba(0,0,0,0.07) !important;
}

/* Brand logo */
.brand-logo {
  transition: transform 0.4s var(--ease-spring), box-shadow 0.3s ease;
}
.nav-brand:hover .brand-logo {
  transform: rotate(-8deg) scale(1.1);
  box-shadow: 0 0 0 3px var(--glow);
}

/* Logo mark b — scintillement */
.logo-mark__b {
  display: inline-block;
  animation: brand-b-pulse 4.5s ease-in-out infinite;
}
@keyframes brand-b-pulse {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 16px var(--glow-mid); }
}

/* Nav links — soulignement animé centré */
.nav-link {
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--c-teal-300, #5eead4));
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s var(--ease-smooth);
}
.nav-link:hover::after { width: calc(100% - 22px); }
/* Laisser le style.css gérer l'état active avec background */

@media (max-width: 768px) {
  .nav-link::after { display: none; }
}

/* ── Mobile menu — animation d'entrée ── */
@media (max-width: 768px) {
  .nav-menu.active {
    animation: mobile-menu-in 0.32s var(--ease-spring) both;
  }
}
@keyframes mobile-menu-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stagger des liens dans le menu mobile */
@media (max-width: 768px) {
  .nav-menu.active .nav-link:nth-child(1) { animation: nav-item-in 0.28s var(--ease-spring) 0.04s both; }
  .nav-menu.active .nav-link:nth-child(2) { animation: nav-item-in 0.28s var(--ease-spring) 0.08s both; }
  .nav-menu.active .nav-link:nth-child(3) { animation: nav-item-in 0.28s var(--ease-spring) 0.12s both; }
  .nav-menu.active .nav-link:nth-child(4) { animation: nav-item-in 0.28s var(--ease-spring) 0.16s both; }
  .nav-menu.active .nav-link:nth-child(5) { animation: nav-item-in 0.28s var(--ease-spring) 0.20s both; }
}
@keyframes nav-item-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Hamburger → X ── */
.mobile-menu-btn span {
  transform-origin: center;
  transition: transform 0.3s var(--ease-spring), opacity 0.22s ease, background-color 0.2s ease !important;
}
.mobile-menu-btn.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-menu-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   5. HERO SECTION
   ============================================================ */

/* Grille — drift lent et doux */
.hero::before {
  animation: grid-drift 32s linear infinite;
  will-change: background-position;
}
@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 40px 40px, 40px 40px; }
}

/* Blob lumineux — animation organique */
.hero::after {
  animation: blob-drift 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes blob-drift {
  0%   { transform: translateX(-50%) scale(1)    translateY(0px);   opacity: 0.65; }
  25%  { transform: translateX(-44%) scale(1.12) translateY(-18px); opacity: 0.95; }
  50%  { transform: translateX(-50%) scale(0.92) translateY(10px);  opacity: 0.80; }
  75%  { transform: translateX(-57%) scale(1.10) translateY(-12px); opacity: 1;    }
  100% { transform: translateX(-50%) scale(1.05) translateY(-6px);  opacity: 0.90; }
}

/* Point pulsant de l'eyebrow */
.hero-eyebrow::before {
  animation: pulse-dot 2.2s ease-in-out infinite !important;
}
@keyframes pulse-dot {
  0%   { opacity: 1;    transform: scale(1);    box-shadow: 0 0 0 0   var(--glow); }
  50%  { opacity: 0.55; transform: scale(1.5);  box-shadow: 0 0 0 8px transparent; }
  100% { opacity: 1;    transform: scale(1);    box-shadow: 0 0 0 0   var(--glow); }
}

/* Hero highlights — hover lift + glow amélioré */
.hero-highlights li {
  transition:
    border-color 0.30s ease,
    box-shadow   0.30s ease,
    transform    0.32s var(--ease-spring) !important;
}
.hero-highlights li:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(var(--color-primary-rgb), 0.48) !important;
  box-shadow:
    0 14px 40px var(--glow),
    0 4px 12px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(var(--color-primary-rgb), 0.12) !important;
}

/* Légère animation de breathing sur le sous-titre hero
   (on évite .hero-title car advanced-features.css gère son animation d'entrée) */
.hero-eyebrow {
  /* Le point pulsant est déjà défini ci-dessus — pas d'animation supplémentaire */
}

/* ============================================================
   6. SECTION HEADERS — reveal + underline dégradé
   ============================================================ */
.js-reveal-ready .section-header {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}
.section-header.header-revealed {
  opacity: 1;
  transform: translateY(0);
}

.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-primary),
    var(--c-teal-300, #5eead4),
    var(--color-primary)
  );
  background-size: 200% 100%;
  border-radius: 3px;
  box-shadow: 0 0 10px var(--glow);
  transition: width 0.85s var(--ease-smooth) 0.28s;
  animation: underline-shimmer 3.5s linear infinite;
}
.header-revealed .section-title::after { width: 64px; }
@keyframes underline-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   7. PROJECT CARDS — fade-in + tilt 3D + glow améliorés
   ============================================================ */
.project-card,
.about-card,
.contact-form {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity      0.60s var(--ease-out),
    transform    0.60s var(--ease-out),
    box-shadow   0.30s ease,
    border-color 0.30s ease;
}
.project-card.fade-in-up,
.about-card.fade-in-up,
.contact-form.fade-in-up {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger par groupe de 3 */
.project-card:nth-child(3n+1) { transition-delay: 0.04s; }
.project-card:nth-child(3n+2) { transition-delay: 0.12s; }
.project-card:nth-child(3n+3) { transition-delay: 0.20s; }

/* 3D tilt ready */
.project-card {
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Hover — glow + border améliorés */
.project-card:hover {
  border-color: rgba(var(--color-primary-rgb), 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(var(--color-primary-rgb), 0.22),
    0 28px 64px rgba(var(--color-primary-rgb), 0.16),
    0 10px 24px rgba(0,0,0,0.10) !important;
}

/* Halo radial au hover — positionné selon la souris via CSS var */
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(var(--color-primary-rgb), 0.10) 0%,
    transparent 70%
  );
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 0;
}
.project-card:hover::before { opacity: 1; }

/* Shimmer image au hover */
.project-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(var(--color-primary-rgb), 0.14) 50%,
    transparent 70%
  );
  transform: translateX(-140%) skewX(-20deg);
  z-index: 2;
  pointer-events: none;
}
.project-card:hover .project-image::before {
  animation: shimmer-pass 0.65s var(--ease-out) forwards;
}
@keyframes shimmer-pass {
  from { transform: translateX(-140%) skewX(-20deg); }
  to   { transform: translateX(240%) skewX(-20deg); }
}

/* Dark mode — glow teal */
[data-theme="dark"] .project-card:hover,
[data-color-scheme="dark"] .project-card:hover {
  border-color: rgba(45,212,191,0.40) !important;
  box-shadow:
    0 0 0 1px rgba(45,212,191,0.22),
    0 28px 64px rgba(45,212,191,0.13),
    0 10px 24px rgba(0,0,0,0.42) !important;
}

/* Tags — couleur gérée par JS (initTagsHover) */
.tag {
  transition:
    transform    0.20s var(--ease-spring),
    box-shadow   0.20s ease,
    background   0.20s ease,
    color        0.20s ease,
    border-color 0.20s ease;
  cursor: default;
}
.tag:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 14px var(--glow);
}

/* Statut "En cours" — point pulsant animé */
.project-status.status-ongoing::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 5px;
  vertical-align: middle;
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);   }
  50%       { opacity: 0.25; transform: scale(0.5); }
}

/* ============================================================
   8. CATEGORY TABS
   ============================================================ */
.category-tab {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.22s var(--ease-spring),
    box-shadow 0.22s ease !important;
}
.category-tab:hover:not(.active) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--glow);
}
.category-tab.active {
  box-shadow: 0 0 0 1px var(--color-primary), 0 4px 18px var(--glow) !important;
  transform: translateY(-1px);
}

/* ============================================================
   9. SEARCH INPUT
   ============================================================ */
.search-input {
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease !important;
}
.search-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--glow), 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* ============================================================
   10. BOUTONS — pulse subtil + ripple + magnet
   ============================================================ */
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 1px 2px rgba(var(--color-primary-rgb), 0.2), 0 0 0 0 var(--glow); }
  60%       { box-shadow: 0 1px 2px rgba(var(--color-primary-rgb), 0.2), 0 0 0 10px rgba(var(--color-primary-rgb), 0); }
}

.btn-primary {
  position: relative;
  overflow: hidden;
  animation: cta-pulse 4s ease-in-out infinite;
  transition:
    transform    0.24s var(--ease-spring),
    filter       0.2s ease,
    box-shadow   0.24s ease !important;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.04) !important;
  filter: brightness(1.06);
  animation: none;
  box-shadow:
    0 8px 32px var(--glow-mid),
    0 2px 8px rgba(0,0,0,0.1) !important;
}
.btn-primary:active {
  transform: scale(0.97) translateY(0) !important;
  filter: brightness(0.97);
  animation: none;
  box-shadow: 0 2px 8px var(--glow) !important;
}

/* Ripple */
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-expand 0.56s linear;
  background: rgba(255,255,255,0.28);
  pointer-events: none;
}
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ============================================================
   11. SECTIONS REVEAL — transitions soignées
   ============================================================ */
.js-reveal-ready .certifications,
.js-reveal-ready .about,
.js-reveal-ready .contact {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity   0.72s var(--ease-smooth),
    transform 0.72s var(--ease-smooth);
}
.certifications.section-revealed,
.about.section-revealed,
.contact.section-revealed {
  opacity: 1;
  transform: translateY(0);
}
.certifications:not(.js-hidden),
.about:not(.js-hidden),
.contact:not(.js-hidden) {
  opacity: 1;
  transform: none;
}

/* ============================================================
   12. CERTIFICATIONS
   ============================================================ */
.js-reveal-ready .cert-card {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.68s var(--ease-smooth), transform 0.68s var(--ease-smooth);
}
.cert-card.section-revealed { opacity: 1; transform: translateY(0); }

/* Barres de progression Root-Me */
.cert-rootme__progress-bar {
  width: 0;
  transition: width 1.7s var(--ease-smooth) 0.55s;
  background: linear-gradient(90deg, var(--color-primary), var(--c-teal-300, #5eead4));
  box-shadow: 0 0 8px var(--glow);
}

/* Flèches carousel */
.cert-carousel__arrow {
  transition:
    background-color 0.2s ease,
    border-color     0.2s ease,
    box-shadow       0.2s ease !important;
}
.cert-carousel__arrow:hover {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--glow), var(--shadow-sm) !important;
}
.cert-carousel__arrow--prev:hover span[aria-hidden] { margin-right: 2px; }
.cert-carousel__arrow--next:hover span[aria-hidden] { margin-left:  2px; }

/* Slide */
.cert-carousel__slide {
  transition: opacity 0.38s ease, transform 0.38s var(--ease-smooth);
}

/* ============================================================
   13. ABOUT CARD
   ============================================================ */
.about-card {
  transition:
    opacity      0.56s var(--ease-out),
    transform    0.56s var(--ease-out),
    box-shadow   0.3s ease,
    border-color 0.3s ease !important;
}
.about-card.fade-in-up:hover {
  box-shadow: 0 16px 40px var(--glow) !important;
}

/* ============================================================
   14. CONTACT — form + labels
   ============================================================ */
.form-control {
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--glow) !important;
  outline: none;
}
.form-group { position: relative; }
.form-label { transition: color 0.2s ease; }
.form-group:focus-within .form-label { color: var(--color-primary); }

/* ============================================================
   15. FOOTER — liens animés
   ============================================================ */
.footer-links a {
  position: relative;
  transition: color 0.2s ease, transform 0.22s var(--ease-spring);
}
.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--color-primary);
  transition: width 0.28s var(--ease-smooth);
}
.footer-links a:hover { transform: translateX(4px); }
.footer-links a:hover::after { width: 100%; }

.footer-badge {
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease;
  display: inline-flex;
}
.footer-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px var(--glow);
}

/* ============================================================
   16. MODALS — animations soignées
   ============================================================ */
.project-modal-content {
  animation: modal-in 0.40s var(--ease-spring) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.86) translateY(32px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.project-modal-overlay {
  animation: overlay-in 0.28s ease both;
}
@keyframes overlay-in {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(4px); }
}
.project-modal-close {
  transition:
    transform        0.24s var(--ease-spring),
    background-color 0.2s ease,
    color            0.2s ease;
}
.project-modal-close:hover {
  transform: rotate(90deg) scale(1.18);
  background: rgba(var(--color-primary-rgb), 0.12);
  color: var(--color-primary);
}

/* ============================================================
   17. PROJECT DETAIL VIEW
   ============================================================ */
.project-detail[hidden] { display: none; }
.project-detail:not([hidden]) {
  animation: detail-in 0.45s var(--ease-smooth) both;
}
@keyframes detail-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   18. SECTION INDICATORS
   ============================================================ */
.section-indicator {
  transition: transform 0.28s var(--ease-spring), background-color 0.28s ease, box-shadow 0.28s ease !important;
}
.section-indicator:hover { transform: scale(1.55) !important; }
.section-indicator.active {
  box-shadow: 0 0 0 3px var(--glow), 0 0 14px var(--glow-mid) !important;
}

/* ============================================================
   19. CUSTOM CURSOR — états interactifs améliorés
   script.js gère le positionnement via CSS transform et ajoute
   la classe "hovering". animations-projets.css enrichit les effets
   visuels en s'appuyant sur cette même classe.
   ============================================================ */
.custom-cursor.hovering .custom-cursor__outline {
  width: 52px !important;
  height: 52px !important;
  background-color: rgba(var(--color-primary-rgb), 0.09) !important;
  border-color: rgba(var(--color-primary-rgb), 0.65) !important;
}
.custom-cursor.hovering .custom-cursor__dot {
  width: 0 !important;
  height: 0 !important;
}
.custom-cursor.clicking .custom-cursor__outline {
  width: 22px !important;
  height: 22px !important;
  background-color: rgba(var(--color-primary-rgb), 0.22) !important;
  border-color: var(--color-primary) !important;
}

/* ============================================================
   20. NO RESULTS
   ============================================================ */
.no-results-content svg {
  animation: search-bounce 2.4s ease-in-out infinite;
}
@keyframes search-bounce {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  40%       { transform: translateY(-12px) rotate(-6deg); }
  65%       { transform: translateY(-9px)  rotate(4deg); }
}

/* ============================================================
   21. TryHackMe BADGE OVERLAY
   ============================================================ */
.thm-badge-overlay__content {
  animation: modal-in 0.38s var(--ease-spring) both;
}

/* ============================================================
   22. FOCUS RINGS — accessibilité renforcée
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 4px var(--glow);
}
button:focus-visible,
a:focus-visible {
  border-radius: var(--radius-base, 8px);
}

/* ============================================================
   23. RESPONSIVE — effets allégés sur mobile
   ============================================================ */
@media (max-width: 768px) {
  /* Désactiver les effets lourds qui dégradent les perfs mobile */
  .project-card {
    transition-delay: 0s !important;
    /* Pas de tilt 3D sur mobile — géré par JS (window.innerWidth check) */
  }
  .hero-highlights li { transition: none !important; }
  .btn-primary { animation: none !important; }
  /* Parallax désactivé via JS, mais on supprime aussi en CSS */
  .hero { will-change: auto !important; }
}

@media (max-width: 480px) {
  /* Réduire les délais d'animation sur très petits écrans */
  .project-card:nth-child(3n+1),
  .project-card:nth-child(3n+2),
  .project-card:nth-child(3n+3) { transition-delay: 0s !important; }

  .cert-rootme__progress-bar {
    transition-duration: 1.2s !important;
  }
}

/* ============================================================
   24. TRANSITIONS THÈME — cohésion globale
   ============================================================ */
html.theme-transition .project-card,
html.theme-transition .about-card,
html.theme-transition .cert-card,
html.theme-transition .contact-form,
html.theme-transition .navbar,
html.theme-transition .footer {
  transition:
    background-color var(--duration-theme, 600ms) var(--ease-standard, cubic-bezier(0.16,1,0.3,1)),
    color var(--duration-theme, 600ms) var(--ease-standard, cubic-bezier(0.16,1,0.3,1)),
    border-color var(--duration-theme, 600ms) var(--ease-standard, cubic-bezier(0.16,1,0.3,1)) !important;
}

/* ============================================================
   25. KEYBOARD NAV INDICATOR
   ============================================================ */
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 14px var(--color-primary);
  animation: pulse-nav 1s infinite alternate;
  z-index: 50;
}
@keyframes pulse-nav {
  from { opacity: 0.45; box-shadow: 0 0 6px var(--color-primary); }
  to   { opacity: 1;    box-shadow: 0 0 16px var(--color-primary); }
}