/* ============================================
   Pikl Keychains — Foundation stylesheet
   ============================================ */

/* ---- Gagalin (heading font) ----
   Not on Google Fonts. Drop the font file into assets/fonts/
   as Gagalin-Regular.woff2 (and/or .otf) and it activates
   automatically. Until then, headings fall back to bold Poppins. */
@font-face {
  font-family: 'Gagalin';
  src: url('../assets/fonts/Gagalin-Regular.woff2') format('woff2'),
       url('../assets/fonts/Gagalin-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  /* Brand */
  --blue: #38B6FF;          /* primary brand blue */
  --blue-deep: #1893E4;     /* darker band for alternating sections */
  --blue-ink: #0B5E9E;      /* darkest blue — footer, shadows */
  --lime: #D9E94E;          /* pickleball yellow-green accent */
  --lime-dark: #B8CA1F;
  --white: #FFFFFF;
  --ink: #0D3B5C;           /* dark text on light surfaces */

  /* Type */
  --font-display: 'Gagalin', 'Poppins', sans-serif;
  --font-body: 'Poppins', -apple-system, sans-serif;

  /* Scale */
  --container: 1100px;
  --radius: 20px;
  --section-pad: clamp(4rem, 8vw, 7rem);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--white);
  background: var(--blue);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700; /* only matters for Poppins fallback; Gagalin has one weight */
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 0.8em 1.6em;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--accent {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--lime-dark);
}
.btn--ghost {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}
.btn--small { font-size: 0.9rem; padding: 0.55em 1.2em; }

/* ---- Nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--blue) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.25);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--white);
}
.nav__logo { height: 44px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__links a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
}
.nav__links a:not(.btn):hover { color: var(--lime); }

@media (max-width: 720px) {
  .nav__links a:not(.btn) { display: none; } /* placeholder: mobile menu later */
}

/* ---- Sections ---- */
.section { padding-block: var(--section-pad); }

/* Alternating deeper-blue band to keep the page from flattening out */
.section--deep { background: var(--blue-deep); }

.section__kicker {
  font-family: var(--font-display);
  color: var(--lime);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.section__title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
  max-width: 22ch;
}
.section__lead {
  max-width: 55ch;
  opacity: 0.92;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: min(92vh, 860px);
  display: grid;
  align-items: center;
  padding-block: calc(var(--section-pad) * 0.6);
  /* floor strip reserved for the ball pile — hero__inner stays above it */
  --pile-zone: clamp(130px, 20vh, 190px);
}

/* Physics balls live here; .js positions each .hero__pit-ball via transform */
.hero__pit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__pit-ball {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.hero__pit-ball img { width: 100%; display: block; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  width: 100%;
  padding-bottom: var(--pile-zone);
}

.hero__copy {
  display: grid;
  justify-items: start;
  text-align: left;
}
.hero__logo {
  width: clamp(200px, 24vw, 300px);
  animation: hero-pop 0.7s ease-out both;
}
.hero__title {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin: 1.25rem 0 1.75rem;
  animation: hero-pop 0.7s ease-out 0.15s both;
}
.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  animation: hero-rise 0.6s ease-out 0.35s both;
}

/* Fanned, overlapping product shots.
   The two photos aren't matched: at equal image widths the teal paddle
   renders ~0.62x the lime one (longer chain eats its canvas) and sits
   higher. shot--2 therefore gets a 1.6x width and a downward shift so the
   paddle heads line up; chains land where they land. */
.hero__shots {
  --shot-w: clamp(368px, 45vw, 560px);
  display: grid;
  place-items: center;
  justify-self: center;
}
.hero__shot {
  grid-area: 1 / 1;
  width: var(--shot-w);
  filter: drop-shadow(0 16px 32px rgb(11 94 158 / 0.45));
}
/* the photos also have different built-in tilts (~20° vs ~30°), so the CSS
   rotations compensate to make the pair read as a near-matched fan */
.hero__shot--1 {
  rotate: -4deg;
  translate: -15% 4%;
  z-index: 2;
  animation: hero-rise 0.65s ease-out 0.55s both;
}
.hero__shot--2 {
  width: calc(var(--shot-w) * 1.6);
  rotate: -13deg;
  translate: 9% 2%;
  z-index: 1;
  animation: hero-rise 0.65s ease-out 0.72s both;
}

@keyframes hero-pop {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .hero__copy {
    justify-items: center;
    text-align: center;
  }
  .hero__shots { --shot-w: clamp(280px, 72vw, 410px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo, .hero__title, .hero__actions, .hero__shot {
    animation: none;
  }
}

/* ---- Cards ---- */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: 0 10px 30px rgb(11 94 158 / 0.25);
}
.card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

/* ---- Problem — thin text-only beat that flows into Process ---- */
.problem {
  text-align: center;
  padding-block: clamp(1.25rem, 3vw, 2rem);
  background: var(--blue-deep);
}
.problem__inner { display: grid; justify-items: center; gap: 0.5rem; }
.problem__line {
  max-width: 24ch;
  font-size: clamp(1.9rem, 4.5vw, 3rem);
}
/* desktop: keep the line on a single row, scaling with viewport so it never
   overflows the container (mobile keeps the wrapping default above) */
@media (min-width: 861px) {
  .problem__line {
    max-width: none;
    white-space: nowrap;
    font-size: min(3.5vw, 2.5rem);
  }
}
/* breathing room above Process so it doesn't crowd the Problem band */
#problem + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* ---- Process ---- */
.process-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 1rem;
  margin-top: 3rem;
}
.process-stage { text-align: center; }
.process-stage__media {
  background: var(--white);
  border-radius: var(--radius);
  padding: 0.6rem;
  box-shadow: 0 10px 30px rgb(11 94 158 / 0.25);
  margin-bottom: 1.25rem;
}
.process-stage__media video,
.process-stage__media img {
  display: block;         /* video is inline by default; its baseline gap made
                             the framed boxes ~7px taller than the bare one */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) - 0.6rem);
}
.process-stage__media--portrait video { object-fit: cover; }
/* frameless final stage — keychain floats on the blue, no white box */
.process-stage__media--bare {
  background: none;
  box-shadow: none;
  /* keep the base 0.6rem padding so this box matches the framed ones' height,
     which keeps the Inject title/caption aligned with Collect and Shred */
}
.process-stage__media--bare img {
  object-fit: contain;    /* show the whole keychain, don't crop it */
  border-radius: 0;
  filter: drop-shadow(0 12px 24px rgb(11 94 158 / 0.35));
}
.process-stage h3 { font-size: 1.4rem; margin-bottom: 0.35rem; }
.process-stage p { font-size: 0.95rem; opacity: 0.9; }

/* inline brand logo sitting within a caption line */
.inline-logo {
  display: inline-block;
  height: 1.5em;
  width: auto;
  vertical-align: -0.42em;
  margin: 0 0.2em;
}

/* Dotted hand-drawn-style arrow between stages */
.process-arrow { width: clamp(60px, 8vw, 110px); }
.process-arrow svg { width: 100%; height: auto; overflow: visible; }
.process-arrow__path,
.process-arrow__head {
  fill: none;
  stroke: var(--lime);
  stroke-width: 5;
  stroke-linecap: round;
}
.process-arrow__path { stroke-dasharray: 1 12; }
.process-arrow--flip svg { transform: scaleY(-1); }
/* drop arrows to line up with the middle of the images (the flow is top-aligned,
   so arrows otherwise sit at the very top of the row). position/top is used
   instead of transform because the .reveal scroll animation owns transform. */
@media (min-width: 801px) {
  .process-arrow { position: relative; top: 4.65rem; }
  /* enlarge the floating keychain on desktop, where there's clearance for the
     overflow (no layout shift). Left at natural size on mobile so the bigger
     stacked box doesn't overlap its own title/caption. */
  .process-stage__media--bare img { transform: scale(1.4); }
}

@media (max-width: 800px) {
  .process-flow { grid-template-columns: 1fr; }
  .process-stage { max-width: 340px; margin-inline: auto; }
  /* point the arrows downward when stages stack */
  .process-arrow { margin-inline: auto; }
  .process-arrow svg { transform: rotate(65deg); }
  .process-arrow--flip svg { transform: rotate(115deg) scaleY(-1); }
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* stagger: arrows trail their preceding stage */
.process-arrow.reveal { transition-delay: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Impact + Story (combined) ---- */
.impact-story__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

/* Left half — the big count-up number is the visual anchor */
.impact-story__impact { text-align: center; }
.impact-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 11vw, 8.5rem);
  line-height: 0.95;
  color: var(--lime);
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums; /* stop width jitter while counting */
}
.impact-number__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  margin-top: 0.75rem;
}

/* Right half — logo + narrative */
.impact-story__logo {
  width: clamp(150px, 18vw, 210px);
  margin-bottom: 1.5rem;
}
.impact-story__story p { margin-bottom: 1rem; max-width: 46ch; }
.impact-story__story p:last-child { margin-bottom: 0; }
.impact-story__thanks {
  font-family: var(--font-display);
  color: var(--lime);
  font-size: 1.25rem;
  margin-top: 1.25rem;
}

@media (max-width: 800px) {
  .impact-story__inner { grid-template-columns: 1fr; gap: 3rem; }
  .impact-story__impact { order: -1; }
}

/* ---- Products (marquee showcase) ---- */
.products { text-align: center; overflow: hidden; }
.products__title { max-width: none; margin-inline: auto; }
.products__lead { margin: 1rem auto 0; }

/* Full-bleed continuously-scrolling banner of floating keychains */
.marquee {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  /* soft-fade the edges so there's no hard start/end */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
}
.marquee__track img {
  height: clamp(260px, 32vw, 380px);   /* ~1.6x+ the old 220px product cards */
  width: auto;
  flex: none;
  filter: drop-shadow(0 16px 32px rgb(11 94 158 / 0.4));
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* -50% = exactly one duplicated half */
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }          /* let users scroll it by hand instead */
}

/* ---- CTA ---- */
.cta { text-align: center; }
.cta .section__title,
.cta .section__lead { margin-inline: auto; }
/* widen the text measure so the title/subtext read across fewer, longer lines
   instead of the default narrow 22ch/55ch columns */
.cta .section__title { max-width: 36ch; }
.cta .section__lead { max-width: 70ch; }
/* desktop: keep the title on a single row, same fluid-scaling approach as the
   Problem section title (mobile keeps the wrapping default above) */
@media (min-width: 861px) {
  .cta .section__title {
    max-width: none;
    white-space: nowrap;
    font-size: min(3.3vw, 2.8rem);
  }
}
.cta__form {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.cta__form input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8em 1.2em;
  border: none;
  border-radius: 999px;
  min-width: 280px;
  color: var(--ink);
}
.cta__form input:focus-visible {
  outline: 3px solid var(--lime);
}
/* secondary line — deliberately muted/smaller so it doesn't compete with
   the main email signup CTA above it */
.cta__wholesale {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  opacity: 0.75;
}
.cta__wholesale a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta__wholesale a:hover { color: var(--lime); }

/* ---- Footer ---- */
.footer {
  background: var(--blue-ink);
  padding-block: 2.5rem;
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
}
.footer__logo { height: 40px; width: auto; }
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.footer__social:hover { color: var(--lime); }
.footer__social-icon { width: 1.4rem; height: 1.4rem; flex: none; }
.footer__note { font-size: 0.85rem; opacity: 0.75; }