/* ============================================================
   P16 — LOGO GIMMICK (Framer-style premium)  ·  gimmick.v2.css
   Brand element: JN monogram + cyan spark (logo-primary.png)
   5 micro-gimmicks + FRAMER SIGNATURE: continuous spark spin
   (Framer's logo = 4-point star that spins 360°, __framer-loading-spin)
   ============================================================ */

/* --- wrapper context --------------------------------------- */
.brand { position: relative; display: inline-block; perspective: 600px; }
.brand-logo { will-change: transform; transform-style: preserve-3d; }

/* --- 1. SPARK FLARE (entry, once) --------------------------- */
.brand-spark {
  position: absolute; left: 15%; top: 15.2%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: #00C2FF;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: sparkFlare .8s cubic-bezier(.22,1,.36,1) .15s 1 forwards;
  will-change: transform, opacity;
}
.brand-flare-ring {
  position: absolute; left: 15%; top: 15.2%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border: 2px solid rgba(0,194,255,.85);
  border-radius: 50%;
  opacity: 0; pointer-events: none;
  animation: sparkRing .8s cubic-bezier(.22,1,.36,1) .15s 1 forwards;
  will-change: transform, opacity;
}
@keyframes sparkFlare {
  0%   { transform: scale(0); opacity: 0; filter: drop-shadow(0 0 0 rgba(0,194,255,0)); }
  55%  { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 10px rgba(0,194,255,.95)); }
  100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 5px rgba(0,194,255,.55)); }
}
@keyframes sparkRing {
  0%   { transform: scale(.2); opacity: .9; }
  100% { transform: scale(5.5); opacity: 0; }
}

/* --- 2. GRADIENT SHIMMER sweep (5s loop) --------------------- */
.brand::after {
  content: ""; position: absolute; inset: -4px;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.7) 50%, rgba(0,194,255,.45) 52%, transparent 60%);
  mix-blend-mode: screen; pointer-events: none;
  transform: translateX(-110%);
  animation: shimmerSweep 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes shimmerSweep {
  0%, 62%  { transform: translateX(-110%); }
  78%, 100%{ transform: translateX(110%); }
}

/* --- 3. 3D TILT on hover (desktop, JS sets --rx/--ry) ------- */
.brand-logo { transition: transform .18s ease-out; }
.brand:hover .brand-logo {
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  filter: drop-shadow(0 0 20px rgba(0,194,255,.4));
}

/* --- 4. MAGNETIC LOGO (JS sets --mx/--my) -------------------- */
.brand { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.brand.magnetic { transform: translate(var(--mx,0px), var(--my,0px)); }

/* --- 5. SPARK PULSE (continuous, mobile too) ----------------- */
.brand-spark { animation: sparkFlare .8s cubic-bezier(.22,1,.36,1) .15s 1 forwards,
              sparkPulse 3s ease-in-out 1.15s infinite; }
@keyframes sparkPulse {
  0%, 100% { opacity: .7;  filter: drop-shadow(0 0 3px rgba(0,194,255,.15)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 9px rgba(0,194,255,.35)); }
}

/* --- 6. FRAMER SIGNATURE: continuous spark spin ---------------
   Framer ka logo = 4-point star jo 360° spin karta hai
   (unka @keyframes __framer-loading-spin: 0%→rotate(0deg), 100%→rotate(360deg))
   Modern independent `rotate` property = scale/transform se NO conflict
   Spin 6s (slow, premium) — hover pe accelerate (desktop only) */
.brand-spark { animation: sparkFlare .8s cubic-bezier(.22,1,.36,1) .15s 1 forwards,
              sparkPulse 3s ease-in-out 1.15s infinite,
              sparkSpin 6s linear 1.15s infinite; }
@keyframes sparkSpin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}
.brand:hover .brand-spark { animation-duration: .8s, 3s, 2.2s; }

/* --- mobile: tilt + magnetic OFF, spin stays (alive feel) ---- */
@media (hover: none) {
  .brand-logo { transform: none !important; filter: none !important; }
  .brand.magnetic { transform: none !important; }
  .brand { perspective: none; }
  .brand:hover .brand-spark { animation-duration: .8s, 3s, 6s; }
}

/* --- reduced motion: all gimmicks off ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .brand-spark, .brand-flare-ring, .brand::after { animation: none !important; opacity: 1; }
  .brand-logo, .brand { transition: none !important; transform: none !important; filter: none !important; }
}