/* ═══════════════════════════════════════════════════════════════════════════
   ThumbLoop — Brand Motion Assets
   ---------------------------------------------------------------------------
   One mark, two lives: a play triangle inside a continuous loop ring. The mark
   IS the brand — "ThumbLoop" = play, on a loop. Static it is the logo + favicon;
   animated it is the loader. Coral on near-black, premium and restrained
   (no neon, no rainbow), matching the app's design system.

   Motion personality: PREMIUM. Signature one-shot ease cubic-bezier(.2,.7,.2,1)
   (shared with the site's reveals/lifts); continuous motion breathes on a
   sine-like ease so it feels alive but calm — never a frantic spinner.

   Three motion layers (the loader):
     • Primary  — the loop ring sweeps as a growing/shrinking arc (the "loop").
     • Secondary— the play triangle beats gently (the studio is "thinking").
     • Ambient  — a soft coral glow breathes behind the mark (depth + life).

   Reusable: link this file and drop the .tl-mark markup (see brand-mark.svg)
   anywhere. Add .tl-logo for the static logo (draw-in + hover loop) or
   .tl-loader for the animated loader. Colour/stroke live as SVG attributes too,
   so the mark still renders correctly even if this stylesheet fails to load.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --tl-brand: var(--tl-accent);
  --tl-brand-hi: rgb(var(--tl-accent-hover-rgb));
  --tl-ease: var(--tl-ease-standard);
}

/* ── The mark ───────────────────────────────────────────────────────────── */
.tl-mark {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 1.5em; /* scales with the surrounding font-size */
  height: 1.5em;
  flex: none;
  line-height: 1;
  color: var(--tl-brand);
}
/* brand.css loads after the Tailwind CDN, so its single-class `display` would
   otherwise win over Tailwind's `.hidden`. Keep `hidden` working on the mark. */
.tl-mark.hidden {
  display: none;
}
.tl-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Geometry is carried as SVG attributes; here we only add the transform box so
   rotation/scale pivot on the mark's true centre (24,24 of the 48 viewBox). */
.tl-ring,
.tl-play {
  transform-box: view-box;
  transform-origin: 24px 24px;
}

/* Ambient glow layer — third motion layer, only lit for the loader. */
.tl-mark::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: var(--tl-radius-full);
  background: radial-gradient(
    circle,
    rgb(var(--tl-accent-rgb) / 0.55),
    transparent 68%
  );
  filter: blur(var(--tl-blur-sm));
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

/* ── LOGO — static, with a one-shot draw-in and a hover "loop" gesture ───── */
.anim-ready .tl-logo .tl-ring {
  animation: tl-draw var(--tl-duration-reveal) var(--tl-ease) both;
}
.anim-ready .tl-logo .tl-play {
  animation: tl-pop var(--tl-duration-slow) var(--tl-ease)
    var(--tl-duration-base) both;
}
/* The signature brand gesture: the ring completes one clean loop on hover. */
.tl-logo:hover .tl-ring,
a:hover .tl-logo .tl-ring {
  animation: tl-loop var(--tl-duration-reveal) var(--tl-ease);
}

@keyframes tl-draw {
  from {
    stroke-dasharray: 107;
    stroke-dashoffset: 107;
  }
  to {
    stroke-dasharray: 107;
    stroke-dashoffset: 0;
  }
}
@keyframes tl-pop {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes tl-loop {
  to {
    transform: rotate(360deg);
  }
}

/* ── LOADER — continuous, three layers ──────────────────────────────────── */
.tl-loader .tl-ring {
  stroke-dasharray: 80 107;
  animation:
    tl-spin var(--tl-duration-loop) linear infinite,
    tl-dash var(--tl-duration-loop) ease-in-out infinite;
}
.tl-loader .tl-play {
  animation: tl-beat var(--tl-duration-brand-beat) ease-in-out infinite;
}
.tl-loader::before {
  animation: tl-glow var(--tl-duration-brand-glow) ease-in-out infinite;
}

@keyframes tl-spin {
  to {
    transform: rotate(360deg);
  }
}
/* The arc grows then shrinks while it travels — alive, not mechanical. */
@keyframes tl-dash {
  0% {
    stroke-dasharray: 16 107;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 76 107;
    stroke-dashoffset: -22;
  }
  100% {
    stroke-dasharray: 16 107;
    stroke-dashoffset: -103;
  }
}
@keyframes tl-beat {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
@keyframes tl-glow {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
  }
}

/* ── Accessibility: respect reduced-motion. The mark stays legible; the
      loader keeps a calm static arc + glow so it still reads as "working". ── */
@media (prefers-reduced-motion: reduce) {
  .anim-ready .tl-logo .tl-ring,
  .anim-ready .tl-logo .tl-play,
  .tl-logo:hover .tl-ring,
  a:hover .tl-logo .tl-ring,
  .tl-loader .tl-ring,
  .tl-loader .tl-play {
    animation: none !important;
  }
  .tl-loader .tl-ring {
    stroke-dasharray: 60 107;
  }
  .tl-loader::before {
    animation: none !important;
    opacity: 0.35;
  }
}