:root{
  --primary:#37B0C6;
  --secondary:#64748b;

  /* neutrals (Apple/Google-ish) */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-soft:#f8fafc;   /* simile a slate-50 */
  --border:rgba(15, 23, 42, 0.08); /* slate-900 a bassa opacità */
  --shadow:0 18px 45px rgba(2, 6, 23, 0.08);
  --shadow-sm:0 10px 28px rgba(2, 6, 23, 0.06);

  /* Curve di easing custom: le curve CSS built-in (ease/ease-out) sono
     troppo "deboli" per sentirsi intenzionali. Fonte: Emil Kowalski /
     easing.dev */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);

  /* Glassmorphism */
  --glass-bg:rgba(255, 255, 255, 0.78);
  --glass-border:rgba(255, 255, 255, 0.5);
  --glass-border-top:rgba(255, 255, 255, 0.9); /* riflesso: la luce colpisce il bordo superiore */
  --glass-shadow:0 10px 34px rgba(31, 38, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --glass-blur:20px;
}

/* Utility colors */
.text-primary{ color:var(--primary); }
.bg-primary{ background-color:var(--primary); }
.text-secondary{ color:var(--secondary); }

/* Google Material Icons */
.material-symbols-outlined{
  font-variation-settings:
    "FILL" 0,
    "wght" 500,
    "GRAD" 0,
    "opsz" 24;
  line-height:1;
}

/* Smooth scroll */
html{
  scroll-behavior:smooth;
}

/* BODY - sfondo fisso con macchie di colore del brand (blu/giallo/magenta) dietro le card in vetro */
body{
  background-color:#eef3f6 !important;
  background-image:
    radial-gradient(640px circle at 6% 10%, rgba(55, 176, 198, 0.32), transparent 60%),
    radial-gradient(560px circle at 94% 22%, rgba(255, 152, 21, 0.22), transparent 60%),
    radial-gradient(600px circle at 26% 96%, rgba(222, 108, 157, 0.26), transparent 60%),
    radial-gradient(520px circle at 88% 88%, rgba(55, 176, 198, 0.16), transparent 60%) !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

/* =========================
   Apple/Google subtle surfaces
   ========================= */

/* Usa questa classe sulle card principali per un look glassmorphism */
.soft-card{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-top);
  border-radius:24px;
  box-shadow:var(--glass-shadow);
}

/* Hover leggero (per card cliccabili) */
.soft-card--hover{
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
.soft-card--hover:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 45px rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border-color:rgba(55, 176, 198, 0.35); /* accenno primary */
}

/* Sezione "contenitore": sfondo trasparente per lasciar vedere le macchie di colore dietro le card */
.soft-section{
  background:transparent;
}

/* Separatore fine (optional) */
.hr-soft{
  height:1px;
  background:linear-gradient(to right, transparent, rgba(15,23,42,.10), transparent);
  border:0;
}

/* CTA / blocchi scuri (se li usi) */
.cta-elevated{
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 70px rgba(0,0,0,.22);
}

/* Migliora un filo la resa del testo */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.text-soft-shadow{
  text-shadow:
    0 2px 8px rgba(0,0,0,.35),
    0 1px 2px rgba(0,0,0,.25);
}

.brand-font{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.02em;
}

/* Il tracking negativo pensato per i titoli grandi penalizza la leggibilità
   del testo piccolo (badge, pillole orari): qui va quasi neutro */
.brand-font.text-xs,
.brand-font.text-\[10px\]{
  letter-spacing: -0.005em;
}

/* Underline elegante sui link navbar */
.nav-link{
  position: relative;
}

.nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 3px;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.28s ease;
}

.nav-link:hover::after{
  width: 100%;
}

/* Stato attivo (se vuoi aggiungere .active al link della pagina corrente) */
.nav-link.active{
  color: var(--primary);
}
.nav-link.active::after{
  width: 100%;
}

/* Migliora un filo la resa del testo su alcuni device */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fadeInDown 0.3s ease-out;
}

/* Forza il blur su Safari iOS e altri browser mobile */
.backdrop-blur-xl {
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
}

/* Backdrop fade */
#mobileBackdrop {
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none; /* non cliccabile quando chiuso */
}
#mobileBackdrop.is-open {
  opacity: 1;
  pointer-events: auto; /* cliccabile quando aperto */
}

/* Hamburger -> X */
#menuBtn .menu-line{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(55, 65, 81, 0.9); /* gray-700-ish */
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
#menuBtn .menu-line.top{ top: 6px; }
#menuBtn .menu-line.mid{ top: 12px; }
#menuBtn .menu-line.bot{ top: 18px; }

#menuBtn.is-open .menu-line.top{
  top: 12px;
  transform: rotate(45deg);
}
#menuBtn.is-open .menu-line.mid{
  opacity: 0;
}
#menuBtn.is-open .menu-line.bot{
  top: 12px;
  transform: rotate(-45deg);
}

/* Link navbar e CTA: proprietà esplicite invece di "transition: all"
   (rimosso dalle classi Tailwind in ogni pagina) */
.nav-link{
  transition: color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.cta-nav{
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}

/* ============================================
   Lightbox (dove-visito.html)
   Stesso pattern di #mobileBackdrop: opacity + classe is-open
   ============================================ */
#lightbox{
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
#lightbox.is-open{
  opacity: 1;
}
#lightboxImg{
  transform: scale(0.95);
  opacity: 0;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}
#lightbox.is-open #lightboxImg{
  transform: scale(1);
  opacity: 1;
}

/* ============================================
   Tab content (chi-sono.html)
   Classe già referenziata dal JS ma mai definita: il fade
   non veniva mai eseguito. Il JS toglie/riaggiunge la classe
   per far ripartire l'animazione ad ogni cambio tab.
   ============================================ */
@keyframes fadeSlideIn {
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-slide-in{
  animation: fadeSlideIn 200ms var(--ease-out);
}

/* Sottolineatura tab attiva: da toggle "hidden" secco a transizione */
.tab-underline{
  transform: scaleX(0);
  opacity: 0;
  transform-origin: left;
  transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.tab-btn.is-active .tab-underline{
  transform: scaleX(1);
  opacity: 1;
}

/* ============================================
   Card "Le mie specialità" (index.html)
   Ingresso leggero, a scaglioni, quando la sezione entra in viewport
   ============================================ */
.spec-card{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.spec-card.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Foto studio (dove-visito.html): hover di ingrandimento
   solo su dispositivi con puntatore fine (evita l'hover
   "incollato" dopo un tap su mobile)
   ============================================ */
.zoom-hover{
  transition: transform 250ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .zoom-hover:hover{
    transform: scale(1.02);
  }
}

/* Rispetta la preferenza di movimento ridotto: niente animazioni azzerate
   del tutto (rischia di nascondere contenuto), solo molto più rapide */
@media (prefers-reduced-motion: reduce){
  #lightbox,
  #lightboxImg,
  .fade-slide-in,
  .tab-underline,
  .spec-card,
  .zoom-hover{
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ============================================
   prefers-reduced-transparency: irrigidisce il vetro
   invece di lasciarlo semi-trasparente/sfocato
   ============================================ */
@media (prefers-reduced-transparency: reduce){
  .soft-card,
  header .bg-white\/80,
  #mobileMenu > div{
    background:#ffffff !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

/* ============================================
   prefers-contrast: more — sfondo quasi solido
   con bordo netto invece del vetro sottile
   ============================================ */
@media (prefers-contrast: more){
  .soft-card{
    background:#ffffff;
    border:2px solid rgba(15, 23, 42, 0.35);
  }
}

/* ============================================
   Liquid Glass (servizi.html, pannello testo sopra la foto hero)
   Vetro "spesso" in stile Apple: più blur/saturazione del semplice
   glassmorphism, riflesso speculare in alto, sheen diagonale che
   simula la luce che attraversa un materiale con profondità.
   ============================================ */
.liquid-glass{
  position: relative;
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 28px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 1px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  isolation: isolate;
}
/* Sheen diagonale: simula la rifrazione della luce nel vetro */
.liquid-glass::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.32) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0) 65%,
    rgba(255, 255, 255, 0.12) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Riflesso speculare sul bordo superiore: la luce "cattura" il vetro */
.liquid-glass::after{
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  pointer-events: none;
  z-index: 0;
}
.liquid-glass > *{
  position: relative;
  z-index: 1;
}

/* Variante scura: overlay nero invece che bianco, per pannelli sopra
   sfondi già scuri (es. bg-gray-900) dove il vetro bianco schiarirebbe
   troppo e ridurrebbe il contrasto col testo chiaro */
.liquid-glass--dark{
  background: rgba(10, 10, 15, 0.35);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px 1px rgba(0, 0, 0, 0.35);
}
.liquid-glass--dark::before{
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0) 65%,
    rgba(255, 255, 255, 0.05) 100%);
}
.liquid-glass--dark::after{
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

@media (prefers-reduced-transparency: reduce){
  .liquid-glass{
    background: rgba(20, 20, 20, 0.65);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}