/* Two in-flow placements. Keep the copy legible over any sponsor footage. */
.fly-ad {
  --ad-ink: #e3fa85;
  position: relative;
  isolation: isolate;
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid #725087;
  border-radius: 13px;
  background: #201333;
  color: #fff;
  text-align: left;
  color-scheme: dark;
}
.fly-ad-link, .fly-ad-link:is(:hover, :focus-visible, :visited) {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 118px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  text-decoration: none;
}
.fly-ad-link:focus-visible, .fly-ad-play:focus-visible {
  outline: 3px solid var(--ad-ink);
  outline-offset: -4px;
}
.fly-ad-art, .fly-ad-video, .fly-ad-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.fly-ad-art, .fly-ad-video {
  display: block;
  object-fit: cover;
  object-position: 77% 55%;
}
.fly-ad-video { opacity: 0; }
.fly-ad-upper .fly-ad-art { object-position: 90% 15%; }
.fly-ad.has-frame .fly-ad-video { opacity: 1; }
.fly-ad-glass {
  background: linear-gradient(95deg, #1e0e34 2%, #241338e8 31%, #241340a3 56%, #29143e05 85%);
}
.fly-ad-glass::after {
  content: "";
  position: absolute;
  inset: 0 4% 0 auto;
  width: 6%;
  min-width: 23px;
  border-inline: 1px solid #ffffff4d;
  transform: skewX(-27deg);
  background: #f1d7ff0b;
}
.fly-ad-copy { position: relative; display: grid; justify-items: start; gap: 5px; padding: 17px clamp(16px, 3vw, 34px); max-width: 75%; }
.fly-ad-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ad-ink);
  font: 750 10px/1.2 var(--font);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.fly-ad-label i { display: block; width: 17px; height: 4px; background: repeating-linear-gradient(120deg, var(--ad-ink) 0 3px, transparent 3.4px 5px); }
.fly-ad-title {
  display: block;
  color: #fff;
  font: 800 clamp(20px, 2.3vw, 30px)/1.14 var(--font-head);
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.fly-ad-action { display: inline-flex; align-items: center; gap: 5px; color: var(--ad-ink); font: 700 12px/1.35 var(--font); }
.fly-ad-action svg { width: 13px; height: 13px; }
.fly-ad-link:hover .fly-ad-action { text-decoration: underline; text-underline-offset: 3px; }
.groups > .fly-ad { margin: 12px 0; }
.fly-ad-lower { --ad-ink: #dbd2ff; margin: 17px 0; border-radius: 9px; border-color: #675888; background: #191a2b; }
.fly-ad-lower .fly-ad-link { min-height: 94px; }
.fly-ad-lower .fly-ad-art, .fly-ad-lower .fly-ad-house-video {
  left: auto;
  right: clamp(20px, 8%, 120px);
  width: clamp(135px, 27%, 230px);
  object-fit: contain;
  object-position: center;
  mask-image: linear-gradient(90deg, transparent, black 22%, black 78%, transparent);
}
.fly-ad-lower .fly-ad-glass { background: linear-gradient(94deg, #201c35 5%, #28203be8 34%, #2422398c 57%, transparent 86%); }
.fly-ad-lower .fly-ad-glass::after { inset-inline-end: 6%; border-color: #d9eaa34d; background: #ddeea60c; width: 9%; }
.fly-ad-lower .fly-ad-copy { gap: 4px; }
.fly-ad-lower .fly-ad-title { font-size: clamp(18px, 2vw, 25px); }
.fly-ad-play {
  position: absolute;
  inset: auto 8px 8px auto;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: #1b1228dc;
  color: #fff;
  cursor: pointer;
}
.fly-ad-play[hidden], .fly-ad-pause-icon, .fly-ad.is-playing .fly-ad-play-icon { display: none; }
.fly-ad.is-playing .fly-ad-pause-icon { display: block; }
@media (max-width: 600px) {
  .fly-ad { margin: 11px 0; border-radius: 10px; }
  .fly-ad-link { min-height: 104px; }
  .fly-ad-copy { box-sizing: border-box; max-width: 77%; gap: 5px; padding: 13px 15px; }
  .fly-ad-title { font-size: clamp(18px, 5vw, 23px); }
  .fly-ad-glass { background: linear-gradient(92deg, #201133f5 8%, #211334dd 46%, #28153482 71%, transparent); }
  .fly-ad-lower .fly-ad-link { min-height: 90px; }
  .fly-ad-lower .fly-ad-copy { max-width: 66%; }
  .fly-ad-lower .fly-ad-glass { background: linear-gradient(93deg, #201e33fa 11%, #25203be3 45%, #2222346b 78%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .fly-ad.in-view:not(.has-video) .fly-ad-art { animation: fly-ad-rise 4.2s ease-out both; }
  .fly-ad.in-view:not(.has-video) .fly-ad-glass::after { animation: fly-ad-flare 3.3s ease-out both; }
}
@keyframes fly-ad-rise { from { transform: scale(1.055); } to { transform: scale(1); } }
@keyframes fly-ad-flare { from { transform: translateX(-72%) skewX(-27deg); opacity: .35; } to { transform: translateX(0) skewX(-27deg); opacity: 1; } }