/* Pick2Stock League: the landing page (#/, src/views/home.js). Gradient hero, the four-step
   "How Pick2Stock Works" section, This week preview,
   standings preview, prizes, rules in brief and the closing call to action. Built on tokens.css and
   system.css; question cards reuse .qcard from views.css. */

/* ---------- film ---------- */

.film { position: absolute; inset: 0; overflow: hidden; background: #0f0f0f; }
.film__poster, .film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}
.film__video { opacity: 0; transition: opacity 900ms ease; }
.film.is-playing .film__video { opacity: 1; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  /* user, 2026-09-17: the film fills the whole screen again, then fades out as you scroll */
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}
/* User, 2026-09-15: no video, text and buttons centered, and no orange glow. A quiet neutral gradient:
   slightly lighter at the top, settling into --bg, so the next section joins without a band. */
/* user, 2026-09-20: "fix blur". Measured on the live page: the hero's last rows rendered rgb(8,8,8)
   against a page background of rgb(10,10,10), a hard two-level step, and the near-black part of the
   gradient dithered in alternating rows, which reads as a murky blurred band. A gradient that only
   arrives at --bg on its final pixel cannot land exactly, so it reaches --bg at 78% and the rest is
   one flat colour: flat regions do not dither and the join with the next section has no step. */
.hero--gradient {
  background: linear-gradient(180deg, #151515 0%, #0f0f0f 42%, var(--bg) 78%, var(--bg) 100%);
}
/* User, 2026-09-15: the FPV drone clip plays behind the headline (src/ui/film.js). The gradient above
   stays underneath as the fallback. The scrim is an even dark tint so white type reads over the
   bright sky shots, plus a short fade into --bg at the very bottom. No blur, no coloured glow. */
/* --hero-fade goes 1 -> 0 over the first part of the scroll (set in src/views/home.js); the neutral
   gradient underneath is what stays. */
.hero__film, .hero__scrim {
  opacity: var(--hero-fade, 1);
  will-change: opacity;
  /* user, 2026-09-18: "fade is bad you can still see the line", 2026-09-20: "fix blur". No mask here
     any more. A mask ends by rounding alpha to whole 8-bit levels, and measurement showed both masked
     layers dropping their last level on the same row, which is exactly the hard line being complained
     about, wherever the mask happened to end. The fade is done instead by .hero::after, which paints
     --bg itself and therefore lands on the page background exactly. */
}
.hero__film { position: absolute; inset: 0; z-index: -2; }
.hero__film .film { background: transparent; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .48) 0%, rgba(10, 10, 10, .06) 24%, rgba(10, 10, 10, .22) 62%, rgba(10, 10, 10, .5) 100%),
    radial-gradient(62% 52% at 50% 46%, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 100%),
    /* user, 2026-09-20: this tint was rgba(8, 8, 8, .58), darker than --bg, so every pixel it touched
       sat below the page background and any edge it had showed up as a step. It matches --bg now. */
    rgba(10, 10, 10, .58);
}
/* The hero's bottom fade. It paints --bg on top of the film and the scrim and finishes fully opaque
   well before the hero ends, so the last sixth of the hero is byte-identical to the page background
   and there is nothing for a join to step across. The ramp is long on purpose: spread over ~45% of the
   hero, each 8-bit level covers tens of pixels, which is invisible, where a short ramp collapses into
   one hard row. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 58%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(10, 10, 10, 0) 0%,
    rgba(10, 10, 10, .26) 32%,
    rgba(10, 10, 10, .62) 54%,
    rgba(10, 10, 10, .9) 70%,
    var(--bg) 80%,
    var(--bg) 100%);
}
/* User, 2026-09-15: "simplify the hero massively". Headline, one line, two buttons, and a lot of empty
   space around them. Nothing else belongs here. */
.hero__inner {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: calc(1440px + var(--gutter) * 2);
  margin-inline: auto;
  /* user, 2026-09-19 and 2026-09-20, in order: "centre and move the text up a bit", "move header text
     down its way too high", "move text more down", "text too far down", "the text isnt centred".
     The block is centred in the hero, so the difference between these two paddings is what pushes it
     off centre: top minus bottom, halved. They are equal now, so it sits dead centre and the fixed
     header floats over it rather than pushing it down. */
  padding: clamp(40px, 6vh, 90px) var(--gutter);
  text-align: center;
}
.hero__title {
  /* user, 2026-09-15: "text is way too big" (was clamp(2.5rem, 12.9vw, 10.5rem), 168px at 1440) */
  font-size: clamp(2.25rem, 1rem + 5.6vw, 6rem);
  line-height: .92;
  letter-spacing: -0.045em;
  /* user, 2026-09-18: "uncapitalise this", so the headline is sentence case like every other heading */
  text-wrap: nowrap;
}
.hero__line { display: block; }
.hero__lead {
  margin-top: clamp(28px, 4.5vh, 48px);
  max-width: 34rem;
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(242, 242, 242, .86);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
/* wrap only between sentences */
.hero__lead > span { white-space: nowrap; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(40px, 6vh, 64px);
}
.hero__btn { min-width: 190px; font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 719px) {
  .hero__actions { width: 100%; max-width: 22rem; flex-direction: column; align-items: stretch; }
  .hero__btn { min-width: 0; }
}

/* ---------- How it works: four text steps ---------- */

.hw { padding-block: 0; } /* the x-slider pin carries the spacing */
/* the four steps are x-slider slides (.xs-slide in system.css) */
.hw__step { transition: scale var(--dur) ease-out; }
.hw__step:hover { scale: 1.01; }
.hw__img { margin: 0 0 12px; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); }
.hw__img img { width: 100%; height: 100%; object-fit: cover; }
.hw__n { font-size: 2.5rem; font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--faint); }
.hw__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--text); }
.hw__text { color: var(--muted); line-height: 1.65; }

/* ---------- This week ---------- */

.home-week { border-top-color: var(--line); }

.home-qsk { height: 300px; border-radius: var(--r-card); }
@media (max-width: 679px) {
  .home-qgrid > li:nth-child(n + 5) { display: none; }
}
.home-q__pill { min-height: 34px; padding: 0 14px 0 16px; gap: 4px; font-size: .8125rem; pointer-events: none; }
.home-q__pill svg { width: 14px; height: 14px; transition: translate var(--dur) var(--ease-out); }
.home-q:hover .home-q__pill { filter: brightness(1.14); }
.home-q:hover .home-q__pill svg { translate: 2px 0; }
.home-q .qcard__when { color: var(--muted); }
.home-week__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.home-week__foot:empty { display: none; }
.home-week__foot .note { max-width: 36rem; }

/* ---------- standings preview ---------- */

.home-standings .vsec__intro { position: static; }
@media (min-width: 960px) {
  .home-standings .vsec--split { align-items: center; }
}
.home-standings__table .table th { background: var(--bg-2); }
.table-note { margin-top: 14px; font-size: .8125rem; color: var(--muted); }

/* ---------- prizes ---------- */

.home-prizes__grid { display: grid; gap: 56px; }
@media (min-width: 960px) {
  .home-prizes__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
}
.home-prizes__copy { display: grid; gap: 22px; align-content: start; }
.prize-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 14px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-input);
  background: rgba(255, 255, 255, .02);
  font-weight: 600;
  color: var(--text);
}
.prize-status .vsec__link { margin-left: auto; font-weight: 500; font-size: .875rem; color: var(--text-2); }
.prize-status__t.is-loading { color: var(--muted); font-weight: 500; }
.prize-steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.prize-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.prize-step__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ember-line);
  background: var(--ember-tint);
  color: var(--ember-2);
  font-size: .8125rem;
  font-weight: 600;
}
.prize-step__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--text); }
.prize-step__text { margin-top: 6px; color: var(--muted); line-height: 1.6; }
.prize-elig { max-width: 38rem; }
.home-prizes__visual { min-width: 0; }

/* ---------- rules in brief ---------- */

/* the six rules are x-slider slides (.xs-slide in system.css) */
.brief { transition: scale var(--dur) ease-out; }
.brief:hover { scale: 1.01; }
.brief__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.brief__n { font-size: clamp(2.5rem, 1.9rem + 1.3vw, 3.25rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--faint); }
.brief__title { font-size: clamp(1.25rem, 1rem + .7vw, 1.75rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: var(--text); }
.brief__text { max-width: 30rem; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); color: var(--muted); line-height: 1.65; }
html.motion .brief[data-reveal].is-settled { transition: scale var(--dur) ease-out; }

/* ---------- closing call to action ---------- */

.home-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(112px, 16vw, 220px);
  border-top: 1px solid var(--line);
  text-align: center;
  background: var(--bg);
}
/* user, 2026-09-15: "remove this image" (the monolith photo and its orange glow behind "Make the call.") */
.home-cta__inner { display: grid; justify-items: center; gap: 22px; }
/* on the shared scale: .h-1 supplies the size, so the closing CTA never outgrows the hero */
.home-cta__title { line-height: .95; }
.home-cta__lead { max-width: 34rem; color: rgba(242, 242, 242, .84); }
.home-cta .hero__actions { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .hw__step:hover, .brief:hover { scale: 1; }
}

/* wider slides so the four steps travel a real distance (user, 2026-09-18) */
#how-it-works .xs__track > .hw__step { --xs-w: clamp(340px, 44vw, 640px); }
#how-it-works .hw__n { font-size: clamp(2.75rem, 2rem + 1.6vw, 3.75rem); }
#how-it-works .hw__title { font-size: clamp(1.375rem, 1rem + .9vw, 2rem); }
#how-it-works .hw__text { max-width: 32rem; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); }

/* step animations (src/ui/steps/*): a fixed-height strip above each step's number, left aligned, no box */
.hw__art { height: clamp(88px, 12.5vh, 128px); margin-bottom: 14px; }
.hw__art.narr { display: block; }
.hw__art .narr__top, .hw__art .narr__cap { display: none; }
.hw__art .narr__svg { display: block; width: 100%; height: 100%; }

/* short screens (laptops at 720 to 800px tall, small phones): a smaller animation strip and tighter
   pin gaps so the How it works slider still pins instead of falling back to a swipe (2026-09-19) */
@media (max-height: 820px) {
  #how-it-works .xs__pin { gap: clamp(14px, 2.6vh, 40px); }
  .hw__art { height: clamp(56px, 10vh, 96px); margin-bottom: 10px; }
}
@media (max-height: 700px) {
  #how-it-works .xs__pin { gap: 12px; }
  #how-it-works .section-head__main { gap: 10px; }
  .hw__art { height: 48px; margin-bottom: 8px; }
}

/* the six rule demonstrations (src/ui/rules/index.js), same strip treatment as the steps */
.brief__art { height: clamp(76px, 10.5vh, 108px); margin-bottom: 12px; }
.brief__art.narr { display: block; }
.brief__art .narr__top, .brief__art .narr__cap { display: none; }
.brief__art .narr__svg { display: block; width: 100%; height: 100%; }
@media (max-height: 820px) { .brief__art { height: clamp(60px, 9vh, 88px); margin-bottom: 8px; } }
@media (max-height: 700px) { .brief__art { height: 52px; margin-bottom: 6px; } }