/* ============================================================================
   deck.css — Presentazione full-screen 16:9
   ============================================================================ */
.deck-body {
  margin: 0; overflow: hidden; background: #060d1a; color: #e8eefb;
  height: 100vh; font-family: var(--font);
}
.deck-stage { position: fixed; inset: 0; }

.slide {
  position: absolute; inset: 0; display: none;
  padding: 6vh 7vw; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateX(40px); transition: opacity .45s ease, transform .45s ease;
}
.slide.active { display: flex; opacity: 1; transform: none; z-index: 2; }
.slide.prev { transform: translateX(-40px); }

.slide .kicker { font-size: 1rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #5aa9ff; margin-bottom: 18px; }
.slide h1 { font-size: clamp(2.2rem, 5.2vw, 4.2rem); font-weight: 800; margin: 0 0 .3em; color: #fff; }
.slide h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; margin: 0 0 .5em; color: #fff; }
.slide p, .slide li { font-size: clamp(1.05rem, 1.7vw, 1.45rem); color: #c4d2ea; }
.slide .lead { font-size: clamp(1.2rem, 2vw, 1.7rem); color: #dbe6f8; max-width: 60ch; }
.slide ul { margin: .2em 0; padding-left: 0; list-style: none; }
.slide ul li { position: relative; padding: 10px 0 10px 40px; border-bottom: 1px solid rgba(255,255,255,.07); }
.slide ul li::before {
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, #2563eb, #06b6d4);
}
.slide strong { color: #fff; }

.deck-grad { background: radial-gradient(1200px 600px at 15% 0%, #14315e 0%, #060d1a 55%); }

/* ---- WOW 1 · slide titolo cinematografica ------------------------------- */
.title-slide { align-items: flex-start; overflow: hidden; }
.title-slide .aurora {
  position: absolute; inset: -30% -10% auto -10%; height: 130%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(640px 420px at 18% 22%, rgba(37,99,235,.55), transparent 60%),
    radial-gradient(560px 380px at 78% 30%, rgba(6,182,212,.42), transparent 60%),
    radial-gradient(520px 360px at 55% 75%, rgba(124,58,237,.34), transparent 62%);
  filter: blur(20px); opacity: .9;
  animation: auroraDrift 16s ease-in-out infinite alternate;
}
.title-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(900px 600px at 25% 30%, #000, transparent 78%);
  mask-image: radial-gradient(900px 600px at 25% 30%, #000, transparent 78%);
}
.title-slide > * { position: relative; z-index: 1; }
@keyframes auroraDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .title-slide .aurora { animation: none; } }

.title-slide .badge {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(90,169,255,.4); color: #9cc3ff; font-weight: 700; font-size: .9rem; margin-bottom: 26px;
}
.title-slide .meta { margin-top: 28px; color: #8ea6cc; font-size: 1.05rem; }
.title-slide .meta b { color: #cfe0fb; }
.deck-logo { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .02em; color: #fff; font-size: 1.2rem; }
.deck-logo .mk { color: #5aa9ff; letter-spacing: -4px; font-size: 1.4rem; }

/* two-column layouts */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; height: 100%; }
.split.narrow-left { grid-template-columns: .85fr 1.15fr; }
.split .panel {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: 26px;
}
.deck-chart { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.deck-chart .chart-title { color: var(--ink); font-weight: 700; }
.deck-chart .chart-sub { color: var(--muted); font-size: .85rem; margin-bottom: 8px; }
.deck-chart .uda-axis { fill: #64748b; }
.deck-chart .uda-barval { fill: #0f172a; }
.deck-chart .uda-legend-item { color: #334155; }

/* metric chips on slides */
.metric-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.metric {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 16px 20px; min-width: 150px;
}
.metric .m-val { font-size: 2.1rem; font-weight: 800; color: #fff; }
.metric .m-lab { font-size: .85rem; color: #9cb2d4; }

/* numbered use-cases */
.uc-list { display: grid; gap: 12px; }
.uc { display: flex; gap: 16px; align-items: flex-start; padding: 14px 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; }
.uc .n { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg,#2563eb,#06b6d4); color:#fff; }
.uc .uc-body { font-size: 1.05rem; }
.uc .uc-body b { color: #fff; }
.uc.dim { opacity: .62; }
.uc small { color: #8ea6cc; }

/* timeline / steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.step { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px; }
.step .s-num { color: #5aa9ff; font-weight: 800; font-size: .9rem; }
.step h3 { color: #fff; font-size: 1.1rem; margin: 6px 0; }
.step p { font-size: .95rem; margin: 0; }

/* quote slide */
.quote { max-width: 22ch; }
.quote blockquote { font-size: clamp(1.6rem, 3.2vw, 2.6rem); font-weight: 700; color: #fff; line-height: 1.3; margin: 0; max-width: 24ch; }
.quote .qmark { font-size: 5rem; color: #2f5fae; line-height: .5; }

/* chrome: progress, dots, controls */
.deck-progress { position: fixed; top: 0; left: 0; height: 4px; background: linear-gradient(90deg,#2563eb,#06b6d4); width: 0; z-index: 30; transition: width .3s ease; }
.deck-chrome { position: fixed; bottom: 18px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 16px; z-index: 30; }
.deck-dots { display: flex; gap: 7px; }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.dot.on { background: #5aa9ff; transform: scale(1.25); }
.deck-ctrl { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; }
.deck-ctrl:hover { background: rgba(255,255,255,.18); }
.deck-counter { position: fixed; bottom: 22px; right: 24px; color: #7d93b8; font-size: .85rem; font-weight: 600; z-index: 30; }
.deck-help { position: fixed; top: 16px; right: 18px; color: #6f86ac; font-size: .8rem; z-index: 30; }
.deck-home { position: fixed; top: 16px; left: 18px; z-index: 30; color: #9cb2d4; font-size: .85rem; font-weight: 600; }
.deck-home:hover { color: #fff; }

/* ---- WOW 2 · prima/dopo (tabella grezza → grafico) ---------------------- */
.beforeafter { display: grid; grid-template-columns: 1fr auto 1.25fr; gap: 2.4vw; align-items: center; height: 100%; }
.ba-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ba-tag { font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ba-tag.before { color: #7d93b8; }
.ba-tag.after { color: #5eead4; }
.raw-table {
  background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.18);
  border-radius: 12px; padding: 12px 14px; overflow: hidden;
  font-family: "SF Mono", "Consolas", ui-monospace, monospace;
  filter: saturate(.5);
}
.raw-table table { width: 100%; border-collapse: collapse; font-size: clamp(.62rem, .92vw, .82rem); color: #8ea6cc; }
.raw-table th, .raw-table td { padding: 3px 6px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.06); white-space: nowrap; }
.raw-table th:first-child, .raw-table td:first-child { text-align: left; color: #6f86ac; }
.raw-table th { color: #6f86ac; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.raw-table caption { caption-side: top; text-align: left; color: #5f7396; font-size: .72rem; margin-bottom: 6px; }
.ba-arrow { font-size: 2.6rem; color: #5aa9ff; line-height: 1; align-self: center; opacity: .9; }
.ba-note { font-size: .9rem; color: #9cb2d4; }
@media (max-width: 820px) {
  .beforeafter { grid-template-columns: 1fr; gap: 18px; }
  .ba-arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* grid overview */
body.grid-view .deck-stage { position: static; }
body.grid-view { overflow: auto; height: auto; }
body.grid-view .slide {
  position: relative; display: flex !important; opacity: 1 !important; transform: scale(1) !important;
  inset: auto; height: 38vh; margin: 1vh; width: 31vw; float: left; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; overflow: hidden; cursor: pointer; padding: 3vh 2vw; pointer-events: auto;
}
body.grid-view .deck-chrome, body.grid-view .deck-counter, body.grid-view .deck-help { display: none; }

@media (max-width: 820px) {
  .split, .split.narrow-left { grid-template-columns: 1fr; gap: 22px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .slide { padding: 5vh 6vw; overflow-y: auto; }
}