/* ============================================================
   STYLE.CSS — dettagli non coperti da Tailwind:
   variabile accento, glassmorphism, card browser, keyframe,
   stati del form, prefers-reduced-motion.
   ============================================================ */

/* ------------------------------------------------------------
   BRAND — CAMBIA QUI IL COLORE ACCENTO.
   Un'unica variabile ritinteggia tutto il sito (navbar attiva,
   hover delle CTA, glow delle card, focus).
   Per un look monocromatico: --accent: #FFFFFF;
   ------------------------------------------------------------ */
:root {
  --accent: #4F7CFF;

  /* Palette di supporto (allineata alla config Tailwind inline) */
  --base:     #0A0A0A;
  --surface:  #111111;
  --grigio-1: #A1A1A1;
  --grigio-2: #6B6B6B;
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */

/* Smooth scroll solo se l'utente non preferisce ridurre il movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* Le ancore non finiscono sotto l'header sticky */
section[id] { scroll-margin-top: 4.5rem; }

/* Focus visibile e coerente su tutto il sito */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Checkbox tinta con l'accento */
input[type="checkbox"] { accent-color: var(--accent); }

/* Selezione del testo */
::selection { background: var(--accent); color: #fff; }

/* Link "salta al contenuto": invisibile finché non riceve focus */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: #fff;
  color: #000;
  border-radius: 10px;
  font-size: 0.85rem;
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------
   HEADER — trasparente, si opacizza con blur allo scroll
   ------------------------------------------------------------ */
#header {
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease,
              backdrop-filter 0.3s ease;
}
#header.is-scrolled {
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Link di navigazione: grigio → bianco su hover, accento se attivo */
.nav-link {
  color: var(--grigio-1);
  transition: color 0.2s ease;
}
.nav-link:hover { color: #fff; }
.nav-link.active { color: var(--accent); } /* impostato dallo scroll-spy */

.mobile-link {
  display: block;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Pannello del menu mobile */
.mobile-menu {
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Icona hamburger: tre linee che diventano una X quando aperto */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hamburger span {
  width: 16px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
[aria-expanded="true"] .hamburger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .hamburger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ------------------------------------------------------------
   TIPOGRAFIA HERO — titolone responsive con clamp()
   ------------------------------------------------------------ */
/* Sempre su una sola riga, grande al centro dello schermo: la
   dimensione è fluida (vw) così si adatta a ogni larghezza.
   NOTA: se cambi il nome brand, ritocca questi valori in base
   alla lunghezza (nome più corto → valori più alti, e viceversa) */
.titolo-hero {
  font-size: clamp(2.8rem, 11vw, 13rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Titolo definitivo (versione "Contorno"): Your e Site solo
   contorno, Next piena */
.titolo-v-outline .out {
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------
   SFONDO HERO — i siti demo scorrono a schermo intero dietro al
   titolo, sfocati e scuriti. Il blur è applicato alle singole
   card (non al contenitore) per non pesare sul rendering.
   ------------------------------------------------------------ */
.hero-sfondo { position: absolute; inset: 0; overflow: hidden; }
.hero-sfondo__righe {
  position: absolute;
  inset: -6% -2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
}
.marquee-riga {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: scorri-riga var(--durata, 60s) linear infinite;
}
.marquee-riga--inversa { animation-direction: reverse; }
@keyframes scorri-riga { to { transform: translateX(-50%); } }
/* margine (non gap) sulle card: così le due metà duplicate hanno
   la stessa larghezza e il loop riparte senza scatti */
/* Larghezza fluida: ~metà schermo su desktop (grandi ma non a
   schermo intero), il minimo di 300px vale sui telefoni */
.marquee-riga .card-browser {
  width: clamp(300px, 46vw, 900px);
  flex-shrink: 0;
  margin-right: 2rem;
  filter: blur(5px) brightness(0.7);
}
/* Velo scuro sopra lo sfondo per il contrasto del titolo */
.hero-sfondo__velo {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
              rgba(10, 10, 10, 0.3) 0%,
              rgba(10, 10, 10, 0.55) 65%,
              rgba(10, 10, 10, 0.9) 100%);
}

/* Indicatore di scroll: rotella del mouse + freccia verso il basso */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--grigio-1);
  transition: color 0.2s ease;
}
.scroll-hint:hover { color: #fff; }
.scroll-mouse {
  position: relative;
  display: block;
  width: 26px;
  height: 42px;
  border: 2px solid currentColor;
  border-radius: 14px;
}
.scroll-mouse__rotella {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 9px;
  margin-left: -2px;
  border-radius: 4px;
  background: currentColor;
  animation: rotella-giu 1.8s ease-in-out infinite;
}
@keyframes rotella-giu {
  0%   { transform: translateY(0); opacity: 1; }
  70%, 100% { transform: translateY(13px); opacity: 0; }
}
.scroll-hint svg {
  width: 14px;
  height: 14px;
  animation: rimbalzo 1.8s ease-in-out infinite;
}
@keyframes rimbalzo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ------------------------------------------------------------
   SHOWCASE 3D — pila di siti guidata dallo scroll (js/main.js).
   L'altezza extra della sezione è lo "spazio di scorrimento"
   che pilota l'animazione dentro il riquadro sticky.
   ------------------------------------------------------------ */
.stack-sezione { position: relative; height: 340vh; }
.stack-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1400px;
}
/* Larghezza legata all'altezza dello schermo (113vh ≈ card alta
   ~78vh): su desktop riempie la vista senza andare a schermo
   intero — l'animazione del "volo" resta visibile — mentre sui
   telefoni vince l'88vw, come prima */
.stack-scena {
  position: relative;
  width: min(88vw, 113vh);
  aspect-ratio: 16 / 11;
  transform-style: preserve-3d;
}
.stack-card {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}
.stack-card .card-browser {
  width: 100%;
  background: #141414; /* sfondo pieno: le card dietro non traspaiono */
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
}

/* ------------------------------------------------------------
   CHI SIAMO — testo che si accende parola per parola e poi
   viene ingrandito fino a "entrarci dentro" (js/main.js)
   ------------------------------------------------------------ */
.chisiamo-sezione { position: relative; height: 300vh; }
.chisiamo-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 1.5rem;
}
/* NB: niente will-change qui — promuoverebbe il testo a layer e il
   browser stirerebbe la bitmap durante lo zoom (testo sgranato);
   senza, il testo viene ridisegnato nitido alle scale alte */
.chisiamo-testo {
  max-width: 56rem;
  text-align: center;
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
/* Parole "spente" prima dell'accensione guidata dallo scroll */
.chisiamo-testo .parola { opacity: 0.15; }

/* ------------------------------------------------------------
   Fallback prefers-reduced-motion per le parti scroll-driven:
   niente sticky né animazioni, contenuti subito leggibili
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .marquee-riga { animation: none; }
  .scroll-mouse__rotella,
  .scroll-hint svg { animation: none; }

  .stack-sezione { height: auto; padding: 6rem 1.5rem; }
  .stack-sticky { position: static; height: auto; overflow: visible; perspective: none; }
  .stack-scena {
    width: 100%;
    max-width: 1200px;
    aspect-ratio: auto;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .stack-card { position: static; transform: none !important; opacity: 1 !important; }

  .chisiamo-sezione { height: auto; padding: 7rem 1.5rem; }
  .chisiamo-sticky { position: static; height: auto; overflow: visible; }
  .chisiamo-testo { transform: none !important; opacity: 1 !important; }
  .chisiamo-testo .parola { opacity: 1 !important; }

  .servizio-preview__finestra {
    transition: none;
    transform: translateY(0) rotate(0) scale(1);
  }
}

/* ------------------------------------------------------------
   BOTTONI CTA — bianchi, si tingono di accento su hover
   ------------------------------------------------------------ */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: #fff;
  color: #000;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 12px;
  transition: background-color 0.25s ease, color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-cta:hover,
.btn-cta:focus-visible {
  background: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px var(--accent);
}
.btn-cta--nav {
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
}

/* Link "Richiedi preventivo" nelle card servizio */
.link-preventivo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  transition: color 0.2s ease, gap 0.2s ease;
}
.link-preventivo:hover {
  color: var(--accent);
  gap: 0.65rem;
}

/* Email di contatto diretta */
.link-email {
  color: #fff;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.link-email:hover { color: var(--accent); }

.footer-link { transition: color 0.2s ease; }
.footer-link:hover { color: #fff; }

/* ------------------------------------------------------------
   GLASSMORPHISM — superficie translucida con bordo sottile
   ------------------------------------------------------------ */
.glass {
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------
   CARD SERVIZIO — hover: bordo e glow accento (nessun movimento)
   ------------------------------------------------------------ */
.card-servizio {
  padding: 2rem;
  border-radius: 16px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.card-servizio:hover {
  border-color: rgba(79, 124, 255, 0.4);                                /* fallback */
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 20px 60px -25px rgba(79, 124, 255, 0.45);               /* fallback */
  box-shadow: 0 20px 60px -25px color-mix(in srgb, var(--accent) 50%, transparent);
}
.card-servizio__icona {
  width: 2.2rem;
  height: 2.2rem;
  margin-bottom: 1.5rem;
  color: var(--grigio-1);
  transition: transform 0.3s ease, color 0.3s ease;
}
.card-servizio:hover .card-servizio__icona {
  transform: translateY(-3px) scale(1.1);
  color: #fff;
}

/* Mini sito demo in fondo alla card: inclinato e semi-nascosto,
   su hover/focus si raddrizza e sale ("diventa un sito demo") */
.servizio-preview {
  position: relative;
  margin-top: 1.75rem;
  height: 8rem;
  overflow: hidden;
  border-radius: 12px;
}
.servizio-preview__finestra {
  position: absolute;
  inset: 0;
  height: 135%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #101010;
  transform: translateY(24%) rotate(-3.5deg) scale(0.97);
  transform-origin: 15% 100%;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card-servizio:hover .servizio-preview__finestra,
.card-servizio:focus-within .servizio-preview__finestra {
  transform: translateY(0) rotate(0) scale(1);
}
.servizio-preview__bar {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.servizio-preview__bar span {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
}
.servizio-preview__body {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2rem;
}
.servizio-preview__label {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--grigio-1);
}

/* ------------------------------------------------------------
   CARD "FINESTRA BROWSER" — placeholder dei progetti.
   Hover/focus: la card si solleva, si illumina (glow accento)
   e mostra nome progetto + "Vedi progetto".
   ------------------------------------------------------------ */
.card-browser {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  /* niente backdrop-filter qui: su sfondo pieno non si vede e,
     dentro la prospettiva 3D dell'hero, rende il paint pesantissimo */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.card-browser:hover,
.card-browser:focus-visible,
.card-browser:focus-within {
  transform: translateY(-6px);
  /* fallback rgba per browser senza color-mix, poi versione legata a --accent */
  border-color: rgba(79, 124, 255, 0.55);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 18px 50px -18px rgba(79, 124, 255, 0.5);
  box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--accent) 50%, transparent),
              0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Card decorativa (griglia hero): solo animazione hover,
   nessuna interazione — niente cursore a manina né overlay */
.card-browser--static { cursor: default; }

/* Barra superiore stile finestra browser */
.card-browser__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.card-browser__dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.18);
}
.card-browser__menu {
  width: 13px;
  height: 13px;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.35);
}

/* Corpo scuro translucido con etichetta centrata */
.card-browser__body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: rgba(10, 10, 10, 0.5);
  overflow: hidden;
}
.card-browser--lg .card-browser__body { aspect-ratio: 16 / 10; }

/* Etichetta placeholder [sito demo N] — corsiva come nel mockup,
   dimensione fluida che segue la larghezza della card */
.card-browser__label {
  position: relative;
  z-index: 1;
  font-size: clamp(0.6rem, 1.3vw, 1rem);
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--grigio-1);
  transition: opacity 0.3s ease;
}
.card-browser--lg .card-browser__label { font-size: 0.95rem; }

/* Screenshot reale del progetto (se impostato in PROGETTI) */
.card-browser__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Anteprima "live" del sito demo (campo demo: in PROGETTI): la
   homepage vera in un iframe renderizzato a 1280px e riscalato
   sulla larghezza della card (--scala-frame, via ResizeObserver
   in js/main.js). Solo vetrina: nessuna interazione possibile */
.card-browser__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.card-browser__frame iframe {
  width: 1280px;
  height: 800px; /* 16:10, come il corpo delle card --lg */
  border: 0;
  transform: scale(var(--scala-frame, 0.25));
  transform-origin: 0 0;
  background: #0a0a0a;
}

/* Geometrie astratte in stile mockup (archi, sfera, linee),
   con un alone tinto dall'accento: cambiando --accent
   cambia anche l'arte delle card */
.card-browser__art {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  transition: transform 0.5s ease;
}
.card-browser:hover .card-browser__art { transform: scale(1.08) rotate(2deg); }

/* Variante 1: archi concentrici dal basso a sinistra */
.card-browser__art--1 {
  background:
    radial-gradient(120% 95% at -10% 115%, transparent 39.5%, rgba(255, 255, 255, 0.12) 40%, transparent 41.2%),
    radial-gradient(145% 115% at -10% 115%, transparent 51.5%, rgba(255, 255, 255, 0.08) 52%, transparent 53.2%),
    radial-gradient(170% 135% at -10% 115%, transparent 63.5%, rgba(255, 255, 255, 0.05) 64%, transparent 65.2%),
    radial-gradient(70% 70% at 15% 95%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}
/* Variante 2: sfera sfumata */
.card-browser__art--2 {
  background:
    radial-gradient(38% 48% at 58% 58%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 62%, transparent 66%),
    radial-gradient(60% 60% at 35% 25%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 65%);
}
/* Variante 3: linee diagonali sottili */
.card-browser__art--3 {
  background:
    repeating-linear-gradient(115deg, transparent 0 24px, rgba(255, 255, 255, 0.07) 24px 25px),
    radial-gradient(55% 65% at 78% 15%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}

/* Overlay su hover/focus: nome progetto + "Vedi progetto" */
.card-browser__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem;
  text-align: center;
  background: rgba(10, 10, 10, 0.62);
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* Solo per le card interattive (portfolio): su hover/focus appare
   l'overlay e l'etichetta placeholder si nasconde */
.card-browser:not(.card-browser--static):hover .card-browser__overlay,
.card-browser:not(.card-browser--static):focus-visible .card-browser__overlay,
.card-browser:not(.card-browser--static):focus-within .card-browser__overlay {
  opacity: 1;
}
.card-browser:not(.card-browser--static):hover .card-browser__label,
.card-browser:not(.card-browser--static):focus-visible .card-browser__label,
.card-browser:not(.card-browser--static):focus-within .card-browser__label {
  opacity: 0;
}
.card-browser__nome {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.card-browser--lg .card-browser__nome { font-size: 1.05rem; }
.card-browser__cta {
  font-size: 0.6rem;
  color: var(--accent);
  font-weight: 600;
}
.card-browser--lg .card-browser__cta { font-size: 0.85rem; }

/* Nota sotto le card demo del portfolio: chiarisce in piccolo che
   è una demo, non un progetto reale (solo lì, non nello showcase) */
.demo-nota {
  margin-top: 0.55rem;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--grigio-2);
  text-align: center;
}

/* ------------------------------------------------------------
   MODAL ANTEPRIMA PROGETTO — il sito demo in un iframe
   interattivo "quasi a schermo intero": bordo scuro attorno
   e X in alto a destra per uscire (aperto da js/main.js)
   ------------------------------------------------------------ */
.modal-progetto {
  position: fixed;
  inset: 0;
  z-index: 100; /* sopra header e contenuti */
}
.modal-progetto__velo {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* La "finestra": margine tutto attorno, più largo in alto per
   fare spazio alla X */
.modal-progetto__finestra {
  position: absolute;
  inset: 3.6rem clamp(0.9rem, 3.5vw, 2.75rem) clamp(0.9rem, 3.5vw, 2.75rem);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0a0a0a;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.9);
  animation: modal-entra 0.25s ease;
}
@keyframes modal-entra {
  from { opacity: 0; transform: scale(0.98); }
}
.modal-progetto__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.modal-progetto__chiudi {
  position: absolute;
  top: 0.55rem;
  right: clamp(0.9rem, 3.5vw, 2.75rem); /* allineata al bordo della finestra */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.modal-progetto__chiudi:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.06); }
.modal-progetto__chiudi svg { width: 1.1rem; height: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  .modal-progetto__finestra { animation: none; }
}

/* ------------------------------------------------------------
   FORM — input, errori, stato di invio
   ------------------------------------------------------------ */
.label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grigio-1);
}
.input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input::placeholder { color: var(--grigio-2); }
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.25);            /* fallback */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* Campo non valido (impostato dalla validazione JS) */
.input[aria-invalid="true"] { border-color: #f87171; }

/* Messaggio d'errore sotto al campo */
.msg-errore {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #f87171;
}
.msg-errore.visibile { display: block; }

/* Stato di invio del form (successo / errore); il successo si
   dissolve da solo dopo qualche secondo (classe .via dal JS) */
#form-status {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: opacity 0.45s ease;
}
#form-status.via { opacity: 0; }
#form-status.ok {
  display: block;
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.35);
  color: #4ade80;
}
#form-status.err {
  display: block;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #f87171;
}

/* ------------------------------------------------------------
   ANIMAZIONI
   ------------------------------------------------------------ */

/* Entrata dell'hero (testo a sinistra): fade + slide dal basso */
@media (prefers-reduced-motion: no-preference) {
  .hero-anim {
    opacity: 0;
    animation: hero-su 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: var(--hero-delay, 0ms);
  }
  @keyframes hero-su {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Reveal allo scroll: gli elementi .reveal partono nascosti e
   ricevono .visible dall'IntersectionObserver in js/main.js.
   --reveal-delay crea l'effetto stagger nelle griglie. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Riduzione del movimento: tutto visibile subito, niente animazioni */
@media (prefers-reduced-motion: reduce) {
  .hero-anim,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .card-browser,
  .card-browser__art,
  .btn-cta {
    transition: none !important;
  }
  .card-browser:hover { transform: none; }
  .btn-cta:hover { transform: none; }
}