/* Good Gary Foods — coming soon */

:root {
  --cream: #FFF6E9;
  --charcoal: #2B2B2B;
  --green: #5FA052;
  --deep-green: #2F5233;
  --orange: #E8862E;
  --brown: #8C5A3C;
  --salt: #F5F5F5;
  --display: "Fredoka", "Avenir Next", sans-serif;
  --body: "Atkinson Hyperlegible", Georgia, sans-serif;
}

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

html { scroll-behavior: smooth; }

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

img { max-width: 100%; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; }

a { color: var(--deep-green); }

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

.wrap { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- header ---------- */

.site-header {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1rem 0;
}
.site-header .wrap { display: flex; align-items: center; gap: 0.9rem; width: 100%; }
.logo-img { width: 64px; height: 64px; }
.logo-fallback {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--orange); color: var(--cream);
  display: none; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  border: 3px solid var(--charcoal);
}
.site-header.no-logo .logo-img { display: none; }
.site-header.no-logo .logo-fallback { display: flex; }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.04em; }
.wordmark small { display: block; font-size: 0.7rem; letter-spacing: 0.28em; color: var(--brown); font-weight: 500; }

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

.hero {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem;
  align-items: center; padding: 3rem 0 4rem;
}
.hero-eyebrow {
  font-family: var(--display); font-weight: 500; font-size: 0.8rem;
  letter-spacing: 0.3em; color: var(--green); text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  margin: 0.5rem 0 1rem;
}
.hero h1 em { font-style: normal; color: var(--orange); }
.hero p { font-size: 1.15rem; max-width: 34ch; }
.hero-ctas { margin-top: 1.75rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }

.btn {
  display: inline-block; font-family: var(--display); font-weight: 500;
  font-size: 1rem; padding: 0.7rem 1.4rem; border-radius: 999px;
  border: 3px solid var(--charcoal); cursor: pointer; text-decoration: none;
  transition: transform 120ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--orange); color: var(--charcoal); }
.btn-quiet { background: transparent; color: var(--charcoal); }

/* the signature: a crock quietly bubbling while you wait */
.hero-crock { position: relative; justify-self: center; width: min(260px, 60vw); }
.hero-crock img { display: block; width: 100%; }
.css-crock { display: none; position: relative; width: 100%; aspect-ratio: 0.85; }
.hero-crock.fallback .css-crock { display: block; }
.crock-body {
  position: absolute; inset: 12% 6% 0 6%;
  background: var(--brown); border: 4px solid var(--charcoal);
  border-radius: 18% 18% 26% 26% / 12% 12% 20% 20%;
}
.crock-band {
  position: absolute; left: -4px; right: -4px; top: 34%; height: 16%;
  background: var(--cream); border: 4px solid var(--charcoal);
}
.crock-mouth {
  position: absolute; top: 6%; left: 18%; right: 18%; height: 10%;
  background: var(--charcoal); border-radius: 50%;
}
.bubbles { position: absolute; top: 0; left: 30%; right: 30%; height: 20%; pointer-events: none; }
.bubbles span {
  position: absolute; bottom: 0; width: 12px; height: 12px;
  border: 3px solid var(--charcoal); border-radius: 50%;
  background: var(--salt); opacity: 0;
  animation: bubble 4s infinite ease-in;
}
.bubbles span:nth-child(1) { left: 8%;  animation-delay: 0s;   width: 10px; height: 10px; }
.bubbles span:nth-child(2) { left: 42%; animation-delay: 1.3s; }
.bubbles span:nth-child(3) { left: 74%; animation-delay: 2.2s; width: 8px; height: 8px; }
.bubbles span:nth-child(4) { left: 25%; animation-delay: 3.1s; width: 9px; height: 9px; }

@keyframes bubble {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-70px) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bubbles span { animation: none; opacity: 0.5; transform: translateY(-20px); }
  .btn { transition: none; }
}

/* ---------- sections ---------- */

.section { padding: 3.5rem 0; }
.section-title { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 0.4rem; }
.section-sub { color: var(--brown); margin-bottom: 1.8rem; max-width: 55ch; }

/* story */
.story { background: var(--deep-green); color: var(--cream); }
.story .section-title { color: var(--cream); }
.story .section-sub { color: #BFD8B4; }
.story-grid { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: start; }
.story-portrait {
  background: var(--cream); border: 4px solid var(--charcoal); border-radius: 16px;
  padding: 0.75rem; transform: rotate(-2deg);
}
.story-portrait img { display: block; border-radius: 10px; }
.portrait-fallback {
  display: none; aspect-ratio: 1; border-radius: 10px; background: var(--orange);
  align-items: center; justify-content: center; font-size: 5rem;
}
.story-portrait.fallback img { display: none; }
.story-portrait.fallback .portrait-fallback { display: flex; }
.portrait-caption {
  font-family: var(--display); text-align: center; color: var(--charcoal);
  font-size: 0.9rem; padding-top: 0.5rem;
}
.story-text p { margin-bottom: 1rem; max-width: 58ch; }
.story-text .kicker { font-family: var(--display); font-size: 1.15rem; color: #F0B27A; }

/* games */
.game-card {
  background: var(--salt); border: 4px solid var(--charcoal); border-radius: 20px;
  padding: 1.5rem; margin-bottom: 2.5rem;
}
.game-card h3 { font-size: 1.5rem; }
.game-card .game-tag {
  display: inline-block; font-family: var(--display); font-size: 0.75rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream);
  background: var(--green); border-radius: 999px; padding: 0.15rem 0.7rem;
  margin-bottom: 0.4rem;
}
.game-card > p { margin: 0.4rem 0 1rem; max-width: 65ch; }

.mute-btn {
  float: right; font-family: var(--display); font-size: 0.85rem;
  padding: 0.35rem 0.8rem; border: 3px solid var(--charcoal); border-radius: 999px;
  background: var(--cream); cursor: pointer;
}
.mute-btn:hover { background: #FFE9C7; }

.game-stage { position: relative; }
canvas#conveyor-canvas {
  display: block; width: 100%; height: auto;
  border: 3px solid var(--charcoal); border-radius: 12px;
  background: #EBE3D2; touch-action: none;
}
.game-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.8rem; text-align: center;
  background: rgba(43, 43, 43, 0.82); color: var(--cream); border-radius: 12px;
  padding: 1.5rem;
}
.game-overlay[hidden] { display: none; }
.game-overlay h4 { font-family: var(--display); font-size: 1.6rem; }
.game-overlay p { max-width: 46ch; }

/* brine game */
.brine-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.brine-order {
  background: var(--deep-green); color: var(--cream); border-radius: 12px;
  border: 3px solid var(--charcoal); padding: 1rem 1.25rem;
  font-family: var(--display);
}
.brine-order strong { color: #F0B27A; font-size: 1.3rem; }
.brine-hint { font-family: var(--body); font-size: 0.85rem; opacity: 0.85; margin-top: 0.5rem; }

.brine-controls { display: flex; flex-direction: column; gap: 1rem; }
.scoop-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.scoop-btn {
  font-family: var(--display); font-size: 0.95rem; padding: 0.55rem 1rem;
  border: 3px solid var(--charcoal); border-radius: 12px; background: var(--cream);
  cursor: pointer;
}
.scoop-btn:hover:enabled { background: #FFE9C7; }
.scoop-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.brine-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.brine-jar-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.brine-jar {
  position: relative; width: 150px; height: 240px;
  border: 4px solid var(--charcoal); border-top-width: 3px;
  border-radius: 8px 8px 18px 18px; background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.brine-water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: #A8D8EA; border-top: 3px solid #7FB9D1;
  transition: height 300ms ease;
}
.brine-salt-pile {
  position: absolute; left: 15%; right: 15%; bottom: 0; height: 0;
  background: var(--salt); border-radius: 50% 50% 0 0;
  border-top: 2px solid #DDD; transition: height 200ms ease;
}
.jar-marks { position: absolute; top: 0; right: 4px; bottom: 0; width: 30px; font-size: 0.6rem; font-family: var(--display); color: var(--charcoal); }
.jar-marks i { position: absolute; right: 0; font-style: normal; }
.salt-counter { font-family: var(--display); font-size: 1.1rem; }
.salt-counter strong { color: var(--orange); }

.brine-result { margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 12px; border: 3px solid var(--charcoal); display: none; }
.brine-result.show { display: block; }
.brine-result.win { background: #E4F2DD; }
.brine-result.lose { background: #FBE3D4; }

.coupon {
  margin-top: 0.8rem; display: inline-block; background: var(--cream);
  border: 3px dashed var(--orange); border-radius: 10px; padding: 0.8rem 1.4rem;
  font-family: var(--display);
}
.coupon .code { font-size: 1.6rem; letter-spacing: 0.12em; color: var(--orange); }

/* contact + footer */
.contact { text-align: center; }
.contact .btn { margin-top: 0.8rem; }

.site-footer { background: var(--charcoal); color: var(--cream); padding: 2rem 0; text-align: center; }
.site-footer a { color: #F0B27A; }
.site-footer p { margin: 0.3rem 0; }
.footer-note { font-size: 0.85rem; opacity: 0.75; }

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 1.5rem; }
  .hero p { margin: 0 auto; }
  .hero-ctas { justify-content: center; }
  .hero-crock { order: -1; width: min(180px, 50vw); }
  .story-grid { grid-template-columns: 1fr; }
  .story-portrait { max-width: 280px; margin: 0 auto; }
  .brine-board { grid-template-columns: 1fr; }
  .brine-jar-wrap { order: -1; }
}