/* BUILD 2026-07-12-b · layer "evoluzione": stili per evolve.js + catalogo interattivo */

/* ─── Differenze subito visibili fra le direzioni ───────────────────
   Sobria     → il sito com'era: nessun effetto, nessuna ombra aggiunta.
   Editoriale → copertine leggermente "staccate" dal fondo + effetti soft.
   Immersiva  → atmosfera nell'hero, ombre profonde, zoom sulle copertine. */

[data-direzione="editoriale"] .shelf-card-cover,
[data-direzione="editoriale"] .cat-card-cover {
  box-shadow: 0 8px 22px rgba(17, 42, 87, 0.12);
  transition: box-shadow 0.4s;
}

[data-direzione="immersiva"] .hero {
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(200, 217, 238, 0.55), transparent 70%),
    radial-gradient(800px 500px at -8% 108%, rgba(220, 229, 241, 0.5), transparent 65%);
}
[data-direzione="immersiva"] .shelf-card-cover,
[data-direzione="immersiva"] .cat-card-cover,
[data-direzione="immersiva"] .cat-tl-rel,
[data-direzione="immersiva"] .creuza-cover img {
  box-shadow: 0 18px 40px rgba(17, 42, 87, 0.22);
  transition: box-shadow 0.4s;
}
[data-direzione="immersiva"] .cover-tile {
  box-shadow: 0 12px 30px rgba(17, 42, 87, 0.2);
}
[data-direzione="immersiva"] .section-divider .sd-line {
  background: var(--blu);
  opacity: 0.35;
}

/* ─── Barra di avanzamento scroll ──────────────────────────────────── */
.np-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--blu);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 120;
  pointer-events: none;
  will-change: transform;
}
[data-direzione="sobria"] .np-progress { display: none; }

/* ─── Parallasse (variabile --par impostata da evolve.js) ──────────── */
.section-num, .shelf-decade, .storia-eyebrow, .cat-tl-year-num {
  transform: translateY(var(--par, 0px));
  will-change: transform;
}

/* ─── Tilt 3D + riflesso sulle copertine ───────────────────────────── */
.fx-tilting {
  transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) !important;
  transition: transform 0.08s linear;
  position: relative;
  z-index: 3;
}
.fx-tilting::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    240px circle at var(--shx, 50%) var(--shy, 50%),
    rgba(255, 255, 255, var(--sho, 0)) 0%,
    rgba(255, 255, 255, 0) 62%
  );
  mix-blend-mode: soft-light;
  z-index: 4;
}
[data-direzione="immersiva"] .fx-tilting {
  box-shadow: 0 24px 48px rgba(17, 42, 87, 0.22);
}
[data-direzione="immersiva"] .shelf-card-cover img,
[data-direzione="immersiva"] .cat-card-cover img {
  transition: transform 0.5s cubic-bezier(.22, .9, .3, 1);
}
[data-direzione="immersiva"] .shelf-card:hover .shelf-card-cover img,
[data-direzione="immersiva"] .cat-card:hover .cat-card-cover img {
  transform: scale(1.06);
}

/* ─── Bottoni magnetici ────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-light, .footer-totop {
  translate: var(--magx, 0px) var(--magy, 0px);
  transition-property: translate, background, color, border-color, box-shadow, transform, opacity;
  transition-duration: 0.18s;
}

/* ─── Transizione pagina più cinematica (solo Immersiva) ───────────── */
[data-direzione="immersiva"]::view-transition-new(root) {
  animation: np-vt-in 0.65s cubic-bezier(.3, 0, .2, 1);
}
@keyframes np-vt-in {
  from { opacity: 0; transform: translateY(16px) scale(0.996); }
}
@media (prefers-reduced-motion: reduce) {
  [data-direzione="immersiva"]::view-transition-new(root) { animation: none; }
}

/* ─── CATALOGO INTERATTIVO · toolbar ───────────────────────────────── */
.cat-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin: -8px 0 38px;
}
.cat-search {
  position: relative;
  flex: 1 1 230px;
  max-width: 330px;
}
.cat-search input {
  width: 100%;
  font: 500 14px/1.3 var(--ff-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 26px 10px 24px;
  outline: none;
  transition: border-color 0.25s;
}
.cat-search input::placeholder { color: var(--muted); opacity: 0.75; }
.cat-search input:focus { border-color: var(--blu); }
.cat-search-icon {
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  color: var(--muted);
  pointer-events: none;
  display: grid;
}
.cat-search-clear {
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 16px/1 var(--ff-body);
  padding: 4px 6px;
  cursor: pointer;
  transition: color 0.2s;
}
.cat-search-clear:hover { color: var(--blu); }

.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-chip {
  font: 600 11px/1 var(--ff-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  cursor: pointer;
  transition: color 0.22s, border-color 0.22s, background 0.22s, translate 0.22s;
}
.cat-chip:hover { border-color: var(--blu); color: var(--blu); translate: 0 -1px; }
.cat-chip.is-on {
  background: var(--blu);
  border-color: var(--blu);
  color: var(--avorio);
}
.cat-chip .cat-chip-n {
  opacity: 0.55;
  margin-left: 5px;
  font-size: 10px;
}

.cat-sort {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}
.cat-sort-label {
  font: 600 10px/1 var(--ff-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.cat-sort select {
  font: 600 13px/1.3 var(--ff-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 2px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.25s;
}
.cat-sort select:focus { border-color: var(--blu); }

.cat-result-count {
  font: 500 12px/1.4 var(--ff-mono);
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: -26px 0 30px;
}

.cat-empty {
  padding: 70px 0 40px;
  text-align: center;
}
.cat-empty p {
  font: 500 italic 26px/1.4 var(--ff-display);
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.cat-empty button {
  font: 600 12px/1 var(--ff-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blu);
  background: transparent;
  border: 1px solid var(--blu);
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  transition: background 0.22s, color 0.22s;
}
.cat-empty button:hover { background: var(--blu); color: var(--avorio); }

@media (max-width: 760px) {
  .cat-toolbar { gap: 14px; }
  .cat-sort { margin-left: 0; }
  .cat-result-count { margin-top: -18px; }
}