/* ==========================================================================
   PORTFOLIO, foglio di stile
   Non serve modificare questo file per aggiornare i contenuti.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variabile.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --nero: #000000;
  --bianco: #ffffff;
  --grigio: #8f8f8f;
  --vuoto: #141414;          /* solo come segnaposto mentre un'immagine carica */

  --pad: clamp(16px, 3.2vw, 56px);
  --gap: clamp(12px, 1.6vw, 28px);
  --head: 64px;

  --f-small: 0.8125rem;      /* 13px */
  --f-body: 1.0625rem;       /* 17px */
  --f-h3: clamp(1.125rem, 1.45vw, 1.5rem);
  --f-lead: clamp(1.375rem, 2.3vw, 2.25rem);
  --f-h2: clamp(2.75rem, 8vw, 8.5rem);
  --f-title: clamp(3.25rem, 11.5vw, 14rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--nero);
  color: var(--bianco);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--f-body);
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--bianco); color: var(--nero); }
:focus-visible { outline: 2px solid var(--bianco); outline-offset: 4px; }

html.lock, html.lock body { overflow: hidden; }

.skip {
  position: fixed; left: var(--pad); top: 12px; z-index: 200;
  background: var(--bianco); color: var(--nero); padding: 8px 14px; font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.noscript { padding: 40px var(--pad); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* --------------------------------------------------------------------------
   Header fisso
   -------------------------------------------------------------------------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--pad) 20px;
  color: var(--bianco);
  mix-blend-mode: difference;
  font-size: var(--f-small);
  font-weight: 600;
  pointer-events: none;
}
.site-head a { pointer-events: auto; position: relative; }
.site-head nav { display: flex; gap: clamp(16px, 2.6vw, 44px); }
.site-head a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.site-head a:hover::after,
.site-head a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }

/* --------------------------------------------------------------------------
   Cambio pagina
   -------------------------------------------------------------------------- */
#main { outline: none; transition: opacity .45s ease; }
#main.is-out { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .24s ease, visibility 0s linear .24s; }

/* --------------------------------------------------------------------------
   Immagini: contenitore, caricamento, comparsa
   -------------------------------------------------------------------------- */
.media { position: relative; overflow: hidden; background: var(--vuoto); }
.media__in { width: 100%; height: 100%; }
.media img, .media video {
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transition: opacity .6s ease;
}
.media.is-loaded { background: transparent; }
.media.is-loaded img, .media.is-loaded video { opacity: 1; }
.media.is-missing { background: transparent; outline: 1px dashed #4a4a4a; outline-offset: -1px; min-height: 120px; }
.missing {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; min-height: 120px; padding: 24px; color: var(--grigio); font-size: var(--f-small);
}

/* comparsa a tendina (immagini) */
.js-anim .rv { clip-path: inset(100% 0 0 0); }
.js-anim .rv .media__in { transform: scale(1.12); }
.js-anim .rv.in { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease-io); }
.js-anim .rv.in .media__in { transform: none; transition: transform 1.7s var(--ease); }

/* comparsa dal basso (slide, fotogrammi) */
.js-anim .rv-up { opacity: 0; transform: translate3d(0, 7vh, 0); }
.js-anim .rv-up.in {
  opacity: 1; transform: none;
  transition: opacity 1s ease, transform 1.3s var(--ease);
}

/* avvisi per chi aggiorna i contenuti */
.avviso {
  grid-column: 1 / -1;
  border: 1px dashed #4a4a4a; padding: 20px 24px; color: var(--grigio);
  font-size: var(--f-small); max-width: 70ch;
}
.avviso strong { color: var(--bianco); font-weight: 600; }

/* --------------------------------------------------------------------------
   Titoli condivisi
   -------------------------------------------------------------------------- */
.display {
  font-weight: 900; font-stretch: 125%;
  letter-spacing: -0.045em; line-height: .84;
}
.section { padding: clamp(110px, 18vh, 220px) var(--pad) 0; }
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: clamp(40px, 8vh, 104px);
}
.sec-title { font-size: var(--f-h2); }
.sec-note { color: var(--grigio); font-size: var(--f-small); white-space: nowrap; padding-bottom: .4em; }

/* --------------------------------------------------------------------------
   HOME: apertura
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6vh;
  padding: calc(var(--head) + 3vh + env(safe-area-inset-top, 0px)) var(--pad) clamp(24px, 5vh, 56px);
}
.hero__name {
  font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  letter-spacing: -0.048em; line-height: .92;
  visibility: hidden;
}
.hero.is-fit .hero__name { visibility: visible; }
.hero__name, .contact__mail { max-width: 100%; overflow: hidden; }
.hero__name .fit { font-stretch: 110%; line-height: .94; }
.fit {
  display: block; width: max-content; white-space: nowrap;
  overflow: hidden; padding: .03em 0 .02em; font-size: 16px;
}
.ch { display: inline-block; }
.js-anim .hero .ch { transform: translate3d(0, 108%, 0); }
.hero.is-in .ch { transform: none; transition: transform 1.25s var(--ease) calc(var(--i) * 38ms + 80ms); }

.hero__foot { align-items: end; row-gap: 20px; }
.hero__role {
  grid-column: 1 / span 4;
  font-size: var(--f-h3); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em;
}
.hero__intro {
  grid-column: 7 / span 6;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.32;
  letter-spacing: -0.01em; max-width: 34em;
}
.js-anim .hero__foot { opacity: 0; transform: translate3d(0, 16px, 0); }
.hero.is-in .hero__foot { opacity: 1; transform: none; transition: opacity 1s ease .7s, transform 1.2s var(--ease) .7s; }

/* --------------------------------------------------------------------------
   HOME: Selected Work
   -------------------------------------------------------------------------- */
/* Selected Work: grid rigorosa di cover 16:9 */
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 5vw, 84px) var(--gap); align-items: start; }
.work-grid > .work-item { display: block; grid-column: auto; margin: 0; min-width: 0; width: 100%; }
.work-item .media { aspect-ratio: 16 / 9 !important; }
.work-item .media img { width: 100%; height: 100%; object-fit: cover; }

.work-item .media img { transition: opacity .6s ease, transform 1.1s var(--ease); }
.work-item:hover .media img,
.work-item:focus-visible .media img { transform: scale(1.035); }

.work-item__cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 16px;
}
.work-item__title {
  font-size: var(--f-h3); font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.02em; line-height: 1.12;
}
.work-item__meta { color: var(--grigio); font-size: var(--f-small); text-align: right; }

/* cursore "Apri" sui progetti (solo mouse) */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cc, #fff); color: #000;
  font-size: 15px; font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em;
  pointer-events: none; transform: scale(0); will-change: transform;
}
.has-cursor [data-cursor] { cursor: none; }

/* --------------------------------------------------------------------------
   HOME: About
   -------------------------------------------------------------------------- */
.about__statement {
  font-size: clamp(1.75rem, 4.4vw, 4.75rem); font-weight: 800; font-stretch: 112%;
  letter-spacing: -0.035em; line-height: 1.02; max-width: 17em;
}
.about__body { margin-top: clamp(48px, 9vh, 112px); align-items: start; row-gap: 32px; }
.about__links { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 10px; }
.about__text { grid-column: 7 / span 5; }
.about__text p { max-width: 36em; }
.about__text p + p { margin-top: 1em; }

.link-big {
  display: inline-block; position: relative; width: max-content;
  font-size: var(--f-h3); font-weight: 700; font-stretch: 112%; letter-spacing: -0.02em;
}
.link-big::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor;
  transform: scaleX(.18); transform-origin: left; transition: transform .6s var(--ease);
}
.link-big:hover::after, .link-big:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   HOME: Contact
   -------------------------------------------------------------------------- */
.contact__mail { display: block; position: relative; text-transform: none; padding-bottom: max(10px, 1vw); }
.contact__mail .fit { letter-spacing: -0.055em; padding-bottom: .06em; }
.contact__mail::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: max(3px, .45vw); width: 100%;
  background: var(--bianco); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease);
}
.contact__mail:hover::after, .contact__mail:focus-visible::after { transform: scaleX(1); }
.contact__links { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: clamp(40px, 7vh, 88px); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 32px;
  padding: clamp(96px, 16vh, 200px) var(--pad) calc(28px + env(safe-area-inset-bottom, 0px));
  color: var(--grigio); font-size: var(--f-small);
}
.foot a:hover { color: var(--bianco); }

/* --------------------------------------------------------------------------
   PAGINA PROGETTO
   -------------------------------------------------------------------------- */
.proj__head { padding: calc(var(--head) + 7vh + env(safe-area-inset-top, 0px)) var(--pad) 0; }
.back { display: inline-block; font-size: var(--f-small); font-weight: 600; color: var(--grigio); transition: color .3s; }
.back:hover { color: var(--bianco); }

.proj__title {
  margin-top: clamp(20px, 4vh, 48px);
  font-size: var(--f-title); max-width: 11em;
}
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .05em 0 .1em; margin: -.05em 0 -.1em; }
.wi { display: inline-block; }
.js-anim .proj__title .wi { transform: translate3d(0, 112%, 0); }
.proj.is-in .proj__title .wi { transform: none; transition: transform 1.15s var(--ease) calc(var(--i) * 70ms + 60ms); }

.proj__meta {
  margin-top: clamp(40px, 8vh, 96px); row-gap: 24px;
}
.proj__meta > div { grid-column: span 3; }
.proj__meta dt { color: var(--grigio); font-size: var(--f-small); margin-bottom: 4px; }
.proj__meta dd { font-weight: 600; }
.proj__nota { margin-top: 28px; color: var(--grigio); font-size: var(--f-small); }
.js-anim .proj__meta, .js-anim .proj__nota { opacity: 0; }
.proj.is-in .proj__meta, .proj.is-in .proj__nota { opacity: 1; transition: opacity 1s ease .55s; }

.blocks { padding: 0 var(--pad); }
.blk { margin-top: clamp(96px, 16vh, 200px); }
.blk:first-child { margin-top: clamp(56px, 9vh, 112px); }

.cap { margin-top: 12px; color: var(--grigio); font-size: var(--f-small); }

/* blocco: testo */
.blk-testo { align-items: start; row-gap: 16px; }
.blk-testo__label { grid-column: 1 / span 3; color: var(--grigio); font-size: var(--f-small); font-weight: 600; padding-top: .35em; }
.blk-testo__txt { grid-column: 5 / span 7; }
.blk-testo__txt p { max-width: 62ch; }
.blk-testo__txt p + p { margin-top: 1em; }
.blk-testo.is-grande .blk-testo__txt {
  font-size: var(--f-lead); font-weight: 600; line-height: 1.24; letter-spacing: -0.018em;
}
.blk-testo.is-grande .blk-testo__txt p { max-width: 24em; }

/* blocco: frase */
.blk-frase {
  font-size: clamp(3rem, 14vw, 17rem);
}
.blk-frase.is-destra { text-align: right; }

/* blocco: immagine singola */
.blk-img { align-items: start; }
.blk-img > figure { grid-column: 1 / -1; }
.blk-img.w-piena { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); display: block; }
.blk-img.w-piena .cap { padding: 0 var(--pad); }
.blk-img.w-media > figure { grid-column: 1 / span 8; }
.blk-img.w-media.pos-destra > figure { grid-column: 5 / span 8; }
.blk-img.w-media.pos-centro > figure { grid-column: 3 / span 8; }
.blk-img.w-piccola > figure { grid-column: 1 / span 5; }
.blk-img.w-piccola.pos-destra > figure { grid-column: 8 / span 5; }
.blk-img.w-piccola.pos-centro > figure { grid-column: 5 / span 4; }

/* blocco: più immagini */
.blk-imgs { align-items: start; row-gap: clamp(48px, 8vw, 120px); }
.blk-imgs > figure { grid-column: span 6; }
.blk-imgs.n2 > figure:nth-child(1) { grid-column: 1 / span 5; }
.blk-imgs.n2 > figure:nth-child(2) { grid-column: 7 / span 6; margin-top: 16vw; }
.blk-imgs.n3 > figure:nth-child(1) { grid-column: 1 / span 4; }
.blk-imgs.n3 > figure:nth-child(2) { grid-column: 5 / span 4; margin-top: 8vw; }
.blk-imgs.n3 > figure:nth-child(3) { grid-column: 9 / span 4; margin-top: 16vw; }
.blk-imgs.n4 > figure:nth-child(odd) { grid-column: 1 / span 6; }
.blk-imgs.n4 > figure:nth-child(even) { grid-column: 7 / span 6; margin-top: 10vw; }

/* blocco: presentazione */
.deck__head { align-items: end; row-gap: 24px; margin-bottom: clamp(40px, 8vh, 96px); }
.deck__title { grid-column: 1 / span 8; font-size: clamp(2.25rem, 5.4vw, 5.5rem); }
.deck__desc { margin-top: 18px; color: var(--grigio); max-width: 42ch; font-size: var(--f-body); }
.deck__side {
  grid-column: 9 / -1; justify-self: end;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.deck__count { color: var(--grigio); font-size: var(--f-small); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: var(--bianco); color: var(--nero);
  font-size: var(--f-small); font-weight: 700; font-stretch: 110%; letter-spacing: -0.005em;
  border: 1.5px solid var(--bianco);
  transition: background .3s, color .3s;
}
.btn:hover { background: var(--nero); color: var(--bianco); }
.btn svg { width: 14px; height: 14px; flex: none; }

/* Presentation: varying editorial scale, preserving the slide original ratio. */
.deck__slides { display: flex; flex-direction: column; align-items: stretch; gap: clamp(44px, 9vh, 132px); }
.slide { width: 100%; max-width: min(100%, calc(90vh * 16 / 9)); margin: 0 auto; }
.slide:nth-child(5n+2) { width: 82%; margin-left: 0; margin-right: auto; }
.slide:nth-child(5n+3) { width: 68%; margin-left: auto; margin-right: 0; }
.slide:nth-child(5n+4) { width: 90%; margin-left: auto; margin-right: auto; }
.slide:nth-child(5n+5) { width: 76%; margin-left: 4%; margin-right: auto; }
.slide .media { height: auto; }
.slide .media img { object-fit: contain; }

.slide .media { cursor: zoom-in; }
.slide__n {
  display: flex; justify-content: space-between; margin-top: 12px;
  color: var(--grigio); font-size: var(--f-small); font-variant-numeric: tabular-nums;
}
.slide__open { opacity: 0; transition: opacity .3s; }
.slide:hover .slide__open { opacity: 1; }

/* indicatore della presentazione in basso */
.hud {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 6px 6px 6px 18px; background: var(--bianco); color: var(--nero);
  font-size: var(--f-small); font-weight: 600; font-variant-numeric: tabular-nums;
  transform: translate3d(-50%, 160%, 0); visibility: hidden;
  transition: transform .55s var(--ease), visibility 0s linear .55s;
}
.hud.on { transform: translate3d(-50%, 0, 0); visibility: visible; transition: transform .55s var(--ease); }
.hud button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--nero); color: var(--bianco); padding: 10px 14px; font-weight: 700;
}
.hud svg { width: 13px; height: 13px; }

/* blocco: video */
.blk-video { align-items: start; }
.blk-video > figure { grid-column: 1 / -1; }
.blk-video.w-media > figure { grid-column: 1 / span 8; }
.blk-video.w-media.pos-destra > figure { grid-column: 5 / span 8; }
.blk-video.w-piena { display: block; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
.blk-video.w-piena .cap { padding: 0 var(--pad); }
.vid { position: relative; aspect-ratio: 16 / 9; }
.vid video { opacity: 1; background: #000; }
.vid__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: var(--f-h3); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em;
  color: var(--bianco);
}
.vid__play span.ico {
  width: clamp(64px, 7vw, 104px); height: clamp(64px, 7vw, 104px); border-radius: 50%;
  background: var(--bianco); position: relative; transition: transform .5s var(--ease);
}
.vid__play span.ico::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--nero);
}
.vid__play:hover span.ico { transform: scale(1.08); }
.vid.is-playing .vid__play { display: none; }

/* blocco: storyboard */
.sb__title { font-size: clamp(2.25rem, 5.4vw, 5.5rem); margin-bottom: clamp(40px, 8vh, 96px); }
.sb__grid {
  display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) var(--gap);
}
.sb__frame figcaption { display: flex; gap: 14px; margin-top: 12px; font-size: var(--f-small); }
.sb__frame figcaption b { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.5em; }
.sb__frame figcaption span { color: var(--grigio); }

/* blocco: crediti */
.blk-crediti { align-items: start; row-gap: 16px; }
.blk-crediti__label { grid-column: 1 / span 3; color: var(--grigio); font-size: var(--f-small); font-weight: 600; padding-top: .2em; }
.blk-crediti dl {
  grid-column: 5 / span 8;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--gap);
}
.blk-crediti dt { color: var(--grigio); font-size: var(--f-small); }
.blk-crediti dd { font-weight: 600; }

/* prossimo progetto */
.next {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  padding: clamp(120px, 22vh, 260px) var(--pad) 0;
}
.next__txt { grid-column: 1 / span 8; }
.next__label { display: block; color: var(--grigio); font-size: var(--f-small); font-weight: 600; margin-bottom: 18px; }
.next__title { display: block; font-size: var(--f-h2); }
.next__brand { display: block; margin-top: 16px; color: var(--grigio); }
.next .media { grid-column: 10 / span 3; }
.next .media img { transition: opacity .6s ease, transform 1.1s var(--ease); }
.next:hover .media img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   Visore a schermo intero
   -------------------------------------------------------------------------- */
.viewer {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--nero); color: var(--bianco);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.viewer.open { opacity: 1; visibility: visible; transition: opacity .35s ease; }

.viewer__top, .viewer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--pad); font-size: var(--f-small); font-weight: 600;
}
.viewer__top { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.viewer__bottom { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); position: relative; }
.viewer__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__actions { display: flex; gap: 8px; flex: none; }
.vbtn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px;
  color: var(--bianco); font-weight: 600; transition: opacity .3s;
}
.vbtn svg { width: 16px; height: 16px; }
.vbtn:hover { opacity: .65; }
.vbtn[disabled] { opacity: .25; cursor: default; }

.viewer__stage { position: relative; min-height: 0; padding: 0 var(--pad); }
.viewer__frame {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.viewer__media {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}
.viewer__media.from-r { animation: vin-r .45s var(--ease) both; }
.viewer__media.from-l { animation: vin-l .45s var(--ease) both; }
@keyframes vin-r { from { opacity: 0; transform: translate3d(2.5%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes vin-l { from { opacity: 0; transform: translate3d(-2.5%, 0, 0); } to { opacity: 1; transform: none; } }

.viewer__zone { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; }
.viewer__zone--prev { left: 0; cursor: w-resize; }
.viewer__zone--next { right: 0; cursor: e-resize; }
.viewer__zone[disabled] { cursor: default; }
.viewer.is-video .viewer__zone { display: none; }

.viewer__nav { display: flex; align-items: center; gap: 4px; }
.viewer__count { min-width: 5.5em; text-align: center; font-variant-numeric: tabular-nums; }
.viewer__bar {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bianco);
  transform-origin: left; transform: scaleX(0); transition: transform .45s var(--ease);
}
.viewer__hint { color: var(--grigio); font-weight: 500; }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero__role { grid-column: 1 / span 5; }
  .hero__intro { grid-column: 6 / span 7; }
  .about__text { grid-column: 6 / span 7; }
  .blk-testo__txt { grid-column: 4 / span 9; }
  .blk-crediti dl { grid-column: 4 / span 9; }
  .next .media { grid-column: 9 / span 4; }
  .viewer__hint { display: none; }
}

/* --------------------------------------------------------------------------
   Smartphone
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root { --head: 56px; }
  .site-head { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .site-head nav { gap: 16px; }

  .hero__foot { display: block; }
  .hero__role { margin-bottom: 14px; }

  .work-grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .work-grid > .work-item { grid-column: 1 / -1; margin: 0; width: 100%; }
  .work-item__cap { flex-direction: column; gap: 4px; }
  .work-item__meta { text-align: left; }

  .about__body { display: flex; flex-direction: column-reverse; }

  .proj__meta > div { grid-column: span 6; }
  .blk-testo__label, .blk-testo__txt,
  .blk-crediti__label, .blk-crediti dl { grid-column: 1 / -1; }
  .blk-crediti dl { grid-template-columns: 1fr; gap: 16px; }

  .blk-img.w-media > figure, .blk-img.w-media.pos-destra > figure, .blk-img.w-media.pos-centro > figure,
  .blk-video.w-media > figure, .blk-video.w-media.pos-destra > figure { grid-column: 1 / -1; }
  .blk-img.w-piccola > figure, .blk-img.w-piccola.pos-destra > figure, .blk-img.w-piccola.pos-centro > figure { grid-column: 2 / -2; }

  .blk-imgs > figure,
  .blk-imgs.n2 > figure:nth-child(n), .blk-imgs.n3 > figure:nth-child(n), .blk-imgs.n4 > figure:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .blk-imgs.n2 > figure:nth-child(2), .blk-imgs.n4 > figure:nth-child(even) { grid-column: 3 / -1; }

  .deck__slides { gap: 32px; }
  .deck__slides > .slide { width: 100%; margin-left: auto; margin-right: auto; max-width: 100%; }
  .deck__title, .deck__side { grid-column: 1 / -1; justify-self: start; align-items: flex-start; }
  .slide__open { display: none; }
  .sb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next__txt { grid-column: 1 / -1; }
  .next .media { grid-column: 1 / span 7; margin-top: 32px; }

  .viewer__top .vbtn span { display: none; }
}

@media (max-width: 420px) {
  .site-head__name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sb__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Movimento ridotto
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.viewer:focus { outline: none; }

/* REVISIONE 03: visual identity Alessia Molinari */
.hero__name { display:block; }
.hero__name .hero__line { display:block; width:max-content; max-width:none; margin:0; padding:.045em .02em .06em 0; line-height:.87; }
.hero__line + .hero__line { margin-top:.045em; }
.hero__name .ch { transition: translate .45s cubic-bezier(.2,.75,.2,1); }
.hero.is-in .hero__name:hover .ch { translate:var(--mx,0px) var(--my,0px); }
.about__quote { margin-bottom:clamp(50px,8vh,110px); }
.about__statement { max-width:22em; font-size:clamp(2.1rem,5.3vw,6.2rem); line-height:1.07; }
.about__author { margin-top:28px; font-size:clamp(.9rem,1.2vw,1.1rem); color:#a9a9a9; font-weight:600; }
.about__text p:last-child { margin-top:2.5em; font-weight:700; font-size:clamp(1.15rem,1.5vw,1.45rem); color:white; }
@media (hover:none) { .hero__name .ch { translate:0 0 !important; } }


/* REVISIONE 04 — cinematic type, quiet interactive depth */
.hero__name { isolation:isolate; cursor:default; overflow:visible; }
.hero__name .hero__line { overflow:hidden; padding:.11em .035em .11em 0; }
.hero__name .ch {
  display:inline-block; transform-origin:50% 80%;
  transition: transform .75s cubic-bezier(.16,1,.3,1), filter .75s cubic-bezier(.16,1,.3,1), opacity .75s ease !important;
  will-change:transform,filter;
}
/* Start with a precise, soft depth-of-field reveal rather than letter-by-letter bouncing. */
.js-anim .hero:not(.is-in) .hero__name .ch { transform:translate3d(0,112%,0) scale(.98); filter:blur(12px); opacity:0; }
.hero.is-in .hero__name .ch {
  transform:translate3d(var(--letter-x,0px),var(--letter-y,0px),0) scale(var(--letter-scale,1));
  filter:blur(0);opacity:1;
  transition-delay:calc(var(--row-delay,0ms) + var(--i) * 22ms);
}
/* Very small physical response to cursor; no wobble, spin or perpetual motion. */
.hero.is-in .hero__name.is-interacting .ch {
  transition-delay:0ms;
  transition-duration:.6s;
}
.about__quote { padding:clamp(28px,5vw,72px) 0; border-top:1px solid #373737; border-bottom:1px solid #373737; }
.about__statement { max-width:none; font-size:clamp(2.1rem,4.45vw,5.6rem); letter-spacing:-.048em; line-height:1.11; font-weight:800; }
.about__quote-line { display:block; width:fit-content; }
.about__quote-line + .about__quote-line { margin-top:.12em; }
.about__author { margin-top:clamp(30px,4vw,58px); text-align:right; letter-spacing:.08em; text-transform:uppercase; }
@media(max-width:760px){
 .about__quote-line { display:inline; }
 .about__quote-line + .about__quote-line::before { content:' '; }
 .about__statement { font-size:clamp(2rem,8vw,3.7rem); line-height:1.12; }
 .about__author{text-align:left;}
}
@media(prefers-reduced-motion:reduce){
 .hero__name .ch,.hero.is-in .hero__name .ch { transform:none!important; filter:none!important;opacity:1!important; transition:none!important; }
}