@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-scale {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}


@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}

@keyframes float-subtle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes float-rotate {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(5deg); }
}


@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(139,92,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(139,92,246,0.3); }
  50%       { box-shadow: 0 0 50px rgba(139,92,246,0.6), 0 0 100px rgba(139,92,246,0.2); }
}

@keyframes pulse-glow-gold {
  0%, 100% { box-shadow: 0 0 20px rgba(245,158,11,0.3); }
  50%       { box-shadow: 0 0 50px rgba(245,158,11,0.6), 0 0 100px rgba(245,158,11,0.2); }
}

@keyframes pulse-glow-white {
  0%, 100% { box-shadow: 0 0 20px rgba(255,255,255,0.2); }
  50%       { box-shadow: 0 0 60px rgba(255,255,255,0.5), 0 0 120px rgba(255,255,255,0.2); }
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}


@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes hue-rotate {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}


@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee-scroll-reverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}


@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink-caret {
  50% { border-color: transparent; }
}


@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(300%) skewX(-12deg); }
}

@keyframes shimmer-pulse {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}


@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
  animation-duration: 12s;
}

@keyframes counter-spin {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}


@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes bounce-up {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-12px); }
  60%       { transform: translateY(-6px); }
}


@keyframes slide-in-bottom {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slide-in-top {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}


@keyframes orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(40px, -30px) scale(1.08); }
  50%  { transform: translate(-20px, 40px) scale(0.94); }
  75%  { transform: translate(30px, 20px) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orb-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-50px, 30px) scale(1.1); }
  66%  { transform: translate(30px, -40px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orb-drift-3 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(20px, -20px) scale(1.05) rotate(180deg); }
  100% { transform: translate(0, 0) scale(1) rotate(360deg); }
}


@keyframes count-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes width-expand {
  from { width: 0; }
  to   { width: 100%; }
}


@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}


@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.4; }
}


@keyframes wave {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(14deg); }
  30%  { transform: rotate(-8deg); }
  40%  { transform: rotate(14deg); }
  50%  { transform: rotate(-4deg); }
  60%  { transform: rotate(10deg); }
  70%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}


.animate-fade-in       { animation: fade-in 0.6s ease both; }
.animate-fade-in-up    { animation: fade-in-up 0.7s ease both; }
.animate-fade-in-scale { animation: fade-in-scale 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.animate-float         { animation: float 7s ease-in-out infinite; }
.animate-float-fast    { animation: float 4s ease-in-out infinite; }
.animate-pulse-glow    { animation: pulse-glow 3s ease infinite; }
.animate-pulse-ring    { animation: pulse-ring 2s ease-out infinite; }
.animate-spin          { animation: spin 1s linear infinite; }
.animate-spin-slow     { animation: spin 12s linear infinite; }
.animate-bounce-in     { animation: bounce-in 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.animate-shimmer       { animation: shimmer 2.5s linear infinite; }
.animate-gradient      { animation: gradient-shift 4s ease infinite; background-size: 200% auto; }
.animate-orb           { animation: orb-drift 12s ease-in-out infinite; }
.animate-orb-2         { animation: orb-drift-2 15s ease-in-out infinite; }
.animate-orb-3         { animation: orb-drift-3 18s linear infinite; }
.animate-wave          { animation: wave 2s linear; animation-iteration-count: 1; }
.animate-glow-breathe  { animation: glow-breathe 3s ease-in-out infinite; }


.hover-float:hover { animation: float-subtle 2s ease-in-out infinite; }
.hover-wave:hover  { animation: wave 0.8s ease; }


.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.30s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.40s; }


.hero-title-word {
  display: inline-block;
  animation: fade-in-up 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-char {
  display: inline-block;
  animation: fade-in-up 0.6s cubic-bezier(0.16,1,0.3,1) both;
}


.glow-underline {
  position: relative;
  display: inline-block;
}
.glow-underline::after {
  content: '';
  position: absolute; bottom: -4px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--purple-600), var(--purple-400), var(--purple-600));
  background-size: 200% auto;
  border-radius: 2px;
  animation: gradient-shift 2s linear infinite;
  box-shadow: 0 0 10px rgba(139,92,246,0.6);
}


.typing-cursor::after {
  content: '|';
  animation: blink-caret 0.75s step-end infinite;
  color: var(--purple-400);
  margin-left: 2px;
}


.neon-text {
  color: #fff;
  text-shadow:
    0 0 7px rgba(139,92,246,0.8),
    0 0 14px rgba(139,92,246,0.5),
    0 0 28px rgba(139,92,246,0.3);
}


.shimmer-card {
  position: relative; overflow: hidden;
}
.shimmer-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,255,255,0.04) 55%,
    transparent 75%
  );
  background-size: 200% 100%;
  animation: shimmer-pulse 4s linear infinite;
}


.gradient-border {
  position: relative;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
}
.gradient-border::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(124,58,237,0.8) 0deg,
    rgba(139,92,246,0.4) 60deg,
    rgba(196,181,253,0.2) 120deg,
    rgba(124,58,237,0.8) 180deg,
    rgba(139,92,246,0.4) 240deg,
    rgba(196,181,253,0.2) 300deg,
    rgba(124,58,237,0.8) 360deg
  );
  animation: spin 4s linear infinite;
  z-index: -1;
}
.gradient-border::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  z-index: -1;
}


.aurora {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.aurora-beam {
  position: absolute;
  width: 120%;
  height: 45%;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.25;
  animation: aurora-move 8s ease-in-out infinite alternate;
}
.aurora-beam:nth-child(1) {
  background: linear-gradient(135deg, rgba(124,58,237,0.8), rgba(99,102,241,0.4));
  top: -20%; left: -10%;
  animation-delay: 0s;
}
.aurora-beam:nth-child(2) {
  background: linear-gradient(135deg, rgba(139,92,246,0.6), rgba(196,181,253,0.3));
  top: -10%; right: -10%;
  animation-delay: 2s;
}
.aurora-beam:nth-child(3) {
  background: linear-gradient(135deg, rgba(99,102,241,0.5), rgba(124,58,237,0.7));
  bottom: -20%; left: 20%;
  animation-delay: 4s;
}

@keyframes aurora-move {
  from { transform: translateX(0) scale(1) rotate(0deg); }
  to   { transform: translateX(30px) scale(1.1) rotate(5deg); }
}


.skeleton {
  background: linear-gradient(
    90deg,
    rgba(139,92,246,0.05) 25%,
    rgba(139,92,246,0.12) 50%,
    rgba(139,92,246,0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer-pulse 2s linear infinite;
  border-radius: var(--radius-sm);
}


.counter-value {
  display: inline-block;
  animation: count-up 0.5s ease both;
}


.page-enter {
  animation: fade-in 0.4s ease both;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}