/* =====================================================
   VKP Genie Cursor — front-end stylesheet
   Class prefix: vkp-genie-*  to avoid collisions
   ===================================================== */

/* Hide native cursor while the genie is active */
html.vkp-genie-active,
html.vkp-genie-active body,
html.vkp-genie-active * { cursor: none !important; }

.vkp-genie-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
  overflow: visible;
}

/* ---------- The Genie itself ---------- */
.vkp-genie {
  position: fixed;
  left: 0;
  top: 0;
  width: 84px;
  height: 110px;
  margin-left: -10px;
  margin-top: -6px;
  transform: translate3d(-200px, -200px, 0);
  will-change: transform;
  transition:
    filter 220ms ease,
    width 220ms cubic-bezier(.34,1.56,.64,1),
    height 220ms cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 8px 14px rgba(40,140,255,.45))
          drop-shadow(0 0 18px rgba(80,180,255,.35));
}

.vkp-genie-inner {
  width: 100%;
  height: 100%;
  transform-origin: 22% 18%;
  animation: vkp-genie-float 3.2s ease-in-out infinite;
}
@keyframes vkp-genie-float {
  0%, 100% { transform: translateY(0)   rotate(-2deg); }
  50%      { transform: translateY(-4px) rotate( 2deg); }
}

.vkp-genie-aura {
  position: absolute;
  left: 50%; top: 24%;
  width: 70px; height: 70px;
  margin-left: -35px; margin-top: -35px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(120,210,255,.55) 0%,
    rgba(80,160,255,.25) 40%,
    rgba(80,160,255,0)   70%);
  opacity: .85;
  animation: vkp-genie-aura-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vkp-genie-aura-pulse {
  0%,100% { transform: scale(1);    opacity: .55; }
  50%     { transform: scale(1.18); opacity: .95; }
}

/* ---------- Hover state ---------- */
.vkp-genie.is-hover {
  width: 108px; height: 138px;
  filter: drop-shadow(0 10px 18px rgba(255,180,60,.55))
          drop-shadow(0 0  28px rgba(255,220,120,.85));
}
.vkp-genie.is-hover .vkp-genie-aura {
  background: radial-gradient(circle,
    rgba(255,240,170,.9)  0%,
    rgba(255,200,80,.45)  45%,
    rgba(255,180,60,0)    75%);
  animation-duration: 1.1s;
}

/* ---------- Click squash ---------- */
.vkp-genie.is-clicking .vkp-genie-inner {
  animation: vkp-genie-zap 420ms ease-out;
}
@keyframes vkp-genie-zap {
  0%   { transform: scale(1)        rotate(-2deg); }
  20%  { transform: scale(1.18)     rotate(-8deg); }
  45%  { transform: scale(.9, 1.1)  rotate( 6deg); }
  70%  { transform: scale(1.06)     rotate(-3deg); }
  100% { transform: scale(1)        rotate( 0deg); }
}

/* ---------- Trail particles (golden stars while moving) ---------- */
.vkp-genie-trail {
  position: fixed;
  left: 0; top: 0;
  width: 14px; height: 14px;
  margin-left: -7px; margin-top: -7px;
  pointer-events: none;
  color: #ffe27a;
  animation: vkp-genie-trail-fade 1100ms ease-out forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 6px rgba(255,210,90,.95))
          drop-shadow(0 0 12px rgba(255,170,40,.55));
}
.vkp-genie-trail svg { width: 100%; height: 100%; display: block; }
@keyframes vkp-genie-trail-fade {
  0%   { transform: translate3d(var(--tx,0), var(--ty,0), 0)
                    rotate(0deg) scale(.4);
         opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate3d(calc(var(--tx,0) + var(--dx,0)),
                                calc(var(--ty,0) - 34px), 0)
                    rotate(160deg) scale(1.3);
         opacity: 0; }
}

/* ---------- Sparkle particles (golden stars) ---------- */
.vkp-genie-sparkle {
  position: fixed;
  left: 0; top: 0;
  width: 10px; height: 10px;
  margin-left: -5px; margin-top: -5px;
  pointer-events: none;
  color: #ffe27a;
  animation: vkp-genie-sparkle 800ms ease-out forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 6px rgba(255,210,90,.95))
          drop-shadow(0 0 12px rgba(255,170,40,.55));
}
.vkp-genie-sparkle svg { width: 100%; height: 100%; display: block; }
.vkp-genie-sparkle.sm { width: 6px;  height: 6px;  margin-left: -3px; margin-top: -3px; }
.vkp-genie-sparkle.lg { width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; }
@keyframes vkp-genie-sparkle {
  0%   { transform: translate3d(var(--tx,0), var(--ty,0), 0)
                    rotate(0deg) scale(.3);
         opacity: 1; }
  100% { transform: translate3d(calc(var(--tx,0) + var(--dx,0)),
                                calc(var(--ty,0) + var(--dy,0)), 0)
                    rotate(180deg) scale(1.2);
         opacity: 0; }
}

/* ---------- Magic rings on click ---------- */
.vkp-genie-ring {
  position: fixed;
  left: 0; top: 0;
  width: 30px; height: 30px;
  margin-left: -15px; margin-top: -15px;
  border-radius: 50%;
  border: 2px solid rgba(255,220,110,.95);
  box-shadow:
    0 0 22px rgba(255,190,60,.85),
    inset 0 0 14px rgba(255,235,160,.65);
  pointer-events: none;
  animation: vkp-genie-ring 720ms cubic-bezier(.16,.84,.3,1) forwards;
  will-change: transform, opacity;
}
.vkp-genie-ring.alt {
  border-color: rgba(180,230,255,.95);
  box-shadow:
    0 0 22px rgba(120,200,255,.8),
    inset 0 0 12px rgba(200,235,255,.55);
  animation-duration: 820ms;
}
.vkp-genie-flash {
  position: fixed;
  left: 0; top: 0;
  width: 40px; height: 40px;
  margin-left: -20px; margin-top: -20px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(255,240,180,.85) 0%,
    rgba(255,190,80,.45)  40%,
    rgba(255,150,40,0)    72%);
  animation: vkp-genie-flash 520ms ease-out forwards;
  will-change: transform, opacity;
  filter: blur(1px);
}
@keyframes vkp-genie-ring {
  0%   { transform: translate3d(var(--tx,0), var(--ty,0), 0) scale(.2);
         opacity: .95; }
  100% { transform: translate3d(var(--tx,0), var(--ty,0), 0) scale(3.6);
         opacity: 0; }
}
@keyframes vkp-genie-flash {
  0%   { transform: translate3d(var(--tx,0), var(--ty,0), 0) scale(.3);
         opacity: 1; }
  100% { transform: translate3d(var(--tx,0), var(--ty,0), 0) scale(2.6);
         opacity: 0; }
}

/* ---------- Touch / coarse-pointer fallback ---------- */
@media (hover: none), (pointer: coarse) {
  html.vkp-genie-active,
  html.vkp-genie-active body,
  html.vkp-genie-active * { cursor: auto !important; }
  .vkp-genie-layer { display: none; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .vkp-genie-inner,
  .vkp-genie-aura,
  .vkp-genie-trail,
  .vkp-genie-sparkle,
  .vkp-genie-ring,
  .vkp-genie-flash {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}