/* The frames of the apartment: the projects of a made-up interior studio. A cream page, then a tall green section
   with a stage that stays still while you scroll: two green frames and, on top, the picture of a home. The homes
   are SVG rooms drawn by the script. */
:root {
  --crema: #f4f3eb;        /* the cream of the page and of the bars */
  --verde: #525c2f;        /* the deep green of the section */
  --verde-chiaro: #7a8452; /* the light green at the foot of the section */
  --lontana: #8a9461;      /* the far frame */
  --vicina: #c9c9a6;       /* the near frame */
  --inchiostro: #1e1e1e;   /* the text on the cream */
  --tenue: #8c8c8c;        /* the small text on the cream */
  --bianco: #f4f3eb;       /* the text on the picture */
  --scuro: #0f0f0f;        /* the dark button */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--crema);
  color: var(--inchiostro);
  font-family: 'Roboto Condensed Variable', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- the cream sections */
.apertura,
.chiusura {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  min-height: 90vh;
  padding: 80px 16px;
  text-align: center;
}

.chiusura {
  min-height: 70vh;
}

.etichetta {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.apertura__titolo {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 0.9;
}

.apertura__testo {
  max-width: 34ch;
  margin: 0;
  color: var(--tenue);
  font-size: 15px;
  line-height: 1.35;
}

/* ---------------------------------------------------------------- the green section */
.case {
  position: relative;
  height: 460lvh;
  background: linear-gradient(180deg, var(--verde), var(--verde-chiaro));
}

/* the cream bars that pull back as the section arrives */
.scacchi {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}

.scacchi__barra {
  flex: 1;
  height: 0;
  background: var(--crema);
}

.palco {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
}

.cornice,
.vetrina {
  position: absolute;
  inset: 0;
}

.cornice--lontana {
  background: var(--lontana);
}

.cornice--vicina {
  background: linear-gradient(180deg, var(--vicina), var(--lontana));
}

.vetrina {
  overflow: hidden;
  background: var(--verde);
}

/* ---------------------------------------------------------------- one home */
.casa {
  position: absolute;
  inset: 0;
  color: var(--bianco);
  visibility: hidden;
}

.casa.is-attiva {
  visibility: visible;
}

.casa__stanza {
  position: absolute;
  inset: 0;
}

.casa__stanza svg {
  display: block;
  width: 100%;
  height: 100%;
}

.casa__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 12, 8, 0.55), rgba(15, 12, 8, 0.1) 45%, rgba(15, 12, 8, 0.45));
}

/* the name and the figures rise from behind an edge: the mask clips them, GSAP moves what is inside */
.casa__maschera {
  position: absolute;
  left: clamp(16px, 2.4vw, 36px);
  bottom: clamp(120px, 22vh, 220px);
  overflow: hidden;
  padding-bottom: 0.1em;
}

.casa__nome {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 80px);
  line-height: 0.88;
}

.casa__dati {
  position: absolute;
  right: clamp(16px, 2.4vw, 36px);
  top: 50%;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
  transform: translateY(-50%);
}

/* each figure is a mask: GSAP moves what is inside it, so the translate of the list stays */
.casa__dati li {
  overflow: hidden;
}

.dato {
  display: grid;
  gap: 2px;
}

.dato small {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.dato > span {
  font-size: clamp(15px, 1.2vw, 19px);
}

/* the names of the homes: the one on show is white, the others pale */
.nomi {
  position: absolute;
  left: clamp(16px, 2.4vw, 36px);
  bottom: clamp(24px, 5vh, 44px);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.nomi button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--bianco);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.3s;
}

.nomi button[aria-current='true'] {
  opacity: 1;
}

@media (hover: hover) {
  .nomi button:hover {
    opacity: 0.85;
  }
}

.nomi button:focus-visible,
.tasto:focus-visible {
  outline: 2px solid var(--bianco);
  outline-offset: 3px;
}

.piede {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 44px);
  z-index: 2;
  display: flex;
  gap: 6px;
  translate: -50% 0;
}

.tasto {
  padding: 9px 16px;
  border-radius: 2px;
  background: var(--bianco);
  color: var(--inchiostro);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s;
}

.tasto--scuro {
  background: var(--scuro);
  color: var(--bianco);
}

@media (hover: hover) {
  .tasto:hover {
    background: #dbdad2;
    color: var(--inchiostro);
  }
}

@media (max-width: 767px) {
  .casa__maschera {
    bottom: auto;
    top: 96px;
  }

  .casa__dati {
    top: auto;
    bottom: 120px;
    right: auto;
    left: 16px;
    transform: none;
    text-align: left;
    grid-auto-flow: column;
    gap: 18px;
  }

  .nomi {
    bottom: 76px;
  }

  .piede {
    left: 16px;
    right: 16px;
    translate: none;
  }

  .tasto {
    flex: 1;
    text-align: center;
  }
}