/* wf-sicilia.css — 2026 dynamic layer, CityFlow palette only.
   Cyan #00E5FF · Lime #90F22E · Gold #FFD250 · bg #06060A
   Dettagli Sicilia minimi: solo Trinacria discreta. */

/* ── Scroll progress bar (top) ────────────────────────────────── */
.sic-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 10001; pointer-events: none;
  background: transparent;
}
.sic-progress::before {
  content: ""; display: block; height: 100%; width: var(--sic-p, 0%);
  background: linear-gradient(90deg, #00E5FF 0%, #90F22E 50%, #FFD250 100%);
  box-shadow: 0 0 12px rgba(0,229,255,0.55), 0 0 24px rgba(144,242,46,0.35);
  transition: width 0.12s linear;
}

/* ── Trinacria (piccola, discreta, angolo) ────────────────────── */
.sic-trinacria {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 42px; height: 42px;
  z-index: 9; pointer-events: none;
  opacity: 0.55;
  color: #FFD250;
  filter: drop-shadow(0 0 6px rgba(255,210,80,0.35)) drop-shadow(0 0 12px rgba(0,229,255,0.18));
  animation: sicSpin 42s linear infinite;
}
@keyframes sicSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .sic-trinacria{ animation: none; } }
@media (max-width: 520px){ .sic-trinacria { width: 34px; height: 34px; right: 10px; bottom: 84px; opacity: 0.45; } }

/* ── Kinetic hero h1 em (CityFlow gradient text) ──────────────── */
.wf-hero h1 em {
  background: linear-gradient(95deg,#FFD250 0%, #00E5FF 55%, #90F22E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0,229,255,0.30));
}
.sic-kin {
  display: inline-block;
}
.sic-kin > span {
  display: inline-block;
  transform: translateY(0) scaleY(1);
  transition: transform 0.4s cubic-bezier(0.2,1.0,0.3,1.4);
  will-change: transform;
}
.sic-kin.sic-kin-stretch > span {
  transform: translateY(-2px) scaleY(1.04);
}

/* ── 3D tilt on venue / event / zone cards ───────────────────── */
.sic-tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2,1,0.3,1), box-shadow 0.25s;
  will-change: transform;
}
.sic-tilt.sic-tilt-on {
  transform: perspective(800px) rotateX(var(--sic-rx,0deg)) rotateY(var(--sic-ry,0deg)) translateZ(4px);
  box-shadow:
    0 14px 42px rgba(0,0,0,0.55),
    0 0 24px rgba(0,229,255,0.18),
    0 0 0 1px rgba(144,242,46,0.20);
}

/* ── Cursor aura (desktop only) ──────────────────────────────── */
.sic-aura {
  position: fixed;
  left: 0; top: 0;
  width: 320px; height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(0,229,255,0.16) 0%,
    rgba(144,242,46,0.10) 38%,
    rgba(255,210,80,0.06) 62%,
    transparent 78%);
  transform: translate(-50%,-50%);
  transition: opacity 0.3s;
  opacity: 0;
}
.sic-aura.on { opacity: 1; }
@media (hover: none){ .sic-aura { display: none; } }