/* Final direction based on the annotated Open Caption screenshot. */

.responsive-stage {
  position:absolute;
  inset:0;
}

@media (min-width:1601px) {
  .scaled-desktop .responsive-stage {
    inset:auto;
    top:0;
    left:0;
    width:1536px;
    height:864px;
    transform:scale(var(--desktop-stage-scale,1));
    transform-origin:top left;
  }

  .scaled-desktop .hero-offer {
    margin-left:var(--desktop-visual-shift,0px);
  }

  .scaled-desktop .offer-field {
    transform:none;
  }

  /*
   * Keep every cloud on its original vertical track while progressively
   * spreading the secondary field into the extra width of wide screens.
   */
  .scaled-desktop.final-target .offer.slot-1 {
    left:calc(39% + var(--desktop-cloud-spread-20,0px));
  }
  .scaled-desktop.final-target .offer.slot-2 {
    left:28%;
  }
  .scaled-desktop.final-target .offer.slot-3 {
    left:calc(65% + var(--desktop-cloud-spread-70,0px));
  }
  .scaled-desktop.final-target .offer.slot-4 {
    left:calc(38% + var(--desktop-cloud-spread-18,0px));
  }
  .scaled-desktop.final-target .offer.slot-5 {
    left:calc(50% + var(--desktop-cloud-spread-45,0px));
  }
  .scaled-desktop.final-target .offer.slot-6 {
    left:calc(66% + var(--desktop-cloud-spread-72,0px));
  }
  .scaled-desktop.final-target .offer.slot-7 {
    left:calc(79% + var(--desktop-cloud-spread-100,0px));
  }
  .scaled-desktop.final-target .offer.slot-8 {
    right:calc(0px - var(--desktop-cloud-spread-100,0px));
  }
}

@media (min-width:901px) {
  /* Larger main-partner button below the copy. */
  .final-target .focus-card {
    top:clamp(550px,69vh,596px);
    width:clamp(500px,34vw,535px);
    height:140px;
    min-height:140px;
    grid-template-columns:126px 1fr 160px;
    gap:14px;
    padding:15px;
    border-radius:23px;
  }

  .final-target .focus-logo {
    width:126px;
    height:96px;
    padding:12px 10px;
    border-radius:16px;
  }

  .final-target .focus-logo img {
    width:108px;
    max-height:48px;
  }

  .final-target .focus-copy small { font-size:9px; }
  .final-target .focus-copy b { font-size:22px; }
  .final-target .focus-copy i { margin-top:7px;font-size:10px; }

  .final-target .focus-card > .focus-action {
    min-height:110px;
    padding:8px 12px;
    font-size:18px;
    line-height:.92;
  }

  /*
   * The two lower-left V5 clouds are moved into the two free lower slots
   * marked on the screenshot. Every other cloud keeps its V5 coordinate.
   */
  .final-target .offer.one {
    left:39%;
    top:235px;
    width:170px;
    height:158px;
    transform:rotate(-6deg);
  }

  .final-target .offer.apex {
    left:65%;
    top:235px;
  }
}

@media (min-width:901px) and (max-height:800px) {
  .final-target .offer-field {
    top:calc(100vh - 453px);
  }

  .final-target .focus-card {
    top:auto;
    bottom:78px;
  }

  .scaled-desktop.final-target .offer-field {
    top:372px;
  }

  .scaled-desktop.final-target .focus-card {
    top:596px;
    bottom:auto;
  }
}

@media (max-width:900px) {
  /* Keep the headline high, above the open palm. */
  .clarified.mobile-3.final-target .copy {
    inset:0;
    top:0;
    left:0;
    right:0;
    width:auto;
    padding:0;
    pointer-events:none;
  }

  .final-target .copy h1 {
    position:absolute;
    left:15px;
    top:76px;
    width:150px;
    max-width:150px;
    margin:0;
    font-size:23px;
    line-height:.9;
  }

  .final-target .copy h1 strong { margin-top:3px; }

  .final-target .copy h1 em {
    color:#d8ba6d;
    opacity:1;
    background:none;
    -webkit-background-clip:border-box;
    background-clip:border-box;
    -webkit-text-fill-color:#d8ba6d;
    filter:none;
  }

  /* Seasonal label and the current-offer copy become a second block lower down. */
  .final-target .eyebrow {
    position:absolute;
    left:15px;
    top:322px;
    width:210px;
    margin:0;
    font-size:7px;
  }

  .clarified.mobile-3.final-target .lead {
    position:absolute;
    left:15px;
    top:346px;
    width:284px;
    max-width:284px;
    margin:0;
    font-size:10.2px;
    line-height:1.38;
  }

  /* Bonus fan starts only below the seasonal text. */
  .final-target .hero-offer {
    left:50% !important;
    top:63.5% !important;
    width:178px !important;
    height:172px !important;
  }

  .final-target .offer.one {
    left:-8% !important;
    right:auto !important;
    top:56% !important;
  }
  .final-target .offer.apex {
    left:7% !important;
    right:auto !important;
    top:53% !important;
  }
  .final-target .offer.norm {
    left:4% !important;
    right:auto !important;
    top:61% !important;
  }
  .final-target .offer.riobet {
    left:auto !important;
    right:4% !important;
    top:61% !important;
  }
  .final-target .offer.mad {
    left:auto !important;
    right:7% !important;
    top:53% !important;
  }
  .final-target .offer.seven {
    left:auto !important;
    right:-8% !important;
    top:56% !important;
  }

  /* Larger main-partner button at the bottom. */
  .final-target .focus-card {
    left:10px;
    right:10px;
    bottom:88px;
    width:auto;
    height:96px;
    min-height:96px;
    grid-template-columns:112px 1fr 122px;
    gap:9px;
    padding:10px;
    border-radius:16px;
  }

  .final-target .focus-logo {
    width:116px;
    height:60px;
    padding:8px 10px;
    border-radius:12px;
  }

  .final-target .focus-logo img {
    width:98px;
    max-height:39px;
  }

  .final-target .focus-copy small { font-size:7px; }
  .final-target .focus-copy b { font-size:15px; }
  .final-target .focus-copy i { margin-top:4px;font-size:7px; }

  .final-target .focus-card > .focus-action {
    min-height:66px;
    padding:6px 8px;
    font-size:14px;
    line-height:.94;
  }
}

.final-target .focus-card > .focus-action span {
  display:block;
}

.final-target .focus-card > .focus-action {
  transform-origin:center;
  animation:focus-action-pulse 1.55s ease-in-out infinite;
}

@keyframes focus-action-pulse {
  0%,100% {
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,225,145,0),0 8px 22px rgba(0,0,0,.16);
  }
  48% {
    transform:scale(1.065);
    box-shadow:0 0 0 9px rgba(255,225,145,.1),0 12px 32px rgba(247,164,193,.34);
  }
}

/* Ninth partner keeps the full desktop set at the configured maximum. */
@media (min-width:901px) {
  /*
   * Desktop positions are slot-based, not brand-based. Admin sorting and
   * smaller partner sets therefore keep the same balanced composition.
   */
  .final-target .offer.slot-1 {
    left:39%;
    top:235px;
    width:clamp(158px,12.6vw,194px);
    height:clamp(146px,11.7vw,180px);
    transform:rotate(-6deg);
  }
  .final-target .offer.slot-2 {
    left:28%;
    top:112px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:rotate(4deg);
  }
  .final-target .offer.slot-3 {
    left:65%;
    top:235px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:none;
  }
  .final-target .offer.slot-4 {
    left:38%;
    top:42px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:rotate(-3deg);
  }
  .final-target .offer.slot-5 {
    left:50%;
    top:182px;
    width:clamp(158px,12.6vw,194px);
    height:clamp(146px,11.7vw,180px);
    transform:none;
  }
  .final-target .offer.slot-6 {
    left:66%;
    top:64px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:rotate(3deg);
  }
  .final-target .offer.slot-7 {
    left:79%;
    top:183px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:none;
  }
  .final-target .offer.slot-8 {
    left:auto;
    right:0;
    top:57px;
    width:clamp(158px,12.6vw,194px);
    height:clamp(146px,11.7vw,180px);
    transform:rotate(6deg);
  }

  .final-target .offer.joy:not([class*="slot-"]) {
    left:28%;
    top:112px;
    width:clamp(118px,9.6vw,148px);
    height:clamp(110px,9vw,138px);
    transform:rotate(4deg);
  }

  .dynamic-partners .partner-cloud.is-current-partner {
    filter:saturate(1.12) brightness(1.07);
  }

  /*
   * Every desktop cloud has its own orbit, duration and phase. The stage
   * therefore breathes as separate objects instead of moving as one layer.
   */
  .final-target .offer[class*="slot-"] {
    animation-name:independent-cloud-drift;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    animation-direction:alternate;
  }
  .final-target .offer.slot-1 {
    --drift-mid-x:9px;--drift-mid-y:-8px;--drift-end-x:-5px;--drift-end-y:-14px;
    animation-duration:6.4s;animation-delay:-1.1s;
  }
  .final-target .offer.slot-2 {
    --drift-mid-x:-11px;--drift-mid-y:5px;--drift-end-x:6px;--drift-end-y:-9px;
    animation-duration:7.15s;animation-delay:-3.6s;
  }
  .final-target .offer.slot-3 {
    --drift-mid-x:5px;--drift-mid-y:11px;--drift-end-x:13px;--drift-end-y:-4px;
    animation-duration:5.75s;animation-delay:-2.2s;
  }
  .final-target .offer.slot-4 {
    --drift-mid-x:-7px;--drift-mid-y:-12px;--drift-end-x:-14px;--drift-end-y:3px;
    animation-duration:6.85s;animation-delay:-4.4s;
  }
  .final-target .offer.slot-5 {
    --drift-mid-x:13px;--drift-mid-y:3px;--drift-end-x:4px;--drift-end-y:-12px;
    animation-duration:7.6s;animation-delay:-.7s;
  }
  .final-target .offer.slot-6 {
    --drift-mid-x:-5px;--drift-mid-y:12px;--drift-end-x:10px;--drift-end-y:6px;
    animation-duration:5.95s;animation-delay:-3.1s;
  }
  .final-target .offer.slot-7 {
    --drift-mid-x:8px;--drift-mid-y:-13px;--drift-end-x:-10px;--drift-end-y:-6px;
    animation-duration:7.35s;animation-delay:-5.2s;
  }
  .final-target .offer.slot-8 {
    --drift-mid-x:-13px;--drift-mid-y:-4px;--drift-end-x:-3px;--drift-end-y:11px;
    animation-duration:6.15s;animation-delay:-2.8s;
  }
}

@keyframes independent-cloud-drift {
  0% { translate:0 0; }
  43% { translate:var(--drift-mid-x) var(--drift-mid-y); }
  100% { translate:var(--drift-end-x) var(--drift-end-y); }
}

.cloud-kicker,
.cloud-action {
  display:none;
}

@media (prefers-reduced-motion:reduce) {
  .final-target .focus-card > .focus-action,
  .final-target .offer[class*="slot-"] {
    animation:none !important;
  }
}

/*
 * Mobile momentum coverflow.
 * Every cloud uses the same coordinate system; JavaScript only supplies
 * the continuously changing x/y/scale values.
 */
@media (max-width:900px) {
  .mobile-carousel-ready .offer-field {
    inset:0 !important;
    width:auto !important;
    z-index:auto !important;
    overflow:visible;
  }

  .mobile-carousel-ready .partner-cloud,
  .mobile-carousel-ready .hero-offer,
  .mobile-carousel-ready .offer,
  .mobile-carousel-ready .offer.one,
  .mobile-carousel-ready .offer.apex,
  .mobile-carousel-ready .offer.norm,
  .mobile-carousel-ready .offer.riobet,
  .mobile-carousel-ready .offer.mad,
  .mobile-carousel-ready .offer.seven,
  .mobile-carousel-ready .offer.spinto,
  .mobile-carousel-ready .offer.joy {
    display:flex !important;
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    top:63.5% !important;
    width:178px !important;
    height:172px !important;
    margin:0 !important;
    padding:18px !important;
    border-radius:52% 48% 55% 45% / 46% 57% 43% 54% !important;
    opacity:var(--carousel-opacity,1) !important;
    translate:none !important;
    scale:none !important;
    transform:
      translate3d(
        calc(-50% + var(--carousel-x,0px)),
        calc(-50% + var(--carousel-y,0px)),
        0
      )
      scale(var(--carousel-scale,1)) !important;
    transform-origin:center;
    z-index:var(--carousel-z,50) !important;
    animation:none !important;
    transition:
      transform .28s cubic-bezier(.2,.75,.25,1),
      opacity .2s ease,
      filter .2s ease !important;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
    will-change:transform;
  }

  .mobile-carousel-ready.carousel-dragging .partner-cloud {
    transition:none !important;
    cursor:grabbing;
  }

  .mobile-carousel-ready .partner-cloud:not(.is-carousel-main) .hero-kicker,
  .mobile-carousel-ready .partner-cloud:not(.is-carousel-main) .cloud-kicker,
  .mobile-carousel-ready .partner-cloud:not(.is-carousel-main) .cloud-action,
  .mobile-carousel-ready .partner-cloud:not(.is-carousel-main) > .hero-action {
    display:none !important;
  }

  .mobile-carousel-ready .partner-cloud.is-carousel-main .hero-kicker,
  .mobile-carousel-ready .partner-cloud.is-carousel-main .cloud-kicker {
    display:block;
    margin:0 0 8px;
    color:rgba(255,255,255,.72);
    font-size:7px;
    font-weight:900;
    letter-spacing:.15em;
  }

  .mobile-carousel-ready .partner-cloud.is-carousel-main .cloud-action {
    display:block;
    margin-top:9px;
    padding:8px 15px;
    border-radius:999px;
    color:#2b161b;
    background:linear-gradient(90deg,#fff0a4,#f8b5c9);
    font-size:6px;
    font-weight:950;
  }

  .mobile-carousel-ready .partner-cloud.is-carousel-main > .hero-action {
    display:block !important;
    margin-top:9px;
  }

  .mobile-carousel-ready .partner-cloud .logo-plate,
  .mobile-carousel-ready .hero-offer .logo-plate,
  .mobile-carousel-ready .offer .logo-plate {
    width:96px;
    min-width:96px;
    height:39px;
    min-height:39px;
    padding:5px 8px;
    border-radius:12px;
  }

  .mobile-carousel-ready .partner-cloud .logo-plate img,
  .mobile-carousel-ready .hero-offer .logo-plate img,
  .mobile-carousel-ready .offer .logo-plate img {
    width:82px;
    max-width:82px;
    height:27px;
  }

  .mobile-carousel-ready .partner-cloud strong,
  .mobile-carousel-ready .partner-cloud b {
    margin-top:7px;
    font-size:22px;
  }

  .mobile-carousel-ready .partner-cloud small {
    margin-top:3px;
    font-size:7px;
  }

  .mobile-carousel-ready .partner-cloud.is-current-partner {
    filter:saturate(1.09) brightness(1.05);
  }
}