* { box-sizing: border-box; margin: 0; padding: 0; }

/* La copertina sta solo su html (canvas): se stesse anche su body verrebbe
   dipinta sopra il video (z-index negativo) e lo nasconderebbe. */
html {
  background: #000 url("assets/poster.jpg") center / cover no-repeat fixed;
}

html, body {
  -webkit-tap-highlight-color: transparent;
}

body { overflow-x: hidden; }

.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  pointer-events: none;
  background: transparent;
}

/* Nasconde ogni controllo nativo, anche quando l'autoplay è bloccato. */
.bg-video::-webkit-media-controls,
.bg-video::-webkit-media-controls-panel,
.bg-video::-webkit-media-controls-start-playback-button,
.bg-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Hero = prima schermata, identica a prima. Niente z-index/transform qui:
   non deve creare uno stacking context, altrimenti il blending delle card
   non "vedrebbe" più il video fixed. */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Card ----------
   Due layer fratelli, entrambi absolute nell'hero: il layer "tint" fa blending col video
   (deve stare nello stesso stacking context del video), il layer "text" sta
   sopra senza blending, quindi il testo resta sempre nitido. */
.card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(100vw - 40px), 340px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 4px;
}

.card--tint {
  z-index: 10;
  background: #accd37;
  mix-blend-mode: hard-light;
  opacity: 0.97;
  pointer-events: none;
}

.card--text {
  z-index: 11;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  color: #0a120e;
  border: 1px solid #0a120e;
  font-family: Menlo, Monaco, "SF Mono", Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: clamp(11px, 3.4vw, 13px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-weight: 700;
}

.card--text p { margin: 0; }

.card__brand {
  font-size: 1em;
  letter-spacing: 0.3em;
}

.card__body { display: grid; gap: 1.25em; }

.card__date {
  font-size: clamp(44px, 16vw, 64px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.card__tba {
  align-self: flex-start;
  padding: 2px 6px;
  background: #0a120e;
  color: #accd37;
}

/* ---------- Info (sotto l'hero, visibile scrollando) ---------- */
.info {
  position: relative;
  background: #0a120e;
  color: #accd37;
  padding: 56px 20px calc(56px + env(safe-area-inset-bottom, 0px));
  font-family: Menlo, Monaco, "SF Mono", Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.7;
}

.info__inner {
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
}

.info h2 {
  margin-bottom: 8px;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.info h3 {
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
}

.info p { max-width: 60ch; }

.info a {
  color: inherit;
  text-underline-offset: 3px;
}