/* ============================================================
   खराखुरा जिनी लोडर — v102 (Full Screen Cinematic)
   - स्क्रीनच्या तळाशी चिराग दिसतो
   - चिरागातून धुराचा स्तंभ वर येतो
   - धुरातून मध्यभागी मोठा जिनी बाहेर येतो (सतत हलणारा / तरंगणारा)
   - हात जोडून बोलतो, मग जादूची प्रक्रिया करतो
   - data आल्यावर पुन्हा नमस्कार करून धुरासोबत चिरागात परत
   ============================================================ */

.app-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--aura) 22%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 50% 45%, rgba(28, 18, 62, .82), rgba(4, 5, 14, .96));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.app-loader.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }

/* ---------- प्रत्येक service साठी वेगळा रंग / आभा ---------- */
.app-loader { --aura: #60a5fa; --aura2: #a78bfa; --lampGlow: #fbbf24; --hue: 0deg; }
.app-loader.genie--api   { --aura:#fbbf24; --aura2:#f97316; --hue: 28deg;  }
.app-loader.genie--form  { --aura:#e879f9; --aura2:#a855f7; --hue: -55deg; }
.app-loader.genie--nav   { --aura:#60a5fa; --aura2:#818cf8; --hue: 0deg;   }
.app-loader.genie--money { --aura:#34d399; --aura2:#10b981; --hue: 85deg;  }
.app-loader.genie--file  { --aura:#fb7185; --aura2:#e11d48; --hue: -95deg; }
.app-loader.genie--print { --aura:#22d3ee; --aura2:#0ea5e9; --hue: -18deg; }

/* ---------- संपूर्ण स्क्रीन रंगमंच ---------- */
.genie-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* जादूची आभा — जिनीच्या मागे */
.genie-aura {
  position: absolute;
  left: 50%; top: 42%;
  width: 70vmin; height: 70vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--aura) 45%, transparent) 0%, transparent 68%);
  filter: blur(26px);
  opacity: 0;
  animation: auraPulse 3s ease-in-out infinite;
}
.app-loader.active .genie-aura { opacity: .9; }
@keyframes auraPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .5; }
  50%      { transform: translate(-50%, -50%) scale(1.1);  opacity: .95; }
}

/* ---------- तळाचा चिराग ---------- */
.genie-lamp {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 200px;
  margin-left: -100px;
  transform-origin: 50% 88%;
  animation: lampShake 2.4s ease-in-out infinite;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .6))
          drop-shadow(0 0 26px color-mix(in srgb, var(--lampGlow) 65%, transparent));
}
.genie-lamp img { width: 100%; height: auto; display: block; }
.app-loader.leaving .genie-lamp { animation: lampPop 1s ease-out forwards; }
@keyframes lampShake {
  0%, 100% { transform: rotate(0deg) translateY(0) scale(1); }
  25%      { transform: rotate(-2deg) translateY(-2px) scale(1.01); }
  75%      { transform: rotate(2deg)  translateY(2px)  scale(.99); }
}
@keyframes lampPop {
  0%   { transform: scale(1) rotate(0deg); }
  45%  { transform: scale(1.18) rotate(-6deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ---------- चिरागातून वर जाणारा धुराचा स्तंभ ---------- */
.genie-smoke {
  position: absolute;
  left: 50%;
  bottom: 96px;
  width: 46vmin;
  height: 62vh;
  margin-left: -23vmin;
  border-radius: 50% 50% 42% 58%;
  background:
    radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--aura) 80%, #fff) 0%,
      color-mix(in srgb, var(--aura2) 40%, transparent) 38%, transparent 72%);
  filter: blur(24px);
  transform-origin: 50% 100%;
  opacity: 0;
  animation: smokeSwirl 4s ease-in-out infinite;
}
.app-loader.active .genie-smoke { opacity: .85; }
@keyframes smokeSwirl {
  0%, 100% { transform: translateY(0) scale(1, 1) rotate(-2deg); opacity: .6; }
  50%      { transform: translateY(-18px) scale(1.12, 1.05) rotate(2deg); opacity: .95; }
}

/* धुराचे फिरणारे वलय */
.genie-smoke::before,
.genie-smoke::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 60%;
  height: 32%;
  margin-left: -30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--aura) 55%, #fff) 0%, transparent 70%);
  filter: blur(10px);
  animation: smokeRing 3.2s linear infinite;
}
.genie-smoke::after { animation-delay: 1.6s; }
@keyframes smokeRing {
  0%   { opacity: 0; transform: translateY(0) scale(.5) rotate(0deg); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-58vh) scale(1.7) rotate(180deg); }
}

/* ---------- मध्यभागी मोठा जिनी ---------- */
.genie-man {
  position: absolute;
  left: 50%;
  bottom: 118px;
  width: min(62vh, 78vw);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 46px color-mix(in srgb, var(--aura) 70%, transparent)) saturate(1.15);
}
.genie-man img {
  width: 100%; height: auto; display: block;
  transform-origin: 50% 100%;
  animation: genieBreath 3.6s ease-in-out infinite;
}
.app-loader.active.phase-magic .genie-man--magic img { animation: genieCast 1.8s ease-in-out infinite; }

/* जिवंत वाटावा म्हणून सततची हालचाल */
@keyframes genieBreath {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
  25%      { transform: translateY(-10px) rotate(-1.4deg) scale(1.012, .992); }
  50%      { transform: translateY(-16px) rotate(0deg) scale(.99, 1.014); }
  75%      { transform: translateY(-8px) rotate(1.4deg) scale(1.01, .995); }
}
@keyframes genieCast {
  0%, 100% { transform: translateY(-6px) rotate(-2.6deg) scale(1, 1); }
  50%      { transform: translateY(-20px) rotate(2.6deg) scale(1.04, 1.02); }
}

/* pose switching */
.genie-man--magic { opacity: 0; }
.app-loader.active .genie-man--namaste { animation: genieRise 1.5s cubic-bezier(.2, 1.1, .32, 1) forwards; }
.app-loader.active.phase-magic .genie-man--namaste { animation: goPose .5s ease forwards; }
.app-loader.active.phase-magic .genie-man--magic  { animation: comePose .6s ease forwards; }
.app-loader.leaving .genie-man--magic   { animation: goPose .3s ease forwards; }
.app-loader.leaving .genie-man--namaste { animation: genieReturn 1.15s cubic-bezier(.55, 0, .85, .25) forwards; }

/* धुरातून निघून मोठा होत जाणारा जिनी */
@keyframes genieRise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(120px) scale(.04) skewX(34deg) rotate(8deg); filter: blur(10px) drop-shadow(0 0 30px var(--aura)); }
  30%  { opacity: .9; transform: translateX(-50%) translateY(56px) scale(.34) skewX(-16deg) rotate(-5deg); filter: blur(4px) drop-shadow(0 0 34px var(--aura)); }
  62%  { opacity: 1; transform: translateX(-50%) translateY(4px) scale(.86) skewX(7deg) rotate(2deg); filter: blur(1px) drop-shadow(0 0 40px var(--aura)); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.06) skewX(-2deg); filter: blur(0) drop-shadow(0 0 46px var(--aura)); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) skewX(0); filter: blur(0) drop-shadow(0 0 46px var(--aura)) saturate(1.15); }
}
@keyframes genieReturn {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1) skewX(0); }
  25%  { opacity: 1; transform: translateX(-50%) translateY(-22px) scale(1.06) skewX(10deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(130px) scale(.03) skewX(-36deg) rotate(-10deg); filter: blur(10px); }
}
@keyframes comePose { from { opacity: 0; transform: translateX(-50%) scale(.95); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes goPose   { from { opacity: 1; } to { opacity: 0; } }

/* जादूचे कण — पूर्ण स्क्रीनभर */
.genie-dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.genie-dust i {
  position: absolute;
  bottom: 90px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aura);
  box-shadow: 0 0 14px 3px color-mix(in srgb, var(--aura) 80%, #fff);
  opacity: 0;
  animation: dustFly 4s linear infinite;
}
.genie-dust i:nth-child(1) { left: 30%; animation-delay: .0s; }
.genie-dust i:nth-child(2) { left: 40%; animation-delay: .6s; width:5px;height:5px; }
.genie-dust i:nth-child(3) { left: 50%; animation-delay: 1.1s; }
.genie-dust i:nth-child(4) { left: 58%; animation-delay: 1.7s; width:6px;height:6px; }
.genie-dust i:nth-child(5) { left: 66%; animation-delay: 2.3s; width:4px;height:4px; }
.genie-dust i:nth-child(6) { left: 36%; animation-delay: 2.9s; width:5px;height:5px; }
.genie-dust i:nth-child(7) { left: 46%; animation-delay: 3.4s; }
.genie-dust i:nth-child(8) { left: 62%; animation-delay: 1.4s; width:4px;height:4px; }
@keyframes dustFly {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70vh) translateX(28px) scale(1.3); }
}

/* ---------- संवाद (स्क्रीनवर तरंगणारा, card नाही) ---------- */
.app-loader__panel {
  position: absolute;
  left: 50%;
  top: 5vh;
  transform: translateX(-50%);
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.app-loader__title {
  font-family: 'Mukta', 'Noto Sans Devanagari', 'Poppins', Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.55;
  color: #f8fafc;
  padding: 11px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--aura) 30%, rgba(10,8,24,.55)), color-mix(in srgb, var(--aura2) 24%, rgba(10,8,24,.55)));
  border: 1px solid color-mix(in srgb, var(--aura) 45%, transparent);
  box-shadow: 0 12px 34px -12px var(--aura);
  backdrop-filter: blur(4px);
  animation: speakPop .55s ease-out both .7s, speakFloat 4s ease-in-out 1.2s infinite;
}
@keyframes speakPop {
  from { opacity: 0; transform: translateY(-12px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes speakFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* प्रत्येक service ची वेगळी प्रक्रिया (steps) — खालच्या बाजूला */
.genie-steps {
  position: absolute;
  left: 50%;
  top: calc(5vh + 118px);
  transform: translateX(-50%);
  width: min(330px, 84vw);
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(8, 7, 20, .55);
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.genie-steps:empty { display: none; }
.genie-step {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Mukta', 'Noto Sans Devanagari', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(226, 232, 240, .5);
  transition: color .3s ease, transform .3s ease;
}
.genie-step .genie-step__dot {
  flex: 0 0 16px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, .45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: transparent;
  transition: all .3s ease;
}
.genie-step.is-active { color: #fff; transform: translateX(3px); }
.genie-step.is-active .genie-step__dot {
  border-color: var(--aura);
  background: var(--aura);
  box-shadow: 0 0 12px var(--aura);
  animation: stepPulse 1s ease-in-out infinite;
}
.genie-step.is-done { color: rgba(226, 232, 240, .85); }
.genie-step.is-done .genie-step__dot {
  border-color: var(--aura);
  background: color-mix(in srgb, var(--aura) 35%, transparent);
  color: #fff;
}
.genie-step.is-done .genie-step__dot::after { content: '✓'; }
@keyframes stepPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

.app-loader__subtext {
  font-family: 'Mukta', 'Noto Sans Devanagari', Arial, sans-serif;
  font-size: 13px;
  color: color-mix(in srgb, var(--aura) 70%, #cbd5e1);
  font-weight: 700;
  margin-top: 8px;
}
.app-loader__dots { display: inline-block; width: 22px; text-align: left; }
.app-loader__dots::after { content: ''; animation: appDots 1.4s steps(4, end) infinite; }
@keyframes appDots {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; }
}

.app-loader__bar {
  margin-top: 10px;
  width: min(260px, 70vw);
  height: 6px;
  background: rgba(255, 255, 255, .12);
  border-radius: 10px;
  overflow: hidden;
}
.app-loader__bar-fill {
  height: 100%;
  width: 42%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--aura), #fff, var(--aura2), var(--aura));
  background-size: 300% 100%;
  animation: appBar 1.5s linear infinite;
}
@keyframes appBar {
  0%   { transform: translateX(-140%); background-position: 0% 50%; }
  100% { transform: translateX(340%); background-position: 100% 50%; }
}

/* जुना card / spinner असलेल्या पानांसाठी */
.app-loader__card { background: none !important; box-shadow: none !important; padding: 0 !important; }
.app-loader__spinner { display: none !important; }

@media (max-width: 480px) {
  .genie-lamp { width: 150px; margin-left: -75px; bottom: 8px; }
  .genie-man { width: 88vw; bottom: 92px; }
  .app-loader__title { font-size: 15px; }
  .genie-steps { top: calc(5vh + 108px); padding: 10px 13px; gap: 5px; }
  .genie-step { font-size: 12px; }
}

@media (max-height: 620px) {
  .genie-man { width: min(56vh, 76vw); bottom: 84px; }
  .genie-lamp { width: 130px; margin-left: -65px; }
}

@media (prefers-reduced-motion: reduce) {
  .genie-man, .genie-man img, .genie-lamp, .genie-smoke, .genie-aura, .genie-dust i, .app-loader__title {
    animation: none !important;
  }
  .genie-man--namaste { opacity: 1 !important; transform: translateX(-50%) !important; }
}

/* ============================================================
   v103 — विजा कडकडाट + प्रत्येक service साठी वेगळी जादू (FX layer)
   ============================================================ */
.genie-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* ---------- १) विजेचा लखलखाट (सर्व service साठी) ---------- */
.fx-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 35%, #fff 0%, color-mix(in srgb, var(--aura) 60%, #fff) 25%, transparent 70%);
  opacity: 0; mix-blend-mode: screen;
}
.app-loader.active .fx-flash { animation: fxFlash 5.2s ease-out infinite; }
.app-loader.active.phase-magic .fx-flash { animation-duration: 3.1s; }
@keyframes fxFlash {
  0%, 6%, 100% { opacity: 0; }
  2%   { opacity: .55; }
  3.2% { opacity: .12; }
  4.4% { opacity: .42; }
}

/* वीज — नागमोडी रेषा */
.fx-bolt {
  position: absolute;
  top: -4%;
  width: 3px; height: 62%;
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--aura) 85%, #fff) 45%, transparent);
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 22px var(--aura));
  opacity: 0;
  transform-origin: 50% 0;
  clip-path: polygon(40% 0, 62% 0, 48% 26%, 74% 26%, 34% 62%, 47% 36%, 24% 36%);
}
.fx-bolt--1 { left: 18%; animation: fxBolt 4.6s ease-out infinite .3s; }
.fx-bolt--2 { left: 76%; height: 48%; animation: fxBolt 5.3s ease-out infinite 1.9s; transform: scaleX(-1); }
.fx-bolt--3 { left: 47%; height: 38%; animation: fxBolt 6.1s ease-out infinite 3.2s; }
.app-loader.active.phase-magic .fx-bolt { animation-duration: 2.6s, 3.1s, 3.6s; }
@keyframes fxBolt {
  0%, 8%, 100% { opacity: 0; transform: scaleY(.2); }
  2%  { opacity: 1; transform: scaleY(1); }
  4%  { opacity: .2; }
  6%  { opacity: .9; transform: scaleY(1) skewX(-4deg); }
}

/* जिनीच्या हातातून सुटणारे जादूचे वलय */
.fx-ring {
  position: absolute;
  left: 50%; top: 46%;
  width: 24vmin; height: 24vmin;
  margin: -12vmin 0 0 -12vmin;
  border: 2px solid color-mix(in srgb, var(--aura) 80%, #fff);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 26px color-mix(in srgb, var(--aura) 70%, transparent) inset;
}
.app-loader.active.phase-magic .fx-ring { animation: fxRing 2.4s ease-out infinite; }
.app-loader.active.phase-magic .fx-ring--2 { animation-delay: 1.2s; }
@keyframes fxRing {
  0%   { opacity: 0; transform: scale(.2) rotateX(68deg); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: scale(2.6) rotateX(68deg); }
}

/* service चिन्हे — जिनीभोवती फिरणारी / उडणारी जादू */
.fx-items { position: absolute; inset: 0; }
.fx-items i {
  position: absolute;
  bottom: 120px;
  font-size: 26px;
  font-style: normal;
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--aura) 85%, #fff));
  animation: fxItem 4.4s ease-in-out infinite;
}
.fx-items i::before { content: var(--glyph, '✦'); }
.fx-items i:nth-child(1) { left: 22%; animation-delay: .0s; }
.fx-items i:nth-child(2) { left: 33%; animation-delay: .7s; font-size: 20px; }
.fx-items i:nth-child(3) { left: 44%; animation-delay: 1.3s; font-size: 30px; }
.fx-items i:nth-child(4) { left: 56%; animation-delay: 2.0s; }
.fx-items i:nth-child(5) { left: 67%; animation-delay: 2.6s; font-size: 22px; }
.fx-items i:nth-child(6) { left: 78%; animation-delay: 3.3s; font-size: 18px; }
@keyframes fxItem {
  0%   { opacity: 0; transform: translateY(0) scale(.4) rotate(0deg); }
  18%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-64vh) scale(1.25) rotate(220deg); }
}

/* स्कॅन-किरण (काही service साठी) */
.fx-beam {
  position: absolute; left: 0; right: 0; top: 20%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #fff, color-mix(in srgb, var(--aura) 80%, #fff), transparent);
  filter: blur(1px) drop-shadow(0 0 14px var(--aura));
  opacity: 0;
}

/* जादूचे चक्र (seal) */
.fx-seal {
  position: absolute;
  left: 50%; bottom: 90px;
  width: 46vmin; height: 46vmin;
  margin-left: -23vmin;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--aura) 70%, #fff);
  box-shadow: 0 0 40px color-mix(in srgb, var(--aura) 45%, transparent);
  transform: rotateX(72deg);
  opacity: 0;
}
.fx-seal::after {
  content: '';
  position: absolute; inset: 18%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--aura2) 75%, #fff);
}

/* ---------- २) प्रत्येक service ची स्वतंत्र जादू ---------- */
/* PAN — सोनेरी कार्डांचा पाऊस + वीज */
.app-loader.fx--pan   { --glyph: '🪪'; }
.app-loader.fx--pan .fx-items i { animation-name: fxRain; bottom: auto; top: -8%; }
@keyframes fxRain {
  0%   { opacity: 0; transform: translateY(-10vh) rotate(-20deg) scale(.6); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(88vh) rotate(200deg) scale(1.1); }
}

/* Voter — मतपेटी + निळा स्कॅन किरण */
.app-loader.fx--voter { --glyph: '🗳'; }
.app-loader.fx--voter .fx-beam { animation: fxBeam 2.6s linear infinite; }
@keyframes fxBeam {
  0%   { opacity: 0; top: 12%; }
  10%  { opacity: .95; }
  100% { opacity: 0; top: 86%; }
}

/* शेतकरी — पानं / गहू वाऱ्यावर झुलत ---------- */
.app-loader.fx--farmer { --glyph: '🌾'; }
.app-loader.fx--farmer .fx-items i { animation-name: fxLeaf; animation-duration: 5.4s; }
@keyframes fxLeaf {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg) scale(.5); }
  20%  { opacity: 1; }
  50%  { transform: translate(6vw, -30vh) rotate(140deg) scale(1); }
  100% { opacity: 0; transform: translate(-6vw, -66vh) rotate(320deg) scale(1.2); }
}

/* पैसे — सोन्याच्या नाण्यांचा वर्षाव + चक्र */
.app-loader.fx--money { --glyph: '🪙'; }
.app-loader.fx--money .fx-items i { animation-name: fxCoin; bottom: auto; top: -8%; }
.app-loader.fx--money .fx-seal { opacity: .55; animation: fxSpin 7s linear infinite; }
@keyframes fxCoin {
  0%   { opacity: 0; transform: translateY(-10vh) rotateY(0deg) scale(.6); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(80vh) rotateY(1080deg) scale(1); }
}
@keyframes fxSpin { to { transform: rotateX(72deg) rotate(360deg); } }

/* फाईल — गुंडाळी उलगडते, कागद उडतात */
.app-loader.fx--file { --glyph: '📜'; }
.app-loader.fx--file .fx-items i { animation-name: fxPaper; }
@keyframes fxPaper {
  0%   { opacity: 0; transform: translate(0,0) rotate(0) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(10vw, -60vh) rotate(-260deg) scale(1.15); }
}

/* प्रिंट — पानं छापून बाहेर + स्कॅन किरण */
.app-loader.fx--print { --glyph: '📄'; }
.app-loader.fx--print .fx-beam { animation: fxBeam 1.8s linear infinite; }
.app-loader.fx--print .fx-items i { animation-name: fxPrintOut; }
@keyframes fxPrintOut {
  0%   { opacity: 0; transform: translateY(0) scaleY(.1); }
  15%  { opacity: 1; transform: translateY(-8vh) scaleY(1); }
  100% { opacity: 0; transform: translateY(-56vh) translateX(4vw) rotate(30deg); }
}

/* Form — जादूचे चक्र व अक्षरे फिरतात */
.app-loader.fx--form { --glyph: '✦'; }
.app-loader.fx--form .fx-seal { opacity: .7; animation: fxSpin 9s linear infinite reverse; }
.app-loader.fx--form .fx-items i { animation-name: fxOrbit; animation-duration: 5s; }
@keyframes fxOrbit {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  20%  { opacity: 1; }
  50%  { transform: translate(-8vw, -34vh) scale(1.1); }
  100% { opacity: 0; transform: translate(8vw, -62vh) scale(.6); }
}

/* अहवाल — आलेख वर चढतात */
.app-loader.fx--report { --glyph: '📊'; }
.app-loader.fx--report .fx-items i { animation-name: fxGrow; }
@keyframes fxGrow {
  0%   { opacity: 0; transform: translateY(0) scale(.3); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-50vh) scale(1.4); }
}

/* API — विजेचे गोळे जिनीभोवती फिरतात, वीज जास्त */
.app-loader.fx--api { --glyph: '⚡'; }
.app-loader.fx--api .fx-bolt { animation-duration: 3.2s; }
.app-loader.fx--api .fx-items i { animation-name: fxZap; animation-duration: 3.2s; }
@keyframes fxZap {
  0%   { opacity: 0; transform: translateY(0) scale(.3); }
  10%  { opacity: 1; transform: translateY(-12vh) scale(1.2); }
  55%  { opacity: .8; transform: translateY(-34vh) scale(.8); }
  100% { opacity: 0; transform: translateY(-58vh) scale(1.4); }
}

/* Nav — तारे व भोवरा (portal) */
.app-loader.fx--nav { --glyph: '✧'; }
.app-loader.fx--nav .fx-seal { opacity: .5; animation: fxSpin 5s linear infinite; }

@media (max-width: 480px) {
  .fx-items i { font-size: 20px; }
  .fx-seal { width: 66vw; height: 66vw; margin-left: -33vw; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-bolt, .fx-flash, .fx-items i, .fx-ring, .fx-beam, .fx-seal { animation: none !important; opacity: 0 !important; }
}