/* ============================================================
   fam salvade. — black & white, gritty, minimal
   Sezioni composte su uno stage 16:9 con coordinate in percento.
   ============================================================ */

:root{
  --light:#ffffff;
  --dark:#000000;
  --on-light:#000000;
  --on-dark:#ffffff;

  /* paper = il tono dipinto dietro i cut-out */
  --paper:var(--dark);
  --el-inv:1;
  --el-blend:screen;

  --f:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-vcr:'VT323',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1rem,3.5vw,3rem);
  --fade-t:7svh;
  --fade-b:7svh;
}

@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}

/* invert — ogni superficie e ogni cut-out si capovolgono insieme */
body.is-invert{
  --light:#000000;
  --dark:#ffffff;
  --on-light:#ffffff;
  --on-dark:#000000;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--dark);color:var(--on-dark);
  font-family:var(--f);line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.is-booting{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:currentColor;color:var(--light)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

.backdrop{position:fixed;inset:0;z-index:-1;background:var(--dark)}
.sec{position:relative;overflow:hidden}

/* cut-out neri su trasparenza: più scuri della carta chiara → multiply,
   invertiti e più chiari della carta scura → screen */
.sec--light{--paper:var(--light);color:var(--on-light);--el-blend:multiply;--el-inv:0}
.sec--dark {--paper:var(--dark); color:var(--on-dark); --el-blend:screen;  --el-inv:1}
body.is-invert .sec--light{--el-blend:screen;  --el-inv:1}
body.is-invert .sec--dark {--el-blend:multiply;--el-inv:0}

.el,.boot__img,.lay--icons img{filter:invert(var(--el-inv));user-select:none;-webkit-user-drag:none}
.el{position:absolute;pointer-events:none;z-index:1;max-width:none;
    mix-blend-mode:var(--el-blend);transform:translateY(var(--ty,0))}

/* ============ LOADER ============ */
.boot{
  position:fixed;inset:0;z-index:200;background:var(--light);color:var(--on-light);
  --el-inv:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  transition:opacity .5s var(--ease),visibility .5s;
}
body.is-invert .boot{--el-inv:1}
.boot.is-done{opacity:0;visibility:hidden}
.boot__img{width:min(230px,44vw);image-rendering:pixelated}
.boot__bar{width:min(230px,44vw);height:2px;background:currentColor;opacity:.18;position:relative;overflow:hidden}
.boot__bar span{position:absolute;inset:0 100% 0 0;background:var(--on-light);transition:right .16s linear}
.boot__pct{font-family:var(--f-vcr);font-size:1.1rem;letter-spacing:.14em;color:var(--on-light);opacity:.55}

/* ============ CONTROLLI FISSI ============ */
.ctl{
  position:fixed;right:var(--gutter);bottom:calc(var(--gutter) - .3rem);z-index:95;
  display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;
  mix-blend-mode:difference;
  opacity:0;transition:opacity .8s var(--ease) .2s;
}
.is-lit .ctl{opacity:1}
.ctl__b{
  background:none;border:0;padding:.18rem 0;cursor:pointer;
  font-family:var(--f);font-size:clamp(.72rem,1vw,.86rem);color:#fff;
  line-height:1.35;position:relative;
}
.ctl__b::after{content:'';position:absolute;left:0;right:100%;bottom:.1rem;height:1px;background:currentColor;transition:right .35s var(--ease)}
.ctl__b:hover::after,.ctl__b[aria-pressed="true"]::after{right:0}

/* ============ STAGE ============ */
.stage{
  position:absolute;inset:0;margin:auto;
  width:max(100vw, calc(100svh * 16 / 9));
  height:max(100svh, calc(100vw * 9 / 16));
  container-type:size;
  background:var(--paper);
  --vtop:calc(50% - 50svh);
  --vbot:calc(50% + 50svh);
  -webkit-mask-image:linear-gradient(to bottom,
      transparent var(--vtop),
      #000 calc(var(--vtop) + var(--fade-t)),
      #000 calc(var(--vbot) - var(--fade-b)),
      transparent var(--vbot));
          mask-image:linear-gradient(to bottom,
      transparent var(--vtop),
      #000 calc(var(--vtop) + var(--fade-t)),
      #000 calc(var(--vbot) - var(--fade-b)),
      transparent var(--vbot));
}
.hero .stage{--fade-t:0}
.contact .stage{--fade-b:0}
.lay{position:absolute;margin:0;z-index:5;line-height:1;letter-spacing:-.02em;font-weight:400;transform:translateY(var(--ty,0))}

/* ---- 01 front ---- */
.hero{height:100svh;display:grid;place-items:center}
.el--star-a{left:66.30%;top:-12.41%;width:31.46%}
.el--star-b{left:-10.78%;top:12.13%;width:60.78%}
.el--star-a,.el--star-b{transform:translateY(var(--ty,0)) rotate(var(--spin))}
.el--star-a{animation:spin-cw 128s linear infinite}
.el--star-b{animation:spin-ccw 173s linear infinite}
@keyframes spin-cw {to{--spin:360deg}}
@keyframes spin-ccw{to{--spin:-360deg}}
.el--dice{left:32.45%;top:19.26%;width:35.10%}
.lay--fam    {left:30.5%;top:43.0%;font-size:4cqw;font-style:italic}
.lay--salvade{left:52.5%;top:43.0%;font-size:4cqw;font-style:italic}

.cue{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:6;padding:.6rem}
.cue i{display:block;width:1px;height:34px;background:currentColor;opacity:.3;position:relative;overflow:hidden}
.cue i::after{content:'';position:absolute;inset:0;background:currentColor;animation:sd 2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes sd{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---- 02 portali (machine) ---- */
.machine{height:100svh;display:flex;flex-direction:column;position:relative}
.machine .stage{z-index:1}
.el--flower{
  height:104svh;width:auto;
  left:calc(50cqw - 56.3svh);
  top:calc(50cqh - 52svh);
  transform:translateY(var(--ty,0)) rotate(var(--spin));
  animation:spin-cw 214s linear infinite;
}
.machine__stage{position:relative;flex:1;min-height:0;z-index:2;display:grid;place-items:center}

/* lo schermo — un monitor CRT al centro */
.tv{width:min(58vw,92svh * 16 / 10);cursor:pointer;transition:transform .5s var(--ease)}
.tv:hover{transform:translateY(-4px)}
.tv__frame{border:2px solid var(--on-dark);background:var(--dark);padding:clamp(.5rem,1.2vw,1rem)}
.tv__screen{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;outline:1px solid var(--on-dark)}
.tv__art{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .28s steps(3)}
.tv__art img{width:38%;filter:invert(1)}
.tv__art.is-swap{opacity:0}
.tv__static{position:absolute;inset:0;opacity:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:stx .28s steps(4) infinite}
@keyframes stx{0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(5%,-5%)}75%{transform:translate(-3%,-6%)}100%{transform:translate(0,0)}}
.tv.is-off .tv__static{opacity:.9}
.tv.is-off .tv__art,.tv.is-off .tv__label{opacity:0}
.tv__scan{position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#000 2px 3px)}
.tv__label{position:absolute;left:4%;bottom:6%;display:flex;flex-direction:column;gap:.15em;transition:opacity .3s}
.tv__label b{font-family:var(--f-vcr);font-weight:400;font-size:clamp(1.3rem,2.6vw,2.4rem);color:#fff;letter-spacing:.04em}
.tv__label span{font-size:clamp(.62rem,.9vw,.8rem);color:#fff;opacity:.55;letter-spacing:.12em;text-transform:uppercase}
.tv__foot{display:flex;gap:.4rem;justify-content:flex-end;padding-top:.45rem}
.tv__foot i{width:7px;height:7px;border-radius:50%;border:1px solid var(--on-dark);opacity:.5}

.rail{
  position:absolute;left:var(--gutter);bottom:clamp(1.6rem,5vh,3.2rem);z-index:6;
  display:flex;align-items:baseline;gap:.45rem;font-family:var(--f-vcr);color:var(--on-dark);
}
.rail b{font-size:clamp(1.8rem,4vw,3rem);font-weight:400;line-height:1;font-variant-numeric:tabular-nums}
.rail i{font-style:normal;font-size:1rem;opacity:.45}
.rail__open{
  margin-left:.7rem;align-self:center;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid currentColor;font-size:1rem;line-height:1;
  transition:background .25s,color .25s,transform .4s var(--ease);
}
.rail__open:hover{background:var(--on-dark);color:var(--dark);transform:translate(2px,-2px)}
.rail.is-swap b{animation:flick .3s steps(2) both}
@keyframes flick{0%{opacity:0}50%,100%{opacity:1}}

/* frecce — pulsanti veri, non decorazione */
.keys{position:absolute;right:var(--gutter);bottom:clamp(1.6rem,5vh,3.2rem);z-index:7;display:flex;gap:.4rem;color:var(--on-dark)}
.k{
  font-family:var(--f-vcr);font-size:1.1rem;line-height:1;
  background:none;border:1px solid currentColor;color:inherit;
  min-width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  opacity:.55;transition:opacity .25s,background .25s,color .25s,transform .4s var(--ease);
}
.k:hover,.k:focus-visible{opacity:1;background:var(--on-dark);color:var(--dark)}
.k:active{transform:translateY(2px)}

/* ---- 03 about ---- */
.about{height:100svh;display:grid;place-items:center}
.el--cd-a{left:-5.99%;top:-23.61%;width:41.35%}
.el--cd-b{left:82.08%;top:45.83%;width:29.90%}
.lay--abouth{left:50%;top:26%;transform:translate(-50%,var(--ty,0));font-family:var(--f-vcr);font-size:3.3cqw;letter-spacing:.06em}
.lay--bio{
  left:50%;top:38%;width:44%;margin-left:-22%;
  font-size:1.78cqw;line-height:1.3;letter-spacing:0;
  text-align:justify;text-justify:inter-word;hyphens:auto;
}
.lay--bio p{margin:0}
.lay--bio p+p{margin-top:.15em}

/* ---- 04 contact ---- */
.contact{height:100svh;display:grid;place-items:center}
.contact .stage{
  top:auto;bottom:0;margin-block:0;
  --vtop:calc(100% - 100svh);--vbot:100%;
}
.el--cards{left:26.67%;top:-3.52%;width:46.67%}
.lay--contact{left:30.5%;top:40.0%;font-size:3.78cqw;font-style:italic}
.lay--ci    {left:60.2%;top:40.0%;font-size:3.78cqw;font-style:italic}
.lay--icons{left:45.94%;top:89.7%;display:flex;align-items:center;gap:1.1%}
.lay--icons img{width:100%;transition:transform .4s var(--ease)}
.lay--icons a:first-child{width:3.70cqw}
.lay--icons a:last-child{width:3.02cqw}
.lay--icons a:hover img{transform:translateY(-4px)}

/* ============ MOTION ============ */
.el,.lay{will-change:transform}

/* ============ REVEAL ============ */
[data-rise]{opacity:0;transform:translateY(18px);filter:blur(6px)}
.is-lit [data-rise]{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease) .1s,transform 1s var(--ease) .1s,filter .9s var(--ease) .1s}

/* ============ SCHERMI STRETTI ============ */
@media (max-width:820px){
  /* le frecce restano: su telefono sono l'UNICO modo per cambiare portale */
  .keys{left:var(--gutter);right:var(--gutter);justify-content:center;gap:.6rem}
  .k{min-width:52px;height:52px;font-size:1.3rem;opacity:.85}
  .rail{bottom:auto;top:clamp(4.5rem,11vh,7rem)}
  .hero,.about,.contact{height:100svh;min-height:0}
  .stage{
    width:100vw;height:100svh;
    -webkit-mask-image:none;mask-image:none;
  }
  .lay--fam    {left:14%;top:40%;font-size:11cqw}
  .lay--salvade{left:40%;top:48%;font-size:11cqw}
  .el--star-a{left:52%;top:-6%;width:60%}
  .el--star-b{left:-24%;top:56%;width:80%}
  .el--dice{left:16%;top:12%;width:58%}

  .tv{width:92vw}
  .el--flower{height:70svh;left:calc(50cqw - 37.9svh);top:calc(50cqh - 35svh)}

  .lay--abouth{font-size:8cqw;top:18%}
  .lay--bio{width:78%;margin-left:-39%;font-size:4.4cqw;top:30%}
  .el--cd-a{left:-18%;top:-10%;width:64%}
  .el--cd-b{left:70%;top:72%;width:48%}

  .lay--contact{left:16%;top:34%;font-size:10cqw}
  .lay--ci{left:64%;top:34%;font-size:10cqw}
  .lay--icons{left:38%;top:80%}
  .lay--icons a:first-child{width:11cqw}
  .lay--icons a:last-child{width:9cqw}
  .el--cards{left:12%;top:-2%;width:76%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  [data-rise]{opacity:1;transform:none;filter:none}
}