/* ============================================================
   DEMO A — "Regia d'Autore"
   Layer di effetti cinematografici sopra styles.css:
   cursore custom, reveal mascherati, marquee, bottoni magnetici
   ============================================================ */

/* ---------- badge demo ---------- */
.demo-badge {
  position: fixed; left: 18px; bottom: 18px; z-index: 90;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ivory-dim); background: rgba(15, 23, 42, 0.72);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 8px 16px; backdrop-filter: blur(8px);
  pointer-events: none;
}

/* ---------- cursore cinematografico ---------- */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor { cursor: none; }
  body.has-cursor a, body.has-cursor button, body.has-cursor label, body.has-cursor input, body.has-cursor textarea, body.has-cursor select { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 9999;
    pointer-events: none; border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  .cursor-dot {
    width: 7px; height: 7px; background: var(--gold-bright);
  }
  .cursor-ring {
    width: 38px; height: 38px;
    border: 1.2px solid rgba(91, 138, 234, 0.55);
    transition: width 0.32s var(--ease-cine), height 0.32s var(--ease-cine),
                border-color 0.32s, background-color 0.32s;
  }
  .cursor-ring.is-link {
    width: 62px; height: 62px;
    border-color: rgba(91, 138, 234, 0.9);
    background: rgba(61, 111, 214, 0.12);
  }
}
.cursor-dot, .cursor-ring { display: none; }
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { display: block; }

/* ---------- titoli: maschere per reveal a parole ---------- */
.w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.w-mask .w { display: inline-block; will-change: transform; }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--black);
  padding: 26px 0;
}
.marquee-track {
  display: inline-flex; gap: 0;
  animation: marquee-scroll 36s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-size: clamp(28px, 4.4vw, 64px);
  font-weight: 200; letter-spacing: 0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(203, 213, 225, 0.30);
  padding-right: 0.4em;
  flex-shrink: 0;
}
.marquee.gold { background: var(--black-soft); }
.marquee.gold .marquee-track { animation-duration: 30s; animation-direction: reverse; }
.marquee.gold .marquee-track span { -webkit-text-stroke: 1px rgba(91, 138, 234, 0.55); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- brand: bagliore che attraversa il titolo ---------- */
.ch-brand {
  background: linear-gradient(110deg,
    var(--ivory) 0%, var(--ivory) 38%,
    var(--gold-bright) 48%, #ffffff 52%,
    var(--ivory) 62%, var(--ivory) 100%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brand-shine 6.5s var(--ease-out) infinite;
}
@keyframes brand-shine {
  0%, 55% { background-position: 110% 0; }
  85%, 100% { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-brand { animation: none; background-position: 50% 0; }
}

/* ---------- card percorsi: stato cinema ---------- */
.card { overflow: hidden; }
.card .frame { position: absolute; inset: 0; }
.card .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.10) 48%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 0.9s var(--ease-cine);
  pointer-events: none;
}
.card:hover .frame::after { transform: translateX(110%); }
.card:hover { border-color: var(--line-gold); }
.card .card-num { transition: color 0.4s, transform 0.5s var(--ease-cine); }
.card:hover .card-num { color: var(--gold-bright); transform: translateY(-4px); }

/* ---------- immagini: leggero respiro continuo ---------- */
.frame img.cine { will-change: transform; }

/* ---------- bottoni magnetici: il transform lo gestisce GSAP ---------- */
.btn-gold { will-change: transform; }