/*
 * Atmosfera: lo strato estetico del sito.
 *
 * Viene caricato dopo globals.css, dopo il CSS della pagina e dopo brand.css,
 * quindi qui si aggiungono soltanto luce, profondita e movimento: la griglia,
 * le dimensioni e i colori del marchio restano quelli decisi prima.
 *
 * Regola di prestazione seguita ovunque: si animano solo "transform" e
 * "opacity", le due proprieta che il browser affida alla scheda grafica.
 * Nessuna animazione tocca larghezze, margini, colori di sfondo o filtri
 * continui, che costringerebbero il browser a ridisegnare a ogni fotogramma.
 */

:root {
  /* Il blu profondo del mare all'imbrunire: e la base delle fasce scure. */
  --ink: #101a24;
  --ink-soft: #1a2733;
  --ink-veil: #101a24e6;

  /* Vetro: fondo semitrasparente delle barre e delle schede sospese. */
  --glass: #ffffffa8;
  --glass-scuro: #101a2459;
  --hairline: #1111111a;
  --hairline-chiara: #ffffff2e;

  /* Ombre morbide e larghe, mai nere piene. */
  --ombra-1: 0 2px 8px #101a2410;
  --ombra-2: 0 12px 32px -12px #101a2433;
  --ombra-3: 0 28px 70px -24px #101a2459;
  --ombra-oro: 0 18px 50px -20px #8a620959;

  /* Curve di movimento: una decisa in uscita, una morbida per gli hover. */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  /* Durata della comparsa. E' la stessa dell'apertura della home
     (.58s): scorrendo in fretta il blocco e gia fermo quando lo
     sguardo ci arriva, e nessuna sezione resta a meta strada. */
  --durata: .55s;
}

/* Gli aloni e le sfumature decorative escono dai bordi per costruzione:
   qui si taglia l'eccesso orizzontale senza rompere le testate appiccicose,
   cosa che "overflow: hidden" sul body farebbe. */
.hotel-home,
.services-page,
main {
  overflow-x: clip
}

/* ==================================================================
 * 1. Comparsa allo scroll
 *
 * Il JavaScript aggiunge [data-rivela] agli elementi e vi mette
 * .e-visibile quando entrano nello schermo. Senza JavaScript, o con le
 * animazioni ridotte, tutto resta visibile: l'effetto e un di piu, mai
 * una condizione per leggere la pagina.
 * ================================================================== */

[data-rivela] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--durata) var(--ease-out),
    transform var(--durata) var(--ease-out);
  transition-delay: var(--ritardo, 0ms)
}

/* Chi arriva di lato o da sotto viaggia piu a lungo, quindi ci mette
   un poco di piu e frena alla fine: e il movimento che si vede nei
   riferimenti, non uno scatto. */
[data-rivela="sinistra"],
[data-rivela="destra"],
[data-rivela="sotto"] {
  transition:
    opacity .5s var(--ease-out),
    transform .62s cubic-bezier(.16, .84, .28, 1);
  transition-delay: var(--ritardo, 0ms)
}

[data-rivela="scala"] {
  transform: scale(1.04)
}

/* Le entrate laterali: il testo arriva da fuori quadro, un blocco da
   sinistra e il successivo da destra. Lo spostamento e abbastanza largo
   da vedersi mentre si scorre, ma resta dentro la pagina: i contenitori
   hanno "overflow-x: clip", quindi non compare mai una barra
   orizzontale. */
[data-rivela="sinistra"] {
  transform: translate3d(-40px, 0, 0)
}

[data-rivela="destra"] {
  transform: translate3d(40px, 0, 0)
}

/* Entrata dal basso, piu lunga della comparsa normale: la usa il
   riquadro in cima al triangolo dei tre banner. */
[data-rivela="sotto"] {
  transform: translate3d(0, 54px, 0)
}

[data-rivela].e-visibile {
  opacity: 1;
  transform: none
}

/* Le cinque tessere dei punti di forza: partono tutte sovrapposte al
   centro della fila, come un mazzo di carte, e da li si distribuiscono
   fino al proprio posto. Lo spostamento di ognuna e --cds-dx, che il
   JavaScript misura sulla griglia vera: cosi il mazzo resta al centro a
   qualunque larghezza di finestra e su qualunque numero di colonne.

   Le tessere compaiono in fretta (mezzo secondo) e si distribuiscono
   piano (un secondo abbondante): si vede prima il mazzo, poi il
   ventaglio, come nel riferimento. */
[data-rivela="ventaglio"] {
  position: relative;
  opacity: 0;
  transform: translate3d(var(--cds-dx, 0px), 22px, 0) scale(.94);
  transition:
    opacity .32s var(--ease-out),
    transform .6s cubic-bezier(.18, .82, .25, 1);
  transition-delay: var(--ritardo, 0ms)
}

[data-rivela="ventaglio"].e-visibile {
  opacity: 1;
  transform: none
}

/* Finche sono sovrapposte le tessere centrali stanno sopra: il mazzo si
   legge come un mazzo e non come cinque rettangoli incollati. */
[data-rivela="ventaglio"]:nth-child(1),
[data-rivela="ventaglio"]:nth-child(5) {
  z-index: 1
}

[data-rivela="ventaglio"]:nth-child(2),
[data-rivela="ventaglio"]:nth-child(4) {
  z-index: 2
}

[data-rivela="ventaglio"]:nth-child(3) {
  z-index: 3
}

/* --- Apertura della pagina: animazione, non transizione ---
 *
 * Quello che si vede senza scorrere non puo usare le transizioni. Una
 * transizione ha bisogno di due stati disegnati, uno di partenza e uno
 * di arrivo; ma il JavaScript prepara e fa partire questi elementi
 * prima che il browser abbia mostrato la pagina nuova, quindi il primo
 * fotogramma che l'occhio vede e gia quello di arrivo: la sezione
 * compare intera, ferma. Era il motivo per cui l'apertura si vedeva a
 * volte si e a volte no — dipendeva da quando arrivava il primo
 * disegno, non dal codice.
 *
 * Un'animazione a fotogrammi chiave non ha questo problema: parte dal
 * primo fotogramma in cui l'elemento viene davvero disegnato, quindi
 * l'apertura si vede sempre e sempre uguale. Lo scorrimento continua a
 * usare le transizioni, dove i due stati ci sono per forza. */
[data-rivela].e-apre {
  animation: cds-apre-su var(--durata) var(--ease-out) var(--ritardo, 0ms) both
}

[data-rivela="sinistra"].e-apre {
  animation: cds-apre-sinistra .62s cubic-bezier(.16, .84, .28, 1) var(--ritardo, 0ms) both
}

[data-rivela="destra"].e-apre {
  animation: cds-apre-destra .62s cubic-bezier(.16, .84, .28, 1) var(--ritardo, 0ms) both
}

[data-rivela="sotto"].e-apre {
  animation: cds-apre-sotto .62s cubic-bezier(.16, .84, .28, 1) var(--ritardo, 0ms) both
}

[data-rivela="scala"].e-apre {
  animation: cds-apre-scala var(--durata) var(--ease-out) var(--ritardo, 0ms) both
}

[data-rivela="foto"].e-apre {
  animation: cds-apre-foto .7s var(--ease-out) var(--ritardo, 0ms) both
}

@keyframes cds-apre-su {
  from { opacity: 0; transform: translate3d(0, 26px, 0) }
  to { opacity: 1; transform: none }
}

@keyframes cds-apre-sinistra {
  from { opacity: 0; transform: translate3d(-40px, 0, 0) }
  to { opacity: 1; transform: none }
}

@keyframes cds-apre-destra {
  from { opacity: 0; transform: translate3d(40px, 0, 0) }
  to { opacity: 1; transform: none }
}

@keyframes cds-apre-sotto {
  from { opacity: 0; transform: translate3d(0, 54px, 0) }
  to { opacity: 1; transform: none }
}

@keyframes cds-apre-scala {
  from { opacity: 0; transform: scale(1.04) }
  to { opacity: 1; transform: none }
}

@keyframes cds-apre-foto {
  from { opacity: 0; transform: scale(1.03) }
  to { opacity: 1; transform: none }
}

/* Le fotografie grandi entrano con una carrellata appena percettibile. */
[data-rivela="foto"] {
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity .5s var(--ease-out),
    transform .7s var(--ease-out);
  transition-delay: var(--ritardo, 0ms)
}

[data-rivela="foto"].e-visibile {
  opacity: 1;
  transform: none
}

/* ==================================================================
 * 2. Schermata di apertura con la rosa dei venti
 * ================================================================== */

.cds-intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 100% at 50% 40%, var(--ink-soft) 0%, var(--ink) 62%, #070d13 100%);
  opacity: 1;
  transition: opacity .8s var(--ease-soft), visibility .8s
}

.cds-intro[hidden] {
  display: none
}

/* L'alone dorato che pulsa dietro la stella. */
.cds-intro-alone {
  position: absolute;
  width: min(78vmin, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #eec97a38 0%, #8a620914 45%, #0000 70%);
  animation: cds-alone 3.4s var(--ease-soft) infinite;
  pointer-events: none
}

.cds-intro-corpo {
  display: grid;
  justify-items: center;
  gap: 4px;
  position: relative
}

.cds-intro-bussola {
  width: min(38vmin, 210px);
  height: auto;
  animation: cds-bussola-gira 2.15s var(--ease-out) forwards
}

.cds-intro-nome {
  margin: 26px 0 0;
  font-family: "Libre Baskerville", Baskerville, "Times New Roman", serif;
  font-size: clamp(1.25rem, 3.4vw, 1.9rem);
  font-weight: 700;
  color: var(--color-gold-light);
  opacity: 0;
  animation: cds-intro-testo .9s var(--ease-out) 1.1s forwards
}

.cds-intro-claim {
  margin: 8px 0 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #d8c8a4c4;
  opacity: 0;
  animation: cds-intro-testo .9s var(--ease-out) 1.35s forwards
}

/* Uscita: la schermata si alza e svanisce, la home e gia pronta sotto. */
.cds-intro.e-chiusa {
  opacity: 0;
  visibility: hidden
}

.cds-intro.e-chiusa .cds-intro-corpo {
  transform: translate3d(0, -22px, 0) scale(.94);
  transition: transform .8s var(--ease-out)
}

@keyframes cds-bussola-gira {
  0% {
    transform: rotate(-220deg) scale(.72);
    opacity: 0
  }

  35% {
    opacity: 1
  }

  100% {
    transform: rotate(0) scale(1);
    opacity: 1
  }
}

@keyframes cds-alone {
  0%, 100% {
    transform: scale(.92);
    opacity: .75
  }

  50% {
    transform: scale(1.06);
    opacity: 1
  }
}

@keyframes cds-intro-testo {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* Mentre l'apertura e sullo schermo la pagina sotto non si muove. */
body.cds-intro-attiva {
  overflow: hidden
}

/* ==================================================================
 * 3. La rosa dei venti come elemento grafico
 * ================================================================== */

.cds-bussola {
  display: block;
  overflow: visible
}

.cds-bussola-anello {
  fill: none;
  stroke: var(--color-gold-light);
  stroke-width: 1.5;
  opacity: .5
}

.cds-bussola-anello-interno {
  stroke-dasharray: 3 9;
  opacity: .35
}

.cds-bussola-medaglione {
  fill: #2f7d6b;
  stroke: var(--color-gold-light);
  stroke-width: 2
}

.cds-bussola-monogramma {
  font-family: "Libre Baskerville", Baskerville, "Times New Roman", serif;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: .02em;
  fill: #fff
}

/* ==================================================================
 * 4. Testata: vetro smerigliato quando la pagina scorre
 * ================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow .4s var(--ease-soft)
}

.site-header .nav-wrap {
  transition: background-color .4s var(--ease-soft)
}

body.e-scorsa .site-header {
  box-shadow: var(--ombra-2)
}

/* La testata resta appiccicata in cima mentre la pagina scorre sotto.
   Con lo sfocato del fondo il browser doveva rifare la sfocatura di
   quella striscia a ogni fotogramma dello scorrimento, per tutta la
   pagina: e' uno degli effetti che costano di piu. Il fondo quasi pieno
   si legge allo stesso modo e non costa niente. */
body.e-scorsa .site-header .nav-wrap {
  background: #fffffff2
}

/* Sottolineatura dorata che nasce dal centro sotto le voci del menu. */
.site-header nav>a:not(.button),
.hotel-topbar .hotel-nav>a {
  position: relative;
  transition: color .3s var(--ease-soft)
}

.site-header nav>a:not(.button)::after,
.hotel-topbar .hotel-nav>a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -6px;
  height: 1.5px;
  background: linear-gradient(90deg, #0000, var(--color-gold), #0000);
  transition: left .35s var(--ease-out), right .35s var(--ease-out)
}

.site-header nav>a:not(.button):hover::after,
.site-header nav>a:not(.button):focus-visible::after,
.hotel-topbar .hotel-nav>a:hover::after,
.hotel-topbar .hotel-nav>a:focus-visible::after {
  left: 0;
  right: 0
}

/* La barra scura in alto guadagna una sfumatura invece del nero pieno. */
.utility {
  background: linear-gradient(100deg, var(--ink) 0%, var(--ink-soft) 55%, var(--ink) 100%)
}

/* ==================================================================
 * 4b. Apertura delle pagine interne
 *
 * La home ha la sua regia, scritta in home-hero.css: la barra scende,
 * il titolo sale una riga alla volta, per ultima entra la banda di
 * prenotazione. Le pagine che si aprono dal menu non avevano niente:
 * testata, fotografia di apertura e prima sezione comparivano nello
 * stesso fotogramma, e la pagina si leggeva come un blocco unico che
 * sbatte in faccia.
 *
 * La testata non si anima piu al caricamento: barra dei contatti,
 * logo e voci del menu sono gia al loro posto quando la pagina
 * compare, cosi passando da una sezione all'altra il menu resta
 * fermo. Si muove solo la fotografia di apertura, che si allarga
 * appena e schiarisce: la pagina si apre invece di apparire.
 *
 * Le scritte dentro la fotografia restano in carico alla comparsa allo
 * scroll (punto 1), che le fa salire una riga alla volta.
 * ================================================================== */

/* Sotto i 900px le voci non stanno piu nella barra: vivono nel
   pannello a scomparsa, che parte con "display: none". L'animazione
   quindi non parte al caricamento ma ogni volta che il pannello si
   apre, ed e giusto cosi: le voci si compongono dall'alto invece di
   sbattere fuori tutte insieme. I ritardi pero vanno stretti, perche
   qui l'utente ha appena toccato il pulsante e sta aspettando: mezzo
   secondo di attesa per l'ultima voce sarebbe lentezza, non eleganza. */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .site-header .nav-wrap nav>a {
    animation: cds-entra-riga .34s cubic-bezier(.22, .61, .36, 1) both
  }

  .site-header .nav-wrap nav>a:nth-child(1) { animation-delay: 0s }
  .site-header .nav-wrap nav>a:nth-child(2) { animation-delay: .04s }
  .site-header .nav-wrap nav>a:nth-child(3) { animation-delay: .08s }
  .site-header .nav-wrap nav>a:nth-child(4) { animation-delay: .12s }
  .site-header .nav-wrap nav>a:nth-child(5) { animation-delay: .16s }
  .site-header .nav-wrap nav>a:nth-child(6) { animation-delay: .20s }
  .site-header .nav-wrap nav>a:nth-child(7) { animation-delay: .24s }
  .site-header .nav-wrap nav>a:nth-child(n+8) { animation-delay: .28s }

  /* La fotografia (o il filmato) di apertura: parte appena piu grande
     e trasparente e si posa. E' il movimento piu lungo della sequenza
     perche e la superficie piu grande: se fosse veloce quanto le
     scritte sembrerebbe uno stacco di montaggio. */
  .rooms-hero>.rooms-hero-film,
  .rooms-hero>img,
  .services-hero>img,
  .restaurant-hero>img,
  .restaurant-hero>.cds-sfondo,
  .place-hero>img,
  .page-hero>img {
    animation: cds-entra-foto 1.3s cubic-bezier(.22, 1, .36, 1) both
  }

  .rooms-hero-shade,
  .services-hero-shade,
  .restaurant-hero-shade,
  .place-hero-shade {
    animation: cds-entra-velo 1s var(--ease-soft) .12s both
  }
}

@keyframes cds-entra-scende {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cds-entra-riga {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cds-entra-foto {
  from {
    opacity: 0;
    transform: scale(1.06)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes cds-entra-velo {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* ==================================================================
 * 5. Hero: profondita, luce e apertura cinematografica
 * ================================================================== */

.hotel-home .hotel-hero,
.rooms-hero,
.services-hero,
.restaurant-hero,
.page-hero {
  isolation: isolate
}

/* Sipario piu ricco: scuro in basso per il testo, trasparente in alto. */
.hotel-home .hotel-hero-shade {
  background:
    radial-gradient(90% 60% at 50% 108%, #101a24b8 0%, #0000 70%),
    linear-gradient(180deg, #101a2473 0%, #101a2426 32%, #101a2499 78%, #101a24d1 100%)
}

/* Alone caldo dietro il titolo: da la sensazione di luce del tramonto. */
.hotel-home .hotel-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: min(100%, 1400px);
  aspect-ratio: 2 / 1;
  transform: translate3d(-50%, 0, 0);
  background: radial-gradient(ellipse at center, #eec97a1f 0%, #8a620910 40%, #0000 70%);
  pointer-events: none;
  z-index: -1
}

/* La parallasse dell'hero e stata tolta: era l'unica cosa che faceva
   lavorare il browser a ogni fotogramma mentre la pagina scorre, e su un
   portatile si sentiva. Adesso, mentre si scorre, non gira niente. */

/* L'apertura della prima schermata della home sta tutta in
   home-hero.css, caricato dopo questo foglio: qui restano solo i
   colori e le ombre, cosi la sequenza ha una sola regia. */
.hotel-home .hotel-hero-content h1 {
  text-shadow: 0 2px 30px #101a2459
}

@keyframes cds-sali {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* Invito allo scroll: una linea dorata che scende in continuazione. */
.cds-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 88px;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateX(-50%);
  color: #ffffffa6;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  pointer-events: none;
  animation: cds-sali 1s var(--ease-out) .8s both
}

.cds-scroll-hint i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, #eec97a00, var(--color-gold-light));
  transform-origin: top;
  animation: cds-filo 2.1s var(--ease-soft) infinite
}

@keyframes cds-filo {
  0% {
    transform: scaleY(0);
    opacity: 0
  }

  40% {
    opacity: 1
  }

  100% {
    transform: scaleY(1);
    opacity: 0
  }
}

/* ==================================================================
 * 6. Pulsanti: micro interazioni
 * ================================================================== */

.hotel-home .hotel-primary,
.hotel-home .hotel-secondary,
.hotel-home .hotel-outline,
.hotel-home .hotel-availability,
.hotel-home .hotel-hero-phone,
.button,
.services-hero a,
.services-note>a,
.services-spa-copy>a,
.hotel-ferragosto-actions button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out),
    background-color .35s var(--ease-soft),
    color .35s var(--ease-soft),
    border-color .35s var(--ease-soft)
}

/* Riflesso che attraversa il pulsante al passaggio del mouse. */
.hotel-home .hotel-primary::before,
.hotel-home .hotel-availability::before,
.button::before,
.services-hero a::before,
.services-note>a::before,
.services-spa-copy>a::before,
.hotel-ferragosto-actions .hotel-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, #0000 30%, #ffffff40 48%, #0000 66%);
  transform: translate3d(-120%, 0, 0);
  transition: transform .75s var(--ease-out)
}

.hotel-home .hotel-primary:hover::before,
.hotel-home .hotel-availability:hover::before,
.button:hover::before,
.services-hero a:hover::before,
.services-note>a:hover::before,
.services-spa-copy>a:hover::before,
.hotel-ferragosto-actions .hotel-primary:hover::before {
  transform: translate3d(120%, 0, 0)
}

.hotel-home .hotel-primary:hover,
.hotel-home .hotel-availability:hover,
.button:hover,
.services-hero a:hover,
.services-note>a:hover,
.services-spa-copy>a:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: var(--ombra-2)
}

.hotel-home .hotel-outline:hover,
.hotel-home .hotel-secondary:hover,
.hotel-home .hotel-hero-phone:hover,
.hotel-ferragosto-outline:hover {
  transform: translate3d(0, -2px, 0);
  border-color: var(--color-gold);
  box-shadow: var(--ombra-oro)
}

.hotel-home .hotel-hero-phone:hover {
  border-color: var(--color-gold-light)
}

/* Alla pressione il pulsante torna giu: da la sensazione del tasto. */
.hotel-home .hotel-primary:active,
.hotel-home .hotel-secondary:active,
.hotel-home .hotel-outline:active,
.hotel-home .hotel-availability:active,
.button:active,
.services-note>a:active,
.services-spa-copy>a:active {
  transform: translate3d(0, 1px, 0) scale(.985)
}

/* Il contorno di messa a fuoco resta sempre visibile per chi usa la tastiera. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 6px
}

/* ==================================================================
 * 7. Barra di prenotazione: vetro sospeso sopra l'hero
 * ================================================================== */

.hotel-home .hotel-booking-bar {
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--ombra-3);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out)
}

/* La barra sta dentro una fascia chiara a tinta piatta, non piu sopra la
   fotografia: dietro di lei non c'e niente da sfocare, e lo sfocato del
   fondo ("backdrop-filter") costava un ridisegno a ogni fotogramma
   mentre la prima schermata scorreva via. Resta il bianco di prima. */
.hotel-home .hotel-booking-bar {
  background: #fffffff2
}

.hotel-home .hotel-booking-bar:hover {
  transform: translate3d(0, -3px, 0)
}

.hotel-home .hotel-booking-bar label {
  transition: color .3s var(--ease-soft)
}

.hotel-home .hotel-booking-bar input,
.hotel-home .hotel-booking-bar select {
  transition: border-color .3s var(--ease-soft)
}

/* ==================================================================
 * 8. Schede: rilievo e luce
 * ================================================================== */

/* Punti di forza della home. */
.hotel-home .hotel-service-card {
  box-shadow: var(--ombra-2);
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out)
}

.hotel-home .hotel-service-card:hover {
  transform: translate3d(0, -8px, 0);
  box-shadow: var(--ombra-3)
}

.hotel-home .hotel-strength-front,
.hotel-home .hotel-strength-back {
  border-radius: inherit
}

.hotel-home .hotel-strength-front svg,
.hotel-home .hotel-strength-front .hotel-beach-umbrella-icon {
  color: var(--color-on-dark)
}

.hotel-home .hotel-strength-front .hotel-beach-umbrella-icon {
  filter: drop-shadow(0 2px 10px #0b1219cc) brightness(0) invert(1)
}

.hotel-home .hotel-strength-back::after {
  border-radius: inherit;
  pointer-events: none
}

/* ------------------------------------------------------------------
 * I due riquadri delle offerte: Ferragosto e SPA 2027.
 *
 * Hanno forme diverse (le misure stanno in globals.css) e devono
 * entrare in modo diverso: uno da sinistra, l'altro da destra, con la
 * scritta che si compone una riga alla volta e una luce dorata che
 * passa una volta sola sopra la fotografia. Tutto legato a
 * [data-rivela], che il JavaScript mette solo quando le animazioni
 * sono consentite: senza JavaScript i riquadri restano leggibili.
 * ------------------------------------------------------------------ */

.hotel-home .hotel-banner .hotel-banner-copy {
  position: relative;
  z-index: 1
}

.hotel-home .hotel-banner[data-rivela] .hotel-banner-copy>* {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity .6s var(--ease-out),
    transform .7s cubic-bezier(.16, .84, .28, 1)
}

.hotel-home .hotel-banner[data-rivela].e-visibile .hotel-banner-copy>* {
  opacity: 1;
  transform: none
}

.hotel-home .hotel-banner[data-rivela].e-visibile .hotel-banner-copy>*:nth-child(1) {
  transition-delay: .18s
}

.hotel-home .hotel-banner[data-rivela].e-visibile .hotel-banner-copy>*:nth-child(2) {
  transition-delay: .3s
}

.hotel-home .hotel-banner[data-rivela].e-visibile .hotel-banner-copy>*:nth-child(3) {
  transition-delay: .42s
}

.hotel-home .hotel-banner[data-rivela].e-visibile .hotel-banner-copy>*:nth-child(4) {
  transition-delay: .54s
}

/* La luce dorata che passava sopra i riquadri e stata tolta: erano tre
   strati larghi piu del riquadro, ognuno con la sua sfumatura, che il
   browser doveva disegnare in piu proprio mentre i riquadri entravano.
   Si guadagna in fluidita e non si perde niente di leggibile. */

/* Al passaggio del mouse la fotografia respira e il testo si alza di
   un filo: il riquadro e cliccabile, deve rispondere. */
.hotel-home .hotel-banner:hover>img,
.hotel-home .hotel-banner[data-rivela].e-visibile:hover>img {
  transform: scale(1.06)
}

.hotel-home .hotel-banner:hover .hotel-banner-copy {
  transform: translate3d(0, -4px, 0)
}

.hotel-home .hotel-banner .hotel-banner-copy {
  transition: transform .5s var(--ease-out)
}

/* Schede delle offerte. */
.hotel-home .hotel-offer-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--ombra-1);
  transition:
    transform .45s var(--ease-out),
    box-shadow .45s var(--ease-out),
    border-color .45s var(--ease-soft)
}

.hotel-home .hotel-offer-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #eec97a2b 0%, #0000 55%);
  opacity: 0;
  transition: opacity .45s var(--ease-soft);
  pointer-events: none
}

.hotel-home .hotel-offer-grid article:hover {
  transform: translate3d(0, -6px, 0);
  border-color: #8a620940;
  box-shadow: var(--ombra-2)
}

.hotel-home .hotel-offer-grid article:hover::before {
  opacity: 1
}

.hotel-home .hotel-offer-grid svg {
  transition: transform .5s var(--ease-out)
}

.hotel-home .hotel-offer-grid article:hover svg {
  transform: scale(1.08) rotate(-4deg)
}

/* Schede delle camere: la fotografia si avvicina, la cornice no. */
.hotel-home .hotel-room-card {
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--ombra-1);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out)
}

.hotel-home .hotel-room-card>img {
  transition: transform .9s var(--ease-out)
}

.hotel-home .hotel-room-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--ombra-3)
}

.hotel-home .hotel-room-card:hover>img {
  transform: scale(1.06)
}

/* Flip card dei servizi: ombra e ingrandimento appena accennato. */
.service-flip-card {
  box-shadow: var(--ombra-2);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out)
}

.service-flip-card:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--ombra-3)
}

/* ==================================================================
 * 9. Sezioni a due colonne: fotografia che respira
 * ================================================================== */

.hotel-home .hotel-split,
.hotel-spa,
.services-spa {
  overflow: hidden
}

.hotel-home .hotel-split>img,
.hotel-spa>img,
.services-spa>img {
  transition: transform 1.2s var(--ease-out)
}

.hotel-home .hotel-split:hover>img,
.hotel-spa:hover>img,
.services-spa:hover>img {
  transform: scale(1.04)
}

.hotel-home .hotel-split-copy {
  position: relative;
  isolation: isolate
}

.hotel-home .hotel-split-copy::after {
  content: "";
  background: linear-gradient(90deg,#0000 0%,var(--cds-cucitura,#faf7f1) 100%);
  width: 90px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  pointer-events: none;
  z-index: -1
}

.hotel-home .hotel-family>img {
  order: -1
}

.hotel-home .hotel-family .hotel-split-copy::after {
  background: linear-gradient(270deg,#0000 0%,var(--cds-cucitura,#e2ddd0) 100%);
  right: auto;
  left: -1px
}

/* I due pannelli di testo delle fasce con fotografia sono colorati in
   home-hero.css, insieme agli altri aloni della home (punto 4b): il
   verde salvia e il tortora pieni che stavano qui erano nati su una
   pagina gia calda e sul bianco diventavano gli unici blocchi tinti
   della pagina. Qui resta solo il colore in cui muore la cucitura
   laterale, che ognuno dei due ridichiara per conto suo. */

/* Occhielli: piccola linea dorata davanti al testo. */
.hotel-eyebrow,
.services-intro span,
.services-note span,
.services-spa-copy>span,
.price-intro span,
.restaurant-intro span,
.contacts-intro span,
.rooms-heading span,
.story-intro span,
.gallery-intro span {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.hotel-eyebrow::before,
.services-intro span::before,
.services-note span::before,
.services-spa-copy>span::before,
.price-intro span::before,
.restaurant-intro span::before,
.contacts-intro span::before,
.rooms-heading span::before,
.story-intro span::before,
.gallery-intro span::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--color-gold), #8a620900);
  flex: none
}

/* ==================================================================
 * 10. Ferragosto: la finestra piu scenografica del sito
 * ================================================================== */

/* Le fotografie marcate non si muovono piu dentro la cornice: restano
   ferme, ingrandite quel tanto che riempie il riquadro. */
[data-cds-parallasse] {
  transform: none
}

.hotel-ferragosto-shade {
  background:
    radial-gradient(90% 120% at 8% 50%, #101a24f0 0%, #101a24b8 45%, #101a2459 100%),
    linear-gradient(15deg, #6f4e0559 0%, #0000 60%)
}

/* Scintille dorate: due aloni che respirano piano, disegnati dalla GPU. */
.hotel-ferragosto::before,
.hotel-ferragosto::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #eec97a4d 0%, #eec97a12 40%, #0000 70%);
  animation: cds-respiro 7s var(--ease-soft) infinite
}

.hotel-ferragosto::before {
  top: -18%;
  right: 6%;
  width: 42vmin;
  aspect-ratio: 1
}

.hotel-ferragosto::after {
  bottom: -26%;
  right: 26%;
  width: 30vmin;
  aspect-ratio: 1;
  animation-delay: -3.5s
}

@keyframes cds-respiro {
  0%, 100% {
    transform: scale(.9);
    opacity: .55
  }

  50% {
    transform: scale(1.12);
    opacity: 1
  }
}

.hotel-ferragosto-eyebrow {
  color: var(--color-gold-light)
}

.hotel-ferragosto h2 {
  color: var(--color-gold-light) !important;
  text-shadow: 0 2px 26px #101a2480
}

.hotel-ferragosto-actions .hotel-primary {
  background: linear-gradient(120deg, var(--color-gold-light) 0%, #dcae57 100%);
  color: var(--ink);
  border: 0;
  box-shadow: var(--ombra-oro)
}

/* ==================================================================
 * 11. SPA 2027: luce calda e cornice preziosa
 * ================================================================== */

.hotel-spa-copy {
  position: relative;
  background:
    radial-gradient(110% 90% at 10% 0%, #ffffffa6 0%, #0000 55%),
    linear-gradient(120deg, var(--color-surface-secondary) 0%, var(--color-surface-warm-alt) 100%)
}

.hotel-spa-eyebrow,
.services-spa-copy>span {
  color: var(--color-gold-deep) !important
}

/* Cornice dorata sottile sulla scheda della pagina Servizi. */
.services-spa {
  border: 1px solid #8a620926;
  box-shadow: var(--ombra-3);
  background:
    radial-gradient(90% 70% at 100% 0%, #eec97a2b 0%, #0000 60%),
    linear-gradient(150deg, #fffdf8 0%, #f4efe7 100%)
}

.services-spa-list li {
  border-top: 1px solid #8a620926;
  transition: transform .35s var(--ease-out)
}

.services-spa-list li:hover {
  transform: translate3d(4px, 0, 0)
}

.services-spa-list strong {
  color: var(--color-gold-deep)
}

/* ==================================================================
 * 12. Fasce chiare e scure alternate
 * ================================================================== */

/* La fascia con "Dove siamo" non ha piu un fondo suo: prosegue la
   sfumatura della pagina che le sta sopra, cosi scorrendo non si vede
   nessun gradino di colore. Resta la scheda chiara al centro, che e un
   riquadro e non una fascia. */
.hotel-home .hotel-reviews-location {
  position: relative;
  background: 0 0
}

.hotel-home .hotel-location {
  border: 1px solid #8a620924;
  box-shadow: 0 24px 60px -42px #0b12198c
}

.hotel-home .hotel-final,
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden
}

.hotel-home .hotel-final::after,
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 120% at 50% 120%, #8a62092e 0%, #0000 65%);
  pointer-events: none
}

/* Filo dorato fra una fascia e l'altra.
   Disegnato come sfondo e non come pseudo elemento: diverse sezioni della
   home sono griglie, e un ::before vi entrerebbe dentro come cella,
   scompaginando le colonne. */
.hotel-home .hotel-section+.hotel-section {
  background-image: linear-gradient(90deg, #8a620900, #8a620959, #8a620900);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: min(340px, 60%) 1px
}

/* ==================================================================
 * 13. Pagine interne: testate e contenuti
 * ================================================================== */

.rooms-hero>img,
.services-hero>img,
.restaurant-hero>img,
.page-hero>img {
  transition: transform 1.4s var(--ease-out)
}

.services-hero-shade,
.rooms-hero-shade,
.restaurant-hero-shade {
  background:
    linear-gradient(90deg, #0b1219f2 0%, #0b1219d9 34%, #0b121980 62%, #0b12193d 100%),
    linear-gradient(180deg, #0b121966 0%, #0b12194d 45%, #0b1219b8 100%)
}

/* Col filmato in onda il velo si scurisce ancora un poco: le immagini in
   movimento distraggono piu di una fotografia ferma. */
.rooms-hero-film.e-in-onda~.rooms-hero-shade {
  background:
    linear-gradient(90deg, #0b1219f2 0%, #0b1219cc 32%, #0b12196b 58%, #0b12192b 100%),
    linear-gradient(180deg, #0b12193d 0%, #0b12192b 45%, #0b12198f 100%)
}

/* Il blocco di scritte dentro la fotografia non sale piu tutto
   insieme: erano due movimenti sovrapposti, il contenitore che saliva
   come un pezzo unico e le righe dentro che salivano una per volta, e
   il primo copriva il secondo. Adesso comanda solo la comparsa allo
   scroll (punto 1), che le fa entrare occhiello, titolo, testo e
   pulsante in quest'ordine. */
.services-hero-copy,
.rooms-hero-copy,
.restaurant-hero-copy,
.place-hero-copy {
  animation: none
}

/* Tabella del listino: righe che si accendono al passaggio. */
.price-table-row {
  transition: background-color .3s var(--ease-soft), transform .3s var(--ease-out)
}

.price-table-row:hover {
  background: #eec97a1f;
  transform: translate3d(2px, 0, 0)
}

/* Gallery: griglia con zoom morbido e velo dorato. */
.gallery-grid figure,
.gallery-item {
  overflow: hidden;
  position: relative;
  box-shadow: var(--ombra-1);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out)
}

.gallery-grid figure img,
.gallery-item img {
  transition: transform 1s var(--ease-out)
}

.gallery-grid figure:hover,
.gallery-item:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: var(--ombra-3)
}

.gallery-grid figure:hover img,
.gallery-item:hover img {
  transform: scale(1.07)
}

/* Schede dei contatti. */
.contact-info-card {
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  box-shadow: var(--ombra-1)
}

.contact-info-card:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: var(--ombra-2)
}

/* Orari dei pasti: numeri che si sollevano. */
.restaurant-hours-grid>div {
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-soft);
  box-shadow: var(--ombra-1)
}

.restaurant-hours-grid>div:hover {
  transform: translate3d(0, -5px, 0);
  border-color: #8a620940;
  box-shadow: var(--ombra-2)
}

/* ==================================================================
 * 14. Barre di contatto e piede
 * ================================================================== */

/* Anche qui niente sfocato del fondo: e una barra fissa in fondo allo
   schermo, quindi il browser dovrebbe rifare la sfocatura per tutto il
   tempo in cui la pagina scorre sotto di lei. Sul telefono e la
   differenza fra uno scorrimento fluido e uno a scatti. */
.site-mobile-actions {
  background: #fffffff5
}

.site-mobile-actions a,
.hotel-home .hotel-mobile-actions a,
.hotel-home .hotel-mobile-actions button {
  transition: transform .3s var(--ease-out), background-color .3s var(--ease-soft)
}

.site-mobile-actions a:active,
.hotel-home .hotel-mobile-actions a:active,
.hotel-home .hotel-mobile-actions button:active {
  transform: scale(.94)
}

footer {
  position: relative
}

.hotel-home .hotel-footer,
footer:not(.hotel-footer) {
  background-image: linear-gradient(180deg, #0000 0%, #8a620908 100%)
}

.footer-grid a {
  position: relative;
  transition: color .3s var(--ease-soft)
}

.footer-grid a:hover {
  color: var(--color-gold)
}

/* ==================================================================
 * 15. Rispetto delle preferenze di sistema
 *
 * Chi ha chiesto meno animazioni vede il sito completo e fermo: niente
 * comparse, niente parallasse, niente aloni che respirano.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-rivela],
  [data-rivela="foto"],
  [data-rivela="ventaglio"],
  [data-rivela="sinistra"],
  [data-rivela="destra"],
  [data-rivela="sotto"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important
  }

  .cds-intro {
    display: none !important
  }

  .cds-intro-alone,
  .cds-intro-bussola,
  .cds-scroll-hint i,
  .hotel-home .hotel-banner::after,
  .hotel-ferragosto::before,
  .hotel-ferragosto::after {
    animation: none !important
  }

  .hotel-home .hotel-hero-content h1,
  .hotel-home .hotel-hero-content>p,
  .hotel-home .hotel-hero-actions,
  .services-hero-copy,
  .rooms-hero-copy,
  .restaurant-hero-copy,
  .cds-scroll-hint {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important
  }

  .hotel-home .hotel-hero-content,
  [data-cds-parallasse] {
    transform: none !important
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important
  }
}

/* ==================================================================
 * 16. Adattamenti per schermi piccoli
 * ================================================================== */

@media (max-width: 1000px), (max-height: 760px) {
  .cds-scroll-hint {
    display: none
  }
}

@media (max-width: 1000px) {

  /* Sul telefono niente parallasse: si guadagna fluidita nello scroll. */
  .hotel-home .hotel-hero-content,
  .hotel-ferragosto>img {
    transform: none !important
  }

  .hotel-home .hotel-section+.hotel-section::before {
    margin-bottom: 30px
  }
}

@media (max-width: 680px) {
  .cds-intro-bussola {
    width: 46vmin
  }

  /* Le ombre larghe costano care sui telefoni: qui restano piu contenute. */
  :root {
    --ombra-3: 0 16px 40px -18px #101a2459
  }
}

/* Sui dispositivi senza mouse gli effetti hover non servono. */
@media (hover: none) {
  .hotel-home .hotel-service-card:hover,
  .hotel-home .hotel-offer-grid article:hover,
  .hotel-home .hotel-room-card:hover,
  .service-flip-card:hover,
  .gallery-grid figure:hover,
  .gallery-item:hover,
  .contact-info-card:hover,
  .restaurant-hours-grid>div:hover {
    transform: none
  }

  .hotel-home .hotel-split:hover>img,
  .hotel-spa:hover>img,
  .services-spa:hover>img,
  .hotel-home .hotel-room-card:hover>img {
    transform: none
  }
}

/* Le facce delle carte dei punti di forza: una sfumatura leggera al posto
   del colore piatto, cosi anche una tinta sola ha profondita. */
.hotel-home .hotel-strength-front {
  background-image: linear-gradient(160deg, #ffffff5c 0%, #0000 55%);
  border-color: #1111111a
}

.hotel-home .hotel-service-card:focus-visible {
  outline: 3px solid var(--color-gold-light,#eec97a);
  outline-offset: 3px
}

/* ==================================================================
 * 17. Il film dell'hero
 *
 * Il video sta sotto al sipario e al titolo. Finche non parte si vede
 * il fotogramma di apertura come immagine di sfondo, quindi non c'e mai
 * un buco nero: il passaggio da fermo a in movimento e una dissolvenza.
 * ================================================================== */

.hotel-home .hotel-hero-film {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
  pointer-events: none
}

.hotel-home .hotel-hero-film.e-in-onda {
  opacity: 1
}

/* Sipario e contenuti restano sopra al video. */
.hotel-home .hotel-hero-shade,
.hotel-home .hotel-topbar,
.hotel-home .hotel-hero-content,
.hotel-home .cds-scroll-hint {
  z-index: 2
}

.hotel-home .hotel-hero-shade {
  z-index: 1
}

/* Col video in onda il sipario si scurisce un poco: le immagini in
   movimento distraggono piu di una fotografia ferma, e il titolo deve
   restare la cosa piu leggibile della pagina. */
.hotel-home .hotel-hero-scena.e-in-onda~.hotel-hero-shade {
  background:
    radial-gradient(90% 60% at 50% 108%, #101a24cc 0%, #0000 70%),
    linear-gradient(180deg, #101a2499 0%, #101a2452 32%, #101a24b8 78%, #101a24e0 100%)
}

/* ==================================================================
 * 18. Diorama: la sequenza con zoom e carrellata
 *
 * Sei fotografie che si succedono con una dissolvenza mentre la
 * scheda grafica le avvicina lentamente. Nessun fotogramma viene
 * ridisegnato: si muovono solo scala e posizione.
 * ================================================================== */

.cds-diorama {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--color-on-dark)
}

.cds-diorama-scene {
  position: absolute;
  inset: 0;
  z-index: -2
}

.cds-diorama-scena {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-soft)
}

.cds-diorama-scena img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: scale(1.14);
  transform-origin: var(--fuoco, 50% 50%)
}

/* Senza JavaScript resta in vista la prima scena: la fascia non e mai vuota. */
.cds-diorama-scena:first-child,
.cds-diorama-scena:first-child figcaption {
  opacity: 1
}

.cds-diorama.e-in-sequenza .cds-diorama-scena:first-child:not(.e-attiva),
.cds-diorama.e-in-sequenza .cds-diorama-scena:first-child:not(.e-attiva) figcaption {
  opacity: 0
}

/* La scena attiva si mostra e, per tutta la sua durata, si avvicina. */
.cds-diorama-scena.e-attiva {
  opacity: 1
}

/* Ogni scena si avvicina verso un punto diverso, cosi il movimento non
   sembra sempre lo stesso. */
.cds-diorama-scena:nth-child(1) img { --fuoco: 62% 46% }
.cds-diorama-scena:nth-child(2) img { --fuoco: 40% 60% }
.cds-diorama-scena:nth-child(3) img { --fuoco: 55% 40% }
.cds-diorama-scena:nth-child(4) img { --fuoco: 70% 55% }
.cds-diorama-scena:nth-child(5) img { --fuoco: 45% 65% }
.cds-diorama-scena:nth-child(6) img { --fuoco: 50% 35% }
.cds-diorama-scena:nth-child(7) img { --fuoco: 58% 50% }

.cds-diorama-scena.e-attiva img {
  animation: cds-carrellata 7.5s linear forwards
}

@keyframes cds-carrellata {
  from {
    transform: scale(1.14)
  }

  to {
    transform: scale(1.01)
  }
}

/* Le scene pari si allontanano invece di avvicinarsi: alternare le due
   direzioni evita l'effetto ripetitivo dello zoom sempre uguale. */
.cds-diorama-scena:nth-child(2n).e-attiva img {
  animation-name: cds-carrellata-inversa
}

@keyframes cds-carrellata-inversa {
  from {
    transform: scale(1.01) translate3d(2%, 0, 0)
  }

  to {
    transform: scale(1.14) translate3d(-2%, 0, 0)
  }
}

.cds-diorama-scena figcaption {
  position: absolute;
  right: max(56px, 50vw - 610px);
  bottom: 46px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  opacity: 0;
  transition: opacity .8s var(--ease-soft) .3s
}

.cds-diorama-scena.e-attiva figcaption {
  opacity: 1
}

.cds-diorama-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #101a24e6 0%, #101a24b3 34%, #101a2440 62%, #101a241f 100%),
    linear-gradient(180deg, #101a2459 0%, #0000 38%, #101a24b3 100%);
  pointer-events: none
}

.cds-diorama-copy {
  max-width: 620px;
  padding: 0 max(56px, 50vw - 610px) 92px
}

.cds-diorama-eyebrow {
  margin: 0 0 12px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-gold-light)
}

.cds-diorama h2 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: var(--color-gold-light) !important;
  text-shadow: 0 2px 30px #101a2480
}

.cds-diorama-copy>p:not(.cds-diorama-eyebrow) {
  margin: 0;
  max-width: 520px;
  font-size: 1rem;
  line-height: 1.75
}

/* Indice delle scene: sei trattini, quello attivo si riempie d'oro. */
.cds-diorama-indice {
  position: absolute;
  left: max(56px, 50vw - 610px);
  bottom: 52px;
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none
}

.cds-diorama-indice li {
  width: 26px;
  height: 2px;
  background: #ffffff40;
  overflow: hidden;
  position: relative
}

.cds-diorama-indice li.e-attiva::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-gold-light);
  transform-origin: left;
  animation: cds-indice 7.5s linear forwards
}

@keyframes cds-indice {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

@media (max-width: 1000px) {
  .cds-diorama {
    min-height: 440px
  }

  .cds-diorama-copy {
    padding: 0 26px 78px
  }

  .cds-diorama-scena figcaption {
    right: 26px;
    bottom: 40px
  }

  .cds-diorama-indice {
    left: 26px;
    bottom: 44px
  }
}

/* Senza animazioni resta la prima scena, ferma e leggibile. */
@media (prefers-reduced-motion: reduce) {
  .cds-diorama-scena:first-child {
    opacity: 1
  }

  .cds-diorama-scena img {
    transform: none !important;
    animation: none !important
  }

  .cds-diorama-scena:first-child figcaption {
    opacity: 1
  }

  .cds-diorama-indice {
    display: none
  }

  .hotel-home .hotel-hero-film {
    display: none
  }
}

/* ==================================================================
 * 18 bis. Sequenza di sfondo
 *
 * Una testata che invece di una fotografia sola ne mostra alcune in fila
 * e chiude con una ripresa. Le scene stanno una sopra l'altra e si
 * scambiano il posto con una dissolvenza: non si sposta niente, quindi
 * il testo sopra non balla e non c'e mai uno stacco netto.
 *
 * Finche il JavaScript non prende in mano la sequenza — e quando il
 * sistema chiede meno animazioni — resta in vista la prima scena, che e
 * la stessa fotografia di prima.
 * ================================================================== */

.cds-sfondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden
}

.cds-sfondo-scena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .85s var(--ease-soft)
}

.cds-sfondo:not(.e-in-sequenza)>.cds-sfondo-scena:first-child,
.cds-sfondo>.cds-sfondo-scena.e-attiva {
  opacity: 1
}

/* La ripresa della cucina e girata in verticale col telefono: dentro una
   testata larga se ne vede una fascia orizzontale, e il ritaglio si tiene
   appena sopra la meta, dove stanno il piatto e le mani. */
.cds-sfondo>.cds-sfondo-film {
  object-position: 50% 45%
}

@media (prefers-reduced-motion: no-preference) {
  /* Avvicinamento lentissimo sulle fotografie: due centesimi e mezzo in
     cinque secondi, cioe meno di quanto si veda guardando, ma abbastanza
     perche la testata non sembri una diapositiva. Si muove solo la scala,
     quindi nessun fotogramma viene ridisegnato. L'ingrandimento resta
     piccolo apposta: le fotografie sono larghe 1200 pixel e ogni
     centesimo in piu le ammorbidisce. Le riprese si muovono gia da sole
     e restano ferme. */
  .cds-sfondo.e-in-sequenza>img.cds-sfondo-scena {
    transform: scale(1);
    transition: opacity .85s var(--ease-soft), transform 5s linear
  }

  .cds-sfondo.e-in-sequenza>img.cds-sfondo-scena.e-attiva {
    transform: scale(1.025)
  }
}

/* ==================================================================
 * 19. Video di sezione
 *
 * Riprese brevi, mute e senza comandi: raccontano un ambiente meglio di
 * una fotografia ferma. Restano dentro colonne larghe al massimo la meta
 * dello schermo, cosi il filmato non viene mai ingrandito oltre la sua
 * risoluzione e resta nitido.
 * ================================================================== */

.cds-video-scena {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--ink-soft)
}

/* La fascia "apri la finestra" sulla home. */
.hotel-home .hotel-vista .cds-video-scena {
  min-height: 360px
}

.hotel-home .hotel-vista .hotel-split-copy {
  padding-left: max(56px, 50vw - 610px);
  padding-right: 56px
}

@media (max-width: 1000px) {
  .hotel-home .hotel-vista {
    grid-template-columns: 1fr
  }

  .hotel-home .hotel-vista .hotel-split-copy {
    order: 2;
    padding: 45px 26px
  }

  .hotel-home .hotel-vista .cds-video-scena {
    order: 1;
    min-height: 280px
  }
}

/* ==================================================================
 * 20. In cucina: le riprese verticali
 *
 * Sono girate col telefono in verticale. Invece di ritagliarle in
 * orizzontale, buttando via meta inquadratura proprio dove ci sono le
 * mani, restano verticali e stanno in colonna: quattro riquadri stretti
 * e alti, come la fila di una cucina. A 464 pixel di larghezza in una
 * colonna da circa 270 non vengono mai ingrandite.
 * ================================================================== */

.kitchen-live {
  width: min(1180px, 100% - 48px);
  margin: 0 auto;
  padding: 76px 0 24px;
  display: grid;
  /* Le due riprese verticali stanno a sinistra e il racconto a destra:
     la colonna di sinistra e piu stretta perche i due filmati sono in
     piedi, e quella di destra ha lo spazio per tre capoversi, cosi la
     riga si chiude senza buchi. */
  grid-template-columns: minmax(0, 480px) 1fr;
  align-items: center;
  gap: 54px
}

.kitchen-live-copy {
  max-width: none;
  margin: 0
}

.kitchen-live-copy>span {
  color: var(--color-gold-deep);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 800
}

.kitchen-live-copy h2 {
  letter-spacing: -.03em;
  margin: 12px 0 14px;
  font-size: clamp(1.9rem, 3vw, 2.6rem)
}

.kitchen-live-copy p {
  margin: 0 0 14px;
  font-size: 1.02rem;
  line-height: 1.8;
  max-width: 46ch
}

.kitchen-live-copy p:last-child {
  margin-bottom: 0
}

.kitchen-live-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px
}

@media (max-width: 900px) {
  .kitchen-live {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .kitchen-live-griglia {
    order: 2
  }

  .kitchen-live-copy {
    order: 1
  }
}

.kitchen-live-griglia figure {
  position: relative;
  margin: 0;
  aspect-ratio: 464 / 832;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--ombra-2);
  /* Il riquadro d'attesa era quasi nero e per un istante, prima che la
     fotografia arrivi, sulla pagina chiara si aprivano due buchi scuri.
     Adesso e la stessa sabbia calda del resto del sito. */
  background: var(--color-surface-warm, #f6f1e7);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out)
}

.kitchen-live-griglia figure:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--ombra-3)
}

.kitchen-live-griglia img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 1s var(--ease-out)
}

.kitchen-live-griglia figure:hover img {
  transform: scale(1.05)
}


@media (max-width: 900px) {
  .kitchen-live-griglia {
    grid-template-columns: repeat(2, 1fr)
  }

  .kitchen-live {
    padding-top: 48px
  }
}

@media (max-width: 520px) {
  .kitchen-live-griglia {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }
}

/* ==================================================================
 * 20. Il fondo del sito: bianco, con l'oro solo sui contorni
 *
 * Il fondo torna quello di partenza: bianco, uguale per tutte le
 * pagine. Le velature d'oro che coprivano intere schermate sono
 * sparite — spalmate su tutto diventavano un colore, non una
 * sfumatura, e la banda sotto l'hero si vedeva come una macchia.
 *
 * L'oro adesso lavora dove serve davvero: sui contorni delle
 * fotografie, delle schede e dei riquadri (punto 22). Il colore resta
 * quello del marchio, ma si legge come una rifinitura invece che come
 * un fondo colorato.
 * ================================================================== */

:root {
  --oro-velo-forte: #eec97a3d;
  --oro-velo: #eec97a26;
  --oro-velo-lieve: #eec97a17;

  /* La cornice sfumata del punto 22: oro pieno su un angolo, oro
     spento sull'altro, niente nel mezzo. */
  --cds-cornice: linear-gradient(140deg,
      #eec97ae6 0%,
      #eec97a4d 22%,
      #eec97a00 46%,
      #eec97a00 58%,
      #b98a2e59 82%,
      #b98a2eb3 100%);
  --cds-cornice-chiara: linear-gradient(140deg,
      #ffffffb3 0%,
      #ffffff2e 30%,
      #ffffff00 52%,
      #eec97a59 100%)
}

body {
  background-color: var(--color-surface)
}

.hotel-home,
.story-page,
.rooms-page,
.restaurant-page,
.gallery-page,
.price-page,
.contacts-page,
.place-page {
  position: relative;
  isolation: isolate;
  background-color: var(--color-surface)
}

/* Anche le pagine interne sono su fondo bianco, e il bianco da solo
   rende le schermate piatte. Come nella home il colore torna sotto
   forma di luce: due pozze morbide, l'oro del marchio e il verde-mare
   della rosa dei venti, che scendono lungo la pagina.

   Sono disegnate su una piastrella alta 1500px che si ripete: cosi
   ogni schermata ne incontra una, senza dover elencare sezione per
   sezione. Le due ellissi si spengono dentro la piastrella, altrimenti
   a ogni ripetizione si vedrebbe la giuntura; in orizzontale possono
   uscire, perche il contenitore e largo quanto la finestra e quindi il
   bordo non si vede. Nel punto piu carico stanno sotto il 12% di
   opacita: si devono sentire, non vedere.

   La home resta fuori: ha i suoi aloni, uno per gruppo di figure,
   scritti in home-hero.css. */
.story-page,
.rooms-page,
.restaurant-page,
.gallery-page,
.price-page,
.contacts-page,
.place-page,
.services-page {
  background-image:
    radial-gradient(48% 26% at 78% 28%, #eec97a1f 0%, #eec97a00 100%),
    radial-gradient(42% 22% at 16% 72%, #2f7d6b12 0%, #2f7d6b00 100%);
  background-repeat: repeat-y, repeat-y;
  background-position: 0 0, 0 0;
  background-size: 100% 1500px, 100% 1500px
}

/* ==================================================================
 * 21. Le date: campi moderni al posto del riquadro di sistema
 *
 * Il calendario nativo resta quello del browser (e giusto cosi: e
 * accessibile e lo conoscono tutti), ma il campo attorno viene rifatto —
 * angoli morbidi, sfondo chiaro, icona nostra al posto di quella grigia
 * di serie, e un bordo dorato quando si sceglie la data.
 * ================================================================== */

.hotel-home .hotel-booking-bar input[type="date"],
.rooms-search input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  background: #ffffffe6;
  color: var(--color-text);
  border: 1.5px solid #0b12191f;
  border-radius: 12px;
  padding: 12px 44px 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  width: 100%;
  min-height: 48px;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
  position: relative
}

.hotel-home .hotel-booking-bar input[type="date"]:hover,
.rooms-search input[type="date"]:hover {
  background: #fff;
  border-color: #0b121933
}

.hotel-home .hotel-booking-bar input[type="date"]:focus,
.hotel-home .hotel-booking-bar input[type="date"]:focus-visible,
.rooms-search input[type="date"]:focus,
.rooms-search input[type="date"]:focus-visible {
  background: #fff;
  border-color: var(--color-gold, #8a6209);
  box-shadow: 0 0 0 4px #eec97a4d;
  outline: 0
}

/* L'icona di serie e un quadratino grigio: qui diventa un calendario
   disegnato, sempre nello stesso posto e grande abbastanza da centrarci
   il dito. */
.hotel-home .hotel-booking-bar input[type="date"]::-webkit-calendar-picker-indicator,
.rooms-search input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .75;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  transition: opacity .2s, transform .2s;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1219' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='4'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Ccircle cx='8.5' cy='14.5' r='1.2' fill='%230b1219' stroke='none'/%3E%3Ccircle cx='12' cy='14.5' r='1.2' fill='%230b1219' stroke='none'/%3E%3Ccircle cx='15.5' cy='14.5' r='1.2' fill='%230b1219' stroke='none'/%3E%3C/svg%3E") center / 22px 22px no-repeat
}

.hotel-home .hotel-booking-bar input[type="date"]::-webkit-calendar-picker-indicator:hover,
.rooms-search input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.08)
}

/* Anche i menu a tendina (ospiti, camere) seguono lo stesso disegno. */
.hotel-home .hotel-booking-bar select,
.rooms-search select {
  -webkit-appearance: none;
  appearance: none;
  background: #ffffffe6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1219' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px 18px no-repeat;
  color: var(--color-text);
  border: 1.5px solid #0b12191f;
  border-radius: 12px;
  padding: 12px 42px 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  min-height: 48px;
  transition: border-color .25s, box-shadow .25s
}

.hotel-home .hotel-booking-bar select:focus,
.rooms-search select:focus {
  border-color: var(--color-gold, #8a6209);
  box-shadow: 0 0 0 4px #eec97a4d;
  outline: 0
}

@media (prefers-reduced-motion: reduce) {
  .hotel-home .hotel-booking-bar input[type="date"]::-webkit-calendar-picker-indicator,
  .rooms-search input[type="date"]::-webkit-calendar-picker-indicator {
    transition: none
  }
}