/* ================================================================
   Credsure Financial Consultancy — Animations
   Scroll-triggered animations, micro-interactions, transitions.
   ================================================================ */

/* ── Scroll Animations ───────────────────────────────────────── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.animate-on-scroll.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide from left */
.animate-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.animate-slide-left.animate-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.animate-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.animate-slide-right.animate-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in */
.animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.animate-scale.animate-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Stagger Delays for Grid Items ───────────────────────────── */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 80ms; }
.stagger-3 { transition-delay: 160ms; }
.stagger-4 { transition-delay: 240ms; }
.stagger-5 { transition-delay: 320ms; }
.stagger-6 { transition-delay: 400ms; }
.stagger-7 { transition-delay: 480ms; }
.stagger-8 { transition-delay: 560ms; }

/* ── Button Hover Micro-Interactions ─────────────────────────── */
.btn-hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.btn-hover-lift:hover {
  transform: translateY(-3px);
}

.btn-hover-lift:active {
  transform: translateY(-1px);
}

/* ── Card Hover Effects ──────────────────────────────────────── */
.card-hover {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(var(--primary-rgb), 0.15);
}

/* ── Ripple Effect ───────────────────────────────────────────── */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255, 255, 255, 0.3) 0%,
    transparent 60%);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s, transform 0.5s;
  pointer-events: none;
}

.ripple:active::after {
  opacity: 1;
  transform: scale(2.5);
  transition: opacity 0s, transform 0s;
}

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}

.spinner-dark {
  border-color: rgba(var(--primary-rgb), 0.2);
  border-top-color: var(--primary);
}

/* ── Pulse Animation (for FAB attention) ─────────────────────── */
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
  animation: pulse-ring 2s var(--ease-out) infinite;
  pointer-events: none;
  z-index: -1;
}

/* ── Counter Animation ───────────────────────────────────────── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.counter-animate {
  animation: countUp 0.4s var(--ease-out) forwards;
}

/* ── Slide Down (Accordion) ──────────────────────────────────── */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.accordion-item.active .accordion-content {
  grid-template-rows: 1fr;
}

.accordion-content > div {
  overflow: hidden;
}

/* ── Toast Notification ──────────────────────────────────────── */
@keyframes toastSlideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

.toast-enter {
  animation: toastSlideIn var(--duration-base) var(--ease-out) forwards;
}

.toast-exit {
  animation: toastSlideOut var(--duration-base) var(--ease-in-out) forwards;
}

/* ── Number Ticker ───────────────────────────────────────────── */
@keyframes fadeNumber {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.number-tick {
  display: inline-block;
  animation: fadeNumber 0.25s var(--ease-out);
}

/* ── Gradient Shift (Hero Background) ────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* ── Floating Dots Pattern ───────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-12px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

.float-animation-delay {
  animation: float 3s ease-in-out 1s infinite;
}