/* ============================================================
   Hedrapp · Animazioni del marchio H
   Geometria ricavata dal disegno originale: montanti con grazie,
   arco a terminali tondi, arco sempre disegnato per ultimo.

   Regola invariabile: l'arco non viene mai scalato. Uno scale su
   un tracciato con stroke ne deforma lo spessore. Solo traslazioni,
   stroke-dashoffset e opacità.

   Le variabili --hd-mark-* vivono in tokens.css, non qui.
   viewBox di riferimento: -12 -12 124 124
   ============================================================ */

.hd-mark { display: block; overflow: visible; }
.hd-mark * { transform-box: view-box; }
.hd-side rect { fill: var(--hd-mark-ink); }

.hd-arc {
  fill: none;
  stroke: var(--hd-mark-red);
  stroke-width: 11.45;
  stroke-linecap: round;
}

/* ---------- dimensionamento ----------------------------------
   Il viewBox ha 12 unità di margine per lato: il marchio occupa
   100 unità su 124. Senza compensazione un loader a 32 px
   disegnerebbe un marchio di 25,81 px, più piccolo del 19%
   rispetto al logo statico alla stessa misura nominale.
   --hd-mark-size è l'altezza REALE del marchio.              */

.hd-mark {
  --hd-mark-size: 32px;
  width: calc(var(--hd-mark-size) * 1.24);
  height: calc(var(--hd-mark-size) * 1.24);
  margin: calc(var(--hd-mark-size) * -0.12);
}

/* ---------- 01 · TRANSITO — attesa breve indeterminata ---------- */
/* Il marchio resta integro: scorre un riflesso chiaro sopra l'arco. */
.hd--transito .hd-glint {
  fill: none;
  stroke: var(--hd-mark-seat);
  stroke-width: 11.45;
  stroke-linecap: round;
  stroke-dasharray: 15 85;
  opacity: .5;
  animation: hd-transito calc(1.4s * var(--hd-mark-speed)) linear infinite;
}
@keyframes hd-transito {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}

/* ---------- 02 · SI SIEDE — attesa lunga ---------- */
/* Il punto entra da sinistra, scende lungo la curva, si assesta al
   centro e resta seduto. Non esce dall'altra parte.                */
.hd--siede .hd-ball {
  fill: var(--hd-mark-seat);
  animation: hd-siede calc(2.4s * var(--hd-mark-speed)) linear infinite;
}
@keyframes hd-siede {
  0%   { transform: translate(16.75px, 55.6px); opacity: 0; animation-timing-function: cubic-bezier(.4,0,.7,.5); }
  10%  { opacity: 1; }
  22%  { transform: translate(30.05px, 67.93px); }
  38%  { transform: translate(40.03px, 73.14px); animation-timing-function: cubic-bezier(.3,0,.2,1); }
  50%  { transform: translate(50px, 74.88px); }
  56%  { transform: translate(50px, 72.5px); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  63%  { transform: translate(50px, 74.88px); }
  88%  { transform: translate(50px, 74.88px); opacity: 1; }
  97%, 100% { transform: translate(50px, 74.88px); opacity: 0; }
}

/* ---------- 03 · MONTAGGIO — apertura, una volta sola ---------- */
/* I due montanti arrivano da fuori campo con le loro grazie,
   l'arco si scrive per ultimo da sinistra a destra.               */
.hd--montaggio { overflow: hidden; }
.hd--montaggio .hd-l { animation: hd-mont-l calc(1.5s * var(--hd-mark-speed)) both; }
.hd--montaggio .hd-r { animation: hd-mont-r calc(1.5s * var(--hd-mark-speed)) both; }
.hd--montaggio .hd-arc {
  stroke-dasharray: 100;
  animation: hd-mont-arc calc(1.5s * var(--hd-mark-speed)) both;
}
@keyframes hd-mont-l {
  0%       { transform: translateY(-140px); animation-timing-function: cubic-bezier(.2,.9,.25,1); }
  30%,100% { transform: translateY(0); }
}
@keyframes hd-mont-r {
  0%       { transform: translateY(140px); animation-timing-function: cubic-bezier(.2,.9,.25,1); }
  30%,100% { transform: translateY(0); }
}
@keyframes hd-mont-arc {
  0%,24%   { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(.25,.8,.3,1); }
  56%,100% { stroke-dashoffset: 0; }
}

/* ---------- 04 · SCANSIONE — riposo del lettore QR ---------- */
/* Il marchio resta immobile: si muove solo il fascio nel mirino.  */
.hd--scansione .hd-frame {
  fill: none;
  stroke: var(--hd-mark-ink);
  stroke-width: 2.8;
  stroke-linecap: butt;
  opacity: .22;
}
.hd--scansione .hd-beam {
  animation: hd-scan calc(2.6s * var(--hd-mark-speed)) cubic-bezier(.45,0,.55,1) infinite;
}
.hd--scansione .hd-beam-glow { fill: var(--hd-mark-red); opacity: .12; }
.hd--scansione .hd-beam-line { fill: var(--hd-mark-red); }
@keyframes hd-scan {
  0%,100% { transform: translateY(2px); }
  50%     { transform: translateY(98px); }
}

/* ---------- 05 · ECO — conferma inviata, una volta sola ---------- */
/* Due repliche dell'arco si allontanano e svaniscono. Lo spessore
   resta costante grazie a vector-effect.                          */
.hd--eco .hd-echo {
  fill: none;
  stroke: var(--hd-mark-red);
  stroke-width: 4.5;
  stroke-linecap: round;
  opacity: 0;
  transform-origin: 50px 55.6px;
  vector-effect: non-scaling-stroke;
}
.hd--eco .hd-e1  { animation: hd-eco-1 calc(2.4s * var(--hd-mark-speed)) cubic-bezier(.2,.6,.35,1) both; }
.hd--eco .hd-e2  { animation: hd-eco-2 calc(2.4s * var(--hd-mark-speed)) cubic-bezier(.2,.6,.35,1) both; }
.hd--eco .hd-arc { animation: hd-eco-arc calc(2.4s * var(--hd-mark-speed)) cubic-bezier(.3,0,.3,1) both; }
@keyframes hd-eco-1 {
  0%       { opacity: .6; transform: translateY(0) scale(1); }
  42%      { opacity: 0;  transform: translateY(16px) scale(1.13); }
  43%,100% { opacity: 0; }
}
@keyframes hd-eco-2 {
  0%,16%   { opacity: 0;  transform: translateY(0) scale(1); }
  18%      { opacity: .6; }
  58%      { opacity: 0;  transform: translateY(16px) scale(1.13); }
  59%,100% { opacity: 0; }
}
@keyframes hd-eco-arc {
  0%       { transform: translateY(0); }
  9%       { transform: translateY(2.5px); }
  22%,100% { transform: translateY(0); }
}

/* ---------- 06 · SGANCIO — micro-interazione, mai automatica ---------- */
/* Si innesca su hover, tap o focus di un antenato con .hd-trigger. */
.hd-trigger:hover .hd--sgancio .hd-l,
.hd-trigger:active .hd--sgancio .hd-l,
.hd-trigger:focus-visible .hd--sgancio .hd-l { animation: hd-sg-l calc(.44s * var(--hd-mark-speed)) cubic-bezier(.3,1.5,.45,1); }
.hd-trigger:hover .hd--sgancio .hd-r,
.hd-trigger:active .hd--sgancio .hd-r,
.hd-trigger:focus-visible .hd--sgancio .hd-r { animation: hd-sg-r calc(.44s * var(--hd-mark-speed)) cubic-bezier(.3,1.5,.45,1); }
.hd-trigger:hover .hd--sgancio .hd-arc,
.hd-trigger:active .hd--sgancio .hd-arc,
.hd-trigger:focus-visible .hd--sgancio .hd-arc { animation: hd-sg-a calc(.44s * var(--hd-mark-speed)) cubic-bezier(.3,1.5,.45,1); }
@keyframes hd-sg-l { 0%,100% { transform: translate(0,0); } 38% { transform: translate(-7px,-4px); } }
@keyframes hd-sg-r { 0%,100% { transform: translate(0,0); } 38% { transform: translate(7px,-4px); } }
@keyframes hd-sg-a { 0%,100% { transform: translateY(0); }  38% { transform: translateY(7px); } }

/* ---------- accessibilità ----------------------------------
   Con il movimento ridotto le animazioni cessano, ma sulle varianti
   a ciclo continuo resta una pulsazione lenta: senza, l'utente non
   capisce che il sistema sta ancora lavorando.                 */

@media (prefers-reduced-motion: reduce) {
  .hd-mark *,
  .hd-trigger:hover .hd--sgancio *,
  .hd-trigger:active .hd--sgancio *,
  .hd-trigger:focus-visible .hd--sgancio * {
    animation: none !important;
    transform: none !important;
  }
  .hd-mark .hd-arc { stroke-dashoffset: 0 !important; }
  .hd-glint, .hd-ball, .hd-echo, .hd-beam { opacity: 0 !important; }

  .hd--transito .hd-arc,
  .hd--siede .hd-arc,
  .hd--scansione .hd-arc {
    animation: hd-respiro 2s ease-in-out infinite !important;
  }
}
@keyframes hd-respiro {
  0%,100% { opacity: 1; }
  50%     { opacity: .42; }
}