@layer components {
  /* Courses breathe — concentric ripples on the canvas that rise and fall on a pranayama
     cadence (inhale · hold · exhale · hold), with a soft "prana" glow gathering at the
     centre on the inhale. Keyed off data-section="courses" on <html>; the rings/glow are a
     fixed decorative layer (the base canvas colour stays on <html>), animated with
     GPU-composited transform/opacity (no per-frame repaint), and stilled for
     reduced-motion. Rings follow the text colour; the glow, the site's accent — so
     light/dark and any palette carry them. Knobs: --breath-ring, --breath-gap, --breath-glow. */
  :root[data-section="courses"] {
    --breath-ring: color-mix(in oklab, var(--color-text) 4.5%, transparent);
    --breath-gap: 56px;
    --breath-glow: color-mix(in oklab, var(--color-accent) 22%, transparent);
  }

  :root[data-section="courses"] body::before {
    content: "";
    position: fixed;
    inset: -8%;
    z-index: -1;
    pointer-events: none;
    background-image:
      repeating-radial-gradient(circle at 50% 38%,
        transparent 0 calc(var(--breath-gap) - 1px),
        var(--breath-ring) calc(var(--breath-gap) - 1px) var(--breath-gap));
    transform-origin: 50% 38%;
    animation: course-breath 14s ease-in-out infinite;
  }

  :root[data-section="courses"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(40% 34% at 50% 38%, var(--breath-glow), transparent 70%);
    opacity: 0.15;
    animation: course-glow 14s ease-in-out infinite;
  }

  /* 4-2-6-2 over 14s: inhale to ~29%, hold to ~43%, exhale to ~86%, hold to 100%. */
  @keyframes course-breath {
    0%   { transform: scale(1);    opacity: 0.85; }
    29%  { transform: scale(1.05); opacity: 1; }
    43%  { transform: scale(1.05); opacity: 1; }
    86%  { transform: scale(1);    opacity: 0.85; }
    100% { transform: scale(1);    opacity: 0.85; }
  }

  @keyframes course-glow {
    0%, 100% { opacity: 0.12; }
    29%, 43% { opacity: 0.55; }
    86%      { opacity: 0.12; }
  }

  @media (prefers-reduced-motion: reduce) {
    :root[data-section="courses"] body::before,
    :root[data-section="courses"] body::after { animation: none; }
    :root[data-section="courses"] body::after { opacity: 0.3; }
  }
}