:root{--sb:0px}
@supports (height:100lvh){:root{--sb:calc(100lvh - 100svh)}}
/* it.simonerenzi.com · "cinema"
   Tutta larghezza + animazioni guidate dallo scorrimento (GSAP ScrollTrigger + SplitText + Lenis).
   Gli stati iniziali li imposta il JS: senza JS o con "riduci movimento" la pagina resta completa. */

@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{--gut:clamp(20px,5vw,96px);--max-width:none;--max-width-lg:none;--mono:"IBM Plex Mono","SF Mono",ui-monospace,monospace;--expo:cubic-bezier(.16,1,.3,1)}

/* ---------- Lenis ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* ======================================================================
   1 · HERO — il nome si apre, la camera entra nello schermo del MacBook e lì c'è la shell
   ====================================================================== */
.hero-image.cx-hero{position:relative;height:100vh;height:100lvh;min-height:560px;overflow:hidden;background:#0b0b0d}
.cx-scene{position:absolute;inset:0;transform-origin:77% 34%;will-change:transform}
.cx-bg,.cx-fig{position:absolute;inset:0}
.cx-bg img,.cx-fig img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;display:block}
.cx-fig{z-index:2}
.cx-cam{position:absolute;inset:0}
html.cx .cx-cam{inset:auto;left:0;top:0;transform-origin:0 0;will-change:transform}
.cx-dive{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden;overflow:hidden}
.cx-glass,.cx-sheen,.cx-ghost{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;will-change:transform,opacity}
.cx-glass{background:#060607;opacity:0}
.cx-sheen{opacity:0;background:linear-gradient(116deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.03) 30%,rgba(255,255,255,0) 44%,rgba(255,255,255,0) 100%)}
.cx-ghost{background:#060607;color:#e9e9ec;font-family:var(--mono);overflow:hidden;opacity:0}
@media (max-width:768px),(max-aspect-ratio:1/1){.cx-bg img{object-position:30% 50%}}
.cx-name{position:absolute;z-index:1;left:0;right:var(--gut);top:17%;margin:0;text-align:right;white-space:nowrap;font-family:Inter,system-ui,sans-serif;font-weight:900;font-size:13.6vw;line-height:.82;letter-spacing:-.055em;color:#fff;text-shadow:0 10px 60px rgba(0,0,0,.25)}
.cx-name .cx-l{display:block}
.cx-name .cx-c{display:inline-block;padding:0 .01em .06em;margin:0 -.01em -.06em;clip-path:inset(-.6em -.4em 0 -.4em)}   /* taglia solo sotto (per la salita delle lettere), mai di lato: S e O sporgono */
.cx-name .cx-ci{display:inline-block}
.cx-hero-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,rgba(0,0,0,.6) 100%)}
.cx-hero-ui{position:absolute;inset:0;z-index:4;pointer-events:none;color:#fff}
.cx-hero-ui a{pointer-events:auto}
.cx-hero-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(clamp(28px,5vh,56px) + var(--sb,0px));display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.cx-role{margin:0;font-size:clamp(18px,1.7vw,26px);font-weight:300;letter-spacing:.02em;line-height:1.3}
.cx-role b{display:block;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11px;opacity:.75;margin-bottom:8px}
.cx-scroll{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.cx-scroll i{display:block;width:1px;height:64px;background:linear-gradient(180deg,#fff,rgba(255,255,255,0));transform-origin:50% 0;animation:cxScroll 2.4s var(--expo) infinite}
@keyframes cxScroll{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.cx-hero-black{position:absolute;inset:0;z-index:5;background:#060607;opacity:0;pointer-events:none}
html:not(.cx) .cx-hero-black{display:none}

/* ======================================================================
   2 · TERMINALE — il curriculum scritto mentre scorri
   ====================================================================== */
.cx-term{position:relative;z-index:2;height:100vh;height:100lvh;min-height:560px;background:#060607;color:#e9e9ec;overflow:hidden;font-family:var(--mono)}
.cx-term-screen{position:absolute;left:var(--gut);right:var(--gut);top:50%;transform:translateY(-50%);font-size:clamp(14px,1.75vw,28px);line-height:1.7;margin:0}
.cx-term-screen p{margin:0;white-space:pre-wrap;word-break:break-word;min-height:1.7em}
.cx-term-screen .cx-gap{min-height:.9em}
.cx-p{color:#30d158}
.cx-p i{font-style:normal;color:#64d2ff}
.cx-out{color:rgba(233,233,236,.78)}
.cx-out b{color:#fff;font-weight:500}
.cx-out em{font-style:normal;color:#ffd60a}
.cx-cursor{display:inline-block;width:.6em;height:1.15em;vertical-align:-.2em;background:#e9e9ec;margin-left:.05em;animation:cxBlink 1.05s steps(1) infinite}
@keyframes cxBlink{50%{opacity:0}}
.cx-term-label{position:absolute;left:var(--gut);top:clamp(84px,12vh,120px);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(233,233,236,.45)}
.cx-term-hint{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(clamp(24px,5vh,48px) + var(--sb,0px));display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,233,236,.4)}
.cx-term-bar{position:absolute;left:0;bottom:calc(0px + var(--sb,0px));height:2px;width:100%;background:#30d158;transform-origin:0 50%;transform:scaleX(0)}
.cx-term.is-white{background:#fff}
.cx-term.is-white>*{opacity:0}
.cx-flood{position:fixed;z-index:30;background:#fff;pointer-events:none;opacity:0}
.cx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.cx) .cx-term{height:auto;padding:clamp(80px,12vh,140px) 0}
html:not(.cx) .cx-term-screen{position:relative;top:auto;transform:none}
html:not(.cx) .cx-term-hint,html:not(.cx) .cx-term-bar{display:none}

/* ---------- mobile ---------- */
@media (max-width:768px){
  .cx-scene{transform-origin:94% 10%}
  .cx-name{z-index:3;top:auto;bottom:calc(104px + var(--sb,0px));left:var(--gut);right:var(--gut);text-align:left;font-size:20vw;line-height:.86;white-space:normal}
  .cx-hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.75) 100%)}
  .cx-hero-foot{bottom:calc(22px + var(--sb,0px))}
  .cx-scroll{display:none}
  .cx-term-screen{font-size:13px;line-height:1.6}
  .cx-term-hint span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){.cx-scroll i,.cx-cursor{animation:none}}
/* body con overflow-x:hidden diventa un contenitore di scorrimento e blocca ogni position:sticky (foto del CV, foto collaborazioni):
   "clip" taglia allo stesso modo ma senza creare il contenitore */
html.cx body{overflow-x:clip!important;overflow-y:visible!important}