/* =============================================
   GNR TECH — Animations & Keyframes
   ============================================= */

/* ── Keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  10%       { transform: translate(-2%,-3%); }
  30%       { transform: translate(3%,2%); }
  50%       { transform: translate(-1%,3%); }
  70%       { transform: translate(2%,-2%); }
  90%       { transform: translate(-3%,1%); }
}
@keyframes lineSlide {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll-triggered reveal classes ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays */
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }
.reveal[data-delay="6"] { transition-delay: 0.6s; }

/* ── Hero entrance ── */
.hero-anim-1 { animation: fadeInDown 0.8s cubic-bezier(0.4,0,0.2,1) both 0.1s; }
.hero-anim-2 { animation: fadeInUp  0.8s cubic-bezier(0.4,0,0.2,1) both 0.25s; }
.hero-anim-3 { animation: fadeInUp  0.8s cubic-bezier(0.4,0,0.2,1) both 0.4s; }
.hero-anim-4 { animation: fadeInUp  0.8s cubic-bezier(0.4,0,0.2,1) both 0.55s; }

/* ── Number counter animation state ── */
.metric-value.counting { animation: countUp 0.5s ease both; }

/* ── Navbar fadeIn ── */
.navbar { animation: fadeInDown 0.6s cubic-bezier(0.4,0,0.2,1) both 0.05s; }

/* ── Cursor glow on card hover ── */
.diff-card, .value-card, .service-card, .testimonial-card {
  position: relative;
  overflow: hidden;
}
.diff-card::after,
.value-card::after,
.service-card::after,
.testimonial-card::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,255,0,0.07), transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
  left: var(--mx, 50%);
  top:  var(--my, 50%);
}
.diff-card:hover::after,
.value-card:hover::after,
.service-card:hover::after,
.testimonial-card:hover::after { opacity: 1; }

/* ── Accent text shimmer ── */
.hero__title em {
  background: linear-gradient(90deg, #ffffff 0%, #a0a0a0 40%, #ffffff 60%, #d0d0d0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}