/* ── ALMANACCO ─────────────────────────────────────────────── */
html, body { height: 100%; overflow: hidden; }

/* ── STAGE ─────────────────────────────────────────────────── */
.al-stage {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(0,0,110,.75) 0%, var(--dk) 70%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.al-stage::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../img/almanacco.jpeg') center / cover no-repeat;
  opacity: .14; z-index: 0;
}

/* ── TRACK ─────────────────────────────────────────────────── */
.al-track {
  display: flex; flex-direction: column; align-items: center;
  gap: 28px;
  position: absolute; left: 0; right: 0; top: 0;
  z-index: 1;
  will-change: transform;
  transition: transform .65s var(--eoe);
}

/* ── CARD ──────────────────────────────────────────────────── */
.al-card {
  width: 60vw; max-width: 840px;
  height: 60vh; min-height: 300px; max-height: 520px;
  flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 44px 52px;
  position: relative; overflow: hidden;
  border-radius: 20px;

  /* glass — stesso stile hero-meta */
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.13);

  transition: opacity .4s ease, transform .4s ease,
              background .4s ease, border-color .4s ease, box-shadow .4s ease;
  opacity: .22; transform: scale(.95);
}
.al-card.al-card--active {
  opacity: 1; transform: scale(1);
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 32px 80px rgba(0,0,0,.45),
              0 1px 0 rgba(255,255,255,.14) inset;
}

/* anno in filigrana */
.al-card-bg-yr {
  position: absolute; right: -6px; bottom: -10px;
  font-family: 'Akira', sans-serif;
  font-size: clamp(110px, 16vw, 220px);
  line-height: 1; letter-spacing: -.03em;
  color: rgba(255,255,255,.05);
  pointer-events: none; user-select: none; white-space: nowrap;
}

/* top: n° edizione + anno grande */
.al-card-top { display: flex; flex-direction: column; gap: 6px; }
.al-card-n {
  font-family: 'DinPro', sans-serif; font-weight: 700;
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--y); opacity: .75;
}
.al-card-year {
  font-family: 'Akira', sans-serif;
  font-size: clamp(58px, 8vw, 130px);
  line-height: .85; letter-spacing: -.025em;
  color: var(--wh); display: block;
}

/* bottom: separatore + campi */
.al-card-bot { display: flex; flex-direction: column; gap: 18px; }
.al-card-sep { width: 44px; height: 2px; background: var(--y); }
.al-card-data { display: flex; gap: 48px; flex-wrap: wrap; }
.al-card-field label {
  display: block; font-family: 'DinPro', sans-serif;
  font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.50); margin-bottom: 7px;
}
.al-card-field span {
  font-family: 'DinPro', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--wh);
}
.al-card-gol {
  font-family: 'Akira', sans-serif; font-size: 11px;
  color: var(--y); margin-left: 8px; opacity: .7;
}

/* ultima edizione */
.al-card--last .al-card-year { color: var(--y); }
.al-card--last.al-card--active {
  border-top: 1px solid rgba(196,249,39,.30);
}

/* card COVID */
.al-card--covid { justify-content: center; gap: 0; }
.al-card--covid.al-card--active { opacity: .50; }
.al-card--covid .al-card-year {
  color: rgba(255,255,255,.22);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.18);
  text-decoration-thickness: 2px;
}
.al-card--covid .al-card-n { color: rgba(255,255,255,.25); opacity: 1; margin-bottom: 4px; }
.al-card-covid-note {
  font-family: 'DinPro', sans-serif; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; opacity: .28;
  margin-top: 10px;
}

/* ── HINT ──────────────────────────────────────────────────── */
.al-hint {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  z-index: 4; pointer-events: none;
  animation: al-hint-out 1s ease 2.5s forwards;
}
.al-hint span {
  font-family: 'DinPro', sans-serif; font-size: 9px;
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
.al-hint svg { color: rgba(255,255,255,.32); }
@keyframes al-hint-out { to { opacity: 0; } }

/* ── SIDEBAR — stile cursore ───────────────────────────────── */
.al-sidebar {
  position: fixed; right: 44px; top: 50%; transform: translateY(-50%);
  z-index: 50; width: 110px; height: 520px;
}

/* la pillola = il "cursore grande" (bordo giallo, interno trasparente) */
.al-tl-pill {
  position: absolute; left: 0; top: 20px; bottom: 20px; width: 20px;
  border: 1.5px solid rgba(196,249,39,.32);
  border-radius: 10px;
  background: transparent;
}

/* il pallino = il "cursor-dot" */
.al-tl-dot {
  position: absolute; left: 10px; top: 0%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--y);
  box-shadow: 0 0 10px rgba(196,249,39,.70);
  transition: top .4s var(--eoe);
  z-index: 2;
}

/* etichette anno statiche */
.al-tl-lbl {
  position: absolute; left: 30px;
  transform: translateY(-50%) scale(1);
  transform-origin: left center;
  font-family: 'DinPro', sans-serif; font-weight: 700;
  font-size: 9px; letter-spacing: .10em; text-transform: uppercase;
  color: rgba(255,255,255,.32); white-space: nowrap;
  transition: color .3s ease, transform .35s var(--eoe);
}
.al-tl-lbl.active {
  color: var(--y);
  transform: translateY(-50%) scale(1.55);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .al-sidebar { right: 20px; }
}
@media (max-width: 768px) {
  .al-card { width: 82vw; height: 64vh; padding: 32px 24px; border-radius: 16px; }
  .al-card-year { font-size: clamp(50px, 12vw, 96px); }
  .al-card-data { gap: 22px; }
  .al-card-field span { font-size: 13px; }
  .al-sidebar { display: none; }
}
@media (max-width: 480px) {
  .al-card { width: 88vw; border-radius: 14px; }
  .al-card-year { font-size: clamp(44px, 12vw, 76px); }
}
@media (max-height: 600px) {
  .al-card { height: 74vh; }
}