/* ============================================================
   MDIT ANIMATIONS — Micro-interactions & Motion
   Scroll reveals, hover effects, transitions, keyframes
   ============================================================ */

/* ── Scroll Reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-group > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.reveal-group.visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-group.visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.reveal-group.visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.reveal-group.visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.reveal-group.visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.reveal-group.visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.reveal-group.visible > *:nth-child(7)  { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
.reveal-group.visible > *:nth-child(8)  { opacity: 1; transform: translateY(0); transition-delay: 560ms; }
.reveal-group.visible > *:nth-child(9)  { opacity: 1; transform: translateY(0); transition-delay: 640ms; }
.reveal-group.visible > *:nth-child(10) { opacity: 1; transform: translateY(0); transition-delay: 720ms; }
.reveal-group.visible > *:nth-child(11) { opacity: 1; transform: translateY(0); transition-delay: 800ms; }
.reveal-group.visible > *:nth-child(12) { opacity: 1; transform: translateY(0); transition-delay: 880ms; }

/* Fade-in from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

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

/* Fade-in from right */
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}

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

/* Scale-in */
.reveal-scale {
  opacity: 0;
  transform: scale(.95);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

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

/* ── Shimmer Loading ──────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.04) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
  color: transparent !important;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

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

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

/* ── Glow pulse ───────────────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(93,169,255,.15); }
  50% { box-shadow: 0 0 40px rgba(93,169,255,.35); }
}

.glow-pulse { animation: glow-pulse 2.5s ease-in-out infinite; }

/* ── Rotating gradient border ─────────────────────────────── */
@keyframes rotate-border {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating-border {
  position: relative;
}

.rotating-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--blue), var(--cyan), var(--violet), var(--blue));
  animation: rotate-border 3s linear infinite;
  z-index: -1;
}

.rotating-border::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--card);
  z-index: 0;
}

.rotating-border > * { position: relative; z-index: 1; }

/* ── Count-up animation (JS-driven class) ─────────────────── */
.counting {
  display: inline-block;
  transition: transform .15s var(--ease);
}

/* ── Typing cursor ────────────────────────────────────────── */
.typing-cursor::after {
  content: '|';
  animation: blink .8s step-end infinite;
  color: var(--cyan);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Hero particle (CSS-only decorative dots) ─────────────── */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: particle-drift linear infinite;
  opacity: 0;
}

@keyframes particle-drift {
  0%   { opacity: 0; transform: translateY(0) translateX(0); }
  10%  { opacity: .6; }
  90%  { opacity: .3; }
  100% { opacity: 0; transform: translateY(-80vh) translateX(var(--drift, 30px)); }
}

/* ── Glitch text (used sparingly for branding) ────────────── */
@keyframes glitch-1 {
  0%, 100% { clip-path: inset(0 0 95% 0); transform: translate(-3px, 0); }
  50% { clip-path: inset(40% 0 50% 0); transform: translate(3px, 0); }
}

@keyframes glitch-2 {
  0%, 100% { clip-path: inset(50% 0 30% 0); transform: translate(2px, 0); }
  50% { clip-path: inset(70% 0 5% 0); transform: translate(-2px, 0); }
}

/* ── Gradient border hover ────────────────────────────────── */
.grad-border-hover {
  position: relative;
}

.grad-border-hover::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity var(--t2) var(--ease);
  z-index: -1;
}

.grad-border-hover:hover::before {
  opacity: 1;
}

/* ── Text underline animation ─────────────────────────────── */
.animated-underline {
  position: relative;
  display: inline;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--cyan);
  transition: width var(--t2) var(--ease);
}

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

/* ── Highlighted chip appear ──────────────────────────────── */
@keyframes chip-appear {
  from { opacity: 0; transform: scale(.85) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.chip-appear {
  animation: chip-appear .35s var(--ease) both;
}

/* ── Radar ring (decorative) ──────────────────────────────── */
@keyframes radar-ring {
  0%   { transform: scale(0); opacity: .7; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ── Number counter bounce ────────────────────────────────── */
@keyframes counter-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Slide-in from bottom (used for chat) ─────────────────── */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Fade-in ──────────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Bouncing arrow ───────────────────────────────────────── */
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

.bounce-y { animation: bounce-y 1.8s ease-in-out infinite; }

/* ── Disable all for prefers-reduced-motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .float, .glow-pulse, .rotating-border::before,
  .typing-cursor::after, .particle, .bounce-y,
  .skeleton {
    animation: none !important;
  }
}

/* ── Page Preloader Animation (Hidden) ────────────────────────── */
#mdit-preloader,
#mdit-preloader.fade-out {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

.preloader-content {
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.preloader-spinner {
  width: 52px;
  height: 52px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--green);
  animation: preloader-pulse 1.2s ease-in-out infinite alternate;
}

.preloader-text {
  font-weight: 900;
  letter-spacing: 0.25em;
  font-size: 13.5px;
  color: #ffffff;
  margin-top: 4px;
}

.preloader-bar {
  width: 140px;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.preloader-progress {
  width: 100%;
  height: 100%;
  background: var(--green);
  animation: preloader-fill 1s ease-in-out infinite;
  transform-origin: left;
}

@keyframes preloader-pulse {
  0% { transform: scale(0.92); opacity: 0.8; }
  100% { transform: scale(1.08); opacity: 1; box-shadow: 0 0 40px var(--green); }
}

@keyframes preloader-fill {
  0% { transform: scaleX(0); }
  50% { transform: scaleX(0.7); }
  100% { transform: scaleX(1); }
}

/* ── Pulse Glow ─────────────────────────────────────────── */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.pulse-glow {
  animation: pulseGlow 2s infinite;
}