/* ============================================================
   Tecnolines Italia — livello di movimento
   Tutto è progressivo: senza JavaScript o con "riduci movimento"
   il sito resta completo e leggibile.
   ============================================================ */

/* ---------- transizioni tra pagine ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root){ animation:vt-out .28s cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){ animation:vt-in .46s cubic-bezier(.16,.84,.28,1) both }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(16px) } }

.header{ view-transition-name:site-header }
.footer{ view-transition-name:site-footer }
::view-transition-old(site-header),::view-transition-new(site-header),
::view-transition-old(site-footer),::view-transition-new(site-footer){ animation:none }

/* ---------- palcoscenico dell'hero ---------- */
.stage{ position:relative; isolation:isolate; background:var(--navy-abyss); color:rgba(255,255,255,.78) }
.stage__sticky{ position:relative; overflow:hidden; isolation:isolate; padding-top:var(--header-h) }

.stage__scene{ position:absolute; inset:0; z-index:-2 }
.stage__layer{ position:absolute; inset:0; overflow:hidden }
.stage__layer > svg{
  position:absolute; bottom:0; left:0; height:100%; width:auto;
  transform:translate3d(calc(var(--p,0) * var(--travel,0%) + var(--mx,0px) * var(--depth,0)),0,0);
  will-change:transform;
}
.stage__layer--far{ --travel:-14%; --depth:.4 }
.stage__layer--mid{ --travel:-34%; --depth:1 }
.stage__layer--near{ --travel:-64%; --depth:2.2 }

.stage__sticky::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(94deg, var(--navy-abyss) 24%, rgba(0,27,55,.82) 52%, rgba(0,43,85,.28) 100%),
    radial-gradient(90% 70% at 78% 88%, rgba(0,88,168,.30), transparent 60%);
}

.stage__in{ padding-block:clamp(64px,9vw,120px) clamp(72px,10vw,132px); position:relative; z-index:1 }

/* impulso di energia lungo i conduttori */
.pulse{ fill:var(--red); opacity:0 }
.pulse{ animation:pulse-run 7s linear infinite; offset-rotate:0deg }
@keyframes pulse-run{
  0%   { offset-distance:0%;   opacity:0 }
  8%   { opacity:1 }
  92%  { opacity:1 }
  100% { offset-distance:100%; opacity:0 }
}

/* ---------- le tre battute ---------- */
.beats{ position:relative; margin-top:26px; min-height:1.5em }
.beat{
  font-family:var(--serif); font-weight:300; color:#fff;
  font-size:clamp(1.25rem,2.3vw,2rem); line-height:1.25; letter-spacing:-.015em; margin:0;
}
.beat:not(:first-child){ display:none }

.stage.is-cinematic .beats{ min-height:2.6em }
.stage.is-cinematic .beat{
  position:absolute; inset:0; display:block;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .7s cubic-bezier(.16,.84,.28,1);
}
.stage.is-cinematic .beat.is-on{ opacity:1; transform:none }

/* indicatore di avanzamento */
.stage__meter{ display:none; align-items:center; gap:16px; margin-top:38px }
.stage.is-cinematic .stage__meter{ display:flex }
.stage__meter b{
  font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.16em;
  color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums;
}
.stage__track{ position:relative; width:min(220px,32vw); height:2px; background:rgba(255,255,255,.2) }
.stage__track i{
  position:absolute; inset:0 auto 0 0; display:block; background:var(--red);
  width:calc(var(--p,0) * 100%); transition:width .15s linear;
}
.stage__hint{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45); display:none; align-items:center; gap:10px; margin-top:34px;
}
.stage.is-cinematic .stage__hint{ display:flex }
.stage__hint::after{
  content:""; width:1px; height:26px; background:linear-gradient(rgba(255,255,255,.6),transparent);
  animation:hint 2.4s ease-in-out infinite;
}
@keyframes hint{ 0%,100%{ transform:scaleY(.4); opacity:.3 } 50%{ transform:scaleY(1); opacity:1 } }

/* ---------- rivelazione dei titoli ----------
   Stato di partenza applicato solo dal JS (classe .mask).
   .is-in apre la maschera, .is-done la rimuove del tutto:
   nessun titolo può restare ritagliato in modo permanente. */
.mask{
  clip-path:inset(0 0 108% 0); transform:translateY(12px);
  transition:clip-path 1.05s cubic-bezier(.16,.84,.28,1), transform 1.05s cubic-bezier(.16,.84,.28,1);
}
.mask.is-in{ clip-path:inset(0 0 -30% 0); transform:none }
.mask.is-done{ clip-path:none; transform:none }

/* ---------- filo tricolore che entra ---------- */
.flagline::after{ transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.16,.84,.28,1) .15s }
.flagline--right::after{ transform-origin:right }
.flagline.is-in::after{ transform:none }

/* ---------- numeri che salgono ---------- */
.facts__value{ font-variant-numeric:tabular-nums }
.prj__kv{ font-variant-numeric:tabular-nums }

/* ---------- cronologia che si accende ---------- */
.timeline{ position:relative }
.timeline::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--hair);
}
.timeline::after{
  content:""; position:absolute; left:0; top:0; width:2px; background:var(--navy);
  height:calc(var(--tp,0) * 100%);
}
.tl{ padding-left:34px }
.tl__year{ position:relative }
.tl__year::before{
  content:""; position:absolute; left:-39px; top:10px; width:9px; height:9px;
  background:var(--paper); border:2px solid var(--hair); border-radius:50%;
  transition:border-color .4s, background .4s, transform .4s;
}
.tl.is-lit .tl__year::before{ border-color:var(--red); background:var(--red); transform:scale(1.15) }

/* ---------- arco della fascia finale ---------- */
.cta__art path{
  stroke-dasharray:var(--len,1600); stroke-dashoffset:var(--len,1600);
  transition:stroke-dashoffset 1.8s cubic-bezier(.22,.75,.3,1);
}
.cta.is-in .cta__art path{ stroke-dashoffset:0 }

/* ---------- micro-interazioni ---------- */
.tile{ overflow:hidden }
.tile__code{ transition:color .3s }
.tile:hover .tile__code{ color:var(--red) }
.tile h3{ transition:transform .4s cubic-bezier(.16,.84,.28,1) }
.tile:hover h3{ transform:translateX(6px) }

.cert__code{ transition:transform .4s cubic-bezier(.16,.84,.28,1) }
.cert:hover .cert__code{ transform:translateX(5px) }

.prj{ position:relative; overflow:hidden }
.prj::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--red);
  transition:width .5s cubic-bezier(.16,.84,.28,1);
}
.prj:hover::after{ width:100% }

.btn,.link{ position:relative }
.btn{ isolation:isolate }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.14);
  transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.16,.84,.28,1);
}
.btn:hover::after{ transform:scaleX(1); transform-origin:left }


/* ---------- ingresso di pagina ---------- */
.pagehead h1,.stage h1{ animation:head-in 1s cubic-bezier(.16,.84,.28,1) both }
.pagehead .lede,.stage .lede{ animation:head-in 1s cubic-bezier(.16,.84,.28,1) .12s both }
.pagehead .crumbs,.stage .eyebrow{ animation:head-in .8s cubic-bezier(.16,.84,.28,1) both }
@keyframes head-in{ from{ opacity:0; transform:translateY(20px) } }

@media (max-width:900px){
  .stage__layer--near{ --travel:-40% }
}

@media (prefers-reduced-motion:reduce){
  @view-transition { navigation:none }
  .pulse{ animation:none; opacity:0 }
  .mask{ clip-path:none; transform:none }
  .pagehead h1,.stage h1,.pagehead .lede,.stage .lede,.pagehead .crumbs,.stage .eyebrow{ animation:none }
  .flagline::after{ transform:none }
  .cta__art path{ stroke-dasharray:none; stroke-dashoffset:0 }
  .stage__hint::after{ animation:none }
}