/* =====================================================================
   PALMSTAT ERP · LED ANIMATION SYSTEM
   Cohesive design layer for "polished" feel.
   ALL animations gated behind prefers-reduced-motion: no-preference.
   Performance: transform/opacity only · will-change for GPU offload.
   Brand palette only: brand-green / dark-green.
   ===================================================================== */

/* ----- LED tokens ----- */
:root {
  --led-glow:        #5fbfa2;
  --led-glow-strong: rgba(95, 191, 162, .85);
  --led-glow-soft:   rgba(63, 166, 111, .55);
  --led-glow-faint:  rgba(63, 166, 111, .18);
  --led-bead-size:   6px;
  --led-strip-w:     2px;
}
[data-theme="dark"] {
  --led-glow-soft:   rgba(95, 191, 162, .70);
  --led-glow-faint:  rgba(95, 191, 162, .22);
}

/* =====================================================================
   ACCESSIBILITY GATE — every animation block is inside this @media.
   When the user prefers reduced motion, the entire system goes static.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* -----------------------------------------------------------------
     1 · FOUNDATIONAL — Logo mark · 4.8s slow breath
     ----------------------------------------------------------------- */
  @keyframes led-breath {
    0%, 100% {
      transform: scale(1);
      box-shadow:
        0 0 0 0 var(--led-glow-faint),
        0 0 8px rgba(63, 166, 111, .35);
    }
    50% {
      transform: scale(1.04);
      box-shadow:
        0 0 0 6px transparent,
        0 0 22px var(--led-glow-strong);
    }
  }
  .sidebar__brand-mark {
    will-change: transform, box-shadow;
    animation: led-breath 4.8s ease-in-out infinite;
  }

  /* -----------------------------------------------------------------
     2 · FOUNDATIONAL — Tru-We eyes · 2.4s steady twin-LED throb
     Sits on top of existing 5.5s blink (truwe.js owns the blink anim)
     ----------------------------------------------------------------- */
  @keyframes led-eye-throb {
    0%, 100% { opacity: .75; filter: drop-shadow(0 0 1px var(--led-glow-soft)); }
    50%      { opacity: 1;   filter: drop-shadow(0 0 6px var(--led-glow-strong)); }
  }
  .truwe-pupil {
    will-change: opacity, filter;
    animation: led-eye-throb 2.4s ease-in-out infinite;
  }
  .truwe-glow {
    will-change: opacity;
    animation: led-eye-throb 2.4s ease-in-out infinite;
    animation-delay: -1.2s;
  }

  /* -----------------------------------------------------------------
     3 · FOUNDATIONAL — Section dividers · one-shot LED strobe L→R
     Triggered by IntersectionObserver adding .led-strobe-now
     ----------------------------------------------------------------- */
  @keyframes led-strobe {
    0%   { transform: scaleX(0); opacity: 0; transform-origin: left center; }
    20%  { opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; transform-origin: left center; }
  }
  .card__header,
  .section-divider {
    position: relative;
  }
  .card__header::after,
  .section-divider::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--led-strip-w);
    background: linear-gradient(90deg,
      transparent 0%,
      var(--led-glow) 30%,
      var(--brand-500) 50%,
      var(--led-glow) 70%,
      transparent 100%);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    border-radius: 999px;
    will-change: transform, opacity;
  }
  .card__header.led-strobe-now::after,
  .section-divider.led-strobe-now::after {
    animation: led-strobe 1s var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
  }

  /* -----------------------------------------------------------------
     4 · ACTIVE — Primary CTA · 3s LED bead travels perimeter
     Pseudo-element runs an offset-path around the button's rounded rect.
     ----------------------------------------------------------------- */
  @keyframes led-bead {
    0%   { offset-distance: 0%;   opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  .btn--primary {
    position: relative;
    overflow: hidden;
  }
  .btn--primary::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: var(--led-bead-size);
    height: var(--led-bead-size);
    margin: calc(var(--led-bead-size) * -0.5) 0 0 calc(var(--led-bead-size) * -0.5);
    border-radius: 50%;
    background: var(--led-glow);
    box-shadow:
      0 0 6px var(--led-glow-strong),
      0 0 12px var(--led-glow-soft);
    /* Travel inset 3px around button, following its border-radius */
    offset-path: inset(3px round 10px);
    offset-rotate: 0deg;
    opacity: 0;
    pointer-events: none;
    will-change: offset-distance, opacity;
    animation: led-bead 3s linear infinite;
  }
  /* Fallback for browsers without offset-path (old Edge / Safari <16) */
  @supports not (offset-path: inset(3px)) {
    .btn--primary::before { display: none; }
  }

  /* -----------------------------------------------------------------
     5 · ACTIVE — Secondary CTA · 1.6s per-corner clockwise fire on hover
     Four corner dots fade in sequence: TL → TR → BR → BL.
     ----------------------------------------------------------------- */
  @keyframes led-corner-fire {
    0%, 100% { opacity: 0; transform: scale(.5); }
    50%      { opacity: 1; transform: scale(1); }
  }
  .btn:not(.btn--primary) {
    position: relative;
  }
  .btn:not(.btn--primary)::before,
  .btn:not(.btn--primary)::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--led-glow);
    box-shadow: 0 0 4px var(--led-glow-strong);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
  }
  /* TL + BR sit on ::before via background-position-like multi-shadow.
     We use 4 corner dots with box-shadow offsets keyed off ::before. */
  .btn:not(.btn--primary)::before {
    top: 3px; left: 3px;
    box-shadow:
      0 0 4px var(--led-glow-strong),
      /* TR corner clone */  var(--corner-tr-x, calc(100% - 6px)) 0 4px var(--led-glow-strong);
  }
  .btn:not(.btn--primary):hover::before {
    animation: led-corner-fire 1.6s ease-in-out infinite;
  }
  .btn:not(.btn--primary)::after {
    bottom: 3px; right: 3px;
    box-shadow:
      0 0 4px var(--led-glow-strong);
  }
  .btn:not(.btn--primary):hover::after {
    animation: led-corner-fire 1.6s ease-in-out infinite;
    animation-delay: .8s;
  }

  /* -----------------------------------------------------------------
     6 · ACTIVE — Form field focus · 1.2s border breathe
     ----------------------------------------------------------------- */
  @keyframes led-focus-breathe {
    0%, 100% { box-shadow: 0 0 0 0 var(--led-glow-faint), 0 0 0 2px var(--brand-500); }
    50%      { box-shadow: 0 0 0 4px var(--led-glow-faint), 0 0 8px var(--led-glow-soft), 0 0 0 2px var(--brand-500); }
  }
  .input:focus,
  .select:focus,
  .textarea:focus,
  input:focus,
  select:focus,
  textarea:focus {
    will-change: box-shadow;
    animation: led-focus-breathe 1.2s ease-in-out infinite;
  }

  /* -----------------------------------------------------------------
     7 · CASCADE — Agent/KPI cards · full perimeter LED-strip on hover
     Uses ::before with a gradient border simulated by background-clip.
     ----------------------------------------------------------------- */
  @keyframes led-perimeter {
    0%   { background-position:   0% 50%; }
    100% { background-position: 200% 50%; }
  }
  .kpi,
  .dh-card {
    position: relative;
  }
  .kpi::before,
  .dh-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--brand-500) 25%,
      var(--led-glow) 50%,
      var(--brand-500) 75%,
      transparent 100%);
    background-size: 200% 100%;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--ease-out, cubic-bezier(.22,1,.36,1));
    will-change: opacity, background-position;
  }
  .kpi:hover::before,
  .dh-card:hover::before {
    opacity: 1;
    animation: led-perimeter 2.4s linear infinite;
  }

  /* -----------------------------------------------------------------
     8 · CASCADE — Stat counter LED-flash on increment
     JS toggles .led-digit-flash for 600ms when textContent changes.
     ----------------------------------------------------------------- */
  @keyframes led-digit-flash {
    0%   { color: var(--fg-primary); text-shadow: 0 0 0 transparent; transform: translateY(0); }
    20%  { color: var(--brand-500); text-shadow: 0 0 12px var(--led-glow-strong), 0 0 4px var(--brand-500); transform: translateY(-1px); }
    100% { color: var(--fg-primary); text-shadow: 0 0 0 transparent; transform: translateY(0); }
  }
  .kpi__value.led-digit-flash {
    will-change: color, text-shadow, transform;
    animation: led-digit-flash 600ms ease-out both;
  }

  /* -----------------------------------------------------------------
     9 · CASCADE — Background data-vein artery pulses · 1–6s random
     SVG overlay injected by led-system.js into body as .led-veins-bg
     Each <path> has stroke-dasharray + animated stroke-dashoffset.
     ----------------------------------------------------------------- */
  @keyframes led-vein-pulse {
    0%   { stroke-dashoffset: 800; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }
  .led-veins-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    opacity: 0.06;
    pointer-events: none;
    overflow: hidden;
  }
  [data-theme="dark"] .led-veins-bg {
    opacity: 0.09;
  }
  .led-veins-bg svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .led-veins-bg path {
    fill: none;
    stroke: var(--led-glow);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 120 800;
    stroke-dashoffset: 800;
    will-change: stroke-dashoffset, opacity;
  }
  .led-veins-bg path.led-vein--a { animation: led-vein-pulse 4.2s ease-in-out infinite; }
  .led-veins-bg path.led-vein--b { animation: led-vein-pulse 5.8s ease-in-out infinite 1.1s; }
  .led-veins-bg path.led-vein--c { animation: led-vein-pulse 3.4s ease-in-out infinite 2.3s; }
  .led-veins-bg path.led-vein--d { animation: led-vein-pulse 6.0s ease-in-out infinite 0.6s; }
  .led-veins-bg path.led-vein--e { animation: led-vein-pulse 2.6s ease-in-out infinite 3.4s; }

  /* Ensure app shell sits above veins */
  .app-shell { position: relative; z-index: 1; }
}

/* =====================================================================
   REDUCED-MOTION FALLBACK — everything static, no class injection.
   Border-strobe pseudo elements still need to be invisible.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .led-veins-bg { display: none !important; }
  .card__header::after,
  .section-divider::after,
  .btn--primary::before,
  .btn:not(.btn--primary)::before,
  .btn:not(.btn--primary)::after,
  .kpi::before,
  .dh-card::before {
    display: none !important;
    animation: none !important;
  }
}