/* The house of cards: a felt table seen from a little above, turned so the backs of the cards show. The cards are
   flat planes in a 3D world (CSS transforms); the script moves them. Every colour is a variable here. */
:root {
  --room: #0c1a1b;          /* the dark room around the table */
  --felt: #1d5446;          /* the felt of the table, under the lamp */
  --felt-deep: #0f2d28;     /* the felt away from the lamp */
  --back: #8f1f2c;          /* the back of the cards */
  --back-line: #6d1420;     /* the lattice on the back */
  --gold: #e7c47a;          /* the gold lines, the moon and the stars on the back */
  --card: #f6efdf;          /* the white of the cards */
  --card-line: #d8cbb0;     /* the thin frame on the fronts */
  --red: #c42a35;           /* hearts and diamonds */
  --black: #1b1a22;         /* spades and clubs */
  --shade: #050b0b;         /* the shadows on the felt */
  --gust: #f3ead6;          /* the puff of air */
  --text: #f1e6cd;          /* the title */
  --soft: #9fb8ae;          /* the small text */
  --screen: 100vh;
}
@supports (height: 100lvh) {
  :root { --screen: 100lvh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
  background: var(--room);
}
body {
  font-family: 'Bodoni Moda Variable', 'Bodoni 72', Didot, Georgia, serif;
  color: var(--text);
  overflow: hidden;
}

.scena {
  position: relative;
  height: var(--screen);
  min-height: 420px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  background: var(--room);
}

.disegni {
  position: absolute;
  width: 0;
  height: 0;
}

/* ---- the title ---- */
.testa {
  position: absolute;
  z-index: 2;
  top: clamp(20px, 5vh, 56px);
  left: 0;
  right: 0;
  padding: 0 16px;
  text-align: center;
  pointer-events: none;
}
.sopra {
  margin: 0 0 6px;
  font-size: clamp(13px, 1.5vw, 17px);
  font-style: italic;
  font-weight: 450;
  letter-spacing: 0.04em;
  color: var(--soft);
}
.titolo {
  margin: 0;
  font-size: clamp(34px, 6.4vw, 84px);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.015em;
}

/* ---- the table and the 3D world ---- */
.palco {
  position: absolute;
  inset: 0;
  perspective: 1700px;
  perspective-origin: 50% 30%;
  pointer-events: none;
}
.mondo {
  position: absolute;
  left: 50%;
  top: 80%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.tavolo {
  position: absolute;
  left: -2400px;
  top: -1600px;
  width: 4800px;
  height: 3200px;
  transform: rotateX(90deg);
  background: radial-gradient(closest-side, var(--felt) 0%, var(--felt-deep) 34%, transparent 70%);
}

/* every card: a plane as long as the card, as deep as it is wide; two faces back to back */
.carta {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.faccia {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6%/8.5%;
  overflow: hidden;
}
.faccia svg {
  display: block;
  width: 100%;
  height: 100%;
}
.faccia--retro {
  transform: rotateX(180deg) translateZ(0.5px);
}
.faccia--davanti {
  transform: translateZ(0.5px);
}
/* the lamp hangs above: a card lying flat catches the light, an upright one is darker */
.faccia::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shade);
  opacity: var(--dark, 0.2);
}
.ombra {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--shade) 30%, transparent 100%);
  will-change: transform, opacity;
}

/* the drawings on the cards */
.dorso-carta { fill: var(--card); }
.dorso { fill: var(--back); }
.dorso-rete { stroke: var(--back-line); stroke-width: 1.6; fill: none; }
.dorso-filo { stroke: var(--gold); stroke-width: 1.1; fill: none; }
.dorso.dorso-filo { fill: var(--back); }
.dorso-filo--fine { stroke-width: 0.5; }
.dorso-oro { fill: var(--gold); }
.fronte { fill: var(--card); }
.fronte-filo { fill: none; stroke: var(--card-line); stroke-width: 0.8; }
.seme-rosso { fill: var(--red); }
.seme-nero { fill: var(--black); }
.indice {
  font-family: 'Bodoni Moda Variable', Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  transform: translateX(1.5px);
}

/* the puff of air */
.soffio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.soffio path {
  fill: none;
  stroke: var(--gust);
  stroke-linecap: round;
}

/* the small text */
.nota {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(18px, 4.5vh, 44px);
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font-size: clamp(14px, 1.6vw, 18px);
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--soft);
  pointer-events: none;
}
.nota span {
  display: inline-block;
}

.scena:focus-visible .titolo {
  text-decoration: none;
  color: var(--gold);
}