/*
  ============================================================
  INKWELL BLOG  ·  style.css
  Theme: Editorial Dark — refined, high-contrast typography
  ============================================================

  TABLE OF CONTENTS
  1.  CSS Custom Properties (Design Tokens)
  2.  Reset & Base
  3.  Typography
  4.  Utility Classes
  5.  Layout — Container
  6.  Site Header (Sticky)
  7.  Navigation
  8.  Mobile Menu
  9.  Hero Section
  10. Main Content Area
  11. Controls Bar (Search + Filters)
  12. Search Input
  13. Category Filter Buttons
  14. Results Info
  15. Blog Grid
  16. Blog Card
  17. No Results State
  18. Load More
  19. Buttons
  20. Site Footer
  21. Social Links
  22. Responsive — Tablet (≤1024px)
  23. Responsive — Mobile (≤640px)
  24. Animations & Transitions
  25. Accessibility
  ============================================================
*/


/* ── 1. CSS Custom Properties ─────────────────────────── */
:root {
  /* Palette */
  --clr-bg: #0d0d0d;
  /* near-black page background     */
  --clr-surface: #161616;
  /* card / header background       */
  --clr-surface-2: #1f1f1f;
  /* hover states, subtle surfaces  */
  --clr-border: #2a2a2a;
  /* subtle dividers                */
  --clr-accent: #e8c97e;
  /* warm gold — primary accent     */
  --clr-accent-dim: #c9a94e;
  /* darker gold for hover          */
  --clr-text: #f0ede8;
  /* primary text (warm white)      */
  --clr-text-muted: #888580;
  /* secondary / meta text          */
  --clr-text-faint: #444240;
  /* very subtle text               */

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, .5), 0 12px 40px rgba(0, 0, 0, .4);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration: 240ms;

  /* Layout */
  --header-h: 68px;
  --container: 1200px;
}


/* ── 2. Reset & Base ──────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input {
  font-family: inherit;
}


/* ── 3. Typography ────────────────────────────────────── */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

em {
  font-style: italic;
  color: var(--clr-accent);
}


/* ── 4. Utility Classes ───────────────────────────────── */

/* Screen-reader only text (accessible but visually hidden) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ── 5. Layout — Container ────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}


/* ── 6. Site Header ───────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(13, 13, 13, .85);
  /* translucent dark     */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration) var(--ease),
    background var(--duration) var(--ease);
}

/* Scrolled state — added by JS */
.site-header.is-scrolled {
  background: rgba(13, 13, 13, .96);
  border-bottom-color: var(--clr-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-mark {
  color: var(--clr-accent);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--duration) var(--ease);
}

.logo:hover .logo-mark {
  transform: rotate(30deg) scale(1.2);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--clr-text);
}


/* ── 7. Navigation ────────────────────────────────────── */
.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-link {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--clr-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--duration) var(--ease);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: var(--space-3);
  right: var(--space-3);
  height: 1px;
  background: var(--clr-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration) var(--ease);
}

.nav-link:hover {
  color: var(--clr-text);
}

.nav-link:hover::after,
.nav-link--active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-link--active {
  color: var(--clr-text);
}

/* CTA nav link — styled like a pill button */
.nav-link--cta {
  background: var(--clr-accent);
  color: var(--clr-bg) !important;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-xl);
  font-weight: 600;
  letter-spacing: 0;
  transition: background var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.nav-link--cta::after {
  display: none;
}

.nav-link--cta:hover {
  background: var(--clr-accent-dim);
  transform: translateY(-1px);
}


/* ── 8. Mobile Menu (Hamburger) ────────────────────────── */
.nav-toggle {
  display: none;
  /* shown only on mobile — see responsive */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--duration) var(--ease);
}

.nav-toggle:hover {
  background: var(--clr-surface-2);
}

.hamburger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--clr-text);
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--duration) var(--ease),
    opacity var(--duration) var(--ease);
}

/* Animate hamburger → X when open */
.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── 9. Hero Section ──────────────────────────────────── */
.page-hero {
  position: relative;
  padding-block: var(--space-9) var(--space-8);
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid var(--clr-border);
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--clr-text);
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 1;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 300;
  color: var(--clr-text-muted);
  max-width: 520px;
  margin-inline: auto;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

/* Decorative golden orb in background */
.hero-bg-accent {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle,
      rgba(232, 201, 126, 0.06) 0%,
      transparent 65%);
  pointer-events: none;
  z-index: 0;
}


/* ── 10. Main Content Area ────────────────────────────── */
.main-content {
  padding-block: var(--space-8) var(--space-9);
}


/* ── 11. Controls Bar ─────────────────────────────────── */
.controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--clr-border);
}


/* ── 12. Search Input ─────────────────────────────────── */
.search-wrapper {
  position: relative;
  flex: 1 1 280px;
  max-width: 400px;
}

.search-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--clr-text-muted);
  pointer-events: none;
  transition: color var(--duration) var(--ease);
}

.search-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-5) 0 46px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  color: var(--clr-text);
  font-size: 0.9rem;
  font-weight: 400;
  outline: none;
  transition: border-color var(--duration) var(--ease),
    background var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
  -webkit-appearance: none;
}

/* Remove default browser search-input X on WebKit */
.search-input::-webkit-search-cancel-button {
  display: none;
}

.search-input::placeholder {
  color: var(--clr-text-muted);
}

.search-input:focus {
  border-color: var(--clr-accent);
  background: var(--clr-surface-2);
  box-shadow: 0 0 0 3px rgba(232, 201, 126, 0.12);
}

.search-input:focus~.search-icon,
.search-wrapper:focus-within .search-icon {
  color: var(--clr-accent);
}

/* Custom clear button */
.search-clear {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--clr-text-muted);
  transition: background var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.search-clear svg {
  width: 14px;
  height: 14px;
}

.search-clear:hover {
  background: var(--clr-surface-2);
  color: var(--clr-text);
}


/* ── 13. Category Filter Buttons ──────────────────────── */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-btn {
  height: 36px;
  padding: 0 var(--space-4);
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  color: var(--clr-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.filter-btn:hover {
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border-color: var(--clr-text-faint);
}

/* Active / selected state */
.filter-btn--active {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-bg);
  font-weight: 600;
}

.filter-btn--active:hover {
  background: var(--clr-accent-dim);
  border-color: var(--clr-accent-dim);
  color: var(--clr-bg);
}


/* ── 14. Results Info ─────────────────────────────────── */
.results-info {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  margin-bottom: var(--space-6);
  min-height: 1.2em;
  /* prevents layout shift */
}


/* ── 15. Blog Grid ────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}


/* ── 16. Blog Card ────────────────────────────────────── */
/*
  Each card is generated by script.js and has this structure:
  <article class="blog-card" role="listitem">
    <a class="card-image-link">
      <figure class="card-image-wrap">
        <img class="card-image" />
        <span class="card-category" />
      </figure>
    </a>
    <div class="card-body">
      <div class="card-meta">...</div>
      <h2 class="card-title"><a /></h2>
      <p class="card-excerpt" />
      <a class="card-link" />
    </div>
  </article>
*/

.blog-card {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);

  /* Stagger-in animation — delay set per-card by JS */
  opacity: 0;
  transform: translateY(20px);
  animation: cardReveal 0.5s var(--ease-out) forwards;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--clr-text-faint);
}

/* Card image wrapper — fixed ratio crop */
.card-image-link {
  display: block;
  overflow: hidden;
}

.card-image-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin: 0;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.blog-card:hover .card-image {
  transform: scale(1.04);
}

/* Category badge overlaid on image */
.card-category {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 3px var(--space-3);
  background: rgba(13, 13, 13, .85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius-xl);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-accent);
  pointer-events: none;
}

/* Card text body */
.card-body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Meta row: author + date */
.card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.75rem;
  color: var(--clr-text-muted);
  font-weight: 400;
}

.card-meta-sep {
  width: 3px;
  height: 3px;
  background: var(--clr-text-faint);
  border-radius: 50%;
  flex-shrink: 0;
}

.card-read-time {
  margin-left: auto;
}

/* Card title */
.card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--clr-text);
  flex-grow: 1;
}

.card-title a {
  transition: color var(--duration) var(--ease);
}

.card-title a:hover {
  color: var(--clr-accent);
}

/* Card excerpt */
.card-excerpt {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* truncate to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Read More link */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: 0.825rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-accent);
  transition: gap var(--duration) var(--ease),
    color var(--duration) var(--ease);
}

.card-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration) var(--ease);
}

.card-link:hover {
  color: var(--clr-accent-dim);
}

.card-link:hover svg {
  transform: translateX(4px);
}


/* ── 17. No Results State ─────────────────────────────── */
.no-results {
  text-align: center;
  padding: var(--space-9) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.no-results-icon {
  font-size: 3rem;
  color: var(--clr-text-faint);
  display: block;
  animation: spinPulse 3s ease-in-out infinite;
}

.no-results-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--clr-text);
}

.no-results-text {
  color: var(--clr-text-muted);
  font-size: 0.95rem;
}


/* ── 18. Load More ────────────────────────────────────── */
.load-more-wrapper {
  text-align: center;
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.load-more-info {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
}


/* ── 19. Buttons ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-7);
  border-radius: var(--radius-xl);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
  transition: background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

/* Primary gold button */
.btn--primary {
  background: var(--clr-accent);
  color: var(--clr-bg);
  border: 2px solid transparent;
}

.btn--primary:hover {
  background: var(--clr-accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(232, 201, 126, 0.3);
}

.btn--primary:active {
  transform: translateY(0);
}

/* Outline button */
.btn--outline {
  background: transparent;
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
}

.btn--outline:hover {
  background: var(--clr-surface-2);
  border-color: var(--clr-text-faint);
}

/* Loading state — spinner visible, text hidden */
.btn--loading .btn-text {
  opacity: 0;
}

.btn--loading .btn-spinner {
  display: block;
}

.btn-spinner {
  display: none;
  width: 20px;
  height: 20px;
  animation: spin 0.7s linear infinite;
  position: absolute;
}


/* ── 20. Site Footer ──────────────────────────────────── */
.site-footer {
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  padding-block: var(--space-8) var(--space-6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}

.footer-brand .logo {
  margin-bottom: var(--space-4);
}

.footer-tagline {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  line-height: 1.7;
  max-width: 260px;
}

.footer-heading {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: var(--space-4);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--clr-text-muted);
  transition: color var(--duration) var(--ease);
}

.footer-links a:hover {
  color: var(--clr-text);
}

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-5);
  border-top: 1px solid var(--clr-border);
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--clr-text-faint);
}

.footer-legal {
  display: flex;
  gap: var(--space-5);
}

.footer-legal a {
  font-size: 0.8rem;
  color: var(--clr-text-faint);
  transition: color var(--duration) var(--ease);
}

.footer-legal a:hover {
  color: var(--clr-text-muted);
}


/* ── 21. Social Links ─────────────────────────────────── */
.social-links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  color: var(--clr-text-muted);
  transition: background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.social-link:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: var(--clr-bg);
  transform: translateY(-2px);
}


/* ── 22. Responsive — Tablet (≤1024px) ──────────────── */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}


/* ── 23. Responsive — Mobile (≤640px) ───────────────── */
@media (max-width: 768px) {

  /* Show hamburger, hide nav */
  .nav-toggle {
    display: flex;
  }

  .primary-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    padding: var(--space-5) var(--space-6);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--duration) var(--ease),
      opacity var(--duration) var(--ease);
    z-index: 99;
  }

  /* Visible state — toggled by JS */
  .primary-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .nav-link {
    font-size: 1rem;
    padding: var(--space-3) 0;
  }

  .nav-link--cta {
    margin-top: var(--space-3);
  }
}

@media (max-width: 640px) {
  :root {
    --space-6: 20px;
  }

  .container {
    padding-inline: var(--space-5);
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .controls-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-wrapper {
    max-width: 100%;
  }

  .category-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
    /* Hide scrollbar but allow scrolling */
    scrollbar-width: none;
  }

  .category-filters::-webkit-scrollbar {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}


/* ── 24. Animations & Transitions ─────────────────────── */

/* Card stagger-in reveal */
@keyframes cardReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Spinner rotation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* No-results icon pulse */
@keyframes spinPulse {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 0.6;
  }
}


/* ── 25. Accessibility ────────────────────────────────── */

/* Visible focus ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}