/* BANNER DEI COOKIE - markup e logica in analytics.js.
   Foglio a se' perche' tre pagine caricano quello script ma hanno stili propri (i due
   curriculum e lab/cortometraggio.html). Colori in token con valore di ripiego. */

/* Contenitore di posizione, invisibile. Alto 100dvh e non ancorato con bottom: su iOS un
   elemento fixed misura dal viewport di layout, che finisce sotto la barra di Safari. */
.ck-banner{position:fixed;left:0;right:0;top:0;height:100dvh;z-index:300;
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none;
  padding:0 clamp(10px,3vw,24px) calc(3rem + env(safe-area-inset-bottom,0px))}
/* senza questa riga l'attributo hidden non nasconde: il display:none del browser
   ha la precedenza più bassa di tutte e il display:flex qui sopra lo batte */
.ck-banner[hidden]{display:none}
/* su mobile la scheda si centra: in fondo ci stanno già nome e mestiere della
   copertina, e al centro non incontra niente senza bisogno di misurarli */
@media(max-width:920px){.ck-banner{align-items:center;padding-bottom:0}}

/* La scheda: qui vive tutto l'aspetto, e qui tornano i tap. */
.ck-in{pointer-events:auto;max-width:min(80%,var(--maxw,1360px));margin:0 auto;
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:14px clamp(14px,3.5vw,34px);border-radius:18px;overflow:hidden;
  background:color-mix(in srgb,var(--card,#1b1915) 10%,transparent);
  color:var(--cream,#f0ece2);
  border:1px solid var(--line-strong,rgba(240,236,226,.22));
  box-shadow:0 18px 50px -18px rgba(0,0,0,.55);zoom:0.9;
  font-family:var(--sans,"Inter",system-ui,sans-serif);font-size:13px;line-height:1.5}
  
/* Il fondo e' quasi trasparente e dietro passa il video: il contrasto del testo non puo'
   dipendere dal fotogramma. Sui temi scuri sta gia' sopra 8, misurato, e il filtro resta quello.
   Sui chiari scendeva a 1,9: contrast(.4) avvicina la scala a un tono medio (brightness da sola
   non basta, il nero moltiplicato resta nero) e brightness(1.5) la solleva. Valori piu' leggeri
   che passano 4,5, cosi' l'immagine dietro continua a vedersi. */
.ck-in{-webkit-backdrop-filter:blur(20px) saturate(1.15);backdrop-filter:blur(20px) saturate(1.15)}
:root[data-theme="alba"] .ck-in,
:root[data-theme="mattino"] .ck-in,
:root[data-theme="tarda-mattinata"] .ck-in,
:root[data-theme="mezzogiorno"] .ck-in,
:root[data-theme="primo-pomeriggio"] .ck-in,
:root[data-theme="giorno-pieno"] .ck-in,
:root[data-theme="tardo-pomeriggio"] .ck-in{
  -webkit-backdrop-filter:blur(20px) saturate(1.1) contrast(.34) brightness(1.62);
  backdrop-filter:blur(20px) saturate(1.1) contrast(.34) brightness(1.62)}

.ck-copy{flex:1 1 420px;min-width:0}
.ck-copy strong{display:block;margin-bottom:4px;font-size:15px}
/* non var(--muted) puro: sui temi chiari misurava 3,8 di contrasto, sotto soglia */
.ck-copy p{margin:0;color:color-mix(in srgb,var(--cream,#f0ece2) 72%,var(--muted,#9a958a))}
.ck-copy a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.ck-act{display:flex;gap:10px;flex:0 0 auto}
.ck-btn{font:inherit;font-weight:600;cursor:pointer;padding:10px 22px;border-radius:999px;
  border:1px solid var(--line-strong,rgba(240,236,226,.22));background:transparent;
  color:inherit;transition:background .18s,border-color .18s,color .18s}
.ck-btn:hover{border-color:var(--cream,#f0ece2)}
.ck-btn.ck-yes{background:var(--accent,#e6c98a);border-color:transparent;color:var(--on-accent,#1a1813)}
.ck-btn.ck-yes:hover{background:var(--accent-hover,#f0d9a8)}
.ck-btn:focus-visible{outline:2px solid var(--accent,#e6c98a);outline-offset:3px}
@media(max-width:560px){.ck-act{width:100%}.ck-btn{flex:1}}

/* comparsa lenta, sulla scheda e non sul contenitore a schermo intero */
@media(prefers-reduced-motion:no-preference){
  .ck-in{animation:ck-up .9s cubic-bezier(.22,1,.36,1) both}
  @keyframes ck-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}