/* Sign Fogli (data-hx-sign="fogli"): the Roadmap window is the top sheet of a pile. The coloured sheets slide in behind it from the right, out of order, and square up under it.
   Works on every background. Knobs: data-hf-variant (pila | aperta), data-hf-pal (blu | caldi | notte), data-hf-n (2-5), --hf-step, --hf-scatter, --hf-speed. hero-fogli.js fits the sheets to the window. */
.hx-hero {
  --hf-step: 7px; --hf-scatter: 1; --hf-speed: 1;
  --hf-s5: #0b2447; --hf-s4: #1b49c2; --hf-s3: #0373e2; --hf-s2: #9fd3fa; --hf-s1: #e6dccb;
}
[data-hf-pal="caldi"] { --hf-s5: #b9a07c; --hf-s4: #d2bd9c; --hf-s3: #e3d4bb; --hf-s2: #cfe6f8; --hf-s1: #efe6d6; }
[data-hf-pal="notte"] { --hf-s5: #050f2b; --hf-s4: #0a1e52; --hf-s3: #13399c; --hf-s2: #62cefe; --hf-s1: #bfe7ff; }
.site .hx-hero.light[data-hx-sign="fogli"] .prm-window { box-shadow: var(--prm-window-shadow, none), 0 0 0 1px rgb(2 55 108 / 0.1), 0 24px 48px -28px rgb(60 40 10 / 0.45); }

/* the pile: same box as the window (top and height from hero-fogli.js), each sheet a step further right and a little higher */
.hf-pile { display: none; position: absolute; z-index: -1; left: 0; right: 0; top: var(--hf-wt, 44px); height: var(--hf-wh, 467px); pointer-events: none; }
[data-hx-sign="fogli"] .hf-pile { display: block; }
.hf-sh { position: absolute; inset: 0; border-radius: 12px; background: var(--c); transform: translate(calc(var(--k) * var(--hf-step)), calc(var(--k) * var(--hf-step) * -0.6)) rotate(var(--hf-fan, 0deg)); transform-origin: 0% 100%; box-shadow: 0 1px 1px rgb(60 40 10 / 0.08), 0 14px 26px -18px rgb(60 40 10 / 0.4); }
.hf-sh[data-k="5"] { --c: var(--hf-s5); } .hf-sh[data-k="4"] { --c: var(--hf-s4); } .hf-sh[data-k="3"] { --c: var(--hf-s3); } .hf-sh[data-k="2"] { --c: var(--hf-s2); } .hf-sh[data-k="1"] { --c: var(--hf-s1); }
[data-hf-variant="aperta"] .hf-sh { --hf-fan: calc(var(--k) * 0.35deg); }
/* at rest, "pila": the sheets fan out left and right of the window and show their top edges above it, like a real pile; they stay inside the Roadmap block, below the copy */
[data-hf-rest="pila"] .hf-sh { --dx: calc(var(--hf-step) * 4); transform: translate(calc(var(--side) * var(--dx) * var(--k) * 0.55), calc(var(--hf-step) * var(--k) * -1.15)) rotate(calc(var(--side) * var(--tilt))); transform-origin: 50% 100%; }
[data-hf-rest="pila"] .hf-sh[data-k="1"] { --side: -1; --tilt: 0.5deg; }
[data-hf-rest="pila"] .hf-sh[data-k="2"] { --side: 1; --tilt: 0.7deg; }
[data-hf-rest="pila"] .hf-sh[data-k="3"] { --side: -1; --tilt: 0.9deg; }
[data-hf-rest="pila"] .hf-sh[data-k="4"] { --side: 1; --tilt: 0.6deg; }
[data-hf-rest="pila"] .hf-sh[data-k="5"] { --side: -1; --tilt: 0.3deg; }
[data-hf-n="4"] .hf-sh[data-k="5"], [data-hf-n="3"] .hf-sh:is([data-k="5"], [data-k="4"]), [data-hf-n="2"] .hf-sh:is([data-k="5"], [data-k="4"], [data-k="3"]) { display: none; }

/* entrance: sheets come from beyond the right edge, bottom sheet first, rising slightly; they stay behind the window and below the copy in every frame */
.hx-play .hf-sh { animation: hf-in calc(900ms / var(--hf-speed)) cubic-bezier(0.23, 1, 0.32, 1) backwards; animation-delay: calc((200ms + (5 - var(--k)) * 120ms) / var(--hf-speed)); }
@keyframes hf-in { from { transform: translate(calc(var(--x0, 60vw) * var(--hf-scatter)), calc(var(--y0, 40px) * var(--hf-scatter))) rotate(calc(var(--r0, 1deg) * var(--hf-scatter))); } }

@media (max-width: 860px) {
  .hx-hero { --hf-step: 4px; }
  .hf-sh { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-play .hf-sh { animation: none; }
}