/**
 * WDHC sitewide interaction polish (restrained)
 * Subtle hover/focus/active, flash highlight, card affordance.
 * Load after tokens + page CSS. Keep motion short. No drama.
 */

:root {
  --wdhc-flash: rgba(212, 175, 55, 0.1);
  --wdhc-flash-edge: #d4af37;
  --wdhc-hover-bg: rgba(255, 255, 255, 0.03);
  --wdhc-focus-ring: 0 0 0 2px rgba(5, 5, 5, 0.9), 0 0 0 4px rgba(212, 175, 55, 0.45);
  --wdhc-motion: 0.15s ease;
}

/* ── Focus (keyboard) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-cta:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-sm:focus-visible,
.tier-badge:focus-visible,
.achievement-card:focus-visible,
.sidebar-link:focus-visible,
.lb-row:focus-visible,
.overview-ach-item:focus-visible {
  outline: none;
  box-shadow: var(--wdhc-focus-ring);
}

/* ── Buttons / CTAs ── */
.nav-cta,
.btn-primary,
.btn-secondary,
.btn-sm,
.btn-ghost,
.btn-outline,
.cta-btn,
.mobile-submit-bar,
.ch-hero__cta,
.chm-hero__cta,
button[type="submit"]:not(.unstyled) {
  transition: background var(--wdhc-motion), border-color var(--wdhc-motion),
    color var(--wdhc-motion), transform var(--wdhc-motion), box-shadow var(--wdhc-motion),
    opacity var(--wdhc-motion);
}

.nav-cta:hover,
.btn-primary:hover,
.cta-btn:hover,
.ch-hero__cta:hover,
.chm-hero__cta:hover {
  transform: translateY(-1px);
}

.nav-cta:active,
.btn-primary:active,
.btn-secondary:active,
.btn-sm:active,
.cta-btn:active {
  transform: translateY(0);
}

/* ── Cards (subtle lift, not float) ── */
main .card,
main .card-highlight,
.wdhc-section-panel,
.wdhc-card-min,
.rule-card,
.threshold-card,
.chm-doc,
.post-video-card,
.achievement-card,
.rules-path-card,
.rules-film__step,
.rules-five__item,
.rules-matrix-card,
.rules-submit-cta {
  transition: border-color var(--wdhc-motion), box-shadow var(--wdhc-motion),
    transform var(--wdhc-motion), background var(--wdhc-motion);
}

main .card:hover,
.wdhc-section-panel:hover,
.wdhc-card-min:hover,
.rule-card:hover,
.threshold-card:hover,
.chm-doc:hover {
  border-color: rgba(212, 175, 55, 0.22);
}

.achievement-card {
  cursor: default;
}

.achievement-card.unlocked {
  cursor: pointer;
}

.achievement-card.unlocked:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.35);
}

.achievement-card.unlocked:active {
  transform: translateY(0);
}

/* Flash highlight (scroll-to / click target) */
.wdhc-flash-highlight,
.hang-row-highlight,
.achievement-card.wdhc-flash-highlight,
.lb-row.wdhc-flash-highlight {
  animation: wdhc-flash-in 0.9s ease;
  box-shadow: inset 3px 0 0 var(--wdhc-flash-edge);
  background: var(--wdhc-flash) !important;
}

@keyframes wdhc-flash-in {
  0% {
    background: rgba(212, 175, 55, 0.18);
  }
  100% {
    background: var(--wdhc-flash);
  }
}

/* ── Leaderboard / list rows ── */
.lb-row,
.lb-mobile-card,
.hang-row.hang-card,
.activity-feed-item--clickable,
.tl-session-row,
.overview-ach-item {
  transition: background var(--wdhc-motion), border-color var(--wdhc-motion),
    transform var(--wdhc-motion);
}

.lb-row:hover,
.lb-mobile-card:hover {
  background: var(--wdhc-hover-bg);
}

.activity-feed-item--clickable:hover,
.tl-session-row:hover {
  background: var(--wdhc-hover-bg);
}

/* ── Nav links ── */
.nav-center a,
.footer-links a,
.sidebar-link {
  transition: color var(--wdhc-motion), background var(--wdhc-motion),
    border-color var(--wdhc-motion);
}

/* ── Form controls ── */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition: border-color var(--wdhc-motion), box-shadow var(--wdhc-motion);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  border-color: rgba(212, 175, 55, 0.4);
}

/* ── Progress rails (match dashboard tier bar language, light touch) ── */
.tier-progress-bar,
.achievement-progress-bar,
.hang-path-rail {
  outline: 1px solid rgba(255, 255, 255, 0.08);
  outline-offset: 0;
}

/* ── Share / filter chips ── */
.achievement-filter-btn,
.lb-filter-btn,
.sort-btn {
  transition: background var(--wdhc-motion), border-color var(--wdhc-motion),
    color var(--wdhc-motion);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}