/* The strip of rooms that opens: the opening of a made-up interior studio. A cream veil with soft vertical bands, a
   strip of little rooms in the middle and, behind it, the room of the home page, which starts as one of the squares
   of the strip. The rooms are drawn by the script as SVG. */
:root {
  --fondo: #efeee6;        /* the cream of the veil */
  --banda: #e6e4d9;        /* the soft vertical bands on the veil */
  --inchiostro: #1e1e1e;   /* the text on the cream */
  --tenue: #8c8c8c;        /* the small text */
  --bianco: #f4f3eb;       /* the text over the room */
  --ombra: rgba(20, 16, 12, 0.42);  /* the dark at the foot of the room, under the title */
}

* {
  box-sizing: border-box;
}

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

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

/* ---------------------------------------------------------------- the header */
.testata {
  position: fixed;
  inset: 0 0 auto;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(16px, 2.4vw, 32px);
  color: var(--bianco);
}

.marchio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: 0.02em;
}

.marchio__segno {
  width: 0.8em;
  height: 0.8em;
}

.testata__voce {
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: rgba(244, 243, 235, 0.14);
  color: inherit;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.testata__voce--bordo {
  border-color: currentColor;
  background: none;
}

/* ---------------------------------------------------------------- the veil */
.velo {
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, var(--fondo) 0 4.4vw, var(--banda) 4.4vw 8.8vw);
}

/* ---------------------------------------------------------------- the room of the home page */
.eroe__stanza {
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 5;
  width: 100vw;
  height: 100lvh;
  margin: 0;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

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

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

/* the dark at the foot of the room, so the title reads */
.eroe__stanza::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.18), transparent 30%, transparent 48%, var(--ombra));
}

.eroe__testi {
  position: fixed;
  inset: auto 0 clamp(40px, 9vh, 96px);
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 16px;
  color: var(--bianco);
  text-align: center;
}

.eroe__motto {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 21px);
}

.eroe__titolo {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------- the loader */
.caricamento {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.caricamento__marchio {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  justify-content: center;
}

.caricamento__motto {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(14px, 1.15vw, 17px);
  text-align: center;
}

.striscia {
  position: absolute;
  left: 50%;
  top: 46%;
}

.striscia__stanza {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: 1px;
}

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

.caricamento__testi {
  position: absolute;
  top: calc(46% + 7.5vw);
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 16px;
  text-align: center;
}

.caricamento__titolo {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(30px, 2.9vw, 46px);
  line-height: 1;
}

.caricamento__sotto {
  margin: 0;
  color: var(--tenue);
  font-size: clamp(11px, 0.8vw, 13px);
}

/* the split letters and words: each one moves on its own */
.lettera,
.parola {
  display: inline-block;
}

/* ---------------------------------------------------------------- play it again */
.ancora {
  position: fixed;
  right: clamp(16px, 2.4vw, 32px);
  bottom: 18px;
  z-index: 7;
  padding: 8px 14px;
  border: 1px solid rgba(244, 243, 235, 0.6);
  border-radius: 2px;
  background: rgba(20, 16, 12, 0.25);
  color: var(--bianco);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}

@media (hover: hover) {
  .ancora:hover {
    background: rgba(244, 243, 235, 0.9);
    color: var(--inchiostro);
  }
}

.ancora:focus-visible,
.testata__voce:focus-visible {
  outline: 2px solid var(--bianco);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .caricamento__testi {
    top: calc(46% + 16vw);
  }

  .eroe__testi {
    bottom: 64px;
  }
}