/* ============================================================
   TWSFA — Animations & Keyframes | animations.css
   ============================================================ */

/* --- Fade Animations --- */
@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(-30px); } 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 slideInLeft { from { opacity:0; transform:translateX(-50px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(50px); } to { opacity:1; transform:translateX(0); } }

/* --- Pulse & Glow --- */
@keyframes pulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.05); }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 10px rgba(0,180,216,0.3); }
  50%     { box-shadow: 0 0 30px rgba(0,180,216,0.7); }
}
@keyframes cyanBlink {
  0%,100% { opacity:1; }
  50%     { opacity:0.3; }
}

/* --- Spinning / Rotating --- */
@keyframes spin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes rotateSlow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* --- Bounce --- */
@keyframes bounce {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-10px); }
}
@keyframes floatUp {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}

/* --- Shimmer (loading skeleton) --- */
@keyframes shimmer {
  0%   { background-position:-1000px 0; }
  100% { background-position:1000px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #111f35 25%, #1a2d4a 50%, #111f35 75%);
  background-size:1000px 100%;
  animation:shimmer 1.5s infinite;
  border-radius:4px;
}

/* --- Typing Cursor --- */
@keyframes blink {
  0%,100% { opacity:1; }
  50%     { opacity:0; }
}

/* --- Star Twinkle --- */
@keyframes starTwinkle {
  0%,100% { opacity:0.3; transform:scale(1); }
  50%     { opacity:1; transform:scale(1.5); }
}

/* --- Hero Stars (CSS Generated) --- */
.star {
  position: absolute;
  border-radius: 50%;
  background: rgba(144,224,239,0.6);
  animation: starTwinkle var(--duration, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* --- Particle Float --- */
@keyframes particleFloat {
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { transform:translateY(-100vh) translateX(20px); opacity:0; }
}

/* --- Counter Count Up --- */
@keyframes countUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* --- Diagonal Slide --- */
@keyframes diagonalSlide {
  from { transform:translateX(-100%) skewX(-5deg); }
  to   { transform:translateX(0) skewX(0); }
}

/* --- Scale In --- */
@keyframes scaleIn {
  from { transform:scale(0.8); opacity:0; }
  to   { transform:scale(1); opacity:1; }
}

/* --- Progress Bar Fill --- */
@keyframes progressFill {
  from { width:0%; }
  to   { width:var(--target-width, 100%); }
}

/* --- Animation Utility Classes --- */
.animate-fadeIn     { animation:fadeIn 0.6s ease both; }
.animate-fadeInUp   { animation:fadeInUp 0.7s ease both; }
.animate-fadeInDown { animation:fadeInDown 0.7s ease both; }
.animate-fadeInLeft { animation:fadeInLeft 0.7s ease both; }
.animate-fadeInRight{ animation:fadeInRight 0.7s ease both; }
.animate-pulse      { animation:pulse 2s ease infinite; }
.animate-bounce     { animation:bounce 2s ease infinite; }
.animate-float      { animation:floatUp 3s ease infinite; }
.animate-spin       { animation:spin 1s linear infinite; }
.animate-glow       { animation:glowPulse 2s ease infinite; }
.animate-blink      { animation:cyanBlink 1.5s ease infinite; }
.animate-scaleIn    { animation:scaleIn 0.4s ease both; }

/* Delay Classes */
.delay-100 { animation-delay:0.1s; }
.delay-200 { animation-delay:0.2s; }
.delay-300 { animation-delay:0.3s; }
.delay-400 { animation-delay:0.4s; }
.delay-500 { animation-delay:0.5s; }
.delay-600 { animation-delay:0.6s; }
.delay-700 { animation-delay:0.7s; }
.delay-800 { animation-delay:0.8s; }

/* --- Hero Background Stars --- */
.stars-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.stars-container .star:nth-child(1)  { width:2px; height:2px; top:10%; left:20%; --duration:2.5s; --delay:0s; }
.stars-container .star:nth-child(2)  { width:3px; height:3px; top:30%; left:5%;  --duration:3s;   --delay:0.5s; }
.stars-container .star:nth-child(3)  { width:2px; height:2px; top:60%; left:15%; --duration:4s;   --delay:1s; }
.stars-container .star:nth-child(4)  { width:1px; height:1px; top:80%; left:30%; --duration:2s;   --delay:0.3s; }
.stars-container .star:nth-child(5)  { width:3px; height:3px; top:20%; left:75%; --duration:3.5s; --delay:0.8s; }
.stars-container .star:nth-child(6)  { width:2px; height:2px; top:50%; left:85%; --duration:2.8s; --delay:0.2s; }
.stars-container .star:nth-child(7)  { width:1px; height:1px; top:70%; left:70%; --duration:4.5s; --delay:1.5s; }
.stars-container .star:nth-child(8)  { width:3px; height:3px; top:15%; left:50%; --duration:3.2s; --delay:0.7s; }
.stars-container .star:nth-child(9)  { width:2px; height:2px; top:40%; left:60%; --duration:2.6s; --delay:0.4s; }
.stars-container .star:nth-child(10) { width:1px; height:1px; top:90%; left:45%; --duration:3.8s; --delay:1.2s; }
.stars-container .star:nth-child(11) { width:2px; height:2px; top:5%;  left:88%; --duration:2.2s; --delay:0.9s; }
.stars-container .star:nth-child(12) { width:3px; height:3px; top:75%; left:92%; --duration:4.2s; --delay:0.1s; }
.stars-container .star:nth-child(13) { width:1px; height:1px; top:35%; left:35%; --duration:3.1s; --delay:1.8s; }
.stars-container .star:nth-child(14) { width:2px; height:2px; top:55%; left:55%; --duration:2.9s; --delay:0.6s; }
.stars-container .star:nth-child(15) { width:2px; height:2px; top:25%; left:10%; --duration:3.7s; --delay:1.4s; }

/* --- Page Transition --- */
.page-transition {
  animation: fadeIn 0.4s ease;
}

/* --- Hover Lift --- */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,0,0,0.25); }

/* --- Cyan Underline Hover --- */
.underline-hover {
  position:relative;
  display:inline-block;
}
.underline-hover::after {
  content:'';
  position:absolute;
  bottom:-2px; left:0;
  width:0; height:2px;
  background:var(--cyan-primary);
  border-radius:2px;
  transition:width 0.3s ease;
}
.underline-hover:hover::after { width:100%; }

/* --- Loading Spinner --- */
.spinner {
  width:40px; height:40px;
  border:3px solid var(--navy-border);
  border-top-color:var(--cyan-primary);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin:auto;
}
.spinner-sm { width:20px; height:20px; border-width:2px; }

/* --- Gradient Text --- */
.gradient-text {
  background: linear-gradient(135deg, var(--cyan-primary), var(--cyan-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.gradient-text-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}