/* generated from core.css by gatefall/build-root.mjs — edit the source
   sheets, then npm run build:gatefall. Import order is core.css's. */

/* --- sponsored-signal.css --- */
.sponsored-signal-offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
  padding: 0.8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--signal) 42%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--signal) 9%, transparent), transparent 52%),
    var(--surface);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--signal) 75%, transparent);
}

.sponsored-signal-offer.hidden {
  display: none;
}

.sponsored-signal-offer-icon {
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--signal) 35%, var(--line));
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 7%, transparent);
}

.sponsored-signal-offer-icon .icon {
  width: 1.2rem;
  height: 1.2rem;
  filter: drop-shadow(0 0 0.45rem color-mix(in srgb, var(--signal) 55%, transparent));
}

.sponsored-signal-offer-copy {
  min-width: 0;
}

.sponsored-signal-offer-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-bottom: 0.22rem;
  color: var(--signal);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sponsored-signal-offer-label span + span {
  color: var(--text-color-muted);
}

.sponsored-signal-offer-copy h2 {
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.025em;
}

.sponsored-signal-offer-copy > p {
  margin: 0.2rem 0 0;
  color: var(--text-color-alt);
  font-size: 0.58rem;
}

.sponsored-signal-offer-copy .sponsored-signal-offer-reward {
  color: var(--signal);
}

.sponsored-signal-offer-actions {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.45rem;
}

.sponsored-signal-offer-actions button {
  min-height: 2.7rem;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line-strong);
  color: var(--text-color-alt);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sponsored-signal-offer-actions #open-sponsored-signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-color: color-mix(in srgb, var(--signal) 55%, var(--line));
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 8%, transparent);
}

.sponsored-signal-offer-actions #open-sponsored-signal:hover {
  color: #15130e;
  background: var(--signal);
}

.sponsored-signal-offer-actions .icon {
  width: 0.95rem;
  height: 0.95rem;
}

body.sponsored-signal-open {
  overflow: hidden;
}

.sponsored-signal-modal {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: clamp(0.6rem, 3vw, 2rem);
  overflow-y: auto;
  background: rgba(3, 5, 5, 0.9);
  backdrop-filter: blur(12px);
}

.sponsored-signal-modal.hidden {
  display: none;
}

.sponsored-signal-player {
  width: min(100%, 980px);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #0c1110;
  box-shadow: var(--shadow-deep);
}

.sponsored-signal-pause-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.58rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 44%, var(--line));
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, #0c1110);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
}

.sponsored-signal-pause-strip > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  text-transform: uppercase;
}

.sponsored-signal-pause-strip .icon {
  width: 0.8rem;
  height: 0.8rem;
}

.sponsored-signal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #111715;
}

.sponsored-signal-header > div {
  display: grid;
  gap: 0.18rem;
}

#sponsored-signal-disclosure {
  color: var(--blue);
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#sponsored-signal-sponsor {
  color: var(--signal);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sponsored-signal-header #close-sponsored-signal {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--text-color-alt);
  background: transparent;
}

.sponsored-signal-header #close-sponsored-signal:hover {
  color: var(--text-color);
  border-color: var(--signal);
}

.sponsored-signal-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(0, 1.08fr);
  min-height: 330px;
  background:
    linear-gradient(rgba(207, 225, 191, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 225, 191, 0.045) 1px, transparent 1px),
    #0c1110;
  background-size: 42px 42px;
}

.sponsored-signal-visual {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 330px;
  overflow: hidden;
  place-items: center;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--signal) 13%, transparent), transparent 58%),
    rgba(255, 255, 255, 0.01);
}

.sponsored-signal-visual img,
.sponsored-signal-visual video {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}

.sponsored-signal-visual video {
  background: #070a09;
}

.sponsored-signal-audio {
  display: grid;
  width: min(82%, 340px);
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
}

.sponsored-signal-audio audio {
  width: 100%;
}

.sponsored-signal-audio p {
  margin: 0;
  color: var(--text-color-alt);
  font-size: 0.58rem;
}

/* Every motion preset composes a full-bleed scene inside the visual pane:
   a dim atmospheric base layer, a midground subject, and a glow/bloom
   accent layer. The pane is roughly 16:9 and variable, so everything is
   placed with percentages and centered transforms. */
.sponsored-signal-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.sponsored-signal-motion span {
  position: absolute;
  display: block;
}

/* Gate: an iris aperture — segmented outer ring with counter-rotating inner
   rings around a blooming core, and a faint energy shimmer crossing. */
.sponsored-signal-motion[data-preset="gate"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--signal) 13%, transparent), transparent 56%),
    radial-gradient(ellipse at 50% 118%, color-mix(in srgb, var(--ember) 9%, transparent), transparent 58%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.3) 100%);
  animation: sponsored-gate-ambient 13s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="gate"]::after {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 47%;
  width: 13%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 20%, transparent) 50%, transparent);
  opacity: 0;
  animation: sponsored-gate-shimmer 13s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform: rotate(24deg);
}

.sponsored-signal-motion[data-preset="gate"] span:first-child {
  top: 50%;
  left: 50%;
  height: 88%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--signal) 48%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 1.8rem color-mix(in srgb, var(--signal) 15%, transparent),
    inset 0 0 1.8rem color-mix(in srgb, var(--signal) 10%, transparent);
  animation: sponsored-gate-spin 14s linear infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="gate"] span:first-child::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--signal) 75%, transparent) 0deg 3deg, transparent 3deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 79%, #000 80%);
  mask: radial-gradient(circle, transparent 79%, #000 80%);
}

.sponsored-signal-motion[data-preset="gate"] span:first-child::after {
  content: '';
  position: absolute;
  inset: 14%;
  border: 1px dashed color-mix(in srgb, var(--blue) 52%, transparent);
  border-radius: 50%;
  animation: sponsored-gate-spin-counter 9s linear infinite;
}

.sponsored-signal-motion[data-preset="gate"] span:last-child {
  top: 50%;
  left: 50%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #fdf0d2, var(--signal) 58%, #a97e42);
  box-shadow:
    0 0 0.7rem color-mix(in srgb, var(--signal) 85%, transparent),
    0 0 1.8rem color-mix(in srgb, var(--signal) 45%, transparent),
    0 0 3.2rem color-mix(in srgb, var(--signal) 22%, transparent);
  animation: sponsored-gate-core 6.5s ease-in-out infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="gate"] span:last-child::before {
  content: '';
  position: absolute;
  inset: -110%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal) 22%, transparent), transparent 68%);
  animation: sponsored-gate-halo 6.5s ease-in-out -3.25s infinite;
}

.sponsored-signal-motion[data-preset="gate"] span:last-child::after {
  content: '';
  position: absolute;
  inset: -160%;
  border: 1px dashed color-mix(in srgb, var(--ember) 40%, transparent);
  border-radius: 50%;
  animation: sponsored-gate-spin-counter 11s linear infinite;
}

/* Waveform: a centered full-width bar row with per-bar glow and a faded
   mirror reflection below, over a dim blue mid-line atmosphere. */
.sponsored-signal-motion[data-preset="waveform"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2%;
  padding: 0 8%;
}

.sponsored-signal-motion[data-preset="waveform"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 44%, color-mix(in srgb, var(--blue) 13%, transparent) 50%, transparent 56%),
    radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--blue) 11%, transparent), transparent 70%);
  animation: sponsored-waveform-ambient 10s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="waveform"]::after {
  content: '';
  position: absolute;
  top: 16%;
  bottom: 16%;
  left: 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05) 50%, transparent);
  opacity: 0;
  animation: sponsored-waveform-sheen 12s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sponsored-signal-motion[data-preset="waveform"] span {
  position: relative;
  flex: 1 1 auto;
  max-width: 0.55rem;
  height: 56%;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 70%, white), var(--blue) 42%, color-mix(in srgb, var(--blue) 55%, transparent));
  box-shadow: 0 0 0.75rem color-mix(in srgb, var(--blue) 38%, transparent);
  animation: sponsored-wave 2.3s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  transform-origin: center;
}

.sponsored-signal-motion[data-preset="waveform"] span::after {
  content: '';
  position: absolute;
  top: calc(100% + 14%);
  right: 0;
  left: 0;
  height: 52%;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 42%, transparent), transparent 85%);
  opacity: 0.34;
}

.sponsored-signal-motion[data-preset="waveform"] span:nth-child(1) { height: 26%; animation-delay: -0.4s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(2) { height: 42%; animation-delay: -1.6s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(3) { height: 34%; animation-delay: -0.9s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(4) { height: 58%; animation-delay: -2.1s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(5) { height: 48%; animation-delay: -0.2s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(6) { height: 70%; animation-delay: -1.3s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(7) { height: 56%; animation-delay: -1.8s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(8) { height: 74%; animation-delay: -0.7s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(9) { height: 60%; animation-delay: -2.3s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(10) { height: 44%; animation-delay: -1.1s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(11) { height: 64%; animation-delay: -0.5s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(12) { height: 38%; animation-delay: -1.9s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(13) { height: 46%; animation-delay: -1.4s; }
.sponsored-signal-motion[data-preset="waveform"] span:nth-child(14) { height: 28%; animation-delay: -0.8s; }

.sponsored-signal-motion[data-preset="waveform"] span:nth-child(3n) {
  animation-duration: 1.9s;
}

.sponsored-signal-motion[data-preset="waveform"] span:nth-child(4n) {
  animation-duration: 2.8s;
}

/* Target: radar rings with rim tick marks, a rotating sweep wedge, and a
   sonar lock-pulse expanding from the glowing centre. */
.sponsored-signal-motion[data-preset="target"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ember) 10%, transparent), transparent 52%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.35) 100%);
}

.sponsored-signal-motion[data-preset="target"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--ember) 55%, transparent) 0deg 1.2deg, transparent 1.2deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 86%, #000 87%);
  mask: radial-gradient(circle, transparent 86%, #000 87%);
  animation: sponsored-target-ticks 10s ease-in-out infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="target"] span:first-child {
  top: 50%;
  left: 50%;
  height: 92%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--ember) 62%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 1.6rem color-mix(in srgb, var(--ember) 22%, transparent),
    inset 0 0 1.6rem color-mix(in srgb, var(--ember) 12%, transparent);
  animation: sponsored-target-pulse 6s ease-in-out infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="target"] span:first-child::before {
  content: '';
  position: absolute;
  inset: 24%;
  border: 1px solid color-mix(in srgb, var(--ember) 45%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 1rem color-mix(in srgb, var(--ember) 15%, transparent);
}

.sponsored-signal-motion[data-preset="target"] span:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--ember) 45%, transparent) 0 0) 50% 50% / 100% 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--ember) 45%, transparent) 0 0) 50% 50% / 1px 100% no-repeat;
}

.sponsored-signal-motion[data-preset="target"] span:last-child {
  top: 50%;
  left: 50%;
  height: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 288deg, color-mix(in srgb, var(--ember) 5%, transparent) 300deg, color-mix(in srgb, var(--ember) 34%, transparent) 356deg, color-mix(in srgb, var(--ember-bright) 65%, transparent) 360deg);
  animation: sponsored-target-sweep 8s linear infinite;
  transform: translate(-50%, -50%) rotate(0deg);
}

.sponsored-signal-motion[data-preset="target"] span:last-child::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--signal) 70%, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: sponsored-target-ping 4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
  transform: translate(-50%, -50%) scale(0.3);
}

.sponsored-signal-motion[data-preset="target"] span:last-child::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--signal);
  box-shadow:
    0 0 0.6rem color-mix(in srgb, var(--signal) 80%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--signal) 40%, transparent);
  animation: sponsored-target-lock 4s ease-in-out infinite;
  transform: translate(-50%, -50%);
}

/* Starfield: three dense parallax star layers drifting over blue/ember
   nebula clouds, with cross-flare hero stars and two twinkle groups. */
.sponsored-signal-motion[data-preset="starfield"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 24% 30%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 58%),
    radial-gradient(ellipse at 78% 74%, color-mix(in srgb, var(--ember) 18%, transparent), transparent 52%),
    radial-gradient(ellipse at 60% 16%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 48%),
    radial-gradient(ellipse at 8% 86%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 45%);
  animation: sponsored-starfield-nebula 14s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="starfield"]::after {
  content: '';
  position: absolute;
  inset: -8%;
  background-image:
    radial-gradient(2.5px 2.5px at 25% 26%, rgba(255, 255, 255, 0.95), transparent 100%),
    radial-gradient(2.5px 2.5px at 60% 70%, color-mix(in srgb, var(--blue) 95%, white), transparent 100%),
    radial-gradient(2.5px 2.5px at 85% 30%, rgba(255, 255, 255, 0.9), transparent 100%);
  animation: sponsored-star-twinkle 9s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="starfield"] span:first-child {
  inset: -14%;
  background-image:
    radial-gradient(1px 1px at 2% 9%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 5% 71%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 8% 33%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 11% 88%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 14% 15%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 17% 55%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 20% 42%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 23% 79%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 26% 5%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 29% 62%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 32% 26%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 35% 93%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 38% 48%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 41% 12%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 44% 70%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 47% 35%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 50% 84%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 53% 20%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 56% 58%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 59% 3%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 62% 44%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 65% 76%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 68% 17%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 71% 52%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 74% 90%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 77% 29%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 80% 66%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 83% 8%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 86% 40%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 89% 74%, rgba(255, 255, 255, 0.4), transparent 100%),
    radial-gradient(1px 1px at 92% 23%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1px 1px at 95% 57%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 98% 86%, rgba(255, 255, 255, 0.4), transparent 100%);
  animation: sponsored-star-drift-far 11s ease-in-out infinite alternate;
}

.sponsored-signal-motion[data-preset="starfield"] span:first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(3.5px 3.5px at 18% 28%, #fff, transparent 100%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85) 50%, transparent),
    radial-gradient(3.5px 3.5px at 72% 20%, color-mix(in srgb, var(--blue) 60%, white), transparent 100%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue) 55%, white) 50%, transparent),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--blue) 55%, white) 50%, transparent),
    radial-gradient(3.5px 3.5px at 42% 68%, color-mix(in srgb, var(--signal) 55%, white), transparent 100%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 50%, white) 50%, transparent),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--signal) 50%, white) 50%, transparent),
    radial-gradient(3px 3px at 88% 58%, #fff, transparent 100%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.75) 50%, transparent),
    radial-gradient(3px 3px at 30% 86%, rgba(255, 255, 255, 0.9), transparent 100%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65) 50%, transparent),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.65) 50%, transparent);
  background-position:
    18% 28%, 18% 28%, 18% 28%,
    72% 20%, 72% 20%, 72% 20%,
    42% 68%, 42% 68%, 42% 68%,
    88% 58%, 88% 58%, 88% 58%,
    30% 86%, 30% 86%, 30% 86%;
  background-repeat: no-repeat;
  background-size:
    100% 100%, 28px 1px, 1px 28px,
    100% 100%, 26px 1px, 1px 26px,
    100% 100%, 24px 1px, 1px 24px,
    100% 100%, 22px 1px, 1px 22px,
    100% 100%, 20px 1px, 1px 20px;
  animation: sponsored-star-glint 7s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="starfield"] span:last-child {
  inset: -14%;
  background-image:
    radial-gradient(1.5px 1.5px at 3% 50%, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 7% 18%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 64%, color-mix(in srgb, var(--blue) 85%, transparent), transparent 100%),
    radial-gradient(1.5px 1.5px at 16% 36%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 21% 81%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 25% 10%, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 47%, color-mix(in srgb, var(--blue) 75%, transparent), transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 72%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 39% 25%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 43% 58%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 48% 90%, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 14%, color-mix(in srgb, var(--signal) 80%, transparent), transparent 100%),
    radial-gradient(1.5px 1.5px at 57% 40%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 61% 68%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1.5px 1.5px at 66% 30%, color-mix(in srgb, var(--blue) 80%, transparent), transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 54%, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 7%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 79% 44%, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 77%, color-mix(in srgb, var(--blue) 70%, transparent), transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 21%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1.5px 1.5px at 93% 49%, rgba(255, 255, 255, 0.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 97% 12%, rgba(255, 255, 255, 0.55), transparent 100%);
  animation: sponsored-star-drift-mid 8s ease-in-out infinite alternate;
}

.sponsored-signal-motion[data-preset="starfield"] span:last-child::before {
  content: '';
  position: absolute;
  inset: -3%;
  background-image:
    radial-gradient(2px 2px at 6% 26%, rgba(255, 255, 255, 0.95), transparent 100%),
    radial-gradient(2.5px 2.5px at 13% 58%, color-mix(in srgb, var(--signal) 90%, transparent), transparent 100%),
    radial-gradient(2px 2px at 19% 12%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(2.5px 2.5px at 27% 76%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(2px 2px at 33% 38%, color-mix(in srgb, var(--blue) 90%, transparent), transparent 100%),
    radial-gradient(2px 2px at 40% 64%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(2.5px 2.5px at 46% 20%, rgba(255, 255, 255, 0.95), transparent 100%),
    radial-gradient(2px 2px at 54% 48%, color-mix(in srgb, var(--blue) 85%, transparent), transparent 100%),
    radial-gradient(2.5px 2.5px at 62% 82%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(2px 2px at 69% 28%, color-mix(in srgb, var(--ember) 85%, transparent), transparent 100%),
    radial-gradient(2px 2px at 76% 60%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(2.5px 2.5px at 83% 16%, rgba(255, 255, 255, 0.95), transparent 100%),
    radial-gradient(2px 2px at 90% 44%, color-mix(in srgb, var(--signal) 85%, transparent), transparent 100%),
    radial-gradient(2px 2px at 96% 70%, rgba(255, 255, 255, 0.9), transparent 100%);
  animation: sponsored-star-drift-near 6s ease-in-out infinite alternate;
}

.sponsored-signal-motion[data-preset="starfield"] span:last-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2.5px 2.5px at 40% 60%, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(2.5px 2.5px at 15% 80%, color-mix(in srgb, var(--signal) 90%, transparent), transparent 100%),
    radial-gradient(2.5px 2.5px at 72% 18%, rgba(255, 255, 255, 0.85), transparent 100%);
  animation: sponsored-star-twinkle 11s ease-in-out -5s infinite;
}

/* Pixels: a cohesive mosaic of glowing squares stepping across a faint
   lattice in quantized hops, with two groups blinking on/off in sync. */
.sponsored-signal-motion[data-preset="pixels"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 12.5%),
    radial-gradient(ellipse at 20% 20%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 55%),
    radial-gradient(ellipse at 82% 80%, color-mix(in srgb, var(--ember) 7%, transparent), transparent 55%);
}

.sponsored-signal-motion[data-preset="pixels"]::after {
  content: '';
  position: absolute;
  top: -20%;
  right: 0;
  left: 0;
  height: 20%;
  background: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  opacity: 0;
  animation: sponsored-pixel-scan 13s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sponsored-signal-motion[data-preset="pixels"] span:first-child {
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--blue) 72%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 60%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ember) 58%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--blue) 46%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 42%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ember) 40%, transparent) 0 0);
  background-position: 12.5% 25%, 37.5% 62.5%, 62.5% 12.5%, 75% 50%, 25% 87.5%, 87.5% 75%;
  background-repeat: no-repeat;
  background-size: 7% 10.5%;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blue) 30%, transparent));
  animation: sponsored-pixel-step-a 12s step-end infinite;
}

.sponsored-signal-motion[data-preset="pixels"] span:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--blue) 62%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 52%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--blue) 40%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ember) 48%, transparent) 0 0);
  background-position: 50% 87.5%, 87.5% 12.5%, 12.5% 12.5%, 62.5% 50%;
  background-repeat: no-repeat;
  background-size: 7% 10.5%;
  animation: sponsored-pixel-blink 6s step-end infinite;
}

.sponsored-signal-motion[data-preset="pixels"] span:last-child {
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--green) 66%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--blue) 58%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--ember) 52%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--blue) 44%, transparent) 0 0),
    linear-gradient(rgba(255, 255, 255, 0.3) 0 0);
  background-position: 50% 25%, 12.5% 50%, 87.5% 37.5%, 62.5% 75%, 37.5% 12.5%;
  background-repeat: no-repeat;
  background-size: 9% 13.5%;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--green) 25%, transparent));
  animation: sponsored-pixel-step-b 9s step-end infinite;
}

.sponsored-signal-motion[data-preset="pixels"] span:last-child::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ember) 56%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 48%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--blue) 52%, transparent) 0 0);
  background-position: 12.5% 75%, 75% 75%, 37.5% 37.5%;
  background-repeat: no-repeat;
  background-size: 9% 13.5%;
  animation: sponsored-pixel-blink 8s step-end -4s infinite;
}

/* Glitch: layered horizontal slabs with RGB-split edges under scanlines,
   nudging out of register while an interference band drifts down.
   Deliberately gentle — long cycles, small offsets, no strobe. */
.sponsored-signal-motion[data-preset="glitch"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(transparent 0 3px, rgba(255, 255, 255, 0.04) 3px 4px),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--blue) 6%, transparent), transparent 72%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.3) 100%);
}

.sponsored-signal-motion[data-preset="glitch"]::after {
  content: '';
  position: absolute;
  top: -18%;
  right: 0;
  left: 0;
  height: 16%;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.05) 45%, color-mix(in srgb, var(--blue) 10%, transparent) 55%, transparent);
  opacity: 0;
  animation: sponsored-glitch-band 11s linear infinite;
}

.sponsored-signal-motion[data-preset="glitch"] span:first-child {
  top: 27%;
  right: 30%;
  left: 12%;
  height: 12%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--text-color) 32%, transparent), color-mix(in srgb, var(--text-color) 14%, transparent));
  box-shadow:
    -0.22rem 0 0 color-mix(in srgb, var(--blue) 50%, transparent),
    0.22rem 0 0 color-mix(in srgb, var(--ember) 45%, transparent);
  animation: sponsored-glitch-shift 6.4s step-end infinite;
}

.sponsored-signal-motion[data-preset="glitch"] span:first-child::before {
  content: '';
  position: absolute;
  top: 170%;
  left: 8%;
  width: 52%;
  height: 58%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 34%, transparent), color-mix(in srgb, var(--blue) 14%, transparent));
  box-shadow:
    0.2rem 0 0 color-mix(in srgb, var(--blue) 45%, transparent),
    -0.2rem 0 0 color-mix(in srgb, var(--ember) 40%, transparent);
  animation: sponsored-glitch-shift 7.3s step-end -2.4s infinite;
}

.sponsored-signal-motion[data-preset="glitch"] span:first-child::after {
  content: '';
  position: absolute;
  top: -80%;
  left: 34%;
  width: 38%;
  height: 42%;
  background: color-mix(in srgb, var(--text-color) 16%, transparent);
  box-shadow:
    -0.16rem 0 0 color-mix(in srgb, var(--blue) 38%, transparent),
    0.16rem 0 0 color-mix(in srgb, var(--ember) 34%, transparent);
  animation: sponsored-glitch-shift 6.4s step-end -4.1s infinite;
}

.sponsored-signal-motion[data-preset="glitch"] span:last-child {
  top: 56%;
  right: 12%;
  left: 30%;
  height: 12%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--text-color) 14%, transparent), color-mix(in srgb, var(--text-color) 30%, transparent));
  box-shadow:
    0.22rem 0 0 color-mix(in srgb, var(--blue) 48%, transparent),
    -0.22rem 0 0 color-mix(in srgb, var(--ember) 44%, transparent);
  animation: sponsored-glitch-shift 7.3s step-end infinite reverse;
}

.sponsored-signal-motion[data-preset="glitch"] span:last-child::before {
  content: '';
  position: absolute;
  top: 160%;
  left: 22%;
  width: 46%;
  height: 50%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ember) 30%, transparent), color-mix(in srgb, var(--ember) 12%, transparent));
  box-shadow:
    -0.18rem 0 0 color-mix(in srgb, var(--blue) 40%, transparent),
    0.18rem 0 0 color-mix(in srgb, var(--ember) 36%, transparent);
  animation: sponsored-glitch-shift 6.4s step-end -1.3s infinite;
}

.sponsored-signal-motion[data-preset="glitch"] span:last-child::after {
  content: '';
  position: absolute;
  top: -70%;
  right: 0;
  width: 30%;
  height: 40%;
  background: color-mix(in srgb, var(--text-color) 15%, transparent);
  box-shadow:
    0.16rem 0 0 color-mix(in srgb, var(--blue) 36%, transparent),
    -0.16rem 0 0 color-mix(in srgb, var(--ember) 32%, transparent);
  animation: sponsored-glitch-shift 7.3s step-end -5.2s infinite;
}

/* Terminal: full-frame phosphor rain — columns of falling dash-glyph
   streams at two speeds with glowing heads, a bright lead stream, a
   blinking cursor, and a dim screen vignette. */
.sponsored-signal-motion[data-preset="terminal"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--green) 9%, transparent), transparent 68%),
    #060a08;
}

.sponsored-signal-motion[data-preset="terminal"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#060a08, transparent 16%, transparent 80%, #060a08),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(3, 6, 4, 0.55) 100%);
}

.sponsored-signal-motion[data-preset="terminal"] span:first-child {
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, #060a08 9px 32px),
    repeating-linear-gradient(#eaffe0 0 2px, color-mix(in srgb, var(--green) 60%, transparent) 2px 9px, color-mix(in srgb, var(--green) 26%, transparent) 9px 26px, transparent 26px 64px);
  /* 448px per 8s loop = 7 repeats of the 64px stream period, so the loop is
     seamless. The 32px column mask leaves ~28% of columns lit; combined
     with layer B's offset 27px mask, roughly half the screen carries
     discrete streams over dark gaps. */
  animation: sponsored-terminal-rain 8s linear infinite;
}

.sponsored-signal-motion[data-preset="terminal"] span:first-child::before {
  content: '';
  position: absolute;
  top: -22%;
  left: 46%;
  width: 9px;
  height: 22%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--green) 40%, transparent) 60%, #d9ffd9);
  opacity: 0;
  animation: sponsored-terminal-streak 5.5s linear infinite;
}

.sponsored-signal-motion[data-preset="terminal"] span:first-child::after {
  content: '';
  position: absolute;
  bottom: 22%;
  left: 25%;
  width: 2.4%;
  height: 4.5%;
  background: var(--green);
  box-shadow: 0 0 0.7rem color-mix(in srgb, var(--green) 55%, transparent);
  animation: sponsored-terminal-blink 1.2s steps(1) infinite;
}

.sponsored-signal-motion[data-preset="terminal"] span:last-child {
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, #060a08 8px 27px) 14px 0,
    repeating-linear-gradient(#d4f7cc 0 2px, color-mix(in srgb, var(--green) 42%, transparent) 2px 6px, color-mix(in srgb, var(--green) 18%, transparent) 6px 12px, transparent 12px 44px);
  /* 352px per 12s loop = 8 repeats of the 44px burst period, so the loop is
     seamless. Short bursts here against layer A's long trails vary the
     stream lengths. */
  animation: sponsored-terminal-rain-b 12s linear infinite;
}

.sponsored-signal-motion[data-preset="terminal"] span:last-child::before {
  content: '';
  position: absolute;
  top: -22%;
  left: 18%;
  width: 9px;
  height: 22%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--green) 45%, transparent) 60%, #e4ffdf);
  opacity: 0;
  animation: sponsored-terminal-streak 4.7s linear -2.1s infinite;
}

.sponsored-signal-motion[data-preset="terminal"] span:last-child::after {
  content: '';
  position: absolute;
  top: -22%;
  left: 74%;
  width: 9px;
  height: 22%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--green) 42%, transparent) 60%, #def7d6);
  opacity: 0;
  animation: sponsored-terminal-streak 6.6s linear -3.6s infinite;
}

/* Grid: perspective floor rolling toward the viewer beneath a glowing
   horizon and a slow-pulsing portal sun, with light pulses racing along
   the grid lines toward the vanishing point. */
.sponsored-signal-motion[data-preset="grid"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 42%, color-mix(in srgb, var(--blue) 18%, transparent) 51.5%, color-mix(in srgb, var(--blue) 10%, transparent) 56%, transparent 68%),
    radial-gradient(ellipse at 50% 8%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 60%);
}

.sponsored-signal-motion[data-preset="grid"]::after {
  content: '';
  position: absolute;
  top: 96%;
  left: 68%;
  width: 2.6%;
  height: 3.5%;
  border-radius: 50%;
  background: radial-gradient(circle, #dff1ff 20%, color-mix(in srgb, var(--blue) 60%, transparent) 60%, transparent);
  opacity: 0;
  animation: sponsored-grid-race-b 6.5s cubic-bezier(0.35, 0.3, 0.5, 1) -2s infinite;
}

.sponsored-signal-motion[data-preset="grid"] span:first-child {
  top: 52%;
  right: -30%;
  bottom: -6%;
  left: -30%;
  background:
    repeating-linear-gradient(color-mix(in srgb, var(--blue) 55%, transparent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 42%, transparent) 0 1px, transparent 1px 22px);
  /* 44px per loop = two 22px cells, so the roll is seamless. */
  animation: sponsored-grid-roll 3s linear infinite;
  transform: perspective(220px) rotateX(58deg);
  transform-origin: top;
}

.sponsored-signal-motion[data-preset="grid"] span:first-child::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(color-mix(in srgb, var(--blue) 12%, #090c0c), transparent 45%);
}

.sponsored-signal-motion[data-preset="grid"] span:first-child::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 39.5%;
  width: 3px;
  height: 26px;
  background: linear-gradient(180deg, transparent, #cfe9ff);
  box-shadow: 0 0 8px color-mix(in srgb, var(--blue) 70%, transparent);
  opacity: 0;
  animation: sponsored-grid-race 4.2s cubic-bezier(0.3, 0.4, 0.6, 1) infinite;
}

.sponsored-signal-motion[data-preset="grid"] span:last-child {
  top: 14%;
  left: 50%;
  height: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-linear-gradient(transparent 0 9px, rgba(9, 12, 12, 0.8) 9px 12px),
    radial-gradient(circle at 50% 35%, #ffe9c0 0%, var(--signal) 42%, var(--ember) 78%, color-mix(in srgb, var(--ember) 60%, transparent) 100%);
  box-shadow: 0 0 2.4rem color-mix(in srgb, var(--ember) 30%, transparent);
  animation: sponsored-grid-sun 12s ease-in-out infinite;
  transform: translateX(-50%);
}

.sponsored-signal-motion[data-preset="grid"] span:last-child::before {
  content: '';
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ember) 16%, transparent), transparent 65%);
  animation: sponsored-grid-halo 12s ease-in-out -6s infinite;
}

.sponsored-signal-motion[data-preset="grid"] span:last-child::after {
  content: '';
  position: absolute;
  top: 95%;
  right: -125%;
  left: -125%;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue) 85%, white) 50%, transparent);
  box-shadow: 0 0 1.2rem 0.15rem color-mix(in srgb, var(--blue) 45%, transparent);
  animation: sponsored-grid-pulse 8s ease-in-out infinite;
}

/* Circuit: a multi-trace board — right-angle traces with junction pads over
   a faint substrate grid, and three pulses walking the paths at staggered
   offsets with trailing glow. */
.sponsored-signal-motion[data-preset="circuit"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--green) 42%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 42%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 38%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 36%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 40%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 36%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 34%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 32%, transparent) 0 0),
    linear-gradient(color-mix(in srgb, var(--green) 34%, transparent) 0 0),
    radial-gradient(circle, var(--green) 40%, transparent 45%),
    radial-gradient(circle, var(--green) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--green) 80%, transparent) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--green) 80%, transparent) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--green) 70%, transparent) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--green) 70%, transparent) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--green) 75%, transparent) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--green) 65%, transparent) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--green) 65%, transparent) 40%, transparent 45%),
    repeating-linear-gradient(rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 24px),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--green) 7%, transparent), transparent 75%);
  background-position:
    27.3% 30%, 60% 50%, 80% 70%, 30% 76.5%, 51.7% 52%, 72% 29.4%, 83.9% 16%, 44.1% 84%, 52% 21%,
    15% 30%, 85% 70%, 60% 30%, 72% 52%, 30% 84%, 72% 20%, 90% 16%, 62% 84%, 52% 40%,
    0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  background-size:
    45% 2px, 2px 40%, 25% 2px, 2px 32%, 42% 2px, 2px 32%, 38% 2px, 32% 2px, 2px 24%,
    7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px, 7px 7px,
    auto, auto, auto;
}

.sponsored-signal-motion[data-preset="circuit"]::after {
  content: '';
  position: absolute;
  top: 16%;
  left: 66%;
  width: 2.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ember-bright);
  box-shadow:
    0 0 0.5rem color-mix(in srgb, var(--ember) 80%, transparent),
    0 0 1.1rem color-mix(in srgb, var(--ember) 40%, transparent);
  animation: sponsored-circuit-pulse-c 5.5s linear -1.5s infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="circuit"] span:first-child {
  top: 30%;
  left: 40%;
  width: 2.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--signal);
  box-shadow:
    0 0 0.6rem color-mix(in srgb, var(--signal) 85%, transparent),
    0 0 1.3rem color-mix(in srgb, var(--signal) 45%, transparent);
  animation: sponsored-circuit-pulse 7s linear infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="circuit"] span:first-child::before {
  content: '';
  position: absolute;
  inset: -160%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal) 30%, transparent), transparent 70%);
}

.sponsored-signal-motion[data-preset="circuit"] span:last-child {
  top: 52%;
  left: 50%;
  width: 2.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  box-shadow:
    0 0 0.6rem color-mix(in srgb, var(--blue) 85%, transparent),
    0 0 1.3rem color-mix(in srgb, var(--blue) 45%, transparent);
  animation: sponsored-circuit-pulse-b 9s linear -3.5s infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="circuit"] span:last-child::before {
  content: '';
  position: absolute;
  inset: -160%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 30%, transparent), transparent 70%);
}

/* Beam: two bright crossing light beams with white-hot flare cores whose
   sweep phases interleave so one is always on screen, over a persistent
   ambient light shaft and dust shimmer. */
.sponsored-signal-motion[data-preset="beam"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 26%, color-mix(in srgb, var(--signal) 10%, transparent) 40%, rgba(255, 244, 222, 0.14) 50%, color-mix(in srgb, var(--signal) 10%, transparent) 60%, transparent 74%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.05), transparent 42%),
    radial-gradient(ellipse at 50% 108%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 58%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.3) 100%);
  animation: sponsored-beam-haze 13s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="beam"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 34%, rgba(255, 248, 232, 0.6), transparent 100%),
    radial-gradient(1px 1px at 38% 62%, rgba(255, 248, 232, 0.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 52% 24%, rgba(255, 248, 232, 0.55), transparent 100%),
    radial-gradient(1px 1px at 60% 76%, rgba(255, 248, 232, 0.45), transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 46%, rgba(255, 248, 232, 0.55), transparent 100%),
    radial-gradient(1px 1px at 46% 86%, rgba(255, 248, 232, 0.4), transparent 100%),
    radial-gradient(1px 1px at 30% 14%, rgba(255, 248, 232, 0.45), transparent 100%),
    radial-gradient(1px 1px at 84% 66%, rgba(255, 248, 232, 0.4), transparent 100%);
  animation: sponsored-beam-dust 7s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="beam"] span:first-child {
  top: -25%;
  bottom: -25%;
  left: 32%;
  width: 20%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 45%, transparent) 34%, rgba(255, 247, 232, 0.85) 50%, color-mix(in srgb, var(--signal) 45%, transparent) 66%, transparent);
  opacity: 0.95;
  animation: sponsored-beam-sweep 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform: translateX(0) skewX(-18deg);
}

.sponsored-signal-motion[data-preset="beam"] span:first-child::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 125%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 50%, transparent);
}

.sponsored-signal-motion[data-preset="beam"] span:last-child {
  top: -25%;
  bottom: -25%;
  left: 58%;
  width: 15%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue) 40%, transparent) 36%, rgba(238, 247, 255, 0.7) 50%, color-mix(in srgb, var(--blue) 40%, transparent) 64%, transparent);
  opacity: 0.85;
  animation: sponsored-beam-sweep-b 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform: translateX(0) skewX(14deg);
}

/* Stack: four distinct cards with lit top edges and subtle face gradients,
   rising and settling with eased overshoot over a drop glow, with one
   accent card in --blue. */
.sponsored-signal-motion[data-preset="stack"] {
  background:
    radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 55%),
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--signal) 6%, transparent), transparent 65%);
}

.sponsored-signal-motion[data-preset="stack"]::before,
.sponsored-signal-motion[data-preset="stack"]::after,
.sponsored-signal-motion[data-preset="stack"] span {
  position: absolute;
  left: 50%;
  width: 46%;
  height: 17%;
  margin-left: -23%;
  border: 1px solid color-mix(in srgb, var(--signal) 48%, var(--line));
  border-top-color: color-mix(in srgb, var(--signal) 60%, white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--signal) 16%, rgba(255, 255, 255, 0.03)), color-mix(in srgb, var(--signal) 5%, rgba(255, 255, 255, 0.01)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0.5rem 1rem rgba(0, 0, 0, 0.45);
  animation: sponsored-stack-lift 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sponsored-signal-motion[data-preset="stack"]::before {
  content: '';
  top: 62%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0.5rem 1rem rgba(0, 0, 0, 0.45),
    0 1.3rem 2.2rem color-mix(in srgb, var(--blue) 20%, transparent);
}

.sponsored-signal-motion[data-preset="stack"] span:first-child {
  top: 46.5%;
  animation-delay: -6.65s;
}

.sponsored-signal-motion[data-preset="stack"] span:last-child {
  top: 31%;
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
  border-top-color: color-mix(in srgb, var(--blue) 65%, white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 20%, rgba(255, 255, 255, 0.03)), color-mix(in srgb, var(--blue) 6%, rgba(255, 255, 255, 0.01)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0.5rem 1rem rgba(0, 0, 0, 0.45),
    0 0 1.2rem color-mix(in srgb, var(--blue) 22%, transparent);
  animation-delay: -6.3s;
}

.sponsored-signal-motion[data-preset="stack"] span:last-child::before {
  content: '';
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue) 80%, white), transparent);
  animation: sponsored-stack-edge 3.5s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="stack"]::after {
  content: '';
  top: 15.5%;
  animation-delay: -5.95s;
}

/* Equalizer: twelve centered bottom-anchored gradient bars (green base,
   blue tips) bouncing on a glowing baseline, mirrored in a faded
   reflection below. */
.sponsored-signal-motion[data-preset="equalizer"] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.8%;
  padding: 0 10% 30%;
}

.sponsored-signal-motion[data-preset="equalizer"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 66%, color-mix(in srgb, var(--green) 12%, transparent) 70%, transparent 78%),
    radial-gradient(ellipse at 50% 72%, color-mix(in srgb, var(--green) 10%, transparent), transparent 62%);
  animation: sponsored-equalizer-ambient 10s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="equalizer"]::after {
  content: '';
  position: absolute;
  top: 70%;
  right: 7%;
  left: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 65%, transparent) 20% 80%, transparent);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--green) 35%, transparent);
  animation: sponsored-equalizer-ambient 10s ease-in-out -5s infinite;
}

.sponsored-signal-motion[data-preset="equalizer"] span {
  position: relative;
  flex: 1 1 auto;
  max-width: 0.6rem;
  height: 56%;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--green) 85%, black), var(--green) 45%, var(--blue) 88%, color-mix(in srgb, var(--blue) 55%, white));
  box-shadow: 0 0 0.7rem color-mix(in srgb, var(--green) 32%, transparent);
  animation: sponsored-equalizer-bounce 1.5s cubic-bezier(0.65, -0.15, 0.35, 1.15) infinite alternate;
  transform-origin: bottom;
}

.sponsored-signal-motion[data-preset="equalizer"] span::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 46%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 38%, transparent), transparent 82%);
  opacity: 0.3;
}

.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(1) { height: 30%; animation-delay: -0.3s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(2) { height: 48%; animation-delay: -1.1s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(3) { height: 38%; animation-delay: -0.7s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(4) { height: 62%; animation-delay: -1.4s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(5) { height: 52%; animation-delay: -0.2s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(6) { height: 78%; animation-delay: -0.9s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(7) { height: 68%; animation-delay: -1.2s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(8) { height: 58%; animation-delay: -0.5s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(9) { height: 72%; animation-delay: -1.5s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(10) { height: 44%; animation-delay: -0.8s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(11) { height: 56%; animation-delay: -0.4s; }
.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(12) { height: 34%; animation-delay: -1.3s; }

.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(3n) {
  animation-duration: 1.2s;
}

.sponsored-signal-motion[data-preset="equalizer"] span:nth-child(5n) {
  animation-duration: 1.8s;
}

/* Ribbon: two broad ribbon bands (blue and ember) weaving through the
   frame with sheen highlights traveling along them, over a dim center
   glow and a faint third band for depth. */
.sponsored-signal-motion[data-preset="ribbon"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--signal) 9%, transparent), transparent 62%);
  animation: sponsored-ribbon-ambient 13s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="ribbon"]::after {
  content: '';
  position: absolute;
  top: 12%;
  right: -14%;
  left: -14%;
  height: 16%;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--signal) 12%, transparent) 50%, transparent);
  transform: rotate(6deg);
}

.sponsored-signal-motion[data-preset="ribbon"] span:first-child {
  top: 30%;
  right: -12%;
  left: -12%;
  height: 26%;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent 4%, color-mix(in srgb, var(--blue) 30%, transparent) 28%, color-mix(in srgb, var(--blue) 62%, transparent) 50%, color-mix(in srgb, var(--blue) 30%, transparent) 72%, transparent 96%);
  animation: sponsored-ribbon-weave 12s ease-in-out infinite alternate;
  transform: rotate(-12deg);
}

.sponsored-signal-motion[data-preset="ribbon"] span:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22%;
  width: 16%;
  background: linear-gradient(90deg, transparent, rgba(235, 245, 255, 0.22) 50%, transparent);
  animation: sponsored-ribbon-sheen 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transform: skewX(-24deg);
}

.sponsored-signal-motion[data-preset="ribbon"] span:first-child::after {
  content: '';
  position: absolute;
  top: -62%;
  right: 6%;
  left: 2%;
  height: 58%;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent 8%, color-mix(in srgb, var(--blue) 16%, transparent) 50%, transparent 92%);
}

.sponsored-signal-motion[data-preset="ribbon"] span:last-child {
  top: 56%;
  right: -12%;
  left: -12%;
  height: 23%;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(180deg, transparent 4%, color-mix(in srgb, var(--ember) 26%, transparent) 28%, color-mix(in srgb, var(--ember) 55%, transparent) 50%, color-mix(in srgb, var(--ember) 26%, transparent) 72%, transparent 96%);
  animation: sponsored-ribbon-weave-b 9s ease-in-out -4.5s infinite alternate;
  transform: rotate(9deg);
}

.sponsored-signal-motion[data-preset="ribbon"] span:last-child::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22%;
  width: 14%;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 226, 0.2) 50%, transparent);
  animation: sponsored-ribbon-sheen 7.5s cubic-bezier(0.45, 0, 0.55, 1) -2.5s infinite;
  transform: skewX(-24deg);
}

/* Ticker: a price line with gradient area fill drawing across the full
   width behind a leading glowing dot, with fine tick marks scrolling along
   the bottom rail and an up-tick flash as the line jumps. */
.sponsored-signal-motion[data-preset="ticker"]::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 14%;
  border-top: 1px solid var(--line-strong);
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 45%, transparent) 0 1px, transparent 1px 14px) 0 0 / 100% 34% no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 70%, transparent) 0 1px, transparent 1px 70px) 0 0 / 100% 60% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.025), transparent);
  /* 140px per loop = lcm of the 14px and 70px tick periods, so the scroll is seamless. */
  animation: sponsored-ticker-scroll 6s linear infinite;
}

.sponsored-signal-motion[data-preset="ticker"]::after {
  content: '';
  position: absolute;
  top: 14%;
  right: 0;
  bottom: 15%;
  left: 0;
  background: linear-gradient(90deg, transparent, #0c1110 12%, #0c1110);
  opacity: 0;
  animation: sponsored-ticker-wipe 11s linear infinite;
}

.sponsored-signal-motion[data-preset="ticker"] span:first-child {
  top: 18%;
  right: 0;
  bottom: 16%;
  left: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--green) 60%, transparent), color-mix(in srgb, var(--green) 18%, transparent) 42%, transparent 92%);
  clip-path: polygon(0 78%, 12% 60%, 24% 68%, 36% 42%, 48% 52%, 62% 30%, 74% 38%, 88% 16%, 100% 22%, 100% 100%, 0 100%);
  filter:
    drop-shadow(0 -1px 2px color-mix(in srgb, var(--green) 85%, white))
    drop-shadow(0 -3px 8px color-mix(in srgb, var(--green) 50%, transparent));
}

.sponsored-signal-motion[data-preset="ticker"] span:last-child {
  top: 32.5%;
  left: 100%;
  width: 4.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #eefce2;
  box-shadow:
    0 0 0.4rem #d8f2c8,
    0 0 0.9rem var(--green),
    0 0 1.7rem color-mix(in srgb, var(--green) 60%, transparent);
  animation: sponsored-ticker-dot 11s linear infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="ticker"] span:last-child::before {
  content: '';
  position: absolute;
  inset: -180%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--green) 45%, transparent), transparent 65%);
  opacity: 0;
  animation: sponsored-ticker-flash 11s linear infinite;
}

/* Chart: a centered staircase of six glowing-capped bars breathing over
   faint gridlines, with a dashed trend line drawing itself above. */
.sponsored-signal-motion[data-preset="chart"] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.2%;
  padding: 0 16% 28%;
}

.sponsored-signal-motion[data-preset="chart"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 71.4%, var(--line-strong) 72%, transparent 72.6%),
    repeating-linear-gradient(transparent 0 21px, rgba(255, 255, 255, 0.035) 21px 22px),
    radial-gradient(ellipse at 50% 70%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 62%);
  animation: sponsored-chart-ambient 12s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="chart"] span {
  position: relative;
  flex: 1 1 auto;
  max-width: 9%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.3), transparent 16%),
    linear-gradient(color-mix(in srgb, var(--signal) 80%, transparent), color-mix(in srgb, var(--signal) 22%, transparent));
  box-shadow: 0 0 0.8rem color-mix(in srgb, var(--signal) 22%, transparent);
  animation: sponsored-chart-grow 3.2s ease-in-out infinite alternate;
  transform-origin: bottom;
}

.sponsored-signal-motion[data-preset="chart"] span::before {
  content: '';
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 3px;
  background: color-mix(in srgb, var(--signal) 75%, white);
  box-shadow: 0 0 0.6rem color-mix(in srgb, var(--signal) 65%, transparent);
}

.sponsored-signal-motion[data-preset="chart"] span:nth-child(1) { height: 19%; }
.sponsored-signal-motion[data-preset="chart"] span:nth-child(2) { height: 26%; animation-delay: -0.4s; }
.sponsored-signal-motion[data-preset="chart"] span:nth-child(3) { height: 24%; animation-delay: -0.8s; }
.sponsored-signal-motion[data-preset="chart"] span:nth-child(4) { height: 37%; animation-delay: -1.2s; }
.sponsored-signal-motion[data-preset="chart"] span:nth-child(5) { height: 46%; animation-delay: -1.6s; }
.sponsored-signal-motion[data-preset="chart"] span:nth-child(6) { height: 58%; animation-delay: -2s; }

.sponsored-signal-motion[data-preset="chart"]::after {
  content: '';
  position: absolute;
  top: 52%;
  left: 17%;
  width: 66%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--green) 0 14px, transparent 14px 20px);
  box-shadow: 0 0 0.9rem color-mix(in srgb, var(--green) 40%, transparent);
  animation:
    sponsored-chart-draw 12s cubic-bezier(0.65, 0, 0.35, 1) infinite,
    sponsored-chart-dash 1.6s linear infinite;
  transform: rotate(-21deg) scaleX(1);
  transform-origin: left;
}

/* Orbit: two counter-rotating rings carrying comet-tailed moons around a
   blooming core, over a sparkling star background. */
.sponsored-signal-motion[data-preset="orbit"] {
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 62%);
}

.sponsored-signal-motion[data-preset="orbit"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 24%, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1px 1px at 22% 74%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 12%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 55% 88%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 8%, color-mix(in srgb, var(--blue) 80%, transparent), transparent 100%),
    radial-gradient(1px 1px at 80% 82%, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 34%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(1px 1px at 88% 64%, color-mix(in srgb, var(--signal) 70%, transparent), transparent 100%),
    radial-gradient(1px 1px at 6% 56%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 44% 40%, rgba(255, 255, 255, 0.35), transparent 100%);
  animation: sponsored-star-twinkle 9s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="orbit"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #eaf4fb, var(--blue) 55%, #33586e);
  box-shadow:
    0 0 0.8rem color-mix(in srgb, var(--blue) 80%, transparent),
    0 0 2rem color-mix(in srgb, var(--blue) 45%, transparent),
    0 0 3.4rem color-mix(in srgb, var(--blue) 20%, transparent);
  animation: sponsored-orbit-core 12s ease-in-out infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="orbit"] span:first-child {
  top: 50%;
  left: 50%;
  height: 68%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--signal) 55%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 1.2rem color-mix(in srgb, var(--signal) 8%, transparent);
  animation: sponsored-orbit-spin 10s linear infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="orbit"] span:first-child::before {
  content: '';
  position: absolute;
  top: -3%;
  left: 42%;
  width: 16%;
  height: 5.5%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--signal) 55%, transparent) 62%, #ffefcd 90%);
  box-shadow: 0.35rem 0 0.9rem color-mix(in srgb, var(--signal) 45%, transparent);
}

.sponsored-signal-motion[data-preset="orbit"] span:first-child::after {
  content: '';
  position: absolute;
  inset: -20%;
  border: 1px dashed color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius: 50%;
}

.sponsored-signal-motion[data-preset="orbit"] span:last-child {
  top: 50%;
  left: 50%;
  height: 40%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--ember) 55%, transparent);
  border-radius: 50%;
  animation: sponsored-orbit-spin-counter 6.4s linear infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="orbit"] span:last-child::before {
  content: '';
  position: absolute;
  top: -4.5%;
  left: 40%;
  width: 20%;
  height: 8%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd9cc 10%, color-mix(in srgb, var(--ember) 55%, transparent) 38%, transparent);
  box-shadow: -0.35rem 0 0.9rem color-mix(in srgb, var(--ember) 45%, transparent);
}

/* Neural: a constellation of fourteen nodes across depth layers with
   visible link lines, and light pulses traveling edge-to-edge that bloom
   on arrival, over a faint blue wash. */
.sponsored-signal-motion[data-preset="neural"] {
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 68%);
}

.sponsored-signal-motion[data-preset="neural"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 72%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 68%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 66%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom left, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 62%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 54%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 58%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 48%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 46%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 48%, transparent) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--blue) 62%, transparent) 50%, transparent calc(50% + 1px));
  background-position: 19.4% 25.6%, 73.5% 65.6%, 62.5% 27.5%, 23.1% 46.7%, 60% 13.3%, 76.9% 73.8%, 32.6% 85.7%, 91.7% 50%, 10.3% 78.3%, 33.3% 34.1%;
  background-repeat: no-repeat;
  background-size: 38% 22%, 32% 36%, 20% 20%, 35% 10%, 25% 10%, 22% 16%, 8% 16%, 4% 20%, 22% 8%, 25% 12%;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blue) 40%, transparent));
  animation: sponsored-neural-shimmer 12s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="neural"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--blue) 95%, white) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--signal) 85%, white) 40%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 40%, transparent 45%),
    radial-gradient(circle, #f3fbff 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--blue) 90%, white) 40%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--blue) 80%, white) 40%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--signal) 90%, transparent) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--blue) 85%, transparent) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--blue) 80%, transparent) 40%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.65) 40%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 40%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 40%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.65) 40%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--ember) 80%, transparent) 40%, transparent 45%),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--blue) 70%, transparent) 40%, transparent 45%),
    radial-gradient(circle, color-mix(in srgb, var(--blue) 34%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--blue) 28%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--signal) 26%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--signal) 22%, transparent), transparent 70%);
  background-position: 12% 20%, 45% 12%, 70% 22%, 25% 30%, 50% 42%, 88% 40%, 15% 52%, 60% 62%, 30% 72%, 82% 78%, 38% 88%, 92% 60%, 8% 80%, 65% 88%, 46% 36%, 55% 38%, 47% 47%, 78% 73%, 86% 73%, 81% 84%, 50% 42%, 60% 62%, 70% 22%, 82% 78%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 5px 5px, 10px 10px, 5px 5px, 12px 12px, 6px 6px, 5px 5px, 11px 11px, 6px 6px, 10px 10px, 5px 5px, 5px 5px, 4px 4px, 5px 5px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 40px 40px, 34px 34px, 28px 28px, 28px 28px;
  animation: sponsored-neural-nodes 8s ease-in-out infinite;
}

.sponsored-signal-motion[data-preset="neural"] span:first-child {
  top: 42%;
  left: 50%;
  width: 3.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff8e8;
  box-shadow:
    0 0 0.4rem #ffedc2,
    0 0 0.9rem var(--signal),
    0 0 1.8rem color-mix(in srgb, var(--signal) 55%, transparent);
  animation: sponsored-neural-travel 7s linear infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="neural"] span:first-child::before {
  content: '';
  position: absolute;
  inset: -170%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--signal) 48%, transparent), transparent 68%);
}

.sponsored-signal-motion[data-preset="neural"] span:last-child {
  top: 52%;
  left: 15%;
  width: 3.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f0f9ff;
  box-shadow:
    0 0 0.4rem #d3ecff,
    0 0 0.9rem var(--blue),
    0 0 1.8rem color-mix(in srgb, var(--blue) 55%, transparent);
  animation: sponsored-neural-travel-b 9.5s linear -4s infinite;
  transform: translate(-50%, -50%);
}

.sponsored-signal-motion[data-preset="neural"] span:last-child::before {
  content: '';
  position: absolute;
  inset: -170%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 48%, transparent), transparent 68%);
}

.sponsored-signal-card-copy {
  align-self: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

#sponsored-signal-eyebrow {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--blue);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sponsored-signal-card-copy h2 {
  margin: 0;
  color: var(--text-color);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 0.96;
  text-transform: uppercase;
}

.sponsored-signal-card-copy p {
  max-width: 48ch;
  margin: 1rem 0 0;
  color: var(--text-color-alt);
  font-size: 0.72rem;
  line-height: 1.7;
}

#sponsored-signal-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--signal) 65%, var(--line));
  color: #15130e;
  background: var(--signal);
  font-size: 0.54rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

#sponsored-signal-cta.hidden {
  display: none;
}

#sponsored-signal-cta:hover {
  color: #15130e;
  background: #f2ce89;
}

.sponsored-signal-timeline {
  display: grid;
  grid-template-columns: repeat(var(--signal-card-count, 1), minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.65rem 1rem 0;
  background: #111715;
}

.sponsored-signal-timeline button {
  position: relative;
  height: 0.34rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
}

.sponsored-signal-timeline button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.sponsored-signal-timeline button span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--signal);
}

.sponsored-signal-timeline button.is-qualified span {
  width: 100%;
  background: var(--green);
}

.sponsored-signal-timeline button.is-current.is-playing span {
  animation: sponsored-slide-progress var(--signal-slide-duration, 6000ms) linear forwards;
}

.sponsored-signal-timeline.is-paused button.is-current span {
  animation-play-state: paused;
}

.sponsored-signal-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: #111715;
}

.sponsored-signal-controls > div {
  display: flex;
  gap: 0.4rem;
}

.sponsored-signal-controls button,
.sponsored-signal-reward button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.48rem 0.7rem;
  border: 1px solid var(--line-strong);
  color: var(--text-color-alt);
  background: rgba(255, 255, 255, 0.018);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sponsored-signal-controls button:hover,
.sponsored-signal-reward button:hover {
  color: var(--text-color);
  border-color: var(--signal);
  background: var(--signal-soft);
}

.sponsored-signal-controls button .icon {
  width: 0.82rem;
  height: 0.82rem;
}

#sponsored-signal-card-count {
  color: var(--text-color-muted);
  font-size: 0.5rem;
  white-space: nowrap;
}

.sponsored-signal-reward {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--signal) 8%, transparent), transparent 50%),
    #171914;
}

.sponsored-signal-reward > div:first-child {
  display: grid;
  gap: 0.2rem;
}

.sponsored-signal-reward > div:first-child span {
  color: var(--signal);
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sponsored-signal-reward > div:first-child strong {
  color: var(--text-color-alt);
  font-size: 0.58rem;
  font-weight: 500;
}

.sponsored-signal-reward-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.sponsored-signal-reward-options button {
  border-color: color-mix(in srgb, var(--signal) 48%, var(--line));
  color: var(--signal);
}

.sponsored-signal-reward #return-from-sponsored-signal {
  color: #15130e;
  border-color: var(--signal);
  background: var(--signal);
}

.sponsored-signal-reward #return-from-sponsored-signal.hidden {
  display: none;
}

.sponsored-signal-status {
  min-height: 1.45rem;
  margin: 0;
  padding: 0.35rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--text-color-muted);
  background: #0d1210;
  font-size: 0.5rem;
}

@keyframes sponsored-gate-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes sponsored-gate-spin-counter {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes sponsored-gate-ambient {
  50% {
    opacity: 0.72;
  }
}

@keyframes sponsored-gate-shimmer {
  0% {
    opacity: 0;
    transform: translateX(-330%) rotate(24deg);
  }

  14%,
  52% {
    opacity: 1;
  }

  68%,
  100% {
    opacity: 0;
    transform: translateX(300%) rotate(24deg);
  }
}

@keyframes sponsored-gate-core {
  50% {
    box-shadow:
      0 0 0.9rem color-mix(in srgb, var(--signal) 95%, transparent),
      0 0 2.4rem color-mix(in srgb, var(--signal) 60%, transparent),
      0 0 4rem color-mix(in srgb, var(--signal) 30%, transparent);
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes sponsored-gate-halo {
  50% {
    opacity: 0.5;
    transform: scale(1.18);
  }
}

@keyframes sponsored-wave {
  from {
    opacity: 0.5;
    transform: scaleY(0.3);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes sponsored-waveform-ambient {
  50% {
    opacity: 0.7;
  }
}

@keyframes sponsored-waveform-sheen {
  0% {
    opacity: 0;
    transform: translateX(-40%);
  }

  15%,
  60% {
    opacity: 1;
  }

  78%,
  100% {
    opacity: 0;
    transform: translateX(520%);
  }
}

@keyframes sponsored-target-pulse {
  50% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(0.98);
  }
}

@keyframes sponsored-target-ticks {
  50% {
    opacity: 0.45;
  }
}

@keyframes sponsored-target-sweep {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes sponsored-target-ping {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.3);
  }

  70%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.4);
  }
}

@keyframes sponsored-target-lock {
  50% {
    box-shadow:
      0 0 0.9rem color-mix(in srgb, var(--signal) 95%, transparent),
      0 0 2rem color-mix(in srgb, var(--signal) 55%, transparent);
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes sponsored-starfield-nebula {
  50% {
    opacity: 0.65;
  }
}

@keyframes sponsored-star-drift-far {
  from {
    transform: translate(-3%, 1.8%);
  }

  to {
    transform: translate(3%, -1.8%);
  }
}

@keyframes sponsored-star-drift-mid {
  from {
    transform: translate(5.5%, -3.2%);
  }

  to {
    transform: translate(-5.5%, 3.2%);
  }
}

@keyframes sponsored-star-drift-near {
  from {
    transform: translate(-8%, 4.5%) scale(1);
  }

  to {
    transform: translate(8%, -4.5%) scale(1.12);
  }
}

@keyframes sponsored-star-glint {
  0%,
  100% {
    opacity: 0.55;
  }

  20% {
    opacity: 1;
  }

  45% {
    opacity: 0.6;
  }

  70% {
    opacity: 0.95;
  }
}

@keyframes sponsored-star-twinkle {
  0%,
  100% {
    opacity: 0.25;
  }

  8% {
    opacity: 1;
  }

  16% {
    opacity: 0.4;
  }

  42% {
    opacity: 0.85;
  }

  55% {
    opacity: 0.3;
  }

  74% {
    opacity: 1;
  }

  86% {
    opacity: 0.35;
  }
}

@keyframes sponsored-pixel-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  12%,
  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(600%);
  }
}

@keyframes sponsored-pixel-step-a {
  0%,
  100% {
    background-position: 12.5% 25%, 37.5% 62.5%, 62.5% 12.5%, 75% 50%, 25% 87.5%, 87.5% 75%;
  }

  25% {
    background-position: 25% 25%, 37.5% 50%, 62.5% 25%, 87.5% 50%, 25% 75%, 87.5% 87.5%;
  }

  50% {
    background-position: 25% 37.5%, 50% 50%, 75% 25%, 87.5% 62.5%, 37.5% 75%, 75% 87.5%;
  }

  75% {
    background-position: 12.5% 37.5%, 50% 62.5%, 75% 12.5%, 75% 62.5%, 37.5% 87.5%, 87.5% 62.5%;
  }
}

@keyframes sponsored-pixel-step-b {
  0%,
  100% {
    background-position: 50% 25%, 12.5% 50%, 87.5% 37.5%, 62.5% 75%, 37.5% 12.5%;
  }

  25% {
    background-position: 50% 37.5%, 25% 50%, 87.5% 25%, 62.5% 62.5%, 37.5% 25%;
  }

  50% {
    background-position: 62.5% 37.5%, 25% 62.5%, 75% 37.5%, 50% 62.5%, 25% 12.5%;
  }

  75% {
    background-position: 62.5% 50%, 12.5% 62.5%, 75% 50%, 50% 75%, 25% 25%;
  }
}

@keyframes sponsored-pixel-blink {
  0%,
  100% {
    opacity: 1;
  }

  42% {
    opacity: 0.12;
  }

  68% {
    opacity: 1;
  }
}

@keyframes sponsored-glitch-band {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  10%,
  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(760%);
  }
}

@keyframes sponsored-glitch-shift {
  0%,
  76% {
    opacity: 1;
    transform: translateX(0);
  }

  78% {
    opacity: 0.72;
    transform: translateX(1.8%);
  }

  82% {
    opacity: 0.85;
    transform: translateX(-1.4%);
  }

  86%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sponsored-terminal-rain {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 0 0, 0 448px;
  }
}

@keyframes sponsored-terminal-rain-b {
  from {
    background-position: 14px 0, 0 0;
  }

  to {
    background-position: 14px 0, 0 352px;
  }
}

@keyframes sponsored-terminal-streak {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  8%,
  70% {
    opacity: 1;
  }

  80%,
  100% {
    opacity: 0;
    transform: translateY(560%);
  }
}

@keyframes sponsored-terminal-blink {
  50% {
    opacity: 0.12;
  }
}

@keyframes sponsored-grid-roll {
  to {
    background-position: 0 44px, 0 0;
  }
}

@keyframes sponsored-grid-pulse {
  50% {
    opacity: 0.5;
  }
}

@keyframes sponsored-grid-sun {
  50% {
    box-shadow: 0 0 3.4rem color-mix(in srgb, var(--ember) 42%, transparent);
    transform: translateX(-50%) scale(1.04);
  }
}

@keyframes sponsored-grid-halo {
  50% {
    opacity: 0.55;
  }
}

@keyframes sponsored-grid-race {
  0% {
    top: 100%;
    opacity: 0;
  }

  10%,
  58% {
    opacity: 1;
  }

  70%,
  100% {
    top: -6%;
    opacity: 0;
  }
}

@keyframes sponsored-grid-race-b {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }

  8%,
  46% {
    opacity: 0.9;
  }

  56%,
  100% {
    opacity: 0;
    transform: translate(-690%, -1250%) scale(0.12);
  }
}

@keyframes sponsored-circuit-pulse {
  0% {
    top: 30%;
    left: 15%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  38% {
    top: 30%;
    left: 60%;
  }

  72% {
    top: 70%;
    left: 60%;
  }

  94% {
    top: 70%;
    left: 85%;
    opacity: 1;
  }

  100% {
    top: 70%;
    left: 85%;
    opacity: 0;
  }
}

@keyframes sponsored-circuit-pulse-b {
  0% {
    top: 84%;
    left: 30%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  30% {
    top: 52%;
    left: 30%;
  }

  68% {
    top: 52%;
    left: 72%;
  }

  94% {
    top: 20%;
    left: 72%;
    opacity: 1;
  }

  100% {
    top: 20%;
    left: 72%;
    opacity: 0;
  }
}

@keyframes sponsored-circuit-pulse-c {
  0% {
    top: 16%;
    left: 90%;
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  58% {
    top: 16%;
    left: 52%;
  }

  92% {
    top: 40%;
    left: 52%;
    opacity: 1;
  }

  100% {
    top: 40%;
    left: 52%;
    opacity: 0;
  }
}

@keyframes sponsored-beam-haze {
  50% {
    opacity: 0.7;
  }
}

@keyframes sponsored-beam-dust {
  0%,
  100% {
    opacity: 0.35;
  }

  30% {
    opacity: 0.9;
  }

  62% {
    opacity: 0.5;
  }

  80% {
    opacity: 0.85;
  }
}

/* The two beam phases interleave: beam A is on screen from 90% through
   58% of the next cycle (wrapping the loop seam at full opacity), beam B
   from 36% to 100%, so at least one beam is always visible. */
@keyframes sponsored-beam-sweep {
  0% {
    opacity: 1;
    transform: translateX(-130%) skewX(-18deg);
  }

  50% {
    opacity: 1;
    transform: translateX(240%) skewX(-18deg);
  }

  58% {
    opacity: 0;
    transform: translateX(300%) skewX(-18deg);
  }

  90% {
    opacity: 0;
    transform: translateX(-170%) skewX(-18deg);
  }

  100% {
    opacity: 1;
    transform: translateX(-130%) skewX(-18deg);
  }
}

@keyframes sponsored-beam-sweep-b {
  0%,
  36% {
    opacity: 0;
    transform: translateX(280%) skewX(14deg);
  }

  44% {
    opacity: 0.85;
    transform: translateX(200%) skewX(14deg);
  }

  96% {
    opacity: 0.85;
    transform: translateX(-360%) skewX(14deg);
  }

  100% {
    opacity: 0;
    transform: translateX(-400%) skewX(14deg);
  }
}

@keyframes sponsored-stack-lift {
  0%,
  90%,
  100% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(-42%);
  }

  32% {
    transform: translateY(-30%);
  }

  58% {
    transform: translateY(-34%);
  }

  80% {
    transform: translateY(4%);
  }
}

@keyframes sponsored-stack-edge {
  50% {
    opacity: 0.4;
  }
}

@keyframes sponsored-equalizer-ambient {
  50% {
    opacity: 0.6;
  }
}

@keyframes sponsored-equalizer-bounce {
  from {
    opacity: 0.6;
    transform: scaleY(0.25);
  }

  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes sponsored-ribbon-ambient {
  50% {
    opacity: 0.65;
  }
}

@keyframes sponsored-ribbon-weave {
  from {
    transform: rotate(-14deg) translateY(-4%);
  }

  to {
    transform: rotate(-9deg) translateY(5%);
  }
}

@keyframes sponsored-ribbon-weave-b {
  from {
    transform: rotate(11deg) translateY(4%);
  }

  to {
    transform: rotate(6deg) translateY(-5%);
  }
}

@keyframes sponsored-ribbon-sheen {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-24deg);
  }

  10%,
  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(880%) skewX(-24deg);
  }
}

@keyframes sponsored-ticker-scroll {
  to {
    background-position: -140px 0, -140px 0, 0 0;
  }
}

@keyframes sponsored-ticker-wipe {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  66% {
    opacity: 1;
    transform: translateX(102%);
  }

  70% {
    opacity: 0;
  }

  94%,
  97% {
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sponsored-ticker-dot {
  0% {
    top: 69.5%;
    left: 0%;
    opacity: 0;
  }

  3% {
    opacity: 1;
  }

  7.9% {
    top: 57.6%;
    left: 12%;
  }

  15.8% {
    top: 62.9%;
    left: 24%;
  }

  23.8% {
    top: 45.7%;
    left: 36%;
  }

  31.7% {
    top: 52.3%;
    left: 48%;
  }

  40.9% {
    top: 37.8%;
    left: 62%;
  }

  48.8% {
    top: 43.1%;
    left: 74%;
  }

  58.1% {
    top: 28.6%;
    left: 88%;
  }

  66%,
  90% {
    top: 32.5%;
    left: 100%;
    opacity: 1;
  }

  93% {
    top: 32.5%;
    left: 100%;
    opacity: 0;
  }

  94%,
  100% {
    top: 69.5%;
    left: 0%;
    opacity: 0;
  }
}

@keyframes sponsored-ticker-flash {
  0%,
  38% {
    opacity: 0;
    transform: scale(0.4);
  }

  42% {
    opacity: 0.85;
    transform: scale(1.1);
  }

  47%,
  56% {
    opacity: 0;
    transform: scale(0.4);
  }

  60% {
    opacity: 0.85;
    transform: scale(1.1);
  }

  65%,
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

@keyframes sponsored-chart-ambient {
  50% {
    opacity: 0.7;
  }
}

@keyframes sponsored-chart-grow {
  from {
    transform: scaleY(0.9);
  }

  to {
    transform: scaleY(1.05);
  }
}

@keyframes sponsored-chart-draw {
  0% {
    opacity: 1;
    transform: rotate(-21deg) scaleX(0);
  }

  48% {
    transform: rotate(-21deg) scaleX(1);
  }

  88% {
    opacity: 1;
    transform: rotate(-21deg) scaleX(1);
  }

  96%,
  100% {
    opacity: 0;
    transform: rotate(-21deg) scaleX(1);
  }
}

@keyframes sponsored-chart-dash {
  to {
    background-position: 20px 0;
  }
}

@keyframes sponsored-orbit-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes sponsored-orbit-spin-counter {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes sponsored-orbit-core {
  50% {
    box-shadow:
      0 0 1rem color-mix(in srgb, var(--blue) 90%, transparent),
      0 0 2.6rem color-mix(in srgb, var(--blue) 55%, transparent),
      0 0 4.2rem color-mix(in srgb, var(--blue) 26%, transparent);
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes sponsored-neural-shimmer {
  50% {
    opacity: 0.6;
  }
}

@keyframes sponsored-neural-nodes {
  50% {
    opacity: 0.78;
  }
}

@keyframes sponsored-neural-travel {
  0% {
    top: 20%;
    left: 12%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  42% {
    top: 42%;
    left: 50%;
  }

  84% {
    top: 78%;
    left: 82%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  90% {
    top: 78%;
    left: 82%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.8);
  }

  100% {
    top: 78%;
    left: 82%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes sponsored-neural-travel-b {
  0% {
    top: 22%;
    left: 70%;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  38% {
    top: 42%;
    left: 50%;
  }

  80% {
    top: 52%;
    left: 15%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  87% {
    top: 52%;
    left: 15%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.8);
  }

  100% {
    top: 52%;
    left: 15%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Reduced motion: every preset composes a complete static scene without its
   animations, so freezing them here (on top of the global reset.css rule)
   leaves an attractive still frame. */
@media (prefers-reduced-motion: reduce) {
  .sponsored-signal-motion,
  .sponsored-signal-motion::before,
  .sponsored-signal-motion::after,
  .sponsored-signal-motion span,
  .sponsored-signal-motion span::before,
  .sponsored-signal-motion span::after {
    animation: none !important;
  }
}

@keyframes sponsored-slide-progress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .sponsored-signal-offer {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sponsored-signal-offer-actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
  }

  .sponsored-signal-card {
    grid-template-columns: 1fr;
  }

  .sponsored-signal-visual {
    min-height: 220px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sponsored-signal-visual img,
  .sponsored-signal-visual video {
    min-height: 220px;
    max-height: 250px;
  }

  .sponsored-signal-card-copy {
    padding: 1.5rem;
  }
}

@media (max-width: 520px) {
  .sponsored-signal-modal {
    align-items: start;
    padding: 0;
  }

  .sponsored-signal-pause-strip,
  .sponsored-signal-controls,
  .sponsored-signal-reward {
    align-items: flex-start;
    flex-direction: column;
  }

  .sponsored-signal-pause-strip {
    display: grid;
  }

  .sponsored-signal-controls > div {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .sponsored-signal-controls button {
    min-width: 0;
    padding: 0.45rem 0.3rem;
  }

  .sponsored-signal-reward {
    display: flex;
  }

  .sponsored-signal-reward-options {
    width: 100%;
    justify-content: stretch;
  }

  .sponsored-signal-reward-options button,
  .sponsored-signal-reward #return-from-sponsored-signal {
    flex: 1;
  }
}