/* ═══ Giunès Studio — sito-gioco ═══════════════════════════════════════ Nero su (non su body: i livelli con z-index negativo sparirebbero). [hidden] forzato: una classe display batte la regola dello user agent. */ :root{ --nero:#050505; --bianco:#f2f0ec; --grigio:#8b8b8b; --oro:#c9a227; --oro-glow:rgba(201,162,39,.35); --oro-tenue:rgba(201,162,39,.08); --linea:rgba(242,240,236,.14); --sp:clamp(1.4rem,4vw,5rem); } /* ── Lenis: il foglio di stile della libreria, che mancava ───────────── Senza queste righe `lenis.stop()` non blocca niente e — soprattutto — `data-lenis-prevent` non contiene lo scorrimento dentro i pannelli. Sorgente: lenis@1.3.11/dist/lenis.css */ html.lenis,html.lenis body{height:auto} .lenis:not(.lenis-autoToggle).lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:clip} .lenis.lenis-smooth iframe{pointer-events:none} *{box-sizing:border-box;margin:0;padding:0} [hidden]{display:none!important} html{background:var(--nero);color:var(--bianco);-webkit-text-size-adjust:100%} body{ font-family:'Space Grotesk',system-ui,sans-serif;font-weight:300; font-size:clamp(.95rem,.9rem + .3vw,1.05rem);line-height:1.6; overflow-x:hidden; } img,video{display:block;max-width:100%} /* Regola di sicurezza: nessun media si prende il gesto del dito. Su telefono un `touch-action:none` (o una presa del puntatore presa subito) su un'immagine blocca lo scorrimento della pagina appena il dito parte da lì. `manipulation` lascia al browser scorrimento e pizzico in tutte e due le direzioni — serve anche alle file orizzontali (vetrina, porte). */ img,video,figure,picture{touch-action:manipulation} a{color:inherit;text-decoration:none} button,input{font:inherit;color:inherit;background:none;border:0} button{cursor:pointer} body::after{ /* grana di pellicola */ content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio)} .display{font-family:Anton,Impact,sans-serif;font-weight:400;line-height:.95;text-transform:uppercase;text-wrap:balance;letter-spacing:-.01em} h1.display{font-size:clamp(2.4rem,7vw,5.4rem)} h2.display{font-size:clamp(2rem,5.4vw,4.2rem)} /* .sotto e .etichetta — stile base (le transizioni d'ingresso sono in .atto.in-vista) */ .etichetta{margin-bottom:1.1rem} /* ── sipario ───────────────────────────────────────────────────────── */ #sipario{position:fixed;inset:0;z-index:100;background:var(--nero);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem} .sipario-logo{width:74px;opacity:.9} .sipario-conta{font-family:Anton,sans-serif;font-size:clamp(3rem,12vw,7rem);line-height:1} .sipario-riga{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--grigio)} .sipario-barra{width:min(320px,60vw);height:1px;background:var(--linea)} .sipario-barra i{display:block;height:100%;width:0;background:var(--bianco)} /* ── cursore ───────────────────────────────────────────────────────── */ #cursore,#cursore-anello{position:fixed;top:0;left:0;z-index:90;pointer-events:none;mix-blend-mode:difference} #cursore i{display:block;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)} #cursore-anello{width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;transition:width .25s,height .25s,margin .25s,background .25s} #cursore-anello.grande{width:88px;height:88px;margin:-44px 0 0 -44px;background:rgba(255,255,255,.08)} #cursore-eti{font-family:'JetBrains Mono',monospace;font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;color:#fff} #cursore-anello.grande #cursore-eti{opacity:1} @media (pointer:fine){body{cursor:none}} @media (pointer:coarse){#cursore,#cursore-anello{display:none}} /* ── palco: il fondale che cambia atto per atto ────────────────────── */ #palco{position:fixed;inset:0;z-index:-10;overflow:hidden;background:var(--nero)} #palco video,#palco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;filter:grayscale(.25)} /* carrello ottico: la proprietà `scale` si somma al transform della parallasse di GSAP e la anima il compositore, non lo script */ @media (prefers-reduced-motion:no-preference){#palco video,#palco img{animation:carrello 22s ease-in-out infinite alternate}} @keyframes carrello{to{scale:1.14}} #palco .palco-velo{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(5,5,5,.35),rgba(5,5,5,.92));transition:opacity .8s} /* ── Miglioria 1: gradiente animato oro che pulsa sotto il palco ──── */ #palco::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(ellipse 120% 140% at 50% 120%, var(--oro-tenue) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 0% 100%, rgba(201,162,39,.05) 0%, transparent 40%), radial-gradient(ellipse 60% 50% at 100% 80%, rgba(201,162,39,.04) 0%, transparent 35%); animation: respiro 14s ease-in-out infinite alternate; opacity:.7; } /* solo opacità: il vecchio hue-rotate di 3° non si vedeva, ma un filtro animato su un livello a tutto schermo va ridisegnato dal processore a ogni fotogramma — misurato: il 15% del tempo occupato anche a pagina ferma */ @keyframes respiro{ 0%{opacity:.5} 50%{opacity:.85} 100%{opacity:.6} } /* ── righello e XP ─────────────────────────────────────────────────── */ #righello{position:fixed;top:0;left:0;right:0;z-index:72;padding:.7rem 0 0;text-align:center;pointer-events:none;mix-blend-mode:difference} .righello-tacche{height:12px;display:flex;justify-content:center;gap:6px;align-items:flex-start} .righello-tacche i{width:1px;height:6px;background:rgba(255,255,255,.45);transition:background .6s,height .4s,box-shadow .6s} .righello-tacche i.alta{height:12px;background:#fff} /* Miglioria 5: tacche atto completato → oro */ .righello-tacche i.alta.completata{background:var(--oro);box-shadow:0 0 8px var(--oro-glow);height:14px} .righello-riga{margin-top:.35rem;color:#fff;opacity:.85} /* Miglioria 13: timecode lampeggiante */ .righello-riga span:first-child{font-variant-numeric:tabular-nums} #xp{ position:fixed;top:.9rem;right:var(--sp);z-index:74;display:flex;align-items:center;gap:.4rem; padding:.42rem .8rem;border:1px solid var(--linea);border-radius:999px;background:rgba(10,10,10,.55);backdrop-filter:blur(8px); transition:border-color .5s,box-shadow .5s; } #xp b{font-family:'JetBrains Mono',monospace;font-size:.78rem} #xp .mono{font-size:.6rem} .xp-punto{width:8px;height:8px;border-radius:50%;background:var(--oro);box-shadow:0 0 10px var(--oro)} #xp.festa{animation:pulsa-xp .7s cubic-bezier(.34,1.56,.64,1);border-color:var(--oro);box-shadow:0 0 20px var(--oro-glow)} @keyframes pulsa-xp{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}} /* (Il toast della tappa completata è stato scartato il 2026-09-05: qui è cinema, non un gioco a punti. Il segnale resta il contatore XP e la tacca d'oro nel righello.) */ /* ── Miglioria 7 (CSS): flash scatto tutto schermo ───────────────── */ .flash-scatto{ position:fixed;inset:0;z-index:92;background:#fff;pointer-events:none; animation:flash .35s ease-out forwards; } @keyframes flash{0%{opacity:.9}100%{opacity:0}} /* ── Miglioria 18: spotlight cursore ─────────────────────────────── */ @media (pointer:fine){ #palco .palco-velo{background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),rgba(5,5,5,.25),rgba(5,5,5,.88));transition:opacity .8s} } #testa{position:fixed;top:.7rem;left:var(--sp);z-index:74;mix-blend-mode:difference} .marchio img{width:38px} /* ── impianto degli atti ───────────────────────────────────────────── */ /* Miglioria 4: più aria cinematografica tra le sezioni */ .atto{position:relative;padding:clamp(6rem,16vh,13rem) var(--sp)} .atto + .atto{border-top:1px solid var(--linea)} .schermo{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:12vh} .intestazione{max-width:64rem;margin:0 auto clamp(2.4rem,6vw,4rem)} .parole span{display:inline-block;overflow:hidden;vertical-align:bottom} .parole span>i{display:inline-block;font-style:normal;transform:translateY(105%)} /* Ingresso ritardato di sottotitoli ed etichette. Lo stato di partenza è VISIBILE: si anima solo la posizione. Con opacity:0 di base, in una scheda in secondo piano (o in un renderer senza transizioni) la transizione non parte mai e il testo non compare più. Trappola già pagata: per mesi ogni .sotto e ogni .etichetta del sito sono rimaste invisibili perché nessuno aggiungeva mai la classe .in-vista. */ .sotto{max-width:68ch;color:#cfccc7;margin-top:1.1rem;text-wrap:pretty;transform:translateY(10px);transition:transform .8s .25s cubic-bezier(.22,.61,.36,1)} .atto.in-vista .sotto{transform:none} .schermo .sotto,.stanza-corpo .schermo .sotto{margin-inline:auto} .stanza-corpo .schermo .sotto{margin-inline:0} .etichetta{margin-bottom:1.1rem;transform:translateY(8px);transition:transform .6s .1s cubic-bezier(.22,.61,.36,1)} .atto.in-vista .etichetta{transform:none} .scorri{position:absolute;bottom:5.5rem;left:50%;transform:translateX(-50%);animation:scorri-pulsa 2.5s ease-in-out infinite} @keyframes scorri-pulsa{0%,100%{opacity:.5;transform:translateX(-50%) translateY(0)}50%{opacity:1;transform:translateX(-50%) translateY(6px)}} /* ── atto I: la ghiera dell'obiettivo ──────────────────────────────── */ #obiettivo{ --apertura:0; position:relative;margin-top:clamp(1.6rem,5vw,3rem); width:min(360px,74vw);aspect-ratio:1;touch-action:pan-y;cursor:grab; } #obiettivo:active{cursor:grabbing} #ghiera{width:100%;height:100%;display:block} .g-corpo{fill:#0a0a0a;stroke:rgba(242,240,236,.22);stroke-width:1.5} .g-corpo-int{fill:#070707;stroke:rgba(242,240,236,.1);stroke-width:1} #g-anello{transform-origin:200px 200px;transition:transform .06s linear} .g-tacche{stroke:rgba(242,240,236,.5);stroke-width:1.4;fill:none} .g-f{fill:var(--grigio);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-anchor:middle;dominant-baseline:middle} .g-indice{fill:var(--oro)} .g-bordo-foro{fill:none;stroke:rgba(242,240,236,.28);stroke-width:1.5} /* le lamelle: chiuse coprono il foro, aprendosi ruotano verso il bordo */ .g-lamella{ transform-origin:200px 200px; /* aprire = le lamelle si ritirano verso il bordo, non si rimpiccioliscono al centro: è il verso giusto di un diaframma vero. */ transform:rotate(var(--rot)) translate(0px, calc(var(--apertura) * -128px)) rotate(calc(var(--apertura) * -18deg)); transition:transform .1s linear; } .g-lamella path{fill:#131313;stroke:rgba(242,240,236,.13);stroke-width:.8} .g-lamella:nth-child(2n) path{fill:#0e0e0e} /* dentro il foro si intravede il set man mano che si apre */ #obiettivo::after{ content:'';position:absolute;left:50%;top:50%;width:66%;height:66%; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1; background:radial-gradient(circle,rgba(201,162,39,.35),rgba(201,162,39,0) 70%); opacity:var(--apertura); } #obiettivo.aperto{cursor:default} .obiettivo-testo{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); color:var(--bianco);pointer-events:none;text-align:center;width:60%; text-shadow:0 2px 12px #000; } .obiettivo-f{ position:absolute;left:50%;bottom:-2.2rem;transform:translateX(-50%); color:var(--oro);pointer-events:none; } /* ── atto II: il binario ───────────────────────────────────────────── */ .binario{overflow:hidden;cursor:grab;touch-action:pan-y} .binario.presa{cursor:grabbing} .binario-corsa{display:flex;gap:clamp(1rem,2.5vw,2rem);will-change:transform} .film{flex:0 0 min(78vw,560px)} .film-quadro{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b0b0b;border:1px solid var(--linea)} .film-quadro img{width:100%;height:100%;object-fit:cover;transition:transform .8s,filter .8s;filter:grayscale(.55) brightness(.75)} .film:hover .film-quadro img{transform:scale(1.04);filter:none} .film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;font-size:.9rem;background:rgba(5,5,5,.35);backdrop-filter:blur(3px)} .film-riga{display:flex;justify-content:space-between;gap:1rem;margin-top:.8rem;border-top:1px solid var(--linea);padding-top:.6rem} .film-titolo{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.2rem);line-height:1;margin-top:.4rem} .film-fine{flex:0 0 min(60vw,360px);display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--linea);padding-left:1.4rem} .binario-stato{display:flex;align-items:center;gap:.8rem;margin-top:1.6rem} .binario-stato i{flex:1;height:1px;background:var(--linea);position:relative;display:block} .binario-stato i::after{content:'';position:absolute;left:0;top:0;height:1px;width:var(--corsa,0);background:var(--oro);transition:width .3s} /* ── atto III: il tavolo di montaggio ──────────────────────────────── */ .tavolo{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start} /* La moviola prende quello che le serve, non una frazione: con 1.2fr il monitor da 320px galleggiava in mezzo a 300px di vuoto. */ @media (min-width:900px){.tavolo{grid-template-columns:minmax(0,1fr) auto}.moviola{justify-items:start}} .clip{position:relative;aspect-ratio:9/16;overflow:hidden;border:1px solid var(--linea);background:#0b0b0b;touch-action:pan-y;transition:transform .3s,border-color .3s} .clip:hover{transform:scale(1.04);border-color:rgba(242,240,236,.3)} .clip img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.8);pointer-events:none;transition:filter .4s} .clip:hover img{filter:grayscale(.1) brightness(.95)} .clip span{position:absolute;left:.4rem;bottom:.4rem;font-size:.52rem;color:#fff} .clip.presa{outline:1px solid var(--oro);opacity:.6} .clip.usata{opacity:.25;pointer-events:none} .clip-fantasma{position:fixed;z-index:95;width:88px;aspect-ratio:9/16;pointer-events:none;object-fit:cover;border:1px solid var(--oro);box-shadow:0 8px 32px rgba(201,162,39,.25)} .moviola{display:grid;gap:1rem;justify-items:center} /* Miglioria 3: monitor più grande con glow quando pieno */ .monitor{position:relative;width:min(320px,75vw);aspect-ratio:9/16;background:#0b0b0b;border:1px solid var(--linea);display:grid;place-items:center;overflow:hidden;transition:border-color .5s,box-shadow .5s} .monitor.attivo{border-color:var(--oro);box-shadow:0 0 30px var(--oro-glow),inset 0 0 20px rgba(201,162,39,.06)} .monitor video{width:100%;height:100%;object-fit:cover} .monitor{background:#0b0b0b center/cover no-repeat} .monitor-vuoto{position:absolute;left:0;right:0;bottom:.7rem;text-align:center;opacity:.55;text-shadow:0 1px 6px rgba(0,0,0,.9)} .timeline{display:flex;gap:.6rem;width:min(320px,75vw)} .slot{flex:1;aspect-ratio:9/16;border:1px dashed var(--linea);position:relative;overflow:hidden;display:grid;place-items:center;transition:border-color .25s,background .25s,transform .3s} .slot.mira{border-color:var(--oro);background:rgba(201,162,39,.1);transform:scale(1.05)} .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .slot span{position:relative;z-index:1;opacity:.5} .slot.pieno span{display:none} .slot.pieno{border-style:solid;border-color:rgba(242,240,236,.25);animation:incastro .4s cubic-bezier(.34,1.56,.64,1)} @keyframes incastro{0%{transform:scale(.92);opacity:.6}100%{transform:scale(1);opacity:1}} /* ── atto IV: la camera ────────────────────────────────────────────── */ .camera{display:grid;gap:clamp(1.4rem,4vw,2.6rem);grid-template-columns:1fr} @media (min-width:900px){.camera{grid-template-columns:1.5fr .7fr;align-items:start}} .camera-quadro{position:relative;border:1px solid var(--linea);overflow:hidden;background:#0b0b0b} .camera-quadro img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:filter .12s} /* Su uno scatto chiaro (seta, controluce) il testo bianco con la sola ombra spariva: sotto la didascalia ci vuole una fascia scura vera. */ .camera-quadro figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .7rem;color:#fff; background:linear-gradient(to top,rgba(0,0,0,.8),transparent);text-shadow:0 1px 6px #000} .camera-comandi{display:grid;gap:1rem;align-content:start} .ago{position:relative;height:34px;border:1px solid var(--linea);display:grid;place-items:center} .ago b{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--linea)} .ago i{position:absolute;top:4px;bottom:4px;width:2px;background:var(--bianco);left:50%;transition:left .12s,background .25s} .ago.giusto i{background:var(--oro)} input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:1px;background:var(--linea);touch-action:pan-y} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--bianco);cursor:grab} input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:var(--bianco)} .provini{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem} .provino{aspect-ratio:1;overflow:hidden;border:1px solid transparent;opacity:.5;transition:opacity .25s} .provino.vivo{border-color:var(--oro);opacity:1} .provino img{width:100%;height:100%;object-fit:cover} /* ── atto V: la catena ─────────────────────────────────────────────── */ .catena{position:relative;display:grid;gap:.8rem;grid-template-columns:1fr} @media (min-width:900px){.catena{grid-template-columns:repeat(5,1fr)}} .catena-fili{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} /* pulviscolo WebGL dietro ai nodi (js/catena-webgl.js): sotto ai fili e ai nodi, si spegne da solo sotto i 500px e su prefers-reduced-motion — vedi il JS */ #catena-webgl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} #catena-webgl canvas{display:block;width:100%;height:100%} /* Miglioria 8: fili animati con corrente che scorre */ .catena-fili line{stroke:var(--oro);stroke-width:1.5;stroke-dasharray:8 4;animation:corrente 1.2s linear infinite} @keyframes corrente{to{stroke-dashoffset:-24}} .nodo{position:relative;z-index:1;text-align:left;padding:1.1rem;background:rgba(10,10,10,.72);border:1px solid var(--linea);transition:border-color .4s,transform .4s,background .4s,box-shadow .4s} .nodo:hover{border-color:rgba(242,240,236,.3);transform:translateY(-2px)} .nodo b{display:block;font-size:1rem;font-weight:500;margin:.5rem 0 .2rem} .nodo em{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio)} .nodo p{margin-top:.7rem;font-size:.88rem;color:#bdbab5;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .4s} /* Miglioria 8: glow pulsante sui nodi accesi */ .nodo.acceso{border-color:var(--oro);background:rgba(15,13,7,.9);transform:translateY(-3px);box-shadow:0 0 18px var(--oro-glow),inset 0 0 12px rgba(201,162,39,.04)} .nodo.acceso::after{content:'';position:absolute;inset:-1px;border:1px solid var(--oro);opacity:.4;animation:nodo-pulsa 2s ease-in-out infinite alternate;pointer-events:none} @keyframes nodo-pulsa{0%{opacity:.2;box-shadow:0 0 8px var(--oro-glow)}100%{opacity:.5;box-shadow:0 0 20px var(--oro-glow)}} .nodo.acceso p{max-height:34rem;opacity:1} .nodo.sbagliato{border-color:#a33;animation:tremo .3s} @keyframes tremo{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} .catena-stato{margin-top:1.2rem} .macchina-nota{margin-top:2.8rem;display:grid;gap:1rem;max-width:70ch;color:#bdbab5} /* ── portfolio ─────────────────────────────────────────────────────── */ .lavori{display:grid;gap:clamp(3rem,7vw,5rem)} /* Miglioria 11: layout alternato con numero gigante */ .lavoro{display:grid;gap:1.2rem;grid-template-columns:1fr;align-items:center;position:relative} @media (min-width:820px){ .lavoro{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)} .lavoro:nth-child(even) .lavoro-foto{order:2} } .lavoro-foto{overflow:hidden;border:1px solid var(--linea);background:#0b0b0b;position:relative} .lavoro-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.3) brightness(.9);transition:transform 1.2s cubic-bezier(.22,.61,.36,1),filter .9s} .lavoro:hover .lavoro-foto img{transform:scale(1.05);filter:grayscale(0) brightness(1)} /* Numero grande semi-trasparente */ .lavoro-testo{position:relative} .lavoro-testo::before{ content:attr(data-numero);position:absolute;top:-1.2rem;right:-.5rem; font-family:Anton,sans-serif;font-size:clamp(5rem,12vw,9rem);line-height:1; color:rgba(242,240,236,.04);pointer-events:none;z-index:-1; } .lavoro-testo h3{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1;margin:.5rem 0 .8rem} .lavoro-testo p{color:#bdbab5;max-width:52ch} .lavoro-cosa{margin-top:1rem;color:var(--oro)} /* ── chi siamo ─────────────────────────────────────────────────────── */ .team{display:grid;gap:clamp(1.4rem,4vw,2.6rem);grid-template-columns:1fr;align-items:start} @media (min-width:760px){.team{grid-template-columns:1fr 1fr}} @media (min-width:1100px){.team{grid-template-columns:minmax(200px,280px) minmax(200px,280px) minmax(300px,1fr)}} .team figure img{width:100%;aspect-ratio:4/5;max-height:56svh;object-fit:cover;filter:grayscale(1) contrast(1.05)} .team figcaption{margin-top:.9rem;display:grid;gap:.35rem} .team figcaption b{font-size:1.15rem;font-weight:500} .team figcaption p{color:#bdbab5;max-width:46ch} .chi-nota{margin-top:2.4rem;display:grid;gap:1rem;max-width:70ch;color:#bdbab5} /* ── coda ──────────────────────────────────────────────────────────── */ .bottone{border:1px solid var(--bianco);background:var(--bianco);color:#0a0a0a;padding:.8rem 1.5rem;font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;transition:all .35s cubic-bezier(.22,.61,.36,1);display:inline-block;position:relative;overflow:hidden} .bottone::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);transform:translateX(-100%);transition:transform .6s} .bottone:hover::after{transform:translateX(100%)} .bottone:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.2)} .bottone:disabled{opacity:.3;cursor:not-allowed} .bottone:disabled:hover{transform:none;box-shadow:none} .bottone:disabled:hover::after{transform:translateX(-100%)} .bottone.vuoto{background:none;color:var(--bianco)} .bottone.vuoto:hover{background:rgba(242,240,236,.08)} .bottone.grande{padding:1rem 2rem;font-size:.72rem} /* ── dock e menu ───────────────────────────────────────────────────── */ #dock{ position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1rem + env(safe-area-inset-bottom));z-index:80; display:flex;align-items:center;gap:.5rem;padding:.4rem;border-radius:999px; background:rgba(10,10,10,.72);border:1px solid var(--linea);backdrop-filter:blur(10px); } .dock-tondo{width:42px;height:42px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;font-size:.95rem;transition:background .25s} .dock-tondo:hover,.dock-tondo.acceso{background:rgba(242,240,236,.12)} .dock-pillola{background:var(--bianco);color:#0a0a0a;border-radius:999px;padding:.75rem 1.4rem;font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap} #menu{ position:fixed;right:var(--sp);bottom:5.2rem;z-index:80;display:grid;gap:.1rem;padding:.5rem; background:rgba(10,10,10,.92);border:1px solid var(--linea);backdrop-filter:blur(10px); } .menu-voce{display:flex;gap:.7rem;align-items:center;padding:.5rem .8rem;text-align:left;font-size:.9rem;transition:background .2s} .menu-voce:hover{background:rgba(242,240,236,.08)} .menu-voce .mono{min-width:1.6rem} /* ── piede ─────────────────────────────────────────────────────────── */ #piede{border-top:1px solid var(--linea);padding:2.4rem var(--sp) 6rem;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between;background:rgba(5,5,5,.7)} .piede-logo{width:32px;opacity:.8} .piede-nota{flex-basis:100%} /* ── chat e lettore ────────────────────────────────────────────────── */ #chat{position:fixed;right:clamp(.8rem,3vw,2rem);bottom:5.4rem;z-index:85;width:min(360px,88vw);max-height:64svh;display:flex;flex-direction:column;background:rgba(10,10,10,.94);border:1px solid var(--linea);backdrop-filter:blur(10px)} .chat-testa{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--linea)} .chat-corpo{flex:1;overflow:auto;padding:1rem;display:grid;gap:.6rem;align-content:start;font-size:.9rem} .chat-corpo p{padding:.55rem .8rem;border:1px solid var(--linea);max-width:85%} .chat-corpo p.io{justify-self:end;background:#151515} .chat-scelte{display:flex;flex-wrap:wrap;gap:.35rem;padding:0 .8rem .7rem} .chat-scelte button{border:1px solid var(--linea);border-radius:999px;padding:.35rem .7rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#c8c5c0;transition:background .2s,color .2s} .chat-scelte button:hover{background:var(--bianco);color:#0a0a0a} .chat-riga{display:flex;border-top:1px solid var(--linea)} .chat-riga input{flex:1;padding:.8rem 1rem} .chat-riga button{padding:0 1rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase} #lettore{position:fixed;inset:0;z-index:95;background:rgba(5,5,5,.96);display:grid;place-content:center;gap:1rem;padding:var(--sp)} #lettore video{width:min(1100px,92vw);max-height:76svh;background:#000} #chiudi-lettore{position:absolute;top:1rem;right:1.2rem;font-size:1.4rem} @media (max-width:640px){ #xp{top:auto;bottom:calc(4.6rem + env(safe-area-inset-bottom));right:.8rem} .dock-pillola{padding:.7rem 1rem} #menu{right:.8rem;left:.8rem} } @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* ── portfolio: schede che si aprono ───────────────────────────────── */ .lavoro{cursor:pointer} .lavoro-foto{position:relative} .lavoro-lente{position:absolute;right:.7rem;bottom:.7rem;padding:.35rem .7rem;border:1px solid rgba(255,255,255,.5);border-radius:999px;background:rgba(5,5,5,.45);color:#fff;backdrop-filter:blur(4px)} .lavoro .lavoro-testo p:not(.mono){max-height:0;overflow:hidden;opacity:0;transition:max-height .55s ease,opacity .4s,margin .4s;margin:0} .lavoro.aperto .lavoro-testo p:not(.mono){max-height:22rem;opacity:1;margin:.8rem 0} .lavoro.aperto .lavoro-foto img{filter:none;transform:scale(1.02)} .lavoro.aperto .lavoro-lente{background:var(--oro);border-color:var(--oro);color:#111} .lavoro-sito{display:inline-block;margin-top:.9rem;color:var(--oro);border-bottom:1px solid currentColor;padding-bottom:2px} /* ── chi siamo: il brief interattivo ───────────────────────────────── */ .team{align-items:start} .brief{border:1px solid var(--linea);background:rgba(10,10,10,.72);padding:clamp(1rem,2.4vw,1.6rem);display:grid;gap:.9rem;align-content:start} .brief h3{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1} .brief-intro{color:#bdbab5;font-size:.92rem} .brief-scelte{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem} .brief-scelte button{border:1px solid var(--linea);border-radius:999px;padding:.42rem .8rem;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#c8c5c0;transition:background .2s,color .2s,border-color .2s} .brief-scelte button:hover{background:var(--bianco);color:#0a0a0a;border-color:var(--bianco)} .brief-passo{animation:entra .45s ease} @keyframes entra{from{opacity:0;transform:translateY(10px)}} .brief-esito ul{list-style:none;display:grid;gap:.4rem;margin:.7rem 0 1rem} .brief-esito li{display:flex;gap:.6rem;font-size:.92rem;color:#e6e3de;border-bottom:1px solid var(--linea);padding-bottom:.4rem} .brief-esito li b{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--oro);min-width:5.5rem} .brief-azioni{display:flex;flex-wrap:wrap;gap:.5rem} /* ── contatti ──────────────────────────────────────────────────────── */ .contatti{display:grid;gap:clamp(1.4rem,4vw,2.6rem);grid-template-columns:1fr;align-items:start} @media (min-width:900px){.contatti{grid-template-columns:1.4fr .8fr}} .contatti-vie{display:grid;gap:.7rem} .via{ display:grid;gap:.3rem;text-align:left;padding:1.1rem 1.2rem; border:1px solid var(--linea);background:rgba(10,10,10,.6); transition:border-color .3s,background .3s,transform .3s; } a.via:hover,button.via:hover{border-color:var(--oro);background:rgba(201,162,39,.07);transform:translateX(4px)} .via b{font-size:1.15rem;font-weight:500;line-height:1.35} .via-ferma{cursor:default} .via-ferma b{font-size:1rem;font-weight:400;color:#c8c5c0} .sala{border:1px solid var(--linea);background:rgba(10,10,10,.6);padding:1.2rem;display:grid;gap:.6rem;align-content:start} .sala-stato{font-family:Anton,sans-serif;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1} .sala-nota{color:#bdbab5;font-size:.92rem} .sala.aperta{border-color:var(--oro)} .sala.aperta .sala-stato{color:var(--oro)} /* ── pagine di testo (privacy) ─────────────────────────────────────── */ .pagina{max-width:72ch;margin:0 auto;padding:clamp(5rem,12vh,8rem) var(--sp) 4rem} .pagina > .display{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:1rem} /* h1 o p: page.php lo cambia se il contenuto ha già il suo H1 */ .pagina .aggiornato{margin-top:1.4rem} .pagina section{margin-top:2.4rem} .pagina h2{font-family:'Space Grotesk',sans-serif;font-size:1.15rem;font-weight:500;margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--linea)} .pagina p{color:#c8c5c0;margin-bottom:.8rem} .pagina b{color:var(--bianco);font-weight:500} .pagina ul{list-style:none;display:grid;gap:.6rem;margin:.4rem 0 1rem} .pagina li{color:#c8c5c0;padding-left:1.1rem;position:relative} .pagina li::before{content:'—';position:absolute;left:0;color:var(--oro)} .pagina a:not(.bottone){color:var(--oro);border-bottom:1px solid currentColor} .pagina code{font-family:'JetBrains Mono',monospace;font-size:.85em;color:var(--oro)} .pagina .ritorno{margin-top:3rem} /* Le pagine di testo non sono "atti": non ricevono mai .in-vista. */ .pagina .etichetta,.pagina .sotto{transform:none} /* ── IL FILM INTERATTIVO ───────────────────────────────────────────── */ html.nel-film{overflow:hidden} #film{position:fixed;inset:0;z-index:78;background:#050505;overflow:hidden} #film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .8s,transform 1.2s} #film.in-stanza #film-video{filter:brightness(.95) saturate(1);transform:scale(1.03)} #film-grana{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(5,5,5,.55),transparent 22%,transparent 62%,rgba(5,5,5,.9))} /* dentro la stanza il lavoro sta su una colonna scura, il set resta a vista di lato */ #film.in-stanza #film-grana{background:linear-gradient(100deg,rgba(4,4,5,.72) 0%,rgba(4,4,5,.4) 50%,rgba(4,4,5,.05) 72%,rgba(4,4,5,.35) 100%)} /* le porte: compaiono quando lui ci passa davanti */ /* `bottom` misurato a 1500×860: a 12vh la riga delle porte arrivava a 757px e «Interno · corridoio» dell'HUD cade a 745 — la scritta finiva DENTRO la scheda «Trailer cinematografici». Il `max` con una misura in rem tiene l'aria anche sugli schermi bassi, dove i soli vh non bastano. */ #film-porte{position:absolute;left:0;right:0;bottom:max(16vh,9.5rem);z-index:3;display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;padding:0 var(--sp)} /* Cliccabili da subito. Prima erano opacity:0 + pointer-events:none finché il video della camminata non le superava: "Automazioni" (t .70) e "Contattaci" (t .95) restavano morte per dieci secondi, e per sempre se il video non partiva. Una navigazione non si mette mai dietro alla riuscita di un video. */ .scelta{ display:grid;gap:.15rem;text-align:left;padding:.85rem 1.1rem;min-width:13rem; border:1px solid rgba(242,240,236,.28);background:rgba(5,5,5,.55);backdrop-filter:blur(8px); opacity:.82;transition:opacity .35s,transform .35s cubic-bezier(.22,.61,.36,1),border-color .3s,background .3s; } .scelta.vista{opacity:.9} .scelta.davanti{opacity:1;border-color:var(--oro);background:rgba(201,162,39,.14)} .scelta:hover,.scelta:focus-visible{opacity:1;border-color:var(--oro);background:rgba(201,162,39,.2);transform:translateY(-3px)} .scelta-riga{font-size:.5rem} .scelta-nome{font-size:1.02rem;font-weight:500;line-height:1.2} .scelta-sotto{font-size:.52rem} .scelta-apri{font-size:.52rem;color:var(--oro);opacity:0;transition:opacity .25s} .scelta:hover .scelta-apri,.scelta:focus-visible .scelta-apri,.scelta.davanti .scelta-apri{opacity:1} #film.in-porta #film-porte,#film.in-stanza #film-porte{opacity:0;pointer-events:none;transition:opacity .3s} /* la stanza: il fondale è la sua ripresa, il lavoro ci sta sopra */ #film-stanza{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;padding:clamp(1rem,3vw,2.2rem) var(--sp) 0} .stanza-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex:0 0 auto; width:100%;max-width:1500px;margin-inline:auto;padding:0 clamp(.8rem,2vw,2rem)} .stanza-testa>div{max-width:64%} .stanza-testa h2{font-size:clamp(1.6rem,4vw,3rem);margin-top:.2rem} #stanza-esci{border:1px solid var(--linea);border-radius:999px;padding:.55rem 1.1rem;background:rgba(5,5,5,.55);backdrop-filter:blur(6px);white-space:nowrap} #stanza-esci:hover{border-color:var(--oro);color:var(--oro)} /* La colonna del contenuto era `min(1180px,72%)` ancorata a sinistra: su uno schermo da 2000px lasciava metà pagina di fondale vuoto. Ora è centrata e larga quasi quanto la finestra — la ripresa resta visibile ai bordi. */ .stanza-corpo{flex:1;overflow:auto;overscroll-behavior:contain;margin-top:clamp(.8rem,2vw,1.4rem);padding-bottom:12vh; width:100%;max-width:1500px;margin-inline:auto; padding-left:clamp(.8rem,2vw,2rem);padding-right:clamp(.8rem,2vw,2rem); background:linear-gradient(to right,rgba(5,5,6,.72),rgba(5,5,6,.94) 22%,rgba(5,5,6,.94) 78%,rgba(5,5,6,.72));mask-image:linear-gradient(to bottom,transparent,#000 3%,#000 92%,transparent)} /* Sopra i 1500px il contenuto non deve incollarsi a sinistra: su schermi larghi le sezioni della stanza si aprono su due colonne. */ @media (min-width:1500px){ .stanza-corpo .intestazione{max-width:70ch} .stanza-corpo .schermo{max-width:none} } .stanza-corpo::-webkit-scrollbar{width:6px} .stanza-corpo::-webkit-scrollbar-thumb{background:rgba(242,240,236,.2)} /* dentro la stanza il contenuto è cinema, non un documento */ .stanza-corpo .atto,.stanza-corpo section{padding:0 0 clamp(2rem,5vw,3.4rem);border:0;min-height:0} .stanza-corpo .schermo{min-height:0;display:block;text-align:left} .stanza-corpo .intestazione{margin:0 0 1.4rem;max-width:60ch} .stanza-corpo .etichetta,.stanza-corpo .sotto{opacity:1;transform:none} .stanza-corpo .parole span>i{transform:none} .stanza-corpo h2.display{font-size:clamp(1.4rem,3vw,2.2rem)} .stanza-corpo .sotto{font-size:.95rem;color:#dcd9d4} .stanza-corpo p:not(.mono){color:#d4d1cc} .stanza-corpo .film-quadro,.stanza-corpo .camera-quadro,.stanza-corpo .lavoro-foto,.stanza-corpo .monitor,.stanza-corpo .clip{ box-shadow:0 24px 60px rgba(0,0,0,.6); } .stanza-corpo .nodo,.stanza-corpo .via,.stanza-corpo .brief,.stanza-corpo .sala{background:rgba(6,6,6,.72);backdrop-filter:blur(10px)} #film-hud{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:1rem var(--sp) 5.4rem;display:grid;gap:.3rem;justify-items:center;pointer-events:none} #film-dove{color:var(--bianco);letter-spacing:.2em} .film-aiuto{font-size:.56rem} #film.in-stanza #film-hud{opacity:0} @media (max-width:700px){ /* Le sei porte erano una fila da scorrere col dito: su 390px ne entravano due e le altre quattro restavano fuori campo **senza che niente lo lasciasse capire** — «si vedono solo Foto e video per i brand e UGC verticale» era esattamente questo. Una fila orizzontale dentro una pagina che si scorre in verticale non si scopre: nessuna barra, nessun taglio evidente, e la seconda scheda finisce appena oltre il bordo. Ora una griglia 2×3: ci stanno tutte e sei, non c'è niente da scoprire. Per farcele stare restano nome e «Entra →»; il numero e il sottotitolo vivono nella stanza, non servono per scegliere la porta. */ /* `bottom` misurato: a 13vh l'ultima riga finiva sotto all'HUD («Interno · corridoio» + l'aiuto), che parte a 705px su 844. Righe uniformi, sennò le due schede a una riga sola restano più basse delle altre. */ /* `max` in rem: sotto i ~760px d'altezza (telefono con la barra del browser) 18vh non basta e l'ultima riga toccava «Interno · corridoio». */ #film-porte{bottom:max(18vh,8.6rem);display:grid;grid-template-columns:1fr 1fr; grid-auto-rows:minmax(4.4rem,auto);gap:.45rem;overflow:visible; padding-inline:var(--sp)} .scelta{min-width:0;padding:.6rem .7rem;gap:.2rem} .scelta-riga,.scelta-sotto{display:none} .scelta-nome{font-size:.86rem;line-height:1.12} .scelta-apri{font-size:.55rem} .stanza-corpo{padding-bottom:16vh;width:100%} #film.in-stanza #film-grana{background:linear-gradient(to bottom,rgba(4,4,5,.9),rgba(4,4,5,.94))} } /* adattamenti dei contenuti quando stanno dentro una stanza */ /* Nella stanza la colonna è più stretta della pagina, ma non tanto da meritare una colonna sola: impilare scaffale e moviola lasciava mezzo pannello vuoto. */ .stanza-corpo .tavolo{grid-template-columns:minmax(0,1fr) auto;gap:1.4rem} .stanza-corpo .moviola{justify-items:start} .stanza-corpo .monitor,.stanza-corpo .timeline{width:min(240px,100%)} @media (max-width:900px){.stanza-corpo .tavolo{grid-template-columns:1fr}} .stanza-corpo .camera{grid-template-columns:1fr} .stanza-corpo .catena{grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem} .stanza-corpo .nodo{padding:.8rem} .stanza-corpo .nodo b{font-size:.88rem} @media (max-width:760px){.stanza-corpo .catena{grid-template-columns:1fr}} .stanza-corpo .lavoro{grid-template-columns:1fr} .stanza-corpo .team{grid-template-columns:1fr 1fr} .stanza-corpo .macchina-nota,.stanza-corpo .chi-nota{margin-top:1.4rem} /* il blocco montaggio dentro la stanza dei trailer */ .montaggio-ai{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:clamp(1.6rem,4vw,2.6rem);align-items:center} @media (min-width:820px){.montaggio-ai{grid-template-columns:1.1fr 1fr}} .montaggio-ai video{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--linea);background:#0b0b0b} .montaggio-ai h3{font-family:Anton,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,2rem);line-height:1;margin:.4rem 0 .7rem} .montaggio-ai p:not(.mono){color:#bdbab5;max-width:48ch} /* niente fill-mode: se l'animazione non parte (scheda in secondo piano) l'elemento resta al suo stato normale, cioè visibile. Mai il contrario. */ #film.entra{animation:film-entra .9s ease} #film-stanza.entra{animation:stanza-entra .6s cubic-bezier(.22,.61,.36,1)} /* Si anima solo la posizione, mai l'opacità: un'animazione congelata (scheda in secondo piano) resterebbe ferma sul fotogramma iniziale, cioè invisibile. */ @keyframes film-entra{from{filter:brightness(0)}to{filter:none}} @keyframes stanza-entra{from{transform:translateY(30px)}to{transform:none}} #entra-set{margin-top:clamp(1.6rem,4vw,2.6rem)} #atto-ciak .centro{gap:0} /* ── la porta che si apre fisicamente ──────────────────────────────── */ #porta-fisica{position:absolute;inset:0;z-index:6;pointer-events:none;perspective:1400px;opacity:0} #porta-fisica .battente{ position:absolute;top:0;bottom:0;width:50.4%; background: linear-gradient(180deg,rgba(255,255,255,.05),transparent 12%), repeating-linear-gradient(90deg,#151413 0 38px,#121110 38px 40px), #131211; border:1px solid #000;box-shadow:inset 0 0 120px rgba(0,0,0,.9); transform-style:preserve-3d;transition:transform .95s cubic-bezier(.5,.02,.2,1); } #porta-fisica .sx{left:0;transform-origin:left center;transform:rotateY(-105deg)} #porta-fisica .dx{right:0;transform-origin:right center;transform:rotateY(105deg)} #porta-fisica .maniglia{position:absolute;top:50%;width:16px;height:64px;border-radius:8px;background:linear-gradient(180deg,#c9a227,#7d6417);box-shadow:0 2px 10px rgba(0,0,0,.8)} #porta-fisica .sx .maniglia{right:16px;transform:translateY(-50%)} #porta-fisica .dx .maniglia{left:16px;transform:translateY(-50%)} #porta-fisica .fessura{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(255,247,230,0);box-shadow:0 0 0 rgba(255,247,230,0);transition:background .3s,box-shadow .3s} /* chiusa davanti alla camera */ #film.porta-chiusa #porta-fisica{opacity:1} #film.porta-chiusa #porta-fisica .sx, #film.porta-chiusa #porta-fisica .dx{transform:rotateY(0deg)} #film.porta-chiusa #porta-fisica .fessura{background:rgba(255,247,230,.75);box-shadow:0 0 60px 14px rgba(255,247,230,.5)} /* e si spalanca sui cardini */ #film.porta-aperta #porta-fisica{opacity:1} #film.porta-aperta #porta-fisica .sx{transform:rotateY(-98deg)} #film.porta-aperta #porta-fisica .dx{transform:rotateY(98deg)} #film.porta-aperta #porta-fisica .fessura{background:rgba(255,247,230,0);box-shadow:none} /* il lavoro dentro la stanza non deve mai sembrare trasparente */ .stanza-corpo img,.stanza-corpo video{background:#080808} .stanza-corpo .camera-quadro,.stanza-corpo .film-quadro,.stanza-corpo .lavoro-foto,.stanza-corpo .monitor{background:#080808;border-color:rgba(242,240,236,.22)} /* ── dentro la stanza il materiale va visto, non attenuato ───────────── Nel vecchio impianto a scorrimento poster e provini erano volutamente desaturati e scuri, e si accendevano al passaggio del mouse. Dentro una stanza quel trucco fa sembrare tutto spento: qui il filtro non c'è. */ .stanza-corpo .film-quadro img, .stanza-corpo .clip img, .stanza-corpo .lavoro-foto img, .stanza-corpo .team figure img, .stanza-corpo .provino img, .stanza-corpo .camera-quadro img, .stanza-corpo .slot img{filter:none} .stanza-corpo .film:hover .film-quadro img{transform:scale(1.03)} .stanza-corpo .provino{opacity:.85} .stanza-corpo .provino.vivo{opacity:1} .stanza-corpo .clip{opacity:1} .stanza-corpo .clip.usata{opacity:.3} /* testi: più contrasto, siamo sopra a un fondale vivo */ .stanza-corpo .mono{color:#b6b3ae} .stanza-corpo .lavoro-testo p,.stanza-corpo .team figcaption p, .stanza-corpo .macchina-nota p,.stanza-corpo .chi-nota p, .stanza-corpo .nodo p,.stanza-corpo .montaggio-ai p:not(.mono){color:#dedbd6} .stanza-corpo .film-riga span,.stanza-corpo .binario-stato span{color:#a8a5a0} .stanza-corpo .film-titolo,.stanza-corpo h2.display,.stanza-corpo h3{color:#fff} /* il fondale della stanza non deve mangiarsi il contenuto */ #film.in-stanza #film-video{filter:brightness(.8) saturate(.95)} /* ── la certificazione di Agnese ───────────────────────────────────── */ .certificazione{ display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:.6rem;padding:.6rem .8rem; border:1px solid var(--linea);background:rgba(10,10,10,.55); transition:border-color .3s,background .3s; } .certificazione:hover{border-color:var(--oro);background:rgba(201,162,39,.1)} /* Il badge sta dentro

del team, dove `.team figure img{width:100%}` vince per specificità: senza rialzare la mira, il logo si prende tutta la colonna e il testo esce dal pannello della stanza. */ .certificazione img,.team figure .certificazione img{width:54px;height:54px;aspect-ratio:auto;max-height:none;object-fit:contain;flex:0 0 auto;filter:none} .certificazione span{min-width:0} .certificazione b{overflow-wrap:anywhere} .certificazione b{display:block;font-size:.82rem;font-weight:500;line-height:1.25;color:var(--bianco)} .certificazione em{font-style:normal;font-size:.56rem;color:var(--oro)} .certificazione-posa{margin:0 0 1rem} /* ── la vetrina dei verticali ─────────────────────────────────────── Fila che scorre in orizzontale, non l'ennesima griglia di schede uguali: i 9:16 si leggono in fila come una pellicola, e le altezze sfalsate danno ritmo. Si aprono nel lettore col sonoro. */ .vetrina{margin-top:clamp(2.6rem,6vw,4.4rem)} .vetrina-testa{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding-bottom:.9rem;border-bottom:1px solid var(--linea);margin-bottom:clamp(1.2rem,3vw,2rem)} .vetrina-testa h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase; font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:.01em} .vetrina-fila{display:flex;gap:clamp(.7rem,1.6vw,1.2rem);overflow-x:auto;overscroll-behavior-x:contain; padding-bottom:1rem;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(242,240,236,.22) transparent} .vetrina-fila::-webkit-scrollbar{height:4px} .vetrina-fila::-webkit-scrollbar-track{background:rgba(242,240,236,.06)} .vetrina-fila::-webkit-scrollbar-thumb{background:rgba(242,240,236,.22)} .vert{flex:0 0 auto;width:clamp(140px,15vw,190px);display:grid;gap:.6rem;text-align:left;scroll-snap-align:start} .vert:nth-child(even){margin-top:clamp(.8rem,2vw,1.8rem)} .vert-quadro{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#080808; border:1px solid var(--linea);transition:border-color .3s,transform .5s cubic-bezier(.22,.61,.36,1)} .vert-quadro video{width:100%;height:100%;object-fit:cover} .vert-suono{position:absolute;inset:auto .55rem .55rem auto;width:26px;height:26px;display:grid;place-content:center; font-size:.6rem;color:var(--nero);background:var(--bianco);border-radius:50%;opacity:0;transition:opacity .3s} .vert:hover .vert-quadro,.vert:focus-visible .vert-quadro{border-color:var(--oro);transform:translateY(-4px)} .vert:hover .vert-suono,.vert:focus-visible .vert-suono{opacity:1} .vert-riga{display:grid;gap:.15rem} .vert-riga b{font-weight:400;font-size:.9rem} .vert-riga em{font-style:normal;font-size:.56rem} @media (max-width:640px){.vert{width:132px}.vert:nth-child(even){margin-top:0}} @media (prefers-reduced-motion:reduce){ .vert-quadro,.sotto,.etichetta,.scelta{transition:none} .vert:hover .vert-quadro{transform:none} } /* il lettore serve anche i 9:16: un verticale largo 1100px è un francobollo in mezzo a due fasce nere */ #lettore video.verticale{width:auto;height:auto;max-height:74svh;max-width:min(92vw,420px);aspect-ratio:9/16} /* ═══ Chat: leggibilità e attesa ══════════════════════════════════════ Le risposte dell'assistente arrivano con gli a capo: senza pre-wrap diventano un muro unico. I punti dell'attesa si animano in CSS. */ .chat-corpo p{white-space:pre-wrap;overflow-wrap:anywhere} .chat-corpo a{color:var(--oro);border-bottom:1px solid currentColor} .chat-corpo p.scrive{display:flex;gap:.28rem;align-items:center;min-height:1.9rem} .chat-corpo p.scrive i{width:5px;height:5px;border-radius:50%;background:var(--grigio);animation:punti 1.1s infinite ease-in-out} .chat-corpo p.scrive i:nth-child(2){animation-delay:.15s} .chat-corpo p.scrive i:nth-child(3){animation-delay:.3s} @keyframes punti{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .chat-corpo p.guasto{border-color:rgba(201,162,39,.5)} .chat-scelte{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none} .chat-scelte::-webkit-scrollbar{display:none} .chat-scelte button{flex:0 0 auto} .chat-riga input:disabled,.chat-riga button:disabled{opacity:.4;cursor:not-allowed} #chat{border-radius:2px;box-shadow:0 18px 60px rgba(0,0,0,.55)} /* ═══ Contatti: prima il modulo, poi le altre vie ═════════════════════ */ .modulo{display:grid;gap:.9rem;border:1px solid var(--linea);background:rgba(10,10,10,.66);padding:clamp(1.1rem,2.6vw,1.6rem)} .modulo-titolo{color:var(--grigio)} .modulo-chip,.filtri{display:flex;flex-wrap:wrap;gap:.35rem} .modulo-chip button,.filtri button{border:1px solid var(--linea);border-radius:999px;padding:.35rem .75rem; font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase; color:#c8c5c0;transition:background .2s,color .2s,border-color .2s} .modulo-chip button:hover,.filtri button:hover{border-color:var(--oro);color:var(--bianco)} .modulo-chip button.scelto,.filtri button[aria-pressed="true"]{background:var(--bianco);color:#0a0a0a;border-color:var(--bianco)} /* filtri per categoria sopra trailer, verticali e foto (stesso chip del modulo) */ .filtri{margin:0 0 1.2rem} .filtri button{background:rgba(5,5,5,.5)} .filtri button[aria-pressed="true"]{background:var(--bianco)} .modulo label{display:grid;gap:.3rem;font-family:'JetBrains Mono',monospace;font-size:.6rem; letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)} .modulo input,.modulo textarea{ font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:300;letter-spacing:0;text-transform:none; color:var(--bianco);background:rgba(255,255,255,.03);border:1px solid var(--linea);padding:.7rem .8rem;width:100%;resize:vertical} .modulo input:focus,.modulo textarea:focus{outline:none;border-color:var(--oro);background:rgba(201,162,39,.05)} .modulo input:user-invalid,.modulo textarea:user-invalid{border-color:#a5482f} .modulo-riga{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center} .modulo-nota{font-size:.8rem;color:var(--grigio)} .modulo-esito{font-size:.86rem;color:var(--oro);min-height:1.2rem} .modulo-esito a{border-bottom:1px solid currentColor} @media (min-width:700px){.modulo-doppio{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}} /* le altre vie diventano una fila compatta: il modulo è la strada principale */ .contatti-vie{grid-template-columns:1fr} @media (min-width:520px){.contatti-vie{grid-template-columns:1fr 1fr}} .via{padding:.9rem 1rem} .via b{font-size:1rem} /* la sala resta un premio, non un cartello: piccola, in fondo */ .sala-stato{font-size:clamp(.95rem,1.6vw,1.15rem)} .sala{padding:1rem} .sala-nota{font-size:.84rem} .contatti-lato{display:grid;gap:.7rem;align-content:start} .modulo .bottone:disabled{opacity:.6} /* «Invio in corso…» deve leggersi */ /* /contatti: il modulo del vecchio sito vive nel contenuto della pagina, e il plugin giunes-contatti-lead gli aggancia l'automazione. Senza il vecchio tema era nudo — campi senza bordo che sembravano testo, tendina e area di testo di sistema, pulsante senza fondo. Stessa grammatica di .modulo. Il pulsante ha bordo e font scritti inline nel contenuto: servono gli !important. */ .pagina .contact-form{display:grid;gap:.9rem;border:1px solid var(--linea);background:rgba(10,10,10,.66);padding:clamp(1.1rem,2.6vw,1.6rem);margin:1rem 0 2rem} .pagina .contact-form br,.pagina .contact-form p:empty{display:none} .pagina .contact-form p{margin:0} .pagina .contact-form .row{display:grid;gap:.9rem} @media (min-width:700px){.pagina .contact-form .row{grid-template-columns:1fr 1fr}} .pagina .contact-form :is(input,select,textarea){font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:300; color:var(--bianco);background:rgba(255,255,255,.03);border:1px solid var(--linea);border-radius:0;padding:.7rem .8rem;width:100%;appearance:none} .pagina .contact-form textarea{display:block;min-height:8rem;resize:vertical} .pagina .contact-form select{padding-right:2.2rem;background-repeat:no-repeat;background-size:.32rem .32rem; background-image:linear-gradient(45deg,transparent 50%,var(--oro) 50%),linear-gradient(135deg,var(--oro) 50%,transparent 50%); background-position:calc(100% - 1.15rem) 55%,calc(100% - .83rem) 55%} .pagina .contact-form option{background:#0a0a0a;color:var(--bianco)} .pagina .contact-form ::placeholder{color:#7f7c78;opacity:1} .pagina .contact-form :is(input,select,textarea):focus{outline:none;border-color:var(--oro);background-color:rgba(201,162,39,.05)} .pagina .contact-form :is(input,textarea):user-invalid{border-color:#a5482f} .pagina .contact-form button[type=submit]{display:flex;align-items:center;min-height:3.2rem;cursor:pointer; border:1px solid var(--bianco)!important;background:var(--bianco);color:#0a0a0a;padding:1rem 2rem; font-family:'JetBrains Mono',monospace!important;font-size:.72rem!important;letter-spacing:.2em;text-transform:uppercase; transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s} .pagina .contact-form button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.2)} /* ═══ CINEMA — livello di proiezione ═══════════════════════════════════ Tutto quello che sta qui è decorativo e non prende il puntatore: se una riga sparisce, il sito resta esattamente impaginato com'è. */ /* La grana non è ferma: una pellicola vera trema. Si muove solo il livello (transform), quindi non ridisegna niente sotto. */ body::after{animation:grana 1.1s steps(4) infinite;will-change:transform} @keyframes grana{ 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,-1%)} 100%{transform:translate(2%,1%)} } /* Vignettatura d'obiettivo sopra al contenuto: chiude i bordi come un copriobiettivo, tiene l'occhio al centro. Leggera, non un buco nero. */ body::before{ content:'';position:fixed;inset:0;z-index:59;pointer-events:none; background:radial-gradient(130% 105% at 50% 48%,transparent 52%,rgba(3,3,3,.55) 100%); } /* Il lampo del proiettore a ogni cambio d'atto (lo accende cinema.js). */ #lampo{ position:fixed;inset:0;z-index:58;pointer-events:none;opacity:0; background:radial-gradient(80% 60% at 50% 40%,rgba(255,246,220,.5),transparent 70%); mix-blend-mode:screen; } /* L'otturatore: due lamelle che chiudono e riaprono sul punto d'arrivo. Decorativo: parte solo dal menu e non copre mai un'interazione. */ #otturatore{position:fixed;inset:0;z-index:96;pointer-events:none} #otturatore i{position:absolute;left:0;right:0;height:52%;background:#040404;transform:scaleY(0);will-change:transform} #otturatore i:first-child{top:0;transform-origin:top} #otturatore i:last-child{bottom:0;transform-origin:bottom} #otturatore.taglia i{animation:otturatore 1.05s cubic-bezier(.7,0,.25,1)} /* /servizi: il selettore e il calcolatore arrivano dal plugin gfd-servizi-v3, disegnati per il vecchio tema chiaro (fondo bianco, crema, marrone). Qui tornano al set — nero, oro, bianco. Stesse classi del plugin: il suo