/* Variables globales */
:root {
  --color-primary: #ee2bee;
  --color-primary-600: #d626d6;
  --color-secondary: #9d4edd;
  --color-bg-dark: #181118;
  --color-bg-light: #f8f6f8;
  --color-surface-dark: #271c27;
  --color-surface-dark-2: #2d1b2d;
  --color-border-dark: #392839;
  --color-text: #ffffff;
  --color-text-muted: #b99db9;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-primary: 0 0 20px rgba(238, 43, 238, 0.4);
  --font-display: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  --font-body: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

/* Reset & base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg-dark);
  color: var(--color-text);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* Thème clair optionnel via classe .light sur html */
html.light body { background: var(--color-bg-light); color: #0f0f0f; }

/* Utilitaires simples basés variables */
.bg-surface-dark { background: var(--color-surface-dark); }
.bg-surface-dark-2 { background: var(--color-surface-dark-2); }
.text-muted { color: var(--color-text-muted); }
.border-dark { border-color: var(--color-border-dark); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-primary { box-shadow: var(--shadow-primary); }
.gradient-text { background: linear-gradient(90deg, var(--color-primary), #a855f7); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Nav translucide */
.glass-nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Sélection */
::selection { background: var(--color-primary); color: #fff; }

/* Scrollbar WebKit */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-dark); }
::-webkit-scrollbar-thumb { background: var(--color-border-dark); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Animations utilitaires avancées */
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: .99; }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: .4; }
}
@keyframes eqPulse {
  0% { transform: scaleY(0.2); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.2); }
}
.animate-float { animation: floatY 6s ease-in-out infinite; }
.animate-flicker { animation: flicker 3s linear infinite; }

/* Equalizer bars (musique) */
.equalizer { display: flex; align-items: flex-end; gap: 4px; height: 72px; }
.equalizer span { display: block; width: 5px; height: 20%; background: var(--color-primary); border-radius: 3px; transform-origin: bottom; animation: eqPulse 1.1s ease-in-out infinite; opacity: .85; }
.equalizer.paused span { animation-play-state: paused; opacity: .4; }
.equalizer span:nth-child(1) { animation-delay: 0s; }
.equalizer span:nth-child(2) { animation-delay: .1s; }
.equalizer span:nth-child(3) { animation-delay: .2s; }
.equalizer span:nth-child(4) { animation-delay: .3s; }
.equalizer span:nth-child(5) { animation-delay: .4s; }
.equalizer span:nth-child(6) { animation-delay: .5s; }
.equalizer span:nth-child(7) { animation-delay: .6s; }
.equalizer span:nth-child(8) { animation-delay: .7s; }
.equalizer span:nth-child(9) { animation-delay: .8s; }

/* Mobile Nav Animations */
#navMenuMobile { transform-origin: top; }

/* Items start hidden until animation */
#navMenuMobile .flex.flex-col > * { opacity: 0; }

@keyframes menuScaleIn {
  0% { opacity: 0; transform: translateY(-8px) scaleY(0.98); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes menuScaleOut {
  0% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; }
  100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes itemFadeUp {
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

#navMenuMobile.mobile-menu-enter {
  animation: menuScaleIn 300ms ease-in-out forwards;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#navMenuMobile.mobile-menu-exit {
  animation: menuScaleOut 200ms ease-out forwards;
  background-color: transparent !important;
  transition: background-color 150ms ease-out;
}

/* Items fade out instantly */
#navMenuMobile.mobile-menu-exit .flex.flex-col > * {
  opacity: 0;
  transition: opacity 100ms ease-out;
}

/* Stagger items inside the mobile menu - start with 60ms base delay after menu opens */
#navMenuMobile.mobile-menu-enter .flex.flex-col > * { animation: itemFadeUp 300ms ease-out forwards; }
#navMenuMobile.mobile-menu-enter .flex.flex-col > *:nth-child(1) { animation-delay: 60ms; }
#navMenuMobile.mobile-menu-enter .flex.flex-col > *:nth-child(2) { animation-delay: 100ms; }
#navMenuMobile.mobile-menu-enter .flex.flex-col > *:nth-child(3) { animation-delay: 140ms; }
#navMenuMobile.mobile-menu-enter .flex.flex-col > *:nth-child(4) { animation-delay: 180ms; }
#navMenuMobile.mobile-menu-enter .flex.flex-col > *:nth-child(5) { animation-delay: 220ms; }

/* Overlay behind mobile menu */
.nav-overlay {
  position: fixed; inset: 0; z-index: 40; opacity: 0;
  background: rgba(18, 12, 24, 0.55);
  transition: opacity 250ms ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nav-overlay.in { opacity: 1; }
.equalizer span:nth-child(10) { animation-delay: .9s; }

/* Entrée progressive des éléments */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; transition-delay: var(--delay, 0s); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal.scale { transform: translateY(24px) scale(.98); }
.reveal.scale.in-view { transform: translateY(0) scale(1); }
.reveal-group [data-animate-child] { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; transition-delay: var(--delay, 0s); }
.reveal-group.in-view [data-animate-child] { opacity: 1; transform: translateY(0); }

/* Hover zoom pour cartes cinéma */
.hover-zoom { position: relative; overflow: hidden; }
.hover-zoom img { transition: transform 1.2s ease, opacity .6s ease; transform: scale(1.02); }
.hover-zoom:hover img { transform: scale(1.12); }

/* Neon border / glow helpers */
.neon-glow { box-shadow: 0 0 30px rgba(238, 43, 238, 0.25); }
.neon-outline { outline: 1px solid rgba(238, 43, 238, 0.35); outline-offset: -1px; }

/* Glass card */
.glass-card { background: rgba(34, 16, 34, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.06); }

/* Text glow */
.text-glow { text-shadow: 0 0 10px rgba(238, 43, 238, .5); }


.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to right, #ee2bee, #c084fc);
}
.timeline-line {
    background: linear-gradient(to bottom, #ee2bee 0%, #543b54 50%, #221022 100%);
}.reveal-text {
    opacity: 0;
    animation: reveal 1s ease-out forwards;
}
@keyframes reveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}@keyframes fillBar {
    from { width: 0%; }
}
.skill-fill {
    animation: fillBar 1.5s ease-out forwards;
}