/* Animazioni del sito: minimal, lente ed eased. Valgono per tutte le pagine.
   Se il sistema chiede "riduci movimento" (prefers-reduced-motion) sono tutte disattivate. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); }

/* ingresso pagina e uscita verso un'altra pagina del sito */
@keyframes mci-page-in { from { opacity: 0; } to { opacity: 1; } }
html.anim-ready body { animation: mci-page-in .8s var(--ease) both; }
html.is-leaving body { opacity: 0; transition: opacity .3s ease; }

/* comparsa allo scroll (una sola volta): salita leggera + dissolvenza */
/* sicurezza: i blocchi sono nascosti solo se lo script delle animazioni è partito (html.anim-on);
   senza JavaScript o in caso di errore tutto resta visibile */
.rv { transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: var(--d, 0ms); }
html.anim-on .rv:not(.is-in) { opacity: 0; translate: 0 24px; }

/* contact: "Based in Europe, working worldwide." entra con dissolvenza e zoom da 70%, come sul sito live */
/* nota: niente transform-origin qui, perché nei blocchi Readymag sposta anche il punto d'ancoraggio (offset-anchor) */
.rv-scale { transition: opacity 1.2s ease-out, scale 1.2s ease-out; transition-delay: var(--d, 0ms); }
html.anim-on .rv-scale:not(.is-in) { opacity: 0; scale: .7; }

/* contact: il ritratto ruota di 360° in loop al passaggio del mouse (come sul sito live) */
@keyframes mci-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
.spin-on-hover:hover { animation: mci-spin 1.8s linear infinite; }

/* lista delle collaborazioni in home: i nomi compaiono uno dopo l'altro */
.collab { display: inline; opacity: 0; transition: opacity .8s var(--ease); transition-delay: var(--d, 0ms); }
.is-in .collab, .collab.is-in { opacity: 1; }

/* hover più morbidi su pulsanti e link (pagine Readymag) */
.rmwidget.widget-button .common-button { transition: background-color .45s var(--ease), color .45s var(--ease), border-radius .45s var(--ease) !important; }
.rmwidget a, .rmwidget a * { transition: color .35s var(--ease) !important; }

/* ---------------------------------------------------------------- animazioni extra */

/* 1. cursore: puntino lime che si allarga su link e immagini cliccabili (solo mouse/trackpad) */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.mci-cursor { position: fixed; left: 0; top: 0; z-index: 99999; pointer-events: none;
              width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
              background: #bfd730; opacity: 0;
              transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease),
                          background-color .45s var(--ease), opacity .3s ease;
              display: flex; align-items: center; justify-content: center;
              font: 500 11px/1 "MCI Grotesk", custom_116870, sans-serif; color: var(--black); letter-spacing: .02em; }
.mci-cursor.is-visible { opacity: 1; }
.mci-cursor.is-link { width: 38px; height: 38px; margin: -19px 0 0 -19px; background: rgba(191, 215, 48, .45); }
.mci-cursor.is-media { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: #bfd730; }
.mci-cursor span { opacity: 0; transition: opacity .3s ease; }
.mci-cursor.is-media span { opacity: 1; }
.mci-cursor.is-down { width: 8px; height: 8px; margin: -4px 0 0 -4px; }

/* 2. titoli principali che compaiono parola per parola */
.mci-word { display: inline-block; opacity: 0; translate: 0 .45em;
            transition: opacity .8s var(--ease), translate .8s var(--ease);
            transition-delay: calc(250ms + var(--i) * 90ms); }
.words-in .mci-word { opacity: 1; translate: 0 0; }

/* 3. parallasse leggero sulle immagini/video d'apertura */
.mci-parallax { scale: 1.12; will-change: translate; }

/* 4. pillola lime della navigazione che scorre da una voce all'altra (pagine nuove) */
.nav-indicator { position: absolute; top: 0; left: 0; height: 27px; width: 69px; border-radius: 105px;
                 background: #bfd730; z-index: 0; pointer-events: none;
                 transition-property: translate, width; transition-duration: 300ms;
                 transition-timing-function: cubic-bezier(.3, .7, .2, 1); }
html.has-nav-indicator .pill-nav { position: relative; z-index: 1; background: none !important; }

/* 5. contatore "01 / 08" nelle pagine progetto */
/* contenitore del contatore: solo posizione e comparsa (la pillola è il pulsante interno, in site.css) */
.mci-counter { position: fixed; right: 24px; bottom: 22px; z-index: 40;
               opacity: 0; translate: 0 10px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.mci-counter.is-visible { opacity: 1; translate: 0 0; }
.mci-counter b { font-weight: 500; display: inline-block; min-width: 2ch; transition: opacity .3s ease; }

@media (max-width: 768px) {
  .mci-counter { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mci-word { opacity: 1 !important; translate: none !important; transition: none !important; }
  .mci-parallax { scale: none; translate: none !important; }
  .nav-indicator { transition: none; }
  html.anim-ready body { animation: none; }
  html.is-leaving body { opacity: 1; }
  .rv, .rv-scale, .collab { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  .spin-on-hover:hover { animation: none; }
}