@layer components {
  /* ===================================================
     Glyph Styling – Sacred Symbols
     Version: 2.5  Tokenised + Consolidated (2026)
     Changes:
     • Updated to v2.5 token standard (full parity with root + all pillars)
     • Cleaner structure and comments
     • All hover scales, glows, pulse/float animations,
       card interactions, and divider/pillar behaviour preserved 100%
     =================================================== */

  .glyph,
  .glyph-page {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--glyph-size-base);
    line-height: 1;
    text-align: center;
    margin-bottom: var(--glyph-margin-bottom, 1.2rem);
    color: var(--glyph-color, var(--text-accent));
    filter: drop-shadow(0 0 2px var(--shadow-glow));
    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;
  }

  .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;
  }

  /* ===================================================
     Divider Symbol – Gentle Glow & Slow Pulse
     =================================================== */

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

  @keyframes tgk-divider-pulse {
    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 {
    display: inline-block;
    animation: glyph-float 5s ease-in-out infinite;
    transition: transform 0.4s ease, text-shadow 0.4s ease;
  }

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

  /* ===================================================
     Card Glyph – Hover Scale + Optional Glow
     =================================================== */

  .card-glyph {
    display: block;
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: var(--space-sm);
    transition: transform 0.3s ease;
  }

  .card-glyph.glow {
    text-shadow: 0 0 8px var(--gold-glow);
  }

  .gnostic-card:hover .card-glyph {
    transform: scale(1.15);
  }
}