/* =====================================================
   App.ppA — ANIMATIONS CSS
   Keyframes & scroll-driven effects
   ===================================================== */

/* ─── PAGE LOAD ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── TICKER ─────────────────────────────────────── */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tickerReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ─── FLOATING OBJECTS ───────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-20px) rotate(5deg); }
  66%       { transform: translateY(10px) rotate(-3deg); }
}
@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(15px) rotate(-4deg); }
  66%       { transform: translateY(-12px) rotate(6deg); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
  50%       { transform: translateY(-30px) rotate(8deg) scale(1.05); }
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(30px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}

/* ─── PULSE / GLOW ───────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--amber-glow); }
  50%       { opacity: 0.7; box-shadow: 0 0 20px 10px var(--amber-glow); }
}
@keyframes pulseCyan {
  0%, 100% { box-shadow: 0 0 0 0 var(--cyan-glow); }
  50%       { box-shadow: 0 0 24px 8px var(--cyan-glow); }
}
@keyframes glowAmber {
  0%, 100% { text-shadow: 0 0 20px rgba(232, 184, 75, 0.3); }
  50%       { text-shadow: 0 0 60px rgba(232, 184, 75, 0.8), 0 0 120px rgba(232, 184, 75, 0.4); }
}

/* ─── HEARTBEAT (logo pp cyan) ────────────────── */
@keyframes heartbeat {
  0%          { transform: scale(1); }
  10%         { transform: scale(1.7); }  /* 1er battement — très fort */
  18%         { transform: scale(0.9); }
  26%         { transform: scale(1.3); }  /* 2e battement — moyen */
  36%         { transform: scale(1); }
  100%        { transform: scale(1); }
}

/* Application sur les "pp" bleus du logo */
.nav-logo .dot {
  display: inline-block !important;
  position: relative;
  z-index: 10; /* Assure que le "pp" passe au-dessus du "A" */
  animation: heartbeat 2.5s ease-in-out infinite;
  transform-origin: center right; /* S'étend vers le "A" */
  will-change: transform;
}

/* ─── GRADIENT SHIFT ─────────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes gradientRotate {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* ─── SPIN ───────────────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* ─── DRAW / LINE ────────────────────────────────── */
@keyframes drawLine {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes drawLineV {
  from { height: 0; }
  to   { height: 100%; }
}

/* ─── COUNTER ────────────────────────────────────── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── BLINK CURSOR ───────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── HERO TITLE REVEAL ──────────────────────────── */
@keyframes letterReveal {
  from { 
    opacity: 0; 
    transform: translateY(100%) rotateX(-90deg); 
    filter: blur(8px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0) rotateX(0deg); 
    filter: blur(0px);
  }
}

/* ─── WIPE / CLIP ────────────────────────────────── */
@keyframes wipeRight {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes wipeUp {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ─── TIMELINE FRAME ─────────────────────────────── */
@keyframes frameOpen {
  from {
    opacity: 0;
    transform: scaleY(0) translateY(-20px);
    transform-origin: top;
  }
  to {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    transform-origin: top;
  }
}
@keyframes nodeActivate {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 var(--amber-glow); }
  50%  { transform: scale(1.2); box-shadow: 0 0 0 12px var(--amber-glow); }
  100% { transform: scale(1); box-shadow: 0 0 0 20px transparent; }
}

/* ─── GRID REVEAL ────────────────────────────────── */
@keyframes gridItemIn {
  from { 
    opacity: 0; 
    transform: scale(0.9) translateY(30px); 
    filter: blur(4px); 
  }
  to { 
    opacity: 1; 
    transform: scale(1) translateY(0); 
    filter: blur(0); 
  }
}

/* ─── SCROLL PROGRESS BAR ────────────────────────── */
@keyframes progressGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─── NOISE ──────────────────────────────────────── */
@keyframes noiseShift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-1%, -1%); }
  20%  { transform: translate(1%, 1%); }
  30%  { transform: translate(-1%, 1%); }
  40%  { transform: translate(1%, -1%); }
  50%  { transform: translate(-2%, 0); }
  60%  { transform: translate(0, 2%); }
  70%  { transform: translate(2%, -2%); }
  80%  { transform: translate(-2%, 2%); }
  90%  { transform: translate(1%, -1%); }
  100% { transform: translate(0, 0); }
}

/* ─── 3D CUBE ────────────────────────────────────── */
@keyframes rotateCube {
  0%   { transform: rotateX(0deg)   rotateY(0deg); }
  25%  { transform: rotateX(90deg)  rotateY(90deg); }
  50%  { transform: rotateX(180deg) rotateY(180deg); }
  75%  { transform: rotateX(270deg) rotateY(270deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* ─── UTILITY CLASSES ────────────────────────────── */
.animate-float      { animation: float 6s ease-in-out infinite; }
.animate-float-rev  { animation: floatReverse 7s ease-in-out infinite; }
.animate-float-slow { animation: floatSlow 10s ease-in-out infinite; }
.animate-spin-slow  { animation: spinSlow 20s linear infinite; }
.animate-pulse-amber{ animation: pulse 3s ease-in-out infinite; }
.animate-pulse-cyan { animation: pulseCyan 3s ease-in-out infinite; }
.animate-glow       { animation: glowAmber 4s ease-in-out infinite; }
.animate-gradient   { 
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite; 
}

/* ─── HERO INTRO ANIMATION ───────────────────────── */
.hero-enter {
  animation: fadeUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hero-enter-1 { animation-delay: 0.1s; }
.hero-enter-2 { animation-delay: 0.25s; }
.hero-enter-3 { animation-delay: 0.4s; }
.hero-enter-4 { animation-delay: 0.55s; }
.hero-enter-5 { animation-delay: 0.7s; }
.hero-enter-6 { animation-delay: 0.85s; }

/* ─── SCROLL PROGRESS ────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--amber), var(--cyan));
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}