/* =========================================================
   LifeStrategics · Light Trail (canonical V6 technique)

   Three conic-gradient layers (blue/yellow/red) rotating at
   8s / 12s / 17s via @property <angle> animation, masked to a
   1px border with mask-composite: xor.

   Usage:
     1. Give your element `position: relative`.
     2. Add class `ls-trail`.
     3. Set --ls-trail-radius to match the element's border-radius
        (defaults to 9999px for pills). For rounded boxes, override
        per-element: `style="--ls-trail-radius:14px"`.

   Technique credit: lifestrategics.com v6 production CSS.
   ========================================================= */

@property --ls-spin-1 { syntax: "<angle>"; inherits: true; initial-value: 0turn; }
@property --ls-spin-2 { syntax: "<angle>"; inherits: true; initial-value: 0turn; }
@property --ls-spin-3 { syntax: "<angle>"; inherits: true; initial-value: 0turn; }

@keyframes ls-spin-1 { 0% { --ls-spin-1: 0turn; } 100% { --ls-spin-1: 1turn; } }
@keyframes ls-spin-2 { 0% { --ls-spin-2: 0turn; } 100% { --ls-spin-2: 1turn; } }
@keyframes ls-spin-3 { 0% { --ls-spin-3: 0turn; } 100% { --ls-spin-3: 1turn; } }

.ls-trail {
  position: relative;
  --ls-trail-radius: 9999px;
}

.ls-trail::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--ls-trail-radius);
  padding: 1px;
  background:
    conic-gradient(from var(--ls-spin-1), transparent 0%, var(--ls-blue)   15%, transparent 35%),
    conic-gradient(from var(--ls-spin-2), transparent 0%, var(--ls-yellow) 15%, transparent 35%),
    conic-gradient(from var(--ls-spin-3), transparent 0%, var(--ls-red)    15%, transparent 35%);
  animation:
    ls-spin-1  8s linear infinite,
    ls-spin-2 12s linear infinite,
    ls-spin-3 17s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}