/* ============================================================
   ISZY.CLOUD — ANIMATIONS
   ============================================================ */

/* ─── KEYFRAMES ─────────────────────────────────────────── */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--green), 0 0 16px var(--green-glow2); }
  50%       { opacity: 0.5; box-shadow: 0 0 4px var(--green); }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes flicker {
  0%, 97%, 100% { opacity: 1; }
  98%            { opacity: 0.4; }
  99%            { opacity: 0.9; }
}

@keyframes glitch {
  0%   { clip-path: inset(0 0 98% 0); transform: translate(0); }
  10%  { clip-path: inset(30% 0 50% 0); transform: translate(-3px, 0); }
  20%  { clip-path: inset(70% 0 10% 0); transform: translate(3px, 0); }
  30%  { clip-path: inset(10% 0 80% 0); transform: translate(0); }
  40%  { clip-path: inset(60% 0 20% 0); transform: translate(-2px, 0); }
  50%  { clip-path: inset(0 0 98% 0); transform: translate(0); }
  100% { clip-path: inset(0 0 98% 0); transform: translate(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gridScroll {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

@keyframes borderPulse {
  0%, 100% { border-color: var(--border); }
  50%       { border-color: var(--green-dim); }
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

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

@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─── BACKGROUND GRID ───────────────────────────────────── */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridScroll 8s linear infinite;
  opacity: 0.4;
  pointer-events: none;
}

/* Radial vignette over grid */
.bg-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 20%, var(--deep) 80%);
}

/* ─── SCANLINE OVERLAY ──────────────────────────────────── */
.scanline {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--green-glow), transparent);
  animation: scanline 6s linear infinite;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.4;
}

/* ─── GLITCH TEXT ───────────────────────────────────────── */
.glitch {
  position: relative;
  animation: flicker 8s infinite;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  color: var(--green);
}
.glitch::before {
  animation: glitch 4s infinite;
  color: #00ff41;
  text-shadow: 2px 0 #ff0055;
  opacity: 0.7;
}
.glitch::after {
  animation: glitch 4s infinite 0.1s;
  color: #00ff41;
  text-shadow: -2px 0 #00ffff;
  opacity: 0.7;
}

/* ─── TYPEWRITER ────────────────────────────────────────── */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--green);
  animation:
    typewriter 2s steps(40) 0.5s both,
    blink 0.8s step-end infinite;
}

/* ─── REVEAL ON LOAD ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out) forwards;
}
.reveal-1 { animation-delay: 0.1s; }
.reveal-2 { animation-delay: 0.3s; }
.reveal-3 { animation-delay: 0.5s; }
.reveal-4 { animation-delay: 0.7s; }
.reveal-5 { animation-delay: 0.9s; }
.reveal-6 { animation-delay: 1.1s; }

/* ─── HOVER EFFECTS ─────────────────────────────────────── */
.hover-glow {
  transition: all 0.3s var(--ease-out);
}
.hover-glow:hover {
  border-color: var(--green-dim) !important;
  box-shadow: 0 0 20px var(--green-glow), 0 4px 20px rgba(0,0,0,0.5);
  transform: translateY(-4px);
}

/* ─── ANIMATED BORDER ───────────────────────────────────── */
.border-pulse {
  animation: borderPulse 3s ease-in-out infinite;
}

/* ─── SHIMMER ───────────────────────────────────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--text-secondary) 0%,
    var(--green) 50%,
    var(--text-secondary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}