/* Motion & animations extracted into a separate file */

/* Accent palette for animated text (independent of inspiration sites) */
:root{--accent-1:#00D1FF;--accent-2:#7C3AED;--accent-3:#22D3EE;--accent-4:#F59E0B}

/* Brand shine */
@keyframes shine { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } }

/* Gradient wave shift for hero tagline */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Neon flicker glow for subtle highlight */
@keyframes glowPulse {
  0%,100% { filter: drop-shadow(0 0 6px rgba(255,255,255,.10)); }
  50% { filter: drop-shadow(0 0 10px rgba(0,209,255,.25)); }
}

/* Shield icon micro-animation */
@keyframes shieldGlow {
  0%, 100% { box-shadow: 0 6px 20px rgba(226,35,26,.35); transform: translateY(0); }
  50% { box-shadow: 0 10px 28px rgba(226,35,26,.5); transform: translateY(-1px); }
}
.logo .shield { animation: shieldGlow 4.8s ease-in-out infinite; }

/* Gentle pulse for primary CTA */
@keyframes pulseCTA {
  0%, 100% { transform: translateY(0); filter: saturate(1); }
  50% { transform: translateY(-1px); filter: saturate(1.2); }
}
.cta { animation: pulseCTA 3.6s ease-in-out infinite; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px) scale(.98); will-change: opacity, transform; transition: opacity .6s, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .12s; }
.reveal.delay-2 { transition-delay: .24s; }
.reveal.delay-3 { transition-delay: .36s; }

/* Updated hero text animations */
.hero h1 .animate{
  display:inline-block;
  background: linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3),var(--accent-4));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gradientShift 7.5s ease-in-out infinite, shine 14s linear infinite, glowPulse 5s ease-in-out infinite;
}

/* Lead phrase: fade/slide reveal to avoid layout shifts */
.hero h1 .animate-phrase{
  display:inline-block; opacity:0; color:#f2f6fb; text-shadow:0 0 12px rgba(0,209,255,.18);
  animation: fadeSlide 800ms ease-out forwards;
}
@keyframes fadeSlide {
  from { opacity:0; transform: translateY(6px); }
  to { opacity:1; transform: none; }
}

/* Crystal overlay slow motion */
@keyframes crystalShift {
  0% { transform: rotate(0deg); opacity:.85; }
  50% { transform: rotate(180deg); opacity:.95; }
  100% { transform: rotate(360deg); opacity:.85; }
}
/* Gentle hue cycling for image */
@keyframes hueCycle {
  0% { filter: hue-rotate(0deg) saturate(1); }
  50% { filter: hue-rotate(180deg) saturate(1.05); }
  100% { filter: hue-rotate(360deg) saturate(1); }
}