/* A single eight-second clock: fill 12–28%, sign 32–64%, ready 70–92%.
   Pen positions are sampled at equal distances along the signature, matching its reveal. */
.sign-hero { width: 100%; max-width: 380px; margin: 10px auto 20px; }
.sign-hero-picture { display: block; width: 100%; height: auto; }
.sign-hero figcaption { margin-top: 4px; color: var(--ink-2); font-size: 16px; line-height: 1.4; text-align: center; }
.sign-hero-paper { fill: var(--cream); fill-opacity: .035; stroke: var(--cream); stroke-width: 2.4; stroke-linejoin: round; }
.sign-hero-fold { fill: none; stroke: var(--cream); stroke-opacity: .55; stroke-width: 2; stroke-linejoin: round; }
.sign-hero-heading { fill: none; stroke: var(--cream); stroke-width: 4; stroke-linecap: round; }
.sign-hero-rule { fill: none; stroke: var(--cream); stroke-opacity: .3; stroke-width: 2; stroke-linecap: round; }
.sign-hero-field { fill: var(--accent); fill-opacity: .07; stroke: var(--cream); stroke-opacity: .25; stroke-width: 1.5; }
.sign-hero-box { fill: none; stroke: var(--cream); stroke-opacity: .5; stroke-width: 1.5; }
.sign-hero-entry, .sign-hero-tick, .sign-hero-signature { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.sign-hero-entry { stroke-width: 3; animation: sign-hero-entry 8s linear infinite; }
.sign-hero-tick { stroke-width: 1.8; animation: sign-hero-tick 8s linear infinite; }
.sign-hero-signature { stroke-width: 2.5; animation: sign-hero-ink 8s linear infinite; }
.sign-hero-pen { opacity: 0; transform: translate(130px, 151px); animation: sign-hero-pen 8s linear infinite; }
.sign-hero-pen-body { fill: var(--ground-2); stroke: var(--cream); stroke-width: 1.8; stroke-linejoin: round; }
.sign-hero-pen-detail { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.sign-hero-ready { animation: sign-hero-ready 8s ease-in-out infinite; }
.sign-hero-route { fill: none; stroke: var(--cream); stroke-opacity: .5; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 6; }
.sign-hero-download-disc { fill: var(--accent); fill-opacity: .12; stroke: var(--accent); stroke-width: 1.8; }
.sign-hero-download { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sign-hero-check-disc { fill: var(--positive); stroke: var(--ground-2); stroke-width: 4; }
.sign-hero-check { fill: none; stroke: var(--ground-0); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@keyframes sign-hero-entry {
  0%, 12% { stroke-dashoffset: 1; opacity: 1; }
  22%, 92% { stroke-dashoffset: 0; opacity: 1; }
  99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes sign-hero-tick {
  0%, 23% { stroke-dashoffset: 1; opacity: 1; }
  28%, 92% { stroke-dashoffset: 0; opacity: 1; }
  99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes sign-hero-ink {
  0%, 32% { stroke-dashoffset: 1; opacity: 1; }
  64%, 92% { stroke-dashoffset: 0; opacity: 1; }
  99%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes sign-hero-ready {
  0%, 69% { opacity: 0; }
  76%, 92% { opacity: 1; }
  99%, 100% { opacity: 0; }
}

@media (max-width: 420px) {
  .sign-hero { margin-block: 8px 16px; }
  .sign-hero figcaption { font-size: 15px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .sign-hero { max-width: 240px; margin-block: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sign-hero * { animation: none !important; }
  .sign-hero-entry, .sign-hero-tick, .sign-hero-signature { stroke-dashoffset: 0; opacity: 1; }
  .sign-hero-pen { display: none; }
  .sign-hero-ready { opacity: 1; }
}

@keyframes sign-hero-pen {
  0%, 28% { opacity: 0; transform: translate(130px, 151px); }
  32% { opacity: 1; transform: translate(130px, 151px); }
  33% { transform: translate(137.19px, 148.48px); }
  34% { transform: translate(142.92px, 143.44px); }
  35% { transform: translate(146.72px, 136.81px); }
  36% { transform: translate(146.98px, 129.36px); }
  37% { transform: translate(140.19px, 129.4px); }
  38% { transform: translate(135.64px, 135.49px); }
  39% { transform: translate(133.6px, 142.85px); }
  40% { transform: translate(134.24px, 150.43px); }
  41% { transform: translate(140.35px, 153.61px); }
  42% { transform: translate(146.42px, 149.07px); }
  43% { transform: translate(152.15px, 143.98px); }
  44% { transform: translate(157.89px, 138.88px); }
  45% { transform: translate(157.55px, 141.18px); }
  46% { transform: translate(154.76px, 148.31px); }
  47% { transform: translate(157.73px, 153.61px); }
  48% { transform: translate(163.99px, 149.29px); }
  49% { transform: translate(169.82px, 144.3px); }
  50% { transform: translate(175.65px, 139.3px); }
  51% { transform: translate(172.79px, 145.44px); }
  52% { transform: translate(173.87px, 152.26px); }
  53% { transform: translate(180.76px, 149.45px); }
  54% { transform: translate(186.96px, 144.94px); }
  55% { transform: translate(189.8px, 144.4px); }
  56% { transform: translate(189.6px, 151.54px); }
  57% { transform: translate(196.59px, 149.3px); }
  58% { transform: translate(203.03px, 145.12px); }
  59% { transform: translate(209.48px, 140.97px); }
  60% { transform: translate(208.19px, 145.14px); }
  61% { transform: translate(210.82px, 149.98px); }
  62% { transform: translate(217.81px, 146.84px); }
  63% { transform: translate(224.9px, 143.92px); }
  64% { opacity: 1; transform: translate(232px, 141px); }
  69%, 100% { opacity: 0; transform: translate(232px, 132px); }
}