/**
 * The price ladder inside the ticket panel — one stylesheet, both themes.
 *
 * Written against the accent variable rather than a colour, so it takes the
 * event's own: pink in Vilnius, orange in Copenhagen, green on a Techno night
 * that wants it. See inc/gravity-2026-release-strip.php.
 */

.g26-rs{ display: flex; gap: 5px; margin: 0 0 16px; }
.g26-rs-step{ flex: 1; min-width: 0; }

/* The rung itself. Faint by default — these are steps nobody has reached. */
.g26-rs-bar{ display: block; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.13); }

.g26-rs-price{ display: block; margin-top: 7px;
  font-family: var(--display, 'Clash Display', sans-serif);
  font-size: 14px; font-weight: 600; line-height: 1;
  color: rgba(255,255,255,.49); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

.g26-rs-name{ display: block; margin-top: 4px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px; font-weight: 600; line-height: 1.2; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255,255,255,.37);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Behind us. The price stays readable — it is the whole argument — but wears
   a line through it so nobody tries to buy at it. */
.g26-rs-step.is-gone .g26-rs-bar{ background: rgba(255,255,255,.42); }
.g26-rs-step.is-gone .g26-rs-price{ color: rgba(255,255,255,.44);
  text-decoration: line-through; text-decoration-color: rgba(255,255,255,.32); }
.g26-rs-step.is-gone .g26-rs-name{ color: rgba(255,255,255,.52); }

/* On sale. The only lit rung, and the only price at full size. */
.g26-rs-step.is-now .g26-rs-bar{ background: var(--action, var(--tx, #fff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--action, var(--tx, #fff)) 70%, transparent); }
.g26-rs-step.is-now .g26-rs-price{ color: #fff; font-size: 19px; }
.g26-rs-step.is-now .g26-rs-name{ color: var(--action, var(--tx, #fff)); }

/* Five or six columns on a 375px screen leaves about 60px each; the type comes
   down a step rather than the names eliding to two letters. */
@media (max-width: 420px){
  .g26-rs{ gap: 4px; }
  .g26-rs-price{ font-size: 13px; }
  .g26-rs-step.is-now .g26-rs-price{ font-size: 17px; }
  .g26-rs-name{ font-size: 8.5px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce){
  .g26-rs-step.is-now .g26-rs-bar{ box-shadow: none; }
}

/* ---------- the accent bars: they fill, then they breathe ----------

   Two things happen to a lit bar. It draws itself in once, left to right, so
   it reads as a measurement being taken rather than a shape that was always
   there. Then, every so often, a soft highlight travels down it.

   The sweep is deliberately slow — around three seconds to cross, which is
   most of a cycle. A quick one looks like a progress spinner and makes the
   page feel busy; at this speed it reads as light moving over a surface, and
   the gap between passes is short enough that the bar is never dead for long.

   Timing matters for where these live. The ticket panel is parked, not
   hidden, so Stripe can measure it — which means a plain animation would run
   its course while nobody was looking and the bar would be sitting still by
   the time the panel opened. The panel's rules therefore hang off .tmodal.open
   and start when it does. The sticky bar is on screen from the first paint, so
   it starts on its own. */

@keyframes g26-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes g26-sheen {
  0%   { transform: translateX(-135%); }
  46%  { transform: translateX(135%); }
  100% { transform: translateX(135%); }
}

.g26-rs-step.is-now .g26-rs-bar,
.bbar .prog b,
.bbar .prog > i,
.bbar .ladder i.on { position: relative; overflow: hidden; transform-origin: left center; }

/* The highlight itself. Wider and softer than a glint, because it is crossing
   slowly and a hard edge at that speed looks like a seam. */
.g26-rs-step.is-now .g26-rs-bar::after,
.bbar .prog b::after,
.bbar .prog > i::after,
.bbar .ladder i.on::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    transparent 8%, rgba(255,255,255,.20) 32%, rgba(255,255,255,.60) 50%,
    rgba(255,255,255,.20) 68%, transparent 92%);
  transform: translateX(-135%);
  pointer-events: none;
}

/* --- the sticky bar: on screen from the start --- */
.bbar .prog b,
.bbar .prog > i { animation: g26-fill 1.1s cubic-bezier(.22,.8,.24,1) both; }
.bbar .ladder i.on { animation: g26-fill .8s cubic-bezier(.22,.8,.24,1) .25s both; }

.bbar .prog b::after,
.bbar .prog > i::after { animation: g26-sheen 7.2s cubic-bezier(.4,0,.25,1) 1.8s infinite; }
.bbar .ladder i.on::after { animation: g26-sheen 8s cubic-bezier(.4,0,.25,1) 3s infinite; }

/* --- the panel: starts when the panel does --- */
.tmodal.open .g26-rs-step.is-now .g26-rs-bar {
  animation: g26-fill .95s cubic-bezier(.22,.8,.24,1) .12s both;
}
.tmodal.open .g26-rs-step.is-now .g26-rs-bar::after {
  animation: g26-sheen 6.5s cubic-bezier(.4,0,.25,1) 1.3s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .g26-rs-step.is-now .g26-rs-bar,
  .tmodal.open .g26-rs-step.is-now .g26-rs-bar,
  .bbar .prog b, .bbar .prog > i, .bbar .ladder i.on { animation: none; transform: none; }
  .g26-rs-step.is-now .g26-rs-bar::after,
  .tmodal.open .g26-rs-step.is-now .g26-rs-bar::after,
  .bbar .prog b::after, .bbar .prog > i::after,
  .bbar .ladder i.on::after { animation: none; opacity: 0; }
}