/* ==========================================================================
   BioManage — movimento
   Un solo vocabolario per tutto il sito: la stessa curva e la stessa distanza
   dell'hero, applicate alle comparse in scorrimento e alle micro-interazioni.
   Niente movimento vistoso: serve a dare ritmo alla lettura, non a farsi notare.
   Chi ha chiesto meno animazioni riceve la pagina già composta (in fondo).
   ========================================================================== */

:root {
  --bm-ease: cubic-bezier(.16, 1, .3, 1);
  --bm-dur: .7s;
  --bm-dur-fast: .25s;
  --bm-rise: 16px;
}

/* --------------------------------------------------------------------------
   1. Comparsa in scorrimento
   Lo stato di partenza esiste solo se il JS è vivo (html.bm-motion) e solo
   finché l'elemento non è stato rivelato: senza JS la pagina è già visibile.
   -------------------------------------------------------------------------- */

.bm-motion [data-bm-reveal] {
  opacity: 0;
  transform: translateY(var(--bm-rise));
}

.bm-motion [data-bm-reveal="media"] {
  transform: translateY(var(--bm-rise)) scale(1.02);
}

.bm-motion [data-bm-reveal].bm-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--bm-dur) var(--bm-ease) var(--bm-delay, 0s),
    transform var(--bm-dur) var(--bm-ease) var(--bm-delay, 0s);
}

/* --------------------------------------------------------------------------
   2. Micro-interazioni
   -------------------------------------------------------------------------- */

/* Pulsanti: un rialzo appena percepibile, non un rimbalzo. */
#tm-main .uk-button,
.bm-menu__cta {
  transition:
    background-color var(--bm-dur-fast) var(--bm-ease),
    border-color var(--bm-dur-fast) var(--bm-ease),
    color var(--bm-dur-fast) var(--bm-ease),
    transform var(--bm-dur-fast) var(--bm-ease);
}

#tm-main .uk-button:hover,
#tm-main .uk-button:focus-visible { transform: translateY(-2px); }
#tm-main .uk-button:active { transform: translateY(0); transition-duration: .05s; }

/* Voci del footer: solo il colore.
   Il trattino che si apriva da sinistra sotto la voce e' stato tolto insieme
   al piede compatto: a interlinea stretta il filo finiva sulla riga sotto e
   su una voce di due righe se ne disegnavano due. */
.tm-page > footer .uk-nav > li > a {
  position: relative;
  transition: color var(--bm-dur-fast) var(--bm-ease);
}

/* Immagini dentro un contenitore chiuso: zoom lento, mai oltre il bordo. */
.bm-mega-media,
#tm-main .uk-card-media,
#tm-main .el-item > a picture { display: block; overflow: hidden; }

.bm-mega-media img,
#tm-main .uk-card-media img,
#tm-main .el-item > a picture img {
  transition: transform .8s var(--bm-ease);
}

.bm-mega-media:hover img,
#tm-main .uk-card:hover .uk-card-media img,
#tm-main .el-item > a:hover picture img { transform: scale(1.04); }

/* Accordion: il titolo cambia colore con la stessa curva del resto. */
#tm-main .uk-accordion-title {
  transition: color var(--bm-dur-fast) var(--bm-ease);
}

/* Link di testo: sottolineatura che si apre invece di comparire di scatto. */
#tm-main a.uk-link-muted,
#tm-main .uk-panel a:not([class*="uk-button"]):not(.el-link) {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  text-decoration: none;
  transition: background-size .35s var(--bm-ease), color var(--bm-dur-fast) var(--bm-ease);
}

#tm-main a.uk-link-muted:hover,
#tm-main .uk-panel a:not([class*="uk-button"]):not(.el-link):hover { background-size: 100% 1px; }

/* Titolo cliccabile: niente sottolineatura. Su un titolo che va a capo il
   filo viene disegnato sotto ogni riga, e su un Genos da 128px la riga di
   mezzo sembra un errore di stampa. Il segno del passaggio del mouse e' il
   colore che vira all'inchiostro: sull'oro e' un cambio netto e non tocca
   la geometria. Sta qui, e non in layout-refinements, perche' deve venire
   dopo la regola generica dei link qui sopra, piu' specifica: il :not() ne
   pareggia la specificita' e a parita' vince chi e' scritto dopo. */
#tm-main .uk-panel a.bm-titolo-link:not(.el-link) {
  background-image: none;
  transition: color var(--bm-dur-fast) var(--bm-ease);
}

#tm-main .uk-panel a.bm-titolo-link:not(.el-link):hover,
#tm-main .uk-panel a.bm-titolo-link:not(.el-link):focus-visible { color: var(--bm-ink, #0b1f3a); }

/* I titoli dell'accordion sono <a> dentro un pannello, quindi finivano anche
   loro nella regola generica qui sopra: al passaggio del mouse comparivo un
   filo largo quanto tutta la riga, che su una voce di elenco sembra un errore
   piu' che un invito. Niente filo; l'invito e' il colore che passa all'oro,
   e il numero segue da solo perche' e' costruito su currentColor. */
#tm-main .uk-panel a.uk-accordion-title:not(.el-link) { background-image: none; }

#tm-main .uk-accordion-title {
  transition: color var(--bm-dur-fast) var(--bm-ease);
}

#tm-main .uk-accordion-title:hover,
#tm-main .uk-accordion-title:focus-visible { color: var(--bm-accent-deep, #b89b74); }

/* La voce aperta resta segnata anche dopo che il mouse se n'e' andato. */
#tm-main .uk-open > .uk-accordion-title { color: var(--bm-accent-deep, #b89b74); }

/* Menu mobile: le voci entrano a scalare quando il pannello si apre. */
.bm-menu.uk-open .bm-menu__list > li {
  animation: bm-menu-in .5s var(--bm-ease) backwards;
  animation-delay: calc(.12s + var(--bm-i, 0) * .045s);
}

@keyframes bm-menu-in {
  from { opacity: 0; transform: translateX(14px); }
}

/* --------------------------------------------------------------------------
   3. Preferenza di sistema: nessun movimento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bm-motion [data-bm-reveal],
  .bm-motion [data-bm-reveal="media"] { opacity: 1; transform: none; }
  .bm-menu.uk-open .bm-menu__list > li { animation: none; }
}