/* White Goat v2: struttura e modelli in replica/recon.md.
   Identità da LANE.md: crema, bruno, nero pellicola, un solo rosso. Movimento descritto in replica/design/motion.md. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:400 16px/1.55 var(--font-sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,video,svg{display:block;max-width:100%}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
em{font-style:normal}

/* ---------- Barra ---------- */
.bar{position:fixed;z-index:40;top:0;left:0;right:0;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 28px;color:var(--bg);mix-blend-mode:difference;font:500 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.bar a{text-decoration:none}
.bar__links{display:flex;gap:22px}
.bar__links a:hover,.bar__cta:hover{text-decoration:underline;text-underline-offset:4px}
.bar__logo{font:400 26px/1 var(--font-display);letter-spacing:.01em;text-transform:uppercase}
.bar__right{display:flex;gap:22px;justify-content:flex-end;align-items:center}
.bar__lang{letter-spacing:.08em;text-transform:uppercase;font-size:11px}

/* ---------- Bottone a pennellata ---------- */
.brush{position:relative;display:inline-grid;place-items:center;min-width:180px;height:52px;padding:0 30px;text-decoration:none;
  font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-accent);isolation:isolate;transition:transform var(--t-fast) var(--t-ease)}
.brush::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 52' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C40 2 90 6 140 3 C165 2 186 4 197 8 L194 20 L199 31 L195 44 C150 50 100 47 60 50 C35 51 15 49 3 46 L6 33 L1 22 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 52' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C40 2 90 6 140 3 C165 2 186 4 197 8 L194 20 L199 31 L195 44 C150 50 100 47 60 50 C35 51 15 49 3 46 L6 33 L1 22 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transition:transform var(--t-base) var(--t-ease)}
.brush:hover::before{transform:scaleX(1.06) rotate(-1deg)}
.brush:active{transform:scale(.98)}

/* ---------- S01 Hero ---------- */
.hero{position:relative;background:var(--bg)}
.hero__pin{position:relative;min-height:100dvh;overflow:hidden;display:grid;padding:96px 28px 32px}
.hero__brand{position:relative;z-index:3;font:400 clamp(64px,8.4vw,132px)/.84 var(--font-display);text-transform:uppercase;align-self:start}
.hero__shards{position:absolute;z-index:1;left:0;right:0;top:50%;transform:translateY(-56%);display:grid;place-items:center;pointer-events:none;
  font:400 clamp(90px,15.2vw,280px)/.82 var(--font-display);text-transform:uppercase;color:var(--accent);white-space:nowrap;
  will-change:transform}
.hero__shards span{grid-area:1/1}
.hero__shards span:nth-child(1){clip-path:inset(0 0 62% 0)}
.hero__shards span:nth-child(2){clip-path:inset(38% 0 30% 0);transform:translateX(var(--g2,0))}
.hero__shards span:nth-child(3){clip-path:inset(70% 0 0 0);transform:translateX(var(--g3,0))}
.hero__goat{position:absolute;z-index:2;left:50%;bottom:-2vh;width:auto;height:min(92vh,120vw);max-width:none;transform:translateX(-50%);
  filter:drop-shadow(0 30px 40px rgba(20,40,60,.22));}
.hero__sub{position:absolute;z-index:3;right:28px;top:104px;max-width:21ch;font:400 15px/1.45 var(--font-sans);text-align:right}
.hero__cta{position:absolute;z-index:3;left:28px;bottom:32px}

/* ---------- S02 La firma: la capra del primo video si disegna ---------- */
.sign{position:relative;height:320vh;background:var(--bg);transition:background-color .8s var(--t-ease)}
.sign.dark{background:var(--dark)}
.sign__pin{position:sticky;top:0;height:100dvh;overflow:hidden;display:grid;place-items:center}
.sign__marquee{position:absolute;inset:0;display:grid;align-content:center;gap:0;opacity:var(--mq-o,0);color:var(--on-dark);
  font:400 clamp(80px,13vw,210px)/.86 var(--font-display);text-transform:uppercase;white-space:nowrap;pointer-events:none}
.mq{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq--b{animation-direction:reverse;color:transparent;-webkit-text-stroke:1px var(--on-dark-muted)}
.mq span{padding-right:.3em}
@keyframes mq{to{transform:translateX(-50%)}}
.sign__box{--h:min(66vh,100vw);position:relative;height:var(--h);aspect-ratio:4/5;transform:scale(var(--box-s,1));will-change:transform}
.sign__box img{width:100%;height:100%;object-fit:cover;filter:saturate(var(--box-sat,1))}
.sign__firma{position:absolute;left:50%;top:54%;width:min(88vw,1180px);height:auto;transform:translate(-50%,-50%) rotate(-4deg);overflow:visible;
  fill:none;stroke:var(--accent-on-dark);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* ---------- S03 Manifesto ---------- */
.manifesto{background:var(--dark);color:var(--on-dark);padding:22vh 28px 26vh;display:grid;justify-items:center;gap:48px;text-align:center}
.manifesto__title{font:400 clamp(64px,10vw,168px)/.86 var(--font-display);text-transform:uppercase;max-width:12ch}
.manifesto__title em,.archive__title em{color:var(--accent-on-dark)}
.manifesto__body{max-width:42ch;color:var(--on-dark-muted);font-size:17px}
.reveal{transform:translateY(40px);transition:transform var(--t-slow) var(--t-ease)}
.reveal.in{transform:none}

/* ---------- S04 Film: card sfalsate, il fondo si riaccende dal buio al crema ---------- */
.films{position:relative;background:var(--dark);color:var(--on-dark);padding:18vh 28px 22vh;transition:background-color 1.1s var(--t-ease),color 1.1s var(--t-ease)}
.films.lit{background:var(--bg);color:var(--text)}
.films__list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.films__head{font:400 clamp(34px,3.4vw,52px)/.9 var(--font-display);text-transform:uppercase;margin-bottom:28px}
.films__head small{font:500 12px/1 var(--font-mono);letter-spacing:.08em;vertical-align:middle;opacity:.7}
.films__head--v{margin-top:16vh}
.films__list--v{grid-template-columns:repeat(5,1fr)}
.films__list--v .film__media{aspect-ratio:9/16}
.films__list--v .film__title{font-size:clamp(28px,2.6vw,40px)}
.film{position:relative}
.film__media{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#1d1a16;cursor:pointer}
.film__media img,.film__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity var(--t-base) ease,transform 1.2s var(--t-ease)}
.film__media video{opacity:0}
.film__media.playing video{opacity:1}
.film__media{transition:transform .5s var(--t-ease),box-shadow .5s var(--t-ease)}
.film__media:hover,.film__media:focus-visible{transform:scale(1.04);z-index:2;box-shadow:0 18px 40px rgba(15,14,12,.28)}   /* la miniatura si ingrandisce un poco */
.frame{transition:transform .5s var(--t-ease)}
.frame:hover,.frame:focus-visible{transform:scale(1.05);z-index:2}
.film__cap{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:16px}
.film__title{font:400 clamp(36px,4.2vw,64px)/.9 var(--font-display);text-transform:uppercase}
.film__type{font:500 12px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.film__meta{flex-basis:100%;font:400 12px/1.4 var(--font-mono);opacity:.75}
.film__desc{max-width:48ch;margin-top:10px;font-size:15px;opacity:.85}

/* ---------- S05 Reel nella testa di capra (momento firma) ---------- */
.reel{position:relative;height:340vh;background:var(--bg)}
.reel__pin{position:sticky;top:0;height:100dvh;overflow:hidden}
.reel__head{position:absolute;z-index:2;left:0;right:0;top:15vh;text-align:center;opacity:var(--head-o,1);transform:translateY(var(--head-y,0))}
.reel__title{font:400 clamp(56px,7vw,112px)/.88 var(--font-display);text-transform:uppercase}
.reel__sub{margin-top:12px;font:400 13px/1.4 var(--font-mono);color:var(--text-muted)}
.reel__mask{position:absolute;inset:0;background:var(--dark);
  -webkit-mask-image:url(../assets/img/goat-head-shape.svg);mask-image:url(../assets/img/goat-head-shape.svg);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:var(--mw,200px) var(--mh,280px);mask-size:var(--mw,200px) var(--mh,280px);
  -webkit-mask-position:var(--mx,50%) var(--my,60%);mask-position:var(--mx,50%) var(--my,60%)}
.reel__mask.open{-webkit-mask-image:none;mask-image:none}
.reel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.doodles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#F6F0E4;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.doodles path{transition:stroke-dashoffset .6s ease-out,opacity .3s}

/* ---------- S06 Archivio: una riga per film, titolo a sinistra e i suoi fotogrammi in fila ---------- */
.archive{background:var(--dark);color:var(--on-dark);padding:20vh 28px 10vh}
.archive__title{font:400 clamp(56px,8vw,128px)/.86 var(--font-display);text-transform:uppercase;margin-bottom:10vh}
.arow{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:28px 0;border-top:1px solid rgba(239,230,212,.16)}
.arow:last-child{border-bottom:1px solid rgba(239,230,212,.16)}
.arow__name{font:400 34px/.92 var(--font-display);text-transform:uppercase}
.arow__meta{display:block;margin-top:10px;font:400 11px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted)}
.arow__frames{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}   /* il bordo sfumato dice: continua */
.arow__frames::-webkit-scrollbar{display:none}
.arow__frames.dragging{cursor:grabbing;scroll-snap-type:none}
.arow__frames .frame{flex:0 0 300px;scroll-snap-align:start}
.arow--v .arow__frames .frame{flex-basis:170px}
.arow--v .frame img{aspect-ratio:9/16}
.arow__nav{display:flex;gap:8px;margin-top:18px}
.arow__nav button{width:40px;height:40px;border:1px solid rgba(239,230,212,.3);color:var(--on-dark);font:300 22px/1 var(--font-sans);transition:background .2s,border-color .2s}
.arow__nav button:hover{background:rgba(239,230,212,.1);border-color:var(--on-dark)}
.frame{position:relative;display:block;padding:0;overflow:hidden;background:#1d1a16;cursor:zoom-in}
.frame img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .9s var(--t-ease),filter .4s}
.frame:hover img{filter:brightness(1.08)}
.frame__tc{position:absolute;left:8px;bottom:6px;font:400 10px/1 var(--font-mono);letter-spacing:.06em;color:var(--on-dark);opacity:0;transition:opacity .3s}
.frame:hover .frame__tc,.frame:focus-visible .frame__tc{opacity:.9}
.archive__more{display:block;width:max-content;margin:8vh auto 0;font:500 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-dark);text-underline-offset:6px}

/* fotogramma a schermo intero */
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(15,14,12,.97);display:grid;place-items:center;padding:6vh 6vw;touch-action:pan-y}
.lightbox__img{max-width:100%;max-height:82vh;width:auto;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox__cap{position:absolute;left:0;right:0;bottom:3vh;text-align:center;font:400 12px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-muted)}
.lightbox__nav,.lightbox__close{position:absolute;color:var(--on-dark);font:300 44px/1 var(--font-sans);padding:12px 16px;opacity:.75;transition:opacity .2s}
.lightbox__nav:hover,.lightbox__close:hover{opacity:1}
.lightbox__prev{left:1vw;top:50%;transform:translateY(-50%)}
.lightbox__next{right:1vw;top:50%;transform:translateY(-50%)}
.lightbox__close{top:12px;right:16px;font-size:38px}

/* ---------- S07 Footer: carta strappata ---------- */
.foot{position:relative;background:var(--bg);color:var(--text);padding:12vh 28px 0;margin-top:-1px}
.foot__tear{position:absolute;left:0;right:0;top:-38px;width:100%;height:40px;fill:var(--bg)}
.foot__cols{display:grid;grid-template-columns:1.2fr auto 1fr;gap:32px;align-items:center}
.foot__lead{font:400 clamp(40px,4.4vw,72px)/.9 var(--font-display);text-transform:uppercase}
.foot__cta{display:inline-flex;align-items:center;gap:10px;font:400 clamp(40px,4.4vw,72px)/.9 var(--font-display);text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:3px solid currentColor;padding-bottom:4px}
.foot__cta svg{width:.6em;height:.6em;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform var(--t-base) var(--t-ease)}
.foot__cta:hover svg{transform:translate(4px,-4px)}
.foot__cta:active{transform:translateY(1px)}
.foot__links{list-style:none;justify-self:end;text-align:right;font:400 13px/1.9 var(--font-mono)}
.foot__links a{text-decoration:none}
.foot__links a:hover{text-decoration:underline}
.foot__name{margin-top:10vh;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.foot__name span{font:400 18vw/.8 var(--font-display);text-transform:uppercase;white-space:nowrap;padding-top:2vw}
.foot__name img{height:19vw;width:auto;max-width:none;margin:0 -2.5vw -1vw;flex:none}

/* ---------- Player ---------- */
.player{position:fixed;inset:0;z-index:60;background:rgba(15,14,12,.96);display:grid;place-items:center;padding:4vw}
.player__video{width:min(100%,160vh);max-height:90vh;background:#000}
.player__yt{width:min(100%,160vh);aspect-ratio:16/9;max-height:90vh;background:#000}
.player__yt iframe{width:100%;height:100%;border:0;display:block}
.player__yt--v{width:auto;height:88vh;aspect-ratio:9/16;max-width:100%}
.player__video.player__video--v{width:auto;height:88vh;max-width:100%}
.player__close{position:absolute;top:18px;right:24px;font-size:36px;color:var(--on-dark);line-height:1}
body.lock{overflow:hidden}

/* ---------- Mobile (sotto i 900px: la versione mobile della recon, non la desktop ridotta) ---------- */
@media (max-width:900px){
  /* telefono: una cosa alla volta, in colonna (8/10: «troppo caotica in uno spazio ristretto») */
  .bar{padding:0 16px;height:56px;grid-template-columns:1fr auto}
  .bar__links{display:none}
  .bar__logo{font-size:22px}

  /* apertura: solo la scritta e la capra; la frase e il bottone sotto, in fila */
  .hero__pin{min-height:0;display:flex;flex-direction:column;padding:76px 16px 40px}
  .hero__brand{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}   /* il nome c'è già nella barra */
  .hero__shards{position:relative;top:auto;transform:none;font-size:27vw;line-height:.8;white-space:normal;text-align:center}
  .hero__goat{position:relative;left:auto;bottom:auto;transform:none;width:108vw;height:auto;max-width:none;margin:-40vw 0 0 -10vw}
  .hero__sub{position:relative;right:auto;top:auto;text-align:left;max-width:30ch;margin-top:8px;font-size:16px}
  .hero__cta{position:relative;left:auto;bottom:auto;align-self:flex-start;margin-top:22px}

  /* firma: solo ritratto e firma, niente testo che scorre dietro */
  .sign{height:220vh}
  .sign__marquee{display:none}
  .sign__box{--h:min(60vh,105vw)}
  .sign__firma{width:96vw;stroke-width:15}

  .manifesto{padding:14vh 16px 16vh;gap:32px}
  .manifesto__body{font-size:16px}

  /* film: titolo e tipo, il racconto si legge guardandolo */
  .films{padding:12vh 16px 14vh}
  .films__list{grid-template-columns:1fr;gap:44px}
  .films__list--v{grid-template-columns:1fr 1fr;gap:28px 12px}
  .films__list--v .film__title{font-size:24px}
  .films__head--v{margin-top:10vh}
  .film__desc{display:none}
  .film__cap{margin-top:12px}
  .film__title{font-size:34px}

  .reel{height:240vh}
  .reel__video{object-fit:contain}   /* il video intero: tagliato a schermo verticale non si capiva cosa fosse */

  /* archivio: titolo del film sopra, i suoi fotogrammi da scorrere col dito */
  .archive{padding:14vh 0 12vh}
  .archive__title{padding:0 16px;margin-bottom:6vh}
  .arow{grid-template-columns:1fr;gap:14px;padding:22px 0}
  .arow__head{padding:0 16px}
  .arow__name{font-size:28px}
  .arow__frames{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;scrollbar-width:none}
  .arow__frames::-webkit-scrollbar{display:none}
  .arow__frames .frame{flex:0 0 72vw;scroll-snap-align:center}
  .arow--v .arow__frames .frame{flex-basis:40vw}
  .arow__nav{display:none}
  .arow__frames{-webkit-mask-image:none;mask-image:none}
  .frame__tc{opacity:.9}
  .lightbox{padding:0}
  .lightbox__img{max-height:70vh}
  .lightbox__nav{display:none}
  .archive__more{margin-top:6vh}

  .foot{padding:10vh 16px 0}
  .foot__cols{grid-template-columns:1fr;justify-items:start;gap:24px}
  .foot__links{justify-self:start;text-align:left}
  .foot__name{margin-top:8vh;padding-bottom:9vh}   /* sul telefono non attaccato al bordo: sembrava un errore */
  .foot__name img{margin-bottom:0}
}

/* ---------- Movimento ridotto: tutto fermo nello stato finale ---------- */
@media (prefers-reduced-motion:reduce){
  .mq{animation:none}
  .reveal{transform:none;transition:none}
  .hero,.sign,.reel{height:auto}
  .hero__pin,.sign__pin,.reel__pin{position:relative;height:100dvh}
}