/* guide-arrow_v1.css · LastStop kit /v6/decks/_kit/atlas-funnel/ · 2026-10-01
   The in-flow "next step" hint: a glowing arrow and a one-line label. Scoped to .ga-* only. */
/* impeccable-disable dark-glow -- the owner asked for glowing guide arrows */

.ga-hint { --ga-c: #6AA0FF; --ga-hi: #CFE6FF; --ga-glow: rgba(47, 140, 255, .85); --ga-x: 50%; --ga-pl: 0px;
  display: grid; grid-template-rows: 0fr; width: 100%; contain: inline-size; pointer-events: none; font-family: inherit; transition: grid-template-rows .45s cubic-bezier(.2, .8, .2, 1); }
.ga-hint.ga-gold { --ga-c: #FFC857; --ga-hi: #FFF0C7; --ga-glow: rgba(255, 184, 64, .85); }
.ga-hint.ga-on { grid-template-rows: 1fr; }
.ga-clip { min-height: 0; overflow: hidden; }
.ga-in { position: relative; display: flex; flex-direction: column; padding: 4px 0 6px; opacity: 0; transition: opacity .35s ease .1s; }
.ga-down .ga-in { flex-direction: column-reverse; padding: 6px 0 4px; }
.ga-on .ga-in { opacity: 1; }
.ga-arrow { display: block; width: 24px; height: 36px; margin-left: calc(var(--ga-x) - 12px); color: var(--ga-c); filter: drop-shadow(0 0 6px var(--ga-glow)) drop-shadow(0 0 14px var(--ga-glow)); }
.ga-arrow svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ga-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-left: var(--ga-pl); max-width: 100%; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: rgba(13, 15, 19, .92); border: 1px solid var(--ga-c); box-shadow: 0 0 12px -3px var(--ga-glow); color: var(--ga-hi); font-size: 15px; font-weight: 700; line-height: 1.3; }
.ga-label { min-width: 0; }
.ga-x { pointer-events: auto; display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ga-hi); cursor: pointer; }
.ga-x:hover { background: rgba(255, 255, 255, .1); }
.ga-x:focus-visible { outline: 2px solid var(--ga-hi); outline-offset: 1px; }
.ga-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* the target: a few pulses, then still */
.ga-pulse { outline: 2px solid transparent; outline-offset: 2px; }
.ga-pulse-blue { --ga-ring: rgba(106, 160, 255, .95); }
.ga-pulse-gold { --ga-ring: rgba(255, 200, 87, .95); }

@media (prefers-reduced-motion: no-preference) {
  .ga-on .ga-arrow { animation: ga-nudge-up 1.1s ease-in-out 6; }
  .ga-down.ga-on .ga-arrow { animation-name: ga-nudge-down; }
  .ga-pulse { animation: ga-ring 1.4s ease-out 4; }
}
@media (prefers-reduced-motion: reduce) {
  .ga-hint, .ga-in { transition: none; }
  .ga-pulse { outline-color: var(--ga-ring); }
}
@keyframes ga-nudge-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ga-nudge-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes ga-ring { 0% { outline-color: var(--ga-ring); outline-offset: 2px; } 100% { outline-color: transparent; outline-offset: 14px; } }