/* ==========================================================================
   DREAM 111 - HOME PAGE
   Page-level composition only. Loads after the design system.
   If a rule here would be useful on a second page, promote it to
   design-system/css/components.css instead of copying it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 7vw, 7.5rem) var(--s-section-sm);
  overflow: hidden;
}

/* --- Background photograph --- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Pushes the batting action into the right half, clear of the copy. */
  object-position: 62% 40%;
}

/* --- The scrim ---
   Solid ink on the left so the headline sits on flat colour, fading across to
   near-clear on the right where the photograph does its work. The second,
   vertical gradient welds the top and bottom edges into the page so the
   picture never looks like a pasted-in banner. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      var(--c-obsidian-950) 0%,
      rgba(10, 8, 5, 0.97) 28%,
      rgba(10, 8, 5, 0.82) 46%,
      rgba(10, 8, 5, 0.50) 64%,
      rgba(10, 8, 5, 0.22) 82%,
      rgba(10, 8, 5, 0.12) 100%),
    linear-gradient(180deg,
      rgba(10, 8, 5, 0.86) 0%,
      rgba(10, 8, 5, 0.10) 28%,
      rgba(10, 8, 5, 0.10) 62%,
      var(--c-obsidian-950) 100%);
}

/* A warm gold haze over the photograph, so the image sits in the brand's
   light instead of reading as a stock photo dropped onto the page. */
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 420px at 76% 42%, var(--a-gold-16), transparent 70%);
  mix-blend-mode: soft-light;
}

/* On phones the photo has nowhere to breathe, so it drops back to texture. */
@media (max-width: 767px) {
  .hero__media img { object-position: 64% 38%; }
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(10, 8, 5, 0.80) 0%,
        rgba(10, 8, 5, 0.90) 42%,
        var(--c-obsidian-950) 88%);
  }
}

.hero__inner { position: relative; }
.hero__title { max-width: 21ch; margin-top: var(--s-5); }
.hero__lead, .hero__note { max-width: 50ch; }

/* Keep the copy off the photograph on wide screens. */
@media (min-width: 1024px) {
  .hero__inner > * { max-width: 62%; }
  .hero__inner > .stat-strip { max-width: 100%; }
}
.hero__title em { font-style: italic; color: var(--fg-gold); }
.hero__lead { margin-top: var(--s-6); }
.hero__cta { margin-top: var(--s-8); }
.hero__note {
  margin-top: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-caption);
  color: var(--fg-subtle);
}
.hero__note .ico { color: var(--fg-gold); }

/* --------------------------------------------------------------------------
   SECTION HEADINGS
   -------------------------------------------------------------------------- */

.head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* --------------------------------------------------------------------------
   SPORT CARDS
   -------------------------------------------------------------------------- */

.sport {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-surface);
  background-image: var(--grad-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: var(--t-colors), var(--t-transform);
}
.sport:hover {
  transform: translateY(-4px);
  border-color: var(--border-gold);
  box-shadow: var(--elev-3);
}
.sport:hover .ico-frame {
  background: var(--a-gold-16);
  border-color: var(--border-gold-strong);
}
.sport__name {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--fs-h3);
  color: var(--fg-strong);
}
.sport__text { font-size: var(--fs-body-sm); color: var(--fg-muted); }
.sport__more {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-gold);
}
.sport:hover .sport__more .ico { transform: translateX(3px); }
.sport__more .ico { transition: transform var(--dur-base) var(--ease-out); }

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-7);
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
}
.quote__stars { display: flex; gap: 2px; color: var(--brand); }
.quote__stars .ico { width: 16px; height: 16px; }
.quote__text {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--fs-h4);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-strong);
}
.quote__who {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: var(--bw-hairline) solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.quote__avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-circle);
  background: var(--bg-gold-soft);
  border: var(--bw-hairline) solid var(--border-gold);
  color: var(--fg-gold);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--fs-body-sm);
}

/* --------------------------------------------------------------------------
   PAYMENTS
   -------------------------------------------------------------------------- */

.pay-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.pay {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  transition: var(--t-colors);
}
.pay:hover { border-color: var(--border-gold); color: var(--fg-default); }
.pay .ico { color: var(--fg-gold); }

/* --------------------------------------------------------------------------
   BLOG CARDS
   -------------------------------------------------------------------------- */

.post {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: var(--t-colors), var(--t-transform);
}
.post:hover { transform: translateY(-4px); border-color: var(--border-gold); }
.post__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.post__title {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg-strong);
}
.post:hover .post__title { color: var(--fg-gold); }
.post__excerpt { font-size: var(--fs-body-sm); color: var(--fg-muted); }

/* --------------------------------------------------------------------------
   CLOSING CTA
   -------------------------------------------------------------------------- */

.closer {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  border: var(--bw-hairline) solid var(--border-gold);
  border-radius: var(--r-xl);
  background:
    radial-gradient(700px 320px at 50% 0%, var(--a-gold-16), transparent 72%),
    linear-gradient(170deg, var(--c-obsidian-800), var(--c-obsidian-950));
  text-align: center;
  overflow: hidden;
}
.closer > * { position: relative; }
.closer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  max-width: 56ch;
  margin-inline: auto;
}

/* ==========================================================================
   HERO STATS
   The stats are a separate statement from the headline block, so they need
   real air above them rather than sitting in the same rhythm as the copy.
   ========================================================================== */

.hero .stat-strip {
  margin-top: clamp(3.5rem, 8vw, 7rem);
  border-bottom: 0;
}


/* ==========================================================================
   HOLLOW MARQUEE
   Outlined display type, circular gold dots as separators.
   ========================================================================== */

.ticker--hollow { padding-block: var(--s-5); }
.ticker--hollow .ticker__track { gap: 0; padding-right: 0; }

.ticker--hollow .ticker__item {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding-left: var(--s-8);
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: 25px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--fg-gold);
}

/* Hollow type. Guarded, because a browser without text-stroke would
   otherwise render transparent text on a transparent background. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .ticker--hollow .ticker__item {
    color: transparent;
    -webkit-text-stroke: 1px var(--a-gold-64);
  }
}

/* The separator dot sits after every item, so the loop never shows two
   in a row or drops one at the seam. */
.ticker--hollow .ticker__item::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--r-circle);
  background: var(--brand);
  -webkit-text-stroke: 0;
}


/* ==========================================================================
   STEP CARDS
   Full-width stacked cards: numbered label, gold title, plain description.
   ========================================================================== */

.stepcards { display: flex; flex-direction: column; gap: var(--s-4); }

.stepcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-7);
  background: var(--bg-surface);
  background-image: var(--grad-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-left: var(--bw-thick) solid var(--border-gold-strong);
  border-radius: var(--r-md);
  transition: var(--t-colors);
}
.stepcard:hover { border-left-color: var(--brand); background: var(--bg-surface-raised); }

.stepcard__n {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.stepcard__t {
  font-family: var(--font-display);
  font-stretch: var(--wdth-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  color: var(--fg-gold);
}
.stepcard__d {
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
  max-width: 76ch;
}


/* ==========================================================================
   ABOUT
   ========================================================================== */

.about {
  display: grid;
  gap: var(--s-12);
  align-items: start;
}
@media (min-width: 900px) {
  .about { grid-template-columns: 1.15fr 1fr; gap: var(--s-16); }
}

/* Series the book runs markets on - reads as a schedule, not decoration. */
.series { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.series li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  transition: var(--t-colors);
}
.series li:hover { border-color: var(--border-gold); color: var(--fg-default); }
.series li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: var(--r-circle);
  background: var(--brand);
  flex: none;
}

/* Market list - a definition list, because that is what it is. */
.markets-list { display: flex; flex-direction: column; }
.markets-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-2) var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: var(--bw-hairline) solid var(--border-subtle);
}
.markets-list > div:last-child { border-bottom: 0; }
.markets-list dt {
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  font-size: var(--fs-body-sm);
}
.markets-list dd {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
}
.markets-list .tag-when {
  font-family: var(--font-numeric);
  font-size: var(--fs-micro);
  color: var(--fg-gold);
  white-space: nowrap;
  text-align: right;
}


/* ==========================================================================
   LEGAL & SAFETY
   ========================================================================== */

.safety {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.safety__item {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-md);
}
.safety__item .ico { color: var(--fg-gold); flex: none; }
.safety__item b {
  display: block;
  color: var(--fg-strong);
  margin-bottom: var(--s-1);
}
.safety__item p { font-size: var(--fs-body-sm); color: var(--fg-muted); }

.support-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-7);
  border: var(--bw-hairline) solid var(--border-gold);
  border-radius: var(--r-lg);
  background:
    radial-gradient(600px 240px at 12% 0%, var(--a-gold-16), transparent 70%),
    var(--bg-surface);
}
.support-card__body { flex: 1 1 320px; }


/* ==========================================================================
   LEAGUE & MARKET LIST  (About, right column)
   ========================================================================== */

.leagues { display: flex; flex-direction: column; gap: var(--s-5); }

.leagues li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.leagues li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: var(--r-circle);
  background: var(--brand);
}
.leagues b {
  color: var(--fg-gold);
  font-weight: var(--fw-bold);
}

.about__cta { margin-top: var(--s-2); }

/* The support card carries its own fill, so it needs lifting off whichever
   band it lands on rather than inheriting the generic card override. */
.section--alt .support-card {
  background:
    radial-gradient(600px 240px at 12% 0%, var(--a-gold-16), transparent 70%),
    var(--c-obsidian-850);
}
.section--band .support-card {
  background:
    radial-gradient(600px 240px at 12% 0%, var(--a-gold-16), transparent 70%),
    var(--c-obsidian-800);
}


/* ==========================================================================
   TESTIMONIAL WALL
   Three columns drifting upward at different speeds, masked top and bottom
   so cards arrive and leave rather than popping.
   ========================================================================== */

.wall {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  height: 620px;
  overflow: hidden;
  /* The fade is what makes it read as motion rather than a clipped list. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%, #000 14%, #000 86%, transparent 100%);
}
@media (min-width: 680px)  { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wall { grid-template-columns: repeat(3, 1fr); height: 680px; } }

.wall__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  animation: drift-up 46s linear infinite;
  will-change: transform;
}
/* Three things keep the columns from reading as one grid: different speeds,
   a negative delay so each starts mid-cycle, and a static vertical offset so
   they are already misaligned in the very first frame. */
.wall__col:nth-child(2) {
  animation-duration: 58s;
  animation-delay: -19s;
  margin-top: -78px;
}
.wall__col:nth-child(3) {
  animation-duration: 52s;
  animation-delay: -34s;
  margin-top: -156px;
}

/* Columns 2 and 3 only exist on wider screens. */
.wall__col:nth-child(2) { display: none; }
.wall__col:nth-child(3) { display: none; }
@media (min-width: 680px)  { .wall__col:nth-child(2) { display: flex; } }
@media (min-width: 1000px) { .wall__col:nth-child(3) { display: flex; } }

/* Only the column under the cursor pauses - pausing all three at once makes
   the whole wall lurch when you are just reading one card. */
.wall__col:hover { animation-play-state: paused; }

/* The track holds two identical runs, so -50% lands exactly on the seam. */
@keyframes drift-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.tcard {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-lg);
}
.tcard__text {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-default);
}
.tcard__who { display: flex; align-items: center; gap: var(--s-3); }
.tcard__avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-circle);
  background: var(--bg-gold-soft);
  border: var(--bw-hairline) solid var(--border-gold);
  color: var(--fg-gold);
  font-family: var(--font-numeric);
  font-size: var(--fs-caption);
}
.tcard__name { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--fg-strong); }
.tcard__meta { font-size: var(--fs-micro); color: var(--fg-subtle); }
.tcard__stars { display: flex; gap: 2px; color: var(--brand); }
.tcard__stars .ico { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .wall { height: auto; -webkit-mask-image: none; mask-image: none; }
  .wall__col { animation: none; margin-top: 0; }
  /* Without motion the duplicate run is just noise. */
  .wall__col > .tcard:nth-child(n+4) { display: none; }
}




/* ==========================================================================
   PAYMENTS SECTION BACKGROUND
   The casino banner sits behind the payments block. It is held well back -
   this section carries a table and timings, so the image is texture and
   nothing more. The artwork's own centre panel is black, which is where the
   copy lands, so the type stays on flat ground.
   ========================================================================== */

#payments {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--c-obsidian-900);
}

#payments::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/casino.webp") center / cover no-repeat;
  opacity: 0.38;
}

/* Two scrims: one across, so the left-hand copy sits on near-solid ink, and
   one down, welding the top and bottom edges into the neighbouring bands. */
#payments::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(15, 12, 7, 0.96) 0%,
      rgba(15, 12, 7, 0.88) 42%,
      rgba(15, 12, 7, 0.62) 72%,
      rgba(15, 12, 7, 0.52) 100%),
    linear-gradient(180deg,
      var(--c-obsidian-900) 0%,
      rgba(15, 12, 7, 0.35) 16%,
      rgba(15, 12, 7, 0.35) 84%,
      var(--c-obsidian-900) 100%);
}

/* On phones there is no left/right split, so the image drops back further
   and the scrim runs vertically instead. */
@media (max-width: 767px) {
  #payments::before { opacity: 0.28; }
  #payments::after {
    background: linear-gradient(180deg,
      var(--c-obsidian-900) 0%,
      rgba(15, 12, 7, 0.82) 22%,
      rgba(15, 12, 7, 0.86) 78%,
      var(--c-obsidian-900) 100%);
  }
}

/* The cards inside must stay readable against the artwork. */
#payments .card,
#payments .pay,
#payments .note { backdrop-filter: blur(2px); }