/* Places on the tilted map: minimal. Warm white, ink of a dark pine, streets in a pale grey, and one accent, the
   gold of the home and of the marker that stands up. A serif for the places, its italic for the one you point at. */
:root {
  --fondo: #fbf8ee;        /* the page */
  --inchiostro: #23301f;   /* the places and the lit streets */
  --tenue: #8d9283;        /* the small text */
  --strada: #c2bda9;       /* the streets in the dark */
  --accento: #a68150;      /* the home and the markers */
  --schermo: 100vh;
  /* the tilt of the map: GSAP moves these two with the pointer */
  --inclina: 58deg;
  --gira: 38deg;
}

@supports (height: 100lvh) {
  :root {
    --schermo: 100lvh;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'Instrument Sans Variable', 'Instrument Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.intorno {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  height: var(--schermo);
  padding: 0 5vw;
}

.elenco {
  position: relative;
  z-index: 2;
}

.occhiello {
  margin: 0 0 1.6rem;
  color: var(--tenue);
  font-size: 0.72rem;
  font-stretch: 112%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.luoghi {
  margin: 0;
  padding: 0;
  list-style: none;
}

.luoghi button {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  width: 100%;
  padding: 0.35rem 0 0.35rem 1.1rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.luoghi button:focus-visible {
  outline: 1px solid var(--accento);
  outline-offset: 2px;
}

/* the name and its italic copy stacked in one line: the line rolls up and the italic takes the place */
.nome {
  position: relative;
  display: grid;
  overflow: hidden;
  font-family: 'Fraunces Variable', 'Fraunces', Georgia, serif;
  font-size: clamp(1.7rem, 3.3vw, 3.1rem);
  font-weight: 320;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  line-height: 1.12;
  color: color-mix(in srgb, var(--inchiostro) 55%, var(--fondo));
}

.nome > span {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
}

.corsivo {
  font-style: italic;
  color: var(--inchiostro);
}

.tempo {
  color: var(--tenue);
  font-size: 0.78rem;
  font-stretch: 108%;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
}

/* the hairline that slides to the place you point at */
.filo {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--inchiostro);
}

/* the map: a plane laid down in perspective, faded at the edges */
.mappa {
  position: relative;
  height: 100%;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 30%;
}

.piano {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(58vw, 96vh);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateX(var(--inclina)) rotateZ(var(--gira));
}

/* the fade at the edges goes on the streets only: a mask on the plane would flatten the markers into it */
.strade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}

.strade path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.strade__tenui path {
  stroke: var(--strada);
  stroke-width: 1;
}

.strade__accese path {
  stroke: var(--inchiostro);
  stroke-width: 1.6;
}

/* markers and the home stand up from the plane: the inverse of the plane's tilt turns them back to face you */
.segnale,
.casa {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.segnale__in,
.casa__blocco,
.casa .segno {
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: 0 100%;
  transform: rotateZ(calc(var(--gira) * -1)) rotateX(calc(var(--inclina) * -1));
}

.segnale__in {
  display: grid;
  justify-items: start;
  translate: -0.5px 0;
}

.segnale__asta {
  display: block;
  width: 1px;
  height: 64px;
  background: var(--accento);
  transform-origin: 50% 100%;
  transform: scaleY(0.28);
}

.segno {
  display: block;
  padding-bottom: 6px;
  color: var(--tenue);
  font-size: 11px;
  font-stretch: 108%;
  letter-spacing: 0.06em;
  white-space: nowrap;
  translate: -50% 0;
}

.segnale .segno {
  order: -1;
  opacity: 0.4;
}

/* the home: a small block in the accent colour, with its name over it */
.casa__blocco {
  width: 34px;
  height: 14px;
  background: var(--accento);
  translate: -50% 0;
}

.casa .segno {
  bottom: 18px;
  color: var(--accento);
  translate: -50% 0;
}

/* on a phone the map goes on top and the places under it, the same hover by touch */
@media (max-width: 760px) {
  body {
    overflow: auto;
  }

  .intorno {
    grid-template-columns: 1fr;
    grid-template-rows: 44vh auto;
    height: auto;
    min-height: var(--schermo);
    padding: 3vh 6vw 6vh;
  }

  .mappa {
    grid-row: 1;
  }

  .piano {
    width: min(92vw, 52vh);
  }

  .elenco {
    grid-row: 2;
  }

  .occhiello {
    margin-bottom: 0.8rem;
  }

  .nome {
    font-size: clamp(1.4rem, 6.6vw, 1.9rem);
  }

  .tempo {
    font-size: 0.7rem;
  }
}