/* AIPLAY "Daily Lucky Spin" promo banner, homepage hero.
   Faithful remake of the operator's 1080x400 banner: same composition and mood (logo, three-line slanted headline
   with white fill, blue outline echo and glow, light-blue sentence with the two figures enlarged, the original
   model / neon wheel / banknotes art on the right), rebuilt with live type, a clear Spin Now action and a phone layout.
   Every selector is scoped under .promo-wrap or .promo. No JavaScript. Motion is optional and runs once. */

@font-face { font-family: "Russo One"; src: url("/assets/fonts/russo-one-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kanit"; src: url("/assets/fonts/kanit-600-italic-latin.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }

/* ---------- placement in the hero ---------- */
.hero:has(> .promo-wrap) { padding-top: 20px; }
.promo-wrap { container: promo-wrap / inline-size; margin-bottom: 36px; }
@media (min-width: 900px) {
  .hero:has(> .promo-wrap) { padding-top: 32px; }
  .promo-wrap { margin-bottom: 56px; }
}

/* ---------- frame and layers ---------- */
.promo {
  --p-sky: #a6dcff;
  --p-echo: #8a94ff;
  --p-glow: 118, 104, 255;
  --p-cta-ink: #1c1240;
  --p-ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* light ribbon box, positioned against the headline box (see .promo-title::after) */
  --p-rb-left: -5.9cqi;
  --p-rb-top: -15.3cqi;   /* from the headline's bottom edge: puts the ribbon's core 1.41cqi under it */
  --p-rb-w: 110cqi;
  --p-rb-h: 28.4cqi;
  --p-frame-tl: clamp(96px, 12cqi, 150px);
  --p-frame-br: clamp(110px, 15cqi, 180px);
  container: promo / inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  background: #110d1e;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(122, 146, 255, 0.24), 0 22px 48px -22px rgba(2, 4, 16, 0.85);
}
.promo .promo-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    url("/assets/images/promo/promo-smoke.svg") 0 0 / 100% 100% no-repeat,
    radial-gradient(38% 40% at 28% 40%, rgba(78, 54, 196, 0.24), transparent 72%),
    radial-gradient(30% 44% at 45% 0%, rgba(112, 14, 82, 0.42), transparent 70%),
    linear-gradient(0deg, rgba(36, 100, 172, 0.95) 0%, rgba(31, 84, 150, 0.68) 12%, rgba(24, 54, 110, 0.26) 28%, transparent 44%),
    linear-gradient(180deg, #0e0b16 0%, #110d1d 45%, #13193a 72%, #183264 100%);
}
.promo .promo-art {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: auto;
  max-width: none;
  height: 100%;
  aspect-ratio: 480 / 400;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 11%, #000 26%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 11%, #000 26%);
}
/* the operator's house frame: small blue "/" bars in the top-left and bottom-right corners, as on its other promos */
.promo::before,
.promo::after {
  content: "";
  position: absolute;
  z-index: 0;
  aspect-ratio: 320 / 260;
  background: url("/assets/images/promo/promo-frame.svg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.promo::before { top: 0; left: 0; width: var(--p-frame-tl); }
.promo::after { right: 0; bottom: 0; width: var(--p-frame-br); transform: rotate(180deg); }

/* ---------- copy column ---------- */
.promo .promo-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 57%;
  min-height: 37cqi;
  padding: 1.9cqi 2.6cqi 1.7cqi;
  text-align: center;
}
.promo .promo-logo {
  width: clamp(88px, 10cqi, 124px);
  height: auto;
  margin: 0 0 0.7cqi;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.promo .promo-title {
  position: relative;
  align-self: stretch;
  margin: 0;
  font-family: "Russo One", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4.9cqi, 62px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  overflow-wrap: normal; /* site.css sets p { overflow-wrap: anywhere }: a headline word must never split */
}
.promo .promo-title:lang(ms) { font-size: clamp(28px, 3.6cqi, 45px); }
/* the blue light ribbon of the original. Anchored to the headline's bottom edge, it lies flat in the channel between
   headline and sentence across the whole copy column and only rises after the column, sweeping up behind the art.
   It never runs behind a headline letter or the sentence. */
.promo .promo-title::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: var(--p-rb-left);
  top: calc(100% + var(--p-rb-top));
  width: var(--p-rb-w);
  height: var(--p-rb-h);
  background: url("/assets/images/promo/promo-streak.svg") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.promo .promo-line {
  position: relative;
  display: block;
  width: fit-content;
  margin-inline: auto;
  transform: skewX(-11deg);
  text-shadow:
    0 0 0.05em rgba(var(--p-glow), 0.95),
    0 0 0.2em rgba(var(--p-glow), 0.7),
    0 0 0.55em rgba(46, 108, 255, 0.5);
}
.promo .promo-line::before {
  content: attr(data-echo) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 0.03em var(--p-echo);
  text-shadow: none;
  transform: translate(-0.08em, 0.07em);
  filter: drop-shadow(0 0 0.06em rgba(110, 120, 255, 0.9));
}
.promo .promo-text {
  max-width: 26em;
  margin: 3cqi 0 0; /* the channel the ribbon runs through */
  font-family: "Kanit", "DM Sans", "Segoe UI", sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(16px, 1.62cqi, 20px);
  line-height: 1.34;
  color: var(--p-sky);
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(4, 8, 32, 0.7);
}
.promo .promo-text strong {
  font-weight: 600;
  font-size: 1.38em;
  line-height: 0; /* the enlarged figures must not push their line apart */
  color: #fff;
  text-shadow: 0 0 0.3em rgba(70, 160, 255, 0.85), 0 1px 2px rgba(4, 8, 32, 0.6);
}

/* ---------- action: button with the fine print beside it (desktop), under it (tablet, phone) ---------- */
.promo .promo-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 1.5cqi;
  margin: 1.5cqi 0 0;
}
.promo .promo-cta,
.promo .promo-cta:hover {
  color: var(--p-cta-ink);
}
.promo .promo-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: clamp(44px, 4cqi, 48px);
  min-width: 12em;
  padding: 0 1.6em 0 1.2em;
  border-radius: 999px;
  font-family: "Russo One", "Arial Black", sans-serif;
  font-size: clamp(16px, 1.5cqi, 19px);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(180deg, #fff1a0 0%, #ffd53e 36%, #ffb414 72%, #ff9a06 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -3px 0 rgba(170, 72, 0, 0.32),
    0 0 0 1px rgba(255, 214, 110, 0.6),
    0 8px 26px -6px rgba(255, 168, 24, 0.65);
  transition: transform 140ms var(--p-ease), box-shadow 200ms ease, filter 200ms ease;
}
/* the operator's own Lucky Spin wheel icon, so the button says "spin" at a glance */
.promo .promo-cta::before {
  content: "";
  flex: none;
  width: 1.55em;
  height: 1.55em;
  background: url("/assets/images/promo/spin-icon.webp") center / contain no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(122, 52, 0, 0.45));
}
.promo .promo-cta:active { transform: scale(0.97); }
.promo .promo-cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .promo .promo-cta:hover {
    filter: brightness(1.06) saturate(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -3px 0 rgba(170, 72, 0, 0.3),
      0 0 0 1px rgba(255, 224, 140, 0.8),
      0 10px 34px -6px rgba(255, 176, 30, 0.85);
  }
}
.promo .promo-fine {
  max-width: 13.5em;
  margin: 0;
  font-size: clamp(13px, 1.1cqi, 14px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-align: left;
  color: #f1f6ff;
  text-shadow: 0 1px 2px rgba(4, 8, 32, 0.7);
}
.promo .promo-fine span { display: inline-block; } /* the terms sentence wraps as a whole, never mid-sentence */

/* ---------- tablet: still side by side, taller, art cropped from the right ---------- */
@container promo (width < 900px) {
  .promo .promo-title {
    /* ribbon box stretched so its flat stretch covers the whole copy column and it rises only behind the art */
    --p-rb-left: -17.4cqi;
    --p-rb-top: -14.76cqi;  /* core 1.95cqi under the headline */
    --p-rb-w: 134.6cqi;
  }
  .promo .promo-body { width: 58%; min-height: 50cqi; padding: 3.2cqi 3cqi 3cqi; }
  /* the art (and its fade) starts at 54cqi and sentence lines end by 53.5cqi: no line-end sits on the wheel's neon */
  .promo .promo-art { width: 46%; height: 100%; aspect-ratio: auto; object-position: 20% 30%; }
  .promo .promo-title { font-size: clamp(28px, 5cqi, 46px); }
  .promo .promo-title:lang(ms) { font-size: clamp(28px, 4.6cqi, 40px); }
  .promo .promo-text { max-width: 49cqi; margin-top: 4cqi; font-size: clamp(16px, 2.2cqi, 19px); }
  .promo .promo-logo { width: clamp(88px, 14cqi, 120px); }
  .promo .promo-act { flex-direction: column; gap: 0.9cqi; }
  .promo .promo-cta { min-height: 48px; }
  .promo .promo-fine { max-width: none; text-align: center; }
}

/* ---------- phone: picture band on top, copy below ---------- */
/* the container cannot query itself: the frame bars of .promo are sized from the wrapper (same width) */
@container promo-wrap (width < 600px) {
  .promo { --p-frame-tl: clamp(68px, 21cqi, 104px); --p-frame-br: clamp(60px, 18cqi, 96px); }
}
@container promo (width < 600px) {
  .promo .promo-title {
    --p-rb-left: -7.5cqi;
    --p-rb-top: -15.25cqi;  /* core 3.78cqi under the headline */
    --p-rb-w: 106cqi;
    --p-rb-h: 34.6cqi;
  }
  .promo .promo-art {
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: 66cqi;
    object-position: 50% 16%;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.5) 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, 0.5) 80%, transparent 100%);
  }
  .promo .promo-bg {
    background:
      url("/assets/images/promo/promo-smoke.svg") 0 0 / 100% 70% no-repeat,
      radial-gradient(80% 20% at 50% 56%, rgba(78, 54, 196, 0.26), transparent 72%),
      linear-gradient(0deg, rgba(36, 100, 172, 0.92) 0%, rgba(31, 84, 150, 0.6) 9%, rgba(24, 54, 110, 0.2) 20%, transparent 32%),
      linear-gradient(180deg, #0e0b16 0%, #110d1d 50%, #13193a 78%, #183264 100%);
  }
  .promo .promo-body { width: 100%; min-height: 0; padding: 57cqi max(10px, 4.4cqi) 6cqi; }
  .promo .promo-logo { width: clamp(84px, 27cqi, 104px); margin-bottom: 2.4cqi; }
  .promo .promo-title { font-size: clamp(28px, 9.2cqi, 40px); }
  .promo .promo-title:lang(ms) { font-size: clamp(28px, 8.4cqi, 36px); }
  .promo .promo-title::after { background-image: url("/assets/images/promo/promo-streak-m.svg"); }
  .promo .promo-text { max-width: 24em; margin-top: 7.5cqi; font-size: 16px; line-height: 1.42; }
  .promo .promo-act { align-self: stretch; margin-top: 5cqi; gap: 3cqi; } /* full row, so the button's 15em floor applies */
  .promo .promo-cta { min-height: 50px; min-width: min(100%, 15em); }
  .promo .promo-fine { max-width: 17em; font-size: 13px; } /* longer terms drop to their own line, clear of the corner bars */
}

/* ---------- motion: once, on load, transform and opacity only ---------- */
@media (prefers-reduced-motion: no-preference) {
  .promo .promo-art { animation: promo-art-in 1200ms var(--p-ease) both; }
  .promo .promo-title::after { animation: promo-streak-in 1300ms var(--p-ease) 200ms both; }
  .promo .promo-logo,
  .promo .promo-line,
  .promo .promo-text,
  .promo .promo-cta,
  .promo .promo-fine { animation: promo-rise 700ms var(--p-ease) both; }
  .promo .promo-logo { animation-delay: 80ms; }
  .promo .promo-line:nth-child(1) { animation-delay: 160ms; }
  .promo .promo-line:nth-child(2) { animation-delay: 240ms; }
  .promo .promo-line:nth-child(3) { animation-delay: 320ms; }
  .promo .promo-text { animation-delay: 400ms; }
  .promo .promo-cta { animation-delay: 480ms; }
  .promo .promo-fine { animation-delay: 560ms; }
  /* the wheel icon turns a little over one turn and settles */
  .promo .promo-cta::before { animation: promo-wheel 1500ms var(--p-ease) 560ms backwards; }
  .promo .promo-cta::after {
    content: "";
    position: absolute;
    inset: -20% auto -20% 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: translateX(-160%) skewX(-20deg);
    animation: promo-sheen 900ms var(--p-ease) 1100ms 1 both;
    pointer-events: none;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .promo .promo-cta::before { transition: transform 450ms var(--p-ease); }
  .promo .promo-cta:hover::before { transform: rotate(72deg); }
}
@keyframes promo-rise { from { opacity: 0; translate: 0 20px; } }
@keyframes promo-art-in { from { opacity: 0; scale: 1.05; } }
@keyframes promo-streak-in { from { opacity: 0; translate: -8% 0; } }
@keyframes promo-wheel { from { rotate: -400deg; } }
@keyframes promo-sheen { to { transform: translateX(380%) skewX(-20deg); } }