/* =====================================================================
   NORTHERN STICKS: home.css (bold modern)
   1 full-screen video hero · 2 Blaze ticker · 3 "Sticks we like" rail ·
   4 product spotlight · 5 bento grid. Pre-launch swaps 3 + 4 for the
   coming-soon section (3a).
   Shared tokens and components come from site.css (docs/FOUNDATION-API.md).
   Every animation here is guarded for reduced motion.
   ===================================================================== */

/* ---------- 1. Hero ---------- */
/* Extra shade on top of the foundation scrim: strong at the bottom and on the left,
   where the headline, lede and buttons sit. It lives inside the media box so it
   follows the rounded inset as you scroll past. */
.home-hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 16, 10, 0.72) 0%, rgba(15, 16, 10, 0.38) 38%, rgba(15, 16, 10, 0) 72%),
    linear-gradient(0deg, rgba(15, 16, 10, 0.9) 0%, rgba(15, 16, 10, 0.55) 26%, rgba(15, 16, 10, 0) 58%);
}
.home-hero .hero__media > video { object-position: 50% 45%; }
.home-hero__content { justify-items: start; gap: clamp(14px, 1.8vw, 26px); }
/* Headline (owner, 2026-10-13): "Well made, well played." big, with "Crafted for the game." as a smaller Blaze line */
.home-hero__title { max-width: 12ch; font-size: clamp(3.2rem, 9vw, 10.25rem); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.home-hero__sub { display: block; margin-top: 0.18em; font-size: 0.42em; letter-spacing: 0.01em; color: #FF671F; white-space: nowrap; }
.home-hero__line2 { display: block; }
.home-hero__lede { max-width: 44ch; font-size: clamp(1.05rem, 1.35vw, 1.3rem); }
.home-hero__actions { gap: 12px; }
/* The outline button sits over footage: give it a dark glass fill so its label always reads */
.home-hero__ghost { --btn-bg: rgba(15, 16, 10, 0.4); --btn-bd: rgba(247, 245, 238, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.home-hero__foot {
  justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  margin-top: clamp(8px, 2vw, 28px); padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid rgba(247, 245, 238, 0.24);
}
.home-hero__serve {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #E9E4D2;
}
.home-hero__serve-label { color: #FF671F; }
.home-hero__cue {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 2px;
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #F7F5EE; text-decoration: none; border-radius: var(--radius-sm);
}
.home-hero__cue:hover { color: #FF671F; }
.home-hero__cue:focus-visible { outline: 2px solid #FF671F; outline-offset: 4px; }
.home-hero__cue-line { position: relative; display: block; width: 2px; height: 34px; overflow: hidden; background: rgba(247, 245, 238, 0.28); border-radius: 2px; }
.home-hero__cue-line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 45%; background: #FF671F; border-radius: 2px; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .home-hero__cue-line::after { animation: home-cue 1.9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
}
@keyframes home-cue { 0% { transform: translateY(-110%); } 60%, 100% { transform: translateY(230%); } }
@media (max-width: 620px) {
  .home-hero__actions { width: 100%; }
  .home-hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .home-hero__serve { font-size: 0.7rem; }
  .home-hero__cue { display: none; } /* phones scroll by thumb; keep the bottom row short */
}

/* ---------- 2. Ticker band ---------- */
/* Tilted Blaze band that overlaps the bottom edge of the hero a little */
.home-ticker { position: relative; z-index: 3; margin-top: clamp(-34px, -2.4vw, -16px); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); }

/* ---------- 3a. Pre-launch: coming soon (block styles in site.css) ---------- */
/* Same spot as the rail, so it clears the tilted ticker the same way */
.home-soon { padding-top: calc(var(--space-section) + 12px); }

/* ---------- 3. Sticks we like (rail) ---------- */
.home-picks { padding-top: calc(var(--space-section) + 12px); }
.home-picks__rail { --rail-item: clamp(272px, 27vw, 380px); }
.home-picks__side { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.home-picks__note { margin-top: 18px; }
.home-picks .p-card__title { font-size: clamp(1.1rem, 1.45vw, 1.35rem); }
@media (max-width: 560px) {
  .home-picks__rail { --rail-item: 76vw; }
  .home-picks .rail__nav { display: none; } /* swipe on phones; site.js keeps the keyboard and button support on larger screens */
}

/* ---------- 4. Spotlight ---------- */
.home-spot { overflow: hidden; }
.home-spot__grid {
  display: grid; align-items: center; gap: clamp(36px, 5.5vw, 88px);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}
.home-spot__visual { position: relative; padding-bottom: clamp(20px, 3vw, 40px); }
.home-spot__stage { aspect-ratio: 1 / 1; display: block; }
/* Giant spec number set faintly behind the stick (real catalogue weight) */
.home-spot__ghost {
  position: absolute; z-index: 0; top: 5%; right: 6%; max-width: 92%;
  font-size: clamp(5rem, 15vw, 15rem); font-weight: 900; font-stretch: 62%; line-height: 0.8; letter-spacing: -0.03em;
  text-transform: uppercase; white-space: nowrap; color: rgba(31, 33, 20, 0.08); pointer-events: none;
}
/* The stick runs corner to corner, bigger than the panel and cropped by it.
   multiply on the wrapper (not the img) so the white photo ground melts into the Snow stage
   even while GSAP moves the wrapper for parallax. */
.home-spot__float {
  position: absolute; z-index: 1; inset: -14%; display: grid; place-items: center;
  mix-blend-mode: multiply; pointer-events: none;
}
.home-spot__img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
  rotate: -4deg; transition: scale 900ms var(--ease-out);
}
.home-spot__stage:hover .home-spot__img { scale: 1.04; }
.home-spot__stage .stage__tag { z-index: 2; }
/* Small second stage: the blade close-up, overlapping the corner */
.home-spot__detail {
  position: absolute; z-index: 2; right: clamp(-28px, -2vw, -8px); bottom: 0; width: 34%; aspect-ratio: 1 / 1;
  border: 6px solid var(--bg-2);
}
.home-spot__text { display: grid; justify-items: start; gap: clamp(16px, 1.8vw, 24px); }
.home-spot__title { max-width: 12ch; }
.home-spot__lede { max-width: 40ch; }
.home-spot__numbers { justify-self: stretch; }
.home-spot__numbers .big-number__value { font-size: clamp(2.6rem, 4.8vw, 4.6rem); }
.home-spot__numbers > .big-number { padding-top: clamp(14px, 1.6vw, 22px); }
.home-spot__specs { justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; }
.home-spot__spec { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.home-spot__spec dt { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.home-spot__spec dd { margin: 0; font-weight: 650; line-height: 1.35; }
.home-spot__buy { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: 6px; }
.home-spot__price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.home-spot__price .price { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.home-spot__actions { align-items: center; gap: 12px 16px; }
.home-spot__pick { margin: 0; flex-basis: 100%; }
.home-spot__warranty { display: flex; align-items: flex-start; gap: 14px; max-width: 52ch; margin: 0; }
.home-spot__badge {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #FF671F; color: #FF671F; font-size: 0.95rem; font-weight: 600;
}
@media (max-width: 900px) {
  .home-spot__grid { grid-template-columns: minmax(0, 1fr); }
  .home-spot__visual { max-width: 620px; width: 100%; justify-self: center; }
  .home-spot__detail { right: 10px; width: 32%; }
}
@media (max-width: 480px) {
  .home-spot__specs { grid-template-columns: minmax(0, 1fr); }
  .home-spot__numbers > .big-number { padding-top: 14px; }
}

/* ---------- 5. Bento ---------- */
/* Room above the grid for the players breaking out of the sell tile */
.home-bento__head { margin-bottom: clamp(84px, 10vw, 150px); }
@media (max-width: 620px) { .home-bento__head { margin-bottom: 124px; } }
/* Rows keep the foundation height but may grow if a tile's text needs more room */
@media (min-width: 621px) { .home-bento__grid { grid-auto-rows: minmax(var(--bento-row), auto); } }
@media (min-width: 1001px) {
  .home-bento__grid { grid-template-columns: 1.45fr 1.45fr 1.05fr 1.05fr; }
  .home-bento__grid > .home-sell { grid-area: 1 / 1 / 3 / 3; }
  .home-bento__grid > .home-golf { grid-area: 1 / 3 / 3 / 4; }
  .home-bento__grid > .home-text { grid-area: 1 / 4 / 3 / 5; }
  .home-bento__grid > .home-pickup { grid-area: 3 / 1 / 4 / 3; }
  .home-bento__grid > .home-ship { grid-area: 3 / 3 / 4 / 5; }
}

/* 5a. Sell us your gear: bold camo + the players breaking out of the top edge */
.home-sell { --cutout-h: 114%; color: #F7F5EE; text-decoration: none; }
/* Extra darkening on the left, under the text (camo overlay already darkens the bottom) */
.home-sell .tile__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(31, 33, 20, 0.62) 0%, rgba(31, 33, 20, 0.3) 48%, rgba(31, 33, 20, 0) 75%);
}
/* Anchored just past the right edge so the left player's legs stay clear of the text column */
.home-sell__cutout { right: -1%; z-index: 2; }
.home-sell__body { max-width: 40%; }
.home-sell__title { font-size: clamp(2.4rem, 3.9vw, 4.1rem); font-stretch: 72%; }
.home-sell__text { color: #E9E4D2; }
.home-sell__btn { justify-self: start; margin-top: 6px; pointer-events: none; }
a.home-sell:hover .home-sell__btn, a.home-sell:focus-visible .home-sell__btn { --btn-bg: #F7F5EE; --btn-fg: #1F2114; }
@media (max-width: 1000px) {
  .home-sell__body { max-width: 44%; }
}
@media (max-width: 620px) {
  /* One column: players sit up top (still breaking out), text below on the darkest part */
  .bento > .home-sell { min-height: 560px; }
  .home-sell__cutout { --cutout-h: 64%; top: -20%; bottom: auto; right: 0; }
  .home-sell__body { max-width: none; }
  .home-sell .tile__media::before { background: linear-gradient(180deg, rgba(31, 33, 20, 0) 30%, rgba(31, 33, 20, 0.5) 100%); }
}

/* 5b. Golf: clubhouse loop */
.home-golf .tile__media > video { object-position: 40% 50%; }
.home-golf__title { font-size: clamp(1.6rem, 2.3vw, 2.35rem); }
.home-golf__btn { justify-self: start; margin-top: 4px; }

/* 5c. Questions? Text us (photo) */
.home-text { text-decoration: none; }
.home-text .tile__media > img { object-position: 46% 16%; }
.home-text__title { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.home-text__num { display: block; margin-top: 4px; font-size: clamp(1.4rem, 2.1vw, 2rem); font-stretch: 62%; letter-spacing: 0; white-space: nowrap; color: #FF671F; }
/* Blaze number (large text) on a deeper scrim: in the text zone it clears 3:1 even over pure white,
   and far more over the photo's dark lower half */
.home-text .tile__media::after {
  background: linear-gradient(180deg, rgba(20, 22, 12, 0) 0%, rgba(20, 22, 12, 0.15) 30%, rgba(20, 22, 12, 0.86) 56%, rgba(20, 22, 12, 0.95) 100%);
}

/* 5d. Free pickup (Snow tile with a dashed route to a Blaze pin) */
.home-pickup { overflow: hidden; }
.home-pickup__route { position: absolute; z-index: 0; top: 10%; right: 4%; width: min(38%, 280px); height: auto; color: rgba(31, 33, 20, 0.5); }
.home-pickup__body { max-width: 56%; }
.home-pickup__title { font-size: clamp(2.2rem, 4vw, 3.9rem); }
@media (max-width: 620px) {
  .home-pickup { padding-top: 120px; }
  .home-pickup__route { top: 18px; width: 58%; }
  .home-pickup__body { max-width: none; }
}

/* 5e. Shipping: big number on Blaze */
.home-ship { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px clamp(18px, 2.4vw, 36px); }
.home-ship__number { align-self: stretch; align-content: space-between; }
.home-ship__number .big-number__value { font-size: clamp(3.4rem, 6.6vw, 7rem); color: #1F2114; }
.home-ship__number .big-number__unit { color: #1F2114; }
.home-ship__number .big-number__label { color: #1F2114; }
.home-ship__title { font-size: clamp(1.6rem, 2.4vw, 2.4rem); }
.home-ship__except { display: block; font-size: 0.62em; letter-spacing: 0; }
.home-ship__body { max-width: none; }
@media (max-width: 620px) {
  .home-ship { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-hero__cue-line::after { animation: none !important; transform: none; }
  .home-spot__stage:hover .home-spot__img { scale: none; }
}
html.reduce-motion .home-hero__cue-line::after { animation: none !important; }