/* hub-intro_v1.css · LastStop kit /v6/decks/_kit/atlas-funnel/ · 2026-10-01
   The hub's arrival preview: the gold ring, arrow and caption on the card, the "Scroll to explore" hint, and the
   reduced-motion banner. Scoped to .hi-* only; nothing here takes clicks except the banner. */
/* impeccable-disable dark-glow -- the owner asked for a gold glow on the destination card */

.hi-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 9500; pointer-events: none; font-family: inherit; }
.hi-ring { position: absolute; display: block; border: 2px solid #FFC857; box-shadow: 0 0 0 4px rgba(255, 200, 87, .18), 0 0 34px 6px rgba(255, 184, 64, .55); opacity: 0; transition: opacity .35s ease; }
.hi-mark { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; transform: translateX(-50%); opacity: 0; transition: opacity .35s ease .1s; }
.hi-mark.hi-above { transform: translate(-50%, -100%); }
.hi-mark.hi-below { flex-direction: column-reverse; }
.hi-cap { padding: 8px 16px; border-radius: 999px; background: rgba(20, 17, 9, .94); border: 1px solid #FFC857; color: #FFF0C7; font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; box-shadow: 0 0 22px -4px rgba(255, 184, 64, .8); }
.hi-arrow { width: 28px; height: 48px; fill: none; stroke: #FFC857; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 184, 64, .9)) drop-shadow(0 0 14px rgba(255, 184, 64, .6)); }
.hi-on .hi-ring, .hi-on .hi-mark { opacity: 1; }
.hi-hint { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 9500; transform: translate(-50%, 8px); padding: 8px 16px; border-radius: 999px; pointer-events: none;
  background: rgba(13, 15, 19, .9); border: 1px solid rgba(255, 200, 87, .55); color: #FFF0C7; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; opacity: 0; transition: opacity .4s ease, transform .4s ease; }
.hi-hint.hi-on { opacity: 1; transform: translate(-50%, 0); }
.hi-banner { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 9500; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 24px); transform: translateX(-50%);
  padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(20, 17, 9, .96); border: 1px solid #FFC857; box-shadow: 0 10px 30px -10px #000; font-family: inherit; }
.hi-jump { color: #FFF0C7; font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: underline; text-underline-offset: 3px; }
.hi-jump:hover { color: #fff; }
.hi-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #FFF0C7; cursor: pointer; }
.hi-x:hover { background: rgba(255, 255, 255, .1); }
.hi-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hi-flagged { outline: 2px solid #FFC857; outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .hi-on .hi-ring { animation: hi-pulse 1.1s ease-in-out 2; }
  .hi-on .hi-arrow { animation: hi-nudge .9s ease-in-out 2; }
}
@keyframes hi-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 200, 87, .18), 0 0 34px 6px rgba(255, 184, 64, .55); } 50% { box-shadow: 0 0 0 10px rgba(255, 200, 87, .1), 0 0 48px 14px rgba(255, 184, 64, .8); } }
@keyframes hi-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 480px) {
  .hi-cap { white-space: normal; max-width: calc(100vw - 40px); text-align: center; }
}