/* Motion & materiali — layer di qualità sopra verona-fx.css.
   Tre lavori: (1) feedback immediato al tocco, (2) rispetto di reduced-motion
   su TUTTO il motore ereditato, (3) materializzazione delle fotografie.
   Da caricare per ultimo. Per disattivare: rimuovere il <link>. */

/* ============================================================
   1. FEEDBACK AL TOCCO — la risposta parte dalla pressione,
   non dal rilascio, e non dipende dall'hover (assente su mobile).
   ============================================================ */
.pill-btn,
.nav-toggle,
.chat-fab,
.form-submit,
.acc-link,
.mobile-nav-close,
.share-btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.pill-btn:active,
.acc-link:active,
.form-submit:active,
.share-btn:active,
.mobile-nav-cta:active,
.mobile-nav-acc:active{
  transform:scale(0.97);
  transition:transform 100ms cubic-bezier(0.22,1,0.36,1);
}

.nav-toggle:active,
.mobile-nav-close:active,
.chat-fab:active{
  transform:scale(0.92);
  transition:transform 100ms cubic-bezier(0.22,1,0.36,1);
}

/* Le superfici grandi cedono meno: la scala è percepita in proporzione */
.ir-item:active,
.article:active,
.person:active,
.exp-card:active,
.cross:active,
.pillar-row:active{
  transform:scale(0.995) !important;
  transition:transform 100ms cubic-bezier(0.22,1,0.36,1) !important;
}

/* ============================================================
   1-bis. RETE DI SICUREZZA DEI REVEAL
   verona-fx.css porta le sezioni a opacity:0 e le riporta a 1 con
   una transizione di .9s sulla classe .fx-in. Ma una transizione non
   avanza se il renderer non compone i frame (scheda in background,
   render headless, screenshot automatici): la sezione resta invisibile
   per sempre. .fx-safe rende visibile SENZA passare da una transizione.
   Applicata da verona-motion.js quando il percorso normale non basta.
   ============================================================ */
.fx-safe{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
.fx-safe::before{opacity:.8 !important; transform:scaleX(1) !important}

/* ============================================================
   2. FOTOGRAFIE CHE SI MATERIALIZZANO
   Il default è VISIBILE: l'animazione migliora, non nasconde.
   La classe .photo-in viene tolta da verona-motion.js quando
   l'immagine entra in viewport. Senza JS resta tutto a vista.
   ============================================================ */
.photo-reveal{
  overflow:hidden;
  position:relative;
}
.photo-reveal img{
  display:block;
  width:100%;
  height:auto;
}
/* stato iniziale applicato SOLO dal JS (html.js + attributo), mai dal CSS puro */
html.js .photo-reveal[data-photo="pending"] img{
  opacity:0;
  filter:blur(12px);
  transform:scale(1.04);
}
html.js .photo-reveal[data-photo="in"] img{
  opacity:1;
  filter:blur(0);
  transform:scale(1);
  transition:opacity .9s cubic-bezier(0.22,1,0.36,1),
             filter 1.1s cubic-bezier(0.22,1,0.36,1),
             transform 1.4s cubic-bezier(0.22,1,0.36,1);
}

/* Ritratti del team: stessa materia, dosata più corta */
html.js .person .portrait[data-photo="pending"] img{
  opacity:0;
  filter:blur(8px);
  transform:scale(1.03);
}
html.js .person .portrait[data-photo="in"] img{
  opacity:1;
  filter:blur(0);
  transform:scale(1);
  transition:opacity .7s cubic-bezier(0.22,1,0.36,1),
             filter .8s cubic-bezier(0.22,1,0.36,1),
             transform 1s cubic-bezier(0.22,1,0.36,1);
}

/* ============================================================
   3. CHAT: il pannello nasce dal pulsante che lo evoca
   ============================================================ */
.chat-panel{
  transform-origin:bottom right;
}
.chat-panel.open{
  animation:chatMaterialize .32s cubic-bezier(0.22,1,0.36,1) !important;
}
@keyframes chatMaterialize{
  from{opacity:0; transform:scale(0.92) translateY(8px)}
  to{opacity:1; transform:scale(1) translateY(0)}
}

/* ============================================================
   4. CONFLITTO SCROLL-HINT
   verona-light disegna "SCORRI ↓" su .hero::before, verona-fx
   disegna un secondo "↓" su .hero::after: due indicatori per la
   stessa funzione. Resta quello di verona-fx (centrato).
   ============================================================ */
.hero::before{content:none !important}

/* ============================================================
   5. REDUCED MOTION — copre TUTTO il motore ereditato.
   Ridurre il movimento non è spegnere il sito: le cose restano
   visibili, cambia solo il modo in cui arrivano.
   ============================================================ */
@media (prefers-reduced-motion:reduce){

  /* Il contenuto non deve MAI dipendere da un'animazione per esistere */
  .section-anchor,.section,.numbers,.people,.journal,
  .pillars,.manifesto,.contact,.cross-links{
    opacity:1 !important;
    transform:none !important;
    transition:opacity .2s linear !important;
  }
  .section-anchor::before{opacity:.8 !important; transform:scaleX(1) !important; transition:none !important}

  /* Nastro scorrevole, pallino lampeggiante, freccia che rimbalza: fermi */
  .marquee-track{animation:none !important; transform:none !important}
  .blink{animation:none !important; opacity:1 !important}
  .hero::after{animation:none !important}

  /* Parallax e scale dell'hero: il JS li salta, qui si annulla il residuo */
  .hero h1{transform:none !important; opacity:1 !important; transition:none !important}

  /* Sollevamenti, inclinazioni e rotazioni al passaggio del mouse */
  .exp-card:hover,.article:hover,.cross:hover,.ir-item:hover,.person:hover,
  .pillar-row:hover,.chat-fab:hover{transform:none !important}
  .feature:hover .num,.pillar-row:hover .num,.pillar-stretch:hover .num{transform:none !important}
  .pillar-row,.pillar-stretch,.exp-card,.article,.cross,.ir-item,.person{transition:background .2s, border-color .2s !important}

  /* Il trattino che cresce accanto agli occhielli */
  .fx-in .eyebrow::before{animation:none !important; width:24px !important; margin-right:10px !important}

  /* Fotografie: compaiono, non si materializzano */
  html.js .photo-reveal[data-photo] img,
  html.js .person .portrait[data-photo] img{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    transition:opacity .2s linear !important;
  }

  /* Il press-state resta: è informazione, non decorazione. Solo più asciutto. */
  .pill-btn:active,.acc-link:active,.form-submit:active,.share-btn:active,
  .nav-toggle:active,.mobile-nav-close:active,.chat-fab:active{
    transform:scale(0.985);
    transition:none;
  }
  .ir-item:active,.article:active,.person:active,
  .exp-card:active,.cross:active,.pillar-row:active{transform:none !important}

  .chat-panel.open{animation:none !important}
}

/* ============================================================
   6. TRASPARENZA RIDOTTA — la topbar diventa solida e leggibile
   ============================================================ */
@media (prefers-reduced-transparency:reduce){
  .topbar{
    background:var(--bg) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:1px solid var(--rule-2) !important;
  }
}

/* ============================================================
   7. CONTRASTO ELEVATO
   ============================================================ */
@media (prefers-contrast:more){
  .topbar{background:var(--bg) !important; backdrop-filter:none !important}
  .pill-btn{border-color:var(--ink) !important}
}