/* ============================================
   Arthachanakya - Animations CSS
   ============================================ */

/* --- Keyframe Definitions --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(2deg); }
  66%       { transform: translateY(-14px) rotate(-2deg); }
}

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

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

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-14px); }
  60% { transform: translateY(-7px); }
}

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

@keyframes ripple {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

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

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.15); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.1); }
  70%  { transform: scale(1); }
}

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

@keyframes progressFill {
  from { width: 0; }
  to   { width: var(--progress-width); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Utility Animation Classes --- */
.animate-fade-in       { animation: fadeIn 0.6s ease both; }
.animate-fade-in-up    { animation: fadeInUp 0.6s ease both; }
.animate-fade-in-down  { animation: fadeInDown 0.6s ease both; }
.animate-fade-in-left  { animation: fadeInLeft 0.6s ease both; }
.animate-fade-in-right { animation: fadeInRight 0.6s ease both; }
.animate-zoom-in       { animation: zoomIn 0.6s ease both; }
.animate-float         { animation: float 3.5s ease-in-out infinite; }
.animate-float-slow    { animation: floatSlow 5s ease-in-out infinite; }
.animate-pulse         { animation: pulse 2s ease-in-out infinite; }
.animate-bounce        { animation: bounce 1.5s ease infinite; }
.animate-spin          { animation: spin 2s linear infinite; }
.animate-heartbeat     { animation: heartbeat 1.5s ease-in-out infinite; }

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

/* --- Hero section entry animations --- */
.hero-content .hero-badge     { animation: fadeInUp 0.6s ease 0.1s both; }
.hero-content .hero-title     { animation: fadeInUp 0.6s ease 0.2s both; }
.hero-content .hero-subtitle  { animation: fadeInUp 0.6s ease 0.35s both; }
.hero-content .hero-buttons   { animation: fadeInUp 0.6s ease 0.5s both; }
.hero-content .hero-stats     { animation: fadeInUp 0.6s ease 0.65s both; }
.hero-visual                  { animation: fadeInRight 0.8s ease 0.4s both; }

/* --- Page Banner --- */
.page-banner-content h1         { animation: fadeInDown 0.6s ease 0.1s both; }
.page-banner-content .breadcrumb { animation: fadeInUp 0.6s ease 0.25s both; }

/* --- Shimmer loading effect --- */
.shimmer {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s linear infinite;
}

/* --- Ripple effect on buttons --- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  top: 50%;
  left: 50%;
  animation: ripple 0.8s linear;
  animation-fill-mode: forwards;
  transform: scale(0);
  opacity: 0;
}

/* --- Hover glow --- */
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(203, 13, 15, 0.5);
}

/* --- Progress bar animation --- */
.progress-bar {
  height: 6px;
  background: var(--border, #e8e8e8);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary, #CB0D0F), #ff4d4f);
  border-radius: 3px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-fill.animated {
  width: var(--progress-width, 0);
}

/* --- Card hover effects --- */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.16);
}

/* --- Icon spin on hover --- */
.icon-hover-spin:hover i {
  animation: spin 0.5s ease;
}

/* --- Scale on hover --- */
.scale-hover {
  transition: transform 0.25s ease;
}

.scale-hover:hover {
  transform: scale(1.06);
}

/* --- Underline animation --- */
.underline-anim {
  position: relative;
  display: inline-block;
}

.underline-anim::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary, #CB0D0F);
  transition: width 0.3s ease;
}

.underline-anim:hover::after {
  width: 100%;
}

/* --- Stagger children --- */
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.45s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.55s; }

/* --- Floating dots decoration --- */
.dot-pattern {
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, rgba(203,13,15,0.2) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* --- Number counter animation --- */
.count-animate {
  animation: countUp 0.4s ease both;
}

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

.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--primary, #CB0D0F);
  font-weight: 300;
  margin-left: 2px;
}

/* --- Notification/toast slide in --- */
@keyframes toastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes toastOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

.toast-enter { animation: toastIn 0.4s cubic-bezier(0.4,0,0.2,1) both; }
.toast-exit  { animation: toastOut 0.4s cubic-bezier(0.4,0,0.2,1) both; }

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