/* ===== HOW IT WORKS — the 5-step walkthrough in the hero panel =====
   Sits inside the dark .blueprint panel on index.html, so it has one
   look in both themes (the panel itself is always dark). The seat
   colours come from css/styles.css (--seat-confirmed / --seat-interested)
   so they always match the expedition cards; the fallbacks are only for
   a page that doesn't load styles.css.
   Driven by js/howto.js. Without JavaScript, step 1 simply shows.

   Most steps show a real screenshot of the site (img/howto/), taken by
   workspace/tools/screenshots.mjs ("npm run shots"). That tool also
   writes css/howto-shots.css: where the pulsing ring sits on each one. */

.hw {
  --hw-ink: #eef3f8;
  --hw-muted: rgba(238, 243, 248, 0.64);
  --hw-faint: rgba(238, 243, 248, 0.38);
  --hw-line: rgba(255, 255, 255, 0.16);
  --hw-chip: rgba(255, 255, 255, 0.06);
  --hw-paid: var(--seat-confirmed, #2fb46a);
  --hw-paid-ink: var(--seat-confirmed-ink, #062413);
  --hw-want: var(--seat-interested, #f28c28);
  --hw-want-ink: var(--seat-interested-ink, #2b1600);
  --hw-dur: 5000ms;
  --hw-shot-h: 320px;
  position: relative;
  z-index: 1;
  width: 100%;
  color: var(--hw-ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: grid;
  gap: 16px;
}
.hw-mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---- The hero's words: the small label above the headline, and the
   three reasons under it (index.html, #hero). ---- */
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 6px 14px; border-radius: 999px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--confirmed); border: 1px solid currentColor;
}
.hero-kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--seat-confirmed, #2fb46a);
}
/* Two lines, "Grab a seat" over "Share the Adventure"; the size follows
   the screen's width so the second line never wraps on a phone. */
.hero-title { font-size: clamp(1.6rem, 7.6vw, 4.5rem); }
.hero-title > span { display: block; }
.hero-perks {
  list-style: none; padding: 0; margin: 0 auto 34px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
}
.hero-perks li {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 16px Sora, Inter, sans-serif;
}
.hero-perks svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: var(--confirmed); stroke-width: 1.6; stroke-linecap: round;
}

/* ---- The frame round the walkthrough, under the hero's search: a
   border that runs from the seat orange (in line) to the seat green
   (paid), with a soft glow of both. ---- */
.hero-demo {
  padding: 10px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--seat-interested, #f28c28), var(--seat-confirmed, #2fb46a));
  box-shadow: 0 26px 60px -18px rgba(47, 180, 106, 0.45), 0 12px 36px -16px rgba(242, 140, 40, 0.45);
}
.hero-demo > .blueprint { border-radius: 19px; }
@media (max-width: 640px) {
  .hero-demo { padding: 6px; border-radius: 22px; }
  .hero-demo > .blueprint { border-radius: 16px; }
}

/* ---- The slides: all stacked in one grid cell, the tallest sets the height ---- */
.hw-stage { display: grid; }
.hw-slide {
  grid-area: 1 / 1;
  display: grid;
  align-content: start;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  min-width: 0;
}
.hw-slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0s; }
.hw-eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hw-faint); }
.hw-title {
  font-family: Sora, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700; font-size: 20px; line-height: 1.2; margin: 2px 0 0; text-wrap: balance;
}
.hw-text { font-size: 15px; line-height: 1.55; color: var(--hw-muted); margin: 0; max-width: 42ch; }
.hw-visual { min-height: 150px; display: grid; align-items: center; min-width: 0; }

/* ---- A real screenshot in a window. A picture taller than the window
   scrolls slowly down to its end while the step shows, like a short
   screen recording; the ring pulses on the part that matters. ---- */
/* Never wider than the picture was taken (its width="" in index.html), so
   a narrow one is not blown up and blurred in the wide frame. */
.hw-shot {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  max-height: var(--hw-shot-h);
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--hw-line), 0 12px 30px rgba(0, 0, 0, 0.35);
}
.hw-shot-in { position: relative; }
.hw-shot picture { display: block; }
.hw-shot img { display: block; max-width: 100%; height: auto; }
.hw-slide.is-active .hw-shot-in { animation: hwPan 3.2s ease-in-out 1.8s both; }
/* -100% is the picture's own height: it ends with its bottom edge at the
   window's bottom. A picture shorter than the window doesn't move. */
@keyframes hwPan { to { transform: translateY(min(0px, calc(-100% + var(--hw-shot-h)))); } }
/* Drawn just inside its target, so a target at the picture's edge
   doesn't get its ring cut off by the window. */
.hw-ring {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--hw-want);
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
}
.hw-slide.is-active .hw-ring { animation: hwShow 0.3s ease 0.6s both, hwRing 1.4s ease 0.6s infinite; }
@keyframes hwShow { from { opacity: 0; } to { opacity: 1; } }
@keyframes hwRing {
  from { box-shadow: 0 0 0 0 rgba(242, 140, 40, 0.55); }
  to { box-shadow: 0 0 0 12px rgba(242, 140, 40, 0); }
}

/* ---- Navigation: steps, pause, progress ---- */
.hw-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hw-steps { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; }
.hw-step, .hw-pause {
  font: 500 11px 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--hw-muted); background: transparent;
  border: 1px solid var(--hw-line); border-radius: 999px;
  padding: 5px 10px; cursor: pointer; line-height: 1;
}
.hw-step:hover, .hw-pause:hover { color: var(--hw-ink); border-color: var(--hw-faint); }
.hw-step[aria-current="step"] { color: var(--hw-want-ink); background: var(--hw-want); border-color: transparent; }
.hw-step:focus-visible, .hw-pause:focus-visible { outline: 2px solid var(--hw-want); outline-offset: 2px; }
.hw-pause { display: inline-flex; align-items: center; gap: 5px; }
.hw-pause svg { width: 10px; height: 10px; fill: currentColor; }
.hw-pause .hw-icon-play { display: none; }
.hw-pause[aria-pressed="true"] .hw-icon-play { display: block; }
.hw-pause[aria-pressed="true"] .hw-icon-pause { display: none; }
.hw-progress { height: 2px; background: var(--hw-line); border-radius: 2px; overflow: hidden; }
.hw-progress span { display: block; height: 100%; width: 0; background: var(--hw-want); }
.hw-progress span.is-filling { animation: hwFill var(--hw-dur) linear forwards; }
@keyframes hwFill { from { width: 0; } to { width: 100%; } }

/* Controls only make sense once the script runs. */
.hw:not(.hw-ready) .hw-nav,
.hw:not(.hw-ready) .hw-progress { display: none; }

/* Paused (button, pointer over it, keyboard inside it, off screen):
   only the move to the next step waits. The step on screen still
   finishes its own short animation, so a step someone clicked plays. */
.hw.is-paused .hw-progress span { animation-play-state: paused; }

/* Reduced motion: no autoplay (js/howto.js), and every step shows its
   finished state at once instead of animating into it. Screenshots
   don't scroll by themselves: the window can be scrolled instead. */
@media (prefers-reduced-motion: reduce) {
  .hw-slide, .hw-slide * {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
  .hw-slide .hw-shot-in { animation: none !important; }
  .hw-shot { overflow-y: auto; }
}

/* Wide screens: the step's words in a column on the left, the picture
   large on the right. */
@media (min-width: 900px) {
  .hw { --hw-shot-h: 470px; gap: 22px; }
  .hw-slide {
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "head visual" "text visual";
    column-gap: 40px;
    row-gap: 12px;
    text-align: left;
  }
  .hw-slide > div:first-child { grid-area: head; padding-top: 8px; }
  .hw-visual { grid-area: visual; min-height: var(--hw-shot-h); justify-items: center; }
  .hw-text { grid-area: text; font-size: 15px; }
  .hw-title { font-size: 26px; }
  .hw-eyebrow { font-size: 11px; }
}

/* Phones (under 640 px, the same width as the <source> in index.html):
   every picture window has the same 4:3 shape, so the box doesn't jump
   or leave a gap between steps. The phone pictures are taken at exactly
   4:3 around the part that matters, so they fill the window, nothing
   pans, and the ring sits where the tool measured it (the phone rings in
   css/howto-shots.css). "cover" only trims a stray pixel. */
@media (max-width: 639px) {
  .hw-visual { min-height: 0; }
  .hw-shot { width: 100%; max-width: 420px; max-height: none; aspect-ratio: 4 / 3; }
  .hw-shot-in, .hw-shot picture { height: 100%; }
  .hw-slide.is-active .hw-shot-in { animation: none; }
  .hw-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
}

@media (max-width: 420px) {
  .hw-title { font-size: 19px; }
}