/* NOW indicator — festival-time "what's happening right now" signal.
 * Spec §3.6. Rendered in two variants:
 *   .now-indicator--strip on My picks above the pick cards
 *   .now-indicator--line  on the Chronologie as a horizontal ruler
 *
 * Amplified per the critique: the festival-live moment has to read
 * through sunlight glare on a phone held at arm's length. Louder dot,
 * louder line, stronger pill.
 */

@layer components {
  /* ── Strip (My picks) ────────────────────────────────────────────── */

  .now-indicator--strip {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    margin-block: var(--block-space-s);
    background: color-mix(in oklch, oklch(var(--lch-laser)) 14%, var(--color-surface));
    border: 1px solid color-mix(in oklch, oklch(var(--lch-laser)) 50%, transparent);
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-ink);

    &[data-state="pre"],
    &[data-state="post"] {
      display: none;
    }
  }

  .now-indicator__dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: oklch(var(--lch-laser));
    box-shadow: 0 0 0 3px color-mix(in oklch, oklch(var(--lch-laser)) 28%, transparent);
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .now-indicator__dot {
      animation: now-pulse 1.8s ease-in-out infinite;
    }
    @keyframes now-pulse {
      0%, 100% { transform: scale(1);    box-shadow: 0 0 0 3px color-mix(in oklch, oklch(var(--lch-laser)) 28%, transparent); }
      50%      { transform: scale(1.15); box-shadow: 0 0 0 6px color-mix(in oklch, oklch(var(--lch-laser)) 12%, transparent); }
    }
  }

  /* ── Line (Chronologie) ──────────────────────────────────────────── */

  .now-indicator--line {
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    background: oklch(var(--lch-laser));
    box-shadow: 0 0 8px color-mix(in oklch, oklch(var(--lch-laser)) 40%, transparent);
    z-index: 3;
    pointer-events: none;

    &[data-state="pre"],
    &[data-state="post"] {
      display: none;
    }
  }

  .now-indicator__pill {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -10px;
    padding: 0.125rem 0.5rem;
    background: oklch(var(--lch-laser));
    /* Fixed dark text — laser is too saturated for both --color-canvas
     * and --color-ink to contrast cleanly across both themes. */
    color: oklch(17% 0.02 276);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
  }
}