/* ==================================================================
   XConvergence promo layer: STYLES
   Everything here only applies while <html> has a promo-* class,
   which promo-config.js adds and promo.js removes at the deadline.
   With no promo running, this file changes nothing on the page.
   ================================================================== */

/* ---------- Theme: Fall Harvest (orange, amber, gold) ---------- */
html.promo-harvest{
  --accent:#ff9a3c; --accent-soft:rgba(255,154,60,.15);
  --aurora:linear-gradient(115deg,#ff5f1f 0%,#ff9a3c 50%,#ffc95c 100%);
  --g1:#ff5f1f; --g2:#ff9a3c; --g3:#ffc95c;
  --promo-bar-bg:linear-gradient(90deg,#3a1606 0%,#5c2309 50%,#3a1606 100%);
  --promo-bar-fg:#fff3e6; --promo-chip:#ffb35c; --promo-chip-fg:#2a0f02;
}
html.promo-harvest[data-theme="light"]{
  --accent:#c2560a; --accent-soft:rgba(194,86,10,.10);
  --aurora:linear-gradient(115deg,#c2410c 0%,#ea7a1a 50%,#d99a06 100%);
  --g1:#c2410c; --g2:#ea7a1a; --g3:#d99a06;
  --promo-bar-bg:linear-gradient(90deg,#c2410c 0%,#ea7a1a 50%,#c2410c 100%);
  --promo-bar-fg:#fff; --promo-chip:#fff; --promo-chip-fg:#7a2a03;
}
/* The XConvergence logo keeps its own blue so the brand stays put */
html.promo-on .brand .grad{background:linear-gradient(115deg,#1d55e8 0%,#27a8e6 48%,#2ee6b4 100%);
  -webkit-background-clip:text;background-clip:text}
html.promo-on .hero-glow{opacity:.34}

/* ---------- Top promo bar ---------- */
.promo-bar{position:relative;z-index:61;background:var(--promo-bar-bg);color:var(--promo-bar-fg);
  font-size:14px;line-height:1.3;padding:9px 16px}
.promo-bar .pb-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:nowrap}
.promo-bar .pb-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.promo-bar .pb-msg b{font-weight:700}
.promo-bar .pb-short{display:none;font-weight:700}
.promo-code{appearance:none;border:1.5px dashed var(--promo-chip);background:transparent;color:inherit;
  font:700 13px/1 var(--display,inherit);letter-spacing:.06em;padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.promo-code:hover{background:rgba(255,255,255,.1)}
.promo-code[data-copied]::after{content:" ✓ copied";font-weight:600;letter-spacing:0}
.promo-cd{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.promo-cd .pc-l{opacity:.8;margin-right:4px}
.promo-cd span.u{background:var(--promo-chip);color:var(--promo-chip-fg);font:700 13px/1 var(--display,inherit);
  padding:5px 6px;border-radius:6px;min-width:34px;text-align:center}
.promo-bar .pk{width:22px;height:22px;flex:0 0 auto}

@media(max-width:900px){
  .promo-bar .pb-msg{display:none}
  .promo-bar .pb-short{display:inline}
  .promo-bar .pb-in{gap:10px}
}
@media(max-width:420px){
  .promo-bar{font-size:13px;padding:8px 10px}
  .promo-bar .pk{display:none}
  .promo-cd .pc-l{display:none}
  .promo-cd span.u{min-width:30px;padding:4px 5px;font-size:12px}
  .promo-code{font-size:12px;padding:5px 7px}
}

/* ---------- Hero badge: pumpkin replaces the dot ---------- */
.spots-pill .pk{width:18px;height:18px;flex:0 0 auto;margin-right:-2px}

/* ---------- Pumpkin (plain, no face) ---------- */
.pk{display:inline-block}
.pk svg{width:100%;height:100%;display:block;overflow:visible}
.pk .pk-body{transform-origin:50% 90%;animation:pkBob 2.8s ease-in-out infinite}
@keyframes pkBob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-6%) rotate(-5deg)}60%{transform:translateY(0) rotate(4deg)}}

/* ---------- Falling leaves (hero and final section only) ---------- */
.promo-fx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.promo-fx .lf{position:absolute;top:-8%;width:var(--s,22px);height:var(--s,22px);opacity:var(--o,.55);
  animation:lfFall var(--d,14s) linear var(--dl,0s) infinite}
.promo-fx .lf svg{width:100%;height:100%;display:block;animation:lfSway calc(var(--d,14s)/4) ease-in-out infinite alternate}
@keyframes lfFall{0%{transform:translate3d(0,-10vh,0) rotate(0)}100%{transform:translate3d(var(--x,40px),115vh,0) rotate(var(--r,320deg))}}
@keyframes lfSway{0%{transform:translateX(-14px) rotate(-18deg)}100%{transform:translateX(14px) rotate(18deg)}}
html.promo-on .final .promo-fx .lf{animation-name:lfFallFinal}
@keyframes lfFallFinal{0%{transform:translate3d(0,-10%,0) rotate(0)}100%{transform:translate3d(var(--x,40px),900px,0) rotate(var(--r,320deg))}}
@media(max-width:700px){.promo-fx .lf:nth-child(n+7){display:none}}

/* ---------- Value stack ---------- */
html.promo-on .items .it .vl{white-space:nowrap}
.items .it.promo-hv .ck,.items .it.promo-hv .lb{color:var(--accent)}
.items .it.promo-hv .lb small{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.85}
.promo-total{max-width:760px;margin:30px auto 0;padding:24px 26px;border:1.5px solid var(--accent);border-radius:20px;
  background:var(--accent-soft);text-align:center}
.promo-total .pt-v{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:700;margin:0 0 6px;color:var(--text)}
.promo-total .pt-v s{opacity:.55;font-weight:600;margin-right:6px}
.promo-total p{margin:0;font-size:15.5px;color:var(--muted)}
.promo-total p b{color:var(--text)}

/* ---------- Big countdown (final section) ---------- */
.promo-big{display:flex;justify-content:center;align-items:center;gap:12px;margin:0 auto 26px;flex-wrap:wrap}
.promo-big .pk{width:46px;height:46px}
.promo-big .pb-box{min-width:78px;padding:12px 10px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line-strong);
  text-align:center}
.promo-big .pb-box b{display:block;font-family:var(--display);font-size:clamp(28px,4vw,40px);line-height:1;font-variant-numeric:tabular-nums;
  background:var(--aurora);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.promo-big .pb-box span{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.promo-final-note{margin:16px 0 0;font-size:15px;color:var(--muted)}
.promo-final-note b{color:var(--accent);letter-spacing:.04em}
@media(max-width:520px){.promo-big{gap:8px}.promo-big .pk{display:none}.promo-big .pb-box{min-width:64px;padding:10px 6px 8px}}

/* ---------- Sticky mobile footer ---------- */
html.promo-on .mcta .mp b{white-space:nowrap}
html.promo-on .mcta .mp b .pc-plain,html.promo-on .mcta .mp b .pc-plain span{display:inline;font-size:inherit;color:inherit;
  background:none;padding:0;font-variant-numeric:tabular-nums}

/* ---------- Video play button glow follows the promo color ---------- */
html.promo-harvest .vsl-btn{box-shadow:0 12px 40px -8px rgba(255,138,42,.65)}

/* ---------- Reduced motion: keep the look, drop the movement ---------- */
@media(prefers-reduced-motion:reduce){
  .promo-fx{display:none}
  .pk .pk-body{animation:none}
}