/* ==========================================================================
   3rd-i - check-in flow band
   A horizontal stream under the "Safety made social" phone: the people you
   trust travel toward the 3rd-i mark, pass behind it, and come out the other
   side as check-ins. One item owns the whole crossing; the avatar and the
   check-in chip cross-fade at the exact midpoint, which is covered by the
   opaque logo plate, so the change is never visible in open space.
   Transform and opacity only. Tokens come from app.css.
   ========================================================================== */

.thirdi-checkin-flow {
  --tcf-dur: 16s;
  --tcf-green: #22bd87;
  --tcf-glow: rgba(92, 193, 246, 0.3);
  --tcf-rail: rgba(92, 193, 246, 0.5);
  --tcf-rail-safe: rgba(34, 189, 135, 0.55);
  --tcf-avatar: 50px;
  /* How far each crossing runs, in band widths. A span wider than the band
     spreads the stream out: the gap between two people is proportional to it,
     so a narrow band gets a wider span and never crowds the logo plate. */
  --tcf-span: 110%;

  width: 100%;
  margin: clamp(26px, 4vw, 54px) auto 0;
}

html[data-theme="light"] .thirdi-checkin-flow {
  --tcf-green: #0f9d6f;
  --tcf-glow: rgba(30, 139, 254, 0.2);
  --tcf-rail: rgba(30, 139, 254, 0.42);
  --tcf-rail-safe: rgba(15, 157, 111, 0.45);
}

/* ---------- the band ----------------------------------------------------- */

.thirdi-checkin-flow__band {
  position: relative;
  height: clamp(104px, 11vw, 136px);
  overflow: hidden;
}

/* The route the crossing happens on: brand blue on the way in, safe green on
   the way out. One hairline, so it reads as a line on a map, not a bar. */
.thirdi-checkin-flow__rail {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--tcf-rail) 16%,
    var(--tcf-rail) 44%,
    var(--tcf-rail-safe) 60%,
    var(--tcf-rail-safe) 84%,
    transparent 100%
  );
  opacity: 0.55;
}

/* Both ends of the stream fade out, so nothing appears or leaves on a hard
   edge. The mask sits on the track only: the logo plate must stay solid. */
.thirdi-checkin-flow__track {
  position: absolute;
  z-index: 1;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}

/* ---------- one crossing ------------------------------------------------- */

/* The slot is as wide as the band and slides from one band-width left to one
   band-width right, so its centred item crosses the visible band in exactly
   half of each cycle and sits dead centre at 50%. Spacing between items is
   therefore a fixed fraction of the band width at any viewport. */
.thirdi-checkin-flow__slot {
  position: absolute;
  inset: 0;
  transform: translate3d(0, 0, 0);
  animation: tcfTravel var(--tcf-dur) linear infinite;
  animation-delay: calc(var(--tcf-dur) / -10 * var(--i, 0));
  will-change: transform;
}

@keyframes tcfTravel {
  from { transform: translate3d(calc(-1 * var(--tcf-span)), 0, 0); }
  to { transform: translate3d(var(--tcf-span), 0, 0); }
}

.thirdi-checkin-flow__item {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

/* Avatar and chip stack on the same centre point and swap there. */
.thirdi-checkin-flow__face,
.thirdi-checkin-flow__checkin {
  grid-area: 1 / 1;
  animation-duration: var(--tcf-dur);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--tcf-dur) / -10 * var(--i, 0));
}

/* Both sides of the crossing are chips now (Adam, 2026-08-10): the traveller
   goes in carrying "Stream started" and comes out carrying "Stream ended", so
   the logo plate is the moment the thing finishes. Shared shell, they differ
   only by label and by the badge on the way out. */
.thirdi-checkin-flow__face,
.thirdi-checkin-flow__checkin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 5px 5px;
  border: 1px solid var(--line-hi);
  border-radius: var(--pill);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
  white-space: nowrap;
}

.thirdi-checkin-flow__face { animation-name: tcfFaceSwap; }

.thirdi-checkin-flow__checkin {
  opacity: 0;
  animation-name: tcfChipSwap;
}

/* The same person, now with a safe-arrival badge on their photo. */
.thirdi-checkin-flow__chipface {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}

.thirdi-checkin-flow__chipface img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.thirdi-checkin-flow__badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--tcf-green);
}

.thirdi-checkin-flow__badge svg {
  width: 8px;
  height: 8px;
  fill: none;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thirdi-checkin-flow__label {
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* The swap: hard hold on each state, a short cross-fade across the midpoint.
   The fade spans 1% of the cycle, so the item travels only a few pixels while
   it changes and stays well inside the logo plate the whole time. */
@keyframes tcfFaceSwap {
  0%, 49.5% { opacity: 1; transform: scale(1); }
  50.5%, 100% { opacity: 0; transform: scale(0.88); }
}

@keyframes tcfChipSwap {
  0%, 49.5% { opacity: 0; transform: scale(0.88); }
  50.5%, 100% { opacity: 1; transform: scale(1); }
}

/* ---------- the portal --------------------------------------------------- */

.thirdi-checkin-flow__portal {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  padding: clamp(13px, 1.6vw, 20px) clamp(18px, 2vw, 24px);
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

/* Soft light behind the plate, so the crossing point looks like a threshold
   rather than a card dropped on the line. */
.thirdi-checkin-flow__portal::before {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 260%;
  height: 320%;
  content: "";
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tcf-glow), transparent 72%);
  pointer-events: none;
}

.thirdi-checkin-flow__portal img {
  display: block;
  width: clamp(104px, 11vw, 150px);
  height: auto;
}

/* ---------- caption ------------------------------------------------------ */

.thirdi-checkin-flow__note {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  color: var(--dim);
  font-size: 13px;
  text-align: center;
}

/* ---------- narrow ------------------------------------------------------- */

/* Narrow keeps the labelled chip but compacts it, and the plate widens just
   enough that both states still hide behind it during the swap. Half as many
   people, and the gap between them is a much bigger share of the band. */
@media (max-width: 720px) {
  .thirdi-checkin-flow {
    --tcf-avatar: 36px;
    --tcf-span: 100%;
    --tcf-dur: 12s;
  }

  /* Half the stream, evenly spaced: the surviving slots keep the even --i
     values, so the gaps stay uniform on a narrow band. */
  .thirdi-checkin-flow__slot:nth-child(even) { display: none; }

  .thirdi-checkin-flow__face,
  .thirdi-checkin-flow__checkin {
    gap: 5px;
    padding: 3px 9px 3px 3px;
  }

  .thirdi-checkin-flow__chipface {
    width: 26px;
    height: 26px;
  }

  .thirdi-checkin-flow__badge {
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
  }

  /* The event labels are wider than the single "Checked in" chip this band was
     built for, and on a 354px band two chips were overlapping by ~14px.
     Tightened until the widest event fits with clearance. */
  .thirdi-checkin-flow__label { font-size: 10.5px; gap: 4px; }
  .thirdi-checkin-flow__emoji { font-size: 10.5px; }
}

/* The narrowest phones still had ~6px of chip-on-chip overlap at 390px, so the
   two longest events ("Stream started", "Trip started") lose the word "Stream"
   / keep it short there. Measured, not guessed: widest chip 147px against a
   354px band with five live chips. */
@media (max-width: 420px) {
  .thirdi-checkin-flow__chipface { width: 24px; height: 24px; }
  .thirdi-checkin-flow__face,
  .thirdi-checkin-flow__checkin { gap: 4px; padding: 3px 8px 3px 3px; }
  .thirdi-checkin-flow__label { font-size: 10px; gap: 3px; }
  .thirdi-checkin-flow__emoji { font-size: 10px; }
  .thirdi-checkin-flow__badge { width: 12px; height: 12px; }
}

/* 360px (SE, small Android) is the tightest band that still carries five live
   chips, and 140px chips were touching by 7px there. One more step down clears
   it with room. */
@media (max-width: 380px) {
  .thirdi-checkin-flow__chipface { width: 21px; height: 21px; }
  .thirdi-checkin-flow__face,
  .thirdi-checkin-flow__checkin { gap: 3px; padding: 2px 6px 2px 2px; }
  .thirdi-checkin-flow__label { font-size: 9px; gap: 3px; }
  .thirdi-checkin-flow__emoji { font-size: 9px; }
  .thirdi-checkin-flow__badge { width: 11px; height: 11px; }

  .thirdi-checkin-flow__portal { padding: 11px 22px; }

  .thirdi-checkin-flow__portal img { width: 86px; }

  .thirdi-checkin-flow__note { font-size: 12px; }
}

/* ---------- reduced motion ----------------------------------------------- */

/* No travel and no swap: a composed still of the same idea, two people on the
   way in, two check-ins on the way out. Every slot keeps its resting offset in
   its base transform, so this is what the band settles to with motion off. */
@media (prefers-reduced-motion: reduce) {
  .thirdi-checkin-flow__slot {
    display: none;
    animation: none;
  }

  .thirdi-checkin-flow__face,
  .thirdi-checkin-flow__checkin {
    animation: none;
  }

  .thirdi-checkin-flow__slot:nth-child(2),
  .thirdi-checkin-flow__slot:nth-child(4),
  .thirdi-checkin-flow__slot:nth-child(7),
  .thirdi-checkin-flow__slot:nth-child(9) { display: block; }

  .thirdi-checkin-flow__slot:nth-child(2) { transform: translate3d(-33%, 0, 0); }
  .thirdi-checkin-flow__slot:nth-child(4) { transform: translate3d(-16%, 0, 0); }
  .thirdi-checkin-flow__slot:nth-child(7) { transform: translate3d(16%, 0, 0); }
  .thirdi-checkin-flow__slot:nth-child(9) { transform: translate3d(33%, 0, 0); }

  .thirdi-checkin-flow__slot:nth-child(2) .thirdi-checkin-flow__face,
  .thirdi-checkin-flow__slot:nth-child(4) .thirdi-checkin-flow__face { opacity: 1; }

  .thirdi-checkin-flow__slot:nth-child(7) .thirdi-checkin-flow__face,
  .thirdi-checkin-flow__slot:nth-child(9) .thirdi-checkin-flow__face { opacity: 0; }

  .thirdi-checkin-flow__slot:nth-child(7) .thirdi-checkin-flow__checkin,
  .thirdi-checkin-flow__slot:nth-child(9) .thirdi-checkin-flow__checkin { opacity: 1; }
}

/* The narrow band cannot park two labelled chips side by side, so the still
   drops to one person on the way in and one checked in on the way out. */
@media (prefers-reduced-motion: reduce) and (max-width: 720px) {
  .thirdi-checkin-flow__slot:nth-child(2),
  .thirdi-checkin-flow__slot:nth-child(9) { display: none; }

  .thirdi-checkin-flow__slot:nth-child(4) { transform: translate3d(-26%, 0, 0); }
  .thirdi-checkin-flow__slot:nth-child(7) { transform: translate3d(26%, 0, 0); }
}

/* The event chips carry an emoji after the label. Sized and nudged so it sits
   on the text baseline rather than riding high, and given its own font stack
   so it never falls back to a monochrome outline glyph. */
.thirdi-checkin-flow__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.thirdi-checkin-flow__emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 12px;
  line-height: 1;
}