/* ==========================================================================
   CareerPro AI — Animations
   AOS-style keyframes + scroll reveals + micro-interactions
   ========================================================================== */

/* ----------  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(-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 zoomIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatSlow { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(3deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .8; } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(120%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(120%); } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes wave { 0%,100% { transform: rotate(0); } 25% { transform: rotate(18deg); } 75% { transform: rotate(-12deg); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ----------  Animation Utility Classes  ---------- */
.animate-fadeIn { animation: fadeIn .6s var(--ease) both; }
.animate-fadeInUp { animation: fadeInUp .7s var(--ease) both; }
.animate-fadeInDown { animation: fadeInDown .7s var(--ease) both; }
.animate-fadeInLeft { animation: fadeInLeft .7s var(--ease) both; }
.animate-fadeInRight { animation: fadeInRight .7s var(--ease) both; }
.animate-zoomIn { animation: zoomIn .6s var(--ease-bounce) both; }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: floatSlow 7s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-bounce { animation: bounce 2s ease-in-out infinite; }
.animate-gradient { background-size: 200% 200%; animation: gradientShift 8s ease infinite; }
.wave-hand { display: inline-block; animation: wave 2.5s ease-in-out infinite; transform-origin: 70% 70%; }

/* ----------  Scroll Reveal (AOS-style, native)  ---------- */
[data-aos] { opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--aos-delay, 0s); will-change: opacity, transform; }
[data-aos="fade-up"] { transform: translateY(40px); }
[data-aos="fade-down"] { transform: translateY(-40px); }
[data-aos="fade-left"] { transform: translateX(-40px); }
[data-aos="fade-right"] { transform: translateX(40px); }
[data-aos="zoom-in"] { transform: scale(.85); }
[data-aos="flip-up"] { transform: perspective(800px) rotateX(40deg); transform-origin: top; }
[data-aos.aos-animate] { opacity: 1; transform: none; }

/* ----------  Hover effects  ---------- */
.hover-lift { transition: transform var(--t) var(--ease-bounce), box-shadow var(--t); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.hover-grow { transition: transform var(--t) var(--ease-bounce); }
.hover-grow:hover { transform: scale(1.04); }
.hover-tilt { transition: transform var(--t) var(--ease-bounce); }
.hover-tilt:hover { transform: perspective(800px) rotateX(4deg) rotateY(-4deg) translateY(-4px); }

/* gradient underline grow */
.link-underline { position: relative; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--grad-brand); transition: width var(--t); }
.link-underline:hover::after { width: 100%; }

/* shine sweep on cards */
.shine { position: relative; overflow: hidden; }
.shine::before {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease);
}
.shine:hover::before { left: 130%; }

/* ----------  Loader / spinner  ---------- */
.spinner { width: 38px; height: 38px; border: 3.5px solid var(--surface-3); border-top-color: var(--brand-500); border-radius: 50%; animation: spin .8s linear infinite; }
.typing-dots span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-400); margin: 0 2px; animation: blink 1.4s infinite both; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }

/* ----------  Decorative animated bg  ---------- */
.bg-gradient-animate { background: linear-gradient(-45deg, #4338ca, #6366f1, #8b5cf6, #d946ef); background-size: 400% 400%; animation: gradientShift 12s ease infinite; }
.grid-pattern {
  background-image: linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* ----------  Marquee (logos)  ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 4rem; width: max-content; animation: marquee 28s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ----------  Reduced motion  ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}