/*
 * ChattoVip — identità "la reception di notte".
 * Il mondo: il banco della reception di un hotel italiano a fine turno.
 * Ottone del casellario delle chiavi, livrea verde del portiere, marmo,
 * carta intestata. Firma: il portachiavi d'ottone (vedi .cv-keytag).
 *
 * Font ospitati qui (non Google Fonts: niente trasferimento IP a terzi).
 * Bodoni Moda (Parma) per i titoli, Hanken Grotesk per il testo,
 * IBM Plex Mono per numeri di camera, prezzi e dati. Licenza OFL in /fonts.
 */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/bodoni-moda-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/fonts/bodoni-moda-latin-wght-italic.woff2") format("woff2-variations"),
       url("/fonts/bodoni-moda-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations"),
       url("/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colori (nomi dal mondo della reception) */
  --cv-notte: #13223A;        /* inchiostro: testi, intestazioni, fondi scuri */
  --cv-notte-2: #1E3252;      /* notte più chiara per superfici scure */
  --cv-ottone: #C9973F;       /* ottone: riempimenti, portachiavi, accenti (MAI testo su bianco) */
  --cv-ottone-chiaro: #E8C77E;/* riflesso dell'ottone */
  --cv-ottone-scuro: #8A5A12; /* ottone per testi e link su chiaro (6,3:1 su bianco) */
  --cv-livrea: #1F5C4A;       /* verde livrea del portiere: conferme, successo */
  --cv-marmo: #F5F6F4;        /* fondo pagina */
  --cv-marmo-2: #E7E9E5;      /* bordi, separatori */
  --cv-carta: #FFFFFF;        /* superfici */
  --cv-grafite: #4A5568;      /* testo secondario (7,4:1 su bianco) */
  --cv-errore: #B42318;

  /* Tipografia */
  --cv-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --cv-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cv-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Movimento */
  --cv-ease-out: cubic-bezier(.22, 1, .36, 1);
  --cv-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --cv-dur-1: 160ms;
  --cv-dur-2: 320ms;
  --cv-dur-3: 640ms;

  /* Forme */
  --cv-radius: 14px;
  --cv-shadow-1: 0 1px 2px rgba(19, 34, 58, .06), 0 1px 1px rgba(19, 34, 58, .04);
  --cv-shadow-2: 0 10px 30px -12px rgba(19, 34, 58, .28), 0 2px 6px rgba(19, 34, 58, .06);
  --cv-focus: 0 0 0 3px #fff, 0 0 0 5px var(--cv-ottone-scuro);
}

/* ── Utilità tipografiche ─────────────────────────────────────────────── */
.cv-display { font-family: var(--cv-display); font-weight: 600; letter-spacing: -.01em; font-optical-sizing: auto; }
.cv-display-italic { font-family: var(--cv-display); font-style: italic; font-weight: 500; }
.cv-mono { font-family: var(--cv-mono); font-feature-settings: "zero" 1; letter-spacing: 0; }
.cv-eyebrow { font-family: var(--cv-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cv-ottone-scuro); }

/* ── Firma: il portachiavi d'ottone ───────────────────────────────────── */
/* Un bottone a forma di portachiavi d'albergo: foro con anello, numero
   inciso, entra oscillando come una chiave appena appesa al casellario. */
.cv-keytag {
  --tag-h: 52px;
  position: relative;
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: var(--tag-h);
  padding: .65rem 1.4rem .65rem 2.6rem;
  /* why: con 999px il browser riduce TUTTI gli angoli in proporzione e quelli a destra
     tornavano quadrati: raggio pari a metà altezza. */
  border-radius: calc(var(--tag-h) / 2) 14px 14px calc(var(--tag-h) / 2);
  background:
    linear-gradient(115deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 60%) no-repeat,
    linear-gradient(180deg, var(--cv-ottone-chiaro), var(--cv-ottone) 55%, #A97A2C);
  background-size: 250% 100%, 100% 100%;
  background-position: 120% 0, 0 0;
  color: var(--cv-notte);
  font-family: var(--cv-body); font-weight: 700; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.12), var(--cv-shadow-2);
  transform-origin: 1.25rem 50%;
  transition: transform var(--cv-dur-2) var(--cv-ease-spring), box-shadow var(--cv-dur-2) var(--cv-ease-out), background-position 900ms var(--cv-ease-out);
}
.cv-keytag::before { /* il foro del portachiavi */
  content: ""; position: absolute; left: .85rem; top: 50%;
  width: .8rem; height: .8rem; margin-top: -.4rem; border-radius: 50%;
  background: var(--cv-marmo); box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.cv-keytag .cv-keytag-num {
  font-family: var(--cv-mono); font-weight: 500; font-size: .8rem;
  padding: .1rem .45rem; border-radius: 6px; border: 1px solid rgba(19,34,58,.35);
}
.cv-keytag:hover { transform: rotate(-2deg) translateY(-1px); background-position: -20% 0, 0 0; }
.cv-keytag:focus-visible { outline: none; box-shadow: var(--cv-focus), var(--cv-shadow-2); }
.cv-keytag.is-swinging { animation: cv-swing 1600ms var(--cv-ease-out) both; }

@keyframes cv-swing {
  0%   { transform: rotate(-24deg); opacity: 0; }
  12%  { opacity: 1; }
  30%  { transform: rotate(14deg); }
  48%  { transform: rotate(-8deg); }
  64%  { transform: rotate(4deg); }
  80%  { transform: rotate(-1.5deg); }
  100% { transform: rotate(0); }
}

/* ── Movimento condiviso ──────────────────────────────────────────────── */
/* Comparsa allo scorrimento: brand.js aggiunge .is-in quando entra in vista.
   Senza JS (o con movimento ridotto) il contenuto è sempre visibile. */
.cv-js .cv-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--cv-dur-3) var(--cv-ease-out), transform var(--cv-dur-3) var(--cv-ease-out); transition-delay: calc(var(--cv-i, 0) * 80ms); }
.cv-js .cv-reveal.is-in { opacity: 1; transform: none; }

/* Ingresso di pagina a cascata (titolo, sottotitolo, azioni) */
.cv-rise { animation: cv-rise var(--cv-dur-3) var(--cv-ease-out) both; animation-delay: calc(var(--cv-i, 0) * 90ms); }
@keyframes cv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Riga di sottolineatura che cresce sui link */
.cv-link { color: var(--cv-ottone-scuro); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--cv-dur-2) var(--cv-ease-out); }
.cv-link:hover, .cv-link:focus-visible { background-size: 100% 1px; }

/* Card che si sollevano appena */
.cv-lift { transition: transform var(--cv-dur-2) var(--cv-ease-out), box-shadow var(--cv-dur-2) var(--cv-ease-out); }
.cv-lift:hover { transform: translateY(-3px); box-shadow: var(--cv-shadow-2); }

/* Puntini "sta scrivendo" */
.cv-typing { display: inline-flex; gap: 4px; align-items: center; }
.cv-typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; animation: cv-dot 1.1s infinite ease-in-out; }
.cv-typing i:nth-child(2) { animation-delay: .15s; }
.cv-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cv-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Scheletro di caricamento */
.cv-skeleton { position: relative; overflow: hidden; background: var(--cv-marmo-2); border-radius: 8px; }
.cv-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: cv-shimmer 1.4s infinite; }
@keyframes cv-shimmer { to { transform: translateX(100%); } }

/* Il campanello: un tintinnio breve (usato una volta, mai in loop) */
@keyframes cv-ring { 0%,100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
.cv-ring { animation: cv-ring 900ms var(--cv-ease-out) 1; transform-origin: 50% 10%; }

/* Focus sempre visibile */
.cv-focusable:focus-visible { outline: none; box-shadow: var(--cv-focus); }

/* ── Movimento ridotto: tutto fermo, tutto visibile ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .cv-js .cv-reveal { opacity: 1 !important; transform: none !important; }
  /* animation-delay non è toccato dalla regola globale: senza questo i .cv-rise
     restavano invisibili fino a mezzo secondo. */
  .cv-rise, .cv-keytag.is-swinging, .cv-ring { animation: none !important; opacity: 1 !important; }
  .cv-skeleton::after { display: none; }
}