/* ===========================================================================
   Il Concierge — l'invito e il pannello, su ogni pagina del sito.

   L'owner, il 22 settembre 2026: *«studia visualizzazione cinematografica, non
   il solito pop da chat»*. Quindi qui non c'e' niente di quello che fanno le
   chat: nessun cerchio col fumetto in basso a destra, nessuna nuvoletta,
   nessun pallino rosso con un numero dentro.

   C'e' **una riga di luce e un invito**. E quando si apre non e' una finestra
   che salta in mezzo alla pagina: e' una lama scura che entra da destra, la
   pagina resta dietro e non si perde niente.

   E poi una correzione dell'owner, sempre il 22: *«la sola parola concierge non
   e' abbastanza a far comprendere cio' che e', abbiamo un target abbastanza
   adulto che non e' tecnologico»*. Per questo sotto «CONCIERGE» c'e' scritto
   **Chiedimi pure**: la parola dice chi e', l'invito dice cosa succede se lo
   tocchi.
   =========================================================================== */

.apk{font-family:var(--sans)}

/* --- l'invito, a riposo ---------------------------------------------------- */
.apk__invito{
  position:fixed;right:clamp(14px,2vw,34px);bottom:clamp(14px,2vw,30px);z-index:8980;
  display:flex;align-items:center;gap:15px;
  padding:13px 22px 13px 17px;
  border:1px solid rgba(199,171,130,.42);
  background:rgba(14,13,12,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--ivory);cursor:pointer;
  transition:border-color .35s ease,background .35s ease;
}
.apk__invito:hover,.apk__invito:focus-visible{border-color:var(--champagne);background:rgba(14,13,12,.86)}
.apk__invito:focus-visible{outline:1px solid var(--champagne);outline-offset:3px}

/* il campanello: si vede prima della parola, perche' la parola «concierge»
   non tutti la conoscono e un campanello da bancone si' */
.apk__campanello{display:flex;align-items:center;color:var(--champagne);flex:0 0 auto}
.apk__campanello svg{display:block}
.apk__invito:hover .apk__campanello,.apk__invito:focus-visible .apk__campanello{color:#E0C48C}
/* quando ha risposto, il campanello suona una volta sola */
.apk.is-risposto .apk__campanello{animation:apk-suona 1.4s ease-in-out 2}
@keyframes apk-suona{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.apk.is-risposto .apk__campanello{animation:none}}

/* la riga di luce: e' lei che si allunga col dito sopra, non il riquadro che
   ingrandisce. Un riquadro che cresce e' un bottone; una luce che sale e' una
   presenza. */
.apk__filo{display:block;width:1px;height:38px;background:var(--champagne);transition:height .35s ease}
.apk__invito:hover .apk__filo,.apk__invito:focus-visible .apk__filo{height:46px}

.apk__parole{display:flex;flex-direction:column;gap:5px;text-align:left}
.apk__occhiello{font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(199,171,130,.92);margin:0}
.apk__invitoTesto{font-family:var(--serif);font-size:1.06rem;line-height:1}
.apk__punto{display:block;width:5px;height:5px;border-radius:50%;background:var(--champagne);transition:.35s}

/* «Ti ho risposto»: se la risposta arriva a pannello chiuso cambia la riga e il
   punto si fa piu' grande. Nessun numero rosso: non e' una notifica, e' una
   persona che ha finito di parlare. */
.apk.is-risposto .apk__punto{width:7px;height:7px;box-shadow:0 0 0 4px rgba(199,171,130,.20)}
.apk.is-risposto .apk__invito{border-color:var(--champagne)}

.apk.is-aperto .apk__invito{opacity:0;pointer-events:none;transform:translateY(8px)}
.apk__invito{transition:border-color .35s ease,background .35s ease,opacity .3s ease,transform .3s ease}

/* se un giorno si accende il banner dei cookie, l'invito gli sale sopra invece
   di finirci sotto. */
body:has(#ap-cookie:not([hidden])) .apk__invito{bottom:clamp(180px,26vh,260px)}

/* --- il velo: la pagina resta dietro, sfocata e piu' scura ----------------- */
.apk__velo{
  position:fixed;inset:0;z-index:8990;
  background:rgba(14,13,12,.62);
  -webkit-backdrop-filter:blur(3px) saturate(.75);backdrop-filter:blur(3px) saturate(.75);
  opacity:0;transition:opacity .45s ease;
}
.apk.is-aperto .apk__velo{opacity:1}

/* --- il pannello ----------------------------------------------------------- */
.apk__pannello{
  position:fixed;z-index:9000;top:0;right:0;bottom:0;width:min(452px,100vw);
  display:flex;flex-direction:column;
  background:#131210;border-left:1px solid rgba(199,171,130,.30);
  transform:translateX(100%);transition:transform .5s cubic-bezier(.22,.61,.36,1);
  color:var(--ivory);
}
.apk.is-aperto .apk__pannello{transform:none}

/* la testa: non una fotografia qualunque, ma la nostra luce. Una fotografia
   presa a caso qui sopra litigherebbe con le fotografie dei trattamenti che il
   Concierge mostra due centimetri piu' sotto. [[dle-immagini-mai-a-caso]] */
.apk__testa{position:relative;flex:0 0 auto;height:176px;overflow:hidden;background:#131210}
.apk__luce{position:absolute;inset:0;
  background:
    radial-gradient(120% 130% at 78% 18%,rgba(199,171,130,.30),transparent 58%),
    radial-gradient(90% 100% at 8% 0%,rgba(149,112,77,.22),transparent 60%),
    linear-gradient(180deg,rgba(19,18,16,0) 40%,#131210 100%);
}
.apk__titolo{position:absolute;left:30px;right:70px;top:26px}
.apk__titolo h2{font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.2;margin:9px 0 0}
.apk__titolo .apk__occhiello{color:var(--champagne)}

.apk__chiudi{position:absolute;right:20px;top:20px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--ivory);cursor:pointer;opacity:.85}
.apk__chiudi:hover{opacity:1}
.apk__chiudi:focus-visible{outline:1px solid var(--champagne);outline-offset:2px}

/* --- quello che si dicono -------------------------------------------------- */
.apk__righe{flex:1 1 auto;overflow-y:auto;padding:6px 30px 10px;
  display:flex;flex-direction:column;gap:22px;scrollbar-width:thin}

/* Il Concierge parla **senza riquadro**: e' una voce, e le voci non hanno il
   bordo. Il filo di luce a sinistra dice chi sta parlando. */
.apk__lui{display:flex;gap:14px;font-family:var(--serif);font-size:1.03rem;line-height:1.68;
  color:rgba(255,250,243,.94)}
.apk__lui::before{content:"";display:block;flex:0 0 1px;width:1px;
  background:linear-gradient(180deg,var(--champagne),rgba(199,171,130,0))}
.apk__lui--attesa{color:var(--muted);font-style:italic}
/* il grassetto del modello: un nome messo in risalto, non un grido */
.apk__lui strong{font-weight:400;color:var(--champagne)}

/* Quello che scrive chi legge sta piu' in piccolo, a destra, nell'altro
   carattere: cosi' i due discorsi non si somigliano mai. */
.apk__tu{align-self:flex-end;max-width:300px;padding:2px 0 2px 14px;
  border-left:1px solid rgba(199,171,130,.55);
  font-size:.88rem;line-height:1.6;color:rgba(255,250,243,.72)}

/* --- il riquadro di un trattamento ----------------------------------------- */
.apk__schede{display:flex;flex-direction:column;gap:10px}
.apk__scheda{display:flex;align-items:stretch;text-decoration:none;color:var(--ivory);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);transition:border-color .3s ease}
.apk__scheda:hover{border-color:var(--champagne)}
/* a filo, senza angoli tondi e senza ombra: e' una fascia del sito in
   miniatura, e si clicca tutta. */
.apk__scheda img,.apk__scheda__vuoto{width:86px;height:86px;flex:0 0 86px;background:var(--ink-2);display:block}
.apk__scheda img{object-fit:cover}
.apk__scheda__vuoto{background:linear-gradient(140deg,rgba(199,171,130,.14),rgba(255,255,255,.02))}
.apk__scheda__b{flex:1 1 auto;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.apk__scheda__b b{font-family:var(--serif);font-weight:400;font-size:.98rem;line-height:1.25}
.apk__scheda__b span{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,250,243,.52)}
/* il prezzo non va a capo fra l'euro e il numero: «€ / 130,00» su due righe
   e' il modo piu' veloce per far sembrare caro qualcosa che non lo e'. */
.apk__scheda__p{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:6px;padding:0 16px;font-family:var(--serif);font-size:1.1rem;color:var(--champagne);white-space:nowrap}

/* --- dove si scrive -------------------------------------------------------- */
.apk__scrivi{flex:0 0 auto;display:flex;align-items:center;gap:12px;
  margin:0 30px;padding:14px 0 2px;border-top:1px solid rgba(255,255,255,.16)}
.apk__cursore{display:block;width:1px;height:17px;background:var(--champagne)}
.apk__scrivi input{flex:1 1 auto;border:0;background:transparent;color:var(--ivory);
  font-family:var(--sans);font-size:.95rem;padding:8px 0}
.apk__scrivi input::placeholder{color:rgba(255,250,243,.38)}
.apk__scrivi input:focus{outline:none}
.apk__scrivi button{border:0;background:transparent;color:var(--champagne);cursor:pointer;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.apk__scrivi button[disabled]{opacity:.4;cursor:default}
.apk__scrivi button[hidden]{display:none}

/* il microfono: acceso e' una luce che respira, non un pallino rosso che
   lampeggia. E sotto, la riga che dice cosa sta succedendo. */
.apk__voce{position:relative}
.apk__voce.is-ascolta{color:#E0C48C}
.apk__voce.is-ascolta::after{content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px solid rgba(199,171,130,.55);animation:apk-respira 1.6s ease-in-out infinite}
@keyframes apk-respira{0%,100%{transform:scale(.72);opacity:.25}50%{transform:scale(1);opacity:.85}}
@media (prefers-reduced-motion:reduce){.apk__voce.is-ascolta::after{animation:none;opacity:.6}}
.apk__scrivi button:focus-visible{outline:1px solid var(--champagne);outline-offset:2px}
/* nessuna casella col bordo, nessun bottone tondo: un filo, un cursore, una
   freccia. */

.apk__nota{flex:0 0 auto;margin:10px 30px 24px;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,250,243,.34)}
/* il numero di telefono non si spezza a meta': un numero andato a capo non si
   legge, e questo e' il numero che si chiama quando il Concierge non sa. */
.apk__nota a{color:rgba(199,171,130,.9);white-space:nowrap}

/* --- la Carta, dentro il Concierge ---------------------------------------- */
/* il collegamento nella frase: sottolineato, perche' chi non e' tecnologico
   riconosce un link da quello e non dal colore */
.apk__lui a.apk__link{color:var(--champagne);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.apk__lui a.apk__link:hover{color:#E0C48C}
/* i due bottoni sotto la domanda: leggere e accettare */
.apk__carta{display:flex;flex-wrap:wrap;gap:10px;padding-left:15px}
.apk__carta button,.apk__leggiPiede button,.apk__leggiChiudi{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 18px;cursor:pointer;border:1px solid rgba(199,171,130,.55);
  background:transparent;color:var(--ivory);transition:border-color .3s ease,background .3s ease}
.apk__carta button:hover,.apk__leggiChiudi:hover{border-color:var(--champagne)}
.apk__carta .apk__cartaSi,.apk__leggiPiede .apk__cartaSi{background:var(--champagne);border-color:var(--champagne);color:#131210}
.apk__carta .apk__cartaSi:hover,.apk__leggiPiede .apk__cartaSi:hover{background:#E0C48C}
.apk__carta button:focus-visible,.apk__leggiPiede button:focus-visible,.apk__leggiChiudi:focus-visible{
  outline:1px solid var(--champagne);outline-offset:3px}
/* il lettore: si stende sopra la conversazione, dentro la lama */
.apk__leggi{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;background:#131210}
.apk__leggi[hidden]{display:none}
.apk__leggiTesta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid rgba(199,171,130,.30);
  font-family:var(--serif);font-size:1.05rem}
.apk__leggiChiudi{padding:9px 14px;font-size:.7rem}
.apk__leggi iframe{flex:1 1 auto;width:100%;border:0;background:#fff}
.apk__leggiPiede{padding:14px 20px 18px;border-top:1px solid rgba(199,171,130,.30)}
.apk__leggiPiede[hidden]{display:none}
.apk__leggiPiede button{width:100%}

.apk__etichetta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- sul telefono ---------------------------------------------------------- */
@media (max-width:640px){
  .apk__invito{padding:11px 18px 11px 14px;gap:12px}
  .apk__invitoTesto{font-size:.98rem}
  .apk__pannello{width:100vw;border-left:0;transform:translateY(100%)}
  .apk.is-aperto .apk__pannello{transform:none}
  .apk__testa{height:150px}
  .apk__titolo{left:22px;right:62px;top:34px}
  .apk__titolo h2{font-size:1.4rem}
  .apk__righe{padding-left:22px;padding-right:22px;gap:20px}
  .apk__scrivi{margin:0 22px}
  .apk__nota{margin:10px 22px 26px}
  /* la linguetta in cima, come una scheda che si tira su */
  .apk__testa::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:10px;
    width:46px;height:3px;border-radius:2px;background:rgba(255,250,243,.35)}
}

/* chi ha chiesto meno movimento non lo deve subire da noi */
@media (prefers-reduced-motion:reduce){
  .apk__pannello,.apk__velo,.apk__filo,.apk__invito{transition:none}
}