/* =========================================================
WIDE — prodbywide.it · layout v2 "mirino"
Stessi token del sito; il layout prende in prestito il mirino
della camera (angoli, terzi, REC + timecode) e i titoli di coda.
========================================================= */
/* font ospitati sul sito (nessuna richiesta a Google Fonts) */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root {
--background: #050505;
--foreground: #f4f4f0;
--muted: #9a9a90;
--line: #ffffff13;
--line-strong: rgba(255, 255, 255, .22);
--accent: #fb6f98;
--surface: #101010;
--cream: #f1eee6;
--meta: rgba(241, 238, 230, 0.64);
--font-inter: Inter, "Inter Fallback", Arial, Helvetica, sans-serif;
--font-serif: "Instrument Serif", Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Menlo, monospace;
--font-pill: "42 Dot Sans", Arial, sans-serif;
--gutter: 1.25rem;
color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 2rem; } }
/* ---------- reset ---------- */
*, ::before, ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
html { background: var(--background); color: var(--foreground); scroll-behavior: smooth; line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scrollbar-color: #2a2a2a var(--background); }
body { background: var(--background); color: var(--foreground); min-height: 100vh; font-family: var(--font-inter); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; background: transparent; border-radius: 0; }
button { cursor: pointer; }
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; text-wrap: balance; }
/* ---------- tipografia ---------- */
.label { font-family: var(--font-mono); font-size: .72rem; font-weight: 800; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.label-row { display: flex; align-items: center; gap: .75rem; }
.system-status { font-family: var(--font-mono); font-size: 10px; line-height: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--cream); }
.work-meta { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--meta); }
.serif-title { font-family: var(--font-serif); font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: -1px; color: var(--cream); }
.mono { font-family: var(--font-mono); }
.display { font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -0.035em; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.fg { color: var(--foreground); }
.u-hover:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), 1820px); margin-inline: auto; }
.page-top { padding-top: 8rem; padding-bottom: clamp(4rem, 8vw, 8rem); }
.block { padding-block: clamp(4rem, 8vw, 8rem); }
.block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.block__title { font-size: clamp(3rem, 9vw, 8rem); }
.block__title--wrap { margin-bottom: 3rem; max-width: 18ch; }
.block__more { display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .5rem; color: var(--cream); white-space: nowrap; }
.block__more:hover { color: var(--accent); }
.block__more svg { width: 1rem; height: 1rem; }
/* angoli da mirino: 8 tratti disegnati con gradienti su un solo elemento */
.corners { --c: var(--cream); --l: 18px; --w: 1.5px; position: absolute; inset: .75rem; pointer-events: none; z-index: 2;
background:
linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat,
linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat,
linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat,
linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat,
linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
opacity: .55; transition: opacity .3s, inset .3s; }
.corners--lg { --l: 34px; --w: 2px; inset: 0; opacity: .9; }
.frame { position: relative; overflow: hidden; background: var(--surface); }
.frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
/* riquadro segnaposto quando manca l'immagine */
.signal { position: absolute; inset: 0; overflow: hidden; background: var(--surface); }
.signal__glow { position: absolute; left: -4rem; top: 2.5rem; width: 14rem; height: 14rem; border-radius: 999px; background: rgba(255, 255, 255, .08); filter: blur(64px); }
.signal__sheen { position: absolute; right: 0; bottom: 0; width: 66.666%; height: 66.666%; background: linear-gradient(135deg, transparent, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); }
.signal__word { position: absolute; left: 1.75rem; bottom: 1.5rem; font-size: clamp(1.75rem, 4vw, 3rem); color: rgba(244, 244, 240, .85); }
/* ---------- header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; }
.site-header__bar { display: flex; align-items: center; gap: .75rem; padding: 1.25rem var(--gutter) 0; }
.header-logo img { height: 2.75rem; width: auto; transition: transform .3s; }
.header-logo:hover img { transform: rotate(-8deg); }
.main-nav { display: none; align-items: center; gap: .25rem; margin-left: auto; }
.nav-pill { display: inline-flex; align-items: center; gap: .375rem; padding: 14px 24px; border-radius: 999px; font-family: var(--font-pill); font-size: 15px; font-weight: 600; line-height: 22px; text-transform: uppercase; color: var(--cream); background: rgba(244, 244, 240, .16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .18s, color .18s; }
.nav-pill:hover, .nav-pill.is-active { color: #050505; background: var(--cream); }
.nav-pill svg { width: 1rem; height: 1rem; transition: transform .2s; }
.lang { position: relative; display: none; }
.lang[data-open="true"] .nav-pill svg { transform: rotate(180deg); }
.lang__menu { position: absolute; right: 0; top: 100%; z-index: 50; margin-top: .5rem; min-width: 9rem; overflow: hidden; padding: .25rem; border-radius: 1rem; background: rgba(30, 30, 30, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.lang__menu[hidden] { display: none; }
.lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .625rem 1rem; border-radius: .75rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; text-transform: uppercase; transition: background .15s, color .15s; }
.lang__menu a[aria-current="true"] { background: rgba(244, 244, 240, .15); }
.lang__menu a:hover { background: var(--foreground); color: #000; }
.lang__menu a span:last-child { opacity: .6; }
.menu-btn { margin-left: auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: rgba(244, 244, 240, .14); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.menu-btn svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) {
.main-nav, .lang { display: flex; }
.menu-btn { display: none; }
}
/* menu mobile */
.mobile-menu { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; padding: 1.25rem; background: var(--background); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-20px); transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .35s ease, transform .35s ease; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.mobile-menu__top a { font-size: 1.25rem; font-weight: 900; text-transform: uppercase; }
.mobile-menu__close { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); }
.mobile-menu__close svg { width: 1.25rem; height: 1.25rem; }
.mobile-menu nav { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: .5rem; }
.mobile-menu nav a { display: flex; align-items: flex-end; justify-content: space-between; padding-block: 1.25rem; border-top: 1px solid var(--line); font-size: 3rem; font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -0.025em; }
.mobile-menu__foot { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.mobile-menu__foot .row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.mobile-menu__foot .langs { display: flex; gap: .75rem; text-transform: uppercase; }
.mobile-menu__foot .langs a[aria-current="true"] { color: var(--foreground); }
/* ---------- bottoni ---------- */
.btn { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.25rem; border: 1px solid; border-radius: 999px; font-size: .875rem; line-height: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; transition: color .15s, background-color .15s, border-color .15s; }
.btn svg { width: 1rem; height: 1rem; transition: transform .15s; }
.btn:hover svg { transform: translate(.125rem, -.125rem); }
.btn--accent { border-color: var(--accent); background: var(--accent); color: #000; }
.btn--accent:hover { border-color: var(--foreground); background: var(--foreground); }
.btn--ghost { border-color: var(--line-strong); color: var(--foreground); }
.btn--ghost:hover { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
.btn--wide { width: 100%; justify-content: space-between; padding: 1.25rem 1.75rem; font-size: clamp(1.5rem, 5vw, 3.75rem); line-height: 1; white-space: normal; letter-spacing: 0; }
.btn--wide svg { width: clamp(1.25rem, 3vw, 2.5rem); height: clamp(1.25rem, 3vw, 2.5rem); }
/* ---------- hero: il mirino ---------- */
.hero { padding: 5.5rem var(--gutter) 0; overflow: hidden; }
.viewfinder { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; min-height: max(560px, calc(100svh - 6.5rem)); padding: 1.5rem; }
.viewfinder__thirds { position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(90deg, transparent calc(33.333% - .5px), var(--line) calc(33.333% - .5px), var(--line) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), var(--line) calc(66.666% - .5px), var(--line) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
linear-gradient(180deg, transparent calc(33.333% - .5px), var(--line) calc(33.333% - .5px), var(--line) calc(33.333% + .5px), transparent calc(33.333% + .5px), transparent calc(66.666% - .5px), var(--line) calc(66.666% - .5px), var(--line) calc(66.666% + .5px), transparent calc(66.666% + .5px)); }
.hud { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; width: 100%; }
.hud__right { justify-self: end; text-align: right; }
.hud--bottom { grid-template-columns: 1fr 1fr; }
.hud__rec { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--accent); }
.hud__rec .system-status { margin-left: .25rem; }
.rec-dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px rgba(251, 111, 152, .7); animation: rec 1.2s steps(1) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.hud__tc { font-size: clamp(.8rem, 1.4vw, 1rem); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--cream); padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: .35rem; }
.hero__mark { position: relative; z-index: 1; align-self: center; width: min(46rem, 82%); }
.hero__mark h1 { position: relative; z-index: 10; }
.hero__mark h1 img { width: 100%; height: auto; }
.hero__tagline { position: relative; z-index: 3; margin-block: 1.5rem 2.5rem; font-family: var(--font-serif); font-size: clamp(1.875rem, 4.2vw, 3.5rem); line-height: .95; letter-spacing: .03em; text-align: center; }
@media (max-width: 640px) {
.hud--top { grid-template-columns: 1fr auto; }
.hud--top .hud__right { display: none; }
.viewfinder { padding: 1.25rem 1rem; min-height: 520px; }
}
/* saponetta in orbita (come sul sito attuale) */
.soap-orbit { position: absolute; left: 50%; top: 50%; pointer-events: none; width: 58rem; height: 23rem; transform: translate(-52%, -48%) rotate(-15deg); animation: soap-layer 14s linear infinite; }
.soap-orbit__item { position: absolute; top: 0; left: 0; width: 13rem; height: 9rem; filter: drop-shadow(rgba(251, 111, 152, .22) 0 24px 42px); offset-path: ellipse(49% 42% at 50% 50%); offset-anchor: center center; offset-rotate: 0deg; will-change: transform; animation: soap-orbit 14s linear infinite; }
.soap-orbit__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: soap-tilt 7s ease-in-out infinite; }
@keyframes soap-orbit { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@keyframes soap-layer { 0%, 49.9% { z-index: 0; } 50%, 100% { z-index: 20; } }
@keyframes soap-tilt { 0%, 100% { transform: rotate(-10deg) rotateX(0) rotateY(-7deg); } 50% { transform: rotate(8deg) rotateX(6deg) rotateY(8deg); } }
@media (max-width: 767px) {
.soap-orbit { width: 26rem; height: 13rem; }
.soap-orbit__item { width: 8rem; height: 5.5rem; }
}
/* ---------- griglia lavori ---------- */
.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3.5rem 1.25rem; }
.work-card { grid-column: span 12; min-width: 0; }
@media (min-width: 900px) {
.span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-7 { grid-column: span 7; }
.span-5 .work-card__frame { aspect-ratio: 4 / 5; }
}
.work-card__media { display: block; }
.work-card__frame { aspect-ratio: 4 / 3; max-width: 100%; }
.span-12 .work-card__frame { aspect-ratio: 16 / 9; }
@media (min-width: 900px) { .span-12 .work-card__frame { aspect-ratio: 21 / 9; } }
.work-card__media:hover .work-card__frame > img { transform: scale(1.04); }
.work-card__media:hover .corners { opacity: 1; inset: 1.1rem; }
.work-card__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.5rem; align-items: baseline; padding-top: 1.1rem; }
.work-card__info .serif-title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); min-width: 0; }
.work-card__info .serif-title a:hover { color: var(--accent); }
.work-card__info p.work-meta { grid-column: 1; }
.work-card__link { grid-row: 1; grid-column: 2; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.work-card__link:hover { color: var(--foreground); }
.work-card__link svg { width: .9rem; height: .9rem; }
@media (max-width: 520px) { .work-card__link { grid-row: auto; grid-column: 1; } }
.all-projects { margin-top: 4rem; }
/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding-block: 1.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.marquee__track { display: flex; width: max-content; white-space: nowrap; font-size: clamp(2.25rem, 6vw, 4.5rem); animation: marquee 28s linear infinite; }
.marquee__track span { margin-inline: 1.5rem; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* ---------- servizi ---------- */
.services { display: grid; grid-template-columns: minmax(0, 1fr); }
.service { display: grid; align-content: start; gap: 1.25rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.service__title { font-size: clamp(2.5rem, 4.5vw, 4.25rem); }
.service .work-meta { max-width: 32ch; }
@media (min-width: 768px) {
.services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service { grid-template-rows: auto auto 1fr; min-height: 22rem; padding: 2rem 1.75rem 2.5rem; border-bottom: 0; border-right: 1px solid var(--line); }
.service:first-child { padding-left: 0; }
.service:last-child { border-right: 0; }
.service .work-meta { align-self: end; }
}
/* ---------- CTA ---------- */
.cta { border-top: 1px solid var(--line); }
.cta__inner { width: min(100% - 2 * var(--gutter), 1820px); margin-inline: auto; display: grid; gap: 2rem; padding-block: clamp(4rem, 9vw, 9rem); }
.cta__title { font-size: clamp(3.5rem, 12vw, 11rem); line-height: .85; }
.cta__side { display: grid; gap: 1.25rem; justify-items: start; max-width: 34rem; }
.cta__text { font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.cta__mail { font-family: var(--font-serif); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; color: var(--cream); overflow-wrap: anywhere; }
@media (min-width: 1000px) {
.cta__side { grid-template-columns: minmax(0, 28rem) auto auto; align-items: center; gap: 2.5rem; max-width: none; width: 100%; padding-top: 2rem; border-top: 1px solid var(--line); }
.cta__mail { justify-self: end; }
}
/* ---------- footer: titoli di coda ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer__inner { display: grid; justify-items: center; gap: 2.25rem; padding: 4.5rem var(--gutter) 2.5rem; text-align: center; }
.site-footer__tag { font-family: var(--font-serif); font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1; color: var(--cream); }
.credits { display: grid; gap: .9rem; width: min(100%, 44rem); }
.credit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: baseline; }
.credit dt { text-align: right; font-family: var(--font-mono); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.credit dd { text-align: left; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.site-footer__nav a { padding: .5rem 1rem; border-radius: 999px; font-family: var(--font-pill); font-size: .875rem; font-weight: 600; text-transform: uppercase; color: var(--cream); background: rgba(244, 244, 240, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .18s, color .18s; }
.site-footer__nav a:hover { color: #050505; background: var(--cream); }
.site-footer__logo img { width: 120px; height: auto; }
@media (max-width: 560px) {
.credit { grid-template-columns: 1fr; gap: .25rem; }
.credit dt, .credit dd { text-align: center; }
}
/* ---------- pagina Work ---------- */
.work-hero { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 3.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.work-hero__title { font-size: clamp(5rem, 22vw, 20rem); line-height: .8; }
.work-hero__intro { display: grid; gap: 1.25rem; max-width: 26rem; }
.work-hero__intro .display { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: .95; }
@media (min-width: 900px) { .work-hero { grid-template-columns: 1fr auto; } .work-hero__intro { padding-bottom: 1.5rem; } }
/* ---------- pagina About ---------- */
.about-title { margin-top: 1.25rem; font-size: clamp(3.5rem, 11vw, 10rem); line-height: .82; max-width: 12ch; }
.about-intro { display: grid; gap: 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.about-intro__lead { font-family: var(--font-serif); font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.1; color: var(--cream); max-width: 30ch; }
.about-intro__how { display: grid; gap: .75rem; align-content: start; max-width: 28rem; }
.about-intro__how p:last-child { font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
@media (min-width: 900px) { .about-intro { grid-template-columns: 1.5fr 1fr; } }
.split { display: grid; gap: 2rem; padding-block: 2rem clamp(4rem, 8vw, 8rem); }
.split__media { aspect-ratio: 4 / 3; max-width: 100%; }
.split__text { display: grid; gap: 1.25rem; align-content: end; min-width: 0; }
.split__big { font-size: clamp(2.25rem, 5.5vw, 5rem); }
.split__text .muted { max-width: 42rem; line-height: 1.6; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; } }
.team { display: grid; gap: 2.5rem 1.25rem; }
.member { display: grid; gap: .6rem; }
.member__photo { aspect-ratio: 4 / 5; margin-bottom: .6rem; max-width: 100%; }
.member__name { font-size: 1.875rem; }
.member .muted { max-width: 36ch; }
@media (min-width: 768px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------- pagina Contact ---------- */
.contact-title { margin-top: 1.25rem; margin-bottom: 3rem; font-size: clamp(4rem, 14vw, 12rem); line-height: .82; }
.contact-grid { display: grid; gap: 3rem; }
.slate { display: grid; border: 1px solid var(--line-strong); }
.slate > div { display: grid; gap: .6rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line-strong); min-width: 0; }
.slate > div:last-child { border-bottom: 0; }
.slate dd { display: grid; gap: .25rem; font-size: 1.125rem; overflow-wrap: anywhere; }
.slate dd strong { font-size: 1.5rem; line-height: 1.2; }
.slate--grid { grid-template-columns: 1fr 1fr; }
.slate--grid > div { border-right: 1px solid var(--line-strong); }
.slate--grid > div:nth-child(2n) { border-right: 0; }
.slate--grid > div:nth-last-child(-n+2) { border-bottom: 0; }
.slate--grid dd { font-family: var(--font-mono); font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.contact-intro { margin-bottom: 2rem; max-width: 42rem; font-size: 1.25rem; line-height: 1.6; color: var(--muted); }
.contact-form { display: grid; gap: 1.25rem; }
.contact-form .two { display: grid; gap: 1.25rem; }
.contact-form label { display: block; margin-bottom: .5rem; color: var(--muted); }
.contact-form input, .contact-form textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line-strong); background: var(--surface); color: var(--foreground); outline: none; caret-color: var(--accent); transition: border-color .15s; }
.contact-form textarea { resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); }
.contact-form .btn { width: 100%; }
@media (min-width: 900px) {
.contact-grid { grid-template-columns: .8fr 1.2fr; align-items: start; }
.contact-form .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-form .btn { width: auto; justify-self: start; }
}
/* ---------- scheda progetto ---------- */
.back-link { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 2.5rem; color: var(--muted); }
.back-link:hover { color: var(--foreground); }
.back-link svg, .live-link svg { width: 1rem; height: 1rem; }
.project-title { margin-top: 1.25rem; font-size: clamp(3rem, 9vw, 9rem); line-height: .86; max-width: 16ch; }
.project-head { display: grid; gap: 2rem; margin-top: 2.5rem; }
.project-head__lead { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.15; color: var(--cream); max-width: 30ch; }
.live-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.project-media { margin-top: 3rem; aspect-ratio: 16 / 9; max-width: 100%; }
.project-body { max-width: 56rem; margin: 3.5rem auto 0; font-size: clamp(1.375rem, 2.6vw, 2.25rem); line-height: 1.35; }
@media (min-width: 900px) { .project-head { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (max-width: 480px) { .slate--grid { grid-template-columns: 1fr; } .slate--grid > div { border-right: 0; } .slate--grid > div:nth-last-child(2) { border-bottom: 1px solid var(--line-strong); } }
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
.soap-orbit, .soap-orbit__item, .soap-orbit__item img, .rec-dot { animation: none !important; }
}
/* =========================================================
v2.1 — "più figo": messa a fuoco d'ingresso, grana pellicola,
bande cinemascope sui lavori, fascia rosa, servizi a contrasto
========================================================= */
/* grana pellicola su tutta la pagina */
body::after { content: ""; position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .07;
background-image: url("data:image/svg+xml;utf8,");
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
/* ingresso dell'hero: il fuoco si stringe sul logo, il mirino si chiude */
.hero__mark h1 img { animation: rackfocus 1.6s cubic-bezier(.16, .84, .3, 1) .15s both; }
@keyframes rackfocus { from { filter: blur(22px); opacity: .3; transform: scale(1.08); } to { filter: blur(0); opacity: 1; transform: none; } }
.viewfinder > .corners--lg { animation: frame-in 1.2s cubic-bezier(.16, .84, .3, 1) both; }
@keyframes frame-in { from { inset: 2.5rem; opacity: 0; } to { inset: 0; opacity: .9; } }
.hero__tagline { animation: rise 1s cubic-bezier(.16, .84, .3, 1) .9s both; }
.hud { animation: rise .8s cubic-bezier(.16, .84, .3, 1) .6s both; }
@keyframes rise { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__mark { width: min(60rem, 88%); }
/* lavori: al passaggio entrano le bande nere del cinemascope */
.work-card__media { position: relative; }
.work-card__frame::before, .work-card__frame::after { content: ""; position: absolute; left: 0; right: 0; z-index: 3; height: 0; transition: height .6s cubic-bezier(.16, .84, .3, 1); }
.work-card__frame::before { top: 0; background: var(--background); }
.work-card__frame::after { bottom: 0; background: var(--background); }
.work-card__media:hover .work-card__frame::before, .work-card__media:hover .work-card__frame::after { height: 12%; }
.work-card__media:hover .corners { --c: var(--accent); }
/* la fascia che scorre diventa rosa */
.marquee { background: var(--accent); color: #050505; border: 0; }
.marquee__track span::after { content: "●"; margin-left: 3rem; font-size: .35em; vertical-align: middle; }
/* servizi: al passaggio la colonna si accende */
.service { position: relative; transition: background .35s, color .35s; }
@media (min-width: 768px) {
.service, .service:first-child { padding: 2rem 1.75rem 2.5rem; }
.service:hover { background: var(--cream); }
.service:hover .serif-title, .service:hover .work-meta { color: #050505; }
}
/* CTA: il titolo occupa tutta la larghezza */
.cta__title { font-size: clamp(3.5rem, 14.5vw, 15rem); }
@media (prefers-reduced-motion: reduce) {
body::after, .hero__mark h1 img, .viewfinder > .corners--lg, .hero__tagline, .hud { animation: none !important; }
}
.work-card__frame .corners { z-index: 4; }
.site-header { background: linear-gradient(180deg, rgba(5, 5, 5, .92), rgba(5, 5, 5, .6) 60%, transparent); padding-bottom: 1rem; }
/* =========================================================
v2.2 — meno "AI": niente occhielli e numerini decorativi,
titoli di sezione in serif, barre colore al posto dei finti riquadri
========================================================= */
.display.block__title { font-family: var(--font-serif); font-weight: 400; text-transform: none; letter-spacing: -0.02em; line-height: .95; font-size: clamp(3rem, 7vw, 6.5rem); color: var(--cream); max-width: 20ch; }
.sep { margin-inline: .35em; color: var(--muted); }
/* angoli del mirino: solo nell'hero e al passaggio sui lavori */
.corners { opacity: 0; }
.corners--lg { opacity: .9; }
.work-card__media:hover .corners { opacity: 1; }
/* barre colore SMPTE come segnaposto (sostituite dalla cover quando c'è) */
.bars { position: absolute; inset: 0; display: grid; grid-template-rows: 67fr 8fr 25fr; filter: saturate(.8) brightness(.82); }
.bars span { display: block; }
.bars__top { background: linear-gradient(90deg, #c0c0c0 0 14.28%, #c0c000 0 28.57%, #00c0c0 0 42.85%, #00c000 0 57.14%, #c000c0 0 71.42%, #c00000 0 85.71%, #0000c0 0); }
.bars__mid { background: linear-gradient(90deg, #0000c0 0 14.28%, #131313 0 28.57%, #c000c0 0 42.85%, #131313 0 57.14%, #00c0c0 0 71.42%, #131313 0 85.71%, #c0c0c0 0); }
.bars__low { background: linear-gradient(90deg, #00214c 0 17.85%, #f4f4f0 0 35.7%, #32006a 0 53.55%, #131313 0 76.18%, #090909 0 80.94%, #131313 0 85.7%, #1d1d1d 0 90.46%, #131313 0); }
.work-card__media:hover .bars { filter: saturate(1) brightness(.95); }
.bars { transition: filter .5s; }
body::after { opacity: .045; }
.about-intro__how p { font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.service { gap: 1.5rem; }
.bars { filter: saturate(.35) brightness(.42); }
.work-card__media:hover .bars { filter: saturate(.9) brightness(.85); }
.split__big { font-size: clamp(2.25rem, 4.4vw, 4.25rem); overflow-wrap: anywhere; }
/* =========================================================
v2.3 — timecode che segue lo scroll, messa a fuoco dei titoli
========================================================= */
/* timecode flottante */
.tc-float { position: fixed; right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; gap: .55rem; padding: .45rem .75rem; border: 1px solid var(--line-strong); border-radius: .4rem; background: rgba(5, 5, 5, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--cream);
opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .35s, transform .35s, color .2s, border-color .2s; }
.tc-float.is-on { opacity: 1; transform: none; }
.tc-float .rec-dot { width: .45rem; height: .45rem; }
.tc-float.is-scrub { color: var(--accent); border-color: rgba(251, 111, 152, .5); }
/* messa a fuoco dei titoli */
.focus-pull { filter: blur(10px); opacity: .45; transform: scale(1.015); transition: filter 1.1s cubic-bezier(.16, .84, .3, 1), opacity 1.1s cubic-bezier(.16, .84, .3, 1), transform 1.1s cubic-bezier(.16, .84, .3, 1); }
.focus-pull.is-sharp { filter: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.focus-pull { filter: none; opacity: 1; transform: none; }
}
/* saponetta: orbita orizzontale e regolare, inclinata solo in profondità
(più grande e luminosa davanti, più piccola e scura dietro). Niente oscillazioni:
la saponetta resta sempre allo stesso angolo. Il cambio dietro/davanti avviene
agli estremi laterali (0% e 50%), fuori dalla scritta: misurato sui pixel. */
.soap-orbit { width: 130%; height: auto; aspect-ratio: 58 / 17; transform: translate(-50%, -50%); animation: soap-layer-safe 14s linear infinite; }
.soap-orbit__item { width: 14.5%; height: auto; aspect-ratio: 13 / 9; rotate: -8deg; animation: soap-orbit 14s linear infinite, soap-depth 14s infinite; }
.soap-orbit__item img { animation: none; transform: none; }
@keyframes soap-layer-safe { 0%, 49.9% { z-index: 20; } 50%, 100% { z-index: 0; } }
@keyframes soap-depth {
0% { scale: 1; animation-timing-function: ease-in-out; }
25% { scale: 1.14; animation-timing-function: ease-in-out; }
50% { scale: 1; animation-timing-function: ease-in-out; }
75% { scale: .82; animation-timing-function: ease-in-out; }
100% { scale: 1; }
}
@media (max-width: 767px) {
.soap-orbit { width: 130%; height: auto; }
.soap-orbit__item { width: 14.5%; height: auto; }
}
/* il logo lascia spazio all'orbita dentro il mirino */
.hero__mark { width: min(56rem, 68%); }
/* ---------- CTA con la scena 3D (cinepresa) ---------- */
.cta { position: relative; overflow: hidden; }
.cta__stage { position: relative; height: min(92vw, 560px); }
.cta__stage canvas { display: block; width: 100% !important; height: 100% !important; }
.cta__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 70%, var(--background)); }
.cta__inner { position: relative; z-index: 2; }
@media (min-width: 1000px) {
.cta { min-height: 46rem; }
.cta__stage { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; height: auto; }
.cta__stage::after { background: linear-gradient(90deg, var(--background) 0%, rgba(5, 5, 5, 0) 38%), linear-gradient(0deg, var(--background) 0%, rgba(5, 5, 5, 0) 30%); }
.cta__inner { pointer-events: none; }
.cta__inner a, .cta__inner .label-row { pointer-events: auto; }
.cta__title { text-shadow: 0 0 40px rgba(5, 5, 5, .5); }
}
@media (min-width: 1000px) {
.cta__stage { width: 56%; }
.cta__title { font-size: clamp(4rem, 8.6vw, 9.5rem); max-width: 7.5ch; }
.cta__side { max-width: 44%; grid-template-columns: 1fr; gap: 1.25rem; border-top: 0; padding-top: 0; }
.cta__mail { justify-self: start; }
}
/* ---------- Contatti: il set virtuale ---------- */
.set { padding-bottom: clamp(4rem, 8vw, 8rem); }
.set__text { max-width: 46rem; margin-bottom: 2rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.set3d { display: grid; border: 1px solid var(--line-strong); background: #060606; min-height: 20rem; }
.set3d__view { position: relative; height: min(78vw, 640px); overflow: hidden; touch-action: pan-y; }
.set3d__view canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.set3d__view canvas:active { cursor: grabbing; }
.set3d__hint { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; color: rgba(241, 238, 230, .55); pointer-events: none; }
.set3d__panel { display: grid; align-content: start; gap: 1.25rem; padding: 1.25rem; border-top: 1px solid var(--line-strong); background: var(--surface); }
.set3d__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; padding: .25rem; border-radius: 999px; background: rgba(244, 244, 240, .06); }
.set3d__tabs button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .5rem; border-radius: 999px; font-family: var(--font-pill); font-size: .8rem; font-weight: 600; text-transform: uppercase; color: var(--cream); transition: background .15s, color .15s; }
.set3d__tabs button[aria-selected="true"] { background: var(--cream); color: #050505; }
.set3d__tabs i { width: .6rem; height: .6rem; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.set3d__group { display: grid; gap: .55rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.set3d__group:first-of-type { border-top: 0; padding-top: 0; }
.set3d__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .35rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.set3d__row output { color: var(--cream); font-variant-numeric: tabular-nums; }
.set3d input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; }
.set3d input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--line-strong); }
.set3d input[type="range"]::-moz-range-track { height: 2px; background: var(--line-strong); }
.set3d input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(251, 111, 152, .18); }
.set3d input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent); }
.set3d__switch { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.set3d__switch input { -webkit-appearance: none; appearance: none; width: 34px; height: 18px; border-radius: 99px; background: rgba(244, 244, 240, .16); position: relative; cursor: pointer; transition: background .2s; }
.set3d__switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); transition: transform .2s; }
.set3d__switch input:checked { background: var(--accent); }
.set3d__switch input:checked::after { transform: translateX(16px); }
.set3d__gels { display: flex; flex-wrap: wrap; gap: .45rem; }
.set3d__gels button { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--g); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); transition: transform .15s; }
.set3d__gels button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--cream); }
.set3d__gels button:hover { transform: scale(1.1); }
.set3d__presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.set3d__presets button { padding: .45rem .85rem; border-radius: 999px; font-family: var(--font-pill); font-size: .78rem; font-weight: 600; text-transform: uppercase; color: var(--cream); background: rgba(244, 244, 240, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .15s, color .15s; }
.set3d__presets button:hover { background: var(--cream); color: #050505; }
@media (min-width: 1000px) {
.set3d { grid-template-columns: minmax(0, 1fr) 21rem; }
.set3d__view { height: 680px; }
.set3d__panel { border-top: 0; border-left: 1px solid var(--line-strong); max-height: 680px; overflow: auto; }
}
/* prestazioni: niente blur di sfondo sugli elementi fissi sopra le scene 3D, saponetta su layer GPU */
.soap-orbit__item { will-change: offset-distance, scale; }
.tc-float { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 5, 5, .85); }
/* =========================================================
Home v3 — saponetta vera, logo disegnato, footer piatto,
fascia più lenta, video da YouTube
========================================================= */
/* logo in alto a sinistra: la saponetta disegnata */
.header-logo img { height: 3.4rem; width: auto; }
/* saponetta: l'immagine è già inclinata, quindi niente rotazione aggiuntiva */
.soap-orbit__item { aspect-ratio: 520 / 428; rotate: 0deg; filter: drop-shadow(rgba(0, 0, 0, .45) 0 18px 28px); }
.soap-orbit__item img { object-fit: contain; }
/* fascia rosa dei servizi più lenta */
.marquee__track { animation-duration: 70s; }
/* footer piatto: scritta | info centrate | link + logo */
.site-footer__inner { display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 1.75rem; padding: 2.25rem var(--gutter) 1.5rem; text-align: center; width: min(100%, 1820px); margin-inline: auto; }
.site-footer__tag img { width: 190px; height: auto; display: block; }
.credits { display: grid; gap: .35rem; width: auto; justify-items: center; }
.credit { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .6rem; margin: 0; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.credit > span { font-family: var(--font-mono); font-size: .66rem; font-weight: 800; letter-spacing: .14em; color: var(--muted); }
.site-footer__end { display: grid; justify-items: center; gap: 1rem; }
.site-footer__logo { width: 96px; height: auto; }
.site-footer__copy { padding: .9rem var(--gutter) 1.1rem; border-top: 1px solid var(--line); text-align: center; }
@media (min-width: 900px) {
.site-footer__inner { grid-template-columns: 1fr auto 1fr; gap: 2rem; padding-block: 2rem 1.75rem; }
.site-footer__tag { justify-self: start; }
.site-footer__end { justify-self: end; justify-items: end; }
}
/* player YouTube: copertina + play, il video si carica solo al clic */
.yt { cursor: pointer; }
.yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, 0) 55%, rgba(5, 5, 5, .45)); pointer-events: none; }
.yt__play { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; transform: translate(-50%, -50%); background: var(--accent); color: #050505; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); transition: transform .25s cubic-bezier(.16, .84, .3, 1), background .2s; }
.yt__play svg { width: 2rem; height: 2rem; margin-left: .2rem; }
.yt:hover .yt__play { transform: translate(-50%, -50%) scale(1.08); background: var(--cream); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
.yt.is-playing::after, .yt.is-playing .yt__play, .yt.is-playing .corners { display: none; }
/* footer: link sotto le info, logo allineato al centro della fascia */
.site-footer__mid { display: grid; justify-items: center; gap: 1.1rem; }
.site-footer__logo { width: 110px; }
@media (min-width: 900px) {
.site-footer__logo { justify-self: end; align-self: center; width: 150px; }
}
/* =========================================================
Home v4 — reel dei progetti guidato dallo scorrimento
========================================================= */
/* senza JS (o con "riduci movimento"): progetti uno sotto l'altro */
.reel { padding: clamp(3rem, 6vw, 6rem) var(--gutter) 0; }
.reel__stage { display: grid; gap: 3rem; }
.reel__slide { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.reel__media { position: absolute; inset: 0; }
.reel__media > img { width: 100%; height: 100%; object-fit: cover; }
.reel__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.reel__cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .4rem; padding: 2.5rem 1.5rem 1.25rem; background: linear-gradient(180deg, transparent, rgba(5, 5, 5, .8)); }
.reel__hud { display: none; }
.reel__outro { margin-top: 3rem; }
/* con lo scorrimento attivo: sezione bloccata a tutto schermo */
.reel.is-on { height: calc((var(--n) + 1.8) * 100svh); padding: 0; }
.reel.is-on .reel__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.reel.is-on .reel__stage { position: absolute; inset: 0; display: block; overflow: hidden; background: #000; transform-origin: 50% 42%; will-change: transform; }
.reel.is-on .reel__slide { position: absolute; inset: 0; aspect-ratio: auto; background: #000; clip-path: inset(50% 50%); will-change: clip-path; }
.reel.is-on .reel__media { will-change: transform; }
.reel.is-on .reel__cap { display: none; }
.reel.is-on .reel__hud { position: absolute; inset: 0; z-index: 5; display: block; pointer-events: none; will-change: opacity; }
.reel__hud::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)); }
.reel__side { position: absolute; top: 50%; display: grid; color: var(--cream); }
.reel__side span { grid-area: 1 / 1; opacity: 0; transition: none; white-space: nowrap; }
.reel__side--l { left: calc(var(--gutter) + 1rem); }
.reel__side--r { right: calc(var(--gutter) + 1rem); text-align: right; justify-items: end; }
.reel__count { position: absolute; top: 6.5rem; right: calc(var(--gutter) + 1rem); font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: rgba(241, 238, 230, .6); font-variant-numeric: tabular-nums; }
.reel__count span { color: var(--cream); }
.reel__titles { --lh: clamp(2.1rem, 3.4vw, 3.1rem); position: absolute; left: 50%; bottom: 5svh; width: min(90vw, 44rem); height: calc(var(--lh) * 3); transform: translateX(-50%); overflow: hidden; text-align: center;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.reel__titles ul { margin-top: var(--lh); will-change: transform; }
.reel__titles li { height: var(--lh); line-height: var(--lh); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(1.1rem, 2.1vw, 1.9rem); color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel__titles a { pointer-events: auto; }
.reel.is-on .reel__outro { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 4svh; z-index: 6; margin: 0; will-change: transform, opacity; }
.reel.is-on .reel__outro .btn--wide { background: var(--background); }
@media (max-width: 640px) {
.reel__side { top: auto; bottom: calc(5svh + 7.5rem); font-size: .62rem; }
.reel__count { top: 5.5rem; }
}
/* fascia: inclinazione e velocità legate allo scorrimento */
.marquee__track { will-change: transform; }
.marquee { will-change: transform; }
/* servizi: entrano in sequenza */
.js [data-stagger] > * { opacity: .15; transform: translateY(36px); transition: opacity .9s cubic-bezier(.16, .84, .3, 1), transform .9s cubic-bezier(.16, .84, .3, 1); }
.js [data-stagger] > *:nth-child(2) { transition-delay: .12s; }
.js [data-stagger] > *:nth-child(3) { transition-delay: .24s; }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js [data-stagger] > * { opacity: 1; transform: none; }
}
@media (max-width: 640px) { .reel__titles { bottom: calc(5svh + 2.75rem); } .reel__side { bottom: calc(5svh + 10rem); } }
/* footer: info più piccole */
.credits { gap: .2rem; }
.credit { font-size: .76rem; gap: .5rem; }
.credit > span { font-size: .58rem; }
/* servizi: niente linea tra il titolo "Services" e le colonne */
.block__head:has(+ .services) { border-bottom: 0; padding-bottom: 0; }
/* All projects: al passaggio diventa in negativo (fondo crema, scritta nera) */
.reel .reel__outro .btn--wide:hover, .all-projects.btn--ghost:hover { background: var(--cream); border-color: var(--cream); color: #050505; }
/* =========================================================
Pagina Work — copia della scena di Panorama (misure originali)
========================================================= */
.tunnel { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #000; }
.pano { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.pano__grid { position: absolute; left: -792.5px; top: -435px; width: 1585px; height: 870px; opacity: .5; pointer-events: none; }
.pano__wall { position: absolute; overflow: hidden; transform-origin: 50% 50%; }
.tile { position: absolute; display: block; will-change: transform; }
.tile__media { position: absolute; inset: 0; overflow: hidden; background: #0b0b0b; }
.tile__media > img { width: 100%; height: 100%; object-fit: cover; }
.tile__media .bars { filter: saturate(.55) brightness(.6); }
.tile__media iframe { position: absolute; left: 50%; top: 50%; width: 140%; height: 140%; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
.tile:hover .tile__media, .tile:focus-visible .tile__media { box-shadow: inset 0 0 0 2px var(--accent); }
.tile:hover .tile__media .bars { filter: none; }
.tunnel__center { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; justify-items: center; gap: .6rem; width: 423px; max-width: 90vw; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.tunnel__title { font-size: 9.6rem; line-height: .78; letter-spacing: -0.04em; color: #fff; }
.tunnel__sub { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.1; color: var(--cream); }
.tunnel__btn { position: absolute; left: 50%; bottom: calc(48px + env(safe-area-inset-bottom, 0px)); z-index: 4; transform: translateX(-50%); height: 45px; padding: 0 30px; border-radius: 32px; background: #fff; color: #000; font-family: "Bebas Neue", var(--font-pill); font-size: 24px; font-weight: 400; line-height: 45px; transition: background .2s; }
.tunnel__btn:hover { background: var(--accent); }
@media (max-width: 640px) { .tunnel__title { font-size: 6.5rem; } .tunnel__sub { font-size: 1.2rem; } }
body:has(.tunnel) .tc-float { display: none; }
/* elenco progetti a tutto schermo */
.plist { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 6rem var(--gutter) 7rem; background: var(--cream); color: #050505; overflow-y: auto; animation: plist-in .35s cubic-bezier(.16, .84, .3, 1); }
.plist[hidden] { display: none; }
@keyframes plist-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.plist__list { display: grid; gap: .1rem; text-align: center; }
.plist__list a { display: grid; justify-items: center; gap: .1rem; padding: .25rem 0; transition: opacity .2s; }
.plist__title { font-weight: 900; text-transform: uppercase; letter-spacing: -0.035em; line-height: .95; font-size: clamp(2rem, 5.4vw, 4.6rem); }
.plist__meta { color: rgba(5, 5, 5, .55); }
.plist__list:hover a { opacity: .25; }
.plist__list a:hover, .plist__list a:focus-visible { opacity: 1; }
.plist__close { position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: .85rem 1.6rem; border-radius: 999px; background: #050505; color: var(--cream); font-family: var(--font-pill); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.plist__close:hover { background: var(--accent); color: #050505; }
.plist__thumb { position: fixed; left: 0; top: 0; width: 240px; aspect-ratio: 16 / 9; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .2s; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.plist__thumb.is-on { opacity: 1; }
body:has(.tunnel) .tc-float { display: none; }
.plist { place-items: unset; align-content: safe center; justify-content: center; padding-bottom: 8rem; }
.plist__title { font-size: clamp(1.5rem, 3.5vw, 3.25rem); }
.plist__list { gap: .45rem; }
.plist__close { height: 45px; padding: 0 30px; border-radius: 32px; font-family: "Bebas Neue", var(--font-pill); font-size: 24px; font-weight: 400; line-height: 45px; letter-spacing: 0; text-transform: none; }
.tunnel__title { font-size: 8.65rem; }
@media (max-width: 640px) { .tunnel__title { font-size: 6rem; } }
/* Work: ingresso dal nero (gli stati iniziali tengono tutto nascosto finché parte l'animazione) */
.tunnel__curtain { position: absolute; inset: 0; z-index: 8; background: #000; pointer-events: none; opacity: 0; }
.tunnel.is-intro .tunnel__curtain { opacity: 1; }
.tunnel.is-intro .tile, .tunnel.is-intro .pano__grid, .tunnel.is-intro .tunnel__title, .tunnel.is-intro .tunnel__sub, .tunnel.is-intro .tunnel__btn { opacity: 0; }
/* se lo script non parte, dopo 3 secondi si vede comunque tutto */
.tunnel.is-intro .tunnel__curtain { animation: tunnel-safe 0s 3s forwards; }
.tunnel.is-intro .tile, .tunnel.is-intro .tunnel__title, .tunnel.is-intro .tunnel__sub, .tunnel.is-intro .tunnel__btn { animation: tunnel-show 0s 3s forwards; }
@keyframes tunnel-safe { to { opacity: 0; } }
@keyframes tunnel-show { to { opacity: 1; } }
.tunnel .tile { backface-visibility: hidden; }
/* pulsante Projects e Chiudi con il font dei pulsanti del sito */
.tunnel__btn, .plist__close { height: 48px; padding: 0 28px; border-radius: 999px; font-family: var(--font-pill); font-size: 15px; font-weight: 600; line-height: 48px; letter-spacing: normal; text-transform: uppercase; }
/* sezione contatti con la cinepresa: più piccola e raccolta */
.cta__inner { gap: 1.5rem; padding-block: clamp(3rem, 6vw, 5.5rem); }
.cta__title { font-size: clamp(3rem, 11vw, 5rem); }
.cta__text { font-size: 1rem; }
.cta__mail { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.cta .btn { margin-top: 0; }
.cta__stage { height: min(72vw, 400px); }
@media (min-width: 1000px) {
.cta { min-height: 34rem; }
.cta__stage { width: 50%; }
.cta__title { font-size: clamp(4rem, 6.4vw, 7rem); }
.cta__side { gap: 1rem; max-width: 40%; }
}
@media (min-width: 1000px) {
.cta { display: grid; align-items: center; min-height: 30rem; }
.cta__inner { width: min(100% - 2 * var(--gutter), 1820px); }
}
/* contatti: stessa fascia bassa, ma titolo e cinepresa più grandi */
.cta__text { font-size: 1.1rem; }
.cta__mail { font-size: clamp(1.6rem, 2.7vw, 2.3rem); }
.cta__inner { gap: 1.25rem; padding-block: clamp(2.5rem, 4.5vw, 4rem); }
@media (min-width: 1000px) {
.cta__title { font-size: clamp(4.5rem, 7.8vw, 8.75rem); }
.cta__stage { width: 56%; }
.cta__side { max-width: 42%; gap: .9rem; }
}
/* Work senza intestazione: Menu e Projects in alto al centro, logo piccolo sopra "Work" */
.tunnel__bar { position: absolute; left: 50%; top: calc(1.5rem + env(safe-area-inset-top, 0px)); z-index: 4; display: flex; gap: .5rem; transform: translateX(-50%); }
.tunnel__bar .tunnel__btn { position: static; transform: none; }
.tunnel__logo { display: block; margin-bottom: .9rem; pointer-events: auto; }
.tunnel__logo img { height: 2.6rem; width: auto; transition: transform .3s; }
.tunnel__logo:hover img { transform: rotate(-8deg); }
.tunnel.is-intro .tunnel__bar, .tunnel.is-intro .tunnel__logo { opacity: 0; animation: tunnel-show 0s 3s forwards; }
.pano__grid { opacity: 1; max-width: none; }
/* menu del sito: stessa tenda dell'elenco progetti, con la scelta lingua */
.wmenu .plist__title { font-size: clamp(2.25rem, 6vw, 5rem); }
.wmenu .plist__list a[aria-current] { color: var(--accent); }
.wmenu__langs { position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: .4rem; transform: translateX(-50%); }
.wmenu__lang { height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(5, 5, 5, .25); font-family: var(--font-pill); font-size: 14px; font-weight: 600; line-height: 38px; transition: background .2s, color .2s; }
.wmenu__lang:hover { border-color: #050505; }
.wmenu__lang.is-active { background: #050505; color: var(--cream); border-color: #050505; }
/* Work: Menu in alto al centro che si apre a bolle, Projects in basso al centro */
.wnav { position: absolute; left: 50%; top: calc(1.5rem + env(safe-area-inset-top, 0px)); z-index: 5; transform: translateX(-50%); }
.wnav__toggle { position: relative; z-index: 1; color: #050505; background: #fff; }
.wnav__toggle:hover, .wnav.is-open .wnav__toggle { color: #050505; background: var(--cream); }
.wnav__side { position: absolute; top: 0; display: flex; gap: .5rem; }
.wnav__side--left { right: calc(100% + .5rem); }
.wnav__side--right { left: calc(100% + .5rem); }
.wnav__item { opacity: 0; pointer-events: none; white-space: nowrap; }
.wnav.is-open .wnav__item { pointer-events: auto; }
.tunnel.is-intro .wnav { opacity: 0; animation: tunnel-show 0s 3s forwards; }
@media (max-width: 640px) {
.wnav .nav-pill { padding: 11px 15px; font-size: 13px; }
.wnav__side { gap: .35rem; }
.wnav__side--left { right: calc(100% + .35rem); }
.wnav__side--right { left: calc(100% + .35rem); }
}
.wnav { transition: margin-left .45s cubic-bezier(.16, 1, .3, 1); }
/* elenco progetti: fondo nero, testi bianchi */
.plist { background: #050505; color: #fff; }
.plist__meta { color: rgba(255, 255, 255, .5); }
.plist__close { background: #fff; color: #050505; }
.plist__close:hover { background: var(--accent); color: #050505; }
/* griglia più sottile e leggera, fino ai bordi */
.pano__grid { overflow: visible; opacity: .22; }
@media (max-width: 640px) {
.wnav .nav-pill { padding: 10px 12px; font-size: 12px; line-height: 20px; }
.wnav__side { gap: .3rem; }
.wnav__side--left { right: calc(100% + .3rem); }
.wnav__side--right { left: calc(100% + .3rem); }
}
/* contatti: il treppiede arriva più in basso (sfumatura in fondo più corta) */
.cta__stage::after { background: linear-gradient(180deg, transparent 84%, var(--background)); }
@media (min-width: 1000px) {
.cta__stage::after { background: linear-gradient(90deg, var(--background) 0%, rgba(5, 5, 5, 0) 32%), linear-gradient(0deg, var(--background) 0%, rgba(5, 5, 5, 0) 13%); }
}
/* contatti: fascia leggermente più alta */
.cta__stage { height: min(80vw, 440px); }
@media (min-width: 1000px) { .cta { min-height: 33.5rem; } .cta__stage { height: auto; } }
/* =========================================================
Footer minimal (rifatto da zero)
========================================================= */
.foot { width: min(100% - 2 * var(--gutter), 1820px); margin-inline: auto; padding: 3.25rem 0 1.5rem; border-top: 1px solid var(--line); }
.foot__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.foot__id { display: grid; gap: .55rem; }
.foot__mail { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; color: var(--cream); transition: color .2s; }
.foot__mail:hover { color: var(--accent); }
.foot__meta { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: rgba(244, 244, 240, .5); }
.foot__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(251, 111, 152, .6); animation: foot-pulse 2.4s infinite; }
@keyframes foot-pulse { 70% { box-shadow: 0 0 0 .4rem rgba(251, 111, 152, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 111, 152, 0); } }
.foot__sep { opacity: .5; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; }
.foot__nav a { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-pill); font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: rgba(244, 244, 240, .7); transition: color .2s; }
.foot__nav a:hover { color: var(--cream); }
.foot__nav svg { width: .8rem; height: .8rem; }
.foot__row--base { align-items: center; margin-top: 2.75rem; padding-top: 1.1rem; border-top: 1px solid rgba(244, 244, 240, .07); font-size: .72rem; color: rgba(244, 244, 240, .38); }
.foot__top { color: rgba(244, 244, 240, .5); transition: color .2s; }
.foot__top:hover { color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .foot__dot { animation: none; } }
@media (max-width: 640px) { .foot { padding-top: 2.5rem; } .foot__row--base { margin-top: 2rem; } }
.foot__id { gap: .7rem; }
.foot__brand { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-pill); font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--cream); }
.foot__brand img { height: 2.1rem; width: auto; transition: transform .3s; }
.foot__brand:hover img { transform: rotate(-8deg); }
.foot { padding-top: 2.5rem; }
.foot__row--base { margin-top: 2.25rem; }
/* contatti: il titolo lungo in italiano non deve uscire dallo schermo sui telefoni */
@media (max-width: 640px) { .contact-title { font-size: 12.5vw; } }
.foot__meta { display: block; line-height: 1.5; }
.foot__dot { display: inline-block; margin-right: .5rem; vertical-align: .08em; }
.foot__sep { margin-inline: .35rem; }
@media (max-width: 640px) { .foot { padding-bottom: 4.75rem; } } /* lascia spazio al timecode fisso */
/* footer: wordmark bianco al posto di saponetta + testo */
.foot__brand img { height: 2.6rem; width: auto; }
.foot__brand:hover img { transform: none; opacity: .75; }
.foot__brand img { transition: opacity .2s; }
.foot__id { gap: .85rem; }
@media (max-width: 640px) { .foot__brand img { height: 2.25rem; } }
/* =========================================================
Pagina Rental — elenco del kit, senza prezzi, con richiesta
========================================================= */
.rental-title { margin-top: 1.25rem; font-size: clamp(3.4rem, 14vw, 12rem); line-height: .82; }
.rental-head { display: grid; gap: 1.25rem; margin-top: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.rental-lead { max-width: 38rem; font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.08; color: var(--cream); }
@media (min-width: 900px) { .rental-head { grid-template-columns: 1fr auto; align-items: end; } }
.rtabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.rtab { display: inline-flex; align-items: center; gap: .55rem; padding: 12px 20px; border-radius: 999px; font-family: var(--font-pill); font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--cream); background: rgba(244, 244, 240, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: background .18s, color .18s; }
.rtab span { font-family: var(--font-mono); font-size: .7rem; opacity: .55; }
.rtab:hover { background: rgba(244, 244, 240, .16); }
.rtab.is-active { color: #050505; background: var(--cream); }
.rkit { margin-top: clamp(3rem, 6vw, 5rem); }
.rkit[hidden] { display: none; }
.rkit__title { font-size: clamp(2.75rem, 7vw, 6rem); line-height: .85; margin-bottom: 1.5rem; }
.rgroup { display: grid; gap: .5rem; padding-block: 1.25rem; border-top: 1px solid var(--line); }
.rgroup__title { display: flex; align-items: baseline; gap: .5rem; color: var(--muted); }
.rgroup__title span { color: var(--accent); }
@media (min-width: 900px) { .rgroup { grid-template-columns: 16rem 1fr; gap: 2rem; } .rgroup__title { padding-top: 1.05rem; } }
.rgroup__list { display: grid; }
.ritem { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.ritem:last-child { border-bottom: 0; }
.ritem__name { font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -0.01em; color: var(--cream); }
.ritem__note { grid-column: 1; font-size: .85rem; color: var(--muted); }
.ritem__note:empty { display: none; }
.ritem__add { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: .5rem; height: 38px; padding: 0 16px; border-radius: 999px; font-family: var(--font-pill); font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .18s, color .18s, box-shadow .18s; }
.ritem__add:hover { box-shadow: inset 0 0 0 1px var(--cream); }
.ritem__plus { position: relative; width: 10px; height: 10px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ritem__plus::before, .ritem__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.ritem__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.ritem__add[aria-pressed="true"] { color: #050505; background: var(--accent); box-shadow: none; }
.ritem__add[aria-pressed="true"] .ritem__plus { transform: rotate(45deg); }
@media (min-width: 900px) { .ritem { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; } .ritem__note { grid-column: 2; } .ritem__add { grid-column: 3; grid-row: 1; } }
@media (hover: hover) { .ritem { transition: padding .25s; } .ritem:hover { padding-left: .5rem; } }
/* barra della richiesta: compare quando scegli qualcosa */
.rbar { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 1rem; padding: .45rem .45rem .45rem 1.4rem; border-radius: 999px; background: rgba(20, 20, 20, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 20px 50px rgba(0, 0, 0, .45); transform: translateX(-50%); animation: rbar-in .45s cubic-bezier(.34, 1.4, .5, 1); }
.rbar[hidden] { display: none; }
@keyframes rbar-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
.rbar__count { font-size: .9rem; white-space: nowrap; color: var(--muted); }
.rbar__count strong { color: var(--cream); font-variant-numeric: tabular-nums; }
.rbar__clear { font-family: var(--font-pill); font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.rbar__clear:hover { color: var(--cream); }
.rbar .btn { margin: 0; white-space: nowrap; }
body:has(.rbar:not([hidden])) .tc-float { display: none; }
@media (max-width: 640px) {
.rbar { left: var(--gutter); right: var(--gutter); gap: .6rem; padding-left: 1rem; transform: none; animation-name: rbar-in-m; }
.rbar .btn { margin-left: auto; padding-inline: 1rem; font-size: 12px; }
@keyframes rbar-in-m { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
}
/* Work, telefono: le bolle del menu scendono in colonna sotto "Work" */
@media (max-width: 640px) {
.wnav__side { left: 50%; right: auto; flex-direction: column; align-items: center; gap: .4rem; transform: translateX(-50%); }
.wnav__side--left { top: calc(100% + .45rem); right: auto; }
.wnav__side--right { top: calc(100% + .45rem + 40px + .4rem); left: 50%; }
.wnav .nav-pill { min-width: 7.5rem; justify-content: center; }
}
@media (max-width: 640px) {
.rbar { padding: .4rem .4rem .4rem .95rem; gap: .5rem; }
.rbar__count { font-size: .8rem; }
.rbar__clear { font-size: 11px; }
.rbar .btn { padding: 0 .9rem; height: 42px; font-size: 11px; letter-spacing: .04em; }
.rbar .btn svg { display: none; }
}
/* Rental: Camera e Luci a tendina, con le categorie a tendina dentro */
:root { interpolate-size: allow-keywords; }
.rfold > summary { list-style: none; cursor: pointer; }
.rfold > summary::-webkit-details-marker { display: none; }
.rfold::details-content { block-size: 0; overflow: hidden; transition: block-size .45s cubic-bezier(.16, 1, .3, 1), content-visibility .45s allow-discrete; }
.rfold[open]::details-content { block-size: auto; }
.rfold__icon { position: relative; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .2s, box-shadow .2s; }
.rfold__icon::before, .rfold__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; border-radius: 1px; background: var(--cream); transform: translate(-50%, -50%); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.rfold__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.rfold[open] > summary > .rfold__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.rfold > summary:hover > .rfold__icon { box-shadow: inset 0 0 0 1px var(--cream); }
.rfold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.rkit { margin-top: 0; border-bottom: 1px solid var(--line); }
.rental-head + .rlist .rkit:first-child, .rlist { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.rkit__sum { display: flex; align-items: center; gap: 1.25rem; padding-block: clamp(1.1rem, 2vw, 1.6rem); }
.rkit__title { margin: 0; font-size: clamp(2.5rem, 6.5vw, 5.5rem); line-height: .85; }
.rkit__count { margin-left: auto; color: var(--muted); }
.rkit[open] > .rkit__sum > .rfold__icon { background: var(--cream); }
.rkit[open] > .rkit__sum > .rfold__icon::before, .rkit[open] > .rkit__sum > .rfold__icon::after { background: #050505; }
.rkit__body { padding-bottom: 1.5rem; }
.rgroup { display: block; padding: 0; border-top: 1px solid var(--line); }
.rgroup__sum { display: flex; align-items: center; gap: .75rem; padding: 1rem 0; }
.rgroup__title { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 600; color: var(--cream); }
.rgroup__count { color: var(--accent); }
.rgroup__sum .rfold__icon { margin-left: auto; width: 2rem; height: 2rem; }
.rgroup__sum .rfold__icon::before, .rgroup__sum .rfold__icon::after { width: 10px; }
.rgroup__list { padding: 0 0 .75rem; }
@media (min-width: 900px) { .rgroup__list { padding-left: 2rem; } }
.ritem { grid-template-columns: 1fr auto; padding: .65rem 0; }
.ritem__name { font-size: clamp(.98rem, 1.3vw, 1.12rem); font-weight: 500; color: rgba(244, 244, 240, .88); }
.ritem__add { grid-column: 2; grid-row: 1; }
@media (min-width: 900px) { .ritem { grid-template-columns: 1fr auto; } .ritem__add { grid-column: 2; } }
.rgroup__title { display: inline; padding-top: 0 !important; }
.rgroup__count, .rkit__count { white-space: nowrap; }
@media (max-width: 640px) { .rkit__sum { gap: .8rem; } .rkit__count { font-size: .62rem; } }
/* =========================================================
Chi siamo — nuova struttura
========================================================= */
.about-title { max-width: none; }
.about-intro__how p:last-child { font-size: 1.05rem; font-weight: 500; color: var(--cream); }
.about-what .service { min-height: 0; }
.service__text { max-width: 34ch; line-height: 1.6; font-size: .98rem; }
.about-what .service__title { font-size: clamp(2.1rem, 3.6vw, 3.25rem); }
@media (min-width: 900px) { .about-what .service { padding-bottom: 1rem; } }
.team--two { gap: 2.5rem 2rem; }
@media (min-width: 768px) { .team--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team--two .member__photo { aspect-ratio: 4 / 5; }
.team--two .member__name { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.crew { display: grid; gap: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .crew { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; } }
.crew__body { display: grid; gap: 1.5rem; }
.crew__body .muted { max-width: 40rem; line-height: 1.6; }
.crew__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.crew__tags li { padding: 10px 18px; border-radius: 999px; font-family: var(--font-pill); font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--cream); background: rgba(244, 244, 240, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.partners { display: grid; gap: 0; }
.partner { display: grid; gap: 2rem; padding-block: 2.5rem; border-top: 1px solid var(--line); }
.partners .block__head + .partner { border-top: 0; padding-top: .5rem; }
@media (min-width: 900px) {
.partner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 3rem; align-items: center; padding-block: 3.5rem; }
.partner--rev .partner__text { order: 2; }
}
.partner__text { display: grid; gap: 1rem; align-content: center; }
.partner__name { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .9; }
.partner__text .muted { max-width: 38rem; line-height: 1.6; }
.partner__link { display: inline-flex; align-items: center; gap: .4rem; justify-self: start; font-family: var(--font-pill); font-size: .85rem; font-weight: 600; text-transform: uppercase; color: var(--cream); }
.partner__link svg { width: .9rem; height: .9rem; }
.partner__gallery { display: grid; gap: .75rem; }
.partner__ph { aspect-ratio: 4 / 3; max-width: 100%; }
.partner__gallery--3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
.partner__gallery--3 .partner__ph:first-child { grid-row: 1 / span 2; aspect-ratio: auto; }
.partner__gallery--3 .partner__ph:not(:first-child) { aspect-ratio: 4 / 3; }
.partner__gallery--1 .partner__ph { aspect-ratio: 16 / 10; }
/* Rental: trafiletto Keep Rolling */
.rpartner { display: grid; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-radius: 1.25rem; background: rgba(244, 244, 240, .03); }
@media (min-width: 900px) { .rpartner { grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem 2.5rem; } .rpartner .label { grid-column: 1 / -1; } }
.rpartner__name { font-size: clamp(2rem, 4vw, 3.25rem); line-height: .9; }
.rpartner__text { max-width: 46rem; line-height: 1.6; }
.rpartner__btn { justify-self: start; margin: 0; }
.team--two .member__photo { aspect-ratio: 3 / 2; }
/* Chi siamo v2: foto d'apertura, studio a tutta larghezza, backstage su pellicola, partner più grandi */
.about-hero { margin-top: clamp(2.5rem, 5vw, 4rem); aspect-ratio: 21 / 9; max-width: 100%; }
@media (max-width: 640px) { .about-hero { aspect-ratio: 4 / 3; } }
.studio { position: relative; margin-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem); }
.studio__media { position: relative; height: min(82vh, 56rem); min-height: 26rem; overflow: hidden; }
.studio__media > img, .studio__media > .bars { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, 0) 45%, rgba(5, 5, 5, .85)); pointer-events: none; }
.studio__text { position: relative; display: grid; gap: .9rem; margin-top: -11rem; z-index: 1; }
.studio__big { font-size: clamp(2.5rem, 6.5vw, 6rem); line-height: .9; max-width: 14ch; }
.studio__p { max-width: 36rem; line-height: 1.6; color: rgba(244, 244, 240, .78); }
@media (max-width: 640px) { .studio__media { height: 62vh; } .studio__text { margin-top: -8rem; } }
.crew { display: block; border-top: 0; }
.crew__head { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .crew__head { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; } }
.strip__bar { display: flex; justify-content: space-between; margin-top: clamp(3rem, 6vw, 5rem); padding-bottom: .8rem; }
.strip { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; scroll-snap-type: x proximity; outline: none; }
.strip::-webkit-scrollbar { display: none; }
.strip.is-drag { cursor: grabbing; scroll-snap-type: none; }
.strip.is-drag .strip__frame { pointer-events: none; }
.strip__track { --hole: rgba(244, 244, 240, .16); display: flex; gap: 10px; width: max-content; padding: 26px var(--gutter); background:
radial-gradient(circle at 50% 50%, #050505 0 0) top left / 0 0,
repeating-linear-gradient(90deg, transparent 0 9px, var(--hole) 9px 21px, transparent 21px 30px) left 0 top 8px / 100% 10px no-repeat,
repeating-linear-gradient(90deg, transparent 0 9px, var(--hole) 9px 21px, transparent 21px 30px) left 0 bottom 8px / 100% 10px no-repeat,
#0e0e0e; }
.strip__frame { position: relative; flex: none; width: clamp(15rem, 30vw, 26rem); margin: 0; scroll-snap-align: start; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.strip__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; }
.strip__img > img, .strip__img > .bars { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.strip__img > img { filter: saturate(.9); transition: filter .4s, transform .8s cubic-bezier(.16, 1, .3, 1); }
.strip__frame figcaption { position: absolute; left: .6rem; bottom: -20px; font-size: .55rem; color: rgba(251, 111, 152, .75); }
@media (hover: hover) { .strip__frame:hover { transform: translateY(-4px); } .strip__frame:hover img { filter: none; transform: scale(1.04); } }
.partners .partner { display: grid; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); grid-template-columns: 1fr; }
.partners .block__head + .partner { border-top: 0; padding-top: .5rem; }
.partner__head { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .partner__head { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; } }
.partner__text { display: grid; gap: 1rem; }
.partner__name { font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: .88; }
.partner__gallery { display: grid; gap: .75rem; grid-template-columns: 1fr; }
.partner__gallery .partner__ph { aspect-ratio: 16 / 10; }
@media (min-width: 768px) {
.partner__gallery { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: clamp(24rem, 44vw, 40rem); }
.partner__gallery .partner__ph { aspect-ratio: auto; height: 100%; }
.partner__gallery .partner__ph:first-child { grid-row: 1 / span 2; }
}
.partner__ph { position: relative; overflow: hidden; }
.partner__ph > img, .partner__ph > .bars { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Chi siamo: la foto d'apertura si vede intera, il riquadro prende le sue proporzioni */
.about-hero:has(> img) { aspect-ratio: auto; height: auto; }
.about-hero > img { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
/* Backstage: pellicola vera — base color ambra scuro, perforazioni arrotondate, bordi rovinati,
grana, graffi, scritte sul bordo. Scorre da sola verso destra (wide.js) */
.strip { overflow: hidden; cursor: grab; touch-action: pan-y; scroll-snap-type: none; padding-block: 6px; }
.strip.is-drag { cursor: grabbing; }
.strip__track { position: relative; gap: 14px; padding: 34px 0 34px 14px; will-change: transform;
background:
url("data:image/svg+xml;utf8,") left 0 top 9px / 29px 14px repeat-x,
url("data:image/svg+xml;utf8,") left 0 bottom 9px / 29px 14px repeat-x,
linear-gradient(180deg, #2a1c12 0%, #1c130d 9%, #160f0a 50%, #1c130d 91%, #2a1c12 100%);
-webkit-mask: url("data:image/svg+xml;utf8,") left top / 640px 100% repeat-x;
mask: url("data:image/svg+xml;utf8,") left top / 640px 100% repeat-x; }
/* grana, graffi e polvere sopra tutta la pellicola */
.strip__track::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: .55;
background:
url("data:image/svg+xml;utf8,") 0 0 / 220px 220px,
repeating-linear-gradient(90deg, transparent 0 173px, rgba(255, 236, 214, .07) 173px 174px, transparent 174px 411px, rgba(255, 236, 214, .05) 411px 412px, transparent 412px 640px); }
/* luce sul bordo, come la pellicola che si vela */
.strip__track::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen;
background: repeating-linear-gradient(90deg, transparent 0 900px, rgba(255, 120, 40, .10) 1000px, rgba(255, 170, 80, .16) 1060px, transparent 1180px, transparent 2100px); }
.strip__frame { position: relative; padding-top: 0; }
.strip__edge { position: absolute; left: 6px; top: -27px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .14em; color: rgba(232, 146, 64, .7); white-space: nowrap; }
.strip__num { position: absolute; right: 6px; bottom: -26px; left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; color: rgba(232, 146, 64, .7); }
.strip__frame figcaption.label { display: none; }
.strip__img { border-radius: 5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.strip__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 28px rgba(0, 0, 0, .65), inset 0 0 3px rgba(0, 0, 0, .8); }
.strip__img > img { filter: sepia(.14) contrast(1.06) saturate(.92); }
@media (hover: hover) { .strip__frame:hover img { filter: sepia(.05) contrast(1.04); transform: scale(1.03); } .strip__frame:hover { transform: none; } }
.strip__track::after { opacity: .36; }
.strip__frame .strip__num { left: auto; right: 6px; bottom: -26px; color: rgba(232, 146, 64, .7); }
/* pellicola: toni freddi, scritte rosa tenue */
.strip__track { background:
url("data:image/svg+xml;utf8,") left 0 top 9px / 29px 14px repeat-x,
url("data:image/svg+xml;utf8,") left 0 bottom 9px / 29px 14px repeat-x,
linear-gradient(180deg, #172028 0%, #10171d 9%, #0c1116 50%, #10171d 91%, #172028 100%); }
.strip__track::before { background: repeating-linear-gradient(90deg, transparent 0 900px, rgba(90, 150, 210, .08) 1000px, rgba(150, 190, 230, .12) 1060px, transparent 1180px, transparent 2100px); }
.strip__track::after { background:
url("data:image/svg+xml;utf8,") 0 0 / 220px 220px,
repeating-linear-gradient(90deg, transparent 0 173px, rgba(214, 230, 255, .07) 173px 174px, transparent 174px 411px, rgba(214, 230, 255, .05) 411px 412px, transparent 412px 640px); }
.strip__edge, .strip__frame .strip__num { color: rgba(240, 150, 180, .62); }
.strip__img > img { filter: saturate(.85) contrast(1.06) hue-rotate(-6deg) brightness(.98); }
@media (hover: hover) { .strip__frame:hover img { filter: saturate(.95) contrast(1.04); } }
/* =========================================================
Privacy: pagina legale e avviso per YouTube
========================================================= */
.legal__title { margin-top: 1.25rem; font-size: clamp(3rem, 10vw, 8.5rem); line-height: .85; }
.legal__body { max-width: 46rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); color: rgba(244, 244, 240, .78); line-height: 1.7; font-size: 1rem; }
.legal__body > * + * { margin-top: 1rem; }
.legal__lead { font-family: var(--font-serif); font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.25; color: var(--cream); }
.legal__body h2 { margin-top: 2.75rem; font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; color: var(--cream); }
.legal__body h3 { margin-top: 1.5rem; font-size: 1.05rem; font-weight: 700; color: var(--cream); }
.legal__body strong { color: var(--cream); font-weight: 600; }
.legal__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal__body ul { display: grid; gap: .5rem; padding-left: 1.1rem; list-style: disc; }
.legal__body code { font-family: var(--font-mono); font-size: .85em; color: var(--cream); }
.legal__table { width: 100%; border-collapse: collapse; font-size: .9rem; display: block; overflow-x: auto; }
.legal__table th, .legal__table td { padding: .7rem .8rem .7rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal__table th { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.legal__btn { padding: .15rem .7rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: .85rem; font-weight: 600; color: var(--cream); }
.legal__btn:hover { box-shadow: inset 0 0 0 1px var(--cream); }
.foot__legal { display: flex; gap: 1.25rem; }
.foot__legal a, .foot__legal button { color: rgba(244, 244, 240, .5); font-size: inherit; transition: color .2s; }
.foot__legal a:hover, .foot__legal button:hover { color: var(--cream); }
.foot__row--base { flex-wrap: wrap; gap: .6rem 2rem; }
.consent { position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; align-items: center; gap: 1.25rem; width: min(100% - 2rem, 46rem); padding: 1rem 1rem 1rem 1.35rem; border-radius: 1.1rem; background: rgba(18, 18, 18, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 20px 50px rgba(0, 0, 0, .5); transform: translateX(-50%); animation: consent-in .5s cubic-bezier(.16, 1, .3, 1); }
.consent[hidden] { display: none; }
@keyframes consent-in { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } }
.consent p { flex: 1; font-size: .82rem; line-height: 1.5; color: rgba(244, 244, 240, .78); }
.consent a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.consent__btns { display: flex; gap: .5rem; flex: none; }
.consent button { height: 40px; padding: 0 18px; border-radius: 999px; font-family: var(--font-pill); font-size: 13px; font-weight: 600; text-transform: uppercase; transition: background .2s, color .2s; }
.consent__no { color: var(--cream); box-shadow: inset 0 0 0 1px var(--line-strong); }
.consent__no:hover { box-shadow: inset 0 0 0 1px var(--cream); }
.consent__yes { color: #050505; background: var(--cream); }
.consent__yes:hover { background: var(--accent); }
@media (max-width: 640px) { .consent { flex-direction: column; align-items: stretch; gap: .8rem; } .consent__btns > * { flex: 1; } }
body:has(.consent:not([hidden])) .rbar { bottom: calc(1rem + 9rem); }
/* soci: ritratti verticali */
.team--two .member__photo { aspect-ratio: 4 / 5; }
.member__photo > img { object-position: 50% 30%; }
/* studio: inquadra scrivanie e insegna, il soppalco si taglia in alto */
.studio__media > img { object-position: 50% 64%; }
/* founders: foto più piccole */
.team--two .member__photo { width: 100%; max-width: 27rem; }
@media (max-width: 767px) { .team--two .member__photo { max-width: 78%; } }
/* =========================================================
Chi siamo: transizioni allo scroll stile Apple
========================================================= */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 46px, 0);
transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1.15s cubic-bezier(.16, 1, .3, 1), clip-path 1.25s cubic-bezier(.16, 1, .3, 1);
transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal="line"] { opacity: 1; transform: translate3d(0, 34px, 0); clip-path: inset(0 -5% 100% -5%); }
.js [data-reveal="pop"] { transform: translate3d(0, 12px, 0) scale(.7); transition-delay: calc(var(--i, 0) * 55ms + 120ms); }
.js [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition-duration: 1.6s; }
.js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(-20% -5% -20% -5%); }
.js [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }
[data-sx] { overflow: hidden; }
[data-sx] > img, [data-sx] > .bars { transform-origin: 50% 50%; will-change: transform; }
[data-sx="expand"] { will-change: clip-path; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; clip-path: none; } }
/* uscita di sezione stile hero della home (Chi siamo, due punti) */
.exit-sec { overflow: hidden; }
[data-exit] { transform-origin: 50% 0; will-change: transform, opacity; }
/* foto d'apertura: cresce intera, senza ritagli */
[data-sx="grow"] { transform-origin: 50% 0; will-change: transform; overflow: hidden; }
[data-sx="grow"] > img { will-change: auto; }
/* scheda progetto: crediti */
.project-credits { max-width: 46rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.project-credits dl { display: grid; gap: .55rem; margin-top: 1rem; }
.project-credits dl > div { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 1rem; font-size: .95rem; }
.project-credits dt { color: var(--muted); }
.project-credits dd { color: var(--cream); }
/* Work: anteprima YouTube in dissolvenza quando il video sta già andando */
.tile__media iframe { opacity: 0; transition: opacity .45s ease; }
.tile__media iframe.is-live { opacity: 1; }
/* Work: riquadri 16:9, immagine e video interi; se il formato è diverso restano le bande nere */
.tile__media { background: #000; }
.tile__media > img { object-fit: contain; }
.tile__media iframe { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
/* footer: riga con i dati dell'impresa leggibile, spazio in fondo perché il timecode fisso non la copra */
.foot__row--base { flex-wrap: wrap; row-gap: .5rem; padding-bottom: 4.5rem; }