/* ═══════════════════════════════════════════════════════════════
   MADHU-RAMA CORPORATION — Animations & Keyframes
   animations.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Gradient Flow (Heading Animation) ───────────────────────── */
@keyframes gradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

/* ── Entrance Animations ──────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  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 scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Looping Animations ───────────────────────────────────────── */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

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

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

@keyframes pulseGold {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200,146,42,0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(200,146,42,0);
  }
}

@keyframes pulseGoldBorder {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200,146,42,0.3), var(--shadow-gold);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(200,146,42,0), var(--shadow-gold);
  }
}

/* ── Line Grow (Nav Active Underline) ─────────────────────────── */
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Shimmer (Skeleton Loaders) ───────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.shimmer {
  background: linear-gradient(90deg,
    var(--color-surface) 0%,
    var(--color-divider) 50%,
    var(--color-surface) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Counter Up ───────────────────────────────────────────────── */
@keyframes counterUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Decorative Orbit Rings ───────────────────────────────────── */
@keyframes orbitPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.04); opacity: 1; }
}

/* ── Typewriter Effect ────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { border-right-color: var(--color-accent); }
  50%       { border-right-color: transparent; }
}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM
   ══════════════════════════════════════════════════════════════ */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="left"] {
  transform: translateX(-40px);
}

[data-reveal="right"] {
  transform: translateX(40px);
}

[data-reveal="scale"] {
  transform: scale(0.9);
  opacity: 0;
}

[data-reveal="fade"] {
  transform: none;
  opacity: 0;
}

[data-reveal].visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }
[data-delay="7"] { transition-delay: 0.7s; }
[data-delay="8"] { transition-delay: 0.8s; }

/* ══════════════════════════════════════════════════════════════
   HERO ENTRANCE ANIMATIONS (applied via .animate-* classes)
   ══════════════════════════════════════════════════════════════ */

.animate-label {
  animation: fadeInDown 0.7s ease 0.2s both;
}

.animate-h1 {
  animation: fadeInUp 0.8s ease 0.4s both;
}

.animate-p {
  animation: fadeInUp 0.8s ease 0.6s both;
}

.animate-cta {
  animation: fadeInUp 0.8s ease 0.8s both;
}

.animate-right {
  animation: scaleIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

/* ── Nav entrance ─────────────────────────────────────────────── */
.animate-nav {
  animation: fadeInDown 0.6s ease 0s both;
}

/* ── Section entrance default ─────────────────────────────────── */
.animate-section {
  animation: fadeInUp 0.8s ease both;
}

/* ══════════════════════════════════════════════════════════════
   GEOMETRIC DECORATIVE ELEMENTS ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

.geo-rotate {
  animation: rotateSlow 20s linear infinite;
  transform-origin: center;
}

.geo-rotate-rev {
  animation: rotateSlowReverse 25s linear infinite;
  transform-origin: center;
}

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

.geo-float-slow {
  animation: floatUpDown 5s ease-in-out infinite;
}

.geo-float-delayed {
  animation: floatUpDown 3.5s ease-in-out 1.5s infinite;
}

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

/* ══════════════════════════════════════════════════════════════
   HOVER MICRO-INTERACTIONS
   ══════════════════════════════════════════════════════════════ */

/* Icon bounce on hover */
.hover-bounce:hover svg {
  animation: floatUpDown 0.5s ease;
}

/* Card shine effect */
.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );
  transform: skewX(-25deg);
  transition: left 0.5s ease;
}

.card-shine:hover::after {
  left: 150%;
}

/* ══════════════════════════════════════════════════════════════
   LOADING STATE
   ══════════════════════════════════════════════════════════════ */

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(200,146,42,0.3);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: rotateSlow 0.8s linear infinite;
}