/* ════════════════════════════════════════════════════════
   RadheShyam Official  |  navbar-animations.css
   All @keyframes & animation-only rules — paste BEFORE navbar.css
   ════════════════════════════════════════════════════════ */

/* ── HEADER SLIDE-DOWN ON PAGE LOAD ──────────────────── */
@keyframes zkmHeaderIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.zkm-header {
  animation: zkmHeaderIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── LOGO GLOW PULSE ─────────────────────────────────── */
@keyframes zkmLogoGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(232,168,32,0.28)); }
  50%       { filter: drop-shadow(0 0 18px rgba(232,168,32,0.55)); }
}

.zkm-logo-svg {
  animation: zkmHeaderIn 0.9s 0.1s cubic-bezier(0.22,1,0.36,1) both,
             zkmLogoGlowPulse 4s 2s ease-in-out infinite;
}

/* ── MENU LINKS STAGGER IN ───────────────────────────── */
@keyframes zkmLinkFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zkm-menu-item:nth-child(1) .zkm-menu-link { animation: zkmLinkFadeIn 0.6s 0.35s both; }
.zkm-menu-item:nth-child(2) .zkm-menu-link { animation: zkmLinkFadeIn 0.6s 0.46s both; }
.zkm-menu-item:nth-child(3) .zkm-menu-link { animation: zkmLinkFadeIn 0.6s 0.57s both; }
.zkm-menu-item:nth-child(4) .zkm-menu-link { animation: zkmLinkFadeIn 0.6s 0.68s both; }
.zkm-menu-item:nth-child(5) .zkm-menu-link { animation: zkmLinkFadeIn 0.6s 0.79s both; }
.zkm-menu-item:nth-child(6) .zkm-menu-link { animation: zkmLinkFadeIn 0.6s 0.90s both; }

/* ── DROPDOWN ITEM STAGGER (on open) ─────────────────── */
@keyframes zkmDropItemIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.zkm-menu-item:hover .zkm-drop-item:nth-child(1),
.zkm-menu-item:focus-within .zkm-drop-item:nth-child(1) { animation: zkmDropItemIn 0.3s 0.05s both; }
.zkm-menu-item:hover .zkm-drop-item:nth-child(2),
.zkm-menu-item:focus-within .zkm-drop-item:nth-child(2) { animation: zkmDropItemIn 0.3s 0.12s both; }
.zkm-menu-item:hover .zkm-drop-item:nth-child(3),
.zkm-menu-item:focus-within .zkm-drop-item:nth-child(3) { animation: zkmDropItemIn 0.3s 0.19s both; }
.zkm-menu-item:hover .zkm-drop-item:nth-child(4),
.zkm-menu-item:focus-within .zkm-drop-item:nth-child(4) { animation: zkmDropItemIn 0.3s 0.26s both; }
.zkm-menu-item:hover .zkm-drop-item:nth-child(5),
.zkm-menu-item:focus-within .zkm-drop-item:nth-child(5) { animation: zkmDropItemIn 0.3s 0.33s both; }
.zkm-menu-item:hover .zkm-drop-item:nth-child(6),
.zkm-menu-item:focus-within .zkm-drop-item:nth-child(6) { animation: zkmDropItemIn 0.3s 0.40s both; }

/* ── FLYOUT ITEM STAGGER ─────────────────────────────── */
@keyframes zkmFlyItemIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.zkm-has-fly:hover .zkm-fly-link:nth-child(1),
.zkm-has-fly:focus-within .zkm-fly-link:nth-child(1) { animation: zkmFlyItemIn 0.25s 0.04s both; }
.zkm-has-fly:hover .zkm-fly-link:nth-child(2),
.zkm-has-fly:focus-within .zkm-fly-link:nth-child(2) { animation: zkmFlyItemIn 0.25s 0.10s both; }
.zkm-has-fly:hover .zkm-fly-link:nth-child(3),
.zkm-has-fly:focus-within .zkm-fly-link:nth-child(3) { animation: zkmFlyItemIn 0.25s 0.16s both; }
.zkm-has-fly:hover .zkm-fly-link:nth-child(4),
.zkm-has-fly:focus-within .zkm-fly-link:nth-child(4) { animation: zkmFlyItemIn 0.25s 0.22s both; }

/* ── FLOATING LITERARY WORDS (JS-spawned) ────────────── */
@keyframes zkmWordDriftUp {
  0%   { transform: translateY(0)      rotate(var(--zkm-wr)); opacity: 0; }
  8%   { opacity: 0.55; }
  92%  { opacity: 0.3; }
  100% { transform: translateY(-110px) rotate(var(--zkm-wr)); opacity: 0; }
}

.zkm-float-word {
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: rgba(232, 168, 32, 0.18);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  animation: zkmWordDriftUp linear infinite;
}

/* ── CANVAS PARTICLE (JS-spawned) ────────────────────── */
@keyframes zkmSparkFloat {
  0%   { transform: translateY(0)       scale(1);   opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-80px)   scale(0.5); opacity: 0; }
}

.zkm-spark {
  position: absolute;
  border-radius: 50%;
  background: rgba(232, 168, 32, 0.5);
  pointer-events: none;
  animation: zkmSparkFloat linear infinite;
}

/* ── BURGER BUNS (handled by CSS class toggle) ───────── */
/* (see navbar.css for .zkm-open state) */

/* ── DROPDOWN BORDER SHIMMER ─────────────────────────── */
@keyframes zkmBorderShimmer {
  0%   { border-top-color: #c47d0e; }
  50%  { border-top-color: #f5d485; }
  100% { border-top-color: #c47d0e; }
}

.zkm-menu-item:hover > .zkm-dropdown {
  animation: zkmBorderShimmer 2s ease-in-out infinite;
}

/* ── FLYOUT LEFT BORDER PULSE ────────────────────────── */
@keyframes zkmFlyBorderPulse {
  0%, 100% { border-left-color: #c47d0e; }
  50%       { border-left-color: #f5d485; }
}

.zkm-has-fly:hover > .zkm-flyout {
  animation: zkmFlyBorderPulse 2s ease-in-out infinite;
}

/* ── ACTIVE LINK GLOW ────────────────────────────────── */
@keyframes zkmActiveLinkGlow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 12px rgba(232,168,32,0.45); }
}

.zkm-menu-link.zkm-active {
  animation: zkmActiveLinkGlow 3s ease-in-out infinite;
}

/* ── CTA LINK PULSE ──────────────────────────────────── */
@keyframes zkmCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,168,32,0); }
  50%       { box-shadow: 0 0 14px 2px rgba(232,168,32,0.2); }
}

.zkm-cta-link {
  animation: zkmCtaPulse 2.8s ease-in-out infinite;
}

/* ── REDUCED MOTION RESPECT ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .zkm-header,
  .zkm-logo-svg,
  .zkm-menu-link,
  .zkm-float-word,
  .zkm-spark,
  .zkm-quill-line { animation: none !important; }

  .zkm-quill-line { stroke-dashoffset: 0 !important; }
}
