/* ==========================================================================
   SAN Media Solution — gesture hints (hints.js)
   One small pill. It ignores the pointer, sits clear of the copy and the
   buttons, fades in and out, and its arrow breathes along the gesture's axis.
   ========================================================================== */

/* a host that was static keeps its place: the wide layout's top/left must not wake up */
.hint-host { position: relative; inset: auto; }

.hint {
  position: absolute;
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 13px;
  border-radius: 999px;
  background: rgba(12, 12, 14, .82);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(152, 240, 20, .35), 0 6px 18px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .26em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  translate: 0 6px;
  transition: opacity .55s cubic-bezier(.22, .61, .18, 1), translate .55s cubic-bezier(.22, .61, .18, 1);
}
.hint.is-on { opacity: 1; translate: 0 0; }
.hint__text { display: block; padding-top: 1px; }
.hint__arrow { display: block; width: 12px; height: 12px; color: var(--lime, #98f014); }
.hint__arrow svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hint.is-on .hint__arrow--right { animation: hint-nudge-x 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.hint.is-on .hint__arrow--down { animation: hint-nudge-y 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hint-nudge-x { 0%, 100% { translate: 0 0; } 50% { translate: 4px 0; } }
@keyframes hint-nudge-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }

/* ── where each one sits ─────────────────────────────────────────────── */
/* the hero: above the WhatsApp button, out of the statistics row */
/* anchored to the first screen: on tablets the hero can grow past the fold */
.hint--hero { right: 24px; top: calc(100svh - 126px); bottom: auto; }
/* the deck: at the right edge of the pinned window on wide screens (every
   slide's foot row is spoken for); on the fold on stacked layouts */
.hint--bc { left: 50%; bottom: 18px; translate: -50% 6px; }
.hint--bc.is-on { translate: -50% 0; }
@media (min-width: 1081px) {
  .hint--bc { left: auto; right: 24px; top: 50%; bottom: auto; translate: 0 calc(-50% + 6px); }
  .hint--bc.is-on { translate: 0 -50%; }
}
/* the logo belt: under the belt on stacked layouts; in the strip's top-right
   corner, above the arrow, on wide screens */
.hint--belt { left: 50%; bottom: -13px; translate: -50% 6px; }
.hint--belt.is-on { translate: -50% 0; }
@media (min-width: 1081px) {
  .hint--belt { left: auto; right: calc(22 * var(--k, 1px)); top: calc(6 * var(--k, 1px)); bottom: auto; translate: 0 6px; }
  .hint--belt.is-on { translate: 0 0; }
}
/* the work reel: over the frame, where nothing is written — its top on
   stacked layouts (under the counter row and the slide's padding), its foot
   on the wide board */
.hint--reel { left: 50%; top: 76px; translate: -50% 6px; }
.hint--reel.is-on { translate: -50% 0; }
@media (min-width: 1081px) {
  .hint--reel { left: calc(330 * var(--k, 1px)); top: auto; bottom: calc(26 * var(--k, 1px)); }
}
/* a strip's top-right corner (top is set by hints.js from the strip itself) */
.hint--above-right { right: clamp(16px, 3vw, 40px); }
/* a row of work: over its right edge, level with the cards */
.hint--row { right: 12px; top: 56%; bottom: auto; translate: 0 6px; }
.hint--row.is-on { translate: 0 0; }

/* the way back up: fixed above the WhatsApp button, a real control */
.hint--up { position: fixed; z-index: 59; right: 24px; bottom: calc(24px + 58px + 12px); padding: 8px 12px 8px 14px; border: 0; font-family: var(--sans, "Inter", system-ui, sans-serif); font-weight: 600; pointer-events: none; cursor: pointer; -webkit-tap-highlight-color: transparent; translate: 0 8px; }
.hint--up.is-on { pointer-events: auto; translate: 0 0; }
.hint--up:hover, .hint--up:focus-visible { background: rgba(12, 12, 14, .94); box-shadow: 0 0 0 1px rgba(152, 240, 20, .7), 0 10px 24px rgba(0, 0, 0, .24); }
.hint--up.is-on:hover { translate: 0 -2px; }
.hint--up:active { translate: 0 0; }
.hint--up:focus-visible { outline: 2px solid var(--lime, #98f014); outline-offset: 3px; }
.hint.is-on .hint__arrow--up { animation: hint-nudge-up 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes hint-nudge-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* the corner is the deck's while it is pinned (deck.js), like the WhatsApp button */
.is-deck-pinned .hint--up { opacity: 0; pointer-events: none; translate: 0 8px; }

@media (max-width: 1080px) {
  .hint--bc { bottom: 14px; }
  .hint--belt { bottom: 2px; }
}
@media (max-width: 720px) {
  .hint--up { right: 16px; bottom: calc(16px + 52px + 10px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) {
  .hint { font-size: 9px; letter-spacing: .22em; padding: 6px 10px 6px 12px; }
  .hint--bc { bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hint, .hint.is-on .hint__arrow--right, .hint.is-on .hint__arrow--down, .hint.is-on .hint__arrow--up { animation: none; transition: opacity .3s; translate: 0 0; }
  .hint--bc, .hint--belt, .hint--reel { translate: -50% 0; }
}