/* Accent box plugins: shared base and seven selectable treatments. */
.ab { --ab-teal: var(--teal, #2dd4bf); --ab-cyan: var(--cyan, #1cc3e3); --ab-purple: var(--purple, #a78bfa); --ab-card: var(--card, #0f172a); --ab-card-2: var(--card-2, #141e35); --ab-radius: 12px;
  position: relative; border-radius: var(--ab-radius); border: 1px solid rgba(255, 255, 255, 0.1); background: var(--ab-card); }
.ab > * { position: relative; z-index: 1; }
@keyframes ab-beam { to { transform: rotate(360deg); } }

/* 1. Beam over hairline */
.ab.ab-1 { border-color: transparent; overflow: hidden; background: transparent; }
.ab.ab-1::before { content: ""; position: absolute; inset: -150%; background: conic-gradient(from 0deg, rgba(45, 212, 191, 0.22) 0 78%, var(--ab-teal) 88%, var(--ab-cyan) 93%, rgba(45, 212, 191, 0.22) 100%); animation: ab-beam 7s linear infinite; }
.ab.ab-1::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--ab-radius) - 1px); background: var(--ab-card); }

/* 2. Aurora drift */
.ab.ab-2 { border-color: transparent; }
.ab.ab-2::before { content: ""; position: absolute; inset: -1px; border-radius: var(--ab-radius); padding: 1px; background: linear-gradient(120deg, var(--ab-teal), var(--ab-cyan), var(--ab-purple), var(--ab-teal), var(--ab-cyan)); background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; animation: ab-aurora 9s ease-in-out infinite alternate; }
@keyframes ab-aurora { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* 3. Twin beams */
.ab.ab-3 { border-color: transparent; overflow: hidden; background: transparent; }
.ab.ab-3::before { content: ""; position: absolute; inset: -150%; background: conic-gradient(from 0deg, transparent 0 30%, var(--ab-teal) 42%, transparent 47%, transparent 80%, var(--ab-cyan) 92%, transparent 97%); animation: ab-beam 8s linear infinite; }
.ab.ab-3::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--ab-radius) - 1px); background: var(--ab-card); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }

/* 4. Breathing glow */
.ab.ab-4 { border-color: rgba(45, 212, 191, 0.45); background: var(--ab-card-2); animation: ab-breathe 4.5s ease-in-out infinite; }
@keyframes ab-breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.12), 0 0 28px rgba(45, 212, 191, 0.1), 0 14px 36px rgba(0, 0, 0, 0.35); } 50% { box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.2), 0 0 56px rgba(45, 212, 191, 0.22), 0 14px 36px rgba(0, 0, 0, 0.35); } }

/* 5. Glass with beam */
@property --ab-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ab.ab-5 { border-color: rgba(255, 255, 255, 0.12); background: rgba(20, 30, 53, 0.45); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 20px 40px rgba(0, 0, 0, 0.25); }
.ab.ab-5::before { content: ""; position: absolute; inset: -1px; border-radius: var(--ab-radius); padding: 1.5px; background: conic-gradient(from var(--ab-angle), transparent 0 72%, var(--ab-teal) 86%, var(--ab-cyan) 93%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; animation: ab-angle 7s linear infinite; }
@keyframes ab-angle { to { --ab-angle: 360deg; } }
:root[data-theme="light"] .ab.ab-5 { background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 40px rgba(15, 23, 42, 0.08); border-color: rgba(15, 23, 42, 0.1); }

/* 6. Orbiting node; add an .ab-orb child to the box. */
.ab.ab-6 { border-color: rgba(45, 212, 191, 0.22); overflow: visible; }
.ab.ab-6 .ab-orb { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ab-cyan); box-shadow: 0 0 0 3px var(--ab-card), 0 0 16px 3px rgba(28, 195, 227, 0.7); offset-path: inset(0 round var(--ab-radius)); animation: ab-orbit 9s linear infinite; pointer-events: none; z-index: 2; }
@keyframes ab-orbit { to { offset-distance: 100%; } }

/* 7. Hover beam */
.ab.ab-7 { border-color: transparent; overflow: hidden; background: transparent; }
.ab.ab-7::before { content: ""; position: absolute; inset: -150%; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.12) 0 78%, var(--ab-teal) 88%, var(--ab-cyan) 93%, rgba(255, 255, 255, 0.12) 100%); animation: ab-beam 7s linear infinite; animation-play-state: paused; opacity: 0.6; transition: opacity 0.3s ease; }
.ab.ab-7::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--ab-radius) - 1px); background: var(--ab-card); }
.ab.ab-7:hover::before, .ab.ab-7:focus-within::before { animation-play-state: running; opacity: 1; }

/* Respect reduced-motion settings. */
@media (prefers-reduced-motion: reduce) { .ab.ab-1::before, .ab.ab-2::before, .ab.ab-3::before, .ab.ab-4, .ab.ab-5::before, .ab.ab-6 .ab-orb, .ab.ab-7::before { animation: none; } }
/* Light-theme hairlines remain visible against pale surfaces. */
:root[data-theme="light"] .ab { border-color: rgba(15, 23, 42, 0.1); }
:root[data-theme="light"] .ab.ab-7::before { background: conic-gradient(from 0deg, rgba(15, 23, 42, 0.12) 0 78%, var(--ab-teal) 88%, var(--ab-cyan) 93%, rgba(15, 23, 42, 0.12) 100%); }