/* ==========================================================================
   MD Software — Animations
   Keyframes, reveals, transitions
   ========================================================================== */

/* -------------------- KEYFRAMES -------------------- */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: 0.7; }
}

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

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

@keyframes floatY {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -8px); }
}

@keyframes scrollWheel {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  60%  { transform: translate(-50%, 12px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

@keyframes meshMove {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, -2%) scale(1.05); }
  100% { transform: translate(-3%, 2%) scale(1); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes drawLogo {
  0%   { stroke-dashoffset: 1; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}

@keyframes loaderSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

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

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

/* -------------------- REVEAL ON SCROLL -------------------- */
[class*="reveal"] { opacity: 0; }

.reveal-up {
  transform: translateY(40px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  transform: translateX(-40px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  transform: translateX(40px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  transform: scale(0.94);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Text reveal with mask */
.reveal-text {
  display: inline-block;
  position: relative;
  transform: translateY(100%);
  transition: transform 1100ms var(--ease-out), opacity 1100ms var(--ease-out);
  opacity: 0;
}
.reveal-text.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Stagger via data-delay */
[data-delay="100"].is-visible { transition-delay: 0.1s; }
[data-delay="200"].is-visible { transition-delay: 0.2s; }
[data-delay="300"].is-visible { transition-delay: 0.3s; }
[data-delay="400"].is-visible { transition-delay: 0.4s; }
[data-delay="500"].is-visible { transition-delay: 0.5s; }
[data-delay="600"].is-visible { transition-delay: 0.6s; }
[data-delay="700"].is-visible { transition-delay: 0.7s; }
[data-delay="800"].is-visible { transition-delay: 0.8s; }
[data-delay="900"].is-visible { transition-delay: 0.9s; }

/* Hero title reveal stagger */
.hero-title .line:nth-child(1) .reveal-text { transition-delay: 0.15s; }
.hero-title .line:nth-child(2) .reveal-text { transition-delay: 0.30s; }
.hero-title .line:nth-child(3) .reveal-text { transition-delay: 0.45s; }

.quote-text .reveal-text:nth-child(1) { transition-delay: 0.1s; }
.quote-text .reveal-text:nth-child(2) { transition-delay: 0.25s; }
.quote-text .reveal-text:nth-child(3) { transition-delay: 0.4s; }

/* -------------------- HOVER UNDERLINE (nav-like) -------------------- */
.underline-hover {
  position: relative;
}
.underline-hover::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--gradient-brand);
  transition: width var(--t-med) var(--ease-out);
  border-radius: 2px;
}
.underline-hover:hover::after { width: 100%; }

/* -------------------- SHINE -------------------- */
.shine {
  position: relative;
  overflow: hidden;
}
.shine::after {
  content: "";
  position: absolute;
  top: 0; left: -150%;
  width: 80%; height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.25) 50%, transparent 80%);
  transition: left 900ms ease;
}
.shine:hover::after { left: 150%; }

/* -------------------- LAZY FADE-IN -------------------- */
img.lazy-fade {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 800ms var(--ease-out), filter 800ms var(--ease-out);
}
img.lazy-fade.loaded {
  opacity: 1;
  filter: blur(0);
}

/* -------------------- PARALLAX SMOOTH -------------------- */
[data-parallax] { will-change: transform; }

/* -------------------- GRADIENT ANIMATED -------------------- */
.gradient-animate {
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899, #a855f7, #6366f1);
  background-size: 300% 300%;
  animation: gradientShift 10s ease-in-out infinite;
}