/*
 * ============================================================
 *  GRAFT LEAGUE — HOMEPAGE STYLES
 *  index.css
 *
 *  Page: index.html
 *  Depends on: style.css (must be loaded first)
 *
 *  This file contains only the styles unique to the landing
 *  page. Shared tokens, reset, nav, buttons, footer, grain
 *  overlay, cursor and scroll-reveal all live in style.css.
 *
 *  Sections:
 *    1.  Hero section
 *    2.  How it works (steps)
 *    3.  Features grid
 *    4.  Mockup / leaderboard preview section
 *    5.  Social proof (quotes)
 *    6.  Roadmap
 *    7.  Email capture (waitlist)
 * ============================================================
 */


/* ============================================================
   1. HERO SECTION
   Full-viewport-height section with large Bebas Neue headline,
   animated ticker strip, spinning badge, and CTA group.
   ============================================================ */

.hero {
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  padding:        0 2.5rem 4rem;
  padding-top:    100px;  /* Clear the fixed nav */
  position:       relative;
  border-bottom:  2px solid var(--ink);
  overflow:       hidden;
}

/* ----------------------------------------------------------
   Animated ticker strip
   Runs full-width directly under the nav bar.
   Contains repeating text scrolled via CSS animation.
   ---------------------------------------------------------- */
.hero-ticker {
  position:    absolute;
  top:         88px;  /* Sits just below the nav */
  left: 0; right: 0;
  background:  var(--red);
  color:       #fff;
  font-family: var(--font-display);
  font-size:   1rem;
  letter-spacing: 0.15em;
  padding:     0.5rem 0;
  white-space: nowrap;
  overflow:    hidden;
  border-bottom: 2px solid var(--ink);
}

/* The scrolling inner element — duplicated content fills the gap */
.ticker-inner {
  display:   inline-block;
  animation: ticker 22s linear infinite;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* -50% because content is doubled */
}

/* ----------------------------------------------------------
   Eyebrow above the headline
   ---------------------------------------------------------- */
.hero-eyebrow {
  font-size:      0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  1.5rem;
  display:        flex;
  align-items:    center;
  gap:            0.75rem;
}

/* Red line decoration before the eyebrow text */
.hero-eyebrow::before {
  content:    '';
  display:    block;
  width:      32px;
  height:     2px;
  background: var(--red);
}

/* ----------------------------------------------------------
   Main headline — very large Bebas Neue
   Three lines with different colour treatments:
     Line 1: solid ink
     Line 2: solid red
     Line 3: outlined (transparent fill, ink stroke)
   ---------------------------------------------------------- */
.hero-headline {
  font-family:   var(--font-display);
  font-size:     clamp(5rem, 14vw, 13rem);
  line-height:   0.88;
  letter-spacing: 0.01em;
  position:      relative;
  z-index:       2;
}

.hero-headline .line-2 {
  color:   var(--red);
  display: block;
}

.hero-headline .line-3 {
  display:           block;
  -webkit-text-stroke: 2px var(--ink);
  color:             transparent;
}

/* Bottom row: sub-text left, CTA buttons right */
.hero-bottom {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  margin-top:      3rem;
  gap:             2rem;
  flex-wrap:       wrap;
}

/* Italic description text */
.hero-sub {
  font-size:  clamp(1rem, 2vw, 1.25rem);
  font-style: italic;
  color:      var(--muted);
  max-width:  440px;
  line-height: 1.55;
}

.hero-sub strong { color: var(--ink); font-style: normal; }

/* Stacked CTA group (primary + secondary button) */
.hero-cta-group {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  align-items:    flex-end;
}

/* ----------------------------------------------------------
   Spinning circular badge — "< 10 MINS A DAY"
   Outer circle spins; inner content counter-spins to stay upright.
   ---------------------------------------------------------- */
.hero-badge {
  position:        absolute;
  top:             160px;
  right:           2.5rem;
  width:           120px;
  height:          120px;
  background:      var(--yellow);
  border:          2px solid var(--ink);
  border-radius:   50%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  font-family:     var(--font-display);
  animation:       spin-slow 12s linear infinite;
  z-index:         2;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Counter-rotate so the text inside stays readable */
.hero-badge-inner { animation: spin-slow 12s linear infinite reverse; }

.hero-badge-num   { font-size: 2.2rem; line-height: 1; color: var(--ink); }
.hero-badge-label { font-size: 0.75rem; color: var(--ink); letter-spacing: 0.05em; }

/* Dashed horizontal rule at the bottom of the hero */
.hero-diag {
  position:   absolute;
  bottom:     0; left: 0;
  width:      100%;
  height:     3px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0, var(--ink) 20px,
    transparent 20px, transparent 28px
  );
}


/* ============================================================
   2. HOW IT WORKS (steps)
   Four steps in a horizontal grid, separated by vertical borders.
   ============================================================ */

/* Grid of steps — auto-fit with min 220px columns */
.steps {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                   0;
}

/* Individual step card */
.step {
  padding:      2.5rem 2rem;
  border-right: 2px solid var(--ink);
  position:     relative;
}

.step:last-child { border-right: none; }

/* Big faded number — transitions to yellow on hover */
.step-num {
  font-family:  var(--font-display);
  font-size:    5rem;
  line-height:  1;
  color:        var(--border);
  margin-bottom: 0.5rem;
  transition:   color 0.2s;
}

.step:hover .step-num { color: var(--yellow); }

/* Step heading */
.step-title {
  font-family:   var(--font-sub);
  font-size:     1.15rem;
  margin-bottom: 0.75rem;
  color:         var(--ink);
}

/* Step description */
.step-desc {
  font-size:   0.88rem;
  color:       var(--muted);
  line-height: 1.6;
}


/* ============================================================
   3. FEATURES GRID
   2-column grid of feature cards with icon + title + description.
   Alternate right-border is removed to avoid double borders.
   ============================================================ */

.features {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
}

/* Individual feature tile */
.feature {
  padding:       3rem 2.5rem;
  border-right:  2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  position:      relative;
  overflow:      hidden;
  transition:    background 0.2s;
}

/* Even tiles have no right border (they're already at the edge) */
.feature:nth-child(even)   { border-right: none; }

/* Bottom two tiles have no bottom border */
.feature:nth-last-child(-n+2) { border-bottom: none; }

.feature:hover { background: var(--paper); }

/* Icon */
.feature-icon {
  font-size:   2.5rem;
  margin-bottom: 1.25rem;
  display:     block;
  transition:  transform 0.2s;
}

.feature:hover .feature-icon { transform: scale(1.15) rotate(-5deg); }

/* Feature heading */
.feature-title {
  font-family:   var(--font-sub);
  font-size:     1.05rem;
  margin-bottom: 0.6rem;
  color:         var(--ink);
}

/* Feature description */
.feature-desc {
  font-size:   0.83rem;
  color:       var(--muted);
  line-height: 1.6;
}


/* ============================================================
   4. MOCKUP / LEADERBOARD PREVIEW SECTION
   Two-column split: dark left panel with copy, light right
   panel with a fake leaderboard widget.
   ============================================================ */

.mockup-section {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            540px;
}

/* Dark left panel */
.mockup-left {
  background:  var(--ink);
  color:       var(--cream);
  padding:     4rem 3rem;
  display:     flex;
  flex-direction: column;
  justify-content: center;
  border-right: 2px solid var(--ink);
}

/* Override section label colour inside dark panel */
.mockup-left .section-label { color: var(--yellow); }
.mockup-left .section-title { color: var(--cream); margin-bottom: 1.5rem; }
.mockup-left p { color: #aaa; font-size: 0.9rem; line-height: 1.7; max-width: 380px; }

/* Light right panel */
.mockup-right {
  background:      var(--paper);
  padding:         3rem 2rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* ----------------------------------------------------------
   Fake leaderboard widget
   A small dark card that previews the leaderboard UI.
   Uses inline dark colours intentionally — this is a 
   "screenshot" of the dark app sitting inside the light page.
   ---------------------------------------------------------- */
.lb-widget {
  background:    #111;
  border:        2px solid #333;
  border-radius: 12px;
  padding:       1.5rem;
  width:         100%;
  max-width:     320px;
  font-family:   var(--font-display);
  box-shadow:    8px 8px 0 var(--ink);
}

.lb-widget-title {
  font-size:     1.1rem;
  color:         var(--yellow);
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.75rem;
}

/* Leaderboard row */
.lb-row-w {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  padding:     0.6rem 0;
  border-bottom: 1px solid #1e1e1e;
}

.lb-row-w:last-child { border-bottom: none; }

/* Rank column — medal or number */
.lb-rank { font-size: 1rem; color: #555; width: 24px; }

/* Circular avatar */
.lb-av {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  flex-shrink:     0;
}

/* Name */
.lb-name { font-size: 0.95rem; color: #f0f0f0; flex: 1; letter-spacing: 0.05em; }

/* Score number */
.lb-score { font-size: 1.1rem; }


/* ============================================================
   5. SOCIAL PROOF (quotes section)
   Yellow background section with headline and quote cards.
   ============================================================ */

.social-section {
  background:    var(--yellow);
  border-bottom: 2px solid var(--ink);
  padding:       5rem 2.5rem;
  overflow:      hidden;
}

/* Large centred heading */
.social-headline {
  font-family: var(--font-display);
  font-size:   clamp(3rem, 8vw, 7rem);
  line-height: 0.9;
  text-align:  center;
  color:       var(--ink);
  margin-bottom: 3rem;
}

/* Grid of quote cards */
.quotes {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   1.5rem;
}

/* Individual quote card */
.quote-card {
  background:  var(--cream);
  border:      2px solid var(--ink);
  padding:     1.75rem;
  position:    relative;
  transition:  transform 0.15s;
}

/* Offset shadow on hover */
.quote-card:hover {
  transform:  translate(-3px, -3px);
  box-shadow: 5px 5px 0 var(--ink);
}

/* Star rating */
.quote-stars {
  color:         var(--red);
  font-size:     0.85rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.1em;
}

/* Quote text */
.quote-text {
  font-size:     0.9rem;
  line-height:   1.65;
  font-style:    italic;
  margin-bottom: 1rem;
  color:         var(--ink);
}

/* Attribution */
.quote-author {
  font-size:      0.7rem;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--muted);
}


/* ============================================================
   6. ROADMAP
   Four-phase horizontal scroll of roadmap items.
   ============================================================ */

.roadmap-section {
  padding:       6rem 2.5rem;
  border-bottom: 2px solid var(--ink);
  background:    var(--paper);
}

/* Horizontal scrollable row of phases */
.roadmap-grid {
  display:    flex;
  gap:        0;
  margin-top: 3rem;
  overflow-x: auto;  /* Allows horizontal scroll on small screens */
}

/* Individual roadmap phase */
.roadmap-item {
  flex:         1;
  min-width:    180px;
  padding:      2rem 1.5rem;
  border-right: 2px solid var(--ink);
  position:     relative;
}

.roadmap-item:last-child { border-right: none; }

/* "Phase 1 — Now" small label */
.roadmap-phase {
  font-size:      0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  0.5rem;
}

/* Phase title — e.g. "Calisthenics Core" */
.roadmap-title {
  font-family:   var(--font-sub);
  font-size:     1rem;
  margin-bottom: 0.75rem;
  color:         var(--ink);
}

/* Bulleted list of features in each phase */
.roadmap-items {
  list-style: none;
}

.roadmap-items li {
  font-size:     0.82rem;
  color:         var(--muted);
  padding:       0.3rem 0;
  border-bottom: 1px dashed var(--border);
  line-height:   1.4;
}

/* Red arrow bullet */
.roadmap-items li::before { content: '→ '; color: var(--red); }


/* ============================================================
   7. EMAIL CAPTURE (waitlist)
   Two-column layout: headline left, form right.
   ============================================================ */

.email-section {
  padding:       6rem 2.5rem;
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           4rem;
  align-items:   center;
  border-bottom: 2px solid var(--ink);
}

.email-left .section-title { margin-bottom: 1rem; }

.email-left p {
  color:       var(--muted);
  font-size:   0.9rem;
  line-height: 1.65;
}

/* Form layout — column of fields */
.email-form {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

/* Input + button on the same row */
.email-form-row { display: flex; gap: 0; }

/* Email text input */
.email-input {
  flex:        1;
  background:  #fff;
  border:      2px solid var(--ink);
  border-right: none;  /* Merges with the submit button border */
  font-size:   0.9rem;
  padding:     0.9rem 1.2rem;
  outline:     none;
  transition:  border-color 0.15s;
  color:       var(--ink);
}

.email-input:focus       { border-color: var(--red); }
.email-input::placeholder { color: #bbb; }

/* Submit button */
.email-submit {
  background:     var(--red);
  color:          #fff;
  border:         2px solid var(--ink);
  font-family:    var(--font-display);
  font-size:      1.1rem;
  letter-spacing: 0.08em;
  padding:        0 1.5rem;
  cursor:         pointer;
  transition:     background 0.15s;
  white-space:    nowrap;
}

.email-submit:hover { background: var(--ink); }

/* Small print below the form */
.email-note { font-size: 0.72rem; color: var(--muted); }

/* Success state — shown after successful submission */
.email-success {
  display:    none;  /* Revealed via JS on success */
  text-align: center;
  padding:    2rem;
  background: var(--green);
  color:      #fff;
  border:     2px solid var(--ink);
}

.email-success h3 {
  font-family:   var(--font-display);
  font-size:     1.8rem;
  margin-bottom: 0.5rem;
}


/* ============================================================
   MOBILE OVERRIDES (homepage)
   ============================================================ */

@media (max-width: 768px) {

  .hero             { padding: 0 1.25rem 3rem; }
  .hero-badge       { width: 90px; height: 90px; top: 150px; right: 1.25rem; }
  .hero-badge-num   { font-size: 1.6rem; }

  /* Steps stack vertically */
  .step {
    border-right:  none;
    border-bottom: 2px solid var(--ink);
    padding:       2rem 1.25rem;
  }
  .step:last-child { border-bottom: none; }

  /* Features become single column */
  .features { grid-template-columns: 1fr; }
  .feature  { border-right: none !important; }

  /* Mockup — single column, hide the widget */
  .mockup-section { grid-template-columns: 1fr; }
  .mockup-right   { display: none; }

  /* Email — single column */
  .email-section {
    grid-template-columns: 1fr;
    gap:     2rem;
    padding: 4rem 1.25rem;
  }

  /* Email form stacks on mobile */
  .email-form-row   { flex-direction: column; }
  .email-input      { border-right: 2px solid var(--ink); }
  .email-submit     { padding: 0.9rem; }
}