/* team: the page /us/team, about.senbuzy.com's page with us in it (Tommi, 2026-10-14: "esattamente come il link che ti ho
   dato ... fai un 3D nostro, ci metti degli sticker di quello che abbiamo fatto addosso ... L'interazione voglio che sia la
   stessa"). Their layout, type rhythm and motion, read off their stylesheet and bundle (sizes, clamps, timings and easings are
   theirs); not their words, model, textures or pictures. A fixed stage of heads behind the page (team.js), a framed first screen
   with a script title, a serif lede and a scroll cue; a timeline down the right, one entry a stop of the camera; then the work,
   a sticky row of dark cards that slides in from the right while the heads turn to look at it. On a phone the cards stack.
   Ours, not theirs: the colours (black, white and grey; their warm accent is white here, their green field a grey one), the
   fonts (Ed Nimpkish for the script title, Instrument Serif, Inter), no blur behind the text (a weak laptop pays for a blur over
   a moving canvas every frame). Needs ../base/base.css. */

@font-face{font-family:"Ed Nimpkish";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/EDNimpkish-Regular.ttf) format("truetype")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}

.tm-page{--tm-ink:#f4f4f2;--tm-muted:rgba(244,244,242,.6);--tm-line:rgba(244,244,242,.14);--tm-bg:#0a0a0a;--tm-hi:#fff;
  --tm-serif:"Instrument Serif",Georgia,serif;--tm-script:"Ed Nimpkish","Instrument Serif",cursive;
  background:var(--tm-bg);color:var(--tm-ink);overflow-x:clip}

/* ---------- the stage ---------- */
.tm-stage{position:fixed;inset:0;z-index:0;pointer-events:none}
.tm-canvas{display:block;width:100%;height:100%}
.tm-scrim{position:absolute;inset:0;opacity:var(--scrim,0);background:linear-gradient(to right,rgba(10,10,10,0) 20%,rgba(10,10,10,.75) 58%,#0a0a0a 92%)}
.tm-rail{position:absolute;top:-2px;right:-2px;bottom:-2px;width:min(680px,52vw);opacity:var(--rail,0);background:rgba(10,10,10,.3);
  -webkit-mask:linear-gradient(to right,transparent 0%,#000 46%);mask:linear-gradient(to right,transparent 0%,#000 46%)}
.tm-fog{position:absolute;inset:0;background:rgba(8,8,8,var(--fog,0))}
/* the grain: a tile of dark specks drawn once by team.js, moved to a new place once a second, multiplied over everything */
.tm-grain{position:fixed;inset:0;z-index:100;pointer-events:none;mix-blend-mode:multiply;opacity:.4;background-image:var(--grain,none);background-size:256px 256px;animation:tm-grain 1s steps(1) infinite}
@keyframes tm-grain{0%{background-position:0 0}25%{background-position:-97px 61px}50%{background-position:43px -128px}75%{background-position:-151px -37px}}

.tm-loading{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--tm-bg);transition:opacity .6s ease}
.tm-loading.is-hidden{opacity:0;pointer-events:none}
.tm-loading svg{width:clamp(56px,8vw,80px);height:clamp(56px,8vw,80px);overflow:visible;animation:tm-spin 2.4s linear infinite}
.tm-lr-track{fill:none;stroke:rgba(244,244,242,.12);stroke-width:3}
.tm-lr-arc{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:213.6;stroke-dashoffset:calc(213.6 * (1 - var(--p,0)));transition:stroke-dashoffset .35s ease;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
@keyframes tm-spin{to{transform:rotate(360deg)}}

/* ---------- the frame of the first screen ---------- */
.tm-chrome{--m:clamp(16px,2.4vh,30px);position:fixed;inset:0;z-index:12;pointer-events:none;opacity:var(--chrome,1)}
.tm-frame{position:absolute;inset:var(--m);border:1px solid rgba(244,244,242,.1)}
.tm-mk{position:absolute;font-size:13px;line-height:1;color:rgba(244,244,242,.32)}
.tm-mk.tl{top:var(--m);left:var(--m);transform:translate(-50%,-50%)}
.tm-mk.tr{top:var(--m);right:var(--m);transform:translate(50%,-50%)}
.tm-mk.bl{bottom:var(--m);left:var(--m);transform:translate(-50%,50%)}
.tm-mk.br{bottom:var(--m);right:var(--m);transform:translate(50%,50%)}
.tm-meta{position:absolute;margin:0;font-size:clamp(9px,.9vw,11px);letter-spacing:.26em;text-transform:uppercase;line-height:1.6;color:rgba(244,244,242,.46)}
.tm-meta b{display:block;font-weight:400;text-transform:none;letter-spacing:.12em;color:rgba(244,244,242,.7)}
.tm-meta.tl{top:calc(var(--m) + 16px + var(--barra-h));left:calc(var(--m) + 20px)}
.tm-meta.tr{top:calc(var(--m) + 16px + var(--barra-h));right:calc(var(--m) + 20px);text-align:right}
.tm-meta.bl{bottom:calc(var(--m) + 16px);left:calc(var(--m) + 20px)}
.tm-meta.rt{top:50%;right:calc(var(--m) + 7px);writing-mode:vertical-rl;transform:translateY(-50%);letter-spacing:.3em}

/* ---------- the content ---------- */
.tm-content{position:relative;z-index:10}
.tm-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 0 6vh}
.tm-about{text-align:center;pointer-events:none;padding:0 24px;opacity:var(--about,1);filter:blur(var(--blur,0px));animation:tm-down 1.8s ease both}
.tm-title{margin:0 0 .3em;font-family:var(--tm-script);font-weight:400;font-size:clamp(40px,7.2vw,88px);line-height:1;letter-spacing:var(--ls,.01em);color:var(--tm-ink);transform:translateY(var(--ty,0px))}
.tm-lede{margin:.5em auto 0;max-width:min(560px,88vw);font-family:var(--tm-serif);font-style:italic;font-size:clamp(15px,1.3vw,19px);line-height:1.25;color:var(--tm-ink);transform:translateY(var(--by,0px));text-wrap:balance}
.tm-cue{margin:3vh 0 0;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--tm-muted);pointer-events:none;opacity:var(--cue,1)}
.tm-cue-l{animation:tm-pulse 2.4s ease-in-out infinite}
.tm-cue-track{position:relative;width:1px;height:44px;overflow:hidden;background:linear-gradient(rgba(244,244,242,.28),rgba(244,244,242,.04))}
.tm-cue-dot{position:absolute;left:50%;top:0;width:3px;height:9px;margin-left:-1.5px;border-radius:2px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);animation:tm-cue 1.9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes tm-cue{0%{transform:translateY(-10px);opacity:0}25%{opacity:1}75%{opacity:1}to{transform:translateY(44px);opacity:0}}
@keyframes tm-pulse{0%,to{opacity:.6}50%{opacity:1}}
@keyframes tm-down{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

/* the team: a timeline down the right, one entry a stop of the camera */
.tm-resume{padding:20vh 24px}
.tm-resume-t{width:min(480px,90vw);margin:0 6vw 0 auto;font-family:var(--tm-serif);font-weight:400;font-size:clamp(30px,5vw,58px);letter-spacing:.01em;line-height:1;color:var(--tm-ink)}
.tm-timeline{position:relative;width:min(480px,90vw);margin:8vh 6vw 0 auto}
.tm-timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:linear-gradient(rgba(244,244,242,.28),rgba(244,244,242,.04))}
.tm-entry{position:relative;padding:0 0 46vh 34px}
.tm-person:last-child .tm-entry:last-child{padding-bottom:38vh}
.tm-dot{position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.tm-entry.is-person .tm-dot{left:-2px;top:9px;width:15px;height:15px;background:transparent;border:1px solid #fff}
.tm-period{margin:0 0 .6em;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,244,242,.72)}
.tm-name{margin:0;font-family:var(--tm-serif);font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1;letter-spacing:.01em;color:var(--tm-ink)}
.tm-head{display:flex;align-items:center;gap:12px}
.tm-place{margin:0;font-size:clamp(18px,2.4vw,26px);font-weight:600;line-height:1.25;color:var(--tm-ink)}
.tm-chip{flex:none;display:inline-flex;width:40px;height:40px;border-radius:9px;overflow:hidden;background:var(--tm-ink)}
.tm-chip img{width:100%;height:100%;object-fit:cover;display:block}
.tm-role{margin:.35em 0 0;font-size:15px;color:rgba(244,244,242,.8)}
.tm-points{margin:1.1em 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.6em}
.tm-points li{position:relative;padding-left:1.1em;font-size:14px;line-height:1.6;color:rgba(244,244,242,.95)}
.tm-points li::before{content:"\2014";position:absolute;left:0;color:var(--tm-muted)}
.tm-points a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(244,244,242,.45);transition:color .2s ease,border-color .2s ease}
@media (hover:hover){.tm-points a:hover{color:#fff;border-color:#fff}}
.tm-pending{margin:1.2em 0 0}
/* each piece rises in when its entry reaches the screen (team.js adds .on), one after another: theirs, .75 s on (.22,1,.36,1),
   26 px, 90 ms apart */
.tm-resume-t,.tm-rv,.tm-dot{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i,0) * 90ms + 40ms)}
.tm-resume-t.on,.on>.tm-dot,.on .tm-rv{opacity:1;transform:none}

/* the work: a sticky row of dark cards, moved sideways by the scroll */
.tm-works{position:relative;z-index:10;--card:min(880px,78vw)}
.tm-gallery{position:relative}
.tm-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.tm-gallery-t{position:absolute;top:calc(clamp(16px,4vh,40px) + var(--barra-h));left:clamp(24px,6vw,80px);z-index:2;margin:0;font-family:var(--tm-serif);font-weight:400;font-size:clamp(24px,3vw,40px);letter-spacing:.02em;color:var(--tm-ink);pointer-events:none}
.tm-track{display:flex;align-items:stretch;height:100%;margin:0;padding:0 0 0 100vw;list-style:none;will-change:transform}
.tm-wc{flex:none;display:flex;flex-direction:column;gap:clamp(26px,5vh,56px);width:var(--card);height:100%;padding:calc(clamp(56px,11vh,132px) + 10px) clamp(40px,5vw,76px) clamp(40px,7vh,80px);border-left:1px solid var(--tm-line);background:rgba(13,13,13,.66);color:var(--tm-ink)}
.tm-wc:last-child{border-right:1px solid var(--tm-line)}
.tm-wc-no{display:block;font-size:clamp(11px,1.2vw,13px);letter-spacing:.3em;color:rgba(244,244,242,.4);font-variant-numeric:tabular-nums;margin-bottom:1.1em}
.tm-wc-t{margin:0;font-size:clamp(24px,3.4vw,44px);font-weight:600;line-height:1.06;letter-spacing:.01em}
.tm-wc-t a{color:inherit;text-decoration:none}
.tm-wc-tag{display:block;margin-top:.7em;font-size:clamp(12px,1.2vw,14px);letter-spacing:.06em;color:var(--tm-muted)}
.tm-wc-cover{flex:none;align-self:flex-end;width:clamp(160px,22vw,240px);margin:0 clamp(12px,6%,80px) 0 0;aspect-ratio:3/2;border-radius:12px;overflow:hidden;border:1px solid var(--tm-line);background:#1c1c1c}
.tm-wc-cover img{display:block;width:100%;height:100%;object-fit:cover}
.tm-wc-list{list-style:none;margin:0;padding:0}
.tm-wc-list li{border-bottom:1px solid rgba(244,244,242,.09)}
.tm-wc-list li:last-child{border-bottom:none}
.tm-wc-list a{display:flex;align-items:baseline;justify-content:space-between;gap:clamp(16px,4vw,64px);padding:clamp(14px,2.2vh,26px) 0;color:inherit;text-decoration:none;transition:padding-left .3s cubic-bezier(.16,1,.3,1)}
.tm-wc-name{font-size:clamp(13px,1.35vw,16px);line-height:1.35;letter-spacing:.01em;color:rgba(244,244,242,.9);transition:color .2s ease}
.tm-wc-kind{flex:none;font-size:clamp(11px,1.15vw,13px);font-weight:500;letter-spacing:.04em;color:#fff;white-space:nowrap}
@media (hover:hover){.tm-wc-list a:hover{padding-left:10px}.tm-wc-list a:hover .tm-wc-name{color:#fff}}
.tm-wc-foot{margin:auto 0 0;padding-top:clamp(20px,3vh,30px);border-top:1px solid var(--tm-line);font-size:clamp(12px,1.2vw,14px);color:var(--tm-muted)}
.tm-wc-foot span{display:inline-block;min-width:3.2em;margin-right:1.2em;letter-spacing:.16em;text-transform:uppercase;font-size:11px;color:rgba(244,244,242,.4)}
.tm-wc-foot a{color:#fff;letter-spacing:.04em;text-decoration:none}
.tm-progress{position:absolute;bottom:clamp(22px,5vh,50px);left:50%;transform:translateX(-50%);width:min(280px,40vw);height:2px;margin:0;border-radius:2px;background:rgba(244,244,242,.18);overflow:hidden;z-index:2}
.tm-progress i{display:block;width:100%;height:100%;border-radius:2px;background:#fff;transform-origin:left center;transform:scaleX(var(--wp,0))}
.tm-hint{position:absolute;bottom:clamp(20px,5vh,48px);right:clamp(24px,6vw,80px);z-index:2;margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tm-muted);opacity:var(--hint,1)}

.tm-page .piede{position:relative;z-index:10;background:#000}

/* a phone: the meta on the right goes, each entry gets its own dark card, the title its shadow, the cards stack */
@media (max-width:640px){
  .tm-meta.rt,.tm-meta.tr,.tm-rail{display:none}
  .tm-body{background:rgba(10,10,10,.6);border-radius:16px;padding:20px 22px}
  .tm-resume-t{text-shadow:0 0 1px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.6)}
  .tm-entry{padding-bottom:70vh}
  .tm-timeline,.tm-resume-t{margin-right:auto;margin-left:auto}
  .tm-gallery{height:auto!important}
  .tm-sticky{position:static;height:auto;overflow:visible;display:block}
  .tm-track{flex-direction:column;height:auto;padding-left:0;transform:none!important}
  .tm-wc{width:100%;height:auto;border-left:none;border-right:none;border-top:1px solid var(--tm-line);padding:clamp(40px,7vh,64px) clamp(24px,6vw,48px)}
  .tm-wc-cover{align-self:flex-start;margin-right:0}
  .tm-progress,.tm-hint{display:none}
  .tm-gallery-t{position:static;padding:clamp(16px,4vh,40px) clamp(24px,6vw,80px) clamp(20px,5vh,48px);font-size:clamp(28px,8vw,36px)}
  .tm-wc-list a{flex-direction:column;align-items:flex-start;gap:5px}
}
@media (prefers-reduced-motion:reduce){
  .tm-cue-dot,.tm-cue-l,.tm-grain,.tm-about{animation:none}
  .tm-resume-t,.tm-rv,.tm-dot{transform:none;transition:opacity .4s linear}
  .tm-about{filter:none}
}