/* Stoopid UI Ticker (skewable) + button controls */
.sui-ticker-wrap{width:100%;position:relative;--sui-gap:0px;--sui-radius:0px;--sui-shadow:0;--sui-pause:1;--sui-minh:auto;
  --sui-btn-gap:14px;--sui-btn-mt:16px;--sui-btn-mb:0px;--sui-btn-maxw:auto;--sui-btn-offset-y:0px;
  --sui-btn-pad:12px 18px;--sui-btn-radius:14px;--sui-btn-bg:rgba(255,255,255,.12);--sui-btn-border:rgba(255,255,255,.25);
  --sui-btn-color:#fff;--sui-btn-bg-hover:rgba(255,255,255,.20);--sui-btn-border-hover:rgba(255,255,255,.35);--sui-btn-color-hover:#fff;
}
.sui-ticker-wrap--container .sui-ticker-inner{max-width:1200px;margin:0 auto;}
.sui-ticker-inner{min-height:var(--sui-minh);}
.sui-ticker-heading{text-align:center;font-weight:900;letter-spacing:-0.02em;font-size:var(--sui-hsize,42px);color:var(--sui-hcolor,#fff);margin:0 0 18px;text-shadow:0 2px 14px rgba(0,0,0,.45);}

.sui-ticker-buttons{
  display:flex;flex-wrap:wrap;
  gap:var(--sui-btn-gap);
  margin-top:var(--sui-btn-mt);
  margin-bottom:var(--sui-btn-mb);
  transform: translateY(var(--sui-btn-offset-y));
  max-width: var(--sui-btn-maxw, 100%);
  margin-left:auto;margin-right:auto;
}
.sui-ticker-buttons.sui-align-left{justify-content:flex-start;}
.sui-ticker-buttons.sui-align-center{justify-content:center;}
.sui-ticker-buttons.sui-align-right{justify-content:flex-end;}

.sui-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--sui-btn-pad);
  border-radius:var(--sui-btn-radius);
  font-weight:900;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--sui-btn-color);
  background:var(--sui-btn-bg);
  border:1px solid var(--sui-btn-border);
  backdrop-filter:blur(3px);
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.sui-btn:hover{
  transform:translateY(-1px);
  background:var(--sui-btn-bg-hover);
  border-color:var(--sui-btn-border-hover);
  color:var(--sui-btn-color-hover);
}

.sui-ticker-rows{display:grid;gap:var(--sui-gap);}
.sui-band{position:relative;overflow:hidden;border-radius:var(--sui-radius);background:var(--sui-bg,rgba(0,0,0,.35));
  box-shadow:calc(var(--sui-shadow) * 0px) calc(var(--sui-shadow) * 12px) calc(var(--sui-shadow) * 40px) rgba(0,0,0,.45);
}
.sui-band__skew{transform:skewX(var(--sui-skew,0deg)) rotate(var(--sui-rotate,0deg));transform-origin:center;}
.sui-band__track{display:inline-flex;gap:2.5rem;white-space:nowrap;width:max-content;will-change:transform;padding:12px 0;
  animation-duration:var(--sui-speed,14s);animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:running;
}
.sui-band__item{display:inline-block;transform:skewX(calc(var(--sui-skew,0deg)*-1)) rotate(calc(var(--sui-rotate,0deg)*-1));
  transform-origin:center;font-size:var(--sui-fsize,34px);font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:var(--sui-tcolor,#fff);
  text-shadow:0 2px 14px rgba(0,0,0,.55);padding:0 2px;
}
.sui-ticker-wrap[style*="--sui-pause:1"] .sui-band:hover .sui-band__track{animation-play-state:paused;}
/*
  Direction handling
  - Use a single marquee animation and flip it with animation-direction: reverse.
  - This avoids "Right still goes left" issues some setups can hit when keyframes are inverted.
*/
.sui-band.sui-dir-left .sui-band__track{animation-name:sui_marquee_x !important;animation-direction:normal !important;}
.sui-band.sui-dir-right .sui-band__track{animation-name:sui_marquee_x_right !important;animation-direction:normal !important;}
.sui-band.sui-dir-up .sui-band__track{animation-name:sui_marquee_y !important;animation-direction:normal !important;}
.sui-band.sui-dir-down .sui-band__track{animation-name:sui_marquee_y !important;animation-direction:reverse !important;}

/*
  Notes:
  - Percent is relative to the track itself.
  - 50% is a safer "clearly moves" distance than 35% for long/repeated tracks.
*/
@keyframes sui_marquee_x{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes sui_marquee_x_right{0%{transform:translateX(-50%);}100%{transform:translateX(0);}}
@keyframes sui_marquee_y{0%{transform:translateY(0);}100%{transform:translateY(-50%);}}
@media (max-width:849px){.sui-band__item{font-size:clamp(18px,5vw,28px);}}
