/* ==========================================================
   Dark Whisper — strato di movimento condiviso
   Molle fisiche, profondità, vetro. Stesso design, più fluido.
   ========================================================== */
:root{
  /* molla critica (nessun rimbalzo) — risposta 0.5s */
  --spring:cubic-bezier(.2,.8,.2,1);
  /* molla con un filo di rimbalzo — solo per gesti con slancio */
  --spring-bounce:cubic-bezier(.3,1.35,.5,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --glass:rgba(18,9,30,.58);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --spring:linear(0, .0198, .069, .1355, .2109, .2893, .3667, .4406, .5096, .5727, .6296, .6805, .7255, .765, .7995, .8294, .8552, .8774, .8964, .9126, .9265, .9382, .9481, .9566, .9636, .9696, .9746, .9788, .9824, .9853, .9878, .9899, .9916, .993, .9942, .9952, .996, .9967, .9973, .9978, 1);
    --spring-bounce:linear(0, .018, .0648, .131, .2093, .2936, .3795, .4637, .5436, .6177, .6851, .7452, .7979, .8434, .8821, .9144, .941, .9625, .9795, .9927, 1.0026, 1.0097, 1.0146, 1.0177, 1.0194, 1.0199, 1.0196, 1.0188, 1.0175, 1.0159, 1.0143, 1.0126, 1.0109, 1.0093, 1.0078, 1.0064, 1.0052, 1.0041, 1.0032, 1.0024, 1);
  }
}

/* ---------- tipografia: tracking e leading per dimensione ---------- */
h1,h2,h3{text-wrap:balance;font-optical-sizing:auto}
p{text-wrap:pretty}
body{text-rendering:optimizeLegibility}

/* ---------- profondità: luci in parallasse + grana ---------- */
body{position:relative}
.ambient{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.ambient-layer{position:absolute;inset:0;will-change:transform}
.orb{position:absolute;border-radius:50%;width:var(--s);height:var(--s);background:radial-gradient(circle at 50% 50%,var(--c) 0%,transparent 68%);opacity:var(--o,.5)}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.028;transform:translateZ(0);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- barra in vetro che si materializza scorrendo ---------- */
.header-float{position:fixed;z-index:80;top:12px;left:50%;width:min(1200px,calc(100% - 24px));padding:9px 10px 9px 12px!important;margin:0;border-radius:20px;opacity:0;transform:translate3d(-50%,-28px,0) scale(.96);pointer-events:none;transition:opacity .35s var(--ease-out),transform .7s var(--spring);isolation:isolate}
.header-float::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid #ffffff14;border-top-color:#ffffff26;box-shadow:0 18px 50px #0007,inset 0 1px 0 #ffffff0f}
.header-float::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1.5px;border-radius:2px;background:linear-gradient(90deg,#8f4cff,#ff4fb8);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.85}
.header-float.show{opacity:1;transform:translate3d(-50%,0,0) scale(1);pointer-events:auto}
.header-float .monogram{width:38px;height:38px;border-radius:13px;font-size:17px;box-shadow:0 0 22px #c24cff44}
.header-float .brand{gap:11px;font-size:13px}
.header-float .brand small{font-size:10px;letter-spacing:2.4px}
.header-float nav{gap:22px}
.header-float .nav-contact{padding:8px 16px}

/* ---------- comparsa: le cose arrivano, non appaiono ---------- */
html.js-motion .rv{opacity:0;translate:0 34px;filter:blur(8px);transition:opacity .9s var(--ease-out),translate 1.05s var(--spring),filter .8s var(--ease-out),border-color .3s,box-shadow .3s,background-color .3s;transition-delay:calc(var(--i,0) * 75ms)}
html.js-motion .rv.in{opacity:1;translate:0 0;filter:blur(0)}
html.js-motion .rv-scale{scale:.965}
html.js-motion .rv-scale.in{scale:1}
html.js-motion .rv-scale{transition-property:opacity,translate,filter,scale,border-color,box-shadow,background-color;transition-duration:.9s,1.05s,.8s,1.1s,.3s,.3s,.3s;transition-timing-function:var(--ease-out),var(--spring),var(--ease-out),var(--spring),ease,ease,ease}

/* titoli: ogni riga sale da una maschera */
.line{display:block;padding-bottom:.12em;margin-bottom:-.12em}
h1>.line{background:none;color:inherit;-webkit-text-fill-color:currentColor}
html.js-motion .line{clip-path:inset(-40% -10% 0 -10%)}
html.js-motion .line.done{clip-path:none}
.line-in{display:inline-block}
html.js-motion .line-in{translate:0 110%;transition:translate 1.15s var(--spring);transition-delay:calc(120ms + var(--i,0) * 110ms)}
html.js-motion.hero-ready .line-in{translate:0 0}
h1 .line-in>span{background:linear-gradient(100deg,#e9d7ff 2%,#be83ff 38%,#ff68c7 90%);background-clip:text;-webkit-background-clip:text;color:transparent}

/* fallback: se lo script non parte, mostra tutto */
html.motion-fallback .rv,html.motion-fallback .line-in{opacity:1!important;translate:none!important;filter:none!important;scale:none!important}
html.motion-fallback .line{clip-path:none!important}

/* ---------- card: inclinazione + riflesso di luce ---------- */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt.tilt{transition:border-color .3s,box-shadow .35s,background-color .3s,opacity .9s var(--ease-out),translate 1.05s var(--spring),filter .8s var(--ease-out)}
.glare{position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--ease-out);background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),#ffffff1c,transparent 42%);mix-blend-mode:soft-light}
.tilt.is-hover .glare{opacity:1}
.tilt.is-hover{box-shadow:0 30px 70px #0008,0 0 0 1px var(--accent,var(--project-accent,#d38af3))}
.music-card{position:relative;overflow:hidden}
.project-preview>img{will-change:translate}

/* ---------- pulsanti: magnetici, premuti all'istante, riflesso ---------- */
.button{position:relative;isolation:isolate;overflow:hidden}
.button.mag{transition:box-shadow .35s,background-color .3s,border-color .3s,scale .18s var(--ease-out)}
.button:active,.nav-contact:active{scale:.965;transition-duration:.08s}
.primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 25%,#ffffff38 48%,transparent 70%);translate:-130% 0;transition:translate .9s var(--ease-out)}
.primary:hover::after{translate:130% 0}
.nav-contact{transition:border-color .3s,background-color .3s,scale .18s var(--ease-out)}
nav a{transition:color .25s}

/* preventivo: scelte con un piccolo "click" fisico */
.svc{transition:border-color .25s,background .3s,box-shadow .35s,scale .4s var(--spring),transform .4s var(--spring)}
.svc:active{scale:.975;transition-duration:.08s}
.svc-toggle{transition:background .25s,border-color .25s,scale .55s var(--spring-bounce)}
.svc.is-on .svc-toggle{scale:1.08}
.svc.is-on .svc-toggle{animation:pop .55s var(--spring-bounce)}
@keyframes pop{0%{scale:.7}100%{scale:1.08}}
.who-card:active{scale:.985}
.who-check{transition:background .3s,border-color .3s,scale .55s var(--spring-bounce)}
.who-card[aria-checked=true] .who-check{animation:pop .55s var(--spring-bounce);scale:1.08}
.total-month strong,#tot-setup{font-variant-numeric:tabular-nums}
.mobile-bar:not([hidden]){animation:bar-in .7s var(--spring) both}
@keyframes bar-in{from{opacity:0;translate:0 30px}}
.send-done:not([hidden]){animation:bar-in .9s var(--spring) both}

/* ---------- transizioni tra le pagine ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s var(--ease-out) both}
::view-transition-new(root){animation:vt-in .6s var(--spring) both}
@keyframes vt-out{to{opacity:0;filter:blur(8px);transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:translateY(18px)}}

@media(max-width:700px){
  .header-float{top:8px;width:calc(100% - 16px);border-radius:18px}
  .header-float .brand>span:last-child{display:none}
  .header-float nav{gap:14px;font-size:13px;flex-wrap:nowrap!important}
  .header-float .monogram{width:34px;height:34px;font-size:15px}
  html.js-motion .rv{translate:0 22px;filter:blur(5px)}
}

/* ---------- versione alleggerita per dispositivi lenti ---------- */
html.motion-lite .grain{display:none}
html.motion-lite .rv{filter:none!important}
html.motion-lite .header-float::before{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(18,9,30,.82)}
html.motion-lite .ambient-layer{will-change:auto}

/* ---------- accessibilità ---------- */
@media(prefers-reduced-motion:reduce){
  .header-float{transition:opacity .2s ease;transform:translate3d(-50%,0,0)!important}
  .glare,.primary::after{display:none}
  .svc.is-on .svc-toggle,.who-card[aria-checked=true] .who-check,.mobile-bar:not([hidden]),.send-done:not([hidden]){animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.15s}
  @keyframes vt-in{from{opacity:0}}
  @keyframes vt-out{to{opacity:0}}
}
@media(prefers-reduced-transparency:reduce){
  .header-float::before{background:#160b22;-webkit-backdrop-filter:none;backdrop-filter:none}
  .grain{display:none}
}
@media(prefers-contrast:more){
  .header-float::before{background:#0d0616;border-color:#ffffff66}
  .grain{display:none}
}