/* Vimuksha Digital – shared animations & hero polish */
:root {
  --primary: #102343;
  --accent: #E96722;
  --cream: #F8F6F2;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .float-shape, .hero-orb { animation: none !important; }
}

/* ---- Hero text reveals ---- */
.hero-reveal {
  opacity: 0;
  animation: heroFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-reveal-delay-1 { animation-delay: 0.12s; }
.hero-reveal-delay-2 { animation-delay: 0.24s; }
.hero-reveal-delay-3 { animation-delay: 0.36s; }
.hero-reveal-delay-4 { animation-delay: 0.48s; }

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

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

/* ---- Floating orbs / shapes in heroes ---- */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: orbFloat 12s ease-in-out infinite;
}
.hero-orb-2 { animation-duration: 16s; animation-delay: -4s; }
.hero-orb-3 { animation-duration: 20s; animation-delay: -8s; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(12px, -18px) scale(1.05); }
  66%      { transform: translate(-10px, 10px) scale(0.97); }
}

/* ---- Grid / pattern overlay ---- */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 20%, transparent 70%);
  pointer-events: none;
}

/* ---- Accent line under eyebrow ---- */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ---- CTA micro-interactions ---- */
.btn-primary-anim {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn-primary-anim:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px -8px rgba(233, 103, 34, 0.45);
}
.btn-primary-anim:active {
  transform: translateY(0) scale(0.98);
}

.btn-ghost-anim {
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn-ghost-anim:hover {
  transform: translateY(-1px);
}

/* ---- Card / section scroll reveals ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---- Service card hover ---- */
.card-hover {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px -12px rgba(16, 35, 67, 0.18);
}

/* ---- Icon pulse on hero decorative icons ---- */
.hero-icon-float {
  animation: iconFloat 5s ease-in-out infinite;
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---- Process step number glow ---- */
.step-num {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.group:hover .step-num,
.step-num:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(233, 103, 34, 0.15);
}

/* ---- FAQ accordion smooth ---- */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary { border-bottom: 1px solid #E2E8F0; }
details .faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
details[open] .faq-body {
  max-height: 400px;
}

/* ---- Nav underline animation ---- */
.nav-link-anim {
  position: relative;
}
.nav-link-anim::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-link-anim:hover::after {
  transform: scaleX(1);
}

/* ---- Hero decorative badge ---- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(233, 103, 34, 0.15);
  border: 1px solid rgba(233, 103, 34, 0.35);
  color: #E96722;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: heroFadeIn 0.6s ease both;
}

/* ---- Gradient text accent (optional) ---- */
.text-gradient-accent {
  background: linear-gradient(135deg, #E96722 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Shimmer on primary CTA (subtle) ---- */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { left: -100%; }
  50%, 100% { left: 150%; }
}