/* ---------------------------------------------------------------------------
   Tipsterland "FREE" promo banner — animated CTA.

   The creative is a single flat image, so the pulsing button is a second,
   rounded-cropped copy of that same image layered exactly over the original
   and scaled up. Because the artwork behind the button is pure black, the
   seam is invisible; the copy never scales below 1, so it always covers the
   static button underneath.

   Button box inside the 1983x793 source: x=726 y=550 w=888 h=184, radius 46.
   All offsets are percentages so the banner stays correct at any width.

   Kept in an external file on purpose: the site's CSP is `style-src 'self'`,
   so an inline <style> block or style="" attribute would be blocked.
--------------------------------------------------------------------------- */

/* breathing room around the banner wherever it is dropped in */
.tlb-wrap {
  padding: 28px 16px;
}

.tlb {
  --btn-left: 36.61%;          /* 726 / 1983 */
  --btn-top: 69.36%;           /* 550 / 793  */
  --btn-w: 44.78%;             /* 888 / 1983 */
  --btn-h: 23.20%;             /* 184 / 793  */
  --btn-radius: 5.18% / 25%;   /* 46/888  and  46/184 -> circular at any size */
  --img-w: 223.31%;            /* 1983 / 888 */
  --img-left: -81.76%;         /* -726 / 888 */
  --img-top: -298.91%;         /* -550 / 184 */

  position: relative;
  display: block;
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  aspect-ratio: 1983 / 793;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  text-decoration: none;
  line-height: 0;
}

.tlb-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* green halo breathing behind the button */
.tlb-glow {
  position: absolute;
  left: var(--btn-left);
  top: var(--btn-top);
  width: var(--btn-w);
  height: var(--btn-h);
  border-radius: var(--btn-radius);
  background: radial-gradient(ellipse at center,
              rgba(190, 255, 40, .55) 0%, rgba(190, 255, 40, 0) 70%);
  filter: blur(16px);
  transform-origin: center;
  animation: tlb-glow 3s ease-in-out infinite;
  pointer-events: none;
}

/* the scaled copy of the button */
.tlb-btn {
  position: absolute;
  left: var(--btn-left);
  top: var(--btn-top);
  width: var(--btn-w);
  height: var(--btn-h);
  overflow: hidden;
  border-radius: var(--btn-radius);
  transform-origin: center;
  animation: tlb-pulse 3s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

.tlb-btn img {
  position: absolute;
  width: var(--img-w);
  height: auto;
  left: var(--img-left);
  top: var(--img-top);
  display: block;
}

/* shine sweeping across the button late in the cycle */
.tlb-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -45%;
  width: 35%;
  height: 100%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  animation: tlb-sweep 3s ease-in-out infinite;
}

/* three beats, then a rest */
@keyframes tlb-pulse {
   0%  { transform: scale(1); }
   8%  { transform: scale(1.09); }
  16%  { transform: scale(1); }
  24%  { transform: scale(1.09); }
  32%  { transform: scale(1); }
  40%  { transform: scale(1.09); }
  48%, 100% { transform: scale(1); }
}

@keyframes tlb-glow {
   0%  { opacity: .35; transform: scale(1); }
   8%  { opacity: .95; transform: scale(1.14); }
  16%  { opacity: .35; transform: scale(1); }
  24%  { opacity: .95; transform: scale(1.14); }
  32%  { opacity: .35; transform: scale(1); }
  40%  { opacity: .95; transform: scale(1.14); }
  48%, 100% { opacity: .35; transform: scale(1); }
}

@keyframes tlb-sweep {
   0%, 55%  { left: -45%; }
  80%, 100% { left: 115%; }
}

@media (prefers-reduced-motion: reduce) {
  .tlb-btn,
  .tlb-glow,
  .tlb-btn::after { animation: none; }
  .tlb-glow { opacity: .4; }
}