/**
 * Vellao Cyber Layer
 * Effets one-shot et hover-only uniquement (pas d'animation perpétuelle)
 * - Glitch h1 au load (600ms)
 * - Sparklines path drawing au load (1.2s)
 * - Glitch numéros section via IntersectionObserver
 * - Glow néon hover cards
 * - Konami code easter egg
 */

/* GLITCH H1 — one-shot au load */
.vellao-page .hub-title em,
.vellao-page .token-title em,
.vellao-page .home-title em {
  position: relative; display: inline-block;
}
.vellao-page .hub-title em::before, .vellao-page .hub-title em::after,
.vellao-page .token-title em::before, .vellao-page .token-title em::after,
.vellao-page .home-title em::before, .vellao-page .home-title em::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; pointer-events: none;
  padding: 0 4px;
}
.vellao-page .hub-title em::before, .vellao-page .token-title em::before, .vellao-page .home-title em::before {
  color: var(--cyan);
  animation: vellaoGlitchTop 0.6s steps(2) 1 0.4s both;
}
.vellao-page .hub-title em::after, .vellao-page .token-title em::after, .vellao-page .home-title em::after {
  color: var(--red);
  animation: vellaoGlitchBot 0.6s steps(2) 1 0.4s both;
}

@keyframes vellaoGlitchTop {
  0% { clip-path: inset(0 0 80% 0); transform: translate(-3px,-1px); opacity:0.7; }
  20% { clip-path: inset(20% 0 60% 0); transform: translate(2px,0); opacity:0.6; }
  40% { clip-path: inset(40% 0 40% 0); transform: translate(-2px,1px); opacity:0.5; }
  60% { clip-path: inset(0 0 90% 0); transform: translate(1px,-1px); opacity:0.4; }
  100% { clip-path: inset(0 0 100% 0); opacity: 0; }
}
@keyframes vellaoGlitchBot {
  0% { clip-path: inset(80% 0 0 0); transform: translate(3px,1px); opacity:0.7; }
  20% { clip-path: inset(60% 0 20% 0); transform: translate(-2px,0); opacity:0.6; }
  40% { clip-path: inset(40% 0 40% 0); transform: translate(2px,-1px); opacity:0.5; }
  60% { clip-path: inset(90% 0 0 0); transform: translate(-1px,1px); opacity:0.4; }
  100% { clip-path: inset(100% 0 0 0); opacity: 0; }
}

/* SPARKLINES — path drawing au load (one-shot) */
.vellao-page .vellao-spark path,
.vellao-page .tcm-spark path,
.vellao-page .token-spark path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: vellaoDrawPath 1.2s ease-out 0.3s 1 forwards;
}
.vellao-page .vellao-spark .area,
.vellao-page .tcm-spark .area,
.vellao-page .token-spark .area {
  opacity: 0;
  animation: vellaoFadeArea 0.8s ease-out 1.0s 1 forwards;
}
@keyframes vellaoDrawPath { to { stroke-dashoffset: 0; } }
@keyframes vellaoFadeArea { to { opacity: 1; } }

/* GLITCH NUMBERS — déclenché via IntersectionObserver (cf. JS) */
.vellao-page .hub-stat-num.is-visible,
.vellao-page .scam-evidence-amount.is-visible,
.vellao-page .dca-cell-value.is-visible {
  animation: vellaoNumGlitch 0.5s steps(3) 1;
}
@keyframes vellaoNumGlitch {
  0% { opacity: 0; transform: translate(0); }
  20% { opacity: 1; transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
  40% { transform: translate(2px, -1px); filter: hue-rotate(-90deg); }
  60% { transform: translate(-1px, 0); filter: hue-rotate(45deg); }
  100% { opacity: 1; transform: translate(0); filter: none; }
}

/* GLOW HOVER — token-card-mini renforcé */
.vellao-page .token-card-mini {
  position: relative;
}
.vellao-page .token-card-mini::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,212,0,0) 0%, rgba(255,212,0,0) 100%);
  transition: background 0.25s;
}
.vellao-page .token-card-mini:hover::after {
  background: linear-gradient(135deg, rgba(255,212,0,0.04) 0%, transparent 50%, rgba(34,211,238,0.04) 100%);
}

/* GLOW HOVER — fees-row */
.vellao-page .fees-row {
  position: relative; transition: all 0.18s;
}
.vellao-page .fees-row:not(.head):hover {
  transform: translateX(2px);
}
.vellao-page .fees-row.winner:not(.head):hover {
  background: linear-gradient(90deg, rgba(74,222,128,0.18), transparent 70%);
  box-shadow: inset 3px 0 0 var(--green), 0 0 30px -10px rgba(74,222,128,0.4);
}
.vellao-page .fees-row.loser:not(.head):hover {
  background: linear-gradient(90deg, rgba(239,68,68,0.15), transparent 70%);
  box-shadow: inset 3px 0 0 var(--red), 0 0 30px -10px rgba(239,68,68,0.3);
}

/* GLOW HOVER — DCA value */
.vellao-page .dca-cell-value.savings {
  text-shadow: 0 0 0 transparent;
  transition: text-shadow 0.3s;
}
.vellao-page .dca-calculator:hover .dca-cell-value.savings {
  text-shadow: 0 0 16px rgba(255,212,0,0.5);
}

/* GLOW HOVER — pillars (homepage) */
.vellao-home-page .pillar { transition: all 0.25s; position: relative; }
.vellao-home-page .pillar::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(135deg, transparent 0%, transparent 100%);
  transition: background 0.3s;
  z-index: -1;
}
.vellao-home-page .pillar:hover {
  transform: translateY(-2px);
}
.vellao-home-page .pillar:hover::before {
  background: linear-gradient(135deg, rgba(255,212,0,0.3) 0%, transparent 50%, rgba(34,211,238,0.2) 100%);
}

/* CTA HEADER — glow subtil */
.vellao-page .cta-header {
  box-shadow: 0 0 0 0 rgba(255,212,0,0);
  transition: all 0.2s;
}
.vellao-page .cta-header:hover {
  box-shadow: 0 0 24px -4px rgba(255,212,0,0.6);
}

/* SEPARATOR — slight color shift on hover */
.vellao-page .vellao-separator { transition: color 0.3s; }
.vellao-page .vellao-separator:hover .label { color: var(--cyan); }

/* KONAMI MODE — activé via JS, ajoute des effets random */
.vellao-page.konami-mode {
  animation: vellaoKonami 2s ease-out 1;
}
.vellao-page.konami-mode::before {
  content: "// KONAMI ACTIVATED · ↑↑↓↓←→←→BA · vous êtes l'un des nôtres";
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg); color: var(--yellow);
  padding: 12px 20px; border: 1px solid var(--yellow);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  z-index: 9999; border-radius: 2px;
  animation: vellaoKonamiBanner 5s ease-out 1 forwards;
}
@keyframes vellaoKonami {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(180deg); }
  100% { filter: hue-rotate(0deg); }
}
@keyframes vellaoKonamiBanner {
  0% { opacity: 0; transform: translate(-50%, -20px); }
  10% { opacity: 1; transform: translate(-50%, 0); }
  90% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); pointer-events: none; }
}

/* MOBILE : disable cyber effects */
@media (max-width: 768px) {
  .vellao-page .hub-title em::before, .vellao-page .hub-title em::after,
  .vellao-page .token-title em::before, .vellao-page .token-title em::after,
  .vellao-page .home-title em::before, .vellao-page .home-title em::after {
    animation: none;
    display: none;
  }
  .vellao-page .vellao-spark path, .vellao-page .tcm-spark path, .vellao-page .token-spark path {
    stroke-dasharray: none; stroke-dashoffset: 0; animation: none;
  }
  .vellao-page .vellao-spark .area, .vellao-page .tcm-spark .area, .vellao-page .token-spark .area {
    opacity: 1; animation: none;
  }
}