/* Shared polish layer: scroll reveals, India identity accents, subtle motion.
   Loaded on every marketing page alongside support.js. Safe by default —
   content is fully visible with no JS/CSS; animation is progressive enhancement. */

/* ---------- Scroll reveal ---------- */
/* Uses the standalone `translate` property (not `transform`) so this never
   collides with elements that already have their own transform-based hover
   transitions declared inline (very common in this codebase). */
.reveal { opacity: 1; }
.reveal-armed .reveal {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .7s cubic-bezier(.16,.8,.24,1), translate .7s cubic-bezier(.16,.8,.24,1);
  will-change: opacity, translate;
}
.reveal-armed .reveal.is-visible { opacity: 1; translate: 0 0; }

.stagger > *:nth-child(1) { transition-delay: .03s; }
.stagger > *:nth-child(2) { transition-delay: .10s; }
.stagger > *:nth-child(3) { transition-delay: .17s; }
.stagger > *:nth-child(4) { transition-delay: .24s; }
.stagger > *:nth-child(5) { transition-delay: .31s; }
.stagger > *:nth-child(6) { transition-delay: .38s; }

/* ---------- Floating hero glow orbs ---------- */
@keyframes ecdDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(18px, -22px) scale(1.06); }
  100% { transform: translate(0, 0) scale(1); }
}
.hero-orb { animation: ecdDrift 14s ease-in-out infinite; }
.hero-orb.hero-orb-slow { animation-duration: 20s; animation-delay: -4s; }

/* ---------- Gentle badge shimmer (used sparingly, e.g. "Most popular") ---------- */
@keyframes ecdShimmer {
  0%   { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}
.shimmer-badge {
  background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: ecdShimmer 3.2s ease-in-out infinite;
}

/* ---------- India identity accent ---------- */
.tricolor-strip {
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #FF9933 0%, #FF9933 33%, #FFFFFF 33%, #FFFFFF 67%, #128807 67%, #128807 100%);
  position: relative;
  z-index: 51;
}

.tricolor-underline {
  display: inline-block;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #FF9933, #FFFFFF 50%, #128807);
  box-shadow: 0 0 0 1px rgba(16,35,55,0.06);
}

.india-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 12px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid #EAE0D2;
  box-shadow: 0 1px 3px rgba(16,35,55,0.05);
  font-size: 13.5px;
  font-weight: 600;
  color: #5A4A2E;
}
.india-badge-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #FF9933 0 33%, #FFFFFF 33% 67%, #128807 67% 100%);
  box-shadow: inset 0 0 0 1px rgba(16,35,55,0.10);
}

/* ---------- Motion + polish preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-armed .reveal { opacity: 1 !important; translate: 0 !important; transition: none !important; }
  .hero-orb, .shimmer-badge { animation: none !important; }
}

@media (max-width: 760px) {
  .hero-orb { display: none; }
}