/* ==========================================================================
   Duo Motion, pagine lavori: archivio e pagina progetto
   ========================================================================== */

/* ================= ARCHIVIO ================= */
.archive-head{padding-block:calc(var(--nav-h) + clamp(70px,12vh,140px)) clamp(40px,6vh,70px)}
.archive-head .title{margin:24px 0 26px;font-size:clamp(56px,10vw,160px)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.filter{position:relative;min-height:44px;padding:0 20px;border-radius:99px;border:1px solid var(--line-strong);font:600 12px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);transition:color .3s,border-color .3s,background-color .3s}
.filter:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.filter[aria-pressed="true"]{color:#fff;border-color:transparent;background:var(--grad)}
.filter .cnt{margin-left:8px;opacity:.6}
.grid-work{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.2vw,32px);padding-bottom:clamp(90px,14vh,160px)}
.gcard{grid-column:span 6;display:block;color:#fff;transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
.gcard:nth-child(4n+1),.gcard:nth-child(4n+4){grid-column:span 7}
.gcard:nth-child(4n+2),.gcard:nth-child(4n+3){grid-column:span 5}
.gcard:nth-child(4n+2),.gcard:nth-child(4n+3){margin-top:clamp(40px,8vh,110px)}
.gcard.hidden{display:none}
.gcard.fade{opacity:0;transform:translateY(24px) scale(.98)}
.g-media{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#0F1220}
.g-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.gcard:hover .g-media img{transform:scale(1.1)}}
.g-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,6,11,.65),transparent 45%);opacity:.6;transition:opacity .5s}
.gcard:hover .g-media::after{opacity:1}
.g-badge{position:absolute;left:20px;top:20px;z-index:2;padding:7px 11px;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:rgba(10,12,20,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 11px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase}
.g-view{position:absolute;right:20px;bottom:20px;z-index:2;width:58px;height:58px;border-radius:50%;background:#fff;color:#07080D;display:flex;align-items:center;justify-content:center;font-size:20px;transform:scale(0) rotate(-45deg);transition:transform .6s var(--ease-back)}
@media (hover:hover) and (pointer:fine){.gcard:hover .g-view{transform:scale(1) rotate(-45deg)}}
.g-info{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:20px}
.g-title{font:800 clamp(26px,2.6vw,40px)/1 var(--f-display);letter-spacing:-.02em}
.g-title .thin{font-weight:300;color:var(--text-secondary);margin-left:2px;font-size:.6em}
.g-meta{font:600 11px/1.6 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);text-align:right}
@media (max-width:820px){.gcard,.gcard:nth-child(n){grid-column:1/-1;margin-top:0}.g-info{flex-direction:column}.g-meta{text-align:left}}

/* ================= PAGINA PROGETTO ================= */
.p-hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#05060B}
.p-hero .p-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--hs,0) * .12)) translateY(calc(var(--hs,0) * 6%));will-change:transform}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,8,13,1) 0%,rgba(7,8,13,.3) 42%,rgba(7,8,13,.12) 70%,rgba(7,8,13,.7) 100%)}
.p-hero-in{position:absolute;left:0;right:0;bottom:clamp(40px,9vh,90px);z-index:2}
.p-kick{display:flex;gap:14px;align-items:center;font:600 12px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:#D9DCE6;flex-wrap:wrap}
.p-kick .g-badge{position:static}
.p-title{margin-top:20px;font:800 clamp(64px,13vw,210px)/.86 var(--f-display);letter-spacing:-.045em;text-shadow:0 10px 50px rgba(0,0,0,.5)}
.p-sub{display:block;margin-top:14px;font:300 clamp(22px,3vw,44px)/1.1 var(--f-display);letter-spacing:-.01em;color:#E3E6F0}
.p-frase{margin-top:22px;max-width:44ch;font-size:clamp(17px,1.4vw,21px);color:#E3E6F0}
.p-meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.p-meta > div{padding:28px clamp(16px,2vw,28px);border-left:1px solid var(--line)}
.p-meta > div:first-child{border-left:0}
.p-meta dt{font:600 11px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.p-meta dd{margin:12px 0 0;font:600 16px/1.4 var(--f-body)}
@media (max-width:820px){.p-meta{grid-template-columns:1fr 1fr}.p-meta > div:nth-child(3){border-left:0}.p-meta > div:nth-child(n+3){border-top:1px solid var(--line)}}

.p-story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px)}
.p-story h2{font:800 clamp(30px,3.6vw,54px)/1 var(--f-display);letter-spacing:-.02em;margin:22px 0 22px}
.p-story p{color:var(--text-secondary);font-size:clamp(17px,1.3vw,20px);max-width:46ch}
@media (max-width:820px){.p-story{grid-template-columns:1fr}}

.p-screens{position:relative;display:grid;grid-template-columns:1fr 280px;gap:clamp(24px,3vw,48px);align-items:end}
.p-screens .browser{border-radius:16px;overflow:hidden;border:1px solid var(--line-strong);background:#0C0E16;box-shadow:0 60px 120px -40px rgba(0,0,0,.8)}
.p-screens .b-bar{height:36px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#11131D;border-bottom:1px solid var(--line)}
.p-screens .b-bar i{width:10px;height:10px;border-radius:50%}
.p-screens .b-bar i:nth-child(1){background:#FF5F57}.p-screens .b-bar i:nth-child(2){background:#FEBC2E}.p-screens .b-bar i:nth-child(3){background:#28C840}
.p-screens .b-url{margin-left:14px;flex:1;max-width:320px;height:22px;border-radius:6px;background:#1A1D2A;font:600 11px/22px var(--f-label);color:var(--text-secondary);padding:0 12px}
.scroll-view{position:relative;height:clamp(320px,52vh,600px);overflow:hidden;cursor:ns-resize}
.scroll-view img{width:100%;height:auto;transform:translateY(calc(var(--sv,0) * -1px));transition:transform .2s linear}
.phone-mock{border-radius:34px;padding:10px;background:#1A1C26;border:1px solid rgba(255,255,255,.18);box-shadow:0 50px 100px -30px rgba(0,0,0,.85)}
.phone-mock .scroll-view{height:auto;aspect-ratio:9/19.2;border-radius:25px}
.screens-note{margin-top:18px;font:600 11px/1.5 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
@media (max-width:820px){.p-screens{grid-template-columns:1fr}.phone-mock{max-width:300px;margin:0 auto}}

.p-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,28px)}
.p-gallery figure{margin:0;position:relative;overflow:hidden;border-radius:18px;background:#0F1220;clip-path:inset(12% 0 0 0 round 18px);transition:clip-path 1.4s var(--ease-io)}
.p-gallery figure.in{clip-path:inset(0 0 0 0 round 18px)}
.p-gallery figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.6s var(--ease-out)}
.p-gallery figure.in img{transform:scale(1)}
.p-gallery figure:nth-child(3n+1){grid-column:span 7;aspect-ratio:4/5}
.p-gallery figure:nth-child(3n+2){grid-column:span 5;aspect-ratio:4/5;margin-top:clamp(60px,12vh,160px)}
.p-gallery figure:nth-child(3n+3){grid-column:3/span 8;aspect-ratio:4/5}
@media (max-width:820px){.p-gallery figure:nth-child(n){grid-column:1/-1;margin-top:0}}

.p-results{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.p-results li{padding:32px clamp(16px,2vw,28px) 36px;border-left:1px solid var(--line);font:600 clamp(18px,1.6vw,23px)/1.3 var(--f-body)}
.p-results li:first-child{border-left:0}
.p-results li .n{display:block;margin-bottom:16px;font:600 11px/1 var(--f-label);letter-spacing:.16em;color:var(--text-dim)}
@media (max-width:820px){.p-results{grid-template-columns:1fr}.p-results li{border-left:0;border-bottom:1px solid var(--line)}}

.p-identity{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,80px);align-items:start}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.swatch{position:relative;aspect-ratio:3/4;border-radius:16px;border:1px solid rgba(255,255,255,.12);display:flex;align-items:flex-end;padding:14px;overflow:hidden;transition:transform .6s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.swatch:hover{transform:translateY(-6px)}}
.swatch span{font:600 12px/1 var(--f-label);letter-spacing:.08em;padding:8px 10px;border-radius:99px;background:rgba(7,8,13,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.swatch .copied{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;background:rgba(7,8,13,.7);color:#fff;opacity:0;transition:opacity .3s}
.swatch.ok .copied{opacity:1}
.fonts{display:grid;gap:18px}
.font-card{padding:24px;border-radius:16px;border:1px solid var(--line);background:rgba(16,18,27,.7)}
.font-card .spec{font-size:clamp(46px,5vw,72px);line-height:1;color:#fff}
.font-card .fname{margin-top:12px;font:600 11px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
@media (max-width:820px){.p-identity{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(2,1fr)}}

.p-live{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:clamp(30px,4vw,54px);border-radius:24px;border:1px solid var(--line-strong);background:radial-gradient(ellipse at 20% 0%,rgba(59,130,246,.16),transparent 60%),radial-gradient(ellipse at 90% 100%,rgba(139,92,246,.16),transparent 60%),rgba(14,16,25,.7)}
.p-live h2{font:800 clamp(28px,3.4vw,50px)/1.02 var(--f-display);letter-spacing:-.02em;max-width:18ch}
.p-live p{margin-top:12px;color:var(--text-secondary);max-width:46ch}

.next{position:relative;display:block;padding:clamp(90px,14vh,170px) 0;border-top:1px solid var(--line);overflow:hidden;color:#fff;isolation:isolate}
.next-bg{position:absolute;inset:0;z-index:-1;background:center/cover;opacity:0;transform:scale(1.1);transition:opacity .8s var(--ease-out),transform 1.6s var(--ease-out)}
.next-bg::after{content:"";position:absolute;inset:0;background:rgba(7,8,13,.62)}
@media (hover:hover) and (pointer:fine){.next:hover .next-bg{opacity:1;transform:scale(1)}}
.next-kick{font:600 12px/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary)}
.next-title{margin-top:20px;font:800 clamp(56px,10vw,170px)/.9 var(--f-display);letter-spacing:-.04em;display:flex;align-items:center;gap:.25em}
.next-title .arrow{font-weight:300;transition:transform .8s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.next:hover .next-title .arrow{transform:translateX(.2em) rotate(-45deg)}}

.not-found{padding:calc(var(--nav-h) + 140px) 0 140px;text-align:center}
.not-found .title{margin-bottom:30px}
.sn-touch{display:none}
@media (hover:none){.sn-mouse{display:none}.sn-touch{display:inline}} /* telefono e tablet: niente "passa sopra" */
@media (max-height:560px) and (orientation:landscape){.p-hero{min-height:0}}
.p-kick > span:first-child{text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.75)}
@media (min-width:821px){.gcard:last-child:nth-child(4n+1){grid-column:3 / span 8}}