/* Campaign copy stays in HTML; artwork contains no logos or lettering. */
body {
  background: #0c1714;
}
:root { --accent: #16bc63; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline-color: #40df84;
}
.live-badge.on, .channel-button.active, .search span {
  color: #062719;
}
.channel-button.active .channel-info small,
.channel-button.active .channel-state {
  color: #093d29;
}
.campaign {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #093d29;
  background: #eff8e9;
  border: 1px solid #d8efdf;
  border-radius: 7px;
}
.promo.campaign { height: 112px; padding: 0; }
.campaign .campaign-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.campaign::after { display: none; }
.campaign::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 -40%;
  width: 28%;
  background: linear-gradient(100deg, transparent, #fff7, transparent);
  transform: skewX(-20deg);
  animation: campaign-sheen 8s ease-in-out infinite;
  pointer-events: none;
}
.campaign-telegram::before { animation-delay: -4s; }
.campaign .campaign-copy {
  position: relative;
  z-index: 3;
  inset: auto;
  margin: 0;
  padding: 12px 20px;
  width: 69%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.campaign .campaign-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.4;
  color: #346f51;
  margin: 0 0 4px;
}
.campaign .campaign-amount {
  display: block;
  font: 900 41px/.96 "Roboto", Arial, sans-serif;
  letter-spacing: -.055em;
  color: #118449;
  white-space: nowrap;
  text-shadow: 0 1px 0 #fff;
  margin: 0 0 4px;
}
.campaign .campaign-title {
  display: block;
  color: #093d29;
  font: 800 21px/1.04 "Roboto", Arial, sans-serif;
  letter-spacing: -.025em;
  margin: 0;
}
.campaign-telegram .campaign-title { font-size: 23px; }
.campaign .campaign-detail {
  display: block;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  color: #346f51;
  margin-top: 5px;
}
.bottom-promo.campaign { height: 126px; }
.bottom-promo.campaign .campaign-copy { padding: 12px 24px; }
.bottom-promo.campaign .campaign-amount { font-size: 57px; }
.bottom-promo.campaign .campaign-title { font-size: 22px; }
.footer-promo.campaign { height: 114px; }
.footer-promo.campaign .campaign-copy { padding: 14px 26px; }
.footer-promo.campaign .campaign-title { font-size: 32px; }
.footer-promo.campaign .campaign-detail { font-size: 12px; }
.poster {
  background: linear-gradient(130deg, #0d2d22, #07120f 56%, #123c28);
  padding: 24px;
  gap: 18px;
}
.poster::after {
  background: none;
  border: 1px solid #ffffff0c;
  inset: 20px;
  pointer-events: none;
}
.poster-kicker {
  z-index: 2;
  color: #76c79c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}
.poster h2 {
  z-index: 2;
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 600;
  margin: 0;
  color: #f1faf4;
}
.poster .poster-play {
  width: auto;
  height: auto;
  padding: 13px 22px;
  border: 1px solid #70d69b;
  border-radius: 5px;
  clip-path: none;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: #16bc63;
  color: #052417;
  font-size: 13px;
  font-weight: 700;
}
.poster .poster-play span { font-size: 18px; transform: none; }
.poster .poster-play:disabled {
  opacity: 1;
  background: #17392b;
  border-color: #345f48;
  color: #aacbb8;
}
.poster p {
  position: relative;
  bottom: auto;
  max-width: 85%;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: #92b29f;
}
@keyframes campaign-sheen {
  0%, 60% { left: -40%; opacity: 0; }
  65% { opacity: .75; }
  90%, 100% { left: 115%; opacity: 0; }
}
@media (max-width: 700px) {
  .promo.campaign { height: 110px; }
  .campaign .campaign-copy { padding: 12px 16px; }
  .campaign .campaign-amount { font-size: 38px; }
  .campaign .campaign-title { font-size: 19px; }
  .campaign-telegram .campaign-title { font-size: 21px; }
  .bottom-promo.campaign { height: 110px; }
  .bottom-promo.campaign .campaign-copy,
  .footer-promo.campaign .campaign-copy { padding: 12px 16px; }
  .bottom-promo.campaign .campaign-amount { font-size: 40px; }
  .bottom-promo.campaign .campaign-title { font-size: 19px; }
  .footer-promo.campaign { height: 110px; }
  .footer-promo.campaign .campaign-title { font-size: 22px; }
  .footer-promo.campaign .campaign-detail { font-size: 10px; }
  .poster { padding: 20px; gap: 12px; }
  .poster::after { inset: 10px; }
  .poster-kicker { font-size: 8px; }
  .poster .poster-play { padding: 9px 15px; font-size: 11px; }
  .poster p { font-size: 9px; }
}
@media (max-width: 360px) {
  .campaign .campaign-copy { width: 75%; padding-left: 12px; }
  .campaign .campaign-amount { font-size: 33px; }
  .campaign .campaign-detail { font-size: 9px; }
  .bottom-promo.campaign .campaign-amount { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign::before { animation: none; display: none; }
}

/* Three readable scenes, with a short entrance and exit around each hold. */
.campaign { --story-shift: 0s; --render-time: 0s; }
.campaign .campaign-copy { display: block; padding: 0; }
.campaign .campaign-scene {
  position: absolute;
  inset: 0;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  animation: campaign-story 9s cubic-bezier(.2,.7,.2,1) infinite both;
  animation-delay: calc(var(--scene-index) * 3s + var(--story-shift) - var(--render-time));
}
.campaign .campaign-headline { font-size: 26px; line-height: 1.05; }
.campaign .campaign-subtitle { font-size: 22px; margin-top: 3px; }
.campaign .scene-reverse-amount { margin-top: 3px; }
.campaign-telegram .campaign-headline { font-size: 24px; }
.campaign-telegram .campaign-subtitle { font-size: 25px; }
.bottom-promo.campaign .campaign-copy,
.footer-promo.campaign .campaign-copy { padding: 0; }
.bottom-promo.campaign .campaign-scene { padding: 12px 24px; }
.footer-promo.campaign .campaign-scene { padding: 14px 26px; }
.bottom-promo.campaign .campaign-headline { font-size: 36px; }
.bottom-promo.campaign .campaign-subtitle { font-size: 23px; }
.footer-promo.campaign .campaign-headline { font-size: 32px; }
.footer-promo.campaign .campaign-subtitle { font-size: 28px; }
.campaign::before {
  animation-duration: 9s;
  animation-delay: calc(var(--story-shift) - var(--render-time));
}
.campaign .campaign-gif {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.gif-enabled .campaign-copy,
.gif-enabled::before { visibility: hidden; }
@keyframes campaign-story {
  0% { opacity: 0; transform: translate3d(-18px, 4px, 0) scale(.98); }
  4.5%, 28.3% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  33.33%, 100% { opacity: 0; transform: translate3d(18px, -4px, 0) scale(1.01); }
}
@media (max-width: 700px) {
  .campaign .campaign-scene { padding: 12px 16px; }
  .campaign .campaign-headline { font-size: 25px; }
  .campaign .campaign-subtitle { font-size: 20px; }
  .campaign-telegram .campaign-headline { font-size: 22px; }
  .campaign-telegram .campaign-subtitle { font-size: 23px; }
  .bottom-promo.campaign .campaign-scene,
  .footer-promo.campaign .campaign-scene { padding: 12px 16px; }
  .bottom-promo.campaign .campaign-headline,
  .footer-promo.campaign .campaign-headline { font-size: 25px; }
  .bottom-promo.campaign .campaign-subtitle,
  .footer-promo.campaign .campaign-subtitle { font-size: 21px; }
  /* Live HTML typography keeps the GIF story crisp on narrow screens. */
  .campaign .campaign-gif { display: none; }
  .gif-enabled .campaign-copy { visibility: visible; }
}
@media (max-width: 360px) {
  .campaign .campaign-headline { font-size: 22px; }
  .campaign-telegram .campaign-headline { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign .campaign-gif { display: none; }
  .gif-enabled .campaign-copy { visibility: visible; }
  .campaign .campaign-scene { animation: none; opacity: 0; transform: none; }
  .campaign .campaign-scene:first-child { opacity: 1; }
}