/* ═══════════════════════════════════════════════════════════════════════════
   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: #ff5a36;
  --tl-brand-hi: #ff7a54;
  --tl-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* signature one-shot ease */
}

/* ── 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: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 90, 54, 0.55),
    transparent 68%
  );
  filter: blur(5px);
  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 0.62s var(--tl-ease) both;
}
.anim-ready .tl-logo .tl-play {
  animation: tl-pop 0.42s var(--tl-ease) 0.16s 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 0.7s 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 1.4s linear infinite,
    tl-dash 1.4s ease-in-out infinite;
}
.tl-loader .tl-play {
  animation: tl-beat 1.8s ease-in-out infinite;
}
.tl-loader::before {
  animation: tl-glow 2.2s 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);
  }
}

/* ── Skeleton shimmer — used by the "painting your thumbnails" stage ─────── */
.tl-skel {
  position: relative;
  overflow: hidden;
}
.tl-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );
  animation: tl-shimmer 1.5s ease-in-out infinite;
}
/* A gentle left-to-right cascade across the four placeholder tiles. */
.tl-skel:nth-child(2)::after { animation-delay: 0.12s; }
.tl-skel:nth-child(3)::after { animation-delay: 0.24s; }
.tl-skel:nth-child(4)::after { animation-delay: 0.36s; }
@keyframes tl-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* ── 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,
  .tl-skel::after {
    animation: none !important;
  }
  .tl-loader .tl-ring {
    stroke-dasharray: 60 107;
  }
  .tl-loader::before {
    animation: none !important;
    opacity: 0.35;
  }
}