@layer components {
  .gnostic-divider {
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    padding: clamp(1rem, 2vw, 1.6rem) 0;
  }

  .gnostic-divider::before,
  .gnostic-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(5rem, 22vw, 14rem);
    height: 1px;
    background: linear-gradient(to right, transparent 0%, color-mix(in srgb, var(--section-border) 35%, var(--highlight) 65%) 20%, color-mix(in srgb, var(--highlight) 75%, var(--shadow-glow) 25%) 50%, color-mix(in srgb, var(--section-border) 35%, var(--highlight) 65%) 80%, transparent 100%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--shadow-glow) 24%, transparent);
    opacity: 0.72;
    transform: translateY(-50%);
  }

  .gnostic-divider::before { right: calc(50% + clamp(1.5rem, 3.2vw, 2.25rem)); }
  .gnostic-divider::after { left: calc(50% + clamp(1.5rem, 3.2vw, 2.25rem)); }

  .gnostic-divider .divider-symbol {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: clamp(2rem, 3.5vw, 2.6rem);
    height: clamp(2rem, 3.5vw, 2.6rem);
    color: var(--text-accent);
    border: 1px solid color-mix(in srgb, var(--highlight) 55%, var(--section-border) 45%);
    border-radius: 999px;
    background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--highlight) 28%, transparent) 0%, transparent 58%), radial-gradient(circle at center, color-mix(in srgb, var(--shadow-glow) 20%, transparent) 0%, transparent 72%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--section-border) 65%, transparent), 0 0 16px color-mix(in srgb, var(--shadow-glow) 34%, transparent), inset 0 0 10px color-mix(in srgb, var(--highlight) 16%, transparent);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1;
    opacity: 0.96;
    animation: tgk-divider-pulse 4.8s ease-in-out infinite, tgk-divider-drift 8s ease-in-out infinite;
  }

  .gnostic-divider .divider-symbol.spin { animation: tgk-divider-spin 10s linear infinite; }

  .gnostic-divider .divider-symbol::before,
  .gnostic-divider .divider-symbol::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
  }

  .gnostic-divider .divider-symbol::before {
    inset: -0.36rem;
    border: 1px solid color-mix(in srgb, var(--highlight) 46%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--shadow-glow) 28%, transparent), inset 0 0 8px color-mix(in srgb, var(--highlight) 22%, transparent);
    opacity: 0.78;
    animation: tgk-divider-orbit 9s linear infinite;
  }

  .gnostic-divider .divider-symbol::after {
    inset: -0.9rem;
    background: radial-gradient(circle at 50% 0.12rem, color-mix(in srgb, var(--highlight) 72%, transparent) 0.07rem, transparent 0.09rem), radial-gradient(circle at 0.12rem 50%, color-mix(in srgb, var(--highlight) 58%, transparent) 0.06rem, transparent 0.08rem), radial-gradient(circle at 50% calc(100% - 0.12rem), color-mix(in srgb, var(--highlight) 62%, transparent) 0.06rem, transparent 0.08rem), radial-gradient(circle at calc(100% - 0.12rem) 50%, color-mix(in srgb, var(--highlight) 58%, transparent) 0.06rem, transparent 0.08rem);
    opacity: 0.7;
    animation: tgk-divider-breathe 6.5s ease-in-out infinite;
  }

  @keyframes tgk-divider-drift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.04); } }
  @keyframes tgk-divider-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes tgk-divider-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes tgk-divider-breathe { 0%, 100% { opacity: 0.56; transform: scale(0.98); } 50% { opacity: 0.82; transform: scale(1.02); } }

  @media (prefers-reduced-motion: reduce) {
    .gnostic-divider .divider-symbol { animation: tgk-divider-spin 14s linear infinite; }
    .gnostic-divider .divider-symbol::before,
    .gnostic-divider .divider-symbol::after { animation: none; }
  }
}