/*
  Gone Goat — styles.css

  Structure:
    1.  Design tokens
    2.  Reset + base
    3.  Typography scale
    4.  Layout primitives
    5.  Buttons
    6.  Focus styles (accessibility)
    7.  Site header
    8.  Hero section
    9.  Content sections (What it is, How it plays, Who it's for)
    10. Player count section
    11. Email signup section
    12. About section
    13. Footer
    14. Sticky CTA bar
    15. Utilities
    16. Responsive overrides
*/


/* =============================================================
   1. DESIGN TOKENS
   All colors, type, spacing, and radius in one place.
   Change the accent or bg here and it ripples everywhere.
============================================================= */

:root {
  /* --- Background layers --- */
  --bg:          #0f0e0d;   /* Main background — warm near-black */
  --bg-alt:      #141210;   /* Alternating section background */
  --bg-card:     #1c1a17;   /* Card / panel surfaces */
  --bg-input:    #242018;   /* Form input background */

  /* --- Brand colors — drawn from the game art's fire palette --- */
  --accent:      #f97316;   /* Primary orange */
  --accent-warm: #fbbf24;   /* Secondary amber / logo yellow */
  --accent-glow: rgba(249, 115, 22, 0.18);

  /* --- Text --- */
  --text:        #f5f1eb;   /* Warm off-white — slightly tinted so it reads softer */
  --text-muted:  #87817a;   /* Secondary / captions */
  --text-on-accent: #0f0e0d; /* Text placed directly on orange */

  /* --- Chrome --- */
  --border:      #2c2822;
  --border-hover: #4a4035;

  /* --- Typography --- */
  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Geometry --- */
  --radius:      8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --- Layout --- */
  --max-width:   680px;
  --section-v:   4.5rem;
  --section-h:   1.25rem;

  /* --- Motion --- */
  --ease:        160ms ease;
  --ease-slide:  300ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* =============================================================
   2. RESET + BASE
============================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /*
    scroll-padding-top accounts for the sticky header height (64px)
    so anchor jumps (#signup etc.) don't land under the nav.
  */
  scroll-padding-top: 72px;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;     /* 17px — slightly larger for readability at game-night lighting */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--ease);
}

a:hover {
  opacity: 0.82;
}


/* =============================================================
   3. TYPOGRAPHY SCALE
============================================================= */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Hero title — clamp keeps it readable from 320px to desktop */
h1 {
  font-size: clamp(3.75rem, 16vw, 7.5rem);
}

h2 {
  font-size: clamp(1.75rem, 5.5vw, 2.5rem);
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: var(--font-body);
  margin-bottom: 0.75rem;
}

p {
  color: var(--text);
  max-width: 62ch;
}

p + p {
  margin-top: 1rem;
}

em {
  font-style: italic;
  color: var(--text-muted);
}


/* =============================================================
   4. LAYOUT PRIMITIVES
============================================================= */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--section-h);
}

.section {
  padding-block: var(--section-v);
}

.section-alt {
  background-color: var(--bg-alt);
}


/* =============================================================
   5. BUTTONS
   Two variants: primary (filled orange) and outline.
   Three sizes: default, lg, sm.
============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background-color var(--ease),
    border-color var(--ease),
    box-shadow var(--ease),
    transform var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

/* Primary: filled orange */
.btn-primary {
  background-color: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

.btn-primary:hover {
  background-color: #e8650c;
  border-color: #e8650c;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.22);
  opacity: 1;
}

/* Outline: transparent with border */
.btn-outline {
  background-color: transparent;
  color: var(--accent);
  border-color: var(--border);
}

.btn-outline:hover {
  border-color: var(--accent);
  opacity: 1;
}

/* Size modifiers */
.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: var(--radius-lg);
}

.btn-sm {
  padding: 0.5rem 1.125rem;
  font-size: 0.875rem;
}


/* =============================================================
   6. FOCUS STYLES (accessibility)
   Keyboard users get a clear visible ring.
   Mouse users don't — :focus-visible handles the split.
============================================================= */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

:focus:not(:focus-visible) {
  outline: none;
}


/* =============================================================
   7. SITE HEADER
   Sticky. Logo + nav CTA. Frosted glass on scroll.
============================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(15, 14, 13, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--ease),
    border-color var(--ease);
}

/* JS adds .scrolled after 20px scroll */
.site-header.scrolled {
  background-color: rgba(15, 14, 13, 0.96);
  border-bottom-color: var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  text-decoration: none;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-warm);
  /* Matches the warm logo color from the game art */
}


/* =============================================================
   8. HERO SECTION
============================================================= */

.section-hero {
  text-align: center;
  padding-block: 3rem 5rem;

  /*
    Radial glow echoes the orange fire halo in the artwork.
    Safe to remove this once you have a real background image.
  */
  background:
    radial-gradient(ellipse 80% 50% at 50% 10%, rgba(249, 115, 22, 0.09) 0%, transparent 65%),
    var(--bg);
}

/* Artwork block */
.hero-art {
  margin-inline: auto;
  margin-bottom: 2rem;
  max-width: 500px;
  width: 100%;
}

.hero-art img {
  width: 100%;
  height: auto;
  display: block;
  /*
    No border-radius — the image has natural black edges that
    fade directly into the dark site background.
  */
}

/* Main title */
.hero-title {
  text-transform: uppercase;
  color: var(--accent-warm);
  text-shadow:
    0 0 60px rgba(251, 191, 36, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.7);
  margin-bottom: 0.875rem;
  line-height: 0.92;
}

.hero-value-prop {
  font-size: clamp(1.1rem, 3.5vw, 1.3rem);
  font-weight: 500;
  color: var(--text);
  margin-inline: auto;
  margin-bottom: 0.75rem;
  max-width: 40ch;
}

.hero-sub {
  font-size: 0.9375rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}

.hero-cta {
  /* Slightly warmer glow on the hero CTA to draw the eye */
  box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
  transition:
    background-color var(--ease),
    border-color var(--ease),
    box-shadow 260ms ease,
    transform var(--ease);
}

.hero-cta:hover {
  box-shadow: 0 0 28px rgba(249, 115, 22, 0.30);
}

.hero-footnote {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Credibility line — sits below the player count subline, visually secondary */
.hero-credibility {
  font-size: 0.8125rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-top: -1rem;     /* Tighten the gap with the subline above it */
  margin-bottom: 2rem;
  max-width: none;
}

/* Secondary CTA container — centered, with breathing room above */
.section-cta {
  margin-top: 2.5rem;
}


/* =============================================================
   9. CONTENT SECTIONS
   — How it plays
   — Who it's for
============================================================= */

/* --- How it plays --- */

.play-steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.play-step ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.play-step li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--text);
}

/* Orange dot bullet */
.play-step li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
  margin-top: 0.58em;   /* Optically aligns with cap-height of first line */
}

/* Gameplay image */
.gameplay-media {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gameplay-media img,
.gameplay-media video {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Who it's for --- */

.section-intro {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.audience-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.audience-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--text);
}

/* Arrow bullet — slightly more personality than a dot */
.audience-list li::before {
  content: '→';
  color: var(--accent);
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1.65;   /* Matches body line-height to align with first line */
}

.who-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
}


/* =============================================================
   10. PLAYER COUNT SECTION
============================================================= */

.deck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.deck-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: border-color var(--ease);
}

.deck-card:hover {
  border-color: var(--border-hover);
}

/* The large number / icon badge */
.deck-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  margin-bottom: 0.875rem;
  /* Replace the number with a small SVG icon here if desired */
}

.deck-badge-orange {
  background-color: rgba(249, 115, 22, 0.14);
  border: 2px solid var(--accent);
  color: var(--accent);
}

.deck-badge-yellow {
  background-color: rgba(251, 191, 36, 0.12);
  border: 2px solid var(--accent-warm);
  color: var(--accent-warm);
}

.deck-card h3 {
  /* Override the section h3 style for this context */
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  font-family: var(--font-display);
  margin-bottom: 0.25rem;
}

.deck-count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  max-width: none;
}

.deck-card:first-child .deck-count { color: var(--accent); }
.deck-card:last-child  .deck-count { color: var(--accent-warm); }

.deck-card p:not(.deck-count) {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: none;
}

.deck-note {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
}


/* =============================================================
   11. EMAIL SIGNUP SECTION
============================================================= */

.section-signup {
  text-align: center;

  /* Warmer glow to draw the eye down the page to this section */
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(249, 115, 22, 0.07) 0%, transparent 65%),
    var(--bg);
}

.section-signup h2 {
  font-size: clamp(2rem, 7vw, 3rem);
}

.signup-intro {
  color: var(--text-muted);
  margin-bottom: 2rem;
  margin-inline: auto;
  max-width: 50ch;
}

.signup-form {
  max-width: 460px;
  margin-inline: auto;
}

.form-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.form-row input[type="email"] {
  flex: 1;
  min-width: 0;         /* Prevents flex overflow on narrow screens */
  padding: 0.8125rem 1rem;
  background-color: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  -webkit-appearance: none;
  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}

.form-row input[type="email"]::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.form-row input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.14);
}

/* Status message: JS writes success/error text here */
.form-status {
  font-size: 0.9rem;
  min-height: 1.4em;
  margin-bottom: 0.5rem;
  transition: color var(--ease);
}

.form-status.success { color: #4ade80; }
.form-status.error   { color: #f87171; }

.form-privacy {
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: none;
}


/* =============================================================
   12. ABOUT SECTION
============================================================= */

.about-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Creator photo: circular crop */
.creator-photo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--bg-card);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  /*
    Replace this entire element with:
    <img class="creator-photo" src="./assets/creator-photo.jpg"
         alt="Terry, creator of Gone Goat" width="100" height="100" />
  */
}

.creator-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-social {
  margin-top: 1rem;
  font-size: 0.9375rem;
  max-width: none;
}

.about-social a {
  color: var(--accent);
}


/* =============================================================
   13. FOOTER
============================================================= */

.site-footer {
  padding-block: 3rem;
  border-top: 1px solid var(--border);
  background-color: var(--bg-alt);
}

.footer-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  align-items: center;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-warm);
  max-width: none;
}

/* Kickstarter badge */
.ks-badge {
  display: inline-block;
  padding: 0.3rem 0.875rem;
  background-color: rgba(14, 165, 233, 0.10);
  border: 1px solid rgba(14, 165, 233, 0.28);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #38bdf8;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color var(--ease), border-color var(--ease);
}

a.ks-badge:hover {
  background-color: rgba(14, 165, 233, 0.18);
  border-color: rgba(14, 165, 233, 0.5);
  opacity: 1;
}

.footer-social {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-social a {
  font-size: 0.9375rem;
  color: var(--text-muted);
  transition: color var(--ease);
}

.footer-social a:hover {
  color: var(--text);
  opacity: 1;
}

.footer-legal {
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: none;
}


/* =============================================================
   14. STICKY CTA BAR
   Slides up from the bottom when hero CTA leaves view.
   JS toggles .visible. Hidden via transform so it doesn't
   block interaction when invisible.
============================================================= */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;

  background-color: rgba(15, 14, 13, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);

  padding-block: 0.875rem;

  /* Hidden below screen by default */
  transform: translateY(100%);
  transition: transform var(--ease-slide);
  pointer-events: none;
}

/* JS adds .visible to slide it up */
.sticky-cta.visible {
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-cta-inner {
  /* Override max-width for full-bleed feel on the bar */
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sticky-cta-text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =============================================================
   15. UTILITIES
============================================================= */

/*
  Visually hidden — keeps content available to screen readers
  without showing it on screen. Used for the email label.
*/
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =============================================================
   16. RESPONSIVE OVERRIDES

   Approach: mobile-first. Breakpoints only override what
   genuinely needs to change at larger sizes — not a full
   re-layout.
============================================================= */

/* Very narrow (< 400px) — stack form inputs vertically */
@media (max-width: 400px) {
  .form-row {
    flex-direction: column;
  }

  .btn-submit {
    width: 100%;
  }

  /* Stack deck cards vertically on very small screens */
  .deck-grid {
    grid-template-columns: 1fr;
  }

  /* Tighten sticky bar text on small phones */
  .sticky-cta-text {
    font-size: 0.8125rem;
  }
}

/* Tablet+ (≥ 600px) */
@media (min-width: 600px) {
  :root {
    --section-v: 5.5rem;
    --section-h: 1.5rem;
  }

  /* Creator photo + bio side by side */
  .about-inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .creator-photo {
    width: 100px;
    height: 100px;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  :root {
    --section-v:  6.5rem;
    --section-h:  2rem;
    --max-width:  720px;
  }

  h1 {
    font-size: 8rem;
  }

  .section-signup h2 {
    font-size: 3.25rem;
  }
}