/* ==========================================================================
   Paolo Fusaro — Animazioni (portatile 3D in CSS + tocchi allo scroll)
   Si appoggia ai token di style.css. Solo transform/opacity: niente reflow.
   Tutto disattivato con prefers-reduced-motion.
   ========================================================================== */

/* ---------- Header: ombra leggera dopo l'hero ---------- */
.site-header{ transition:box-shadow .3s var(--ease), background-color .3s var(--ease); }
.site-header.is-scrolled{
  background:rgba(250,249,246,.94);
  box-shadow:0 6px 24px -18px rgba(20,20,20,.35);
}

/* ---------- Dato "siti online" nell'hero ---------- */
.hero-count{
  display:flex; align-items:baseline; gap:.6rem;
  margin-top:2.5rem; padding-top:1.25rem;
  border-top:1px solid var(--line);
  max-width:520px;
}
.hero-count strong{
  font-size:1.6rem; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  min-width:2ch;
}
.hero-count span{ font-size:.85rem; color:var(--gray-dark); }

/* ==========================================================================
   Showcase: portatile che si apre e si raddrizza scorrendo
   --p (0 → 1) è impostato da anim.js in base alla posizione di scroll
   ========================================================================== */
.showcase{
  padding:5rem 0 1rem;
  overflow:clip;            /* niente scroll orizzontale durante la rotazione */
}
.laptop{
  --p:1;                    /* senza JS: portatile già aperto */
  --lid-from:-62deg;
  width:min(860px, 100%);
  margin:0 auto;
  perspective:2200px;
  perspective-origin:50% 0%;
  transform:translateY(calc((1 - var(--p)) * 40px)) scale(calc(.9 + var(--p) * .1));
  transform-origin:50% 100%;
  will-change:transform;
}
.laptop-lid{
  position:relative;
  background:#1B1B1D;
  border-radius:18px 18px 4px 4px;
  padding:2.1% 2.1% 2.6%;
  transform-origin:50% 100%;
  transform:rotateX(calc((1 - var(--p)) * var(--lid-from)));
  box-shadow:
    0 0 0 1px #2C2C2F inset,
    0 40px 80px -40px rgba(20,20,20,.45);
  will-change:transform;
}
/* fotocamera */
.laptop-lid::before{
  content:""; position:absolute; top:.9%; left:50%;
  width:6px; height:6px; margin-left:-3px; border-radius:50%;
  background:#2E2E32;
}
.laptop-screen{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-radius:3px;
  background:var(--bg-alt);
}
.laptop-screen img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:top center;
  opacity:0;
  transition:opacity .9s var(--ease);
}
.laptop-screen img.is-active{ opacity:1; }
/* riflesso appena percettibile sul vetro */
.laptop-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%);
}

.laptop-base{
  position:relative;
  width:114%; margin-left:-7%;
  height:clamp(10px, 1.7vw, 16px);
  background:linear-gradient(180deg, #E4E2DD 0%, #CFCCC5 55%, #B9B6AE 100%);
  border-radius:2px 2px 14px 14px;
  box-shadow:0 18px 30px -16px rgba(20,20,20,.35);
}
/* incavo per aprire il coperchio */
.laptop-base::before{
  content:""; position:absolute; top:0; left:50%;
  width:15%; height:42%; transform:translateX(-50%);
  background:#BDBAB2;
  border-radius:0 0 8px 8px;
}

.showcase-caption{
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap;
  margin-top:2rem;
  font-size:.82rem; color:var(--gray-dark);
}
.showcase-caption a{
  font-family:var(--font-mono); font-size:.76rem; color:var(--ink);
  border-bottom:1px solid var(--line-strong);
  transition:border-color .2s;
}
.showcase-caption a:hover{ border-color:var(--ink); }
.showcase-dots{ display:flex; gap:.4rem; }
.showcase-dots button{
  width:6px; height:6px; padding:0; border:0; border-radius:50%;
  background:var(--line-strong); cursor:pointer;
  transition:background .3s, transform .3s;
}
.showcase-dots button[aria-current="true"]{ background:var(--ink); transform:scale(1.3); }
/* area di tocco più ampia senza cambiare l'aspetto */
.showcase-dots button{ position:relative; }
.showcase-dots button::after{ content:""; position:absolute; inset:-8px; }

/* ---------- Comparsa morbida delle sezioni ---------- */
.js-anim .rv{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:var(--d, 0s);
}
.js-anim .rv.in{ opacity:1; transform:none; }

/* ---------- Linea dei passaggi che si riempie ---------- */
.js-anim .steps li{ position:relative; border-top-color:var(--line-strong); }
.js-anim .steps li::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--ink);
  transform-origin:0 50%;
  transform:scaleX(var(--fill, 0));
}

/* ---------- Mobile ---------- */
@media (max-width: 560px){
  .showcase{ padding:3.5rem 0 .5rem; }
  .laptop{ --lid-from:-38deg; }
  .laptop-lid{ border-radius:12px 12px 3px 3px; }
  .hero-count{ margin-top:2rem; }
}

/* ---------- Movimento ridotto: tutto fermo e visibile ---------- */
@media (prefers-reduced-motion: reduce){
  .laptop{ --p:1 !important; transform:none; }
  .laptop-lid{ transform:none; }
  .laptop-screen img{ transition:none; }
  .js-anim .rv{ opacity:1; transform:none; transition:none; }
  .js-anim .steps li::before{ transform:none; }
  .site-header{ transition:none; }
}