/* ==========================================================================
   STARSEED Travel — tema "Notti d'estate"
   Si appoggia al tema originale: starseed.css entra nel livello "base" e
   questo file lo ridefinisce nel livello "estate", che vince sempre.
   Funzioni, contenuti e markup restano quelli del sito: cambiano luce,
   colore e hero (video in piscina + scritta STARSEED in Anton).

   Palette (OKLCH, presa dal video della piscina):
   notte  → blu profondo che vira al viola    (fondo, superfici)
   crema  → luce calda dei faretti             (testo)
   ambra · corallo · ibisco → il tramonto     (azioni, enfasi)
   turchese → l'acqua della piscina            (selezioni, dettagli)
   ========================================================================== */
@layer base, estate;
@import url("starseed.css") layer(base);

@layer estate {

/* ==========================================================================
   TOKEN
   ========================================================================== */
:root {
  --night-950: oklch(14.5% .036 264);
  --night-900: oklch(17.5% .044 266);
  --night-850: oklch(21% .052 268);
  --night-800: oklch(26% .058 272);
  --cream: oklch(96.5% .022 80);
  --sun: oklch(85% .145 74);
  --coral: oklch(72.5% .175 36);
  --hibiscus: oklch(65% .235 357);
  --pool: oklch(86% .12 189);
  --on-sun: oklch(22% .07 335);
  --sunset: linear-gradient(100deg, var(--sun) 0%, var(--coral) 48%, var(--hibiscus) 100%);
  --sunset-text: linear-gradient(100deg, oklch(89% .13 80) 0%, var(--coral) 52%, oklch(70% .21 356) 100%);
  --glass: oklch(15% .04 264 / .42);

  /* token del tema originale, rimappati */
  --bg: var(--night-950);
  --bg-2: var(--night-900);
  --ink: var(--cream);
  --ink-2: oklch(96.5% .022 80 / .74);
  --ink-3: oklch(96.5% .022 80 / .52);
  --line: oklch(96.5% .022 80 / .12);
  --line-2: oklch(96.5% .022 80 / .25);
  --rose: oklch(84% .1 50);
  --ember: var(--coral);

  /* grana "stampata" della scritta: texture già pronta (assets/img/grunge.png, la stessa ricetta del filtro #grunge),
     usata come maschera: niente rumore ricalcolato a ogni disegno */
  --grunge: url(../assets/img/grunge.png);
}

/* ==========================================================================
   PAGINA — cielo d'estate, stelle, grana
   ========================================================================== */
html { scrollbar-color: oklch(36% .06 268) var(--night-950); }
body { background: var(--night-950); }
/* il cielo: notte profonda con il bagliore del tramonto all'orizzonte */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
body::before {
  background:
    radial-gradient(120% 70% at 50% 120%, oklch(50% .16 20 / .3), transparent 62%),
    radial-gradient(70% 55% at 108% 6%, oklch(46% .16 305 / .3), transparent 70%),
    radial-gradient(60% 50% at -8% 38%, oklch(52% .11 210 / .18), transparent 70%),
    linear-gradient(180deg, var(--night-900), var(--night-950) 70%);
}
/* l'alba: si accende arrivando in fondo alla pagina */
body::after { opacity: 0; background: radial-gradient(120% 65% at 50% 118%, oklch(82% .14 72 / .42), oklch(68% .17 35 / .2) 42%, transparent 72%); }
@supports (animation-timeline: scroll()) {
  body::after { animation: ssDawn linear both; animation-timeline: scroll(root); }
}
@keyframes ssDawn { 0%, 72% { opacity: 0; } 100% { opacity: 1; } }
/* le stelle WebGL diventano luce sul cielo invece che su un fondo nero */
.sky { mix-blend-mode: screen; }
/* niente grana sopra la pagina: il video della testata deve restare nitido e pulito */
.grain { display: none; }
:focus-visible { outline-color: var(--pool); }
::selection { background: var(--sun); color: var(--on-sun); }
.ph { background-color: var(--night-850); }
.progress { background: var(--sunset); box-shadow: 0 0 14px oklch(72.5% .175 36 / .8); }
.cursor span { background: var(--cream); color: var(--night-950); box-shadow: 0 0 30px oklch(72.5% .175 36 / .45); }

/* ==========================================================================
   TIPOGRAFIA & COMPONENTI
   ========================================================================== */
.eyebrow::before { background: var(--sunset); }
.h2 em, .big em {
  padding-inline: .06em .12em; margin-inline: -.06em -.12em;
  background: var(--sunset-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* le voci del menu prendono il tramonto solo col mouse (sul telefono resterebbe acceso dopo il tocco) */
@media (hover: hover) { .menu ul a:hover { padding-inline: .06em .12em; margin-inline: -.06em -.12em; background: var(--sunset-text); -webkit-background-clip: text; background-clip: text; color: transparent; } }
.script { background: var(--sunset-text); -webkit-background-clip: text; background-clip: text; }

@media (hover: hover) { .btn:hover { background: var(--cream); color: var(--night-950); border-color: var(--cream); } }
.btn--solid {
  border-color: transparent; color: var(--on-sun);
  background: var(--sunset) 0 0 / 165% 100%;
  box-shadow: 0 12px 34px -14px oklch(70% .2 25 / .85), inset 0 1px 0 oklch(100% 0 0 / .32);
  transition: background-position .7s var(--ease-out), box-shadow .45s, translate .5s var(--ease-out), opacity .3s;
}
@media (hover: hover) { .btn--solid:hover { border-color: transparent; color: var(--on-sun); background: var(--sunset) 100% 0 / 165% 100%; box-shadow: 0 16px 44px -12px oklch(65% .235 357 / .8), inset 0 1px 0 oklch(100% 0 0 / .4); } }
.icon-btn { background: oklch(17.5% .044 266 / .6); }
@media (hover: hover) { .icon-btn:hover { background: var(--cream); color: var(--night-950); } }
@media (hover: hover) { .chip:hover { color: var(--ink); border-color: var(--pool); } }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current="true"] { background: var(--pool); color: var(--night-950); border-color: var(--pool); box-shadow: 0 0 22px -6px oklch(86% .12 189 / .6); }
.pill--hot { color: var(--coral); border-color: oklch(72.5% .175 36 / .55); box-shadow: 0 0 18px oklch(72.5% .175 36 / .28); }
.stars { color: var(--sun); }
.seg { background: oklch(17.5% .044 266 / .5); }
.seg__ind { background: var(--pool); box-shadow: 0 0 26px oklch(86% .12 189 / .35); }
.seg button[aria-pressed="true"] { color: var(--night-950); }

/* ==========================================================================
   NAV · MARCHIO · MENU
   ========================================================================== */
.nav.is-scrolled { background: oklch(14.5% .036 264 / .7); backdrop-filter: blur(16px) saturate(160%); }
.brand { display: inline-flex; align-items: center; gap: .42em; font: 400 1.36rem/1 var(--f-acid); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.brand svg { position: static; inset: auto; flex: none; width: .8em; height: .8em; max-width: none; overflow: visible; fill: var(--sun); filter: drop-shadow(0 0 6px oklch(85% .145 74 / .85)); transition: rotate .9s var(--ease-out); }
@media (hover: hover) { .brand:hover svg { rotate: 90deg; } }
/* in cima la testata è già il marchio: nella barra resta la stella, la scritta arriva scorrendo */
@supports (animation-timeline: scroll()) {
  .nav__brand span { animation: ssBrandIn linear both; animation-timeline: scroll(root); animation-range: 0 60svh; }
}
@keyframes ssBrandIn { 0%, 35% { opacity: 0; translate: -6px 0; } 100% { opacity: 1; translate: 0 0; } }
@media (hover: hover) { .lang-btn:hover { background: oklch(96.5% .022 80 / .07); } }
.lang-pop { background: oklch(17.5% .044 266 / .96); }
@media (hover: hover) { .lang-pop button:hover { background: oklch(96.5% .022 80 / .07); } }
.lang-pop button[aria-current="true"]::after { background: var(--sun); }
.menu {
  background:
    radial-gradient(90% 55% at 100% 0%, oklch(46% .16 305 / .34), transparent 70%),
    radial-gradient(80% 55% at 0% 100%, oklch(52% .17 25 / .3), transparent 70%),
    oklch(14.5% .036 264);
}

/* ==========================================================================
   HERO — il video in piscina, sopra la scritta STARSEED
   telefono: scritta in alto come una testata, video al centro, azioni in basso
   schermi larghi: tutto ancorato in basso, il video respira sopra
   ========================================================================== */
.hero { min-height: 100svh; }
.hero__media { background: oklch(24% .05 228); mask-image: linear-gradient(#000 55%, transparent); }
/* colori della piscina già nel video e nella locandina (prima: saturate 1,3 · contrast 1,06 · brightness 1,1 in css) */
.hero__media img, .hero__media video { opacity: 1; mix-blend-mode: normal; mask-image: none; }
.hero__media video { opacity: 0; transition: opacity 1.6s ease; }
/* caricamento iniziale nei colori della notte d'estate: blu notte con un filo d'alba, orbita color piscina */
.js .loader { background: radial-gradient(70% 42% at 50% 44%, oklch(62% .19 30 / .14), transparent 72%), var(--night-950); }
.js .loader::after { background: linear-gradient(var(--night-950), transparent); }
/* l'orbita color piscina (il file è già colorato: assets/img/mappe/orbit.luce-piscina) con l'alone turchese */
.loader__orbit::before { background: radial-gradient(closest-side, oklch(86% .12 189 / .3), oklch(62% .19 30 / .08) 62%, transparent); }
.hero__media video.on { opacity: 1; }
/* luci del club che entrano nell'inquadratura: ibisco in alto a destra, turchese a sinistra */
.hero__media::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: screen;
  background:
    radial-gradient(60% 55% at 96% 4%, oklch(62% .24 352 / .34), transparent 70%),
    radial-gradient(55% 60% at 0% 40%, oklch(72% .13 196 / .2), transparent 70%);
}
.hero::after {
  background:
    linear-gradient(180deg, oklch(12% .035 264 / .6) 0%, oklch(12% .035 264 / .12) 16%, transparent 30%),
    linear-gradient(0deg, oklch(12% .035 264 / 0) 0%, oklch(12% .035 264 / .72) 13%, oklch(12% .035 264 / .45) 30%, transparent 54%);
}
.hero__inner {
  min-height: 100svh; align-content: stretch; justify-items: stretch; gap: 0; text-align: left;
  grid-template-rows: auto auto minmax(28px, 1fr) auto auto;
  grid-template-areas: "kicker" "mark" "." "copy" "act";
  padding-top: calc(var(--nav-h) + clamp(12px, 2.6svh, 28px));
  padding-bottom: calc(clamp(26px, 4.5svh, 48px) + var(--safe-b));
}
.hero__kicker { grid-area: kicker; justify-self: start; background: var(--glass); backdrop-filter: blur(12px) saturate(160%); }
.hero__kicker::before, .hero__kicker::after { background: var(--coral); }

/* la scritta: Anton a tutta larghezza, misurata sul contenitore (3,565em = "STARSEED" lettera per lettera) */
.mark { grid-area: mark; position: relative; container-type: inline-size; margin-top: clamp(10px, 2.2svh, 24px); }
.mark__word {
  display: block; overflow: clip; padding-top: .05em; margin-bottom: -.03em;
  font: 400 calc(100cqi / 3.565 * .995)/.8 var(--f-acid); letter-spacing: -.004em; text-transform: uppercase; white-space: nowrap;
  color: var(--cream); mask: var(--grunge) 0 0 / 240px 240px;
}
.mark__word .ch { position: relative; z-index: 0; display: inline-block; }
/* alone al passaggio del mouse e scia dell'ingresso: copie trasparenti della lettera, sotto di lei, che portano solo le
   ombre e sfumano (opacità, la fa la scheda video). Prima si animava text-shadow, che ridisegna a ogni fotogramma */
.mark__word .ch::before, .mark__word .ch::after { content: attr(data-c); position: absolute; inset: 0; z-index: -1; color: transparent; opacity: 0; pointer-events: none; }
.mark__word .ch::after { text-shadow: -.022em 0 oklch(70% .22 20 / .9), .022em 0 oklch(86% .12 189 / .85); transition: opacity .4s; }
@media (hover: hover) { .mark__word .ch:hover::after { opacity: 1; } }
.js:not(.ready) .mark__word .ch { transform: translateY(115%); }
.ready .mark__word .ch { animation: ssRise 1.25s var(--ease-out) both; animation-delay: calc(.08s + var(--i) * 60ms); }
/* salendo veloci le lettere lasciano una scia corta sotto di sé (la scia naturale di un movimento rapido), che sparisce
   mentre rallentano: a fine corsa il marchio è nitido */
.mark__word .ch::before { text-shadow: 0 .05em 0 oklch(96.5% .022 80 / .3), 0 .11em .01em oklch(96.5% .022 80 / .16), 0 .18em .02em oklch(96.5% .022 80 / .07); }
.ready .mark__word .ch::before { animation: ssTrail 1.25s var(--ease-out) both; animation-delay: calc(.08s + var(--i) * 60ms); }
@keyframes ssRise {
  from { transform: translateY(115%) rotate(7deg); }
  to { transform: none; }
}
@keyframes ssTrail { from { opacity: 1; } 45% { opacity: .35; } to { opacity: 0; } }
/* "Riduci animazioni": l'ingresso è già fatto, come col movimento ridotto */
html.still .mark__word .ch, html.still .mark__word .ch::before, html.still .mark__script { animation: none !important; transform: none !important; clip-path: none !important; }
.mark__script {
  position: relative; display: block; width: fit-content; margin: -.2em 1.5% 0 auto;
  font-size: clamp(2.5rem, 7.2cqi, 7.4rem); line-height: 1.15; rotate: -5deg; pointer-events: none;
  filter: drop-shadow(0 1px 2px oklch(10% .04 264 / .45)) drop-shadow(0 3px 14px oklch(10% .04 264 / .35));
}
/* la firma si scrive da sinistra a destra. Il ritaglio è largo (anche sopra, sotto e ai lati): l'ombra morbida non viene
   tagliata in un rettangolo, che sul video chiaro sembrava un'etichetta scura dietro la scritta */
.js .mark__script { clip-path: inset(-80% 100% -80% 0); }
.ready .mark__script { animation: ssWrite 1.7s var(--ease-io) 1s both; }
@keyframes ssWrite { from { clip-path: inset(-80% 100% -80% 0); } to { clip-path: inset(-80% -20% -80% -20%); } }

.hero__copy { grid-area: copy; display: grid; gap: 12px; }
.hero__title { max-width: 19ch; font: 500 clamp(1.45rem, 1.05rem + 1.5vw, 2.35rem)/1.08 var(--f-body); letter-spacing: -.028em; text-transform: none; text-wrap: balance; }
.hero__sub { max-width: 44ch; font-size: clamp(.95rem, .9rem + .25vw, 1.1rem); }
.hero__act { grid-area: act; display: grid; gap: 14px; margin-top: 20px; }
.hero__chips { justify-content: flex-start; }
.hero__chips button { display: grid; gap: 4px; padding: .75em 1.05em .82em; border-radius: 14px; text-align: left; color: var(--ink-2); background: var(--glass); backdrop-filter: blur(14px) saturate(160%); }
@media (hover: hover) { .hero__chips button:hover { border-color: var(--pool); background: oklch(19% .046 266 / .6); color: var(--ink); } }
.hero__chips b { font: 400 1.3rem/1 var(--f-acid); color: var(--cream); }
.hero__ctas { width: 100%; }
.hero .btn--wa { background: var(--glass); backdrop-filter: blur(12px) saturate(160%); }
@media (hover: hover) { .hero .btn--wa:hover { background: #25d366; } }
.hero__cue { display: none; background: linear-gradient(var(--cream), transparent); }
/* uscendo dall'hero il video si avvicina e i testi salgono sfumando (solo trasformazioni: lavora la scheda grafica) */
@supports (animation-timeline: scroll()) {
  .hero__media :is(img, video) { animation: ssHeroZoom linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  .hero__inner { animation: ssHeroLift linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
}
@keyframes ssHeroZoom { to { scale: 1.1; } }
@keyframes ssHeroLift { to { translate: 0 -12svh; opacity: .2; } }
@media (min-width: 700px) {
  .hero__ctas { width: auto; justify-content: flex-start; }
}
@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto auto;
    grid-template-areas: ". ." "kicker kicker" "mark mark" "copy act";
    column-gap: clamp(32px, 5vw, 96px); align-items: end;
  }
  .hero__act { margin-top: 0; justify-items: end; }
  .hero__chips, .hero__ctas { justify-content: flex-end; }
  .hero__cue { display: block; }
}

/* ==========================================================================
   FOTO A COLORI
   La libreria del sito (assets/img) è in bianco e nero: qui prende la luce
   della notte d'estate con le mappe #ss-* definite in index.html
   (nero → blu notte, grigi → tramonto/piscina/lilla, bianco → crema).
   Le foto caricate dallo Studio (assets/uploads, archivio locale) restano
   al naturale perché il selettore guarda solo i file della libreria.
   ========================================================================== */
:is(.pack__bg, .fmt__bg, .tile, .poster, .modal__media, .lb__stage, .lb__thumbs) img { filter: none; }
/* solo le foto non ancora colorate (browser senza AVIF): quelle in assets/img/mappe hanno già i colori nel file */
:is(.pack__bg, .fmt__bg, .tile, .poster, .modal__media, .lb__stage, .lb__thumbs) img[src*="assets/img/"]:not([src*="/mappe/"], .orig) { filter: var(--map, url(#ss-tramonto)) brightness(var(--map-b, 1)); }
/* galleria: a riposo la foto è quella del file, al passaggio del mouse si schiarisce del 12% senza filtri. Il velo del
   tema diventa un grigio scuro in color-dodge (foto ÷ (1 − 27/255) = luminosità × 1,12) di cui cambia solo la
   trasparenza; la fusione c'è solo sulla foto sotto il mouse e se ne va quando il velo è sparito */
.tile::after { background: rgb(27 27 27); opacity: 0; transition: opacity .6s, mix-blend-mode 0s .6s allow-discrete; }
@media (hover: hover) { .tile:hover::after { opacity: 1; mix-blend-mode: color-dodge; transition: opacity .6s; } }
.fmt--midnight, .tile:is([data-idx$="1"], [data-idx$="4"], [data-idx$="7"]) { --map: url(#ss-piscina); }
.fmt--disco, .fmt--pirouette, .tile:is([data-idx$="2"], [data-idx$="5"], [data-idx$="8"]) { --map: url(#ss-lilla); }
.fmt--acid { --map: url(#ss-acido); }
/* riserva senza AVIF: un filo più scura a riposo; al passaggio piena, e il velo qui sopra la porta a 1,12 come le altre */
.tile { --map-b: .94; }
@media (hover: hover) { .tile:hover { --map-b: 1; } }
.modal__media::before { filter: url(#ss-tramonto) blur(30px) brightness(.5); }
.modal__media.is-baked::before { filter: blur(30px) brightness(.5); }
/* la stella del finale è luce su nero: il filtro rende trasparente il nero, così non serve la fusione */
.final__star { mix-blend-mode: normal; }
.final__star img:not([src*="/mappe/"]) { filter: url(#ss-luce); }

/* ==========================================================================
   PACCHETTI
   ========================================================================== */
.pack {
  background: linear-gradient(165deg, oklch(28% .06 272 / .55), oklch(18% .045 266 / .5) 55%, oklch(16% .04 264 / .55));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .06);
}
@media (min-width: 1100px) and (hover: hover) { .pack:hover { border-color: oklch(86% .12 189 / .5); box-shadow: 0 30px 80px -20px oklch(8% .04 270 / .9), inset 0 1px 0 oklch(100% 0 0 / .08); } }
.pack__bg img { opacity: .55; mask-image: linear-gradient(#000 15%, transparent 95%); }
@media (hover: hover) { .pack:hover .pack__bg img { opacity: .74; } }
.pack::after { background: radial-gradient(60% 40% at var(--mx) var(--my), oklch(85% .145 74 / .12), transparent 70%); }
/* il fondo del pacchetto in evidenza sta sulla copertura (::before): dietro gira la luce del bordo (starseed.css) */
.pack--best { background: none; box-shadow: 0 30px 90px -34px oklch(65% .235 357 / .55); }
.pack--best::before { background: linear-gradient(165deg, oklch(33% .09 335 / .5), oklch(21% .055 275 / .55) 55%, oklch(17% .045 266 / .6)), oklch(17% .045 266); }
.pack__ring i { background: conic-gradient(oklch(96.5% .022 80 / .16) 0 50%, var(--sun) 63%, var(--coral) 71%, var(--hibiscus) 80%, oklch(96.5% .022 80 / .16) 92%); }
.pack--best .pack__tag { background: var(--sunset); color: var(--on-sun); }
.pack__price em { color: var(--sun); }
.inc li .ico { color: var(--pool); }
/* i locali col colore del tramonto: si leggono per primi */
.pack__venues { border-color: color-mix(in oklch, var(--coral) 45%, transparent); background: color-mix(in oklch, var(--coral) 9%, transparent); }
.pack__venues p { background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.inc .vip { background: oklch(65% .235 357 / .22); color: oklch(88% .08 355); }
/* brand: un accento per pacchetto (1 notte ambra, 2 corallo, 3 ibisco), il gradiente tramonto solo su prezzo e bottone,
   il turchese solo per acqua e selezioni (non più sulle icone) */
.pack { --acc: var(--sun); }
.pack[data-n="2"] { --acc: var(--coral); }
.pack[data-n="3"] { --acc: var(--hibiscus); }
.pack:not(.pack--best) .pack__tag { color: var(--acc); }
.pack .inc li .ico { color: var(--acc); }
.pack__price b { font-size: clamp(3rem, 13vw, 3.6rem); background: var(--sunset); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack__dep { align-self: center; padding: .4em .85em; border: 1px solid color-mix(in oklch, var(--acc) 60%, transparent); border-radius: 999px; font: 700 .64rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.rail__bar span.on { background: var(--pool); }
.extras b { color: var(--sun); }
.buybar { background: oklch(17.5% .044 266 / .9); box-shadow: 0 20px 60px oklch(5% .03 270 / .7); }
.buybar__menu { background: oklch(96.5% .022 80 / .06); }
.buybar__prog { filter: drop-shadow(0 0 4px oklch(85% .145 74 / .6)); }
.buybar__prog path { stroke: var(--sun); }

/* ==========================================================================
   MARQUEE · LE FESTE
   ========================================================================== */
.marquee { background: linear-gradient(90deg, oklch(22% .07 320 / .32), oklch(18% .05 250 / .32)); }
.marquee .spk { fill: var(--sun); opacity: .9; }
.marquee__row--rev .spk { fill: var(--pool); }

/* ogni festa ha la sua luce */
.fmt { --fa: var(--sun); background: var(--night-950); box-shadow: 0 30px 80px -30px oklch(5% .03 270 / .9); }
.fmt--acid { --fa: oklch(90% .19 118); }
.fmt--midnight { --fa: oklch(79% .1 238); }
.fmt--disco { --fa: oklch(72% .22 352); }
.fmt--stella { --fa: oklch(85% .09 45); }
.fmt--ascension { --fa: oklch(72% .19 33); }
.fmt--pirouette { --fa: oklch(81% .1 302); }
.fmt__bg img { opacity: .66; }
@media (hover: hover) { .fmt:hover .fmt__bg img { opacity: .9; } }
.fmt::after {
  background:
    radial-gradient(70cqi circle at var(--mx) var(--my), color-mix(in oklch, var(--fa) 26%, transparent), transparent 62%),
    linear-gradient(to top, oklch(12% .035 264 / .94) 8%, oklch(12% .035 264 / .25) 58%, transparent 82%);
}
/* il bordo colorato: si accende col mouse cambiando l'opacità (.46 × 70% = il 32% di prima), non l'ombra: una transizione
   di box-shadow ridisegnava tutta la carta per mezzo secondo */
.fmt::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--fa) 70%, transparent); opacity: .46; transition: opacity .5s; }
@media (hover: hover) { .fmt:hover::before { opacity: 1; } }
.fmt__genre { color: var(--fa); }
.fmt__when { background: oklch(12% .035 264 / .5); border-color: color-mix(in oklch, var(--fa) 45%, transparent); }
@media (hover: hover) { .fmt__when:hover { background: var(--fa); color: var(--night-950); border-color: var(--fa); } }
.formats__bar span { background: var(--sunset); }
.fmt--end { background: var(--sunset); color: var(--on-sun); }
.fmt--end::before { display: none; }
.fmt--end .btn { border-color: var(--on-sun); color: var(--on-sun); }
@media (hover: hover) { .fmt--end .btn:hover { background: var(--on-sun); color: var(--sun); border-color: var(--on-sun); } }

/* ==========================================================================
   LA SETTIMANA
   ========================================================================== */
.night__btn::before { background: linear-gradient(90deg, oklch(72.5% .175 36 / .16), oklch(65% .235 357 / .06) 45%, transparent 85%); }
@media (hover: hover) { .night__btn:hover .night__arrow { background: var(--sunset); color: var(--on-sun); border-color: transparent; } }
.night--today .night__day { color: var(--coral); text-shadow: 0 0 24px oklch(72.5% .175 36 / .8); }

/* ==========================================================================
   ALLOGGI
   ========================================================================== */

/* ==========================================================================
   FOTO · LOCANDINE · RECENSIONI
   ========================================================================== */
/* fondo pieno della tela (prima velato sul cielo): i veli ai bordi lo raggiungono senza maschere */
.canvas { --canvas-bg: oklch(14% .036 264); }
.tile { background: var(--night-850); }
.canvas__info h3 { text-shadow: 0 6px 40px oklch(8% .04 264 / .9); }
.posters__sticky::before {
  content: ""; position: absolute; inset: 18% 0 8%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 45% at 50% 55%, oklch(55% .2 330 / .26), transparent 70%), radial-gradient(40% 35% at 28% 62%, oklch(70% .12 200 / .14), transparent 70%);
}
.reviews__stats div { background: oklch(17.5% .044 266 / .92); }
.rv { background: oklch(19% .046 266 / .5); }

/* ==========================================================================
   RADIO
   ========================================================================== */
/* il video della radio, tinto di viola-ibisco come le luci del club: la tinta è già nel file (nebula-viola, prima un
   filtro css ricalcolato a ogni fotogramma) */
.sound__video { opacity: .6; mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.sound::before { background: linear-gradient(transparent, oklch(14.5% .036 264 / .45) 30%, oklch(14.5% .036 264 / .45) 70%, transparent); }
.machine { background: oklch(16% .042 266 / .72); box-shadow: 0 40px 120px -20px oklch(6% .03 270 / .7), inset 0 1px 0 oklch(100% 0 0 / .05); }
.machine__head b, .machine__chord, .knob output { color: var(--sun); }
.machine__screen { background: radial-gradient(120% 120% at 50% 110%, oklch(24% .09 310 / .95), var(--night-950) 72%); }
.step[aria-pressed="true"] { background: oklch(86% .12 189 / .16); color: var(--pool); border-color: oklch(86% .12 189 / .35); }
.step.acc { box-shadow: inset 0 2px 0 var(--sun); }
.step.now { background: var(--sunset); color: var(--on-sun); border-color: transparent; box-shadow: 0 0 22px oklch(72.5% .175 36 / .65); }
.play { background: var(--sunset); color: var(--on-sun); box-shadow: 0 0 10px oklch(72.5% .175 36 / .6); }
.play::after { box-shadow: 0 0 60px oklch(72.5% .175 36 / .6); }
input[type="range"] { accent-color: var(--coral); }
input[type="range"]::-webkit-slider-thumb { background: var(--cream); box-shadow: 0 0 0 3px oklch(72.5% .175 36 / .35), 0 0 14px oklch(72.5% .175 36 / .7); }
input[type="range"]::-moz-range-thumb { background: var(--cream); }

/* ==========================================================================
   COME PRENOTARE · FAQ · FINALE · FOOTER
   ========================================================================== */
.how__steps li { background: oklch(19% .046 266 / .5); }
.how__steps li::before { -webkit-text-stroke: 0; background: var(--sunset-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.faq__list summary::after { background: var(--sunset); }
/* il finale è l'alba: luce calda che sale dall'orizzonte */
.final::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 100%, oklch(80% .14 70 / .3), oklch(68% .18 30 / .16) 45%, transparent 75%); }
.final__star { opacity: .5; }
/* "Malta ti aspetta" cade sulla stella luminosa: la stessa ombra notturna della firma in testata la stacca dal fondo */
.final .script { filter: drop-shadow(0 2px 3px oklch(10% .04 264 / .7)) drop-shadow(0 4px 18px oklch(10% .04 264 / .9)); }
/* la luce dell'alba continua oltre il bordo del finale: stessa ellisse, che nel footer si spegne in fretta */
.footer { background: radial-gradient(70% 220px at 50% 0%, oklch(80% .14 70 / .3), oklch(68% .18 30 / .16) 45%, transparent 75%), linear-gradient(transparent, oklch(12% .035 264 / .6) 30%); }
.footer .brand { font-size: 2rem; }
.footer__big { display: block; container-type: inline-size; }
.footer__word {
  position: relative; display: block; padding-block: .1em .03em;
  font: 400 calc(100cqi / 3.552 * .995)/.82 var(--f-acid); letter-spacing: -.004em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--ink-3);
  view-timeline-name: --ss-fill;
}
/* il riempimento al tramonto: una copia piena della scritta dentro una finestra che si apre da sinistra mentre il footer
   arriva (due traslazioni opposte: la scritta resta ferma, la finestra scorre; le anima la scheda video). Prima scorreva
   lo sfondo della scritta e il browser la ridipingeva a ogni fotogramma dello scorrimento */
.footer__fill { position: absolute; inset: 0; overflow: clip; translate: -100% 0; }
.footer__fill > span { display: block; padding-block: .1em .03em; translate: 100% 0; -webkit-text-stroke: 0; background: linear-gradient(90deg, var(--sun), var(--coral) 50%, var(--hibiscus)); -webkit-background-clip: text; background-clip: text; }
@supports (animation-timeline: view()) {
  .footer__fill, .footer__fill > span { animation: ssFill linear both; animation-timeline: --ss-fill; animation-range: entry 10% entry 100%; }
}
@keyframes ssFill { to { translate: 0 0; } }

/* ==========================================================================
   FINESTRE · AVVISI · STUDIO
   ========================================================================== */
dialog::backdrop { background: oklch(10% .035 266 / .6); }
.sheet, .sheet__foot, .modal, .facts div, .compare th:first-child, .compare td:first-child, .compare thead th, .compare tfoot td { background: var(--night-900); }
.sheet { box-shadow: 0 -30px 100px oklch(5% .03 270 / .7); }
.modal__media { background: var(--night-950); }
.bk-input { background: var(--night-850); }
.bk-input:focus-visible { border-color: var(--pool); box-shadow: 0 0 0 3px oklch(86% .12 189 / .18); }
.bk-help.hot { color: var(--coral); }
@media (hover: hover) { .stepper button:not([aria-disabled="true"]):hover { background: var(--cream); color: var(--night-950); } }
.opt:has(input:checked) { border-color: var(--pool); background: oklch(86% .12 189 / .07); }
.opt input:checked { border-color: var(--pool); background: var(--pool); }
.opt input:checked::after { background: var(--night-950); }
.opt em { color: var(--sun); }
.sum .neg { color: var(--pool); }
.bk-ok__star { --glow: oklch(85% .145 74 / .3); color: var(--sun); }
.lightbox { background: oklch(10% .03 266 / .97); }
.lb__thumbs button[aria-current="true"] { outline-color: var(--pool); }
.toast { background: oklch(17.5% .044 266 / .95); }
.toast button { background: var(--sunset); color: var(--on-sun); }
.studio-fab { background: oklch(17.5% .044 266 / .72); }
@media (hover: hover) { .studio-fab:hover { background: var(--cream); color: var(--night-950); } }
.studio-fab .dot { background: var(--coral); }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 2px var(--pool), 0 0 60px oklch(86% .12 189 / .45); } }
/* prenotazione a passi: giorno scelto color piscina, soggiorno in trasparenza d'acqua, avanzamento al tramonto, errori corallo */
.sheet { --bk-on: var(--pool); --bk-on-ink: var(--night-950); --bk-range: color-mix(in oklch, oklch(86% .12 189) 12%, var(--night-900)); --bk-prog: var(--sunset); --bk-err: var(--coral); }
.bk-months button[aria-pressed="true"] { background: var(--cream); color: var(--night-950); border-color: var(--cream); }
.bk-total [data-bk-dep] { color: var(--sun); }
.bk-edit { color: var(--pool); }

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .mark__word .ch, .mark__word .ch::before, .mark__script { animation: none !important; transform: none !important; clip-path: none !important; }
  .hero__kicker::after, .hero__media :is(img, video), .hero__inner, .nav__brand span { animation: none; }
  /* la scritta del footer si riempiva scorrendo: qui è già piena */
  .footer__fill, .footer__fill > span { animation: none; translate: none; }
}
}

/* ---------- Studio (area promoter) ----------
   studio.css viene caricato dopo e fuori dai livelli: qui bastano poche regole
   fuori livello, un filo più specifiche, per portare il pannello sul blu notte */
html[data-theme="estate"] .studio { background: oklch(16% .042 266 / .97); }
html[data-theme="estate"] :is(.st-thumb, .drop__prev figure), html[data-theme="estate"] .st-form .in { background: var(--night-850); }
html[data-theme="estate"] .drop__busy { background: oklch(16% .042 266 / .9); }
html[data-theme="estate"] .st-save { background: linear-gradient(transparent, oklch(16% .042 266) 34%); }

/* ---------- accesso allo Studio, nel blu notte ---------- */
@layer estate {
  .gate::backdrop { background: oklch(10% .035 266 / .72); }
  .gate__head > svg { fill: var(--sun); filter: drop-shadow(0 0 10px oklch(85% .145 74 / .8)); }
  .gate__eye:hover, .gate__eye[aria-pressed="true"] { background: oklch(96.5% .022 80 / .07); }
}

/* ==========================================================================
   NAVIGAZIONE E RIFINITURE SU TELEFONO (tema estate)
   ========================================================================== */
@layer estate {
  /* sezione corrente: turchese come le selezioni, con la stellina */
  .nav__links a[aria-current="location"], .menu ul a[aria-current="location"] { color: var(--pool); }
  .menu__label { color: oklch(96.5% .022 80 / .55); }
  .faq__more .ico { color: #25d366; }

  /* touch: anche la barra in alto senza vetro (vedi starseed.css), fondo quasi pieno nel blu notte */
  @media (hover: none) {
    .nav.is-scrolled { background: oklch(14.5% .036 264 / .92); backdrop-filter: none; }
    /* touch: anche il vetro della testata è un fondo quasi pieno (sopra il video si risfocava a ogni suo fotogramma) */
    .hero__kicker, .hero__chips button, .hero .btn--wa { backdrop-filter: none; background: oklch(15% .04 264 / .62); }
  }
  /* niente vetro sfocato su carte e pulsanti sopra il cielo (vedi starseed.css): fondo quasi pieno nel blu notte, su ogni schermo */
  .pack { background-color: oklch(17% .045 266 / .9); }
  .seg { background: oklch(17.5% .044 266 / .92); }
  .icon-btn { background: oklch(17.5% .044 266 / .9); }
  .machine { background: oklch(16% .042 266 / .92); }
  .studio-fab { background: oklch(17.5% .044 266 / .92); }

  /* schermi bassi (iPhone SE con le barre): spazi più stretti, le due azioni restano in vista */
  @media (max-height: 640px) {
    .hero__inner { grid-template-rows: auto auto minmax(12px, 1fr) auto auto; }
    .hero__act { margin-top: 12px; gap: 10px; }
    .hero__chips button { padding: .55em .9em .6em; }
  }
  /* telefono in orizzontale: la griglia a due colonne degli schermi larghi, azioni a destra già nel primo schermo */
  @media (orientation: landscape) and (max-height: 500px) {
    .hero__inner {
      grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto auto;
      grid-template-areas: ". ." "kicker kicker" "mark mark" "copy act";
      column-gap: clamp(24px, 4vw, 64px); align-items: end;
      padding-top: calc(var(--nav-h) + 8px); padding-bottom: calc(16px + var(--safe-b));
    }
    /* il contenitore largo quanto la scritta: la firma "we are made of stardust" resta sotto la fine di STARSEED */
    .mark { width: min(100%, 93svh); margin-top: 6px; }
    /* la scritta STARSEED non supera un quarto dell'altezza */
    .mark__word { font-size: min(calc(100cqi / 3.565 * .995), 26svh); }
    .mark__script { font-size: min(clamp(2.5rem, 7.2cqi, 7.4rem), 12svh); }
    .hero__act { margin-top: 0; justify-items: end; }
    .hero__ctas { display: grid; width: auto; }
  }
}