/* ============================================================
   ARLO — Coffee Finder (component)
   An instrument, not a form: the band is its own night scene, the panel is
   a stepper of four questions, and the cup beside it fills and tints from
   the strength and flavour answers through two custom properties.
   Motion is transform and opacity only (no blur, no filters).
   ============================================================ */

.coffee-finder {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 12vh, 8.5rem);
  background: linear-gradient(180deg, #211a12 0%, var(--color-ink) 55%, #1b140d 100%);
  color: var(--color-accent-ink);
}

/* ---------- The night behind the panel ---------- */
.coffee-finder__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.coffee-finder__grain {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: radial-gradient(rgba(253, 249, 242, 0.14) 0.8px, transparent 0.9px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, black 0%, black 32%, transparent 88%);
}

.coffee-finder__glow {
  position: absolute;
  inset-inline-end: -18rem;
  bottom: -22rem;
  width: min(78vw, 52rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154, 91, 50, 0.38), rgba(154, 91, 50, 0) 66%);
  animation: finder-breathe var(--dur-glow) var(--ease-in-out) infinite alternate;
}

.coffee-finder__ring {
  position: absolute;
  inset-inline-start: -10rem;
  top: -12rem;
  width: min(58vw, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(217, 167, 126, 0.18);
  animation: finder-spin var(--dur-spin) linear infinite;
}

/* ---------- Intro ---------- */
.coffee-finder__intro {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.coffee-finder__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-latin);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  color: var(--color-accent-soft);
}

.coffee-finder__rule {
  display: inline-block;
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.coffee-finder__title {
  font-size: clamp(1.875rem, 4.5vw, 3.25rem);
  font-weight: 400;
  line-height: 1.4;
  text-wrap: balance;
}

.coffee-finder__lede {
  max-width: 36rem;
  font-size: clamp(0.9rem, 0.86rem + 0.3vw, 1.02rem);
  font-weight: 300;
  line-height: 2;
  color: var(--color-paper-muted);
}

/* ---------- The app surface ----------
   One centred slab, the same language as the About page's route slab:
   a warm bloom in the reading-end corner over espresso, a fine grain,
   the site's 6px card radius, and a soft drop so it sits in the night
   rather than floating in it. 48rem wide at most, so the questions stay
   centred in the band at every viewport width. */
.coffee-finder__app {
  max-width: 48rem;
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
}

.coffee-finder__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 6px; /* the site's card radius */
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(154, 91, 50, 0.3) 0%, rgba(154, 91, 50, 0) 58%),
    linear-gradient(160deg, #241c14 0%, #171009 100%);
  box-shadow: 0 40px 80px -60px rgba(0, 0, 0, 0.95);
}

.coffee-finder__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
  background-image: radial-gradient(rgba(253, 249, 242, 0.13) 0.8px, transparent 0.9px);
  background-size: 24px 24px;
  mask-image: linear-gradient(200deg, black, transparent 72%);
}

/* ---------- Readout: the cup beside the four answers ---------- */
.coffee-finder__readout {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  margin-bottom: clamp(1.25rem, 3vh, 1.75rem);
  padding-bottom: clamp(1.25rem, 3vh, 1.75rem);
  border-bottom: 1px solid rgba(253, 249, 242, 0.14);
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-ink) 14%, transparent);
}

.coffee-finder__readout-label {
  flex: none;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  color: rgba(215, 206, 193, 0.55);
}

/* ---------- Stepper ---------- */
.coffee-finder__stepper {
  display: grid;
  gap: 0.8rem;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}

.coffee-finder__pips {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-paper-muted);
}

.coffee-finder__pip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

/* The hairline that carries the nodes across the panel */
.coffee-finder__pip::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.22;
  transition: opacity var(--dur-med) var(--ease-out);
}

.coffee-finder__pip:last-child {
  flex: none;
}

.coffee-finder__pip:last-child::after {
  display: none;
}

.coffee-finder__pip > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 1px solid rgba(253, 249, 242, 0.28);
  font-family: var(--font-num);
  font-variant-numeric: lining-nums;
  color: var(--color-paper-muted);
  transition:
    background-color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

.coffee-finder__pip.is-done > span {
  border-color: var(--color-accent-soft);
  color: var(--color-accent-soft);
}

.coffee-finder__pip.is-active > span {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
  color: var(--color-ink);
  transform: scale(1.06);
}

.coffee-finder__pip.is-done::after {
  opacity: 0.55;
}

.coffee-finder__progress-track {
  display: block;
  height: 2px;
  background: rgba(253, 249, 242, 0.16);
  background: color-mix(in srgb, var(--color-accent-ink) 16%, transparent);
}

.coffee-finder__progress-track span {
  display: block;
  height: 100%;
  background: var(--color-accent-soft);
  transition: width var(--dur-med) var(--ease-out);
}

.coffee-finder__progress-text {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--color-paper-muted);
}

/* ---------- Stage: one question at a time ---------- */
.coffee-finder__stage {
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

/* Held for a beat while the next question is swapped in */
.coffee-finder__stage.is-swapping {
  opacity: 0;
  transform: translateY(0.75rem);
}

.coffee-finder__step {
  border: 0;
  padding: 0;
  min-inline-size: 0;
  animation: finder-step-in var(--dur-arrive) var(--ease-out) both;
}

.coffee-finder__question {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-accent-ink);
}

.coffee-finder__question-num {
  flex: none;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--color-accent-soft);
}

/* ---------- Options ---------- */
.coffee-finder__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.coffee-finder__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: clamp(0.85rem, 2vw, 1.1rem);
  border: 1px solid rgba(253, 249, 242, 0.22);
  border: 1px solid color-mix(in srgb, var(--color-accent-ink) 22%, transparent);
  border-radius: 6px; /* matches the site's .btn radius */
  color: var(--color-paper-dim);
  text-align: start;
  transition:
    border-color var(--dur-med) var(--ease-out),
    background-color var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
  animation: finder-option-in var(--dur-arrive) var(--ease-out) both;
}

.coffee-finder__options > .coffee-finder__option:nth-child(2) { animation-delay: 0.06s; }
.coffee-finder__options > .coffee-finder__option:nth-child(3) { animation-delay: 0.12s; }
.coffee-finder__options > .coffee-finder__option:nth-child(4) { animation-delay: 0.18s; }

.coffee-finder__option-icon {
  display: inline-flex;
  flex: none;
  color: var(--color-accent-soft);
  opacity: 0.85;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

.coffee-finder__option-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.coffee-finder__option-text {
  font-size: clamp(0.86rem, 0.83rem + 0.25vw, 0.95rem);
  font-weight: 400;
}

/* The check, waiting at the reading end of the card */
.coffee-finder__option-check {
  display: inline-flex;
  flex: none;
  margin-inline-start: auto;
  color: var(--color-accent-ink);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

.coffee-finder__option-check svg {
  width: 1.05rem;
  height: 1.05rem;
}

.coffee-finder__option:active {
  transform: scale(0.985);
}

@media (hover: hover) {
  .coffee-finder__option:hover {
    border-color: rgba(217, 167, 126, 0.6);
    background: rgba(154, 91, 50, 0.18);
    transform: translateY(-2px);
  }
  .coffee-finder__option:hover .coffee-finder__option-icon {
    opacity: 1;
    transform: translateY(-1px);
  }
}

.coffee-finder__option.is-selected {
  border-color: var(--color-accent-soft);
  background: rgba(154, 91, 50, 0.34);
  background: color-mix(in srgb, var(--color-accent) 34%, transparent);
  color: var(--color-accent-ink);
}

.coffee-finder__option.is-selected .coffee-finder__option-icon {
  opacity: 1;
}

.coffee-finder__option.is-selected .coffee-finder__option-check {
  opacity: 1;
  transform: none;
}

/* ---------- Actions under the stage ---------- */
.coffee-finder__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
}

.coffee-finder__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(253, 249, 242, 0.2);
  border: 1px solid color-mix(in srgb, var(--color-accent-ink) 20%, transparent);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--color-paper-dim);
  transition:
    border-color var(--dur-med) var(--ease-out),
    background-color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

.coffee-finder__back-icon {
  display: inline-flex;
  color: var(--color-accent-soft);
}

.coffee-finder__back-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

@media (hover: hover) {
  .coffee-finder__back:hover {
    border-color: rgba(217, 167, 126, 0.6);
    background: rgba(154, 91, 50, 0.18);
    transform: translateX(0.15rem);
  }
}

.coffee-finder__hint {
  max-width: min(100%, 34rem);
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(215, 206, 193, 0.6);
}

/* ---------- Result ---------- */
.coffee-finder__result:not([hidden]) {
  animation: finder-result-in var(--dur-arrive) var(--ease-out) both;
}

.coffee-finder__result-label {
  font-family: var(--font-latin);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  color: var(--color-accent-soft);
}

.coffee-finder__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.coffee-finder__chip {
  border: 1px solid rgba(253, 249, 242, 0.22);
  border: 1px solid color-mix(in srgb, var(--color-accent-ink) 22%, transparent);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--color-paper-muted);
  /* The recap drops in one chip at a time */
  opacity: 0;
  transform: translateY(0.4rem);
  animation: finder-chip-in var(--dur-arrive) var(--ease-out) forwards;
}

.coffee-finder__chip:nth-child(1) { animation-delay: 0.1s; }
.coffee-finder__chip:nth-child(2) { animation-delay: 0.18s; }
.coffee-finder__chip:nth-child(3) { animation-delay: 0.26s; }
.coffee-finder__chip:nth-child(4) { animation-delay: 0.34s; }

.coffee-finder__result-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: clamp(1.25rem, 3.5vw, 2.5rem);
  align-items: center;
}

.coffee-finder__result-media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-ink);
  /* A warm rim so the photo sits in the night instead of on it */
  box-shadow: 0 0 0 1px rgba(217, 167, 126, 0.25) inset;
}

.coffee-finder__result-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: finder-media-in var(--dur-arrive) var(--ease-out) both;
}

.coffee-finder__result-name {
  margin-bottom: 0.75rem;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 400;
  line-height: 1.3;
}

.coffee-finder__result-text {
  margin-bottom: 1.25rem;
  font-size: clamp(0.86rem, 0.83rem + 0.25vw, 0.98rem);
  font-weight: 300;
  line-height: 2;
  color: var(--color-paper-muted);
}

/* Barista extras — one pairing suggestion and one special note */
.coffee-finder__extras {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.coffee-finder__extra {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(253, 249, 242, 0.14);
  border-top: 1px solid color-mix(in srgb, var(--color-accent-ink) 14%, transparent);
}

.coffee-finder__extra dt {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-accent-soft);
}

.coffee-finder__extra dd {
  margin: 0;
  font-size: clamp(0.82rem, 0.79rem + 0.25vw, 0.92rem);
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-paper-muted);
}

.coffee-finder__result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
}

.coffee-finder__menu-link {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 6px; /* matches .btn */
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-weight: 500;
  transition:
    background-color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}

@media (hover: hover) {
  .coffee-finder__menu-link:hover {
    background: rgb(219, 179, 144);
    background: color-mix(in srgb, var(--color-accent-soft) 86%, white);
    transform: translateY(-2px);
  }
}

.coffee-finder__restart {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent-soft);
  font-size: 0.85rem;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  transition: color var(--dur-med) var(--ease-out);
}

.coffee-finder__restart:hover {
  color: var(--color-accent-ink);
}

/* ---------- The cup: fills as you answer ---------- */
.coffee-finder__cup {
  --finder-level: 0.3;
  --finder-steam: 0.2;
  --finder-liquid: var(--color-accent);

  flex: none;
  width: clamp(3.5rem, 8vw, 4.75rem);
  color: var(--color-accent-soft);
}

.coffee-finder__cup svg {
  width: 100%;
  height: auto;
}

.coffee-finder__cup-body,
.coffee-finder__cup-handle,
.coffee-finder__cup-saucer {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coffee-finder__cup-handle {
  opacity: 0.75;
}

.coffee-finder__cup-saucer {
  opacity: 0.5;
}

/* The liquid: level from the strength answer, colour from the flavour.
   scaleY on a clipped rect — one composited transform, nothing else. */
.coffee-finder__cup-liquid {
  fill: var(--finder-liquid);
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(var(--finder-level));
  transition:
    transform var(--dur-slow) var(--ease-out),
    fill var(--dur-slow) var(--ease-out);
}

.coffee-finder__cup-steam path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: var(--finder-steam);
  transition: opacity var(--dur-slow) var(--ease-out);
  animation: finder-steam var(--dur-steam) var(--ease-in-out) infinite;
}

.coffee-finder__cup-steam path:nth-child(2) { animation-delay: 1.3s; }
.coffee-finder__cup-steam path:nth-child(3) { animation-delay: 2.6s; }

.coffee-finder__recap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* Four cells on one hairline row, like the site's other ledgers */
.coffee-finder__recap-row {
  display: grid;
  gap: 0.15rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 1px solid rgba(253, 249, 242, 0.12);
  border-inline-start: 1px solid color-mix(in srgb, var(--color-accent-ink) 12%, transparent);
  font-size: clamp(0.68rem, 0.65rem + 0.2vw, 0.76rem);
}

.coffee-finder__recap-row:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.coffee-finder__recap-row dt {
  color: rgba(215, 206, 193, 0.6);
  font-weight: 300;
}

.coffee-finder__recap-row dd {
  margin: 0;
  color: var(--color-accent-soft);
  font-weight: 400;
  transition: color var(--dur-med) var(--ease-out);
}

/* ---------- Motion ---------- */
@keyframes finder-step-in {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes finder-option-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes finder-chip-in {
  to { opacity: 1; transform: none; }
}

@keyframes finder-result-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes finder-media-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

@keyframes finder-steam {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.35rem); }
}

@keyframes finder-breathe {
  from { opacity: 0.55; transform: scale(0.97); }
  to   { opacity: 1;    transform: scale(1.03); }
}

@keyframes finder-spin {
  to { transform: rotate(360deg); }
}

/* Reveal on arrival — opacity and lift only, no blur */
.coffee-finder [data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.coffee-finder.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
}

.coffee-finder.js-reveal .coffee-finder__app {
  transition-delay: 0.15s;
}

.coffee-finder.js-reveal.is-visible [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ---- Motion only once the band is on screen ----
   The band is a data-reveal-section, so its ambient loops hold until it
   arrives. Scoped to `.js-reveal:not(.is-visible)`, so with JavaScript off
   every loop runs as before. */
.coffee-finder.js-reveal:not(.is-visible) .coffee-finder__glow,
.coffee-finder.js-reveal:not(.is-visible) .coffee-finder__ring,
.coffee-finder.js-reveal:not(.is-visible) .coffee-finder__cup-steam path {
  animation-play-state: paused;
}

/* Structural wrappers — no look of their own, but they must never force
   the grid to grow wider than its column. */
.coffee-finder__form,
.coffee-finder__result-copy {
  min-width: 0;
}

/* ---------- The [hidden] attribute must win over the layout rules -------
   A class rule (display: grid / inline-flex) would otherwise beat the UA
   sheet's [hidden] { display: none }, and the panel would never leave. */
.coffee-finder__stepper[hidden],
.coffee-finder__back[hidden] {
  display: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 40.99rem) {
  /* The readout keeps its row but lets the answers wrap under the cup */
  .coffee-finder__readout {
    flex-wrap: wrap;
    gap: 0.85rem 1.25rem;
  }

  .coffee-finder__recap {
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1rem;
  }

  .coffee-finder__recap-row:nth-child(3) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (max-width: 39.99rem) {
  .coffee-finder__options,
  .coffee-finder__result-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .coffee-finder__option {
    padding: 0.9rem;
  }

  .coffee-finder__extra {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .coffee-finder__result-media {
    aspect-ratio: 16 / 10;
  }
}