/* =====================================================================
   SITE VIBE  ·  shared enhancement layer (loaded on every page, last)
   Adds the holiday/prize/golf energy site-wide without touching the base
   stylesheets. Scoped to body.vibe. Per-page accents live further down,
   scoped to the auto-generated body.page-<route> classes.
   All motion is gated behind prefers-reduced-motion.
   ===================================================================== */

body.vibe {
  --sky:         #1FA9E0;
  --sky-deep:    #0C7CB0;
  --fairway:     #2EA86A;
  --fairway-deep:#1C7A4B;
  --coral:       #FF7A45;
  --coral-deep:  #F2542D;
  --sun:         #FFD23F;
  --vibe-ease:   cubic-bezier(.2,.7,.2,1);
}

/* ===== Keyframes (global) =========================================== */
@keyframes vibeFloat    { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-9px) } }
@keyframes vibeSpin     { to { transform: rotate(360deg) } }
@keyframes vibeSheen    { 0%{ transform: translateX(-130%) } 60%,100%{ transform: translateX(130%) } }
@keyframes vibePop      { 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.12) } }
@keyframes vibeMarquee  { 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } }
@keyframes vibePulse    { 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.6) } 70%{ box-shadow:0 0 0 7px rgba(255,255,255,0) } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) } }
@keyframes vibeConfetti { 0%{ transform: translate3d(0,0,0) rotate(0); opacity:1 }
                          100%{ transform: translate3d(var(--cx,0),120px,0) rotate(var(--cr,360deg)); opacity:0 } }

/* =====================================================================
   TICKER — warm dark bar + continuous marquee, site-wide
   ===================================================================== */
body.vibe .ticker {
  height: 46px;
  background: linear-gradient(90deg, #0B0B0F 0%, #171206 55%, #221904 100%);
  border-bottom: 1px solid rgba(248,191,61,.28);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}
body.vibe .ticker .wrap { gap: 22px; }

body.vibe .ticker .live {
  background: var(--coral-deep);
  color: #fff;
  position: relative;
  padding: 5px 12px 5px 24px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 4px 14px -6px rgba(242,84,45,.8);
}
body.vibe .ticker .live::before {
  content: "";
  position: absolute;
  left: 11px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #fff;
}

body.vibe .ticker .feed-item { color: #ECE6D6; }
body.vibe .ticker .feed-item .gold,
body.vibe .ticker .feed-marquee .m-item .gold { color: var(--sun); margin: 0 6px; }
body.vibe .ticker .feed-item .sep,
body.vibe .ticker .feed-marquee .m-item .sep { color: rgba(255,255,255,.35); margin: 0 9px; }
body.vibe .ticker .ic { font-size: 14px; line-height: 1; margin-right: 8px; }

body.vibe .ticker .right { color: #C9C2B0; display: inline-flex; align-items: center; gap: 9px; }
body.vibe .ticker .right .star { color: var(--sun); font-size: 13px; }
body.vibe .ticker .right b { color: #fff; font-weight: 700; }
body.vibe .ticker .right .div { width: 1px; height: 13px; background: rgba(255,255,255,.2); }
body.vibe .ticker .right .gold { color: var(--sun); }

/* =====================================================================
   COUNT-UP — tabular figures so animated numbers don't jitter layout
   ===================================================================== */
body.vibe [data-countup],
body.vibe .vibe-count { font-variant-numeric: tabular-nums; }

/* =====================================================================
   MOTION LAYER
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* live dot pulse */
  body.vibe .ticker .live::before { animation: vibePulse 1.6s ease-in-out infinite; }

  /* continuous marquee on desktop (mobile already marquees via base CSS) */
  body.vibe .ticker .feed-item { display: none; }
  body.vibe .ticker .feed {
    position: relative; height: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  }
  body.vibe .ticker .feed-marquee { display: block; position: absolute; inset: 0; overflow: hidden; }
  body.vibe .ticker .feed-marquee .track {
    display: inline-flex; align-items: center; height: 100%;
    white-space: nowrap; width: max-content;
    animation: vibeMarquee 64s linear infinite;
    will-change: transform;
  }
  body.vibe .ticker:hover .feed-marquee .track { animation-play-state: paused; }
  body.vibe .ticker .feed-marquee .m-item {
    display: inline-flex; align-items: center;
    font-family: var(--f-sans); font-weight: 600; font-size: 11.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: #ECE6D6; flex-shrink: 0;
  }
  body.vibe .ticker .feed-marquee .m-item .dot { color: var(--coral); margin: 0 24px; font-size: 6px; transform: translateY(-1px); }

  /* confetti particles injected by site-vibe.js */
  body.vibe .vibe-confetti-piece {
    position: fixed; width: 9px; height: 14px; z-index: 60;
    pointer-events: none; border-radius: 2px;
    animation: vibeConfetti var(--cd,1200ms) var(--vibe-ease) forwards;
  }

  /* reusable opt-in hover lift for cards on any page */
  body.vibe .vibe-lift { transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease); }
  body.vibe .vibe-lift:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -24px rgba(11,11,15,.42); }
}

/* =====================================================================
   GENERIC SITE-WIDE ACCENTS  (every .vibe page)
   ===================================================================== */
/* Primary gold buttons → premium gradient */
body.vibe .btn--gold {
  background: linear-gradient(100deg, var(--gold), var(--coral-deep));
  border-color: transparent;
  color: var(--on-gold);
}
body.vibe .btn--gold:hover { color: #fff; }

/* Breadcrumb strip — warm accents */
body.vibe .crumb-bar .crumb i { color: var(--gold); }
body.vibe .crumb-bar .mid b,
body.vibe .crumb-bar .right b { color: var(--coral-deep); }

/* Section markers sized for the per-page emoji added below */
body.vibe .marker::after { font-size: 15px; line-height: 1; }

/* Generic warm wash behind every page hero (content sits in .wrap @ z-index:1) */
body.vibe .page-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(900px 400px at 88% -15%, rgba(255,210,63,.16), transparent 60%),
    radial-gradient(680px 340px at -5% 120%, rgba(31,169,224,.10), transparent 60%);
}

/* Competition cards — consistent lift + gradient progress everywhere */
body.vibe .comp { transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease); }
body.vibe .comp .mini-bar .fill { background: linear-gradient(90deg, var(--gold), var(--coral)) !important; }

/* Winner cards — consistent celebratory treatment everywhere */
body.vibe .winner { transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease); }
body.vibe .winner .badge {
  background: linear-gradient(100deg, var(--sun), var(--gold) 50%, var(--coral) 120%);
  color: var(--on-gold); position: relative; overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  body.vibe .btn { transition: transform .2s var(--vibe-ease), background .2s ease, color .2s ease, border-color .2s ease; }
  body.vibe .btn:hover { transform: translateY(-2px); }
  body.vibe .comp:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -24px rgba(11,11,15,.45); }
  body.vibe .comp .comp-img .ph-img { transition: transform .6s var(--vibe-ease); }
  body.vibe .comp:hover .comp-img .ph-img { transform: scale(1.06); }
  body.vibe .winner:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 22px 46px -24px rgba(11,11,15,.4); }
}

/* =====================================================================
   PER-PAGE ACCENTS  (scoped to body.page-<route>)
   ===================================================================== */

/* ---------- COMPETITIONS (grid) ----------------------------------- */
body.page-competitions .marker::after { content: " ⛳"; }

/* ---------- COMPETITION (detail) ---------------------------------- */
body.page-competitions-show .section-head .marker::after,
body.page-competitions-show .marker::after { content: " ⛳"; }
body.page-competitions-show .cell .num { color: var(--gold-ink); }
body.page-competitions-show .ph-img { transition: transform .6s var(--vibe-ease); }
body.page-competitions-show .save { color: var(--fairway-deep); font-weight: 700; }

/* ---------- WINNERS ----------------------------------------------- */
body.page-winners .marker::after { content: " 🏆"; }

/* ---------- MEMBERSHIP -------------------------------------------- */
body.page-membership .member-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 86% -20%, rgba(248,191,61,.20), transparent 62%),
    radial-gradient(700px 340px at -6% 120%, rgba(46,168,106,.12), transparent 60%);
}
body.page-membership .marker::after { content: " 🎟️"; }
body.page-membership .tier,
body.page-membership .benefit {
  transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease);
}
body.page-membership .billing-toggle .active,
body.page-membership .billing-toggle [aria-pressed="true"] { color: var(--gold-ink); }

/* ---------- INSTANT WINS ------------------------------------------ */
body.page-instant-wins .content-wrap {
  background:
    radial-gradient(700px 360px at 92% -10%, rgba(255,122,69,.14), transparent 60%),
    linear-gradient(135deg, #FFFBF2 0%, #FFF4E2 60%, #FDEAD4 100%);
}
body.page-instant-wins .marker::after { content: " ⚡"; }
body.page-instant-wins .iw-card {
  transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease);
  border-top: 3px solid var(--gold);
}
body.page-instant-wins .iw-grid .iw-card:nth-child(4n+1) { border-top-color: var(--sky); }
body.page-instant-wins .iw-grid .iw-card:nth-child(4n+2) { border-top-color: var(--fairway); }
body.page-instant-wins .iw-grid .iw-card:nth-child(4n+3) { border-top-color: var(--coral); }
body.page-instant-wins .iw-grid .iw-card:nth-child(4n)   { border-top-color: var(--gold-ink); }
body.page-instant-wins .iw-odds b { color: var(--coral-deep); }

@media (prefers-reduced-motion: no-preference) {
  body.page-competitions-show .ph-img:hover { transform: scale(1.04); }
  body.page-membership .tier:hover,
  body.page-membership .benefit:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -24px rgba(11,11,15,.4); }
  body.page-instant-wins .iw-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px -22px rgba(242,84,45,.42); }
}

/* ---------- ABOUT ------------------------------------------------- */
body.page-about .marker::after { content: " ⛳"; }

/* ---------- CONTACT ----------------------------------------------- */
body.page-contact .marker::after { content: " ✉️"; }

/* ---------- FAQ --------------------------------------------------- */
body.page-faq .marker::after { content: " 💬"; }
body.page-faq .content-head {
  background:
    radial-gradient(700px 300px at 90% -30%, rgba(255,210,63,.14), transparent 60%);
}
body.page-faq .faq-item { transition: border-color .25s var(--vibe-ease); }
body.page-faq .faq-item:hover { border-color: var(--gold-line); }

/* ---------- VERIFY ------------------------------------------------ */
body.page-verify .marker::after { content: " 🔍"; }

/* ---------- POSTAL ENTRY ------------------------------------------ */
body.page-postal-entry .marker::after { content: " 📮"; }

/* ---------- RESPONSIBLE PLAY -------------------------------------- */
body.page-responsible-play .marker::after { content: " 🛟"; }
body.page-responsible-play .help-card { transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease); }

@media (prefers-reduced-motion: no-preference) {
  body.page-responsible-play .help-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -26px rgba(11,11,15,.38); }
}

/* ---------- CLOSING SOON ------------------------------------------ */
body.page-closing-soon .marker::after { content: " ⏰"; }

/* ---------- COMING SOON ------------------------------------------- */
body.page-coming-soon .marker::after { content: " ⏳"; }
body.page-coming-soon .cs-live-card { transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease); }

/* ---------- CONTENT / LEGAL --------------------------------------- */
body.page-how-it-works .marker::after { content: " 🎯"; }
body.page-terms .marker::after,
body.page-privacy .marker::after,
body.page-cookies .marker::after,
body.page-compliance .marker::after,
body.page-competition-rules .marker::after { content: " 📄"; }

/* ---------- BASKET / CHECKOUT (restrained, transactional) --------- */
body.page-basket .marker::after   { content: " 🛒"; }
body.page-checkout .marker::after { content: " 💳"; }
body.page-basket .basket-item,
body.page-checkout .basket-item { transition: transform .25s var(--vibe-ease); }

/* ---------- CHECKOUT CONFIRMATION (celebrate!) -------------------- */
body.page-checkout-confirmation .marker::after { content: " 🎉"; }

/* ---------- APP SHOWCASE ------------------------------------------ */
body.page-app-showcase .marker::after { content: " 📱"; }

@media (prefers-reduced-motion: no-preference) {
  body.page-coming-soon .cs-live-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -24px rgba(11,11,15,.4); }
  body.page-basket .basket-item:hover,
  body.page-checkout .basket-item:hover { transform: translateY(-2px); }
}

/* =====================================================================
   ACCOUNT + AUTH  (restrained — consistent polish, no confetti/motifs)
   ===================================================================== */
body.page-account .marker::after            { content: " 📊"; }
body.page-account-entries .marker::after    { content: " 🎟️"; }
body.page-account-wins .marker::after       { content: " 🏆"; }
body.page-account-orders .marker::after     { content: " 🧾"; }
body.page-account-wallet .marker::after     { content: " 👛"; }
body.page-account-profile .marker::after    { content: " 👤"; }
body.page-account-membership .marker::after { content: " 🎟️"; }
body.page-account-responsible .marker::after{ content: " 🛟"; }

body.vibe .account-nav .an-links a { transition: color .2s var(--vibe-ease); }
body.vibe .account-nav .an-links a[aria-current="page"],
body.vibe .account-nav .an-links a.active { color: var(--gold-ink); }
body.vibe .account-nav .an-bal b,
body.vibe .wallet-balance { color: var(--gold-ink); }

body.vibe .auth-card { border-top: 3px solid var(--gold); }
body.page-login .marker::after    { content: " ⛳"; }
body.page-register .marker::after { content: " ✨"; }

@media (prefers-reduced-motion: no-preference) {
  body.vibe .auth-card { transition: box-shadow .3s var(--vibe-ease); }
  body.vibe .auth-card:hover { box-shadow: 0 24px 50px -30px rgba(11,11,15,.4); }
}