/* ═══════════════════════════════════════════════════════════
   T&K VISUAL STYLES v1.0
   Animations · Reveals · Glows · Gradients · Effects
═══════════════════════════════════════════════════════════ */

/* ── SCROLL REVEAL ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ── GLOW EFFECTS ──────────────────────────────────────── */
.glow-green {
  color: #7DE23A;
  text-shadow: 0 0 20px rgba(125,226,58,0.5),
               0 0 40px rgba(125,226,58,0.25),
               0 0 80px rgba(125,226,58,0.1);
  animation: glowPulse 3s ease-in-out infinite;
}
.glow-border {
  border: 1px solid rgba(125,226,58,0.3);
  box-shadow: 0 0 20px rgba(125,226,58,0.1),
              inset 0 0 20px rgba(125,226,58,0.03);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.glow-border:hover {
  border-color: rgba(125,226,58,0.6);
  box-shadow: 0 0 30px rgba(125,226,58,0.2),
              inset 0 0 20px rgba(125,226,58,0.05);
}
@keyframes glowPulse {
  0%,100% { text-shadow: 0 0 20px rgba(125,226,58,0.4),0 0 40px rgba(125,226,58,0.2); }
  50% { text-shadow: 0 0 40px rgba(125,226,58,0.7),0 0 80px rgba(125,226,58,0.35),0 0 120px rgba(125,226,58,0.15); }
}

/* ── HERO PARTICLE CANVAS ──────────────────────────────── */
.hero-particle-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
}

/* ── MESH CANVAS ───────────────────────────────────────── */
#mesh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── GRADIENT BORDER ANIMATION ─────────────────────────── */
.gradient-border {
  position: relative;
  z-index: 0;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(125,226,58,0.6), transparent, rgba(125,226,58,0.3), transparent);
  z-index: -1;
  animation: rotateBorder 4s linear infinite;
  border-radius: inherit;
}
@keyframes rotateBorder {
  to { transform: rotate(360deg); }
}

/* ── SCAN LINE EFFECT ──────────────────────────────────── */
.scanline::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(125,226,58,0.03), transparent);
  animation: scan 4s linear infinite;
  pointer-events: none;
}
@keyframes scan { to { top: 200%; } }

/* ── COUNTER NUMBERS ───────────────────────────────────── */
.counter-num {
  font-family: 'Bebas Neue', sans-serif;
  color: #7DE23A;
  line-height: 1;
  transition: color 0.3s;
}

/* ── FLOW PATH ANIMATION ───────────────────────────────── */
@keyframes drawPath {
  to { stroke-dashoffset: 0; }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes flowDot {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.traveling-dot {
  animation: flowDot 3s linear infinite;
  offset-rotate: auto;
}

/* ── GLITCH HEADLINE ───────────────────────────────────── */
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.glitch::before {
  color: rgba(125,226,58,0.5);
  animation: glitchTop 4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
  color: rgba(0,100,255,0.3);
  animation: glitchBot 4s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
@keyframes glitchTop {
  0%,85%,100% { transform: none; opacity: 0; }
  86% { transform: translate(-2px, -2px); opacity: 0.8; }
  87% { transform: translate(2px, 0); opacity: 0.5; }
  88% { transform: none; opacity: 0; }
}
@keyframes glitchBot {
  0%,90%,100% { transform: none; opacity: 0; }
  91% { transform: translate(2px, 2px); opacity: 0.8; }
  92% { transform: translate(-1px, 0); opacity: 0.4; }
  93% { transform: none; opacity: 0; }
}

/* ── HOVER LIFT CARDS ──────────────────────────────────── */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 20px rgba(125,226,58,0.08);
}

/* ── NEON BUTTON ───────────────────────────────────────── */
.btn-neon {
  position: relative;
  background: transparent;
  color: #7DE23A;
  border: 1.5px solid #7DE23A;
  padding: 0.9rem 2.25rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s;
  box-shadow: 0 0 10px rgba(125,226,58,0.2), inset 0 0 10px rgba(125,226,58,0.05);
}
.btn-neon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #7DE23A;
  transform: translateX(-101%);
  transition: transform 0.3s ease;
  z-index: -1;
}
.btn-neon:hover { color: #000; }
.btn-neon:hover::before { transform: translateX(0); }

/* ── STAT STRIP GLOW ───────────────────────────────────── */
.stat-glow {
  position: relative;
}
.stat-glow::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #7DE23A, transparent);
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
  0%,100% { opacity: 0.3; left: 20%; right: 20%; }
  50%      { opacity: 1;   left: 5%;  right: 5%; }
}

/* ── MOLECULE FLOAT ────────────────────────────────────── */
@keyframes moleculeFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(120deg); }
  66% { transform: translateY(6px) rotate(240deg); }
}
.molecule-float { animation: moleculeFloat 6s ease-in-out infinite; }
.molecule-float:nth-child(2) { animation-delay: -2s; }
.molecule-float:nth-child(3) { animation-delay: -4s; }

/* ── TYPING CURSOR ─────────────────────────────────────── */
.typing-cursor::after {
  content: '|';
  color: #7DE23A;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── BACKGROUND GRID ───────────────────────────────────── */
.bg-grid {
  background-image:
    linear-gradient(rgba(125,226,58,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,226,58,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── ENERGY LINE ───────────────────────────────────────── */
.energy-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, #7DE23A, transparent);
  animation: energyPulse 2s ease-in-out infinite;
}
@keyframes energyPulse {
  0%,100% { opacity: 0.3; transform: scaleX(0.5); }
  50%      { opacity: 1;   transform: scaleX(1); }
}

/* ── CORNER BRACKETS ───────────────────────────────────── */
.corner-brackets {
  position: relative;
}
.corner-brackets::before,
.corner-brackets::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: #7DE23A;
  border-style: solid;
  opacity: 0.4;
}
.corner-brackets::before {
  top: -4px; left: -4px;
  border-width: 1px 0 0 1px;
}
.corner-brackets::after {
  bottom: -4px; right: -4px;
  border-width: 0 1px 1px 0;
}