/* ==========================================================================
   EventGo Australia — THE ACCESS ROUTE (Phase 2.1, branch eventgo-v3-checkout-wow-refinement)
   --------------------------------------------------------------------------
   ONE visual signal carried through the whole purchase, built from the
   ticket's own materials — the perforated edge and the holographic security
   line (violet → blue → teal):

     ticket delivery   a route runs from the ticket to ◉ Email (always lit:
                       email is included) and, when chosen, grows on to
                       ◉ WhatsApp — "the ticket gained another destination"
     recipient mode    the tickets travel as ONE bundle, or step apart (V1 closure)
     progress          one continuous access line with a notch per step
     action bar        the same line along its top edge, filled to the step
     review            settled: small route marks per recipient, no motion
     confirmation      the routes complete: Email, then WhatsApp

   Not a network diagram, not a wire, not a neon laser: a 2px line, perforated
   where inactive, the security gradient where active, drawn with transform
   (scaleY / scaleX) and opacity only — the project rule; nothing animates
   stroke-dash, clip or layout. No canvas, no WebGL, no library.

   THE WHATSAPP GLYPH is the official file, unmodified, inside a node with
   its own clear space; no line ever touches or overlaps it
   (docs/BRAND-ASSETS.md).

   Shared by 91-tickets (event page), 92-checkout and 93-confirm. Reduced
   motion: every route is drawn in its final state, nothing animates.
   ========================================================================== */

/* ---- a node: an icon in a ring, sitting ON the route ----------------------- */
.eg-c-ar-node {
  --n: 2.5rem;
  position: relative; z-index: 2; display: inline-grid; place-items: center; flex: none;
  width: var(--n); height: var(--n); border-radius: 50%;
  border: 1px solid var(--c-line-strong); background: var(--c-ink); color: var(--c-text-2);
}
.eg-c-ar-node svg { width: 1.125rem; height: 1.125rem; }
.eg-c-ar-node__wa { display: block; width: 1.375rem; height: 1.375rem; }   /* official glyph, untouched */
.eg-c-ar-node--sm { --n: 2rem; }
.eg-c-ar-node--sm svg { width: .9375rem; height: .9375rem; }
.eg-c-ar-node--sm .eg-c-ar-node__wa { width: 1.125rem; height: 1.125rem; }
.eg-c-ar-node--xs { --n: 1.625rem; }
.eg-c-ar-node--xs svg { width: .8125rem; height: .8125rem; }
.eg-c-ar-node--xs .eg-c-ar-node__wa { width: 1rem; height: 1rem; }
.eg-c-ar-node.is-on, .eg-c-ar-node--email.is-on { border-color: color-mix(in srgb, var(--c-teal) 70%, transparent); color: var(--c-teal); }

/* ---- TICKET DELIVERY: the route down the two cards --------------------------
   Each card's left gutter carries its piece of the rail; the pieces meet
   across the gap between cards, so it reads as ONE line:
     email ::before  entry  (always active — email is included)
     email ::after   exit ┐  segment B, email → WhatsApp:
     wa    ::before  entry┘  perforated until WhatsApp is chosen, then grows */
.eg-c-dlv { --dlv-gap: .625rem; --rx: calc(1rem + 1.25rem); }
.eg-c-dlv__opt[data-dlv-opt]::before, .eg-c-dlv__opt[data-dlv-opt="email"]::after {
  content: ""; position: absolute; z-index: 1; left: var(--rx); width: 2px; pointer-events: none;
  transform-origin: top;
}
.eg-c-dlv__opt[data-dlv-opt="email"]::before {
  top: -.8125rem; height: calc(50% + .8125rem); border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--c-violet), var(--c-blue));
}
.eg-c-dlv__opt[data-dlv-opt="email"]::after { top: 50%; bottom: 0; }
.eg-c-dlv__opt[data-dlv-opt="whatsapp"]::before { top: calc(-1 * var(--dlv-gap)); height: calc(50% + var(--dlv-gap)); }
/* segment B, inactive: the ticket's perforation */
.eg-c-dlv__opt[data-dlv-opt="email"]::after, .eg-c-dlv__opt[data-dlv-opt="whatsapp"]::before {
  background: repeating-linear-gradient(180deg, var(--c-line-strong) 0 4px, transparent 4px 8px);
}
/* segment B, active: the security line */
.eg-c-dlv[data-ar-route="whatsapp"] .eg-c-dlv__opt[data-dlv-opt="email"]::after,
.eg-c-dlv:has(.eg-c-dlv__in[value="whatsapp"]:checked) .eg-c-dlv__opt[data-dlv-opt="email"]::after { background: linear-gradient(180deg, var(--c-blue), var(--c-blue)); }
.eg-c-dlv[data-ar-route="whatsapp"] .eg-c-dlv__opt[data-dlv-opt="whatsapp"]::before,
.eg-c-dlv:has(.eg-c-dlv__in[value="whatsapp"]:checked) .eg-c-dlv__opt[data-dlv-opt="whatsapp"]::before { background: linear-gradient(180deg, var(--c-blue), var(--c-teal)); }
/* nodes: Email lit in both options; WhatsApp lit when its route exists */
.eg-c-dlv .eg-c-ar-node--email { border-color: color-mix(in srgb, var(--c-teal) 70%, transparent); color: var(--c-teal); }
.eg-c-dlv[data-ar-route="whatsapp"] .eg-c-ar-node--wa,
.eg-c-dlv:has(.eg-c-dlv__in[value="whatsapp"]:checked) .eg-c-ar-node--wa { border-color: color-mix(in srgb, var(--c-teal) 70%, transparent); }
.eg-c-dlv .eg-c-ar-node--wa { border-style: dashed; }
.eg-c-dlv[data-ar-route="whatsapp"] .eg-c-ar-node--wa,
.eg-c-dlv:has(.eg-c-dlv__in[value="whatsapp"]:checked) .eg-c-ar-node--wa { border-style: solid; }

/* ---- RECIPIENT MODE: gather or separate --------------------------------------- */
.eg-c-rg { width: 3.5rem; height: 2.5rem; flex: none; overflow: visible; fill: none; stroke-linecap: round; }
/* V1 CLOSURE — the glyph is small tickets: body, perforated stub, security
   strip. Unchosen: quiet outlines, the strip in line colour. Chosen: the
   bodies lift to text colour and the strip becomes the Access Route line. */
.eg-c-rg__k { fill: var(--c-ink); stroke: var(--c-line-strong); stroke-width: 1.25; }
.eg-c-rg__p { stroke: var(--c-line-strong); stroke-width: 1; stroke-dasharray: 1.5 1.5; }
.eg-c-rg__s { stroke: var(--c-line-strong); stroke-width: 2; transform-box: fill-box; transform-origin: top center; }
.eg-c-dlv__in:checked + .eg-c-dlv__card .eg-c-rg__k { stroke: var(--c-text-2); fill: var(--c-ink-soft); }
.eg-c-dlv__in:checked + .eg-c-dlv__card .eg-c-rg__p { stroke: var(--c-text-3); }
.eg-c-dlv__in:checked + .eg-c-dlv__card .eg-c-rg__s { stroke: var(--c-teal); }
.eg-c-dlv__in:checked + .eg-c-dlv__card .eg-c-rg__s--1 { stroke: var(--c-violet); }
.eg-c-dlv__in:checked + .eg-c-dlv__card .eg-c-rg__s--2 { stroke: var(--c-blue); }
@media (max-width: 359.98px) { .eg-c-rg { width: 3rem; height: 2.15rem; } }

/* ---- NUMBER FLOW (eg-order.js EG.Order.flow): changed digits roll in ----------
   Mechanic studied from 21st.dev NumberFlow / Animated Counter and rebuilt
   as spans + one keyframe: only the digits that changed move, right to left,
   so $390.50 → $393.00 reads as a price settling, not a card redrawing. */
.eg-c-flow { display: inline-block; }

/* ---- motion ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .eg-c-dlv[data-ar-route="whatsapp"] .eg-c-dlv__opt[data-dlv-opt="email"]::after { animation: eg-ar-grow .22s cubic-bezier(.4, 0, .2, 1) both; }
  .eg-c-dlv[data-ar-route="whatsapp"] .eg-c-dlv__opt[data-dlv-opt="whatsapp"]::before { animation: eg-ar-grow .3s cubic-bezier(.2, .8, .2, 1) .16s both; }
  .eg-c-dlv[data-ar-route="whatsapp"] .eg-c-ar-node--wa { animation: eg-ar-node .4s cubic-bezier(.3, 1.4, .5, 1) .38s both; }
  .eg-c-dlv__in:checked + .eg-c-dlv__card .eg-c-rg__s { animation: eg-ar-grow .4s cubic-bezier(.4, 0, .2, 1) both; }
  .eg-c-flow.is-up { animation: eg-flow-up .34s cubic-bezier(.2, .8, .2, 1) both; }
  .eg-c-flow.is-down { animation: eg-flow-down .34s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes eg-ar-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes eg-ar-node { 0% { transform: scale(.82); opacity: .4; } 100% { transform: none; opacity: 1; } }
@keyframes eg-flow-up { from { transform: translateY(55%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes eg-flow-down { from { transform: translateY(-55%); opacity: 0; } to { transform: none; opacity: 1; } }

/* DEBUG-ONLY content (?debug=1, EG.Order.applyDebug) stays out of the
   customer UI even where a component sets its own display. */
[data-debug-only][hidden] { display: none !important; }