/* ============================================================
   TrainMe page loader  —  trainme-loader.css
   Pick a variant by setting data-variant on .tm-loader:
     badge-bounce | level-up | ring | progress | pulse
   The inline .tm-dots is a separate mini loader for buttons/sections.
   ============================================================ */

:root {
  --tm-indigo: #3B3FBF;
  --tm-amber: #FFB020;
  --tm-ink: #111827;
  --tm-night: #0B1220;
  --tm-loader-bg: #ffffff;          /* overlay background (light) */
  --tm-loader-text: var(--tm-ink);
  --tm-loader-size: 96px;           /* icon size */
  --tm-loader-fade: 320ms;          /* fade-out duration */
}
@media (prefers-color-scheme: dark) {
  :root { --tm-loader-bg: var(--tm-night); --tm-loader-text: #ffffff; }
}

/* ---------- overlay ---------- */
.tm-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--tm-loader-bg);
  opacity: 1; visibility: visible;
  transition: opacity var(--tm-loader-fade) ease, visibility 0s linear 0s;
}
.tm-loader.is-hidden {
  opacity: 0; visibility: hidden;
  transition: opacity var(--tm-loader-fade) ease, visibility 0s linear var(--tm-loader-fade);
  pointer-events: none;
}
.tm-loader__box { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tm-loader__logo { width: var(--tm-loader-size); height: var(--tm-loader-size); overflow: visible; display: block; }
.tm-loader__word { width: calc(var(--tm-loader-size) * 1.5); height: auto; display: block; }
.tm-loader__word path { fill: var(--tm-loader-text); }
.tm-loader__text {
  font: 500 13px/1 Poppins, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tm-loader-text); opacity: .55;
}

/* parts of the icon */
.tm-badge { transform-box: fill-box; transform-origin: center; }
.tm-tile  { transform-box: fill-box; transform-origin: center; }
.tm-extra { opacity: 0; } /* helper layers are hidden unless a variant turns them on */
.tm-loader__bar { display: none; }

/* ============ 1. BADGE BOUNCE — the badge hops like a notification ============ */
.tm-loader[data-variant="badge-bounce"] .tm-badge {
  animation: tm-badge-hop 1.1s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes tm-badge-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-10px) scale(1.12); }
  55%      { transform: translateY(0) scale(.96); }
  70%      { transform: translateY(-3px) scale(1.02); }
}

/* ============ 2. LEVEL UP — chevrons rise out of the badge and fade ============ */
.tm-loader[data-variant="level-up"] .tm-stream { opacity: 1; }
.tm-loader[data-variant="level-up"] .tm-stream path {
  transform-box: fill-box; transform-origin: center;
  animation: tm-rise 1.5s ease-out infinite;
}
.tm-loader[data-variant="level-up"] .tm-stream path:nth-child(2) { animation-delay: .5s; }
.tm-loader[data-variant="level-up"] .tm-stream path:nth-child(3) { animation-delay: 1s; }
.tm-loader[data-variant="level-up"] .tm-badge { animation: tm-badge-breathe 1.5s ease-in-out infinite; }
@keyframes tm-rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-46px) scale(1.15); opacity: 0; }
}
@keyframes tm-badge-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ============ 3. RING — an amber arc orbits the tile ============ */
.tm-loader[data-variant="ring"] .tm-ring { opacity: 1; }
.tm-loader[data-variant="ring"] .tm-ring circle:last-child {
  transform-box: fill-box; transform-origin: center;
  animation: tm-spin 1s linear infinite;
}
@keyframes tm-spin { to { transform: rotate(360deg); } }

/* ============ 4. PROGRESS — indeterminate bar under the wordmark ============ */
.tm-loader[data-variant="progress"] .tm-loader__bar {
  display: block; position: relative; overflow: hidden;
  width: calc(var(--tm-loader-size) * 1.5); height: 6px; border-radius: 3px;
  background: rgba(59,63,191,.18);
}
.tm-loader[data-variant="progress"] .tm-loader__bar span {
  position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px;
  background: var(--tm-amber);
  animation: tm-slide 1.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes tm-slide { 0% { left: -40%; } 100% { left: 100%; } }

/* ============ 5. PULSE — the tile breathes, a soft ring radiates out ============ */
.tm-loader[data-variant="pulse"] .tm-pulse { opacity: 1; }
.tm-loader[data-variant="pulse"] .tm-pulse rect {
  transform-box: fill-box; transform-origin: center;
  animation: tm-radiate 1.6s ease-out infinite;
}
.tm-loader[data-variant="pulse"] .tm-pulse rect:last-child { animation-delay: .8s; }
.tm-loader[data-variant="pulse"] .tm-tile { animation: tm-breathe 1.6s ease-in-out infinite; }
@keyframes tm-radiate { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes tm-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ============ 6. DOTS — tiny inline loader for buttons, cards, "loading more" ============ */
.tm-dots { display: inline-flex; gap: 6px; align-items: center; vertical-align: middle; }
.tm-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--tm-indigo);
  animation: tm-dot 1s ease-in-out infinite;
}
.tm-dots i:nth-child(2) { animation-delay: .15s; background: var(--tm-amber); }
.tm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tm-dot { 0%,80%,100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-6px); opacity: 1; } }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .tm-loader *, .tm-dots i { animation: none !important; }
  .tm-loader[data-variant="progress"] .tm-loader__bar span { left: 0; width: 100%; opacity: .6; }
}

/* ---------- inline preview mode (used by the demo page; not needed on your site) ---------- */
.tm-loader--inline { position: relative; inset: auto; z-index: auto; height: 250px; border-radius: 16px; }