/* =====================================================================
   HOME VIBE  ·  homepage-only enhancement layer
   Shared bits (palette, keyframes, ticker, count-up, confetti) now live in
   site-vibe.css which loads on every page. This file holds only the
   homepage-section-specific rules. Scoped to body.home-vibe.
   ===================================================================== */

/* =====================================================================
   HERO — warm sunset wash, shinier headline tag, livelier countdown/bar
   ===================================================================== */
body.home-vibe .hero { position: relative; isolation: isolate; }
body.home-vibe .hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(255,210,63,.20), transparent 60%),
    radial-gradient(900px 460px at -5% 110%, rgba(31,169,224,.14), transparent 60%),
    linear-gradient(120deg, rgba(255,122,69,.06), rgba(255,255,255,0) 40%);
}
body.home-vibe .hero .meta-stripe .tag.gold {
  background: linear-gradient(100deg, var(--sun), var(--gold) 45%, var(--coral) 130%);
  color: var(--on-gold);
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
body.home-vibe .hero .countdown .cell { transition: transform .25s var(--vibe-ease); }
body.home-vibe .hero .countdown .cell .num { color: var(--gold-ink); }
body.home-vibe .hero .bar .fill,
body.home-vibe .comp .mini-bar .fill {
  background: linear-gradient(90deg, var(--gold), var(--coral)) !important;
}
body.home-vibe .hero .cta-row .btn {
  background: linear-gradient(100deg, var(--gold), var(--coral-deep));
  border-color: transparent;
  color: var(--on-gold);
  overflow: hidden;
}
body.home-vibe .hero .cta-row .btn:hover { color: #fff; }

/* =====================================================================
   SECTION MARKERS — a thematic emoji per homepage section
   ===================================================================== */
body.home-vibe .marker::after { font-size: 15px; line-height: 1; }
body.home-vibe #how .marker::after          { content: " 🎯"; }
body.home-vibe #competitions .marker::after { content: " ⛳"; }
body.home-vibe #instant .marker::after      { content: " ⚡"; }
body.home-vibe #winners .marker::after      { content: " 🏆"; }
body.home-vibe #membership .marker::after   { content: " 🎟️"; }
body.home-vibe #trust .marker::after        { content: " ✨"; }
body.home-vibe .app .eyebrow::after         { content: " 📱"; }
body.home-vibe #faq .eyebrow::after         { content: " 💬"; }

/* Giant playful watermark motif in a few band corners */
body.home-vibe .band.instant,
body.home-vibe #winners,
body.home-vibe #membership { position: relative; overflow: hidden; }
body.home-vibe .band.instant::after,
body.home-vibe #winners::after,
body.home-vibe #membership::after {
  position: absolute;
  right: 2%; top: 8%;
  font-size: clamp(90px, 12vw, 190px);
  line-height: 1;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
body.home-vibe .band.instant::after { content: "🌴"; }
body.home-vibe #winners::after      { content: "🏆"; opacity: .06; }
body.home-vibe #membership::after   { content: "☀️"; right: 4%; }
body.home-vibe .band.instant > .wrap,
body.home-vibe #winners > .wrap,
body.home-vibe #membership > .wrap { position: relative; z-index: 1; }

/* =====================================================================
   HOW IT WORKS — colourful step numbers + hover lift
   ===================================================================== */
body.home-vibe .steps .step { transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease); }
body.home-vibe .steps .step:hover { transform: translateY(-6px); }
/* The gradient number uses background-clip:text, which only "shows" the
   parts of each glyph that sit over the painted background box. Playfair's
   italic ascent+descent runs to ~1.4em of the font-size, so the base
   line-height (0.8, styles.css) — and even a modest bump — leaves the tops
   of "0/1/2/3" sitting outside that painted box, i.e. invisible/cut off.
   1.5 line-height + generous vertical padding comfortably covers the full
   glyph height on every step number, on every screen size in the clamp(). */
body.home-vibe .steps .step .num {
  background: linear-gradient(120deg, var(--sky), var(--fairway));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  line-height: 1.5;
  padding: 0.2em 0 0.25em;
  overflow: visible;
}
body.home-vibe .steps .step:nth-child(2) .num { background: linear-gradient(120deg, var(--gold-ink), var(--coral-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.home-vibe .steps .step:nth-child(3) .num { background: linear-gradient(120deg, var(--fairway-deep), var(--sky-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* On the dark ink band the deep gradient stops go muddy — swap in the
   brighter ends of the palette so the numbers still pop. */
body.home-vibe .band.ink .step:nth-child(2) .num { background: linear-gradient(120deg, var(--gold), var(--coral)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.home-vibe .band.ink .step:nth-child(3) .num { background: linear-gradient(120deg, var(--fairway), var(--sky)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.home-vibe .band.ink .step:hover { box-shadow: 0 22px 48px -24px rgba(0,0,0,0.6); }

/* =====================================================================
   COMPETITION CARDS (home grid) — lift + image zoom
   ===================================================================== */
body.home-vibe .comp { transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease); }
body.home-vibe .comp:hover { transform: translateY(-6px); box-shadow: 0 22px 48px -24px rgba(11,11,15,.45); }
body.home-vibe .comp .comp-img .ph-img { transition: transform .6s var(--vibe-ease); }
body.home-vibe .comp:hover .comp-img .ph-img { transform: scale(1.06); }
body.home-vibe .comp .enter-btn { transition: gap .25s var(--vibe-ease), background .25s; }

/* =====================================================================
   INSTANT WINS — bigger colour block + per-card accents
   ===================================================================== */
body.home-vibe .band.instant {
  background:
    radial-gradient(700px 360px at 90% 0%, rgba(255,122,69,.18), transparent 60%),
    linear-gradient(135deg, #FFF7E6 0%, #FFEFD6 45%, #FDE3C7 100%);
}
body.home-vibe .band.instant .iwin {
  transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease);
  position: relative; overflow: hidden;
  border-top: 3px solid var(--gold);
}
body.home-vibe .band.instant .iwin:nth-child(4n+1) { border-top-color: var(--sky); }
body.home-vibe .band.instant .iwin:nth-child(4n+2) { border-top-color: var(--fairway); }
body.home-vibe .band.instant .iwin:nth-child(4n+3) { border-top-color: var(--coral); }
body.home-vibe .band.instant .iwin:nth-child(4n)   { border-top-color: var(--gold-ink); }
body.home-vibe .band.instant .iwin:hover { transform: translateY(-6px); box-shadow: 0 22px 46px -22px rgba(242,84,45,.45); }
body.home-vibe .band.instant .iwin .odds b { color: var(--coral-deep); }
body.home-vibe .band.instant .iwin .reveal {
  background: linear-gradient(100deg, var(--gold), var(--coral-deep));
  color: var(--on-gold); border-radius: 999px; padding: 6px 14px; font-weight: 700;
}

/* =====================================================================
   WINNERS — celebratory badge + hover lift
   ===================================================================== */
body.home-vibe .winner { transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease); }
body.home-vibe .winner:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 22px 46px -24px rgba(11,11,15,.4); }
body.home-vibe .winner .badge {
  background: linear-gradient(100deg, var(--sun), var(--gold) 50%, var(--coral) 120%);
  color: var(--on-gold); position: relative; overflow: hidden;
}
body.home-vibe .winners-head .right b { color: var(--coral-deep); }

/* =====================================================================
   MEMBERSHIP — colour-blocked tiers, vibrant "popular"
   ===================================================================== */
body.home-vibe .tiers .tier {
  transition: transform .3s var(--vibe-ease), box-shadow .3s var(--vibe-ease);
  border-top: 3px solid var(--sky);
}
body.home-vibe .tiers .tier:nth-child(3) { border-top-color: var(--fairway); }
body.home-vibe .tiers .tier:hover { transform: translateY(-8px); box-shadow: 0 26px 54px -26px rgba(11,11,15,.4); }
body.home-vibe .tiers .tier.popular {
  border-top-color: var(--gold);
  background: radial-gradient(420px 220px at 50% -10%, rgba(248,191,61,.22), transparent 70%), var(--bg);
  box-shadow: 0 0 0 1px var(--gold-line), 0 24px 50px -28px rgba(160,113,14,.55);
}
body.home-vibe .tiers .tier.popular .price .p { color: var(--gold-ink); }
/* Stacked single-column tiers (≤1100px): the "MOST POPULAR" ribbon hangs
   above the card edge and overlapped the tier before it — reserve space so
   the ribbon sits clear between the two cards. Desktop layout unaffected. */
@media (max-width: 1100px) {
  body.home-vibe .tiers .tier.popular { margin-top: 26px; }
}

/* =====================================================================
   TRUST — accent-coloured index numbers
   ===================================================================== */
body.home-vibe .trust-grid .trust { transition: transform .3s var(--vibe-ease); }
body.home-vibe .trust-grid .trust:hover { transform: translateY(-5px); }
body.home-vibe .trust-grid .trust:nth-child(1) .num { color: var(--sky-deep); }
body.home-vibe .trust-grid .trust:nth-child(2) .num { color: var(--fairway-deep); }
body.home-vibe .trust-grid .trust:nth-child(3) .num { color: var(--coral-deep); }
body.home-vibe .trust-grid .trust:nth-child(4) .num { color: var(--gold-ink); }

/* ===== NEWSLETTER — friendlier submit ===== */
body.home-vibe .news .field button {
  background: linear-gradient(100deg, var(--gold), var(--coral-deep));
  border-color: transparent; color: var(--on-gold);
  transition: transform .2s var(--vibe-ease);
}
body.home-vibe .news .field button:hover { transform: translateY(-2px); }

/* =====================================================================
   MOTION — homepage-specific decorative motion
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  body.home-vibe .band.instant::after { animation: vibeFloat 6s ease-in-out infinite; }
  body.home-vibe #winners::after      { animation: vibeFloat 7s ease-in-out infinite; }
  body.home-vibe #membership::after   { animation: vibeSpin 60s linear infinite; }

  body.home-vibe .hero .meta-stripe .tag.gold::after,
  body.home-vibe .winner .badge::after,
  body.home-vibe .hero .cta-row .btn::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-130%);
    animation: vibeSheen 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  body.home-vibe .winner .badge::after { animation-duration: 5.5s; }
  body.home-vibe .hero .countdown .cell:hover { transform: translateY(-3px) scale(1.04); }
}

/* =====================================================================
   PERFORMANCE — tabular figures + below-the-fold content-visibility
   ===================================================================== */
body.home-vibe .winners-head .right b,
body.home-vibe .instant-head .stat b,
body.home-vibe .progress-row b,
body.home-vibe .see-all .count b,
body.home-vibe .trust .tag b { font-variant-numeric: tabular-nums; }

body.home-vibe #trust,
body.home-vibe .app,
body.home-vibe #faq,
body.home-vibe .news {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}
/* On phones these sections stack far taller than the 640px estimate, so the
   content-visibility placeholder makes the page jump as you scroll into them.
   Turn the optimisation off on small screens for a steady, jump-free scroll. */
@media (max-width: 760px) {
  body.home-vibe #trust,
  body.home-vibe .app,
  body.home-vibe #faq,
  body.home-vibe .news {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }
}

/* -------------------------------------------------------------------------
   Homepage competition cards: smaller + uniform.
   The grid below the hero shows 4 compact cards per row; "featured"/headline
   cards no longer span two columns, so every card is the same size.
   Scoped to the homepage only — the /competitions page keeps its own layout.
   ------------------------------------------------------------------------- */
body.home-vibe #competitions .comp-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--home-card-gutter, 20px);
}
body.home-vibe #competitions .comp.featured {
  grid-column: span 1;
}
body.home-vibe #competitions .comp.featured .comp-img {
  aspect-ratio: 4 / 3;
}
body.home-vibe #competitions .comp.featured h4 {
  font-size: 18px;
  line-height: 1.12;
}
body.home-vibe #competitions .comp .body {
  padding: 16px 16px 14px;
  gap: 8px;
}
body.home-vibe #competitions .comp .body h4 {
  font-size: 18px;
}

@media (max-width: 1100px) {
  body.home-vibe #competitions .comp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  /* Two compact competition cards per row on phones. */
  body.home-vibe #competitions .comp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--home-card-gutter-sm, 10px);
  }
  body.home-vibe #competitions .comp .body {
    padding: 12px 12px 13px;
    gap: 6px;
  }
  body.home-vibe #competitions .comp .body h4,
  body.home-vibe #competitions .comp.featured h4 {
    font-size: 15px;
    line-height: 1.14;
  }
}

/* -------------------------------------------------------------------------
   Homepage category tabs: bigger, louder, bolder, vibrant.
   Sunset-gradient active tab, coral hover glow, larger icons + labels.
   ------------------------------------------------------------------------- */
body.home-vibe #competitions .filters {
  gap: 8px;
  margin: 0 auto 30px;        /* centre the whole row on the page */
  padding: 7px 4px;           /* room for the active/hover lift + shadow, so the
                                 top border isn't clipped by overflow-y (auto) */
  width: fit-content;         /* shrink-wrap so margin-auto can centre it… */
  max-width: 100%;
  flex-wrap: nowrap;          /* …and keep every pill on a single line */
  overflow-x: auto;           /* scroll, not wrap, if it can't fit (mobile) */
  scrollbar-width: none;
}
body.home-vibe #competitions .filters::-webkit-scrollbar { display: none; }
body.home-vibe #competitions .filters .f {
  font-size: 12px;
  padding: 9px 14px;
  border-width: 2px;
  border-radius: 12px;
  gap: 7px;
  flex: 0 0 auto;             /* don't shrink — preserve the one-line row */
  white-space: nowrap;
}
body.home-vibe #competitions .filters .f .ic svg {
  width: 16px;
  height: 16px;
}
body.home-vibe #competitions .filters .f .count {
  font-size: 11px;
  padding: 3px 7px;
  min-width: 22px;
}
body.home-vibe #competitions .filters .f:hover {
  color: var(--coral-deep);
  border-color: var(--coral);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -16px rgba(242,84,45,.65);
}
body.home-vibe #competitions .filters .f.active {
  background: linear-gradient(110deg, var(--sun), var(--gold) 42%, var(--coral) 118%);
  border-color: transparent;
  color: var(--on-gold);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -12px rgba(248,191,61,.7);
}
body.home-vibe #competitions .filters .f.active:hover {
  color: var(--on-gold);
  transform: translateY(-3px);
}
body.home-vibe #competitions .filters .f.active .count {
  background: rgba(11,11,15,.2);
  color: var(--on-gold);
}
body.home-vibe #competitions .filters .f .ic {
  transition: transform .25s var(--vibe-ease);
}
body.home-vibe #competitions .filters .f:hover .ic {
  transform: scale(1.15) rotate(-4deg);
}
body.home-vibe #competitions .filters .f.right {
  align-self: center;
  font-weight: 700;
  margin-left: 0;            /* drop the base margin-left:auto so the row stays centred */
  flex: 0 0 auto;
}

/* Mobile filter bar — rounded track with pills + visible scrollbar
   (reference layout: contained scroller; brand colours unchanged). */
@media (max-width: 760px) {
  body.home-vibe #competitions .filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 22px;
    padding: 16px 12px 18px;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--btn-radius);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-dim) var(--surface-2);
  }
  body.home-vibe #competitions .filters::-webkit-scrollbar {
    display: block;
    height: 5px;
  }
  body.home-vibe #competitions .filters::-webkit-scrollbar-track {
    background: var(--surface-2);
    border-radius: 999px;
    margin: 0 6px 2px;
  }
  body.home-vibe #competitions .filters::-webkit-scrollbar-thumb {
    background: var(--ink-dim);
    border-radius: 999px;
  }
  body.home-vibe #competitions .filters .f {
    font-size: 10.5px;
    padding: 12px 16px;
    border-width: 1.5px;
    border-radius: var(--btn-radius);
    gap: 5px;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
    box-shadow: none;
    transform: none;
  }
  /* Quiet the hover lift inside the track — keeps the bar tidy on touch. */
  body.home-vibe #competitions .filters .f:hover,
  body.home-vibe #competitions .filters .f.active,
  body.home-vibe #competitions .filters .f.active:hover {
    transform: none;
    box-shadow: none;
  }
  body.home-vibe #competitions .filters .f .ic svg {
    width: 13px;
    height: 13px;
  }
  body.home-vibe #competitions .filters .f .count {
    font-size: 9.5px;
    padding: 2px 5px;
    min-width: 18px;
  }
}

/* -------------------------------------------------------------------------
   Consistent card gutters across every homepage card section.
   The competition grid uses a gutter; here we give the same gutter (rows AND
   columns) to Steps, Instant Wins, Winners, Membership tiers and Trust, which
   were originally drawn as a connected hairline grid (gap:0, shared borders).
   Each cell becomes its own bordered card so the gutter reads cleanly.
   Scoped to the homepage only — the /membership, /winners and /instant-wins
   pages keep their original connected-grid styling.
   ------------------------------------------------------------------------- */
body.home-vibe {
  --home-card-gutter: 20px;
  --home-card-gutter-sm: 14px;
}

body.home-vibe .steps,
body.home-vibe .iwins,
body.home-vibe .winners,
body.home-vibe .tiers,
body.home-vibe .trust-grid {
  gap: var(--home-card-gutter);
  border: 0;
  background: transparent;
}

body.home-vibe .steps .step,
body.home-vibe .iwins .iwin,
body.home-vibe .winners .winner,
body.home-vibe .tiers .tier,
body.home-vibe .trust-grid .trust {
  border: var(--rule);
}

/* cells that had no background of their own now need one to read as a card */
body.home-vibe .steps .step,
body.home-vibe .iwins .iwin,
body.home-vibe .trust-grid .trust {
  background: var(--bg);
}

/* …except on the dark ink band, where the cards stay translucent-dark
   (see section.band.ink in styles.css). */
body.home-vibe .band.ink .steps .step {
  background: rgba(246,244,239,0.045);
  border: 1px solid rgba(246,244,239,0.12);
}

/* keep the "most popular" tier's gold top accent */
body.home-vibe .tiers .tier.popular {
  border-top-color: var(--gold);
}

@media (max-width: 760px) {
  body.home-vibe .steps,
  body.home-vibe .iwins,
  body.home-vibe .winners,
  body.home-vibe .tiers,
  body.home-vibe .trust-grid {
    gap: var(--home-card-gutter-sm);
  }
}

/* -------------------------------------------------------------------------
   Homepage FAQ teaser (#faq). Renders the page=home FAQs in the site's
   accordion style, two columns on desktop, one on mobile. Self-contained so
   the homepage needn't load content.css.
   ------------------------------------------------------------------------- */
body.home-vibe #faq .home-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  margin-top: 8px;
}
body.home-vibe #faq .faq-item { border-top: var(--rule); }
body.home-vibe #faq .faq-item summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
body.home-vibe #faq .faq-item summary::-webkit-details-marker { display: none; }
body.home-vibe #faq .faq-item summary .plus { color: var(--gold-ink); font-size: 20px; transition: transform .2s; }
body.home-vibe #faq .faq-item[open] summary .plus { transform: rotate(45deg); }
body.home-vibe #faq .faq-item .a { padding: 0 0 20px; color: var(--ink-dim); line-height: 1.6; }

@media (max-width: 760px) {
  body.home-vibe #faq .home-faq { grid-template-columns: 1fr; column-gap: 0; }
}