@charset "utf-8";
/* =========================================================================
   ELLEBI — Borse fatte a mano
   Stile: minimal editoriale, palette del logo (blush + espresso)
   ========================================================================= */

/* I font self-hosted sono in fonts.css, collegato prima di questo foglio
   nell'HTML: niente @import, così i due file si scaricano in parallelo. */

/* ---------- 2. Reset ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[role="list"],
ol[role="list"] { list-style: none; }

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; }

/* l'attributo hidden deve vincere su qualsiasi display dichiarato dopo */
[hidden] { display: none !important; }

:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* ---------- 3. Design tokens -------------------------------------------- */
:root {
  /* Colori estratti dal logo ELLEBI */
  --c-espresso: #3f2418;
  --c-espresso-2: #5c3d2e;
  --c-espresso-3: #8a6a58;
  --c-blush: #f6ddd0;
  --c-blush-soft: #fbeae1;
  --c-paper: #fbf7f4;
  --c-paper-2: #f4ece5;
  --c-terracotta: #c2836a;
  /* variante scura del terracotta, per i testi: contrasto AA sulle superfici chiare */
  --c-terracotta-ink: #9c5539;
  --c-white: #ffffff;

  --c-bg: var(--c-paper);
  --c-text: var(--c-espresso);
  --c-muted: #6f5346;
  --c-line: rgba(63, 36, 24, 0.16);
  --c-line-soft: rgba(63, 36, 24, 0.08);
  --c-overlay: rgba(35, 19, 12, 0.32);
  --c-focus: #8a4a2c;

  /* Tipografia */
  --f-sans: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-serif: "Cormorant Garamond", Iowan Old Style, Georgia, "Times New Roman", serif;

  --fs-micro: clamp(0.66rem, 0.62rem + 0.16vw, 0.74rem);
  --fs-small: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  --fs-body: clamp(0.94rem, 0.9rem + 0.24vw, 1.06rem);
  --fs-lead: clamp(1.06rem, 0.98rem + 0.5vw, 1.32rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.7vw, 4rem);
  --fs-h1: clamp(2.3rem, 1.3rem + 4.6vw, 5.6rem);
  --fs-giant: clamp(4rem, 1rem + 15vw, 15rem);

  /* Spaziature e layout */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5rem;
  --sp-7: clamp(4.5rem, 3rem + 7vw, 10rem);

  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 4rem);
  --maxw: 82.5rem;
  --maxw-text: 46rem;
  --radius: 2px;
  --radius-lg: 1.25rem;

  --header-h: 4.5rem;

  /* Movimento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 0.25s;
  --dur-2: 0.5s;
  --dur-3: 0.9s;
}

@media (min-width: 60em) {
  :root { --header-h: 5.25rem; }
}

/* ---------- 4. Base ----------------------------------------------------- */
body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked {
  overflow: hidden;
  /* evita il salto di layout alla comparsa dell'overlay */
  touch-action: none;
}

::selection {
  background: var(--c-espresso);
  color: var(--c-blush);
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Accessibilità: link di salto contenuto */
.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: var(--sp-2);
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--c-espresso);
  color: var(--c-paper);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-1) var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 5. Utility di layout ---------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: calc(var(--maxw-text) + var(--gutter) * 2); }

.section { padding-block: var(--sp-7); }

.section--tight { padding-block: var(--sp-6); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-terracotta);
  flex: none;
}

.eyebrow--center { justify-content: center; }

.title {
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.title em {
  font-family: var(--f-serif);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.01em;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--c-muted);
  max-width: 42ch;
}

.text-center { text-align: center; }

/* ---------- 6. Bottoni e link ------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-espresso);
  --btn-bd: var(--c-espresso);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease-out-expo);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-espresso);
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease-out-expo);
}

.btn:hover,
.btn:focus-visible {
  color: var(--c-blush-soft);
  border-color: var(--c-espresso);
}

.btn:hover::after,
.btn:focus-visible::after { transform: translateY(0); }

.btn:active { transform: scale(0.98); }

.btn--solid {
  --btn-bg: var(--c-espresso);
  --btn-fg: var(--c-blush-soft);
}

.btn--solid::after { background: var(--c-terracotta); }

.btn--light {
  --btn-fg: var(--c-paper);
  --btn-bd: rgba(251, 247, 244, 0.7);
}

.btn--light::after { background: var(--c-paper); }

.btn--light:hover,
.btn--light:focus-visible { color: var(--c-espresso); }

.btn__icon {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform var(--dur-2) var(--ease-out-expo);
}

.btn:hover .btn__icon { transform: translateX(3px); }

/* Link con sottolineatura animata */
.link-line {
  position: relative;
  text-decoration: none;
  padding-block-end: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-2) var(--ease-out-expo);
}

.link-line:hover,
.link-line:focus-visible { background-size: 100% 1px; }

/* ---------- 7. Preloader ------------------------------------------------ */
/* Mostrato solo con JavaScript attivo: senza JS non deve mai coprire il sito. */
.preloader { display: none; }

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--c-blush-soft);
  transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}

.preloader__mark {
  width: clamp(4.5rem, 12vw, 7rem);
  color: var(--c-espresso);
  animation: mark-pulse 1.8s var(--ease) infinite;
}

.preloader__bar {
  position: absolute;
  bottom: 18%;
  left: 50%;
  translate: -50% 0;
  width: min(180px, 40vw);
  height: 1px;
  background: var(--c-line);
  overflow: hidden;
}

.preloader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-espresso);
  transform-origin: left;
  animation: bar-load 1.4s var(--ease-out-expo) infinite;
}

body.is-loaded .preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes mark-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.96); }
}

@keyframes bar-load {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(1); }
  100% { transform: scaleX(1) translateX(100%); }
}

/* ---------- 8. Header --------------------------------------------------- */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease), backdrop-filter 0.45s var(--ease);
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(251, 247, 244, 0.8), transparent);
  opacity: 1;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}

.header.is-stuck {
  background: rgba(251, 247, 244, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--c-line-soft);
}

.header.is-stuck::before { opacity: 0; }

.header.is-hidden { transform: translateY(-105%); }

/* con il menu aperto lo sfondo è chiaro: il marchio torna scuro */
.header.is-over-menu { color: var(--c-espresso); }
.header.is-over-menu::before { opacity: 0; }

.header__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Il colore del testo è sempre scuro: sotto c'è la foto chiara dell'hero */
.header { color: var(--c-espresso); }

.header__nav { display: none; }

@media (min-width: 62em) {
  .header__nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2.4rem);
  }
  .header__nav--end { justify-content: flex-end; }
}

.header__link {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity var(--dur-1) var(--ease);
}

.header__link:hover { opacity: 1; }

.header__brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out-expo);
}

.header__brand:hover { transform: scale(1.04); }

.header__brand svg {
  width: clamp(4.2rem, 9vw, 5.6rem);
  height: auto;
  color: currentColor;
}

/* Bottone menu mobile */
.burger {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0 6px;
  align-items: flex-end;
}

@media (min-width: 62em) { .burger { display: none; } }

.burger__line {
  display: block;
  width: 26px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out-expo), opacity 0.25s var(--ease), width 0.4s var(--ease);
}

.burger__line:nth-child(2) { width: 18px; }

.burger:hover .burger__line:nth-child(2) { width: 26px; }

.burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Senza JavaScript il menu a scomparsa non sarebbe apribile:
   l'header diventa statico e mostra tutti i collegamenti. */
html:not(.js) .header {
  position: static;
  height: auto;
  padding-block: 0.85rem;
  background: var(--c-paper-2);
  color: var(--c-espresso);
}

html:not(.js) .header::before { display: none; }
html:not(.js) .burger { display: none; }

html:not(.js) .header__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.75rem;
}

html:not(.js) .header__brand { grid-column: auto; }

html:not(.js) .header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.4rem;
}

html:not(.js) .hero__inner { padding-top: var(--sp-5); }

/* Menu overlay mobile */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-content: center;
  padding: calc(var(--header-h) + var(--sp-4)) var(--gutter) var(--sp-5);
  background: var(--c-blush-soft);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-out-expo), visibility 0s linear 0.7s;
}

.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--ease-out-expo), visibility 0s;
}

.menu__list {
  list-style: none;
  display: grid;
  gap: clamp(0.5rem, 2vw, 1rem);
}

.menu__item {
  overflow: hidden;
}

.menu__link {
  display: block;
  font-size: clamp(2rem, 11vw, 3.4rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease-out-expo), color var(--dur-1) var(--ease);
}

.menu.is-open .menu__link { transform: translateY(0); }

.menu__item:nth-child(1) .menu__link { transition-delay: 0.08s; }
.menu__item:nth-child(2) .menu__link { transition-delay: 0.14s; }
.menu__item:nth-child(3) .menu__link { transition-delay: 0.2s; }
.menu__item:nth-child(4) .menu__link { transition-delay: 0.26s; }
.menu__item:nth-child(5) .menu__link { transition-delay: 0.32s; }

.menu__link:hover { color: var(--c-terracotta-ink); }

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.35s;
}

.menu.is-open .menu__foot { opacity: 1; }

@media (min-width: 62em) { .menu { display: none; } }

/* ---------- 9. Hero ----------------------------------------------------- */
/* La foto è chiara e la borsa sta a destra: il testo vive sulla parete
   vuota a sinistra, in colore scuro. Nessun testo sovrapposto a un altro. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  background: var(--c-paper-2);
}

.hero__media {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
  will-change: transform;
}

.hero__media picture { display: contents; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

/* velo chiaro che garantisce la leggibilità del testo sulla foto */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(251, 247, 244, 0.94) 0%, rgba(251, 247, 244, 0.72) 48%, rgba(251, 247, 244, 0.18) 100%);
  pointer-events: none;
}

@media (min-width: 48em) {
  .hero__media img { object-position: 68% 50%; }
  .hero::after {
    background:
      linear-gradient(to right, rgba(251, 247, 244, 0.95) 0%, rgba(251, 247, 244, 0.82) 34%, rgba(251, 247, 244, 0.25) 62%, rgba(251, 247, 244, 0) 82%),
      linear-gradient(to bottom, rgba(251, 247, 244, 0.5) 0%, rgba(251, 247, 244, 0) 34%);
  }
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-5)) var(--gutter) var(--sp-6);
  color: var(--c-espresso);
}

.hero__content {
  max-width: 34rem;
  will-change: transform, opacity;
}

.hero__eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-espresso-2);
  margin-bottom: var(--sp-2);
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.hero__sub {
  margin-top: var(--sp-2);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.32rem);
  font-weight: 300;
  line-height: 1.5;
  max-width: 32ch;
  color: var(--c-espresso-2);
}

.hero__sub em {
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--c-espresso);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.hero__scroll {
  position: absolute;
  bottom: clamp(1.2rem, 4vh, 2.5rem);
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-espresso-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 48em) {
  .hero__scroll { left: var(--gutter); translate: 0 0; align-items: flex-start; }
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(63, 36, 24, 0.7), rgba(63, 36, 24, 0));
  animation: scroll-hint 2.2s var(--ease) infinite;
}

@keyframes scroll-hint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 10. Marquee ------------------------------------------------- */
.marquee {
  overflow: hidden;
  padding-block: var(--sp-3);
  border-block: 1px solid var(--c-line-soft);
  background: var(--c-blush-soft);
  --marquee-duration: 34s;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration) linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);
  font-size: var(--fs-micro);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-espresso-2);
  white-space: nowrap;
}

.marquee__group span { display: inline-flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); }

.marquee__group span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-terracotta);
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 11. Collezione ---------------------------------------------- */
.collection__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.collection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-paper-2);
  isolation: isolate;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out-expo), opacity 0.6s var(--ease);
}

.card__media img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.card:hover .card__media img:first-child,
.card:focus-within .card__media img:first-child { transform: scale(1.06); opacity: 0; }

.card:hover .card__media img + img,
.card:focus-within .card__media img + img { opacity: 1; transform: scale(1.06); }

.card__badge {
  position: absolute;
  z-index: 2;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(251, 247, 244, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-espresso);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.card__zoom {
  position: absolute;
  z-index: 2;
  right: 0.85rem;
  bottom: 0.85rem;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(251, 247, 244, 0.92);
  color: var(--c-espresso);
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out-expo),
    background-color var(--dur-1) var(--ease);
}

.card__zoom svg { width: 1rem; height: 1rem; }

.card:hover .card__zoom,
.card:focus-within .card__zoom { opacity: 1; transform: translateY(0) scale(1); }

.card__zoom:hover { background: var(--c-espresso); color: var(--c-blush-soft); }

.card__name {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.card__meta {
  font-size: var(--fs-small);
  color: var(--c-muted);
  font-family: var(--f-serif);
  font-style: italic;
  letter-spacing: 0.02em;
}

.collection__note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* ---------- 12. Filosofia (titolo rivelato parola per parola) ----------- */
.philosophy {
  text-align: center;
  background: linear-gradient(to bottom, var(--c-paper) 0%, var(--c-blush-soft) 100%);
}

.philosophy__title {
  margin-top: var(--sp-3);
  font-size: clamp(1.9rem, 1rem + 4.2vw, 4.4rem);
  font-weight: 300;
  line-height: 1.06;
  text-transform: uppercase;
  max-width: 18ch;
  margin-inline: auto;
}

.philosophy__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.philosophy__title .word > span {
  display: inline-block;
  transition: transform 0.9s var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.js .philosophy__title .word > span { transform: translateY(105%); }

.philosophy__title.is-inview .word > span { transform: translateY(0); }

.philosophy__text {
  margin: var(--sp-3) auto 0;
  max-width: 52ch;
  color: var(--c-muted);
  font-size: var(--fs-lead);
}

/* ---------- 13. Pilastri (diagramma circolare) -------------------------- */
.pillars {
  background: var(--c-blush-soft);
  padding-block-end: var(--sp-7);
}

.diagram {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.diagram__core {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: clamp(11rem, 34vw, 17rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.92), rgba(246, 221, 208, 0.55) 62%, rgba(246, 221, 208, 0.15) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 24px 60px -30px rgba(63, 36, 24, 0.55);
  animation: float 9s var(--ease) infinite;
}

.diagram__core::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px dashed rgba(63, 36, 24, 0.22);
  animation: spin 46s linear infinite;
}

.diagram__core svg,
.diagram__core img {
  width: 58%;
  height: auto;
  color: var(--c-espresso);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.diagram__items {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
}

.pillar {
  position: relative;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--c-line);
  transition: border-color var(--dur-2) var(--ease);
}

.pillar:hover { border-color: var(--c-terracotta); }

.pillar__name {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--fs-h3);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pillar__name small {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 0.55em;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--c-terracotta-ink);
}

.pillar__text {
  margin-top: 0.35rem;
  color: var(--c-muted);
  font-size: var(--fs-small);
  max-width: 34ch;
}

.pillars__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}

@media (min-width: 60em) {
  .diagram {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    min-height: 30rem;
  }
  .diagram__core { grid-column: 2; grid-row: 1; }
  .diagram__items { gap: var(--sp-5); }
  .diagram__items--left { grid-column: 1; grid-row: 1; text-align: right; }
  .diagram__items--right { grid-column: 3; grid-row: 1; }
  .diagram__items--left .pillar {
    padding-left: 0;
    padding-right: var(--sp-3);
    border-left: 0;
    border-right: 1px solid var(--c-line);
  }
  .diagram__items--left .pillar__name { justify-content: flex-end; }
  .diagram__items--left .pillar__text { margin-left: auto; }
  /* linee di collegamento disegnate in SVG */
  .diagram__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
  }
  .diagram__lines path {
    fill: none;
    stroke: rgba(63, 36, 24, 0.3);
    stroke-width: 1;
    stroke-dasharray: var(--len, 600);
    stroke-dashoffset: var(--len, 600);
    transition: stroke-dashoffset 1.4s var(--ease-out-expo);
  }
  .diagram.is-inview .diagram__lines path { stroke-dashoffset: 0; }
  .diagram__lines path:nth-child(2) { transition-delay: 0.15s; }
  .diagram__lines path:nth-child(3) { transition-delay: 0.3s; }
}

@media (max-width: 59.99em) {
  .diagram__lines { display: none; }
}

/* ---------- 14. Banner immagine a tutta larghezza ----------------------- */
.banner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(24rem, 65vh, 42rem);
  overflow: clip;
  isolation: isolate;
  background: var(--c-espresso-2);
  text-align: center;
  color: var(--c-paper);
}

.banner__media {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  will-change: transform;
}

.banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* la foto sotto è molto ricca di dettaglio: il velo è più scuro al centro,
   dove cadono titolo e testo, così restano leggibili ovunque */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(35, 19, 12, 0.42) 0%,
    rgba(35, 19, 12, 0.66) 45%,
    rgba(35, 19, 12, 0.66) 70%,
    rgba(35, 19, 12, 0.42) 100%
  );
}

.banner__inner {
  padding: var(--sp-6) var(--gutter);
  max-width: var(--maxw);
}

.banner__title {
  font-size: clamp(1.6rem, 0.9rem + 3.4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 2px 30px rgba(35, 19, 12, 0.4);
}

.banner__text {
  margin: var(--sp-2) auto 0;
  max-width: 46ch;
  font-size: var(--fs-body);
  color: rgba(251, 247, 244, 0.92);
}

.banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}

/* ---------- 15. Passaggi ------------------------------------------------ */
.steps { background: var(--c-paper); }

.steps__head {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 2vw, 2rem);
  margin-bottom: var(--sp-6);
}

.steps__figure {
  font-family: var(--f-serif);
  font-size: clamp(3.5rem, 1.5rem + 8vw, 9rem);
  font-weight: 300;
  font-variant-numeric: lining-nums;
  line-height: 0.72;
  color: var(--c-terracotta-ink);
  flex: none;
  /* allinea la cima della cifra a quella del titolo accanto */
  margin-top: -0.06em;
}

.steps__title {
  font-size: clamp(1.6rem, 0.9rem + 3.2vw, 3.4rem);
  font-weight: 300;
  line-height: 1.05;
  text-transform: uppercase;
}

.steps__intro {
  margin-top: var(--sp-2);
  max-width: 44ch;
  color: var(--c-muted);
}

.steps__list {
  list-style: none;
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  counter-reset: step;
}

.step {
  display: grid;
  gap: var(--sp-3);
  align-items: center;
}

@media (min-width: 52em) {
  .step {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .step:nth-child(even) .step__media { order: 2; }
}

.step__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-paper-2);
}

.step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out-expo);
}

.step:hover .step__media img { transform: scale(1.07); }

.step__index {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  line-height: 1;
  color: var(--c-terracotta-ink);
}

.step__num {
  position: relative;
  font-variant-numeric: lining-nums;
}

/* barretta decorativa dopo il numero, come nel riferimento */
.step__num::after {
  content: "/";
  margin-left: 0.08em;
  font-size: 0.72em;
  opacity: 0.7;
}

.step__label {
  font-family: var(--f-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.step__name {
  margin-top: var(--sp-1);
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.step__text {
  margin-top: 0.75rem;
  color: var(--c-muted);
  max-width: 46ch;
}

.step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-2);
  list-style: none;
}

.step__tags li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-espresso-2);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.step__tags li:hover {
  background: var(--c-espresso);
  color: var(--c-blush-soft);
}

/* ---------- 16. Galleria ------------------------------------------------ */
.gallery { background: var(--c-blush-soft); }

.gallery__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* sei foto: due colonne sul telefono, tre da tablet in su, niente orfani */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.4vw, 1rem);
}

@media (min-width: 48em) {
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) * 0.6);
  background: var(--c-paper-2);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out-expo), filter var(--dur-2) var(--ease);
}

.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.08); }

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(35, 19, 12, 0);
  transition: background-color var(--dur-2) var(--ease);
}

.gallery__item:hover::after,
.gallery__item:focus-visible::after { background: rgba(35, 19, 12, 0.16); }

/* ---------- 17. Contatti ------------------------------------------------ */
.contact {
  background: var(--c-paper);
  text-align: center;
}

.contact__title {
  margin-top: var(--sp-2);
  font-size: clamp(1.8rem, 1rem + 3.6vw, 3.8rem);
  font-weight: 300;
  line-height: 1.05;
  text-transform: uppercase;
}

.contact__text {
  margin: var(--sp-2) auto 0;
  max-width: 48ch;
  color: var(--c-muted);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}

.contact__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ---------- 18. Footer -------------------------------------------------- */
.footer {
  position: relative;
  background: var(--c-espresso);
  color: var(--c-blush-soft);
  padding-top: var(--sp-6);
  overflow: clip;
}

.footer a { text-decoration: none; }

.footer__grid {
  display: grid;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}

@media (min-width: 48em) {
  .footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--sp-5);
  }
}

.footer__col h2,
.footer__col h3 {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(246, 221, 208, 0.72);
  margin-bottom: var(--sp-2);
}

.footer__list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
}

.footer__text {
  font-size: var(--fs-small);
  color: rgba(246, 221, 208, 0.82);
  max-width: 34ch;
}

.footer__wordmark {
  display: block;
  width: 100%;
  margin-top: var(--sp-3);
  color: rgba(246, 221, 208, 0.16);
  font-weight: 300;
  font-size: var(--fs-giant);
  line-height: 0.78;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
  transform: translateY(12%);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  border-top: 1px solid rgba(246, 221, 208, 0.18);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: rgba(246, 221, 208, 0.78);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
}

.to-top {
  position: fixed;
  right: clamp(0.9rem, 2.5vw, 2rem);
  bottom: clamp(0.9rem, 2.5vw, 2rem);
  z-index: 80;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: rgba(251, 247, 244, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--c-espresso);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out-expo),
    visibility 0s linear var(--dur-2), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out-expo),
    visibility 0s, background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.to-top:hover { background: var(--c-espresso); color: var(--c-blush-soft); }

.to-top svg { width: 1rem; height: 1rem; }

/* ---------- 19. Lightbox ------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sp-2);
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: rgba(35, 19, 12, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease), visibility 0s;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.lightbox__close {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(251, 247, 244, 0.4);
  border-radius: 50%;
  color: inherit;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.lightbox__close:hover { background: var(--c-paper); color: var(--c-espresso); }

.lightbox__close svg { width: 1rem; height: 1rem; }

.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  animation: lb-in 0.5s var(--ease-out-expo);
}

@keyframes lb-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.lightbox__caption {
  text-align: center;
  font-size: var(--fs-small);
  color: rgba(251, 247, 244, 0.8);
  min-height: 1.5em;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(251, 247, 244, 0.4);
  border-radius: 50%;
  color: inherit;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.lightbox__nav:hover { background: var(--c-paper); color: var(--c-espresso); }
.lightbox__nav svg { width: 1rem; height: 1rem; }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* ---------- 20. Banner cookie (GDPR) ------------------------------------ */
.cookie {
  position: fixed;
  z-index: 160;
  left: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  margin-left: auto;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  max-width: 34rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-paper);
  box-shadow: 0 24px 60px -28px rgba(63, 36, 24, 0.65);
  transform: translateY(140%);
  transition: transform 0.7s var(--ease-out-expo);
}

.cookie.is-visible { transform: translateY(0); }

.cookie__title {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.cookie__text {
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.cookie__options {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line-soft);
}

.cookie__option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.cookie__option input {
  margin-top: 0.35rem;
  accent-color: var(--c-espresso);
  width: 1rem;
  height: 1rem;
  flex: none;
}

.cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--sp-2);
}

.cookie__actions .btn {
  min-height: 2.6rem;
  padding: 0.6rem 1.2rem;
  flex: 1 1 auto;
}

.cookie-prefs {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- 21. Pagine legali ------------------------------------------- */
.legal {
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-7);
}

.legal__meta {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: var(--sp-2);
}

.legal__body { margin-top: var(--sp-5); }

.legal__body h2 {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal__body h3 {
  margin-top: var(--sp-3);
  margin-bottom: 0.35rem;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: 0.06em;
}

.legal__body p,
.legal__body ul,
.legal__body ol { margin-top: 0.75rem; color: var(--c-muted); }

.legal__body ul,
.legal__body ol { padding-left: 1.2rem; display: grid; gap: 0.4rem; }

.legal__body a { color: var(--c-espresso); text-underline-offset: 3px; }

/* riepilogo della scelta sui cookie, in cima alla cookie policy */
.legal__body .legal__status {
  margin-top: var(--sp-2);
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-terracotta-ink);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--c-blush-soft);
  color: var(--c-espresso);
}

.legal__table {
  width: 100%;
  margin-top: var(--sp-2);
  border-collapse: collapse;
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}

.legal__table th,
.legal__table td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  vertical-align: top;
}

.legal__table th {
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--fs-micro);
  color: var(--c-muted);
}

.legal__scroll { overflow-x: auto; }

/* Pagina 404 */
.error-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + var(--sp-5)) var(--gutter) var(--sp-6);
  background: var(--c-blush-soft);
}

.error-page .lead { margin-inline: auto; }

.error-page__code {
  font-family: var(--f-serif);
  font-size: var(--fs-giant);
  line-height: 0.8;
  color: var(--c-terracotta-ink);
}

/* ---------- 22. Animazioni di ingresso (scroll reveal) ------------------ */
/* Senza JavaScript il contenuto resta visibile: nulla viene mai nascosto. */
[data-reveal] {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

.js [data-reveal="left"] { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="scale"] { transform: scale(0.96); }

.js [data-reveal].is-inview,
[data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* ---------- 23. Preferenze utente --------------------------------------- */
/* ---------- 20. Hero a piani e menu cinetico ---------------------------- */
/* Adattamento in JavaScript nativo di due effetti pensati per GSAP + Lenis.
   Stessa meccanica, nessuna libreria: il peso della pagina non cambia e la
   Content-Security-Policy resta chiusa agli script esterni. */

/* --- Hero: quattro piani che scorrono a velocità diverse ---------------- */
/* I piani di sfondo sono più alti dell'hero: scorrendo verso il basso non
   scoprono mai il bordo superiore. */
.hero__media,
.hero__wash {
  inset: -12% 0;
}

.hero::after { content: none; }

.hero__wash {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  background: linear-gradient(to bottom,
    rgba(251, 247, 244, 0.94) 0%,
    rgba(251, 247, 244, 0.72) 48%,
    rgba(251, 247, 244, 0.18) 100%);
}

/* foschia in primo piano: il piano più vicino, quindi il più lento */
.hero__fore {
  position: absolute;
  inset: auto 0 -6% 0;
  height: 38%;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
  /* niente filter: blur() — su un elemento che si muove obbliga il telefono a
     rifare la sfocatura a ogni fotogramma. Le sfumature sono già morbide. */
  background:
    radial-gradient(58% 130% at 14% 108%, rgba(246, 221, 208, 0.74) 0%, rgba(246, 221, 208, 0) 70%),
    linear-gradient(to top, rgba(251, 247, 244, 0.74) 0%, rgba(251, 247, 244, 0) 100%);
}

/* Sotto i 62em l'hero è statico: nessun piano in movimento, nessun livello
   di composizione in più da mantenere. */
@media (max-width: 61.99em) {
  .hero__media,
  .hero__wash,
  .hero__inner,
  .hero__fore { will-change: auto; transform: none; }
}

/* --- Area toccabile dei collegamenti di servizio ------------------------ */
/* I link del piè di pagina erano alti 17-21 px: sotto i 24 px richiesti da
   WCAG 2.2 per il tocco (criterio 2.5.8). L'imbottitura verticale allarga
   l'area sensibile senza spostare il testo di una virgola. Non si applica ai
   link dentro le frasi, dove la regola non vale e l'imbottitura
   scompaginerebbe l'interlinea. */
li > .link-line,
.collection__note > .link-line,
.cookie-prefs {
  display: inline-block;
  padding-block: 0.32rem;
}

/* Nota: qui è stato provato `content-visibility: auto` sulle sezioni e poi
   tolto. Le altezze reali vanno da 493 a 2772 px e cambiano molto fra
   telefono e computer: una sola altezza prenotata sarebbe sbagliata quasi
   ovunque e farebbe saltare la barra di scorrimento. Su sei sezioni il
   risparmio di disegno non ripaga quel difetto. */

.hero__inner { z-index: 1; will-change: transform; }

@media (min-width: 48em) {
  .hero__wash {
    background:
      linear-gradient(to right,
        rgba(251, 247, 244, 0.95) 0%,
        rgba(251, 247, 244, 0.82) 34%,
        rgba(251, 247, 244, 0.25) 62%,
        rgba(251, 247, 244, 0) 82%),
      linear-gradient(to bottom, rgba(251, 247, 244, 0.5) 0%, rgba(251, 247, 244, 0) 34%);
  }
}

/* --- Pulsante del menu: le parole si scambiano, l'icona ruota ----------- */
.burger {
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  width: auto;
  min-height: 44px;
  padding-inline: 0.2rem;
}

.burger__label {
  display: block;
  overflow: hidden;
  height: 1.2em;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.burger__word {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
  transition: transform 0.55s var(--ease-out-expo);
}

.burger[aria-expanded="true"] .burger__word { transform: translateY(-100%); }

.burger__icon {
  display: block;
  width: 13px;
  height: 13px;
  transition: transform 0.65s var(--ease-out-expo);
}

.burger__icon svg { display: block; width: 100%; height: 100%; }

.burger[aria-expanded="true"] .burger__icon { transform: rotate(315deg); }

/* il menu a tutta pagina ora è raggiungibile a ogni larghezza */
@media (min-width: 62em) {
  .burger { display: inline-flex; }
  .menu { display: grid; }
  .header__inner > .header__nav:not(.header__nav--end) { display: none; }
}

/* --- Menu: pannelli sfalsati al posto del taglio ------------------------ */
.menu {
  background: transparent;
  clip-path: none;
  overflow: hidden;
  /* resta visibile finché l'ultimo pannello non è uscito */
  transition: visibility 0s linear 0.85s;
}

.menu.is-open {
  clip-path: none;
  transition: visibility 0s;
}

.menu__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.menu__panel {
  position: absolute;
  inset: 0;
  transform: translateX(101%);
  transition: transform 0.575s var(--ease-out-expo);
}

.menu__panel:nth-child(1) { background: var(--c-terracotta); }
.menu__panel:nth-child(2) { background: var(--c-blush); transition-delay: 0.12s; }
.menu__panel:nth-child(3) { background: var(--c-blush-soft); transition-delay: 0.24s; }

.menu.is-open .menu__panel { transform: translateX(0); }

/* --- Forme che affiorano dietro la voce puntata ------------------------- */
.menu__shapes {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.menu__shape {
  position: absolute;
  top: 50%;
  right: -4%;
  width: min(64vw, 26rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  color: var(--c-espresso);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
}

.menu__shape.is-active { opacity: 1; }

.menu__shape-el {
  opacity: 0;
  transform: scale(0.5) rotate(-10deg);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s var(--ease);
}

.menu__shape.is-active .menu__shape-el {
  opacity: 0.14;
  transform: scale(1) rotate(0deg);
}

.menu__shape-el:nth-child(2) { transition-delay: 0.07s; }
.menu__shape-el:nth-child(3) { transition-delay: 0.14s; }
.menu__shape-el:nth-child(4) { transition-delay: 0.21s; }
.menu__shape-el:nth-child(5) { transition-delay: 0.28s; }
.menu__shape-el:nth-child(6) { transition-delay: 0.35s; }
.menu__shape-el:nth-child(7) { transition-delay: 0.42s; }
.menu__shape-el:nth-child(8) { transition-delay: 0.49s; }

/* --- Voci: entrano dal basso ruotando ---------------------------------- */
.menu__link {
  transform: translateY(140%) rotate(6deg);
  transform-origin: 0% 100%;
}

.menu.is-open .menu__link { transform: translateY(0) rotate(0deg); }

/* partono dopo i pannelli, una dopo l'altra */
.menu__item:nth-child(1) .menu__link { transition-delay: 0.35s; }
.menu__item:nth-child(2) .menu__link { transition-delay: 0.40s; }
.menu__item:nth-child(3) .menu__link { transition-delay: 0.45s; }
.menu__item:nth-child(4) .menu__link { transition-delay: 0.50s; }
.menu__item:nth-child(5) .menu__link { transition-delay: 0.55s; }

.menu__foot { transition-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .philosophy__title .word > span,
  .menu__link,
  .menu__panel {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__media,
  .hero__wash,
  .hero__inner,
  .hero__fore,
  .banner__media { transform: none !important; }

  /* le forme d'ambiente non compaiono affatto */
  .menu__shapes { display: none !important; }

  .diagram__lines path { stroke-dashoffset: 0 !important; }
}

@media (prefers-contrast: more) {
  :root {
    --c-muted: #422a1d;
    --c-line: rgba(63, 36, 24, 0.45);
    --c-line-soft: rgba(63, 36, 24, 0.28);
  }
  .btn { border-width: 2px; }
}

@media print {
  .header, .menu, .to-top, .cookie, .preloader, .lightbox, .hero__scroll, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}