/* =====================================================================
   Il Passo Dopo – movimento e rifiniture
   Transizioni tra pagine, ingressi progressivi, ripple, copertine, annunci.
   Caricato dopo style.css: le regole qui sovrascrivono quelle di base.
   ===================================================================== */
:root { --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); }
html { scroll-behavior: smooth; }

/* Transizioni tra pagine (View Transitions API; ignorate dove non supportate) */
@view-transition { navigation: auto; }
.sidenav { view-transition-name: sidenav; }
.topbar { view-transition-name: topbar; }
::view-transition-old(root) { animation: 140ms ease-out both vt-out; }
::view-transition-new(root) { animation: 320ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Barra di caricamento in alto */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, var(--brand), #7c5cff, #20c997);
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 60%, transparent);
  transition: width .3s var(--ease), opacity .4s ease .2s;
}
.progress.is-loading { opacity: 1; width: 80%; transition: width 6s cubic-bezier(.08, .7, .1, 1), opacity .1s; }
.progress.is-done { opacity: 0; width: 100%; transition: width .2s ease, opacity .4s ease .15s; }

/* Ingresso progressivo degli elementi */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.page-head, .hero-copy > *, .section-head, .tabs, .filters, .detail > *, .uhead, .sourcebar,
.box, .ad, .authcard, .prose > *, .card-form, .stats-cards, .table-wrap {
  animation: rise .55s var(--ease-out) both;
}
.hero-copy > :nth-child(2) { animation-delay: 40ms; }
.hero-copy > :nth-child(3) { animation-delay: 80ms; }
.hero-copy > :nth-child(4) { animation-delay: 120ms; }
.hero-copy > :nth-child(5) { animation-delay: 160ms; }
.hero-copy > :nth-child(6) { animation-delay: 200ms; }
.elist > *, .ugrid > * { animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 80ms); }
.elist > :nth-child(2), .ugrid > :nth-child(2) { --i: 1; }
.elist > :nth-child(3), .ugrid > :nth-child(3) { --i: 2; }
.elist > :nth-child(4), .ugrid > :nth-child(4) { --i: 3; }
.elist > :nth-child(5), .ugrid > :nth-child(5) { --i: 4; }
.elist > :nth-child(6), .ugrid > :nth-child(6) { --i: 5; }
.elist > :nth-child(7), .ugrid > :nth-child(7) { --i: 6; }
.elist > :nth-child(n+8), .ugrid > :nth-child(n+8) { --i: 7; }

/* Ripple sui bottoni */
.btn, .calbtn, .chip, .navitem, .icon-btn, .tab { position: relative; overflow: hidden; isolation: isolate; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; transform: scale(0);
  background: currentColor; opacity: .16; animation: ripple .6s var(--ease-out) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.btn { transition: background .2s, border-color .2s, box-shadow .2s, transform .15s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-dark:hover { box-shadow: 0 4px 14px rgba(32, 33, 36, .22); }

/* Menu laterale: si riduce a sole icone (come le piattaforme di data science) */
.sidenav { transition: width .28s var(--ease); overflow: hidden; }
.sidenav-head { display: flex; align-items: center; gap: 2px; padding-left: 12px; }
.sidenav-head .brand { padding: 4px 8px 4px 4px; }
.nav-toggle { flex: none; }
.btn-cta { margin-top: 10px; transition: width .28s var(--ease), padding .28s var(--ease), margin .28s var(--ease), box-shadow .2s; }
.navitem { transition: background .2s, color .2s, padding .28s var(--ease); }
.navitem svg { transition: transform .25s var(--ease); }
.navitem:hover svg { transform: scale(1.12); }
.navitem.is-active { view-transition-name: nav-active; }
.navitem span, .sidenav .brand span, .btn-cta span, .sidenav-foot { transition: opacity .18s ease; white-space: nowrap; }
@media (min-width: 861px) {
  html.nav-mini .sidenav { width: 76px; }
  html.nav-mini .navitem span, html.nav-mini .sidenav .brand span, html.nav-mini .btn-cta span, html.nav-mini .sidenav-foot { opacity: 0; pointer-events: none; }
  html.nav-mini .sidenav-head .brand { display: none; }
  html.nav-mini .btn-cta { width: 44px; padding: 0; margin-left: 16px; gap: 0; }
  html.nav-mini .btn-cta span { display: none; }
  html.nav-mini .navitem { padding-left: 26px; }
}
@media (max-width: 860px) { .nav-toggle { display: none; } }
.topbar .icon-btn, .topbar .brand-mobile, .topbar-actions { flex: none; }
.search { min-width: 0; }

/* Tab con indicatore che scivola tra una pagina e l'altra */
.tab { border-bottom: 0; border-radius: 8px 8px 0 0; transition: color .2s, background .2s; }
.tab:hover { background: var(--surface-2); }
.tab.is-active { border-bottom: 0; }
.tab.is-active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--dark); view-transition-name: tab-ink;
}
::view-transition-group(tab-ink), ::view-transition-group(nav-active) { animation-duration: .35s; animation-timing-function: var(--ease-out); }

/* Hero con le prossime date che fluttuano */
.hero { grid-template-columns: minmax(0, 1fr); align-items: center; position: relative; }
.hero-copy { display: grid; gap: 16px; }
.eyebrow {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}
.eyebrow svg { width: 16px; height: 16px; }
.hero h1 span {
  background: linear-gradient(90deg, var(--brand-ink), #7c5cff 60%, #e0569b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-search { transition: box-shadow .25s, border-color .25s, transform .25s var(--ease); }
.hero-search:focus-within { box-shadow: 0 8px 30px color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand); transform: translateY(-1px); }
.hero-art { display: none; }
#contenuto { container-type: inline-size; }
@container (min-width: 780px) {
  .hero { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  .hero-art { display: block; position: relative; height: 330px; }
}
.blob { position: absolute; border-radius: 50%; filter: blur(32px); opacity: .5; animation: drift 14s ease-in-out infinite alternate; }
.b1 { width: 200px; height: 200px; background: color-mix(in srgb, var(--brand) 55%, transparent); top: 10px; right: 30px; }
.b2 { width: 160px; height: 160px; background: color-mix(in srgb, #7c5cff 45%, transparent); bottom: 0; left: 10px; animation-delay: -5s; }
.b3 { width: 120px; height: 120px; background: color-mix(in srgb, #20c997 40%, transparent); top: 120px; left: 120px; animation-delay: -9s; }
@keyframes drift { 50% { transform: translate(14px, -10px) scale(1.06); } 100% { transform: translate(-10px, 12px) scale(.96); } }
.float-card {
  position: absolute; display: flex; gap: 12px; align-items: center; width: 250px; padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(32, 33, 36, .12);
  animation: float 7s ease-in-out infinite, rise .8s var(--ease-out) both;
}
.fc1 { top: 6px; right: 0; rotate: 2deg; animation-delay: 0s, .2s; }
.fc2 { top: 118px; left: 0; rotate: -3deg; animation-delay: -2.3s, .35s; }
.fc3 { top: 230px; right: 10px; rotate: 1.5deg; animation-delay: -4.6s, .5s; }
@keyframes float { 50% { translate: 0 -10px; } }
.fc-date {
  display: grid; place-items: center; width: 48px; height: 52px; border-radius: 10px; flex: none; line-height: 1.1;
  background: var(--surface-2); font-size: 11px; text-transform: uppercase; font-weight: 700; color: var(--brand-ink);
}
.fc-date b { font-size: 20px; color: var(--text); }
.fc-body { display: grid; gap: 3px; min-width: 0; }
.fc-body .tag { justify-self: start; }
.fc-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-uni { font-size: 12px; color: var(--text-2); }
.chip { transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.chip:hover { transform: translateY(-2px); }
.chip-openday:hover { background: var(--t-open-bg); color: var(--t-open); border-color: transparent; }
.chip-test:hover { background: var(--t-test-bg); color: var(--t-test); border-color: transparent; }
.chip-scadenza:hover { background: var(--t-dead-bg); color: var(--t-dead); border-color: transparent; }

/* Righe evento */
.ecard { position: relative; transition: background .2s; }
.ecard::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--t-open); transform: scaleY(0); transition: transform .25s var(--ease);
}
.ecard:has(.tag-test)::before { background: var(--t-test); }
.ecard:has(.tag-scadenza)::before { background: var(--t-dead); }
.ecard:hover::before { transform: scaleY(1); }
.ecard-date { transition: transform .25s var(--ease), box-shadow .25s, background .2s; }
.ecard:hover .ecard-date { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(32, 33, 36, .08); }
.ecard:has(.tag-test) .ecard-m { color: var(--t-test); }
.ecard:has(.tag-scadenza) .ecard-m { color: var(--t-dead); }
.save-btn svg { transition: transform .2s var(--ease); }
.save-btn:hover svg { transform: scale(1.12); }
.save-btn.pop svg { animation: pop .45s var(--ease-out); }
@keyframes pop { 30% { transform: scale(1.45) rotate(-8deg); } 60% { transform: scale(.9); } }

/* Schede atenei con copertina colorata */
.ugrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.ucard {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.ucard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(32, 33, 36, .12); border-color: transparent; }
.ucard-cover, .uhead-cover {
  position: relative;
  background:
    radial-gradient(circle at 20% 120%, hsl(calc(var(--h) + 40) 85% 70% / .9), transparent 55%),
    radial-gradient(circle at 90% -10%, hsl(calc(var(--h) - 30) 85% 70% / .8), transparent 50%),
    linear-gradient(135deg, hsl(var(--h) 70% 55%), hsl(calc(var(--h) + 50) 70% 50%));
  background-size: 150% 150%; background-position: 0% 50%;
}
.ucard-cover { height: 76px; flex: none; transition: background-position .6s var(--ease); }
.ucard-cover::after, .uhead-cover::after {
  content: ""; position: absolute; inset: 0; opacity: .22;
  background-image: radial-gradient(rgba(255, 255, 255, .95) 1px, transparent 1.4px); background-size: 14px 14px;
}
.ucard:hover .ucard-cover { background-position: 100% 50%; }
.ucard-mono {
  position: absolute; left: 16px; bottom: -20px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--surface); color: hsl(var(--h) 60% 38%); font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 12px rgba(32, 33, 36, .15); transition: transform .3s var(--ease);
}
.ucard:hover .ucard-mono { transform: translateY(-3px) rotate(-4deg); }
.ucard-body { display: grid; gap: 6px; padding: 28px 16px 14px; flex: 1; }
.ucard-name { font-weight: 600; line-height: 1.3; }
.ucard-meta { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); }
.ucard-meta svg { width: 15px; height: 15px; flex: none; }
.ucard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; color: var(--text-3); }
.ucard-foot svg { width: 18px; height: 18px; transition: transform .35s var(--ease), color .2s; }
.ucard:hover .ucard-foot svg { transform: rotate(90deg); color: var(--brand-ink); }
.ucard-count { font-size: 13px; color: var(--text-3); }
.ucard-count.has { color: var(--t-open); font-weight: 600; }
.region { display: flex; align-items: center; gap: 4px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ucard-mono { color: hsl(var(--h) 70% 72%); } }

/* Intestazione della pagina ateneo */
.uhead { display: block; position: relative; margin: 8px 0 18px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.uhead-cover { height: 110px; background-size: 170% 170%; animation: pan 18s ease-in-out infinite alternate; }
@keyframes pan { to { background-position: 100% 50%; } }
.uhead-row { display: flex; align-items: flex-end; gap: 18px; padding: 0 20px 18px; margin-top: -32px; position: relative; }
.uhead .ucard-mono { position: static; flex: none; }
.uhead-row > div { padding-top: 40px; min-width: 0; }
.ucard-mono-lg { width: 72px; height: 72px; font-size: 24px; border-radius: 18px; }
.uhead h1 { font-size: 26px; }
.uhead p { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.uhead p svg { width: 16px; height: 16px; }

/* Box laterali e pulsanti calendario */
.box { transition: box-shadow .25s; }
.box:not(.box-muted):hover { box-shadow: 0 8px 24px rgba(32, 33, 36, .08); }
.rail-sticky { position: sticky; top: 76px; }
.calbtn { transition: background .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.calbtn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(32, 33, 36, .08); }

/* ---------- Annunci ---------- */
.ad {
  --ad-c: var(--brand);
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center;
  padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
  transition: box-shadow .25s;
}
.ad::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ad-c) 70%, transparent), transparent 45%, color-mix(in srgb, var(--ad-c) 40%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.ad:hover { box-shadow: 0 8px 24px rgba(32, 33, 36, .07); }
.ad-test { --ad-c: #7c5cff; } .ad-casa { --ad-c: #20a37a; } .ad-libri { --ad-c: #e0862b; } .ad-viaggio { --ad-c: #1aa9e6; }
.ad-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--ad-c), color-mix(in srgb, var(--ad-c) 60%, #000));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ad-c) 35%, transparent);
}
.ad-copy { display: grid; gap: 2px; min-width: 0; }
.ad-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ad-title { font-weight: 600; font-size: 14px; }
.ad-text { font-size: 13px; color: var(--text-2); }
.ad-cta {
  grid-column: 1 / -1; justify-self: start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  color: var(--ad-c); background: color-mix(in srgb, var(--ad-c) 10%, transparent);
}
.ad-banner { grid-template-columns: auto 1fr auto; margin: 22px 0; padding: 18px 20px; }
.ad-banner .ad-cta, .ad-feed .ad-cta { grid-column: auto; justify-self: end; }
.ad-feed { grid-template-columns: auto 1fr auto; border: 0; border-radius: 0; background: color-mix(in srgb, var(--ad-c) 4%, var(--surface)); animation: none; }
.ad-feed::before { display: none; }
.ad-card { grid-template-columns: 1fr; align-content: start; background: color-mix(in srgb, var(--ad-c) 5%, var(--surface)); }
.ad-card .ad-icon { width: 52px; height: 52px; }
.ad-sidebar { grid-template-columns: 1fr; }
.ad-live { display: block; padding: 10px; }
.ad-live:has(ins[data-ad-status="unfilled"]) { display: none; } /* nessun annuncio disponibile: niente riquadro vuoto */
.footer-ad { padding: 0 32px 0 8px; max-width: 1200px; width: 100%; }
@media (max-width: 860px) { .footer-ad { padding: 0 16px; } }
@media (max-width: 600px) {
  .ad-banner, .ad-feed { grid-template-columns: auto 1fr; }
  .ad-banner .ad-cta, .ad-feed .ad-cta { grid-column: 1 / -1; justify-self: start; }
  .uhead-row { padding: 0 14px 14px; gap: 12px; }
  .uhead h1 { font-size: 21px; }
  .ucard-mono-lg { width: 60px; height: 60px; font-size: 20px; }
}

/* Marchio "il passo dopo" */
.wordmark { display: inline-flex; align-items: baseline; gap: 5px; font-size: 19px; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.wm-il { font-weight: 500; color: var(--text-2); }
.wm-passo { font-weight: 800; color: var(--text); }
.wm-dopo {
  font-weight: 800; background: linear-gradient(90deg, #0b8fc4, #6a4cf0); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wm-dopo { background-image: linear-gradient(90deg, #38bdf8, #a78bfa); } }
.logo-mark { flex: none; border-radius: 9px; transition: transform .35s var(--ease); }
.brand:hover .logo-mark { transform: rotate(-6deg) scale(1.06); }
.brand:hover .logo-mark path:nth-of-type(2) { stroke-opacity: 1; transition: stroke-opacity .3s; }
.footer-brand { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.footer-brand strong { color: var(--text); }
html.nav-mini .sidenav .wordmark { opacity: 0; }

/* Accedi con Google (pulsante secondo le linee guida di Google: sfondo chiaro, logo a colori) */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid #747775; background: #fff; color: #1f1f1f; font: 500 14px/1 Roboto, var(--font);
  transition: background .2s, box-shadow .2s;
}
.btn-google:hover { background: #f7f8f8; box-shadow: 0 1px 3px rgba(60, 64, 67, .3); }
.or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.google-chip {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); font-size: 13px; color: var(--text-2);
}

/* Notifica breve */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; padding: 11px 18px; border-radius: 999px;
  background: var(--dark); color: var(--dark-ink); font-weight: 600; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  opacity: 0; transform: translate(-50%, 16px) scale(.96); transition: opacity .25s, transform .35s var(--ease-out); pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Movimento ridotto: rispetta la preferenza del sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto; }
}