/* Gate landing page — accessibility and usability additions.
 *
 * Loaded AFTER gate.css, which is the approved wireframe stylesheet shipped
 * verbatim. Keeping our changes in a separate file means the approved design
 * stays reviewable on its own and every deviation from it is visible here.
 *
 * Problem this solves: on a phone the founder row is a horizontal scroller
 * (display:flex + overflow-x:auto + scroll-snap), but the design hides the
 * scrollbar with `scrollbar-width: none` and `::-webkit-scrollbar {display:none}`
 * and there is no other cue. A scrollable region with no visible affordance is
 * a region most people never scroll — they simply see three founders and
 * assume that is all of them.
 *
 * Deliberately NOT auto-scrolling. Content that moves on its own has to satisfy
 * WCAG 2.2.2 (Pause, Stop, Hide), it moves the card someone is reading, and it
 * gives no hint that the row is interactive — it just looks like an animation.
 * The fixes below are the standard affordances: peek, a scroll indicator, an
 * edge fade, and an explicit hint.
 */

/* Hidden by default: above the mobile breakpoint the founder row is a
 * five-column grid with nothing to scroll, so the hint would be a lie.
 *
 * This rule MUST come before the media query. Both selectors have the same
 * specificity, so whichever is declared last wins — with this at the end of
 * the file the hint was display:none on every viewport, which is exactly how
 * it shipped the first time.
 */
.gate-scroll-hint {
  display: none;
}

@media (max-width: 680px) {
  /* 1. PEEK — the strongest cue there is. Sizing each card so the next one is
     partially visible tells people the row continues without any words. The
     approved design already uses a fixed 168px; this keeps that intent while
     guaranteeing a partial card at common phone widths (360-430px). */
  .gate-founder-card {
    flex: 0 0 clamp(150px, 44vw, 172px);
  }

  /* 2. A VISIBLE SCROLL INDICATOR. The design hides the scrollbar; on a touch
     device that removes the only standard signal that a region scrolls. This
     restores a slim, on-brand one rather than the default chrome. */
  .gate-founder-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--cyan, #16a2d7) rgba(255, 255, 255, 0.08);
    padding-bottom: 10px;
    /* Snap to the card edge rather than the container edge, so a snapped card
       is not flush against the screen edge. */
    scroll-padding-left: 2px;
  }
  .gate-founder-grid::-webkit-scrollbar {
    display: block;
    height: 4px;
  }
  .gate-founder-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
  }
  .gate-founder-grid::-webkit-scrollbar-thumb {
    background: var(--cyan, #16a2d7);
    border-radius: 999px;
  }

  /* 3. EDGE FADE. Signals "there is more this way" at a glance. pointer-events
     is none so it can never intercept a tap on the card underneath it, which is
     the usual way this pattern breaks. */
  .gate-founders {
    position: relative;
  }
  .gate-founders::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 14px;
    width: 44px;
    height: 132px;
    background: linear-gradient(to right, rgba(5, 6, 19, 0), rgba(5, 6, 19, 0.85));
    pointer-events: none;
  }

  /* 4. AN EXPLICIT HINT, for the people the visual cues do not reach. The
     element is aria-hidden in the markup: a screen reader user already moves
     through the founder list item by item and would find "swipe" meaningless
     and misleading. */
  .gate-scroll-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--light-purple, #7b6fd0);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .gate-scroll-hint span {
    animation: gate-hint-nudge 2.4s ease-in-out infinite;
  }

  @keyframes gate-hint-nudge {
    0%, 60%, 100% { transform: translateX(0); }
    75% { transform: translateX(4px); }
  }
}


/* The nudge is decoration, not information — the arrow glyph carries the
   meaning on its own. */
@media (prefers-reduced-motion: reduce) {
  .gate-scroll-hint span {
    animation: none;
  }
}