/* ============================================================
   ToneGrid — tw-shimmer skeleton loaders (app-wide) — v2
   A wide, soft, sine-eased highlight band with a crisp luminous
   core ("glint") that sweeps across the skeleton on an eased
   slow-in / slow-out curve, then briefly pauses and repeats.
   Upgrades BOTH skeleton systems used across ToneGrid:
     - native  .tn-skeleton*   (native ToneGrid skeletons)
     - PrimeNG .p-skeleton     (compiled bundle skeletons)
   and, transitively, every consumer of the shared --tn-sk-* vars
   and the tn-sk-sweep / tn-sk-pswipe keyframes (autoskel .tn-skl,
   textskel .tntsk). Theme-aware via html[data-theme].
   v2 (2026-07-02): softer+wider band, luminous core, eased sweep
   (slow-in/slow-out via keyframe shaping so it feels premium even
   under a linear timing-function), snappier 1.8s cycle, brighter
   highlight. Variable + keyframe + selector names are unchanged so
   every existing consumer inherits the better shimmer for free.
   ============================================================ */
:root{
  --tn-sk-angle: 105deg;                 /* 90deg + 15deg tw-shimmer sweep */
  --tn-sk-dur: 1.8s;                      /* full sweep + short pause cycle */
  /* default theme = dark surfaces -> a lightening band */
  --tn-sk-base: var(--tg-surface-2, #1e2633);
  --tn-sk-hi: rgba(255,255,255,0.20);
  /* Wide, soft, sine-eased highlight band with a crisp luminous core.
     Painted over a transparent field so it composites onto each
     element's own base colour. --sp = full band width (falls back to
     34% if a selector omits it). */
  --tn-sk-band: linear-gradient(var(--tn-sk-angle),
    transparent                                              calc(50% - var(--sp,34%) * 0.50),
    color-mix(in srgb, var(--tn-sk-hi)  3%, transparent)     calc(50% - var(--sp,34%) * 0.44),
    color-mix(in srgb, var(--tn-sk-hi) 14%, transparent)     calc(50% - var(--sp,34%) * 0.37),
    color-mix(in srgb, var(--tn-sk-hi) 30%, transparent)     calc(50% - var(--sp,34%) * 0.30),
    color-mix(in srgb, var(--tn-sk-hi) 48%, transparent)     calc(50% - var(--sp,34%) * 0.23),
    color-mix(in srgb, var(--tn-sk-hi) 66%, transparent)     calc(50% - var(--sp,34%) * 0.16),
    color-mix(in srgb, var(--tn-sk-hi) 84%, transparent)     calc(50% - var(--sp,34%) * 0.09),
    var(--tn-sk-hi)                                          calc(50% - var(--sp,34%) * 0.02),
    var(--tn-sk-hi)                                          calc(50% + var(--sp,34%) * 0.02),
    color-mix(in srgb, var(--tn-sk-hi) 84%, transparent)     calc(50% + var(--sp,34%) * 0.09),
    color-mix(in srgb, var(--tn-sk-hi) 66%, transparent)     calc(50% + var(--sp,34%) * 0.16),
    color-mix(in srgb, var(--tn-sk-hi) 48%, transparent)     calc(50% + var(--sp,34%) * 0.23),
    color-mix(in srgb, var(--tn-sk-hi) 30%, transparent)     calc(50% + var(--sp,34%) * 0.30),
    color-mix(in srgb, var(--tn-sk-hi) 14%, transparent)     calc(50% + var(--sp,34%) * 0.37),
    color-mix(in srgb, var(--tn-sk-hi)  3%, transparent)     calc(50% + var(--sp,34%) * 0.44),
    transparent                                              calc(50% + var(--sp,34%) * 0.50));
}
html[data-theme="light"]{
  --tn-sk-base: var(--tg-surface-2, #e9eef5);
  --tn-sk-hi: rgba(2, 6, 23, 0.10);
}

/* ---- native ToneGrid skeletons (.tn-skeleton*) -------------------- */
.tn-skeleton,
.tn-skeleton-text,
.tn-skeleton-circle,
.tn-skeleton-button,
.tn-skeleton-card{
  --sp: 34%;                              /* band ~68% of element width */
  background-color: var(--tn-sk-base);
  background-image: var(--tn-sk-band);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: -200% 0;
  animation: tn-sk-sweep var(--tn-sk-dur) linear infinite;
}
/* Eased sweep: cluster the position stops so the band accelerates in
   and decelerates out (slow-in / slow-out) under a linear timing-
   function, then holds 70%->100% for a short, intentional pause. */
@keyframes tn-sk-sweep{
  0%   { background-position: -200% 0; }  /* off the left edge */
  10%  { background-position: -185% 0; }  /* slow in */
  35%  { background-position:    0   0; }  /* fast through the middle */
  62%  { background-position:  185% 0; }  /* slow out */
  70%  { background-position:  200% 0; }  /* swept off the right edge */
  100% { background-position:  200% 0; }  /* hold => repeat-delay pause */
}

/* ---- PrimeNG / ngx skeletons (.p-skeleton) ------------------------ */
/* keep the bundle base colour + clipping; retarget the sweep overlay. */
.p-skeleton::after,
.p-skeleton:after{
  --sp: 56%;
  background-image: var(--tn-sk-band) !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  animation: tn-sk-pswipe var(--tn-sk-dur) linear infinite !important;
}
@keyframes tn-sk-pswipe{
  0%   { transform: translateX(-100%); } /* overlay off the left */
  10%  { transform: translateX(-92%); }  /* slow in */
  35%  { transform: translateX(0); }     /* fast through the middle */
  62%  { transform: translateX(92%); }   /* slow out */
  70%  { transform: translateX(100%); }  /* swept off the right */
  100% { transform: translateX(100%); }  /* hold => repeat-delay pause */
}

@media (prefers-reduced-motion: reduce){
  .tn-skeleton, .tn-skeleton-text, .tn-skeleton-circle,
  .tn-skeleton-button, .tn-skeleton-card{ animation: none; }
  .p-skeleton::after, .p-skeleton:after{ animation: none !important; }
}