/* =============================================================================
   interaction-hint.css — minimalist brass affordance cue
   ---------------------------------------------------------------------------
   One visual language for "this responds to a gesture" cues (drag a gallery,
   keep scrolling). Matches the site's existing minimalist brass line — the
   hero .gamos-hero__prompt (letter-spaced brass text + thin arrow, NO box):
   just text + a hairline icon in brass, sitting directly on the background.
   No pill, no fill, no backdrop-blur (§1 "Luxury or nothing" = restraint).

   Markup ships the element; js/interaction-hint.js sets [data-dismissed] once
   the gesture happens (drag) or after a short delay (scroll). Self-contained
   keyframes; §10.2 tokens only (no hard-coded hex).

   Host requirement: the cue is position:absolute, so its section/stage must be
   a positioned ancestor. The :where():has() rule below guarantees that for the
   vanilla hosts WITHOUT touching their section CSS (and WITHOUT clobbering an
   existing sticky/relative context — :where() keeps specificity 0).
   ========================================================================== */

:where(#lounge):has(> .ix-hint) { position: relative; }

/* Desktop lounge: the section keeps extra height below the ring, so the base
   inset leaves a ~74px gap under the gallery. Raise the cue toward the gallery
   (a touch). Desktop-only — mobile keeps its own placement (mobile/css). */
@media (min-width: 769px) {
  #lounge > .ix-hint { inset-block-end: clamp(52px, 8.5vh, 92px); }
}

.ix-hint {
  position: absolute;
  left: 50%;
  inset-block-end: clamp(16px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--brass-deep);       /* on light surfaces (lounge ivory) */
  font-family: Heebo, sans-serif;
  font-weight: 500;
  font-size: clamp(.82rem, 1.02vw, .98rem);
  letter-spacing: .2em;
  white-space: nowrap;
  pointer-events: none;            /* never blocks the gesture it advertises */
  opacity: 0;
  animation: ix-hint-in 900ms cubic-bezier(.16, 1, .3, 1) 600ms forwards;
  transition: opacity 600ms ease, transform 600ms ease;
}

/* On dark sections (#culinary), the deep brass would sink into the background —
   step up to the lighter primary brass, matching the site's dark-surface text. */
.ix-hint--on-dark { color: var(--brass); }

.ix-hint__icon { display: inline-flex; inline-size: 1.1em; block-size: 1.1em; }
.ix-hint__icon svg {
  inline-size: 100%; block-size: 100%;
  stroke: currentColor; fill: none;      /* follows the cue's brass colour */
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Drag → icon sways left↔right (⟷). Scroll → icon bobs downward.
   Tap → icon breathes (concentric circles pulse). */
.ix-hint--drag   .ix-hint__icon { animation: ix-hint-sway 2200ms ease-in-out 1600ms infinite; }
.ix-hint--scroll .ix-hint__icon { animation: ix-hint-bob  2000ms ease-in-out 1400ms infinite; }
.ix-hint--tap    .ix-hint__icon { animation: ix-hint-tap  2200ms ease-in-out 1600ms infinite; }
.ix-hint__text { animation: ix-hint-pulse 3200ms ease-in-out 1600ms infinite; }

/* Static-flow placement (2026-07-13, #gallery): sits in normal flow between the
   section header and the grid — the absolute bottom-center grammar would land
   on the photos. Own entry keyframes (no translateX(-50%)). */
.ix-hint--static {
  position: static;
  display: flex;
  justify-content: center;
  transform: none;
  animation-name: ix-hint-in-static;
}
.ix-hint--static[data-dismissed] {
  animation: none;
  transform: translateY(10px);
}

/* Dismissed after first gesture / timeout → fade up and out. animation:none
   cancels the forwards fill of ix-hint-in so the opacity:0 + transition apply. */
.ix-hint[data-dismissed] {
  animation: none;
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

@keyframes ix-hint-in    { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes ix-hint-in-static { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ix-hint-sway  { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes ix-hint-bob   { 0%, 100% { transform: translateY(0); }    50% { transform: translateY(4px); } }
@keyframes ix-hint-tap   { 0%, 100% { transform: scale(1); }          50% { transform: scale(1.15); } }
@keyframes ix-hint-pulse { 0%, 100% { opacity: 1; }                  50% { opacity: .6; } }

/* §8/§9 — reduced motion: cue is shown static, all loops frozen.
   js/interaction-hint.js also skips the auto-fade timer so scroll cues stay. */
@media (prefers-reduced-motion: reduce) {
  .ix-hint { animation: none; opacity: 1; }
  .ix-hint__icon, .ix-hint__text { animation: none; }
}