/* ============================================================
   SILVER WOLF LV.999 — ANIMATIONS.CSS v2
   ============================================================ */

/* ================================================================
   KEYFRAMES FONDAMENTAUX
   ================================================================ */

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

@keyframes neonText {
  0%, 100% { text-shadow: 0 0 8px rgba(168,85,247,0.4); }
  50% { text-shadow: 0 0 18px rgba(168,85,247,0.8), 0 0 35px rgba(124,58,237,0.4); }
}

@keyframes goldGlow {
  0%, 100% { text-shadow: 0 0 6px rgba(245,158,11,0.3); }
  50% { text-shadow: 0 0 14px rgba(245,158,11,0.65), 0 0 28px rgba(245,158,11,0.2); }
}

@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.35; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.1; }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 0.9; }
}

/* ================================================================
   SCANLINE AVATAR
   ================================================================ */

.avatar-hud::after {
  content: '';
  position: absolute; top: -4px; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(6,182,212,0.8), transparent);
  z-index: 10; pointer-events: none;
  animation: avatarScan 3.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(6,182,212,0.6);
}

@keyframes avatarScan {
  0% { top: -4px; opacity: 0; }
  5% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}

/* ================================================================
   GLITCH — NOM PRINCIPAL
   ================================================================ */

.glitch { position: relative; }

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  font: inherit;
}

.glitch::before {
  color: var(--cyan);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
  animation: glitchHigh 5s infinite linear;
  left: 3px;
}

.glitch::after {
  color: #ff3860;
  clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
  animation: glitchLow 5s infinite linear;
  left: -3px;
}

@keyframes glitchHigh {
  0%, 88%, 100% { transform: none; opacity: 0; }
  89% { transform: translateX(-5px) skewX(-3deg); opacity: 0.85; }
  90% { transform: translateX(5px) skewX(3deg); opacity: 0.6; }
  91% { transform: translateX(-2px); opacity: 0.8; }
  92% { transform: none; opacity: 0; }
  95% { transform: translateX(7px) skewX(-5deg); opacity: 0.65; }
  96% { transform: translateX(-4px); opacity: 0; }
}

@keyframes glitchLow {
  0%, 83%, 100% { transform: none; opacity: 0; }
  84% { transform: translateX(5px) skewX(4deg); opacity: 0.7; }
  85% { transform: translateX(-5px) skewX(-4deg); opacity: 0.5; }
  86% { transform: translateX(2px); opacity: 0.7; }
  87% { transform: none; opacity: 0; }
  92% { transform: translateX(-8px) skewX(5deg); opacity: 0.6; }
  93% { transform: translateX(3px); opacity: 0; }
}

/* ================================================================
   GLITCH BUTTON HOVER
   ================================================================ */

.glitch-btn { position: relative; overflow: hidden; }
.glitch-btn::before {
  content: attr(data-text);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cyan), var(--violet-light));
  color: #fff; font: inherit; letter-spacing: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glitch-btn:hover::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* ================================================================
   REVEAL ON SCROLL
   ================================================================ */

.reveal-up, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
  transition-delay: var(--delay, 0s);
}
.reveal-up    { transform: translateY(36px); }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-up.revealed, .reveal-left.revealed, .reveal-right.revealed {
  opacity: 1; transform: none;
}

/* ================================================================
   TERMINAL — LIGNES
   ================================================================ */

.terminal-line {
  animation: terminalIn 0.04s ease forwards;
  opacity: 0;
}
.terminal-line:nth-child(1)  { animation-delay: 0.3s; }
.terminal-line:nth-child(2)  { animation-delay: 0.6s; }
.terminal-line:nth-child(3)  { animation-delay: 0.9s; }
.terminal-line:nth-child(4)  { animation-delay: 1.1s; }
.terminal-line:nth-child(5)  { animation-delay: 1.3s; }
.terminal-line:nth-child(6)  { animation-delay: 1.5s; }
.terminal-line:nth-child(7)  { animation-delay: 1.7s; }
.terminal-line:nth-child(8)  { animation-delay: 2.0s; }
.terminal-line:nth-child(9)  { animation-delay: 2.2s; }
.terminal-line:nth-child(10) { animation-delay: 2.5s; }
.terminal-line:nth-child(11) { animation-delay: 2.8s; }
.terminal-line:nth-child(12) { animation-delay: 3.0s; }

@keyframes terminalIn {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================
   PRICING CARD — TOP SHINE ON LOAD
   ================================================================ */

.pricing-card {
  --shine-x: -100%;
}
.pricing-card::after {
  content: '';
  position: absolute; top: 0; left: var(--shine-x, -100%);
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
  transition: left 0.6s ease;
}
.pricing-card:hover::after { left: 150%; }

/* ================================================================
   HERO — ENTRÉE SÉQUENTIELLE
   ================================================================ */

.lv-badge      { animation: fadeUp 0.7s ease 0.15s both; }
.avatar-wrapper { animation: fadeUp 0.8s ease 0.25s both; }
.hero-path     { animation: fadeUp 0.7s ease 0.35s both; }
.hero-name     { animation: fadeUp 0.8s ease 0.45s both; }
.hero-typewriter { animation: fadeUp 0.7s ease 0.55s both; }
.hero-tagline  { animation: fadeUp 0.7s ease 0.65s both; }
.hero-stats    { animation: fadeUp 0.7s ease 0.75s both; }
.hero-cta      { animation: fadeUp 0.7s ease 0.85s both; }
.hero-socials  { animation: fadeUp 0.7s ease 0.95s both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================
   PORTFOLIO — FILTRE TRANSITION
   ================================================================ */

.project-card { transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.3s, box-shadow 0.3s; }
.project-card.filtering-out { opacity: 0; transform: scale(0.92); pointer-events: none; }
.project-card.filtering-in  { animation: filterIn 0.4s ease forwards; }

@keyframes filterIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ================================================================
   MOBILE MENU — LIENS
   ================================================================ */

.mobile-menu.open .mobile-link { animation: slideInRight 0.4s ease forwards; opacity: 0; }
.mobile-menu.open li:nth-child(1) .mobile-link { animation-delay: 0.06s; }
.mobile-menu.open li:nth-child(2) .mobile-link { animation-delay: 0.12s; }
.mobile-menu.open li:nth-child(3) .mobile-link { animation-delay: 0.18s; }
.mobile-menu.open li:nth-child(4) .mobile-link { animation-delay: 0.24s; }
.mobile-menu.open li:nth-child(5) .mobile-link { animation-delay: 0.30s; }
.mobile-menu.open li:nth-child(6) .mobile-link { animation-delay: 0.36s; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

/* ================================================================
   NEON PULSE — PRICING FEATURED
   ================================================================ */

.pricing-featured {
  animation: featuredPulse 4s ease-in-out infinite;
}

@keyframes featuredPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(6,182,212,0.2), 0 0 40px rgba(6,182,212,0.08); }
  50% { box-shadow: 0 0 30px rgba(6,182,212,0.35), 0 0 60px rgba(6,182,212,0.15); }
}
.pricing-featured:hover { animation: none; }

/* ================================================================
   HUD CORNERS — HOVER TRANSITION
   ================================================================ */

.pricing-card:hover .hud-corner,
.testimonial-card:hover .hud-corner,
.contact-form:hover .hud-corner,
.calendly-panel:hover .hud-corner {
  border-color: var(--cyan);
}