/* ==================================================
   COMPONENTI RIUTILIZZABILI
   ================================================== */

/* ---------- HEADER / LOGO V7 ----------
   Fascia sottile fissa in alto, sopra tutte le schede. Il logo si anima
   una sola volta all'ingresso (vedi js/hero.js), poi resta nello stato
   finale statico del file V7: qui viene solo posizionato/dimensionato,
   la geometria/tempistica dell'animazione non viene mai reinterpretata. */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: calc(var(--brand-bar-height) + var(--safe-top));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-top: var(--safe-top);
  padding-inline: clamp(14px, calc(4 * var(--vw)), 24px);
  background: linear-gradient(180deg, var(--hero-dark-bg) 0%, var(--hero-dark-bg-2) 100%);
  border-bottom: 1px solid rgba(41, 36, 31, 0.055);
  backdrop-filter: none;
  transition: none;
}

.site-header.is-scrolled {
  background: linear-gradient(180deg, var(--hero-dark-bg) 0%, var(--hero-dark-bg-2) 100%);
  backdrop-filter: none;
}

/* V3.7 — l'header (position:fixed, quindi ancorato al vero viewport,
   MAI alla mobile-shell — vedi la nota in css/layout.css sul perche'
   non si usa contain:layout) si centra da solo sulla stessa colonna
   larga al massimo 430px della shell, SEMPRE (non piu' solo da 768px:
   un telefono ruotato in landscape, es. 844px di larghezza, resta sotto
   i 768px di min-width della V3.6 pur essendo molto piu' largo della
   shell — l'header restava quindi a piena larghezza in quel caso).
   Cosi' resta identico al mobile in qualunque orientamento/larghezza
   invece di estendersi al device/monitor — e continua a restare fisso
   sullo schermo scrollando, esattamente come su un telefono. */
.site-header,
.site-nav {
  max-width: 430px;
  margin-inline: auto;
}

.site-header__logo {
  display: flex;
  align-items: center;
  width: clamp(118px, calc(35 * var(--vw)), 178px);
  height: auto;
  margin: 0;
  opacity: var(--brand-bar-opacity, 1);
  transition: opacity var(--motion-fast) var(--ease-out);
}

.site-logo-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

 .menu-toggle {
  position: absolute;
  right: clamp(14px, calc(4 * var(--vw)), 24px);
  top: calc(var(--safe-top) + var(--brand-bar-height) / 2);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f8f5ef;
  /* V3.7 — l'icona visiva (.menu-toggle__bars) e' solo 32x14px: un'area
     di tocco cosi' piccola e' sotto la soglia consigliata di ~44x44px
     (Parte 16). Il padding allarga l'AREA CLICCABILE del <button> senza
     ingrandire l'icona (rimane la stessa, centrata dentro l'area piu'
     grande via align-items/justify-content) — right resta ancorato
     allo stesso bordo, l'icona si sposta di pochi pixel verso l'interno
     rispetto alla V3.6, uno spostamento minimo e non percepibile come
     redesign. */
  padding: 15px;
  min-width: 44px;
  min-height: 44px;
}

.menu-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* V3.6 — DISATTIVATO: rivelava la scritta "Menu" accanto all'icona
   hamburger su desktop, una composizione visibile diversa dal mobile
   (che mostra sempre e solo l'icona). Con la modalita' "mobile shell
   centrata" (Parte 8-17) il desktop deve restare identico al mobile:
   l'etichetta resta sempre visualmente nascosta (solo screen reader),
   qualunque sia la larghezza dello schermo. Codice storico:
@media (min-width: 1024px) {
  .menu-toggle__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
  }
}
*/

.menu-toggle__bars {
  position: relative;
  width: 20px;
  height: 12px;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transition: transform var(--motion-fast) var(--ease-out);
}

.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { bottom: 0; }

/* ---------- NAVIGAZIONE FULLSCREEN ---------- */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--background);
  display: flex;
  flex-direction: column;
  /* V3.0 — il menu e' passato da 5 a 9 voci: su viewport bassi puo'
     superare l'altezza disponibile. justify-content:center (come prima)
     centrerebbe l'elenco anche quando trabocca, ma in un contenitore
     flex il contenuto che eccede "verso l'alto" per via del centraggio
     NON e' raggiungibile scrollando (limite noto di justify-content:
     center + overflow, indipendente dal browser) — per questo il
     centraggio verticale e' stato spostato su .site-nav__list stesso
     (margin-block:auto sotto), che invece degrada correttamente restando
     scorribile quando il contenuto e' piu' alto del contenitore. Quando
     tutte le 9 voci entrano gia' nello schermo il risultato visivo resta
     lo stesso centraggio di prima; overflow-y:auto entra in gioco solo
     se necessario. Font, spaziatura tra le voci e animazione di apertura
     invariati. */
  overflow-y: auto;
  padding: var(--space-xl) var(--space-md);
  padding-top: calc(var(--space-xl) + var(--safe-top));
  padding-bottom: calc(var(--space-lg) + var(--safe-bottom));
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--motion-slow) var(--ease-out), visibility 0s linear var(--motion-slow);
}

.site-nav.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--motion-slow) var(--ease-out), visibility 0s;
}

.menu-close {
  position: absolute;
  top: calc(var(--space-sm) + var(--safe-top));
  right: var(--space-md);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-nav__list {
  /* margin-block:auto centra verticalmente l'elenco dentro .site-nav
     quando c'e' spazio (stesso risultato visivo di prima), ma — a
     differenza di justify-content:center sul contenitore — resta
     raggiungibile scorrendo quando il contenuto e' piu' alto dello
     spazio disponibile (vedi nota su .site-nav sopra). */
  margin-block: auto;
  margin-inline: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.site-nav__item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--motion-normal) var(--ease-out), transform var(--motion-normal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.site-nav.is-open .site-nav__item {
  opacity: 1;
  transform: translateY(0);
}

.site-nav__item a {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, calc(6 * var(--vw)) + 0.5rem, 3.25rem);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  /* V3.7 — le voci piu' lunghe ("Prenota una seduta conoscitiva") su
     shell molto strette (320-360px) altrimenti rischierebbero di non
     ridursi/andare a capo correttamente dentro il flex item di testo:
     min-width:0 permette al testo di restringersi e andare a capo
     liberamente invece di spingere oltre il bordo della card. */
  min-width: 0;
  max-width: 100%;
}

.site-nav__index {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ---------- BOTTONI / LINK ---------- */
.button-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.85rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--background);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

.button-primary:hover {
  transform: translateY(-2px);
  background: var(--accent);
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  transition: border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

.button-secondary:hover {
  border-color: var(--text);
  transform: translateY(-2px);
}

.text-link {
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--text-muted);
  font-size: 0.95rem;
  transition: border-color var(--motion-fast) var(--ease-out);
}

.text-link:hover {
  border-color: var(--text);
}

/* V3.1 — collegamenti Instagram/Facebook nella chiusura del sito
   (#scene-03): stesso componente .text-link gia' usato per gli altri
   link testuali del sito, nessuno stile nuovo inventato. */
.social-links {
  display: flex;
  gap: var(--space-lg);
  margin: var(--space-lg) 0 0;
}

/* ---------- MEDIA PLACEHOLDER ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--background-secondary), #e2d5c2);
  border-radius: var(--radius-medium);
}

.media__tag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(247, 243, 238, 0.75);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.media-landscape {
  aspect-ratio: 16 / 10;
}

.media-portrait {
  aspect-ratio: 4 / 5;
}

.media-square {
  aspect-ratio: 1 / 1;
}

.media-full {
  border-radius: 0;
  width: calc(100 * var(--vw));
  margin-inline: calc(50% - calc(50 * var(--vw)));
  aspect-ratio: 4 / 5;
}

.media-edge {
  border-radius: 0 var(--radius-large) var(--radius-large) 0;
  margin-right: calc(-1 * var(--space-md));
  margin-left: 0;
}

/* ---------- SEZIONI EDITORIALI ---------- */
.quote-section {
  text-align: center;
}

.story-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* ---------- HORIZONTAL STORY RAIL ---------- */
.horizontal-story {
  position: relative;
  margin-block: var(--space-lg) 0;
}

.horizontal-story-track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--space-md);
  padding-block: var(--space-xs) var(--space-sm);
  scrollbar-width: none;
  cursor: grab;
}

.horizontal-story-track::-webkit-scrollbar {
  display: none;
}

.horizontal-story-track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

.horizontal-story-panel {
  flex: 0 0 calc(86 * var(--vw));
  scroll-snap-align: start;
}

/* NOMENCLATURA UFFICIALE: iOS 9 — Ringraziamenti | NUOVA (V3.4).
   Sostituisce il vecchio carosello V3.1 (era fuori da qualunque iOS
   card, dentro #scene-03): il sistema di swipe/snap orizzontale resta
   lo stesso .horizontal-story già esistente, qui dentro una vera card
   iOS (vedi css/ios-extra-cards.css per .ios-card--thanks). Ogni
   pannello futuro: immagine + dedica, mai stelline/rating/badge da
   e-commerce. */
.ios-thanks-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
  text-align: center;
}

.ios-thanks-panel__note {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, calc(3.6 * var(--vw)), 1.25rem);
  color: var(--text-muted);
}

/* V3.8 — Modifica 2: da linee sottili quasi invisibili (2px) a un vero
   sistema di pallini/pill, un indicatore per ogni pannello reale (mai un
   numero fisso indipendente dal DOM, vedi js/main.js). Stessa logica di
   interazione di prima (il pallino attivo si allarga in pillola), solo
   più leggibile: dimensione e contrasto aumentati, non un componente
   nuovo. */
.horizontal-story-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: var(--space-md);
  margin-top: var(--space-sm);
}

.horizontal-story-progress span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--border);
  transition: background var(--motion-fast) var(--ease-out), width var(--motion-fast) var(--ease-out);
}

.horizontal-story-progress span.is-active {
  background: var(--accent);
  width: 1.5rem;
}

/* Hint "Scorri verso destra →": molto più leggibile della vecchia
   indicazione (font più grande, colore ad alto contrasto, freccia
   esplicita) restando nel linguaggio grafico esistente — niente banner,
   niente nuovo font, niente nuova palette. */
.horizontal-story-hint {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.85rem, calc(3 * var(--vw)), 0.95rem);
  letter-spacing: 0.02em;
  color: var(--accent);
  padding-inline: var(--space-md);
  margin-top: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .horizontal-story-hint {
    animation: horizontal-story-hint-nudge 1.8s ease-in-out infinite;
  }
}

@keyframes horizontal-story-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.2rem); }
}

/* ---------- MOTION UTILITIES ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--motion-normal) var(--ease-out), transform var(--motion-normal) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-mask {
  position: relative;
  overflow: hidden;
}

.reveal-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--background);
  transform-origin: top;
  transition: transform var(--motion-slow) var(--ease-out);
}

.reveal-mask.is-visible::after {
  transform: scaleY(0);
}

.playful-entry {
  opacity: 0;
  transform: translateY(20px) rotate(-2deg);
  transition: opacity var(--motion-normal) var(--ease-playful), transform var(--motion-normal) var(--ease-playful);
}

.playful-entry.is-visible {
  opacity: 1;
  transform: none;
}

.soft-tilt {
  transition: transform var(--motion-normal) var(--ease-soft);
}

.soft-tilt:hover {
  transform: rotate(-1.5deg) scale(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-mask::after,
  .playful-entry {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- FOOTER ---------- */
/* V3.5 — chiusura in tre righe distinte (sostituisce la riga singola
   della V3.4, ora ridondante con la nuova #scene-08 sopra — vedi
   index.html). */
.site-footer {
  padding-block: var(--space-lg);
  padding-bottom: calc(var(--space-md) + var(--safe-bottom));
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.site-footer__line {
  margin: 0 0 0.35em;
}

.site-footer__line:last-child {
  margin-bottom: 0;
}

/* ---------- CHIUSURA FINALE (#scene-08, V3.5) ---------- */
.final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* V3.6 — l'SVG e' ora inline (non piu' un <img>, serve per poter animare
   il ramo via JS, vedi index.html/js/hero.js): stessa dimensione della
   V3.5, nessun rettangolo di sfondo (la scritta "Psicologia Selvatica"
   duplicata sotto il logo e' stata rimossa, e' gia' parte del logo). */
.final-cta__logo {
  width: min(calc(74 * var(--vw)), 320px);
  height: auto;
  display: block;
  overflow: visible;
}

/* V3.6 — piu' respiro tra il logo e l'email rispetto alla V3.5. */
.final-cta__email {
  margin-top: clamp(32px, calc(8 * var(--vw)), 52px);
  font-family: var(--font-body);
  font-size: clamp(1rem, calc(3.4 * var(--vw)), 1.15rem);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  /* V3.7 — l'indirizzo email e' un'unica parola lunga senza spazi: su
     una shell molto stretta (<360px circa) potrebbe eccedere la
     larghezza della card. overflow-wrap:anywhere permette di andare a
     capo ANCHE dentro la parola come ultima risorsa (mai un taglio
     visivo, mai overflow orizzontale) senza cambiare la tipografia. */
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* V3.6 — FAQ tra email e footer, con spazio distinto da entrambi. */
.final-cta__faq {
  margin-top: clamp(20px, calc(5 * var(--vw)), 30px);
}