*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --black:#000;
  --white:#fff;
  --mute:rgba(255,255,255,.42);
  --mute-d:rgba(0,0,0,.42);
  --hair:rgba(255,255,255,.18);
  --hair-d:rgba(0,0,0,.14);
  --en:'Poppins',ui-sans-serif,system-ui,sans-serif;
  --it:'Cormorant Garamond',ui-serif,Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,4vw,56px);
}

html,body{background:var(--black);color:var(--white)}
html{scroll-behavior:auto;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--en);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.js body{cursor:none}
img,svg,video{display:block;max-width:100%}
button,a{font:inherit;color:inherit;background:none;border:0;cursor:none}
a{text-decoration:none}
em{font-style:normal}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:80;background:#fff;color:#000;padding:.6rem 1rem;cursor:auto}

/* ---------- rulers ---------- */
.ruler{
  position:relative;
  height:10px;
  overflow:hidden;
  background:repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 6px);
}
.ruler::before,.ruler::after{
  content:'';
  position:absolute;top:0;bottom:0;width:8px;
  background:var(--white);
}
.ruler::before{left:0}
.ruler::after{right:0}

.js.is-booting,.js.is-booting body{overflow:hidden}

/* ---------- loading ---------- */
.load{
  position:fixed;inset:0;z-index:60;
  background:#000;
  display:grid;place-items:center;
}
.load.is-out{opacity:0;visibility:hidden;pointer-events:none}
.load__mark{
  width:min(28vw,240px);
  transform-origin:50% 50%;
  will-change:transform;
}
.load__mark svg{display:block;width:100%;height:auto}
.load__progress{
  position:absolute;left:var(--pad);right:var(--pad);bottom:8vh;
}
.load__num{
  display:flex;
  align-items:baseline;
  gap:.12em;
  font-size:clamp(3rem,8vw,7rem);
  font-weight:300;
  letter-spacing:-.04em;
  line-height:.8;
  margin-bottom:22px;
  font-variant-numeric:tabular-nums;
}
.load__pct{
  font-size:.38em;
  letter-spacing:0;
  opacity:.55;
  font-weight:400;
}
.load__rail{
  position:relative;
  height:10px;
  width:100%;
  overflow:hidden;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 6px);
}
.load__rail-fill{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0%;
  background:#fff;
  will-change:width;
}

/* ---------- header ---------- */
.head{
  position:fixed;z-index:40;
  top:0;left:0;right:220px;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad) 0;
  mix-blend-mode:difference;
  color:#fff;
  pointer-events:none;
}
.head a{pointer-events:auto;color:#fff}
.head__logo{
  display:flex;align-items:center;gap:10px;
  letter-spacing:.28em;
  font-size:13px;
  font-weight:500;
  color:#fff;
}
.head__mark{
  width:22px;
  display:block;
  transform-origin:50% 50%;
  transition:transform .9s var(--ease);
  will-change:transform;
}
.head__mark svg{display:block;width:100%;height:auto;fill:#fff}
.head__word{color:#fff;white-space:nowrap}

.head.is-hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .45s var(--ease), visibility .45s var(--ease);
}

.head-actions{
  position:fixed;z-index:55;
  top:18px;right:var(--pad);
  display:flex;align-items:center;gap:clamp(14px,2vw,22px);
  transition:opacity .45s var(--ease), visibility .45s var(--ease), transform .45s var(--ease);
}
.head-actions.is-hidden,
.head-actions.is-foot-hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-10px);
}

/* theme switch — Uiverse.io by Galahhad */
.theme-switch{
  --toggle-size:12px;
  --container-width:5.625em;
  --container-height:2.5em;
  --container-radius:6.25em;
  --container-light-bg:#3D7EAE;
  --container-night-bg:#1D1F2C;
  --circle-container-diameter:3.375em;
  --sun-moon-diameter:2.125em;
  --sun-bg:#ECCA2F;
  --moon-bg:#C4C9D1;
  --spot-color:#959DB1;
  --circle-container-offset:calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color:#fff;
  --clouds-color:#F3FDFF;
  --back-clouds-color:#AACADF;
  --transition:.5s cubic-bezier(0,-0.02,0.4,1.25);
  --circle-transition:.3s cubic-bezier(0,-0.02,0.35,1.17);
  margin-right:1cm;
  flex-shrink:0;
  cursor:pointer;
}
.theme-switch,
.theme-switch *,
.theme-switch *::before,
.theme-switch *::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-size:var(--toggle-size);
}
.theme-switch__container{
  width:var(--container-width);
  height:var(--container-height);
  background-color:var(--container-light-bg);
  border-radius:var(--container-radius);
  overflow:hidden;
  cursor:pointer;
  box-shadow:0em -0.062em 0.062em rgba(0,0,0,.25),0em 0.062em 0.125em rgba(255,255,255,.94);
  transition:var(--transition);
  position:relative;
}
.theme-switch__container::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  box-shadow:0em 0.05em 0.187em rgba(0,0,0,.25) inset,0em 0.05em 0.187em rgba(0,0,0,.25) inset;
  border-radius:var(--container-radius);
}
.theme-switch__checkbox{
  display:none;
}
.theme-switch__circle-container{
  width:var(--circle-container-diameter);
  height:var(--circle-container-diameter);
  background-color:rgba(255,255,255,.1);
  position:absolute;
  left:var(--circle-container-offset);
  top:var(--circle-container-offset);
  border-radius:var(--container-radius);
  box-shadow:inset 0 0 0 3.375em rgba(255,255,255,.1),inset 0 0 0 3.375em rgba(255,255,255,.1),0 0 0 0.625em rgba(255,255,255,.1),0 0 0 1.25em rgba(255,255,255,.1);
  display:flex;
  transition:var(--circle-transition);
  pointer-events:none;
}
.theme-switch__sun-moon-container{
  pointer-events:auto;
  position:relative;
  z-index:2;
  width:var(--sun-moon-diameter);
  height:var(--sun-moon-diameter);
  margin:auto;
  border-radius:var(--container-radius);
  background-color:var(--sun-bg);
  box-shadow:0.062em 0.062em 0.062em 0em rgba(254,255,239,.61) inset,0em -0.062em 0.062em 0em #a1872a inset;
  filter:drop-shadow(0.062em 0.125em 0.125em rgba(0,0,0,.25)) drop-shadow(0em 0.062em 0.125em rgba(0,0,0,.25));
  overflow:hidden;
  transition:var(--transition);
}
.theme-switch__moon{
  transform:translateX(100%);
  width:100%;
  height:100%;
  background-color:var(--moon-bg);
  border-radius:inherit;
  box-shadow:0.062em 0.062em 0.062em 0em rgba(254,255,239,.61) inset,0em -0.062em 0.062em 0em #969696 inset;
  transition:var(--transition);
  position:relative;
}
.theme-switch__spot{
  position:absolute;
  top:0.75em;
  left:0.312em;
  width:0.75em;
  height:0.75em;
  border-radius:var(--container-radius);
  background-color:var(--spot-color);
  box-shadow:0em 0.0312em 0.062em rgba(0,0,0,.25) inset;
}
.theme-switch__spot:nth-of-type(2){
  width:0.375em;
  height:0.375em;
  top:0.937em;
  left:1.375em;
}
.theme-switch__spot:nth-last-of-type(3){
  width:0.25em;
  height:0.25em;
  top:0.312em;
  left:0.812em;
}
.theme-switch__clouds{
  width:1.25em;
  height:1.25em;
  background-color:var(--clouds-color);
  border-radius:var(--container-radius);
  position:absolute;
  bottom:-0.625em;
  left:0.312em;
  box-shadow:0.937em 0.312em var(--clouds-color),-0.312em -0.312em var(--back-clouds-color),1.437em 0.375em var(--clouds-color),0.5em -0.125em var(--back-clouds-color),2.187em 0 var(--clouds-color),1.25em -0.062em var(--back-clouds-color),2.937em 0.312em var(--clouds-color),2em -0.312em var(--back-clouds-color),3.625em -0.062em var(--clouds-color),2.625em 0em var(--back-clouds-color),4.5em -0.312em var(--clouds-color),3.375em -0.437em var(--back-clouds-color),4.625em -1.75em 0 0.437em var(--clouds-color),4em -0.625em var(--back-clouds-color),4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition:0.5s cubic-bezier(0,-0.02,0.4,1.25);
}
.theme-switch__stars-container{
  position:absolute;
  color:var(--stars-color);
  top:-100%;
  left:0.312em;
  width:2.75em;
  height:auto;
  transition:var(--transition);
}
.theme-switch__checkbox:checked + .theme-switch__container{
  background-color:var(--container-night-bg);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container{
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover{
  left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}
.theme-switch__circle-container:hover{
  left:calc(var(--circle-container-offset) + 0.187em);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon{
  transform:translate(0);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds{
  bottom:-4.062em;
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container{
  top:50%;
  transform:translateY(-50%);
}

.menu-btn{
  display:flex;align-items:center;gap:10px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
}
.menu-btn[aria-expanded="true"]{
  color:#fff;
  gap:0;
  z-index:55;
}
.menu-btn[aria-expanded="true"] .menu-btn__ticks{display:none}
.menu-btn[aria-expanded="true"] span{
  display:block;
  width:22px;
  height:22px;
  position:relative;
  font-size:0;
}
.menu-btn[aria-expanded="true"] span::before,
.menu-btn[aria-expanded="true"] span::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:100%;height:1px;
  background:#fff;
}
.menu-btn[aria-expanded="true"] span::before{transform:translate(-50%,-50%) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translate(-50%,-50%) rotate(-45deg)}
.menu-btn__ticks{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:3px;
  width:42px;
  height:16px;
  pointer-events:none;
}
.menu-btn__ticks i{
  flex:0 0 1px;
  width:1px;
  height:8px;
  background:#fff;
  transform-origin:center bottom;
  transition:height .18s var(--ease);
}

/* ---------- theme (chiaro / scuro) ---------- */
[data-tone="black"]{
  --tone-bg:#000;
  --tone-fg:#fff;
  --tone-muted:rgba(255,255,255,.58);
  --tone-muted-soft:rgba(255,255,255,.88);
  --tone-muted-dim:rgba(255,255,255,.72);
  --tone-hair:rgba(255,255,255,.18);
  --tone-dot:#fff;
  --tone-plate-bg:#111;
  --tone-flip-bg:#0a0a0a;
  --tone-body:rgba(255,255,255,.78);
  --tone-body-dark:#222;
  --tone-border:rgba(255,255,255,.55);
  --tone-mini-border:#fff;
  --tone-marquee-border:#111;
  --tone-marquee-cross:#fff;
  --tone-seam:#fff;
  --tone-veil:rgba(0,0,0,.35);
  --tone-photo-filter:grayscale(1) contrast(1.12);
}
[data-tone="white"]{
  --tone-bg:#fff;
  --tone-fg:#000;
  --tone-muted:rgba(0,0,0,.42);
  --tone-muted-soft:rgba(0,0,0,.88);
  --tone-muted-dim:rgba(0,0,0,.72);
  --tone-hair:rgba(0,0,0,.14);
  --tone-dot:#000;
  --tone-plate-bg:#eee;
  --tone-flip-bg:#f5f5f5;
  --tone-body:rgba(0,0,0,.78);
  --tone-body-dark:#222;
  --tone-border:rgba(0,0,0,.55);
  --tone-mini-border:#000;
  --tone-marquee-border:#111;
  --tone-marquee-cross:#fff;
  --tone-seam:#000;
  --tone-veil:rgba(255,255,255,.35);
  --tone-photo-filter:grayscale(1) contrast(1.12);
}
html[data-theme="light"] [data-tone="black"]{
  --tone-bg:#fff;
  --tone-fg:#000;
  --tone-muted:rgba(0,0,0,.58);
  --tone-muted-soft:rgba(0,0,0,.88);
  --tone-muted-dim:rgba(0,0,0,.72);
  --tone-hair:rgba(0,0,0,.14);
  --tone-dot:#000;
  --tone-plate-bg:#eee;
  --tone-flip-bg:#f5f5f5;
  --tone-body:rgba(0,0,0,.78);
  --tone-body-dark:#222;
  --tone-border:rgba(0,0,0,.55);
  --tone-mini-border:#000;
  --tone-marquee-border:#ccc;
  --tone-marquee-cross:#000;
  --tone-seam:#000;
  --tone-veil:rgba(255,255,255,.35);
  --tone-photo-filter:invert(1) hue-rotate(180deg) grayscale(1) contrast(1.14) brightness(0.76);
}
html[data-theme="light"] [data-tone="white"]{
  --tone-bg:#000;
  --tone-fg:#fff;
  --tone-muted:rgba(255,255,255,.42);
  --tone-muted-soft:rgba(255,255,255,.88);
  --tone-muted-dim:rgba(255,255,255,.72);
  --tone-hair:rgba(255,255,255,.18);
  --tone-dot:#fff;
  --tone-plate-bg:#111;
  --tone-flip-bg:#0a0a0a;
  --tone-body:rgba(255,255,255,.78);
  --tone-body-dark:rgba(255,255,255,.78);
  --tone-border:rgba(255,255,255,.55);
  --tone-mini-border:#fff;
  --tone-marquee-border:#888;
  --tone-marquee-cross:#fff;
  --tone-seam:#fff;
  --tone-veil:rgba(0,0,0,.35);
  --tone-photo-filter:invert(1) hue-rotate(180deg) grayscale(1) contrast(1.14) brightness(0.76);
}
html[data-theme="light"],
html[data-theme="light"] body{
  background:#fff;
  color:#000;
}
html[data-theme="light"] .load{
  background:#fff;
  color:#000;
}
html[data-theme="light"] .load__mark svg g{fill:#000}
html[data-theme="light"] .load__rail{
  background:repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 6px);
}
html[data-theme="light"] .load__rail-fill{background:#000}
html[data-theme="light"] .menu{
  background:#fff;
  color:#000;
}
html[data-theme="light"] .menu__list a{border-bottom-color:var(--hair-d)}
html[data-theme="light"] .menu__list span{color:var(--mute-d)}
html[data-theme="light"] .menu__meta dt{color:var(--mute-d)}
html[data-theme="light"] .menu__meta a{border-bottom-color:#000}
html[data-theme="light"] .rail i{background:rgba(0,0,0,.45)}
html[data-theme="light"] .coords{
  background:#fff;
  color:#000;
  border-color:#000;
}
html[data-theme="light"] .player{
  background:#fff;
  color:#000;
}
html[data-theme="light"] .player canvas{background:#fff}
html[data-theme="light"] .player__prog{background:rgba(0,0,0,.2)}
html[data-theme="light"] .player__prog i{background:#000}
html[data-theme="light"] .mv__symbol{
  mix-blend-mode:normal;
}
html[data-theme="light"] .foot__word{
  mix-blend-mode:normal;
  color:#000;
  opacity:1;
}
html[data-theme="light"] .foot{
  border-top-color:rgba(0,0,0,.38);
}
html[data-theme="light"] .foot__mail{
  border-color:#000;
}
html[data-theme="light"] .sect__plate,
html[data-theme="light"] .story__still,
html[data-theme="light"] .cross__still,
html[data-theme="light"] .marquee__orb,
html[data-theme="light"] .sect__mini,
html[data-theme="light"] .mv__video,
html[data-theme="light"] [data-tone] canvas[data-film]{
  border:1px solid #000;
  box-sizing:border-box;
}
html[data-theme="light"] .sect__plate--cut,
html[data-theme="light"] .sect__mini--scelta::after{
  filter:invert(1) hue-rotate(180deg) grayscale(1) contrast(1.72) brightness(1.05);
}
html[data-theme="light"] .cross__still{
  filter:invert(1) hue-rotate(180deg) grayscale(1) contrast(1.85) brightness(1.12);
}
html[data-theme="light"] .story__still canvas[data-film="accent"]{
  filter:invert(1) hue-rotate(180deg) grayscale(1) contrast(1.62) brightness(1.06);
}
html[data-theme="light"] .player canvas[data-film]{
  filter:var(--tone-photo-filter);
}
[data-tone] canvas[data-film],
[data-tone] .story__still canvas{
  filter:var(--tone-photo-filter);
}

/* ---------- menu overlay ---------- */
.menu{
  position:fixed;inset:0;z-index:50;
  background:#000;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:14vh var(--pad) 8vh;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 1.15s var(--ease), visibility 1.15s var(--ease);
}
.menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.menu__inner{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1s var(--ease) .12s, transform 1.15s var(--ease) .08s;
}
.menu.is-open .menu__inner{
  opacity:1;
  transform:translateY(0);
}
.menu__list{list-style:none;display:grid;gap:clamp(18px,3vh,32px)}
.menu__list a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:24px;
  border-bottom:1px solid var(--hair);
  padding-bottom:14px;
}
.menu__list em{
  font-family:var(--en);
  font-size:clamp(1.6rem,4.4vw,3.4rem);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:.95;
}
.menu__list span{
  font-size:12px;
  color:var(--mute);
  padding-bottom:6px;
}
.menu__meta{
  margin-top:8vh;
  display:grid;
  gap:18px;
  font-size:12px;
  letter-spacing:.04em;
}
.menu__meta dt{color:var(--mute);margin-bottom:4px}
.menu__meta a{border-bottom:1px solid #fff;white-space:nowrap}
.menu__legal{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}
.menu__legal a{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  opacity:.72;
  transition:opacity .25s var(--ease);
}
@media (pointer:fine){
  .menu__legal a:hover{opacity:1}
}
html[data-theme="light"] .menu__legal a{color:var(--mute-d)}

/* ---------- main visual ---------- */
.mv{
  position:relative;
  height:100vh;
  overflow:hidden;
  background:var(--tone-bg);
  color:var(--tone-fg);
}
.mv__video,.mv__veil,.mv__canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
}
.mv__canvas{z-index:0;display:block}
.mv__veil{
  background:radial-gradient(ellipse at 50% 40%, transparent 40%, var(--tone-veil) 100%);
  pointer-events:none;
  z-index:2;
}
.mv__symbol svg g{fill:var(--tone-fg)}
.mv__symbol{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;
  pointer-events:none;
  mix-blend-mode:difference;
}
.mv__symbol svg{width:min(28vw,240px);opacity:.92}

/* ---------- story ---------- */
.story{
  min-height:100vh;
  background:var(--tone-bg);
  color:var(--tone-fg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18vh var(--pad) 16vh;
  gap:clamp(28px,5vh,48px);
}
.story__title{
  display:flex;
  flex-direction:column;
  gap:.06em;
  font-size:clamp(3.6rem,12vw,9.5rem);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.92;
  color:var(--tone-fg);
}
.story__lead{
  max-width:36rem;
  font-family:var(--en);
  font-size:clamp(0.75rem,1.1vw,0.9rem);
  font-weight:400;
  line-height:1.55;
  letter-spacing:-.01em;
  color:var(--tone-muted);
}
.story__still{
  align-self:flex-start;
  width:min(40vw,400px);
  margin-top:clamp(12px,3vh,28px);
  margin-left:clamp(8vw,14vw,18vw);
  aspect-ratio:16/10;
  overflow:hidden;
  opacity:.72;
}
.story__still canvas{
  width:100%;
  height:100%;
  display:block;
}

/* ---------- two sections ---------- */
.sections{
  background:var(--tone-bg);
  color:var(--tone-fg);
  padding:12vh var(--pad) 12vh;
}
.title{
  font-size:clamp(1.8rem,4vw,3.2rem);
  font-weight:400;
  letter-spacing:-.03em;
  margin-bottom:10vh;
  color:var(--tone-fg);
}
.title--light,.title--dark{color:var(--tone-fg)}
.title span{font-size:.42em;letter-spacing:0;opacity:.45}

.sect{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:clamp(24px,6vw,80px);
  padding:10vh 0 16vh;
  border-top:1px solid var(--tone-hair);
}
.sect__idx{
  position:sticky;top:28vh;
  align-self:start;
  display:flex;align-items:center;gap:10px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--tone-muted);
  height:fit-content;
}
.sect__idx i{
  width:8px;height:8px;border-radius:50%;
  background:var(--tone-dot);
}
.sect__en{
  font-size:clamp(2.4rem,7vw,6.4rem);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:.92;
  margin-bottom:.4em;
}
.sect__it{
  font-family:var(--it);
  font-size:clamp(1.15rem,2vw,1.6rem);
  font-weight:500;
  margin-bottom:2.4rem;
}
.sect__it span{opacity:.5;font-size:.82em}

.sect__plate,
.marquee__orb{
  filter:var(--tone-photo-filter);
}
.sect__plate{
  margin-top:8vh;
  width:min(100%,920px);
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
}
.sect__plate--square{
  background:var(--tone-plate-bg) url("/assets/img/reel/soglia-01.png") center / cover;
}
.sect__plate--square span{
  position:absolute;left:50%;top:50%;
  width:22%;aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid var(--tone-border);
  box-shadow:0 0 80px rgba(255,240,210,.12);
}
.sect__plate--cut{
  background:var(--tone-plate-bg) url("/assets/img/reel/soglia-04.png") center / cover;
}

.sect__flip{
  margin-top:8vh;
  width:min(100%,920px);
  aspect-ratio:16/9;
  perspective:1400px;
}
.sect__flip-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 4.8s var(--ease);
}
.sect__flip.is-flipped .sect__flip-inner{
  transform:rotateY(180deg);
}
.sect__flip-face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.sect__flip-face--front .sect__plate{
  margin-top:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
}
.sect__flip-face--back{
  transform:rotateY(180deg);
  background:var(--tone-flip-bg);
  border:1px solid var(--tone-hair);
  overflow:hidden;
}
.sect__mini{
  position:absolute;
  left:clamp(14px, 3vw, 28px);
  bottom:clamp(14px, 3vw, 28px);
  width:min(28%, 168px);
  aspect-ratio:16 / 9;
  margin:0;
  border:1px solid var(--tone-mini-border);
  overflow:hidden;
  background:transparent;
}
.sect__mini::after{
  content:'';
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:var(--tone-photo-filter);
}
.sect__mini--forma::after{
  background-image:url("/assets/img/reel/soglia-01.png");
}
.sect__mini--scelta::after{
  background-image:url("/assets/img/reel/soglia-04.png");
}
.sect__reveal{
  position:absolute;
  top:1cm;
  right:1cm;
  left:auto;
  z-index:2;
  max-width:min(82%, 32rem);
  margin:0;
  text-align:right;
  font-family:var(--en);
  font-size:clamp(1.15rem,2.4vw,1.65rem);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--tone-muted-soft);
}
.sect__reveal em{
  font-family:inherit;
  font-size:inherit;
  font-style:italic;
  font-weight:inherit;
}

.link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  padding-bottom:12px;
}
.link__arrow{
  display:inline-block;
  font-size:12px;
  transition:transform .35s var(--ease);
}
.link.is-hot .link__arrow{
  transform:translateX(7px);
}
.link__ticks{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:16px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  gap:4px;
  pointer-events:none;
}
.link__ticks i{
  flex:0 0 1px;
  width:1px;
  height:8px;
  background:currentColor;
  transform-origin:center bottom;
  transition:height .18s var(--ease);
}
.link--dark{color:var(--tone-fg)}

/* ---------- what's ---------- */
.what{
  background:var(--tone-bg);
  color:var(--tone-fg);
  padding:0 0 16vh;
  overflow:hidden;
}
.marquee{padding:10vh 0 8vh;overflow:hidden}
.marquee__track{display:flex;width:max-content;gap:8vw;will-change:transform}
.marquee__item{
  display:flex;align-items:center;gap:4vw;
  font-size:clamp(3.4rem,12vw,11rem);
  font-weight:400;
  letter-spacing:-.05em;
  line-height:1;
  white-space:nowrap;
}
.marquee__orb{
  width:clamp(64px,8vw,110px);
  height:clamp(64px,8vw,110px);
  border-radius:50%;
  border:1px solid var(--tone-marquee-border);
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
  background:var(--tone-plate-bg) url("/assets/img/reel/soglia-05.png") center / cover;
  pointer-events:none;
  cursor:default;
}
.marquee__orb::before,.marquee__orb::after{
  content:'';
  position:absolute;left:50%;top:50%;
  background:var(--tone-marquee-cross);
  mix-blend-mode:difference;
}
.marquee__orb::before{width:18px;height:1px;transform:translate(-50%,-50%)}
.marquee__orb::after{width:1px;height:18px;transform:translate(-50%,-50%)}

.what__copy{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,46%);
  gap:clamp(20px,4vw,48px);
  align-items:end;
  padding:0 var(--pad);
}
.what__main{max-width:920px}
.what__lead{
  font-family:var(--it);
  font-size:clamp(1.8rem,4.2vw,3.4rem);
  font-weight:500;
  line-height:1.15;
  margin:1.2rem 0 1.6rem;
}
.what__body{
  font-family:var(--it);
  font-size:clamp(1.15rem,1.8vw,1.45rem);
  line-height:1.65;
  max-width:46ch;
  margin-bottom:0;
  color:var(--tone-body-dark);
}
.what__note{
  margin:0;
  transform:translateY(3.3em);
  text-align:right;
  font-family:var(--it);
  font-size:clamp(1.15rem,1.8vw,1.45rem);
  font-weight:400;
  line-height:1.65;
  letter-spacing:-.01em;
  color:var(--tone-body-dark);
  max-width:none;
  width:100%;
  justify-self:stretch;
}
@media (max-width:860px){
  .what__copy{
    grid-template-columns:1fr;
    align-items:start;
  }
  .what__note{
    justify-self:stretch;
    max-width:none;
    margin-top:1.65em;
    transform:none;
  }
}

/* ---------- cross still ---------- */
.cross{
  position:relative;
  height:100vh;
  background:var(--tone-bg);
  color:var(--tone-fg);
  overflow:hidden;
}
.cross__still{
  position:absolute;inset:0;
  background:var(--tone-plate-bg) url("/assets/img/reel/soglia-03.png") center / cover no-repeat;
  filter:var(--tone-photo-filter);
}

/* ---------- lab ---------- */
.lab{
  background:var(--tone-bg);
  color:var(--tone-fg);
  padding:6vh var(--pad) 18vh;
  width:100%;
}
.lab__kicker{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--tone-muted);
  margin-bottom:1.6rem;
}
.lab__title{
  font-size:clamp(2rem,5vw,4.2rem);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1.05;
  margin-bottom:1.6rem;
  max-width:920px;
}
.lab__body{
  font-family:var(--it);
  font-size:1.25rem;
  line-height:1.7;
  max-width:42ch;
}
.lab__body em{
  font-family:inherit;
  font-size:inherit;
  font-style:italic;
  font-weight:700;
}

.foot-seam{
  height:1px;
  background:var(--tone-seam);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s var(--ease);
}
.foot-seam.is-on{opacity:1}

/* ---------- marchio ---------- */
.mark-story{
  background:var(--tone-bg);
  color:var(--tone-fg);
  min-height:100vh;
  padding:14vh var(--pad) 16vh;
  width:100%;
}
.mark-story__left{
  margin-bottom:1.6rem;
}
.mark-story__kicker{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--tone-muted);
  margin-bottom:1.4rem;
}
.mark-story__title{
  font-size:clamp(2rem,5vw,4.2rem);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1.05;
  margin:0;
}
.mark-story__body{
  font-family:var(--it);
  font-size:1.25rem;
  line-height:1.7;
  max-width:42ch;
  color:var(--tone-muted-dim);
  margin:0;
}
.mark-story__body strong{
  font-weight:700;
  color:var(--tone-fg);
}
@media (min-width:960px){
  .mark-story{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:clamp(32px,5vw,72px);
    padding:var(--pad);
    max-width:none;
  }
  .mark-story__left{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    margin:0;
    padding:0 clamp(16px,3vw,40px);
  }
  .mark-story__right{
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }
  .mark-story__body{
    max-width:44ch;
  }
}

/* ---------- catch ---------- */
.catch{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(24px,4vh,40px);
  padding:var(--pad);
  background:var(--tone-bg);
  color:var(--tone-fg);
  text-align:center;
}
.catch__title{
  font-family:var(--it);
  font-size:clamp(2.2rem,6.4vw,5.6rem);
  font-weight:500;
  line-height:1.12;
}

/* ---------- player ---------- */
.player{
  position:fixed;inset:0;z-index:55;
  background:#000;
  display:grid;
  grid-template-rows:1fr auto;
}
.player[hidden]{display:none}
.player canvas{width:100%;height:100%;min-height:0;display:block;background:#000}
.player__bar{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:18px;
  align-items:center;
  padding:16px var(--pad) 22px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.player__prog{
  grid-column:1 / -1;
  height:2px;background:rgba(255,255,255,.2);
}
.player__prog i{display:block;height:100%;width:0;background:#fff}
.player__ctrls{display:flex;gap:18px;align-items:center}
.player__ctrls .is-on{text-decoration:underline}
.player__exit{
  position:absolute;top:22px;right:var(--pad);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- footer ---------- */
.foot{
  background:var(--tone-bg);
  color:var(--tone-fg);
  padding:4vh var(--pad) 6vh;
  border-top:1px solid var(--tone-hair);
}
.foot__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:8vh;
}
.foot__top-gap{
  display:none;
}
.foot.is-pinned .foot__top{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:4;
  margin:0;
  padding:18px var(--pad) 14px;
  background:var(--tone-bg);
  box-sizing:border-box;
}
.foot.is-pinned .foot__top-gap{
  display:block;
  height:calc(18px + 14px + 1.1em);
  margin-bottom:8vh;
}
.foot__grid{
  display:grid;
  gap:48px;
}
@media (min-width:860px){
  .foot__grid{grid-template-columns:1fr 1.2fr}
}
.foot__mail{
  display:block;
  padding:28px;
  border:1px solid var(--tone-fg);
  min-height:180px;
}
.foot__mail-kicker{
  margin:0 0 14px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tone-muted);
}
.foot__mail strong{
  display:block;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  font-weight:400;
  letter-spacing:-.03em;
  margin-bottom:12px;
  white-space:nowrap;
}
.foot__mail span{font-family:var(--it);font-size:0.95rem;opacity:.7;line-height:1.55}
.foot__nav{
  display:flex;flex-wrap:wrap;gap:18px 32px;
  align-content:start;
  font-size:clamp(1.4rem,3vw,2.2rem);
  letter-spacing:-.03em;
}
.foot__word{
  margin-top:10vh;
  font-size:min(20rem, max(2.8rem, calc((100vw - 2 * var(--pad)) / 5.1)));
  font-weight:400;
  letter-spacing:-.06em;
  line-height:.8;
  white-space:nowrap;
  text-align:center;
  transform:translateX(-0.4%);
  mix-blend-mode:difference;
}
.foot__copy{margin-top:1.2rem;font-size:11px;letter-spacing:.14em;opacity:.45}
.foot__legal{
  margin-top:4vh;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}
.foot__legal a{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tone-muted);
  opacity:.72;
  transition:opacity .25s var(--ease);
}
@media (pointer:fine){
  .foot__legal a:hover{opacity:1}
}

/* ---------- chrome: crocetta sempre; coordinate solo sulle foto (non all’inizio) ---------- */
.cursor{
  position:fixed;z-index:70;
  left:0;top:0;
  width:22px;height:22px;
  margin:-11px 0 0 -11px;
  pointer-events:none;
  mix-blend-mode:difference;
  opacity:0;
  transition:opacity .55s var(--ease);
}
.cursor.is-on{opacity:1}
.cursor.is-hide{opacity:0}
.cursor i{
  position:absolute;
  background:#fff;
}
.cursor i:first-child{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%)}
.cursor i:last-child{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}

.coords{
  position:fixed;z-index:71;
  left:0;top:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 11px;
  background:#000;
  color:#fff;
  border:1px solid #fff;
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .6s var(--ease), visibility .6s;
}
.coords__dash{opacity:.55}
@media (pointer:fine){
  .coords.is-on{
    opacity:1;
    visibility:visible;
  }
}
@media (pointer:coarse){
  .cursor,.coords{display:none}
  .js body,button,a{cursor:auto}
}

.scroll-cue{
  position:fixed;z-index:34;
  left:auto;right:var(--pad);bottom:5vh;
  transform:none;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  mix-blend-mode:difference;
  color:#fff;
  pointer-events:none;
  transition:opacity .6s;
}
.scroll-cue.is-gone{opacity:0}
.scroll-cue i{
  width:18px;height:18px;border-radius:50%;
  border:1px solid #fff;
  position:relative;
}
.scroll-cue i::after{
  content:'';
  position:absolute;left:50%;top:4px;
  width:4px;height:4px;border-radius:50%;background:#fff;
  transform:translateX(-50%);
  animation:drop 1.6s var(--ease) infinite;
}
.scroll-cue span{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
}
@keyframes drop{0%,20%{opacity:0;transform:translate(-50%,0)}50%{opacity:1}100%{opacity:0;transform:translate(-50%,8px)}}

.rail{
  position:fixed;z-index:33;
  right:14px;top:18vh;bottom:18vh;
  width:calc(1cm + 22px);
  padding-left:1cm;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
  gap:5px;
  pointer-events:auto;
  cursor:none;
}
.rail i{
  flex:0 0 1px;
  width:8px;
  height:1px;
  background:rgba(255,255,255,.45);
  transform-origin:right center;
  transition:width .16s var(--ease), background-color .16s var(--ease);
  pointer-events:none;
}
.rail i.is-progress{
  background:#e10600;
}

/* ---------- reduced / mobile ---------- */
@media (max-width:720px){
  .head{
    right:118px;
  }
  .head__logo{
    flex-wrap:nowrap;
    min-width:0;
    gap:8px;
  }
  .head__word{
    white-space:nowrap;
    letter-spacing:.14em;
    font-size:11px;
  }
  .theme-switch{
    --toggle-size:11px;
    margin-right:0;
  }
  .sect{grid-template-columns:1fr;gap:18px;padding:8vh 0}
  .sect__idx{position:static}
  .coords,.rail{display:none}
  .story__still{display:none}
  .sect__mini{display:none}
  .js body{cursor:auto}
  button,a{cursor:auto}
}
@media (prefers-reduced-motion:reduce){
  .js.is-booting .load{display:none}
  html{scroll-behavior:auto}
  .scroll-cue i::after{animation:none}
  .js body{cursor:auto}
}

/* ---------- info page (agmstudio.net/info) ---------- */
.info-page{
  cursor:auto;
}
.info-page button,
.info-page a{
  cursor:pointer;
}
.info-head{
  right:220px;
  mix-blend-mode:difference;
  background:none;
  border-bottom:0;
  padding:18px var(--pad) 0;
}
.info-home-btn{
  pointer-events:auto;
  mix-blend-mode:difference;
}
.info-home-btn span{
  white-space:nowrap;
}
html[data-theme="light"] .info-head{
  mix-blend-mode:difference;
}
.info-head__brand{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.info-main{
  padding-top:64px;
}
.info-hero{
  background:var(--tone-bg);
  color:var(--tone-fg);
  padding:12vh var(--pad) 14vh;
  max-width:920px;
}
.info-kicker{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--tone-muted);
  margin-bottom:1.4rem;
}
.info-kicker--dark{
  color:var(--tone-muted);
}
.info-hero__title{
  font-size:clamp(2.4rem,6vw,5rem);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1.02;
  margin-bottom:1.6rem;
}
.info-hero__title span{
  font-family:var(--it);
  font-style:italic;
  font-weight:500;
}
.info-hero__lead{
  font-family:var(--it);
  font-size:clamp(1.2rem,2vw,1.45rem);
  line-height:1.7;
  max-width:52ch;
  color:var(--tone-muted-dim);
}
.info-hero__lead em{
  font-style:italic;
  font-weight:600;
  color:var(--tone-fg);
}
.info-hero__lead--meta{
  margin-top:1rem;
  font-size:1rem;
  opacity:.75;
}
.info-block__body a{
  color:var(--tone-fg);
  text-decoration:underline;
  text-underline-offset:.2em;
}
.info-block__body code{
  font-family:var(--en);
  font-size:.85em;
  letter-spacing:.04em;
}
.info-block{
  background:var(--tone-bg);
  color:var(--tone-fg);
  padding:10vh var(--pad) 12vh;
  border-top:1px solid var(--tone-seam);
}
.info-block__grid{
  display:grid;
  gap:clamp(24px,4vw,48px);
  max-width:1100px;
  margin:0 auto;
}
@media (min-width:860px){
  .info-block__grid{
    grid-template-columns:minmax(200px,34%) minmax(0,1fr);
    align-items:start;
  }
}
.info-block__title{
  font-size:clamp(1.6rem,3.5vw,2.6rem);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.1;
  margin:0;
}
.info-block__body{
  font-family:var(--it);
  font-size:1.2rem;
  line-height:1.75;
  color:var(--tone-muted-dim);
}
.info-block__body p{
  margin:0 0 1.2rem;
}
.info-block__body p:last-child{
  margin-bottom:0;
}
.info-block__body strong{
  font-weight:700;
  color:var(--tone-fg);
}
.info-list{
  list-style:none;
  margin:0 0 1.6rem;
  padding:0;
  display:grid;
  gap:1.4rem;
}
.info-list li{
  display:grid;
  gap:.35rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--tone-seam);
}
.info-list li:last-child{
  padding-bottom:0;
  border-bottom:0;
}
.info-list strong{
  font-family:var(--en);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--tone-fg);
}
.info-list span{
  display:block;
}
.info-tags{
  list-style:none;
  margin:0 0 1.2rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.info-tags li{
  font-family:var(--en);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.55rem .85rem;
  border:1px solid var(--tone-seam);
  color:var(--tone-fg);
}
.info-steps{
  margin:0 0 1.4rem;
  padding:0 0 0 1.2rem;
  display:grid;
  gap:1rem;
}
.info-steps li{
  padding-left:.2rem;
}
.info-steps strong{
  color:var(--tone-fg);
}
.info-note{
  font-size:1.05rem;
  opacity:.85;
  margin-top:.4rem;
}
.info-note--last{
  margin-top:1.2rem;
}
.info-mail{
  display:inline-grid;
  gap:.5rem;
  margin:1.4rem 0 .6rem;
  padding:1.2rem 0;
  border-top:1px solid var(--tone-seam);
  border-bottom:1px solid var(--tone-seam);
  min-width:min(100%,420px);
  transition:opacity .25s var(--ease);
}
.info-mail span{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tone-muted);
}
.info-mail strong{
  font-family:var(--it);
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--tone-fg);
  white-space:nowrap;
}
@media (pointer:fine){
  .info-mail:hover{
    opacity:.72;
  }
}
.info-block--contact{
  padding-bottom:14vh;
}
.info-foot{
  background:var(--tone-bg);
  color:var(--tone-muted);
  padding:2rem var(--pad) 3rem;
  border-top:1px solid var(--tone-seam);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-align:center;
}