/* ==========================================================
   Effetti animati (vedi js/fx.js) — ispirati a React Bits
   ========================================================== */

/* SplitText */
.fx-w { display: inline-block; white-space: nowrap; }
.fx-c {
  display: inline-block; opacity: 0; will-change: transform, opacity, filter;
  animation: fxRise .9s var(--ease) forwards;
  animation-delay: calc(var(--fx-delay, 0ms) + var(--i) * var(--fx-stagger, 20ms));
}
@keyframes fxRise {
  from { opacity: 0; transform: translateY(.5em) rotate(6deg); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ShinyText */
.fx-shiny {
  background: linear-gradient(110deg, hsla(40, 20%, 85%, .5) 40%, hsl(44, 85%, 86%) 50%, hsla(40, 20%, 85%, .5) 60%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fxShine 3.4s linear infinite;
}
.fx-shiny--light { background-image: linear-gradient(110deg, hsla(40, 30%, 92%, .85) 40%, hsl(44, 90%, 80%) 50%, hsla(40, 30%, 92%, .85) 60%); }
@keyframes fxShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* TextType: cursore */
.fx-typing::after {
  content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 4px; vertical-align: -.08em;
  background: var(--gold-2); animation: fxBlink .8s steps(1) infinite;
}
@keyframes fxBlink { 50% { opacity: 0; } }

/* ClickSpark */
.fx-spark { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 30; }
.fx-spark i {
  position: absolute; left: -1px; bottom: 0; width: 2px; height: 11px; border-radius: 2px;
  background: var(--gold-2); transform-origin: 50% 100%; box-shadow: 0 0 6px hsla(42, 80%, 70%, .8);
}

/* Confetti */
.fx-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* TiltedCard + GlareHover (React Bits) */
.fx-tilt {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale3d(var(--ts, 1), var(--ts, 1), 1);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.fx-tilt.is-tilting {
  transition: transform 0.08s linear;
}
.fx-glare {
  position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    hsla(42, 90%, 82%, var(--glare-o, 0)),
    transparent 65%
  );
  transition: opacity 0.4s var(--ease);
}

/* StarBorder (React Bits) */
@property --rb-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.fx-star-border {
  position: relative;
  background: conic-gradient(from var(--rb-angle), hsla(38, 40%, 40%, .18) 0 65%, var(--gold) 78%, var(--gold-2) 84%, hsla(38, 40%, 40%, .18) 96%);
  animation: rbSpin 5s linear infinite;
}
@keyframes rbSpin { to { --rb-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .fx-c { opacity: 1 !important; }
  .fx-tilt { transform: none !important; }
}