/* Home hub extras (Task 12b), loaded by / and /past only so event and registration pages keep their
   CSS budget: "Coming up next" cards, the animated "How registration works" steps, past editions by
   city. Static by default; every motion sits inside prefers-reduced-motion:no-preference. */

/* ---------- Coming up next: a calmer violet/cyan ticket, never mistaken for an open (pink) one ---------- */
.section-lead{margin:-6px 0 18px;max-width:40rem;color:var(--lilac)}
.city-card.is-coming{--bib:linear-gradient(150deg,#d5ccff 0%,#a99bff 46%,#7fd8f5 100%)}
.city-card.is-coming .ticket-stub{background:linear-gradient(180deg,#1c1a4a,#131236 85%)}
.city-card.is-coming .ticket-stub::before{border-top-color:rgba(127,216,245,.35)}
.city-card.is-coming .bib .pill{--dot:var(--sky)}
.city-card.is-coming .bib .pill-upcoming,.city-card.is-coming .bib .pill-not_yet{--dot:var(--sky)}
.city-card.is-coming .bib .pill-paused{--dot:var(--amber)}
.city-card.is-coming .city-card-facts .icon{color:var(--sky)}
.city-card.is-coming .btn-ghost{color:#eaf9ff;background:rgba(127,216,245,.1);border-color:rgba(127,216,245,.55)}
.city-card.is-coming .btn-ghost:hover{background:rgba(127,216,245,.2);color:#fff}

/* ---------- How registration works: steps rise in one after the other, a line draws between them ---------- */
.steps-flow{position:relative;gap:14px}
.steps-flow .step{position:relative;z-index:1}
.steps-flow .step-num{position:relative;z-index:2}
/* The connector: a faint track (::before) and the gradient line that draws over it (::after). Last step has none. */
.steps-flow .step:not(:last-child)::before,.steps-flow .step:not(:last-child)::after{content:"";position:absolute;z-index:0;border-radius:2px;pointer-events:none}
.steps-flow .step:not(:last-child)::before{background:rgba(244,242,255,.16)}
.steps-flow .step:not(:last-child)::after{background:linear-gradient(180deg,var(--magenta),var(--violet-soft));transform-origin:top}
/* Phones and tablets: one column, the line runs down from each number to the next */
.steps-flow{grid-template-columns:1fr}
.steps-flow .step:not(:last-child)::before,.steps-flow .step:not(:last-child)::after{left:37px;top:64px;width:2px;height:calc(100% - 38px)}
/* Wide screens: one row, the line runs across */
@media(min-width:900px){
  .steps-flow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:28px}
  .steps-flow .step{flex-direction:column;gap:12px}
  .steps-flow .step h3{margin-top:0}
  .steps-flow .step:not(:last-child)::before,.steps-flow .step:not(:last-child)::after{left:66px;top:37px;width:calc(100% - 64px + 28px - 8px);height:2px}
  .steps-flow .step:not(:last-child)::after{background:linear-gradient(90deg,var(--magenta),var(--violet-soft));transform-origin:left}
}
@keyframes pk-step-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes pk-line-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pk-line-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pk-step-ring{0%{opacity:.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.75)}}
@media(prefers-reduced-motion:no-preference){
  /* Fallback (Firefox, older Safari): on load, staggered. Hidden only while the animation holds it
     there (fill-mode backwards), so without animation support the steps are simply visible. */
  .steps-flow .step{animation:pk-step-in .7s cubic-bezier(.2,.7,.2,1) backwards}
  .steps-flow .step:not(:last-child)::after{animation:pk-line-y .7s ease-out backwards}
  @media(min-width:900px){.steps-flow .step:not(:last-child)::after{animation-name:pk-line-x}}
  .steps-flow .step:nth-child(1),.steps-flow .step:nth-child(1)::after{animation-delay:.15s}
  .steps-flow .step:nth-child(2),.steps-flow .step:nth-child(2)::after{animation-delay:.6s}
  .steps-flow .step:nth-child(3),.steps-flow .step:nth-child(3)::after{animation-delay:1.05s}
  .steps-flow .step:nth-child(4){animation-delay:1.5s}
  /* A soft ring leaves each number in turn, so the sequence keeps reading while the page is in view */
  .steps-flow .step-num::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:0 0 0 2px var(--magenta);opacity:0;animation:pk-step-ring 4.8s ease-out 3}
  .steps-flow .step:nth-child(1) .step-num::after{animation-delay:1.2s}
  .steps-flow .step:nth-child(2) .step-num::after{animation-delay:2.4s}
  .steps-flow .step:nth-child(3) .step-num::after{animation-delay:3.6s}
  .steps-flow .step:nth-child(4) .step-num::after{animation-delay:4.8s}
}
/* Chromium and Safari 26: play when the list scrolls into view instead of on load (below the fold) */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .steps-flow .step:nth-child(n),.steps-flow .step:nth-child(n):not(:last-child)::after{animation-delay:0s;animation-timing-function:linear;animation-fill-mode:both;animation-duration:1ms;animation-timeline:view();animation-range:entry 5% entry 55%}
    .steps-flow .step:nth-child(2),.steps-flow .step:nth-child(2):not(:last-child)::after{animation-range:entry 15% entry 65%}
    .steps-flow .step:nth-child(3),.steps-flow .step:nth-child(3):not(:last-child)::after{animation-range:entry 25% entry 75%}
    .steps-flow .step:nth-child(4){animation-range:entry 35% entry 85%}
  }
}

/* ---------- Past editions by city ---------- */
.past-body{gap:16px}
.past-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.past-filter label{font-weight:700}
.past-filter select{min-height:44px;max-width:100%;padding:8px 12px;border-radius:12px;border:1px solid var(--field);background:var(--field-bg);color:var(--ink)}
.past-cities{display:grid;gap:10px;margin:0;padding:0;list-style:none}
@media(min-width:900px){.past-cities{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.past-city{border:1px solid var(--line-strong);border-radius:14px;background:var(--ghost-bg)}
.past-city > summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px;cursor:pointer;list-style:none;border-radius:14px}
.past-city > summary::-webkit-details-marker{display:none}
.past-city > summary::marker{content:""}
.past-city > summary > .icon:last-child{margin-left:auto;color:var(--muted);transition:transform .3s var(--ease)}
.past-city[open] > summary > .icon:last-child{transform:rotate(180deg)}
.past-city-name{font-family:var(--font-display);font-weight:800;font-size:1.1rem}
.past-city .past-list{padding:0 16px 16px}
.past-more{margin:4px 0 0}
.past-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;color:var(--muted)}
/* Print and full-page captures: never leave a step hidden mid-animation */
@media print{.steps-flow .step,.steps-flow .step::before,.steps-flow .step::after,.steps-flow .step-num::after{animation:none!important;opacity:1!important;transform:none!important}.steps-flow .step-num::after{display:none}}