/* Formhouse Connected: the Passport base, shared by every page that shows it.
   Claim, journey, ink stamps and the book, the check-in slam, and the race. Pages load it
   after shared/app.css; drawing lives in shared/passport.js. */

/* Ink colours for stamps (FH.passport.INK) */
.stamp--blue { color: var(--blue); }
.stamp--white { color: color-mix(in srgb, var(--text) 86%, transparent); }
.stamp--gold { color: var(--gold); }

/* ---------------------------------------------------------------- Claim */

.claim__hero { position: relative; height: 54cqh; overflow: hidden; }
.claim__hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.claim__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0.4), transparent 25%, transparent 55%, var(--ink-1)); }
.claim__badge {
  position: absolute; left: 50%; top: calc(var(--safe-top) + var(--sp-2)); z-index: 2;
  translate: -50% 0;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-2xs); color: var(--text);
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--blue-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.claim__badge span { display: inline-flex; width: 1.3em; color: var(--success); }
.claim__body { position: relative; margin-top: -10cqh; padding: 0 var(--sp-5); display: grid; gap: var(--sp-4); }
.claim__capture { margin-top: var(--sp-1); }

.factory-leg {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line);
  font-size: var(--fs-xs);
}
.factory-leg__line { position: relative; height: 1px; background: repeating-linear-gradient(90deg, var(--text-3) 0 4px, transparent 4px 8px); }
.factory-leg__plane { position: absolute; top: 50%; left: 0; width: 5cqw; color: var(--accent-hi); translate: -50% -50%; rotate: 90deg; filter: drop-shadow(0 0 6px var(--accent)); }
.screen.is-active .factory-leg__plane { animation: fly 2.4s var(--ease-in-out) 0.9s forwards; }
@keyframes fly { to { left: 100%; } }
.factory-leg__miles { grid-column: 1 / -1; color: var(--text-3); }
.factory-leg__miles b { color: var(--text); font-weight: 700; }

/* ---------------------------------------------------------------- Journey */

.home__globe { position: relative; width: 112%; margin: calc(var(--sp-2) * -1) -6% calc(var(--sp-3) * -1); }
.home__globe-hint { position: absolute; right: 8%; bottom: 10%; font-size: var(--fs-2xs); color: var(--text-4); pointer-events: none; }
.h-hero.num { margin: var(--sp-1) 0 var(--sp-4); }

.race-card { height: 40cqw; margin-top: var(--sp-4); border: 1px solid var(--line); }
.race-card .media__body { padding: var(--sp-4); }

.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.tool {
  display: grid; gap: 2px; justify-items: start; text-align: left;
  padding: var(--sp-4); border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--line);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.tool:hover { border-color: var(--line-strong); }
.tool:active { transform: scale(0.97); }
.tool > span { width: 6.4cqw; height: 6.4cqw; color: var(--accent-hi); margin-bottom: var(--sp-2); }
.tool b { font-size: var(--fs-sm); }
.tool--wide { grid-column: 1 / -1; position: relative; isolation: isolate; overflow: hidden; min-height: 34cqw; align-content: end; border-color: var(--blue-line); }
.tool--wide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.75; }
.tool--wide::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 6, 12, 0.92) 30%, rgba(4, 6, 12, 0.2)); }
.tool--wide b { font-size: var(--fs-md); }
.tool--wide small { color: var(--text-2); max-width: 60%; }
.tool small { font-size: var(--fs-2xs); color: var(--text-3); }

/* ---------------------------------------------------------------- Stamps */

.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(26cqw, 1fr)); gap: var(--sp-3); }
.book__page {
  position: relative; padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-lg);
  background:
    repeating-radial-gradient(circle at 30% 20%, rgba(0, 168, 255, 0.05) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 80% 90%, rgba(233, 196, 106, 0.035) 0 1px, transparent 1px 9px),
    linear-gradient(170deg, #0d1a2b, #08111d);
  border: 1px solid rgba(233, 196, 106, 0.22);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.book__page::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08), transparent); }
.book__page .stamps { grid-template-columns: repeat(3, 1fr); gap: 0; }
.book__page .stamp-cell { margin: -1.5cqw; background: none; }
.stamp-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-md); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.035), transparent 70%); }
.stamp { width: 100%; height: auto; overflow: visible; }
.stamp text { font-family: var(--font-mono); text-transform: uppercase; }
.stamp--mini { width: 22cqw; }
.hscroll .stamp-cell { width: 26cqw; background: var(--glass); border: 1px solid var(--line); }
.stamp-cell.is-new { animation: stamp-pop 700ms var(--ease-spring); }
@keyframes stamp-pop { from { transform: scale(1.6) rotate(-12deg); opacity: 0; } }

.book { border-radius: var(--r-lg); overflow: hidden; }
.book__cover {
  position: relative; display: grid; gap: var(--sp-3); justify-items: center; align-content: center;
  height: 44cqw; padding: var(--sp-5);
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 6px),
    linear-gradient(150deg, #0b1a2c, #050a12 70%);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-lg);
}
.book__cover img { height: 5cqw; width: auto; }
.book__cover .mono { font-size: var(--fs-2xs); letter-spacing: 0.2em; color: var(--gold); opacity: 0.8; }
.book__crest { width: 10cqw; }
.book__crest svg { width: 100%; height: auto; fill: none; stroke: var(--gold); stroke-width: 22; opacity: 0.85; }

/* ---------------------------------------------------------------- Check-in */

.ci { position: relative; min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; isolation: isolate; overflow: hidden; }
.ci__photo { position: absolute; inset: 0; z-index: -1; }
.ci__photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.2s var(--ease-out), transform 2.4s var(--ease-out); }
.ci__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 5, 0.7), rgba(5, 5, 5, 0.1) 35%, rgba(5, 5, 5, 0.85) 62%, var(--ink-1)); }
.ci.is-found .ci__photo img { opacity: 1; transform: scale(1); }
.ci__bar { padding: var(--safe-top) var(--sp-5) 0; margin: 0; }
.ci__spacer { width: max(var(--tap-min), 11cqw); }

.ci__radar { position: relative; display: grid; place-items: center; }
.ci__radar span { position: absolute; width: 30cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--accent-hi); opacity: 0; animation: ring 2.4s var(--ease-out) infinite; }
.ci__radar span:nth-child(2) { animation-delay: 0.8s; }
.ci__radar span:nth-child(3) { animation-delay: 1.6s; }
.ci__radar i { width: 11cqw; height: 11cqw; color: var(--accent-hi); filter: drop-shadow(0 0 14px var(--accent)); animation: bob 1.4s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-6px); } }
.ci.is-found .ci__radar { opacity: 0; transition: opacity var(--t-med); }
.ci__readout {
  position: absolute; left: 0; right: 0; top: 52%; z-index: 2;
  display: grid; gap: var(--sp-1); justify-items: center;
  font-size: var(--fs-xs); color: var(--text-2);
  transition: opacity var(--t-med);
}
.ci__readout span { animation: reveal var(--t-med) var(--ease-out) both; }
.ci__readout span b { color: var(--success); font-weight: 500; }
.ci.is-found .ci__readout { opacity: 0; }

.ci__body { padding: 0 var(--sp-5) calc(var(--safe-bottom) + var(--sp-6)); display: grid; gap: var(--sp-3); transition: opacity var(--t-med), transform var(--t-med) var(--ease-out); }
.ci__city, .ci__meta, .ci__rules { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.ci.is-found .ci__city, .ci.is-found .ci__meta, .ci.is-found .ci__rules { opacity: 1; transform: none; }
.ci.is-found .ci__meta { transition-delay: 120ms; }
.ci.is-found .ci__rules { transition-delay: 240ms; }
.ci__rules { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-md); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); }
.ci__rules > span { flex: none; width: 4.5cqw; color: var(--success); }
.ci.is-stamped .ci__body { opacity: 0; transform: translateY(20px); pointer-events: none; }

.ci__stamp { position: absolute; left: 50%; top: 31%; width: 78cqw; translate: -50% -50%; opacity: 0; pointer-events: none; z-index: 3; filter: drop-shadow(0 0 24px rgba(0, 168, 255, 0.6)); }
.ci::after { content: ''; position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 50% 31%, rgba(255, 255, 255, 0.9), rgba(0, 168, 255, 0.4) 30%, transparent 60%); opacity: 0; pointer-events: none; }
.ci.is-stamped::after { animation: flash 700ms ease-out 300ms; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.ci.is-stamped .ci__photo img { opacity: 0.4; }
.ci.is-stamped .ci__stamp { animation: slam 650ms cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes slam { 0% { opacity: 0; transform: scale(2.6) rotate(-24deg); } 60% { opacity: 1; transform: scale(0.94) rotate(-9deg); } 100% { opacity: 1; transform: scale(1) rotate(-8deg); } }
.ci.is-stamped { animation: shake 380ms ease 380ms; }
@keyframes shake { 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, -1px); } 80% { transform: translate(1px, 2px); } }

.ci__done {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 0 var(--sp-5) calc(var(--safe-bottom) + var(--sp-6));
  display: grid; gap: var(--sp-3);
  opacity: 0; transform: translateY(30px); pointer-events: none;
  transition: opacity var(--t-slow) var(--ease-out) 700ms, transform var(--t-slow) var(--ease-out) 700ms;
}
.ci.is-stamped .ci__done { opacity: 1; transform: none; pointer-events: auto; }
.ci__overtake b { color: var(--accent-hi); }
.ci__flip { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-hero); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.ci__from { color: var(--text-4); text-decoration: line-through; text-decoration-thickness: 3px; }
.ci__arrow { width: 9cqw; color: var(--accent-hi); }
.ci__to { color: var(--accent-hi); text-shadow: 0 0 30px var(--accent); }
.ci.is-stamped .ci__to { animation: flip-in 700ms var(--ease-spring) 1300ms both; }
@keyframes flip-in { from { transform: translateY(60%) rotateX(80deg); opacity: 0; } }

/* ---------------------------------------------------------------- Race */

.race__hero { position: relative; height: 62cqh; display: grid; align-content: end; isolation: isolate; overflow: hidden; }
.race__hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.race__hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 5, 5, 0.55), transparent 30%, rgba(10, 10, 10, 0.6) 60%, var(--ink-1)); }
.race__hero-body { padding: 0 var(--sp-5) var(--sp-4); display: grid; gap: var(--sp-3); }
.race__body { padding: 0 var(--sp-5) calc(var(--tabbar-h) + var(--sp-6)); }

.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); }
.countdown div { display: grid; justify-items: center; padding: var(--sp-2) 0; border-radius: var(--r-sm); background: rgba(0, 0, 0, 0.5); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.countdown b { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.countdown small { font-size: var(--fs-2xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.12em; }

.race__you { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; }
.race__rank { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.04em; color: var(--accent-hi); }

.board { list-style: none; display: grid; gap: 2px; }
.board li {
  display: grid; grid-template-columns: 8cqw 1fr auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  transition: background var(--t-med);
}
.board li:nth-child(-n + 3) .board__rank { color: var(--gold); }
.board__rank { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
.board__who b { display: block; font-size: var(--fs-sm); }
.board__who small { font-size: var(--fs-2xs); color: var(--text-3); font-family: var(--font-mono); }
.board__miles { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-sm); }
.board li.is-you { background: linear-gradient(90deg, var(--accent-dim), transparent); box-shadow: inset 2px 0 0 var(--accent); }
.board li.is-you .board__rank { color: var(--accent-hi); }
.board li.is-up { animation: up 900ms var(--ease-spring) 300ms both; }
.board li.is-down { animation: down 900ms var(--ease-out) 300ms both; }
@keyframes down { from { transform: translateY(-100%); background: rgba(255, 90, 106, 0.18); } }
@keyframes up { from { transform: translateY(100%); background: rgba(0, 168, 255, 0.35); } }
.board__move { font-size: var(--fs-2xs); color: var(--success); margin-left: var(--sp-1); }