/* Borgo di Livemmo · Pagina di cortesia · Proposta 03 Freestyle (il borgo di notte) */

:root {
  --notte: #1e1612;
  --terra-scura: #4a3122;
  --ambra: #e9a94b;
  --crema: #f6f2e6;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  --margine: clamp(32px, 6.667vw, 96px);
  --nastro: 48px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--notte);
  color: var(--crema);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p, h1, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--notte);
}

/* Scena: cielo, crinale e borgo */

.scena {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.stelle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 57.8%;
}

.stelle circle { fill: var(--crema); }

.stelle .brilla {
  animation: brilla var(--durata, 4s) ease-in-out var(--ritardo, 0s) infinite alternate;
}

@keyframes brilla {
  to { opacity: 0.08; }
}

.crinale {
  position: absolute;
  left: 0;
  bottom: 40px;
  width: 100%;
  height: 300px;
}

.crinale path { fill: var(--terra-scura); }
.crinale--mobile { display: none; }

.borgo {
  position: absolute;
  width: clamp(380px, 40.28vw, 640px);
  height: auto;
  aspect-ratio: 580 / 502.5;
  right: 6.25vw;
  top: clamp(96px, 14.3vh, 160px);
  overflow: visible;
}

.bagliore {
  fill: var(--ambra);
  opacity: 0.35;
  transition: opacity 2.2s ease;
}

.pietra {
  fill: var(--terra-scura);
  transition: fill 0.6s ease;
}

.finestra { fill: var(--ambra); }

.js .finestra:not(.accesa) { fill: var(--terra-scura); }
.js .bagliore:not(.acceso) { opacity: 0; }

.finestra.tremola { animation: tremola 0.9s steps(1, end); }

@keyframes tremola {
  0%   { fill: var(--ambra); }
  20%  { fill: #c98f3f; }
  35%  { fill: var(--ambra); }
  55%  { fill: #d99b45; }
  70%  { fill: var(--ambra); }
}

.pietra:not(.finestra):hover { fill: #5a3c2a; }

.logo {
  position: absolute;
  top: 64px;
  left: var(--margine);
  width: 78.88px;
  height: auto;
  aspect-ratio: 115.84 / 160.37;
}

/* Contenuto */

.contenuto {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(200px, 27.8vh, 250px) var(--margine) 63px;
}

.titolo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: min(560px, 46vw);
}

.occhiello {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.56px;
  text-transform: uppercase;
  color: var(--ambra);
  line-height: normal;
  white-space: nowrap;
}

.solo-mobile { display: none; }

h1 {
  font-weight: 300;
  font-size: clamp(56px, 6.39vw, 92px);
  letter-spacing: -0.03em;
  line-height: 0.96;
  color: var(--crema);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  white-space: nowrap;
}

h1 em {
  font-style: italic;
  color: var(--ambra);
}

.testo {
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: var(--crema);
  opacity: 0.78;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.testo strong { font-weight: 700; }

/* Contatti */

.contatti {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 48px;
}

.contatto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--ambra);
  line-height: normal;
  white-space: nowrap;
}

.azione {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--ambra);
}

.valore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 300;
  font-size: clamp(22px, 2.08vw, 30px);
  letter-spacing: -0.01em;
  color: var(--crema);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  transition: color 0.25s ease;
}

.freccia {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  color: var(--ambra);
  transition: transform 0.25s ease;
}

.contatto:hover .valore,
.contatto:focus-visible .valore { color: var(--ambra); }

.contatto:hover .freccia,
.contatto:focus-visible .freccia { transform: translate(3px, -3px); }

.contatto:focus-visible {
  outline: 1px solid var(--ambra);
  outline-offset: 6px;
}

/* Nastro in fondo */

.nastro {
  position: relative;
  z-index: 3;
  overflow: hidden;
  background: var(--ambra);
  color: var(--notte);
}

.nastro-traccia {
  display: flex;
  width: max-content;
  animation: scorri 45s linear infinite;
}

.nastro:hover .nastro-traccia { animation-play-state: paused; }

.nastro-gruppo {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 13px 28px 13px 0;
  white-space: nowrap;
  line-height: normal;
}

.voce-corsivo {
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.voce-maiuscolo {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.56px;
  text-transform: uppercase;
}

.sep {
  font-family: var(--sans);
  font-size: 14px;
}

@keyframes scorri {
  from { transform: translateX(-40px); }
  to   { transform: translateX(calc(-50% - 40px)); }
}

/* Tablet: i contatti possono andare su due righe, il crinale si alza per accoglierli */

@media (max-width: 1100px) {
  .crinale { height: 380px; }
}

/* Mobile · 390 */

@media (max-width: 760px) {
  :root {
    --margine: 28px;
    --h-scena: min(118vw, 560px);
  }

  .page { background: var(--terra-scura); }

  .scena {
    position: relative;
    inset: auto;
    height: var(--h-scena);
    background: var(--notte);
  }

  .stelle { height: 100%; }

  .crinale { display: none; }

  .crinale--mobile {
    display: block;
    bottom: -1px;
    height: 34.8%;
  }

  .borgo {
    width: calc(var(--h-scena) * 0.706);
    right: auto;
    left: calc(55.1% - var(--h-scena) * 0.353);
    top: 25.9%;
  }

  .logo {
    top: 36px;
    width: 60.32px;
  }

  .contenuto {
    padding: 32px var(--margine) 0;
  }

  .titolo {
    gap: 18px;
    max-width: 330px;
  }

  .occhiello {
    font-size: 11px;
    letter-spacing: 1.32px;
  }

  .solo-desktop { display: none; }
  .solo-mobile { display: inline; }

  h1 { font-size: 46px; }

  .contatti {
    margin-top: 62px;
    padding-top: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 22px;
  }

  .valore { font-size: 24px; }

  .nastro { margin-top: 56px; }

  .nastro-gruppo { padding-block: 11px; }
}

@media (max-width: 360px) {
  h1 { font-size: 40px; }
  .valore { font-size: 21px; }
  .testo { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .nastro-traccia,
  .stelle .brilla,
  .finestra.tremola { animation: none; }

  .pietra,
  .bagliore { transition: none; }
}