/* ============================================================
   FEKRA — Keyframes, Reveal System, Interactive Card Glow
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(1,251,29,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(1,251,29,0); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes marqueeLoop {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); } /* 1 of 4 groups = exactly 25% of track width */
}
@keyframes scrollAnim {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* Services page keyframes */
@keyframes ringPulse  { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes radarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes radarPing  { 0%,100% { opacity:0.6; } 50% { opacity:0.2; } }
@keyframes blipFade   { 0%,100% { opacity:1; transform:translate(-50%,-50%) scale(1); } 50% { opacity:0.3; transform:translate(-50%,-50%) scale(0.7); } }
@keyframes recBlink   { 0%,100% { opacity:1; } 50% { opacity:0.2; } }
@keyframes cursorFloat { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-8px,-6px); } }

/* ── Glow element animations ────────────────────────────────── */
.glow-1 { animation: glowPulse 4s ease-in-out infinite; }
.glow-2 { animation: glowPulse 4s ease-in-out infinite 2s; }
.glow-3 { animation: glowPulse 4s ease-in-out infinite 1s; }

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.25,.8,.25,1), transform .7s cubic-bezier(.25,.8,.25,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Delay modifiers */
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
.reveal-delay-3 { transition-delay: .36s; }
.reveal-delay-4 { transition-delay: .48s; }

/* Hero reveals start hidden, activated by loader callback */
.hero-content .reveal         { opacity: 0; transform: translateY(28px); }
.hero-content .reveal.visible { opacity: 1; transform: translateY(0); }

/* Stagger via data-delay attribute */
[data-delay="0"] { transition-delay: 0s; }
[data-delay="1"] { transition-delay: .1s; }
[data-delay="2"] { transition-delay: .2s; }
[data-delay="3"] { transition-delay: .3s; }
[data-delay="4"] { transition-delay: .4s; }

/* ── Cursor blink utility ───────────────────────────────────── */
.cursor-blink { animation: blink 1s step-end infinite; }

/* ── Interactive card — neon hover glow ─────────────────────── */
.interactive-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.card-hover-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(1,166,81,0.26) 0%,
    rgba(1,166,81,0.08) 35%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: -1;
  filter: blur(10px);
  transition: opacity .3s ease;
  will-change: left, top;
}
.interactive-card:hover .card-hover-glow { opacity: 1; }