/*
 * Stili della pagina "SPA privata sul terrazzo".
 *
 * E' l'unica pagina del sito su fondo scuro dall'inizio alla fine: ci si
 * arriva dal filmato, che finisce di sera sulla terrazza, e la pagina
 * raccoglie quella luce invece di riportare di colpo al bianco.
 *
 * Il fondo non e una fotografia ma tre macchie di colore sfocate — oro,
 * acqua, blu della sera — che si spostano piano e seguono appena il
 * puntatore. Si muovono solo "transform" e "opacity", quindi il lavoro
 * resta alla scheda grafica; con "riduci animazioni" stanno ferme e la
 * pagina resta identica, solo immobile.
 */

.terrazza-page {
  --notte: #0a1017;
  --notte-alta: #101a24;
  --chiaro: #fffdf8;
  --tenue: #fffdf8b3;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--chiaro);
  padding-bottom: 96px;
  /* Le sfumature sono in percentuale sull'altezza della pagina, quindi
     coprono tutto qualunque sia la lunghezza del testo: nessuna fascia
     resta nera e piatta. Sopra ci passano le tre macchie che si muovono. */
  background:
    radial-gradient(120% 52% at 10% 2%, #1d2c3d 0%, #0a101700 62%),
    radial-gradient(96% 42% at 92% 34%, #163540 0%, #0a101700 66%),
    radial-gradient(110% 46% at 26% 66%, #1b2440 0%, #0a101700 68%),
    radial-gradient(120% 40% at 74% 98%, #1a2b3c 0%, #0a101700 70%),
    var(--notte)
}

/* --- Il fondo che si muove --- */

.terrazza-aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  transform: translate3d(calc((var(--px, .5) - .5) * 26px), calc((var(--py, .5) - .5) * 26px), 0);
  transition: transform .9s cubic-bezier(.22, .61, .36, 1)
}

.terrazza-aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5
}

/* Le tre macchie stanno a un'altezza in percentuale, non in pixel:
   cosi restano dentro la pagina sia quando il testo e corto sia
   quando e lungo. */

/* Oro: la luce delle lampade sulla terrazza. */
.terrazza-aurora i:nth-child(1) {
  top: 4%;
  left: -10%;
  width: 68vw;
  height: 52vh;
  max-width: 880px;
  max-height: 640px;
  background: radial-gradient(closest-side, #eec97a 0%, #b8863a00 72%);
  opacity: .42;
  animation: terrazza-deriva-a 34s ease-in-out infinite alternate
}

/* Acqua: il softub acceso. */
.terrazza-aurora i:nth-child(2) {
  top: 44%;
  right: -16%;
  width: 64vw;
  height: 52vh;
  max-width: 820px;
  max-height: 620px;
  background: radial-gradient(closest-side, #6fd0d8 0%, #2b7f9100 74%);
  opacity: .3;
  animation: terrazza-deriva-b 42s ease-in-out infinite alternate
}

/* Blu della sera, in basso, per chiudere la pagina. */
.terrazza-aurora i:nth-child(3) {
  top: 78%;
  left: 14%;
  width: 72vw;
  height: 56vh;
  max-width: 960px;
  max-height: 680px;
  background: radial-gradient(closest-side, #4a6ea0 0%, #10203a00 74%);
  opacity: .4;
  animation: terrazza-deriva-c 38s ease-in-out infinite alternate
}

@keyframes terrazza-deriva-a {
  from { transform: translate3d(0, 0, 0) scale(1) }
  to   { transform: translate3d(9%, 6%, 0) scale(1.12) }
}

@keyframes terrazza-deriva-b {
  from { transform: translate3d(0, 0, 0) scale(1.08) }
  to   { transform: translate3d(-8%, -7%, 0) scale(1) }
}

@keyframes terrazza-deriva-c {
  from { transform: translate3d(0, 0, 0) scale(1) }
  to   { transform: translate3d(-6%, -9%, 0) scale(1.14) }
}

/* --- Testata --- */

.terrazza-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  width: min(1320px, 100% - 48px);
  min-height: min(620px, 78vh);
  margin: 24px auto 0;
  display: flex;
  align-items: flex-end
}

.terrazza-hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.terrazza-hero-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #060b10e6 0%, #060b10ad 42%, #060b1033 78%),
    linear-gradient(180deg, #060b1052 0%, #060b1000 40%, #060b10c9 100%)
}

.terrazza-hero-copy {
  position: relative;
  z-index: 1;
  width: min(1180px, 100% - 80px);
  margin: 0 auto;
  padding: 64px 0 56px
}

.terrazza-hero-copy > span {
  color: var(--color-gold-light, #eec97a);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px #060b10f2;
  font-size: .86rem;
  font-weight: 800
}

.terrazza-page .terrazza-hero h1 {
  margin: 16px 0 22px;
  letter-spacing: -.03em;
  line-height: 1;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  text-shadow: 0 4px 34px #060b10cc
}

.terrazza-hero-copy p {
  max-width: 58ch;
  margin: 0;
  color: var(--chiaro);
  font-size: 1.1rem;
  line-height: 1.75;
  text-shadow: 0 2px 18px #060b10e6
}

/* --- Introduzione --- */

.terrazza-intro {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: end;
  gap: 64px;
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
  padding: 88px 0 12px
}

.terrazza-intro > div > span,
.terrazza-split-copy > span,
.terrazza-sera-copy > span,
.terrazza-prezzo-cifra > span {
  color: var(--color-gold-light, #eec97a);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 800
}

.terrazza-page h2 {
  margin: 12px 0 0;
  letter-spacing: -.03em;
  line-height: 1.12;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem)
}

.terrazza-intro > p {
  margin: 0;
  color: var(--tenue);
  font-size: 1.05rem;
  line-height: 1.8
}

/* --- Le sei schede del servizio --- */

.terrazza-schede {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
  padding: 56px 0 0
}

.terrazza-schede article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 28px 32px;
  border-radius: 20px;
  border: 1px solid #fffdf824;
  background: linear-gradient(160deg, #fffdf814 0%, #fffdf807 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .35s ease, border-color .35s ease, background .35s ease
}

.terrazza-schede article:hover {
  transform: translateY(-4px);
  border-color: #eec97a80;
  background: linear-gradient(160deg, #fffdf81f 0%, #fffdf80a 100%)
}

.terrazza-schede article > span {
  color: var(--color-gold-light, #eec97a);
  font-family: "Libre Baskerville", Baskerville, "Times New Roman", serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em
}

.terrazza-schede article > strong {
  color: var(--chiaro);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.25
}

.terrazza-schede article > p {
  margin: 0;
  color: var(--tenue);
  font-size: .98rem;
  line-height: 1.7
}

/* --- L'acqua: testo e fotografia --- */

.terrazza-split {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 56px;
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
  padding: 92px 0 0
}

.terrazza-split-copy p {
  margin: 18px 0 0;
  color: var(--tenue);
  font-size: 1.02rem;
  line-height: 1.8
}

.terrazza-split > img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  display: block;
  box-shadow: 0 26px 70px #0006
}

/* --- La sera: le tre tappe --- */

.terrazza-sera {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: start;
  gap: 56px;
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
  padding: 92px 0 0
}

.terrazza-sera-copy p {
  margin: 18px 0 0;
  color: var(--tenue);
  font-size: 1.02rem;
  line-height: 1.8
}

.terrazza-sera-tappe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px
}

.terrazza-sera-tappe li {
  position: relative;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
  padding: 22px 26px 24px;
  border-radius: 18px;
  border: 1px solid #fffdf81f;
  background: #fffdf80d
}

.terrazza-sera-tappe b {
  color: var(--color-gold-light, #eec97a);
  font-family: "Libre Baskerville", Baskerville, "Times New Roman", serif;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.2
}

.terrazza-sera-tappe li > div {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.terrazza-sera-tappe strong {
  color: var(--chiaro);
  font-size: 1.08rem;
  font-weight: 700
}

.terrazza-sera-tappe p {
  margin: 0;
  color: var(--tenue);
  font-size: .96rem;
  line-height: 1.7
}

/* --- Prezzo e prenotazione --- */

.terrazza-prezzo {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  width: min(1180px, 100% - 48px);
  margin: 92px auto 0;
  padding: 46px 48px 50px;
  border-radius: 26px;
  border: 1px solid #eec97a3d;
  background: linear-gradient(140deg, #eec97a1a 0%, #fffdf805 60%)
}

.terrazza-prezzo-cifra {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.terrazza-prezzo-cifra strong {
  color: var(--color-gold-light, #eec97a);
  font-family: "Libre Baskerville", Baskerville, "Times New Roman", serif;
  font-size: clamp(2.8rem, 5vw, 3.9rem);
  font-weight: 700;
  line-height: 1
}

.terrazza-prezzo-cifra em {
  color: var(--tenue);
  font-style: normal;
  font-size: .95rem
}

.terrazza-prezzo-copy p {
  margin: 14px 0 0;
  color: var(--tenue);
  font-size: 1.02rem;
  line-height: 1.8
}

.terrazza-prezzo-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px
}

.terrazza-azione {
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  padding: 14px 26px;
  background: var(--color-gold-light, #eec97a);
  color: #101a24;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s
}

.terrazza-azione:hover,
.terrazza-azione:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #0006
}

.terrazza-azione-chiara {
  background: #0000;
  border: 1px solid #fffdf85c;
  color: var(--chiaro);
  letter-spacing: .03em;
  text-transform: none;
  font-size: .95rem
}

.terrazza-azione-chiara:hover,
.terrazza-azione-chiara:focus-visible {
  border-color: var(--color-gold-light, #eec97a);
  color: var(--color-gold-light, #eec97a)
}

.terrazza-nota {
  width: min(1180px, 100% - 48px);
  margin: 40px auto 0;
  color: #fffdf880;
  font-size: .88rem;
  line-height: 1.7;
  text-align: center
}

/* --- Schermi stretti --- */

@media (max-width: 980px) {
  .terrazza-intro,
  .terrazza-split,
  .terrazza-sera,
  .terrazza-prezzo {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .terrazza-schede {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .terrazza-split > img {
    order: -1
  }

  .terrazza-prezzo {
    padding: 34px 28px 38px
  }
}

@media (max-width: 640px) {
  .terrazza-hero {
    width: min(1320px, 100% - 28px);
    min-height: 500px;
    border-radius: 22px
  }

  .terrazza-hero-copy {
    width: min(1180px, 100% - 44px);
    padding: 46px 0 40px
  }

  .terrazza-intro,
  .terrazza-schede,
  .terrazza-split,
  .terrazza-sera,
  .terrazza-prezzo,
  .terrazza-nota {
    width: min(1180px, 100% - 36px)
  }

  .terrazza-intro,
  .terrazza-split,
  .terrazza-sera {
    padding-top: 62px
  }

  .terrazza-schede {
    grid-template-columns: 1fr
  }

  .terrazza-sera-tappe li {
    grid-template-columns: 1fr;
    gap: 4px
  }

  .terrazza-aurora i {
    filter: blur(70px)
  }
}

/* Con "riduci animazioni" il fondo resta dov'e: stessi colori, nessun
   movimento e nessuna reazione al puntatore. */
@media (prefers-reduced-motion: reduce) {
  .terrazza-aurora {
    transform: none;
    transition: none
  }

  .terrazza-aurora i {
    animation: none
  }

  .terrazza-schede article {
    transition: none
  }
}

/* Adattamento al telefono: il filmato di apertura era alto 500px e le
   schede della terrazza superavano una schermata e mezza. */
@media (max-width: 680px) {
  .terrazza-page {
    padding-bottom: 44px
  }

  .terrazza-hero {
    min-height: 380px;
    height: 380px
  }

  .terrazza-hero-film {
    height: 380px
  }

  .terrazza-hero-copy h1 {
    font-size: 2.3rem
  }

  .terrazza-intro,
  .terrazza-schede,
  .terrazza-split,
  .terrazza-sera,
  .terrazza-prezzo,
  .terrazza-nota {
    padding-top: 28px;
    padding-bottom: 28px
  }

  .terrazza-schede {
    gap: 14px
  }

  .terrazza-split > img {
    height: 200px;
    max-height: 200px
  }

  .terrazza-split-copy {
    padding: 26px 20px
  }

  .terrazza-sera-tappe {
    gap: 14px
  }

  .terrazza-split-copy h2,
  .terrazza-sera-copy h2,
  .terrazza-prezzo-copy h2 {
    font-size: 25px
  }
}

/* Stessa cosa per il prezzo della terrazza. */
@media (max-width: 680px) {
  .terrazza-prezzo-cifra strong {
    font-size: 32px;
    line-height: 1.1
  }

  .terrazza-hero-copy h1 {
    font-size: clamp(26px, 7.4vw, 32px)
  }
}

@media (max-width: 680px) {
  .terrazza-page .terrazza-hero h1 {
    font-size: clamp(26px, 7.4vw, 32px);
    line-height: 1.12
  }

  .terrazza-page h2 {
    font-size: clamp(22px, 6.2vw, 26px);
    line-height: 1.18
  }
}