
/* MAROCSTOR hero offer text — isolated from checkout and thank-you flows */
.ms-v3 .ms-offer-line{display:flex;direction:rtl;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px auto 4px;font-weight:900}
.ms-v3 .ms-offer-intro{color:#086b45;font-size:clamp(16px,2vw,25px);animation:msOfferRise .7s both}
.ms-v3 .ms-offer-percent{display:inline-flex;align-items:center;justify-content:center;padding:5px 15px;border-radius:14px;background:#08784b;color:#fff;font-size:clamp(24px,3.4vw,46px);line-height:1.2;box-shadow:0 8px 18px #075f3a29;animation:msOfferRise .7s .18s both}
.ms-v3 .ms-offer-percent-red{background:#c91d35;animation-delay:.35s}
.ms-v3 .ms-offer-separator{font-size:clamp(13px,1.4vw,19px);color:#174d39}
.ms-v3 .ms-v22-copy h1{animation:msOfferRise .75s .28s both}
.ms-v3 .ms-v22-copy p{animation:msOfferRise .75s .42s both}
@keyframes msOfferRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:780px){
 .ms-v3 .ms-offer-line{gap:5px;margin:4px auto 2px}
 .ms-v3 .ms-offer-intro{font-size:clamp(10px,3vw,14px)}
 .ms-v3 .ms-offer-percent{font-size:clamp(15px,4.4vw,23px);padding:3px 7px;border-radius:7px}
 .ms-v3 .ms-offer-separator{font-size:10px}
 .ms-v3 .ms-v22-copy h1{font-size:clamp(15px,4.5vw,24px)!important}
 .ms-v3 .ms-v22-copy p{font-size:clamp(9px,2.3vw,12px)!important}
}
@media(prefers-reduced-motion:reduce){.ms-v3 .ms-offer-intro,.ms-v3 .ms-offer-percent,.ms-v3 .ms-v22-copy h1,.ms-v3 .ms-v22-copy p{animation:none!important}}

/* Looping entrance / exit for hero TEXT ONLY; banner image remains still. */
@keyframes msHeroTextCycle {
  0%, 7% { opacity:0; transform:translateY(16px); }
  15%, 76% { opacity:1; transform:translateY(0); }
  89%, 100% { opacity:0; transform:translateY(-12px); }
}
.ms-v3 .ms-v22-copy .ms-v22-label,
.ms-v3 .ms-v22-copy .ms-offer-intro,
.ms-v3 .ms-v22-copy .ms-offer-percent,
.ms-v3 .ms-v22-copy .ms-offer-separator,
.ms-v3 .ms-v22-copy h1,
.ms-v3 .ms-v22-copy p {
  animation-name:msHeroTextCycle !important;
  animation-duration:8s !important;
  animation-timing-function:ease-in-out !important;
  animation-iteration-count:infinite !important;
  animation-fill-mode:both !important;
}
.ms-v3 .ms-v22-copy .ms-v22-label {animation-delay:0s !important}
.ms-v3 .ms-v22-copy .ms-offer-intro {animation-delay:.15s !important}
.ms-v3 .ms-v22-copy .ms-offer-percent {animation-delay:.3s !important}
.ms-v3 .ms-v22-copy .ms-offer-percent-red {animation-delay:.45s !important}
.ms-v3 .ms-v22-copy .ms-offer-separator {animation-delay:.38s !important}
.ms-v3 .ms-v22-copy h1 {animation-delay:.55s !important}
.ms-v3 .ms-v22-copy p {animation-delay:.75s !important}
@media(prefers-reduced-motion:reduce){
 .ms-v3 .ms-v22-copy .ms-v22-label,
 .ms-v3 .ms-v22-copy .ms-offer-intro,
 .ms-v3 .ms-v22-copy .ms-offer-percent,
 .ms-v3 .ms-v22-copy .ms-offer-separator,
 .ms-v3 .ms-v22-copy h1,
 .ms-v3 .ms-v22-copy p {animation:none !important;opacity:1 !important;transform:none !important}
}
