/* ============================================================
   TheGem Logo Text – Front-end Styles
   ============================================================ */

/* ── Shimmer keyframe ──────────────────────────────────────────
   A bright white highlight sweeps left → right over the text.
   The gradient is transparent on both ends so it blends with
   any background colour set by the admin.
─────────────────────────────────────────────────────────────── */
@keyframes tlt-shimmer {
  0%   { background-position: -250% center; }
  100% { background-position:  250% center; }
}

/* Class toggled by JS to fire the shimmer */
.tlt-logo-text--shimmer {
  background-image: linear-gradient(
    105deg,
    transparent   0%,
    transparent  35%,
    rgba(255,255,255,0.75) 50%,
    transparent  65%,
    transparent 100%
  );
  background-size       : 250% 100%;
  background-repeat     : no-repeat;
  -webkit-background-clip: text;
  background-clip       : text;

  /* Run once, then JS re-adds the class to repeat */
  animation: tlt-shimmer 0.75s ease-in-out forwards;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tlt-logo-text--shimmer {
    animation: none;
    background-image: none;
  }
}

.tlt-logo-text {
  display       : block;
  width         : 100%;
  line-height   : 1.4;
  margin-top    : 4px;
  transition    : color .2s;

  /* Sensible defaults – overridden by inline style from PHP */
  font-size     : 13px;
  font-weight   : 400;
  text-align    : left;
  color         : inherit;
}

/* Prevent duplicate injections */
.tlt-logo-text + .tlt-logo-text {
  display: none;
}

/* Responsive */
@media (max-width: 768px) {
  .tlt-logo-text {
    font-size: .9em;
  }
}

@media (max-width: 480px) {
  .tlt-logo-text {
    font-size: .85em;
    text-align: center;
  }
}