/* ═══════════════════════════════════════════════════════════
   responsive.css — Anima Viva
   Sistema di breakpoint condiviso per l'intero progetto:
   smartphone → tablet → scrivania touch → totem 4K (3840×2160).
   Da includere in TUTTE le pagine, insieme a touch-adapt.js.
   Non sostituisce i CSS di pagina: li completa scalando la
   dimensione del font radice (rem) e adattando l'input touch.
═══════════════════════════════════════════════════════════ */

/* ── SCALA TIPOGRAFICA DI BASE PER FASCIA DI SCHERMO ──
   1024–1919px resta invariato (16px): è la fascia su cui le
   pagine sono state disegnate. Sotto e sopra, la dimensione del
   font radice viene scalata: tutto ciò che è in rem/em (testi,
   padding, gap, icone) si adatta automaticamente. */

/* Smartphone piccoli (portrait) */
@media (max-width: 380px) {
  html { font-size: 13.5px; }
}
/* Smartphone standard */
@media (min-width: 381px) and (max-width: 480px) {
  html { font-size: 14.5px; }
}
/* Smartphone landscape / phablet */
@media (min-width: 481px) and (max-width: 767px) {
  html { font-size: 15px; }
}
/* Tablet verticale / mini scrivania touch */
@media (min-width: 768px) and (max-width: 1023px) {
  html { font-size: 15.5px; }
}
/* Scrivania touchscreen Full HD */
@media (min-width: 1920px) and (max-width: 2559px) {
  html { font-size: 18px; }
}
/* Totem QHD */
@media (min-width: 2560px) and (max-width: 3839px) {
  html { font-size: 21px; }
}
/* Totem 4K — 3840×2160 */
@media (min-width: 3840px) {
  html { font-size: 25px; }
}
/* Smartphone in orizzontale: altezza ridotta, testo più compatto */
@media (max-width: 767px) and (orientation: landscape) {
  html { font-size: 13.5px; }
}

/* ── CONTENITORI: sui totem enormi evita che il contenuto resti
   piccolo e centrato in un mare di spazio vuoto ── */
@media (min-width: 2560px) {
  .app, main, #main { max-width: 1900px !important; }
}
@media (min-width: 3840px) {
  .app, main, #main { max-width: 2600px !important; }
}

/* ── IMMAGINI / MEDIA SEMPRE FLUIDI ── */
img, video { max-width: 100%; height: auto; }

/* ── TAVOLI TOUCH E MONITOR ORIZZONTALI GRANDI (≥1920px, landscape) ──
   3840×2160 è un formato molto largo e poco alto: invece di lasciare
   che le griglie restino piccole al centro, si dà più respiro tra
   i blocchi così lo spazio extra viene percepito e non sprecato. */
@media (min-width: 1920px) and (orientation: landscape) {
  .analysis-grid, .charts-grid, .charts-grid-3, .charts-grid-wide,
  .geo-grid, .geo-grid-3, .kpi-grid, .kpi-grid-geo {
    gap: 1.6rem;
  }
}
@media (min-width: 2560px) and (orientation: landscape) {
  .analysis-grid, .charts-grid, .charts-grid-3, .charts-grid-wide,
  .geo-grid, .geo-grid-3, .kpi-grid, .kpi-grid-geo,
  .main-grid, .letter-pages {
    gap: 2rem;
  }
  main, .camera-panel, .results-panel { gap: 2.4rem; }
}
@media (min-width: 3840px) and (orientation: landscape) {
  .analysis-grid, .charts-grid, .charts-grid-3, .charts-grid-wide,
  .geo-grid, .geo-grid-3, .kpi-grid, .kpi-grid-geo,
  .main-grid, .letter-pages {
    gap: 2.6rem;
  }
  .search-results { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

/* Tavolo touch orizzontale: alza leggermente i pannelli fissi in basso
   così restano comodi da raggiungere anche su un piano di 2160px di altezza */
@media (min-width: 1920px) and (orientation: landscape) {
  #soundPanel, .aiv-touch-hint, .aiv-back-btn { bottom: 2.4rem; }
}

/* ══════════════════════════════════════════════════════════
   MODALITÀ TOUCH (totem, scrivanie touchscreen, tablet)
   La classe .touch-device viene aggiunta da touch-adapt.js
════════════════════════════════════════════════════════════ */

/* Disattiva il cursore custom disegnato per il mouse */
html.touch-device,
html.touch-device * {
  cursor: auto !important;
}
html.touch-device .cursor,
html.touch-device .cursor-trail,
html.touch-device .cursor-dot,
html.touch-device .cp-dot,
html.touch-device #cursor,
html.touch-device #cursorTrail,
html.touch-device #cur,
html.touch-device #curT {
  display: none !important;
}

/* Gesti più reattivi, niente doppio-tap-zoom accidentale */
html.touch-device {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html.touch-device img,
html.touch-device a,
html.touch-device button {
  -webkit-touch-callout: none;
}

/* Target minimi per dita (WCAG 2.5.5 ~44px) sugli elementi interattivi
   comuni a tutte le pagine del progetto */
html.touch-device button,
html.touch-device [type="button"],
html.touch-device [type="submit"],
html.touch-device [type="reset"],
html.touch-device select,
html.touch-device .btn,
html.touch-device .analyze-btn,
html.touch-device .back-btn,
html.touch-device .tb-btn,
html.touch-device .dr-btn,
html.touch-device .sound-btn,
html.touch-device .btn-primary,
html.touch-device .btn-secondary,
html.touch-device .tab {
  min-height: 44px;
}

/* Hotspot delle pagine "horizon" (manoscritti): più facili da toccare */
html.touch-device .hs {
  width: 34px;
  height: 34px;
}

/* Scrollbar più spessa: più facile trascinarla col dito */
html.touch-device ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* Pannelli/tooltip centrati a larghezza fissa (es. Horizon Kids .tip-inner):
   non devono uscire dallo schermo sugli smartphone più piccoli */
@media (max-width: 480px) {
  .tip-inner, #tip, #hud, #leg { max-width: 92vw; }
}

/* ══════════════════════════════════════════════════════════
   FEEDBACK TATTILE — generato da touch-adapt.js
   Guida l'utente sul touch: conferma i tap, mostra cosa è
   interattivo, invita a interagire se il totem resta inattivo.
════════════════════════════════════════════════════════════ */

/* ── 1. Ripple al tocco ── */
.aiv-ripple {
  position: fixed;
  z-index: 9995;
  left: 0; top: 0;
  width: 12px; height: 12px;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232,184,75,0.38) 0%, rgba(201,148,58,0.16) 45%, rgba(201,148,58,0) 72%);
  border: 1px solid rgba(232,184,75,0.55);
  animation: aiv-ripple-anim 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes aiv-ripple-anim {
  0%   { width: 10px; height: 10px; opacity: 0.95; }
  100% { width: 72px; height: 72px; opacity: 0; }
}

/* ── 2. Stato "premuto" sull'elemento toccato ──
   Non usa transform (per non entrare in conflitto con eventuali
   animazioni hover già presenti), solo luce e bordo. */
html.touch-device .aiv-press {
  filter: brightness(1.25) saturate(1.15);
  box-shadow: 0 0 0 3px rgba(232,184,75,0.4) !important;
  transition: filter 0.08s ease, box-shadow 0.08s ease;
}

/* ── 3. Invito al tocco (attract hint) ── */
.aiv-touch-hint {
  position: fixed;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%) translateY(10px);
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(10,8,6,0.9);
  border: 1px solid rgba(201,148,58,0.35);
  color: #f0e2c0;
  font-family: 'DM Mono', monospace, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
  white-space: nowrap;
}
.aiv-touch-hint.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.aiv-touch-hint .aiv-hint-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #e8b84b;
  box-shadow: 0 0 6px #e8b84b;
  flex-shrink: 0;
  animation: aiv-hint-pulse 1.4s ease-in-out infinite;
}
@keyframes aiv-hint-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
@media (max-width: 480px) {
  .aiv-touch-hint { font-size: 0.62rem; padding: 0.55rem 1.1rem; bottom: 1.4rem; }
}

/* ── 4. Tasto virtuale "Indietro" ──
   Fisso in basso a sinistra, sempre sopra il resto: su un totem o
   un tavolo touch in modalità kiosk non c'è il pulsante del browser. */
.aiv-back-btn {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 9980;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(10,8,6,0.82);
  border: 1px solid rgba(201,148,58,0.4);
  color: #f0e2c0;
  font-family: 'DM Mono', monospace, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.75rem 1.1rem;
  border-radius: 100px;
  backdrop-filter: blur(14px);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
  min-height: 44px;
  min-width: 44px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.aiv-back-btn:hover {
  background: rgba(201,148,58,0.2);
  border-color: rgba(201,148,58,0.75);
}
.aiv-back-btn .aiv-back-arrow { font-size: 1rem; line-height: 1; }
.aiv-back-btn .aiv-back-label { white-space: nowrap; }
@media (max-width: 480px) {
  .aiv-back-btn .aiv-back-label { display: none; }
  .aiv-back-btn { padding: 0.7rem; gap: 0; }
}
@media (min-width: 2560px) {
  .aiv-back-btn { font-size: 0.85rem; padding: 1rem 1.6rem; left: 1.6rem; bottom: 1.6rem; }
}
@media (min-width: 3840px) {
  .aiv-back-btn { font-size: 1rem; padding: 1.2rem 1.9rem; left: 2rem; bottom: 2rem; }
}