/* Letters full of film: a dark screening room with four cards in a row (two by two on a phone). One WebGL canvas
   lies behind all the cards and draws the four turning letters, each in its own card. Without WebGL, or with reduced
   motion, every card shows its footage through a flat mask of the letter instead. */
:root {
  --sala: #111110;          /* the room */
  --testo: #f3efe6;         /* the words */
  --tenue: #8f8a80;         /* the counts */
  --riga: rgba(243, 239, 230, 0.14);   /* the thin borders */
  --accento: #ffb000;       /* the focus ring */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--sala);
  color: var(--testo);
  font-family: 'Schibsted Grotesk Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sala {
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(16px, 2.4vw, 32px);
}

.sala__etichetta {
  margin: 0 0 10px;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
}

.sala__titolo {
  margin: 0;
  font-size: clamp(34px, 5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 850;
}

.griglia {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}

.griglia__tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.carta {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--riga);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s ease;
}

.carta:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
}

@media (hover: hover) {
  .carta:hover {
    border-color: rgba(243, 239, 230, 0.4);
  }
}

.carta__lettera {
  position: relative;
  display: block;
  aspect-ratio: 1;
  max-width: 100%;
}

/* the footage of each card: hidden behind the WebGL letters, shown through a flat mask when there is no WebGL */
.carta__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.griglia[data-modo='maschera'] .carta__film {
  opacity: 1;
  -webkit-mask: var(--maschera) center / 58% no-repeat;
  mask: var(--maschera) center / 58% no-repeat;
}

.carta__riga {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
}

.carta__numero {
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}