:root{--sporge:128px}

.scena{position:relative}
.cinema{
  position:relative;width:100%;background:var(--nero);
  height:100svh;display:flex;align-items:center;justify-content:center;
}
.cinema__quadro{position:absolute;inset:0;overflow:hidden}
.cinema__fermo,
.cinema__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 55%;
}
.cinema__quadro picture{position:absolute;inset:0;display:block;border-radius:0}
.cinema__video{background:transparent}
.cinema__velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.15) 0%,rgba(10,9,8,.21) 34%,rgba(10,9,8,.54) 60%,rgba(10,9,8,.70) 80%,rgba(10,9,8,.74) 100%);
}
.cinema__blocco{
  position:absolute;left:0;right:0;top:50%;translate:0 -50%;
  display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:0 var(--bordo-dx) 0 var(--bordo-sx);text-align:center;
}
.cinema__logo{width:300px;max-width:42vw}
.cinema__riga{font-weight:100;font-size:18px;line-height:1.5;letter-spacing:.005em;max-width:520px}
.cinema__ai{position:absolute;right:var(--bordo-dx);bottom:26px;opacity:.86;font-size:12px}

@media (prefers-reduced-motion:reduce){
  .cinema__video{display:none}
}

.foglio__ai,
.foglio__presa{display:none}
.foglio__riga{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:0;
  font-weight:100;font-size:16px;line-height:1.5;
}

.foglio__wm{padding:36px var(--bordo-dx) 0 var(--bordo-sx);font-size:14px}
.foglio__wm{display:flex;justify-content:space-between;align-items:center}

.frase{padding:0 var(--bordo-dx) 0 var(--bordo-sx);margin:84px 0 0}

.frammento{
  display:grid;
  grid-template-columns:52px 1fr 176px;
  column-gap:56px;
  align-items:center;
  border-top:1px solid var(--hair);
  padding:56px 0 58px;
}
.frammento:last-of-type{border-bottom:1px solid var(--hair)}
.frammento--parola{padding:44px 0 46px}
.frammento .num{align-self:center;opacity:var(--o-riposo)}

.dice{font-size:50px;line-height:1.05;letter-spacing:-.015em}
.verbo{font-weight:800;text-transform:uppercase;letter-spacing:-.03em;font-size:.92em}
.dice em{font-size:1.08em;letter-spacing:-.01em;margin-left:.08em}

.porta{display:grid;grid-template-columns:1fr;justify-items:end;row-gap:10px}
.still{display:block;object-fit:cover;width:124px;height:155px;object-position:50% 58%}
.still--nero{background:var(--nero);display:flex;align-items:flex-end;padding:13px}
.still--nero span{display:block;width:44px;height:2px;background:var(--rosso);border-radius:1px}
.marchio{font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.62}

.porta__segno{display:flex;align-items:center;justify-content:flex-end;height:60px}
.marchio-logo{width:auto}
.marchio-logo--ky{height:30px}    
.marchio-logo--obj{height:30px}   
.marchio-logo--km{height:60px}    
.marchio-logo--km.wm2{height:auto;font-size:26px;line-height:1}

.piede .dove{font-weight:400;font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;opacity:var(--o-riposo)}
.piede .firma{font-size:var(--t-micro)}
a.gesto{position:relative}
a.gesto::before{
  content:"";position:absolute;left:-10px;right:-10px;
  top:calc((var(--tocco-min) - 100%) / -2);bottom:calc((var(--tocco-min) - 100%) / -2);
  min-height:var(--tocco-min);
}

.frammento{position:relative}
.frammento::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--ink);
  transform:scaleX(0);transform-origin:left center;
}
.still{transform-origin:50% 50%}
.marchio{position:relative}
.marchio::after{
  content:attr(data-coda) " ·";
  position:absolute;right:100%;top:0;margin-right:.55em;
  white-space:nowrap;
  font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  opacity:0;translate:8px 0;
  pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .still{transition:scale var(--d-apre) var(--c-posa)}
  .frammento::before{transition:transform var(--d-posa) var(--c-posa)}
  .marchio::after{transition:opacity var(--d-posa) var(--c-posa),translate var(--d-posa) var(--c-posa)}
}
.frammento:focus-visible .still{scale:1.025}
.frammento:focus-visible::before{transform:scaleX(1)}
.frammento:focus-visible .marchio::after{opacity:1;translate:0 0}
.frammento:focus-visible .dice{opacity:.6}
@media (hover:hover) and (pointer:fine){
  .frammento:hover .dice{opacity:.6}
  .frammento:hover .still{scale:1.025}
  .frammento:hover::before{transform:scaleX(1)}
  .frammento:hover .marchio::after{opacity:1;translate:0 0}
}
.frammento:active .still,
.frammento.e-premuto .still{scale:var(--premuto-scala);transition-duration:var(--d-tocco)}
@media (prefers-reduced-motion:reduce){
  .frammento:active .still,.frammento.e-premuto .still,
  .frammento:hover .still,.frammento:focus-visible .still{scale:1}
}

@media (max-width:768px){
  body{background:var(--bianco)}

  .cinema{
    position:sticky;top:0;z-index:1;
    height:100svh;overflow:hidden;padding-bottom:0;border-radius:0;
  }
  .cinema__quadro{position:absolute;inset:0;aspect-ratio:auto;height:100%;border-radius:0}
  .cinema__fermo{object-position:50% 50%}
  .cinema__video{display:none}
  .cinema__velo{
    background:linear-gradient(180deg,
      rgba(10,9,8,.62) 0%,rgba(10,9,8,.50) 14%,rgba(10,9,8,.22) 30%,rgba(10,9,8,0) 40%,
      rgba(10,9,8,.04) 43%,rgba(10,9,8,.24) 56%,
      rgba(10,9,8,.54) 66%,rgba(10,9,8,.66) 78%,rgba(10,9,8,.67) 100%);
  }
  .cinema__blocco{
    position:absolute;left:0;right:0;top:calc(13svh + env(safe-area-inset-top));bottom:auto;transform:none;translate:none;
    align-items:center;text-align:center;gap:0;
    padding:0 max(22px,env(safe-area-inset-right)) 0 max(22px,env(safe-area-inset-left));
  }
  .cinema__logo{width:62vw;max-width:none;filter:drop-shadow(0 2px 14px rgba(10,9,8,.55)) drop-shadow(0 0 2px rgba(10,9,8,.35))}
  .cinema__riga{display:none}
  .cinema__ai{display:none}

  .foglio{
    position:relative;z-index:2;
    display:flow-root;            
    margin-top:calc(-1 * var(--sporge));
    background:var(--bianco);
    border-radius:var(--raggio-foglio) var(--raggio-foglio) 0 0;
    min-height:100svh;
    padding-top:0;
    box-shadow:0 -12px 28px rgba(10,9,8,.16);
  }
  .foglio__presa{
    display:block;width:38px;height:4px;border-radius:2px;
    background:rgba(23,20,15,.20);margin:11px auto 0;
    position:relative;
  }
  .foglio__presa::before{
    content:"";position:absolute;left:-16px;right:-16px;top:-20px;bottom:-20px;
  }
  .foglio{scroll-margin-block-start:0}
  .foglio__wm{padding:14px var(--bordo-dx) 0 var(--bordo-sx);font-size:14px}
  .foglio__ai{
    display:block;opacity:var(--o-ai);font-size:var(--t-micro);letter-spacing:.01em;
    line-height:1.55;padding:10px var(--bordo-dx) 0 var(--bordo-sx);
  }
  .foglio__riga{
    position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;
    display:block;font-weight:100;font-size:16px;line-height:1.5;
    padding:22px var(--bordo-dx) 0 var(--bordo-sx);
  }

  .frase{margin-top:52px}
  .frammento{
    grid-template-columns:auto 1fr;
    column-gap:14px;row-gap:22px;
    align-items:start;padding:34px 0 38px;
  }
  .frammento .num{grid-column:1;grid-row:1;font-size:var(--t-micro);padding-top:6px}
  .frammento--parola{padding:30px 0 32px}
  .dice{grid-column:2;grid-row:1;font-size:29px;line-height:1.12}
  .porta{
    grid-column:2;grid-row:2;
    grid-template-columns:auto 1fr;justify-items:start;
    align-items:end;column-gap:16px;row-gap:5px;
  }
  .porta .still{grid-column:1;grid-row:1/3;width:92px;height:115px}
  .porta__segno{grid-column:2;grid-row:1;align-self:end;justify-content:flex-start;height:48px}
  .marchio{grid-column:2;grid-row:2;font-size:12px}
  .marchio-logo--ky,
  .marchio-logo--obj{height:24px}
  .marchio-logo--km{height:48px}
}