/* ================================
   Scopum Web — animations.css
   Glitch, orbite keyframes, glow, reveal
   ================================ */

/* ================================
   GLITCH EFFECT
   ================================ */
.glitch {
  position: relative;
  display: inline-block;
  animation: glitch-skew 6s infinite linear alternate-reverse;
}

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

/* Couche cyan — haut */
.glitch::before {
  color: #22D3EE;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  animation: glitch-anim-top 5s infinite linear alternate-reverse;
  opacity: 0.85;
}

/* Couche violet — bas */
.glitch::after {
  color: #A78BFA;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  animation: glitch-anim-bot 5s 0.3s infinite linear alternate-reverse;
  opacity: 0.85;
}

/* Skew global léger */
@keyframes glitch-skew {
  0%   { transform: skewX(0deg); }
  10%  { transform: skewX(0deg); }
  11%  { transform: skewX(-2deg); }
  12%  { transform: skewX(0deg); }
  40%  { transform: skewX(0deg); }
  41%  { transform: skewX(1.5deg); }
  42%  { transform: skewX(0deg); }
  70%  { transform: skewX(0deg); }
  71%  { transform: skewX(-1deg); }
  72%  { transform: skewX(0deg); }
  100% { transform: skewX(0deg); }
}

/* Couche haut — glitch horizontal */
@keyframes glitch-anim-top {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { transform: translate(0, 0); opacity: 0; }
  11%  { transform: translate(-4px, 0); opacity: 0.9; clip-path: polygon(0 12%, 100% 12%, 100% 28%, 0 28%); }
  12%  { transform: translate(4px, 0);  opacity: 0.8; clip-path: polygon(0 5%, 100% 5%, 100% 33%, 0 33%); }
  13%  { transform: translate(0, 0);   opacity: 0; }
  40%  { transform: translate(0, 0); opacity: 0; }
  41%  { transform: translate(3px, -2px); opacity: 0.85; clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); }
  42%  { transform: translate(-3px, 0);  opacity: 0.7; clip-path: polygon(0 10%, 100% 10%, 100% 33%, 0 33%); }
  43%  { transform: translate(0, 0); opacity: 0; }
  75%  { transform: translate(0, 0); opacity: 0; }
  76%  { transform: translate(-6px, 0); opacity: 0.9; clip-path: polygon(0 18%, 100% 18%, 100% 33%, 0 33%); }
  77%  { transform: translate(2px, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 0; }
}

/* Couche bas — glitch horizontal décalé */
@keyframes glitch-anim-bot {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { transform: translate(0, 0); opacity: 0; }
  16%  { transform: translate(5px, 0);  opacity: 0.9; clip-path: polygon(0 67%, 100% 67%, 100% 85%, 0 85%); }
  17%  { transform: translate(-3px, 0); opacity: 0.75; clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); }
  18%  { transform: translate(0, 0); opacity: 0; }
  50%  { transform: translate(0, 0); opacity: 0; }
  51%  { transform: translate(-4px, 2px); opacity: 0.85; clip-path: polygon(0 72%, 100% 72%, 100% 90%, 0 90%); }
  52%  { transform: translate(4px, 0);   opacity: 0.7; clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%); }
  53%  { transform: translate(0, 0); opacity: 0; }
  80%  { transform: translate(0, 0); opacity: 0; }
  81%  { transform: translate(6px, -1px); opacity: 0.9; clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%); }
  82%  { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 0; }
}

/* ================================
   ORBITE — Core pulse uniquement
   (L'animation des planètes est gérée par orbite.js via RAF)
   ================================ */

/* ================================
   GLOW PULSES
   ================================ */

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 30px rgba(139,92,246,0.4),
                inset 0 0 20px rgba(139,92,246,0.1);
  }
  50% {
    box-shadow: 0 0 60px rgba(139,92,246,0.65),
                0 0 100px rgba(139,92,246,0.15),
                inset 0 0 30px rgba(139,92,246,0.18);
  }
}

@keyframes glow-cyan-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(34,211,238,0.3); }
  50%       { box-shadow: 0 0 40px rgba(34,211,238,0.6); }
}

/* ================================
   SCROLL REVEAL (GSAP targets)
   ================================ */

/* Éléments initialement invisibles avant GSAP */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
}
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
}

/* ================================
   HERO ENTER ANIMATION
   ================================ */

/* Animation d'entrée cinématique du hero au chargement */
@keyframes hero-enter-title {
  from {
    opacity: 0;
    transform: translateY(30px);
    letter-spacing: 8px;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 2px;
  }
}

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

@keyframes hero-enter-cta {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Combinaison glitch + hero-enter sur le même élément */
.glitch.hero-main-title {
  animation:
    hero-enter-title 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both,
    glitch-skew 6s 1.8s infinite linear alternate-reverse;
}
.hero-sub {
  animation: hero-enter-sub 0.8s ease 0.9s both;
}
.hero-cta-group {
  animation: hero-enter-cta 0.8s ease 1.2s both;
}
.scroll-hint {
  animation: hero-enter-cta 0.8s ease 1.8s both, float-hint 2.5s ease-in-out 2.6s infinite;
}

/* ================================
   SCANLINE OVERLAY (Hero)
   ================================ */
.hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(139,92,246,0.015) 2px,
    rgba(139,92,246,0.015) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ================================
   SECTION DIVIDERS
   ================================ */

.section-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  margin: 0 auto 50px;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(139,92,246,0.5);
}

/* ================================
   FLOATING DOT PARTICLES (CSS only)
   Pour les sections sans Three.js
   ================================ */

@keyframes float-particle {
  0%   { transform: translateY(0) translateX(0); opacity: 0.4; }
  33%  { transform: translateY(-20px) translateX(10px); opacity: 0.8; }
  66%  { transform: translateY(-10px) translateX(-8px); opacity: 0.5; }
  100% { transform: translateY(0) translateX(0); opacity: 0.4; }
}

/* ================================
   GRADIENT TEXT ANIMATION
   ================================ */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text-animated {
  background: linear-gradient(270deg, #8B5CF6, #22D3EE, #A78BFA, #06B6D4);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease infinite;
}

/* ================================
   COUNTER ANIMATION
   ================================ */
.counter-done {
  animation: counter-pop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes counter-pop {
  0%   { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ================================
   NAV LINK ACTIVE
   ================================ */
nav a.active-page {
  color: var(--cyan) !important;
}
nav a.active-page::after {
  width: 100% !important;
}