/* ============================================================
   TAVOLO — portfolio da toccare
   ============================================================ */
.tv{ --viola:var(--accent); --lilla:var(--accent); --crema:#F4EDE1; position:relative; background:var(--crema); color:var(--ink);
  padding:clamp(70px,11vh,130px) var(--pad) clamp(70px,11vh,130px); overflow:hidden; }
.tv__head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:20px 40px; margin-bottom:clamp(26px,4vh,48px); }
.tv__eyebrow{ display:flex; align-items:center; gap:12px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; }
.tv__eyebrow i{ width:9px; height:9px; border-radius:50%; background:var(--corallo); display:block; }
.tv__title{ font-family:var(--ff-display); font-weight:800; font-variation-settings:"wght" 820; letter-spacing:-.035em; line-height:.9;
  font-size:clamp(44px,7.4vw,124px); text-wrap:balance; }
.tv__title em{ font-style:normal; color:var(--viola); }
.tv__hint{ margin-top:16px; font-size:clamp(15px,1.25vw,19px); color:var(--ink-soft); max-width:44ch; }
.tv__toggle{ display:inline-flex; align-items:center; gap:12px; border:0; border-radius:50px; padding:16px 26px; min-height:48px;
  background:var(--lilla); color:#fff; font:500 15px/1 var(--ff-sans); cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease); }
.tv__toggle:hover{ background:var(--ink); color:var(--crema); }
.tv__toggle:focus-visible,.tv__card:focus-visible,.tv__dlg-x:focus-visible{ outline:3px solid var(--corallo); outline-offset:4px; }
.tv__toggle svg{ width:18px; height:18px; transition:transform .5s var(--ease); }
.tv.is-grid .tv__toggle svg{ transform:rotate(180deg); }

.tv__stage{ position:relative; width:100%; touch-action:pan-y; transition:height .8s var(--ease); }
.tv__card{ position:absolute; left:0; top:0; padding:0; border:0; background:none; cursor:grab; text-align:left;
  touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; will-change:transform; }
.tv__card:active{ cursor:grabbing; }
.tv__stage.is-animating .tv__card{ transition:transform .9s cubic-bezier(.65,0,.2,1), width .9s cubic-bezier(.65,0,.2,1); }
.tv__lift{ display:block; background:#FFFDF8; padding:8px 8px 0; border-radius:3px;
  box-shadow:0 1px 2px rgba(22,17,9,.12), 0 8px 22px -10px rgba(22,17,9,.35);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
@media (hover:hover){ .tv__card:hover .tv__lift{ transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-8px) scale(1.04); box-shadow:0 2px 4px rgba(22,17,9,.12), 0 26px 44px -16px rgba(22,17,9,.48); } }
.tv__card.is-lifted .tv__lift{ transform:scale(1.045); box-shadow:0 2px 4px rgba(22,17,9,.1), 0 34px 60px -18px rgba(22,17,9,.5); }
.tv__media{ position:relative; display:block; width:100%; overflow:hidden; background:var(--sabbia); }
.tv__media img,.tv__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.tv__play{ position:absolute; right:10px; bottom:10px; width:28px; height:28px; border-radius:50%; background:var(--corallo); transition:opacity .3s; }
.tv__play::after{ content:""; position:absolute; left:11px; top:8px; border-left:9px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.tv__card.is-playing .tv__play{ opacity:0; }
.tv__cap{ display:flex; align-items:center; gap:10px; height:40px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); overflow:hidden; white-space:nowrap; }
.tv__cap b{ color:var(--corallo); font-weight:600; }
.tv__cap span{ overflow:hidden; text-overflow:ellipsis; }

/* anteprima */
.tv-lock{ overflow:hidden; }
.tv__dlg{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:clamp(14px,4vw,48px);
  background:rgba(22,18,11,.82); opacity:0; transition:opacity .3s var(--ease); cursor:auto; }
.tv__dlg.is-open{ opacity:1; }
.tv__dlg[hidden]{ display:none; }
.tv__dlg-box{ position:relative; width:fit-content; max-width:min(1200px,100%); max-height:calc(100dvh - 40px); display:grid; grid-template-columns:auto minmax(280px,400px);
  background:var(--crema); border-radius:6px; overflow:hidden; transform:translateY(16px) scale(.98); transition:transform .4s var(--ease); }
.tv__dlg.is-open .tv__dlg-box{ transform:none; }
.tv__dlg-media{ display:block; min-height:0; min-width:0; line-height:0; }
.tv__dlg-media img,.tv__dlg-media video{ display:block; width:auto; height:auto; max-width:min(780px,calc(100vw - 400px - 8vw)); max-height:calc(100dvh - 40px - 8vw); }
.tv__dlg-txt{ padding:clamp(24px,3.4vw,48px); display:flex; flex-direction:column; gap:16px; overflow:auto; }
.tv__dlg-tag{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--viola); }
.tv__dlg-title{ font-family:var(--ff-display); font-weight:800; font-variation-settings:"wght" 820; font-size:clamp(30px,3.6vw,56px); line-height:.95; letter-spacing:-.03em; }
.tv__dlg-desc{ font-size:16px; line-height:1; color:var(--ink-soft); max-width:42ch; }
.tv__dlg-x{ position:absolute; top:12px; right:12px; width:48px; height:48px; border-radius:50%; border:0; background:var(--ink); color:var(--crema); cursor:pointer; display:grid; place-items:center; z-index:2; }
.tv__dlg-x:hover{ background:var(--corallo); }
.tv__dlg-x svg{ width:18px; height:18px; }

@media (max-width:1100px){ .tv__head{ grid-template-columns:1fr; } .tv__toggle{ justify-self:start; width:auto; } }
@media (max-width:760px){
  .tv__cap{ height:34px; font-size:9.5px; letter-spacing:.1em; gap:7px; }
  .tv__lift{ padding:6px 6px 0; }
  .tv__dlg-box{ grid-template-columns:auto; grid-template-rows:auto auto; overflow:auto; }
  .tv__dlg-media{ justify-self:center; }
  .tv__dlg-media img,.tv__dlg-media video{ max-width:calc(100vw - 28px); max-height:58dvh; }
  .tv__dlg-txt{ max-width:calc(100vw - 28px); }
  .tv__dlg-txt{ padding:22px 20px 26px; gap:10px; }
  .tv__toggle{ justify-self:start; }
}
@media (prefers-reduced-motion: reduce){
  .tv__stage,.tv__lift,.tv__dlg,.tv__dlg-box,.tv__toggle svg{ transition:none !important; }
}
/* titoli in stile "Sì, puoi toccare tutto." */
.history__title,.morph__name{ text-transform:none !important; font-family:var(--ff-display); font-weight:800 !important; font-variation-settings:"wght" 820 !important; letter-spacing:-.035em !important; line-height:.9 !important; }
/* loghi galleria: file già bianchi (iOS Safari non applica bene brightness+invert) */
.gallery__logo{ filter:drop-shadow(0 1px 6px rgba(0,0,0,.35)) !important; }
/* forma contatti: stella arancione */
.shape--star{ width:96px; height:96px; background:var(--accent);
  clip-path:polygon(50% 0,59% 31%,85% 15%,69% 41%,100% 50%,69% 59%,85% 85%,59% 69%,50% 100%,41% 69%,15% 85%,31% 59%,0 50%,31% 41%,15% 15%,41% 31%); }
.nw{ white-space:nowrap; }
@media (max-width:1100px){
  .shape--ring{ display:none !important; }
  .shape--star{ width:56px; height:56px; }
  .footer__sep{ display:none; }
  .footer__meta .nw{ display:block; }
}
/* pallina che salta, appoggiata sulla linea del messaggio */
.ct__msg{ position:relative; }
.ct__msg textarea{ display:block; }
.ct__ball{ position:absolute; left:2px; bottom:1.5px; margin-bottom:0; width:clamp(20px,1.8vw,28px); aspect-ratio:1; pointer-events:none; }
.ct__ball-b{ position:absolute; inset:0; transform-origin:50% 100%; --amp:100%; animation:ballBounce calc(1.5s / var(--energy,1)) linear infinite; }
.ct__ball-b .hero__ball-hi{ border-color:var(--paper); opacity:.18; }
.ct__ball-sh{ position:absolute; bottom:-3px; left:50%; width:80%; aspect-ratio:5/1; border-radius:50%; background:#000; opacity:.3; transform:translateX(-50%); animation:ballShadow calc(1.5s / var(--energy,1)) linear infinite; }
@media (prefers-reduced-motion: reduce){ .ct__ball-b,.ct__ball-sh{ animation:none; } }
/* tablet: Diana nella parte destra in entrambe le foto */
@media (min-width:761px) and (max-width:1100px){
  .morph__layer{ overflow:hidden; }
  .morph__layer image-slot{ position:absolute; top:0; height:100%; width:max(100vw, 100svh * 1916 / 821); max-width:none;
    left:min(0px, calc(75vw - max(100vw, 100svh * 1916 / 821) * .72)); }
}
.tv__empty{ position:absolute; inset:0; display:grid; place-items:center; border:2px dashed rgba(22,17,9,.25); color:var(--ink-soft); font:500 13px/1 var(--ff-sans); text-align:center; padding:10px; }