/*
 * Hero flow animation: the shipment as the origin of everything else.
 *
 * Six arcs are drawn outward from the shipment core in clockwise order, then a
 * single dash travels each arc on a loop. There is no JavaScript: the travelling
 * dot is a one-dash stroke pattern whose offset is animated, which avoids
 * offset-path and behaves identically in every browser the site supports.
 *
 * --hf-len is the measured length of each arc. It is set on the ray group and
 * inherited by the arc and the pulse. If the geometry in
 * module/Website/view/website/partials/hero-flow.phtml changes, remeasure these
 * or both animations will run short or long.
 */

.hero-flow {
    width: 100%;
    height: auto;
    max-width: 560px;
    pointer-events: none;
}

.hero-flow-arc {
    stroke-dasharray: var(--hf-len);
    stroke-dashoffset: var(--hf-len);
    animation: hero-flow-draw 0.85s ease-out forwards;
    animation-delay: var(--hf-delay);
}

.hero-flow-pulse {
    stroke-dasharray: 6 var(--hf-len);
    opacity: 0;
    animation: hero-flow-travel 2.8s linear infinite;
    animation-delay: var(--hf-travel-delay);
}

.hero-flow-node {
    opacity: 0;
    animation: hero-flow-appear 0.5s ease-out forwards;
    animation-delay: var(--hf-node-delay);
}

.hero-flow-halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: hero-flow-halo 3.2s ease-in-out infinite;
}

@keyframes hero-flow-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes hero-flow-travel {
    0%   { opacity: 0; stroke-dashoffset: 0; }
    8%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; stroke-dashoffset: calc(var(--hf-len) * -1); }
}

@keyframes hero-flow-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hero-flow-halo {
    0%, 100% { opacity: 0.16; transform: scale(0.94); }
    50%      { opacity: 0.38; transform: scale(1.04); }
}

/* Per-ray geometry and stagger, clockwise from the top. */
.hero-flow-r1 { --hf-len: 147; --hf-delay: 0s;    --hf-node-delay: 0.62s; --hf-travel-delay: 3.00s; }
.hero-flow-r2 { --hf-len: 106; --hf-delay: 0.38s; --hf-node-delay: 1.00s; --hf-travel-delay: 3.42s; }
.hero-flow-r3 { --hf-len: 106; --hf-delay: 0.76s; --hf-node-delay: 1.38s; --hf-travel-delay: 3.84s; }
.hero-flow-r4 { --hf-len: 147; --hf-delay: 1.14s; --hf-node-delay: 1.76s; --hf-travel-delay: 4.26s; }
.hero-flow-r5 { --hf-len: 106; --hf-delay: 1.52s; --hf-node-delay: 2.14s; --hf-travel-delay: 4.68s; }
.hero-flow-r6 { --hf-len: 106; --hf-delay: 1.90s; --hf-node-delay: 2.52s; --hf-travel-delay: 5.10s; }

/* Motion is decoration here, so reduced motion gets the finished diagram. */
@media (prefers-reduced-motion: reduce) {
    .hero-flow-arc   { animation: none; stroke-dashoffset: 0; }
    .hero-flow-node  { animation: none; opacity: 1; }
    .hero-flow-halo  { animation: none; opacity: 0.26; }
    .hero-flow-pulse { display: none; }
}