/* ============================================================
   InfoTech Portal – Animaciones CSS
   ============================================================ */

/* ─── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideDown {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(.8,0,1,1); }
  50%       { transform: translateY(-12px); animation-timing-function: cubic-bezier(0,0,.2,1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes ripple {
  0%   { transform: scale(0); opacity: .4; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── CLASES UTILITARIAS ─────────────────────────────────────── */
.animate-fade-in     { animation: fadeIn     .5s ease both; }
.animate-fade-up     { animation: fadeInUp   .55s ease both; }
.animate-fade-down   { animation: fadeInDown .5s ease both; }
.animate-fade-left   { animation: fadeInLeft .5s ease both; }
.animate-fade-right  { animation: fadeInRight .5s ease both; }
.animate-scale-in    { animation: scaleIn    .4s ease both; }
.animate-bounce      { animation: bounce     1s infinite; }
.animate-pulse       { animation: pulse      2s ease infinite; }
.animate-spin        { animation: spin       1s linear infinite; }

/* Delays */
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }
.delay-600 { animation-delay: .6s; }
.delay-700 { animation-delay: .7s; }
.delay-800 { animation-delay: .8s; }

/* ─── HERO ANIMACIONES ───────────────────────────────────────── */
.hero-badge     { animation: fadeInDown .6s ease both; }
.hero h1        { animation: fadeInUp   .65s ease .1s both; }
.hero-desc      { animation: fadeInUp   .65s ease .2s both; }
.hero-actions   { animation: fadeInUp   .65s ease .3s both; }
.hero-visual    { animation: fadeInRight .7s ease .2s both; }

/* ─── CARD HOVER EFFECTS ─────────────────────────────────────── */
.card {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
}

/* ─── LOADING SPINNER ────────────────────────────────────────── */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #1a56db;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 2rem auto;
}
.spinner-sm {
  width: 20px; height: 20px;
  border-width: 2px;
}

/* ─── RIPPLE EFFECT EN BOTONES ───────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: ripple .55s linear;
  pointer-events: none;
}

/* ─── GRADIENTE ANIMADO ──────────────────────────────────────── */
.animated-gradient {
  background: linear-gradient(270deg, #1a56db, #3b82f6, #7c3aed, #1a56db);
  background-size: 600% 600%;
  animation: gradient-shift 6s ease infinite;
}

/* ─── TYPEWRITER ─────────────────────────────────────────────── */
.typewriter {
  overflow: hidden;
  border-right: 2px solid rgba(255,255,255,.75);
  white-space: nowrap;
  animation: typing 2.5s steps(40,end), blink-caret .75s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50%      { border-color: rgba(255,255,255,.75); }
}

/* ─── PROGRESS BAR ───────────────────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: 99px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}

/* ─── HOVER SCALE ────────────────────────────────────────────── */
.hover-scale {
  transition: transform .25s ease;
}
.hover-scale:hover { transform: scale(1.03); }

/* ─── GLOW EFFECT ────────────────────────────────────────────── */
.glow-on-hover {
  transition: box-shadow .3s ease;
}
.glow-on-hover:hover {
  box-shadow: 0 0 20px rgba(26,86,219,.4);
}

/* ─── COUNTER SECTION ────────────────────────────────────────── */
.counter-animated {
  animation: count-up .6s ease both;
}

/* ─── PAGE TRANSITION ────────────────────────────────────────── */
.page-enter {
  animation: fadeInUp .4s ease both;
}

/* ─── FLOATING ELEMENTS ──────────────────────────────────────── */
.float-slow { animation: float-slow 5s ease-in-out infinite; }
.float-fast { animation: float-fast 3s ease-in-out infinite; }
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-15px) rotate(2deg); }
}
@keyframes float-fast {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ─── SMOOTH APPEAR ON SCROLL ────────────────────────────────── */
.scroll-appear {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.scroll-appear.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger para grids */
.scroll-appear:nth-child(2) { transition-delay: .1s; }
.scroll-appear:nth-child(3) { transition-delay: .2s; }
.scroll-appear:nth-child(4) { transition-delay: .3s; }
.scroll-appear:nth-child(5) { transition-delay: .4s; }
.scroll-appear:nth-child(6) { transition-delay: .5s; }