/* ============================================================
   Vic Tech – Animations
   ============================================================ */

/* ---------- Scroll Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(.85);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.delay-1 { transition-delay: .1s !important; }
.delay-2 { transition-delay: .2s !important; }
.delay-3 { transition-delay: .3s !important; }
.delay-4 { transition-delay: .4s !important; }
.delay-5 { transition-delay: .5s !important; }
.delay-6 { transition-delay: .6s !important; }

/* ---------- Fade In ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in { animation: fadeIn .6s ease forwards; }

/* ---------- Slide Up ---------- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slideUp .6s ease forwards; }
.slide-up-1 { animation: slideUp .6s .1s ease both; }
.slide-up-2 { animation: slideUp .6s .2s ease both; }
.slide-up-3 { animation: slideUp .6s .3s ease both; }
.slide-up-4 { animation: slideUp .6s .4s ease both; }

/* ---------- Hero Entrance ---------- */
@keyframes heroEntrance {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge   { animation: heroEntrance .7s .1s ease both; }
.hero-title   { animation: heroEntrance .7s .2s ease both; }
.hero-sub     { animation: heroEntrance .7s .3s ease both; }
.hero-actions { animation: heroEntrance .7s .4s ease both; }
.hero-stats   { animation: heroEntrance .7s .5s ease both; }
.hero-visual  { animation: heroEntrance .9s .4s ease both; }

/* ---------- Pulse (glowing dot) ---------- */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 6px 2px rgba(16,185,129,.4); }
  50%       { box-shadow: 0 0 16px 6px rgba(16,185,129,.7); }
}
.glow-green { animation: glow-pulse 2.5s infinite; }

/* ---------- Number counter ---------- */
.counter-num { display: inline-block; }

/* ---------- Shimmer (skeleton loader placeholder) ---------- */
@keyframes shimmer {
  from { background-position: -600px 0; }
  to   { background-position: 600px 0; }
}
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 600px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* ---------- Bounce ---------- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.bounce { animation: bounce 2s ease infinite; }

/* ---------- Ripple ---------- */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple::after {
  content: '';
  position: absolute; border-radius: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,.35);
  transform: translate(-50%,-50%);
  transition: width .5s ease, height .5s ease, opacity .5s ease;
  opacity: 0;
}
.btn-ripple:active::after {
  width: 200px; height: 200px; opacity: 1; transition: 0s;
}

/* ---------- Card hover lift ---------- */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.15); }

/* ---------- Image zoom ---------- */
.img-zoom { overflow: hidden; border-radius: 12px; }
.img-zoom img { transition: transform .5s ease; }
.img-zoom:hover img { transform: scale(1.06); }

/* ---------- Gradient border glow ---------- */
.glow-border {
  position: relative;
}
.glow-border::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #2563EB, #10B981);
  z-index: -1;
  opacity: 0;
  transition: opacity .3s ease;
}
.glow-border:hover::before { opacity: 1; }

/* ---------- Typing cursor ---------- */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typing-cursor::after {
  content: '|';
  animation: blink-cursor 1s infinite;
  color: #10B981;
}