@layer components {
  /* ===================================================
     Glyph Styling – Sacred Symbols
     Version: 2.3 – Refined for The Teachings Index
     =================================================== */

  .glyph,
  .glyph-page {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: var(--glyph-size-base, 2.25rem);
    line-height: 1;
    text-align: center;
    margin-bottom: var(--glyph-margin-bottom, 1.2rem);
    color: var(--glyph-color, var(--text-accent));
    text-shadow:
      0 0 6px var(--shadow-glow, transparent),
      0 0 4px var(--glyph-color, currentColor);
    transition: transform 0.35s ease, text-shadow 0.35s ease;
    display: inline-block;
    filter: drop-shadow(0 0 2px var(--shadow-glow));
  }

  .glyph:hover,
  .glyph-page:hover {
    transform: scale(1.08);
    text-shadow:
      0 0 8px var(--shadow-glow),
      0 0 12px var(--glyph-color);
  }

  .glyph.centered,
  .glyph-page.centered {
    display: block;
    margin-inline: auto;
  }

  /* ===================================================
     Gnostic Divider Symbol – page Footer Mark
     Version: 1.2 – Gentle Glow & Slow Pulse
     =================================================== */

  .gnostic-divider {
    margin: var(--space-xl, 3rem) auto;
    text-align: center;
    position: relative;
    z-index: 2;
  }

  .divider-symbol {
    font-size: var(--glyph-size-large, 3rem);
    display: inline-block;
    color: var(--text-accent);
    text-shadow: 0 0 10px var(--shadow-glow);
    transition: transform 0.6s ease;
    animation: pulseGlow 4s ease-in-out infinite;
  }

  @keyframes pulseGlow {
    0%, 100% { text-shadow: 0 0 8px var(--shadow-glow); opacity: 0.85; }
    50%      { text-shadow: 0 0 14px var(--highlight, var(--glyph-color)); opacity: 1; }
  }

  /* ===================================================
     Pillar Glyph Row – Header Ornamentation
     Version: 1.4 – Tokenised Glow + Gentle Float
     =================================================== */

  .pillar-glyph-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--font-size-xxl, 2.6rem);
    line-height: 1;
    color: var(--glyph-color, var(--text-accent));
    text-shadow: 0 0 12px var(--shadow-glow);
    margin-block: var(--space-lg, 2rem);
  }

  .pillar-glyph {
    display: inline-block;
    animation: glyph-float 5s ease-in-out infinite;
    transition: transform 0.4s ease;
  }

  .pillar-glyph:hover {
    transform: translateY(-3px) scale(1.05);
    text-shadow: 0 0 14px var(--glyph-color);
  }

}