/* ============================================================
   CURSOR.CSS — Sri Garuda Decorators
   Custom HEART cursor — replaces default OS cursor.
   Click: hearts burst outward + gold sparks + ripple ring.
   Hover: heart grows + glows + beats faster.
   ============================================================ */

/* ── Hide default cursor everywhere ── */
*,
*::before,
*::after {
  cursor: none !important;
}

/* ── Main cursor ── */
.sgd-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: width 0.25s ease, height 0.25s ease, opacity 0.3s ease;
}

/* ── Trailing follower ring ── */
.sgd-cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 52px;
  height: 52px;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  will-change: left, top;
  transition: width 0.35s ease, height 0.35s ease, opacity 0.3s ease;
}
.sgd-cursor-follower-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(242, 217, 160, 0.45);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

/* ── Heart SVG inside cursor ── */
.sgd-cursor-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 5px rgba(117, 22, 45, 0.8));
  animation: heartbeat 1.6s ease-in-out infinite;
  transition: filter 0.3s ease;
}

/* ── HOVER state ── */
body.cursor-hover .sgd-cursor {
  width: 36px;
  height: 36px;
}
body.cursor-hover .sgd-cursor-svg {
  filter: drop-shadow(0 0 12px rgba(242, 217, 160, 1));
  animation: heartbeatFast 0.65s ease-in-out infinite;
}
body.cursor-hover .sgd-cursor-follower {
  width: 70px;
  height: 70px;
}
body.cursor-hover .sgd-cursor-follower-ring {
  border-color: rgba(242, 217, 160, 0.9);
  transform: scale(1.1);
}

/* ── CLICK state ── */
body.cursor-click .sgd-cursor-svg {
  animation: heartClick 0.4s ease-out forwards;
  filter: drop-shadow(0 0 20px rgba(242, 217, 160, 1));
}

/* ── HIDDEN when mouse leaves page ── */
body.cursor-hidden .sgd-cursor,
body.cursor-hidden .sgd-cursor-follower {
  opacity: 0;
}

/* ── Heartbeat animations ── */
@keyframes heartbeat {
  0%,  100% { transform: scale(1); }
  14%        { transform: scale(1.2); }
  28%        { transform: scale(1); }
  42%        { transform: scale(1.13); }
  56%        { transform: scale(1); }
}
@keyframes heartbeatFast {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}
@keyframes heartClick {
  0%   { transform: scale(1);   }
  25%  { transform: scale(2.2); }
  55%  { transform: scale(0.8); }
  100% { transform: scale(1);   }
}


/* ══════════════════════════════════════════════════════════
   BURST CONTAINER + PARTICLES
══════════════════════════════════════════════════════════ */

.sgd-cursor-burst {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 999997;
}

/* Mini heart particles */
.sgd-heart-particle {
  position: absolute;
  pointer-events: none;
  opacity: 1;
  animation: heartParticleBurst 0.7s ease-out forwards;
}
.sgd-heart-particle svg { display: block; }

/* Gold sparks */
.sgd-spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  animation: sparkBurst 0.55s ease-out forwards;
}

/* Ripple ring */
.sgd-click-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid rgba(242, 217, 160, 0.85);
  animation: rippleExpand 0.6s ease-out forwards;
}

/* ── Particle keyframes ── */
@keyframes heartParticleBurst {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  60% { opacity: 0.9; }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot));
    opacity: 0;
  }
}

@keyframes sparkBurst {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

@keyframes rippleExpand {
  0% {
    width: 8px; height: 8px;
    margin-left: -4px; margin-top: -4px;
    opacity: 1;
  }
  100% {
    width: 90px; height: 90px;
    margin-left: -45px; margin-top: -45px;
    opacity: 0;
    border-color: rgba(242, 217, 160, 0);
  }
}

/* ── Touch/mobile: restore normal cursor ── */
@media (hover: none) and (pointer: coarse) {
  * { cursor: auto !important; }
  .sgd-cursor,
  .sgd-cursor-follower,
  .sgd-cursor-burst { display: none !important; }
}