/* =========================================================
   Cursor Generator — cursor overlay + particles (page CSS)
   Requires: friend.css loaded (vars + base UI)
   Suggested body scope: .page-cursor-gen
   ========================================================= */

/* --- Preview sandbox container (for absolute positioned cursor) --- */
/* (supporto id vecchi + classi) */
:where(#cursorPreview, #cursorSandbox, .cursorPreview, .cursorSandbox, .previewSandbox){
  position: relative;
  overflow: hidden;
  min-height: 220px;

  border: 3px solid var(--border, #000);
  border-radius: var(--radius, 14px);
  box-shadow: 6px 6px 0 #000;
  padding: 14px;

  background:
    radial-gradient(900px 450px at 65% 35%, rgba(113,215,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 35% 70%, rgba(255,92,207,0.14), transparent 60%),
    rgba(255,255,255,.65);
}

/* --- Hide system cursor (support 3 possible class names) --- */
:is(.is-hide-system-cursor, .hideSystemCursor, .mc-hide-system){
  cursor: none !important;
}
:is(.is-hide-system-cursor, .hideSystemCursor, .mc-hide-system) *{
  cursor: none !important;
}

/* --- Custom cursor injected by JS --- */
:is(.magicCursor, .mc-cursor, .cursorFx){
  position: absolute;
  left: 0;
  top: 0;
  width: var(--mc-size, 28px);
  height: var(--mc-size, 28px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: var(--mc-z, 9999);
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.85));
}

:is(.magicCursor, .mc-cursor, .cursorFx) svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Outline toggle (support: class on wrapper OR on cursor element) --- */
.mc-outline svg *,
:is(.magicCursor, .mc-cursor, .cursorFx).is-outline svg *{
  stroke: #000;
  stroke-width: 2px;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
}

/* --- Particles / trail --- */
:is(.mc-particle, .cursorParticle, .trailParticle){
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: calc(var(--mc-z, 9999) - 1);
  width: var(--p-size, 10px);
  height: var(--p-size, 10px);
  opacity: 1;
}

/* Sparkle */
:is(.mc-particle.sparkle, .cursorParticle.sparkle){
  width: var(--p-size, 12px);
  height: var(--p-size, 12px);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 70% 70%, rgba(255,92,207,.65), rgba(255,92,207,0) 60%),
    radial-gradient(circle at 45% 60%, rgba(113,215,255,.55), rgba(113,215,255,0) 60%);
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 999px;
  animation: mcPop 420ms ease-out forwards;
}

/* Pixel */
:is(.mc-particle.pixel, .cursorParticle.pixel){
  width: var(--p-size, 8px);
  height: var(--p-size, 8px);
  background: rgba(255,230,110,.9);
  border: 1px solid rgba(0,0,0,.55);
  box-shadow: 1px 1px 0 #000;
  animation: mcPixel 520ms ease-out forwards;
}

/* Heart */
:is(.mc-particle.heart, .cursorParticle.heart){
  width: 10px;
  height: 10px;
  background: rgba(255,92,207,.85);
  transform: translate(-50%,-50%) rotate(45deg);
  animation: mcFloat 650ms ease-out forwards;
}
:is(.mc-particle.heart, .cursorParticle.heart)::before,
:is(.mc-particle.heart, .cursorParticle.heart)::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  background: rgba(255,92,207,.85);
  border-radius: 999px;
}
:is(.mc-particle.heart, .cursorParticle.heart)::before{ left:-5px; top:0; }
:is(.mc-particle.heart, .cursorParticle.heart)::after{ left:0; top:-5px; }

/* --- Animations --- */
@keyframes mcPop{
  from{ transform: translate(-50%,-50%) scale(.65); opacity: 0; }
  to  { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1); opacity: 0; }
}
@keyframes mcPixel{
  from{ transform: translate(-50%,-50%) scale(1); opacity: 1; }
  to  { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(.7); opacity: 0; }
}
@keyframes mcFloat{
  from{ transform: translate(-50%,-50%) rotate(45deg); opacity: 1; }
  to  { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 22px)) rotate(45deg); opacity: 0; }
}

/* --- Small action rows (if present) --- */
:is(.previewActions, .sandboxActions){
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

/* =========================================================
   OPTIONAL (scoped) overrides for this page only
   Put <body class="page-cursor-gen">
   ========================================================= */

.page-cursor-gen .stage{
  min-height: 220px;   /* friend.css stage era più alta */
  overflow: hidden;    /* particelle dentro */
}

/* se vuoi breakpoint più “comodo” rispetto a friend.css */
.page-cursor-gen .row,
.page-cursor-gen .row3{
  gap: 12px;
}
@media (max-width: 900px){
  .page-cursor-gen .row,
  .page-cursor-gen .row3{
    grid-template-columns: 1fr;
  }
}

/* se vuoi label più “strong” su questa pagina */
.page-cursor-gen label{
  font-weight: 1000;
  font-size: 12px;
}