/* ==========================================================
   Casapoint — componenti condivisi
   1. Header flottante allo scroll
   2. Pulsante "torna su" con avanzamento sul bordo
   ========================================================== */

/* ---------- 1. Header: si stacca e diventa una barra flottante compatta allo scroll ----------
   assets/motion.js aggiunge .scrolled e aggiorna --read (avanzamento lettura 0 → 1).
   Sfondo e blur stanno sul ::before: niente backdrop-filter/transform su header.site,
   così il menu mobile position:fixed resta a tutto schermo.                              */
header.site{
  position:sticky;top:0;z-index:40;margin-inline:auto;width:100%;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid transparent;border-bottom-color:var(--line);border-radius:0;
  transition:top .45s cubic-bezier(.2,.7,.2,1),width .5s cubic-bezier(.2,.7,.2,1),
             border-radius .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s;
}
/* menu mobile aperto: sopra gli altri elementi fissi */
header.site.menu-open{z-index:90;}
header.site::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:rgba(236,234,225,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .25s;
}
header.site.scrolled{
  top:10px;width:min(1080px,calc(100% - 32px));
  border-color:var(--line);border-radius:0;
  box-shadow:0 10px 30px rgba(22,38,46,.10);
}
header.site.scrolled::before{background:rgba(243,241,234,.88);}
header.site .bar{transition:height .35s cubic-bezier(.2,.7,.2,1),padding .35s cubic-bezier(.2,.7,.2,1);}
header.site.scrolled .bar{height:54px;max-width:none;padding-inline:20px;}
header.site .brand-logo{transition:height .35s cubic-bezier(.2,.7,.2,1);}
header.site.scrolled .brand-logo{height:28px;}
/* barra di avanzamento lettura (sul bordo inferiore, anche quando flotta) */
header.site::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:var(--accent,#AF3A2C);transform-origin:left;transform:scaleX(var(--read,0));
  transition:left .5s cubic-bezier(.2,.7,.2,1),right .5s cubic-bezier(.2,.7,.2,1);
}
header.site.scrolled::after{left:0;right:0;border-radius:0;}
@media(max-width:720px){
  header.site.scrolled{top:8px;width:calc(100% - 16px);border-radius:0;}
  header.site.scrolled .bar{height:52px;padding-inline:14px;}
  header.site.scrolled .brand-logo{height:26px;}
}
@media(prefers-reduced-motion:reduce){ header.site::after{display:none;} }

/* ---------- 2. Torna su ----------
   Creato da assets/motion.js. Pulsante quadrato 48×48: il bordo è un <rect>
   disegnato esattamente sul perimetro (46×46, tratto 2 px). La parte rossa
   avanza con lo scroll: stroke-dasharray = perimetro (184), lo
   stroke-dashoffset viene impostato da motion.js (184 → 0). Niente pathLength
   né calc() senza unità, che Firefox/Safari gestiscono in modo incoerente.  */
.to-top{
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:50;
  width:48px;height:48px;padding:0;display:grid;place-items:center;
  background:rgba(243,241,234,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--ink);border:0;border-radius:0;cursor:pointer;
  box-shadow:0 8px 24px rgba(22,38,46,.14);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1),visibility .3s,color .2s,background .2s;
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{color:var(--accent,#AF3A2C);background:#fff;}
.to-top:focus-visible{outline:2px solid var(--accent,#AF3A2C);outline-offset:3px;}
.to-top svg{grid-area:1/1;display:block;}
.to-top-ring{width:48px;height:48px;}
.to-top-ring rect{fill:none;stroke-width:2;shape-rendering:crispEdges;width:46px;height:46px;} /* geometria fissata: niente ereditarietà da altre regole */
.to-top-ring .to-top-track{stroke:var(--line,#CBC6B8);}
.to-top-ring .to-top-fill{stroke:var(--accent,#AF3A2C);stroke-linecap:butt;stroke-dasharray:184;stroke-dashoffset:184;}
.to-top-arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;transition:transform .25s;}
.to-top:hover .to-top-arrow{transform:translateY(-2px);}
/* menu mobile aperto: il pulsante non deve coprirlo */
body:has(header.site.menu-open) .to-top{opacity:0;visibility:hidden;}
@media(prefers-reduced-motion:reduce){ .to-top,.to-top-arrow{transition:none;} }