/* ==========================================================================
   site.css: lo strato di movimento condiviso da TUTTE le pagine del sito
   (25/09/2026, la "proposta D" scelta da lui fra quattro)
   --------------------------------------------------------------------------
   Vive sopra gli stili di ogni pagina, che restano dentro le pagine. Non
   cambia colori, cursore ne' particelle: cambia l'aria e il modo in cui
   le cose si muovono. Va incluso in <head> dopo lo <style> della pagina,
   con site.js in fondo dopo chrome.js.

   Cosa fa:
   - il cursore (puntino + cerchio) su ogni pagina, anche dove non c'era;
   - il ritorno alla home nella barra delle pagine prodotto (freccia + logo
     Chrononyte + briciola del prodotto), la parte in HTML la crea site.js;
   - la barra traslucida quando si scorre, col filo di luce che passa sotto;
   - dietro l'eroe tre luci senza sfocatura (una centrata che respira, due
     laterali speculari) e la griglia che respira;
   - box con angoli morbidi che si alzano al passaggio, con un faro che
     segue il mouse (solo sui box, non sui tasti);
   - comparse a scalare, titoli che escono da sotto una linea, etichette
     di sezione con il tratto che si allunga;
   - tasti con l'alone morbido, che seguono un po' il mouse (site.js).

   ⚠️ Niente sfocatura (filter: blur) ne' fusione colore (mix-blend-mode)
   sulle luci: Chrome per disegnarle mette tutto l'eroe in una superficie a
   parte che oltre una certa misura taglia, e la meta' destra resta nera.
   E' successo con la prima versione, il 25/09/2026.
   ========================================================================== */

:root {
  --cs-acc: 101,244,198;            /* teal; site.js lo cambia in rubino su Rubinyun e argento su Densar */
  --cs-ease: cubic-bezier(.16,1,.3,1);
}

/* ── Cursore ─────────────────────────────────────────────────────────────── */
body, a, button { cursor: none; }
#c-dot, #c-ring { will-change: left, top; }
#c-ring { transition: width .25s var(--cs-ease), height .25s var(--cs-ease), border-color .25s, background .25s, opacity .25s; }
body.cs-hover #c-ring { border-color: rgba(var(--cs-acc),.7); }
body.on-light #c-ring { border-color: rgba(0,0,0,.3); }
body.on-light #c-dot { background: #000; }
@media (hover: none), (pointer: coarse) {
  body, a, button { cursor: auto; }
  #c-dot, #c-ring { display: none !important; }
}
/* Il cursore del sito resta anche nella finestra stretta: col mouse la larghezza non c'entra,
   si spegne solo dove non c'e' un mouse (la regola qui sopra). Il 27/09 la home lo spegneva
   sotto i 900px e i link restavano senza niente; il 28/09 una regola qui rimetteva quello del
   sistema, ma sui link veniva la graffa dei testi. Tolte tutte e due (deciso da lui). */

/* ── Il ritorno alla home (pagine prodotto e legali) ─────────────────────── */
.cs-home {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--off-white, #ededed);
  padding: 6px 12px 6px 6px; border-radius: 100px; margin-right: 8px;
  border: 1px solid transparent;
  transition: background .25s, border-color .25s;
  position: relative; z-index: 2;
}
nav > a.cs-home { display: inline-flex !important; }   /* Rubinyun nasconde il primo link della barra: questo no */
nav > a.cs-home + .l { margin-right: auto; }           /* prezzi e docs: il prodotto resta accanto al logo */
.cs-home img { height: 30px; display: block; filter: brightness(0) invert(1); opacity: .95; }
.cs-home-ico {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.7); flex: none;
  transition: transform .35s var(--cs-ease), border-color .25s, color .25s, background .25s;
}
.cs-home-ico svg { width: 12px; height: 12px; }
.cs-crumb { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: -.01em; white-space: nowrap; }
.cs-sep { color: rgba(255,255,255,.28); font-weight: 300; }
.cs-prod { color: rgba(255,255,255,.55); }
.cs-home:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.cs-home:hover .cs-home-ico { transform: translateX(-3px); border-color: rgba(var(--cs-acc),.8); color: rgb(var(--cs-acc)); background: rgba(var(--cs-acc),.08); }
.cs-home .cs-tip {
  position: absolute; left: 6px; top: calc(100% + 8px);
  font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgb(var(--cs-acc)); background: rgba(12,12,12,.94); border: 1px solid rgba(var(--cs-acc),.35);
  padding: 5px 9px; border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .25s var(--cs-ease);
  pointer-events: none; white-space: nowrap; z-index: 5;
}
.cs-home:hover .cs-tip { opacity: 1; transform: none; }
.cs-hide { display: none !important; }
@media (max-width: 640px) { .cs-crumb { display: none; } .cs-home img { height: 26px; } }

/* ── La barra quando si scorre (site.js mette .cs-stuck) ─────────────────── */
nav { transition: background .3s, border-color .3s, box-shadow .3s; }
nav.cs-stuck { background: rgba(10,10,10,.6); backdrop-filter: blur(20px) saturate(1.8); border-bottom-color: transparent; }
nav.cs-stuck::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cs-acc),.7), transparent);
  background-size: 50% 100%; animation: cs-slide 4s linear infinite;
}
@keyframes cs-slide { from { background-position: -100% 0; } to { background-position: 200% 0; } }

/* ── Le luci dietro l'eroe (site.js crea .cs-aurora con tre <i>) ─────────── */
.cs-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cs-aurora i {
  position: absolute; border-radius: 50%; will-change: transform;
  width: 80vw; height: 80vw; max-width: 1200px; max-height: 1200px;
  background: radial-gradient(circle, rgba(var(--cs-acc),.11) 0%, rgba(var(--cs-acc),.04) 30%, transparent 62%);
  left: 50%; top: 38%; transform: translate(-50%,-50%);
  animation: cs-luce-centro 9s ease-in-out infinite alternate;
}
.cs-aurora i:nth-child(2) { width: 46vw; height: 46vw; left: 12%; top: 70%; opacity: .8; animation: cs-luce-sx 16s ease-in-out infinite alternate; }
.cs-aurora i:nth-child(3) { width: 46vw; height: 46vw; left: 88%; top: 70%; opacity: .8; animation: cs-luce-dx 16s ease-in-out infinite alternate; }
@keyframes cs-luce-centro { from { transform: translate(-50%,-50%) scale(1); } to { transform: translate(-50%,-50%) scale(1.14); } }
@keyframes cs-luce-sx { from { transform: translate(-50%,-50%); } to { transform: translate(-38%,-62%); } }
@keyframes cs-luce-dx { from { transform: translate(-50%,-50%); } to { transform: translate(-62%,-62%); } }
.hero::before { animation: cs-respiro 9s ease-in-out infinite; }
@keyframes cs-respiro { 0%,100% { opacity: .8; } 50% { opacity: 1.6; } }

/* ── Box: angoli morbidi, si alzano, faro che segue il mouse ─────────────── */
:is(.bcard, .muted-card, .how-card, .card, .tier, .soon-card, .learn-card, .fcard, .tipo, .misura, .prezzo, .screen-item) {
  border-radius: 16px; position: relative;
  transition: transform .5s var(--cs-ease), box-shadow .5s var(--cs-ease), border-color .3s, background .25s, opacity .65s ease;
}
:is(.bcard, .how-card, .card, .tier, .soon-card, .learn-card, .fcard, .tipo, .misura):hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--cs-acc),.25), 0 0 40px -10px rgba(var(--cs-acc),.25);
}
:is(.bcard, .how-card, .card, .tier, .soon-card, .learn-card, .fcard, .tipo, .misura, .prezzo)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; border-radius: inherit;
  background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), rgba(var(--cs-acc),.14), transparent 45%);
}
:is(.bcard, .how-card, .card, .tier, .soon-card, .learn-card, .fcard, .tipo, .misura, .prezzo):hover::after { opacity: 1; }

/* ── Comparse ────────────────────────────────────────────────────────────── */
.reveal.cs-stag { transition-delay: calc(var(--i, 0) * 80ms) !important; }
.cs-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s var(--cs-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.cs-reveal.cs-in { opacity: 1; transform: none; }
.reveal :is(.section-h2, .how-title, .soon-title, .quantum-title, .contact-h2, .screenshots-title, .privacy-title, h2) {
  clip-path: inset(0 0 110% 0); transform: translateY(12px);
  transition: clip-path .9s var(--cs-ease) .1s, transform .9s var(--cs-ease) .1s;
}
.reveal.in :is(.section-h2, .how-title, .soon-title, .quantum-title, .contact-h2, .screenshots-title, .privacy-title, h2) { clip-path: inset(-10% 0 -20% 0); transform: none; }

/* ── Etichette di sezione: il tratto che si allunga ──────────────────────── */
:is(.label, .kicker, .hero-label, .group-label, .soon-label, .how-label, .screenshots-label) { display: inline-flex; align-items: center; gap: 10px; }
:is(.label, .kicker, .hero-label, .group-label, .soon-label, .how-label, .screenshots-label)::after {
  content: ''; height: 1px; width: 0; background: rgb(var(--cs-acc)); opacity: .7; transition: width .8s var(--cs-ease) .3s;
}
.in :is(.label, .kicker, .group-label, .soon-label, .how-label, .screenshots-label)::after, .hero-label::after { width: 36px; }

/* ── Tasti: alone morbido; il magnete lo fa site.js ──────────────────────── */
:is(.btn-primary, .tier-cta.ruby, .nav-pill.ruby, .pill.ruby) { transition: transform .35s var(--cs-ease), box-shadow .35s, background .2s, color .2s; }
:is(.btn-primary, .tier-cta.ruby, .nav-pill.ruby, .pill.ruby):hover { box-shadow: 0 0 0 4px rgba(var(--cs-acc),.15), 0 10px 30px -10px rgba(var(--cs-acc),.6); }
.cs-mag { transition: transform .35s var(--cs-ease) !important; will-change: transform; }
.cs-mag.cs-magging { transition: transform .08s linear !important; }

/* ── La fascia del quanto (home): piu' lenta e piu' luminosa ─────────────── */
.quantum-bg { filter: brightness(.35) saturate(1.6); animation: cs-zoom 30s ease-in-out infinite alternate; }
@keyframes cs-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }

/* ── Chi non vuole movimento non lo riceve ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .cs-reveal { opacity: 1; transform: none; }
}
