/* ============================================================
   CLUCK! — the joyful guide to backyard chickens
   Sunshine, sticker borders, and a working cartoon coop.
   ============================================================ */

:root {
  --sky: #BDE3F5;
  --cream: #FFF6E5;
  --sunshine: #FFC93C;
  --grass: #7BC950;
  --grass-dark: #4E9A3D;
  --comb: #E84C3D;
  --ink: #33272A;
  --display: "Titan One", "Arial Black", sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --radius: 22px;
  --pop: 5px 5px 0 var(--ink);
}

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

body {
  font-family: var(--body);
  font-weight: 700;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: var(--sunshine); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 4px solid var(--comb);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- nav ---------- */

.topnav {
  position: sticky;
  top: 10px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1060px;
  margin: 10px auto 0;
  padding: 0.55rem 1.1rem;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--pop);
  width: calc(100% - 2rem);
}

.brand {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--comb);
  text-decoration: none;
  letter-spacing: 0.02em;
  text-shadow: 2px 2px 0 var(--sunshine);
}

.navlinks {
  display: flex;
  gap: 0.2rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.navlinks a {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35em 0.8em;
  border-radius: 999px;
}

.navlinks a:hover { background: var(--sunshine); }

.egg-counter {
  font-weight: 900;
  font-size: 1rem;
  background: var(--sunshine);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.25em 0.85em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .navlinks a { font-size: 0.8rem; padding: 0.3em 0.5em; }
}

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

.hero {
  text-align: center;
  padding: 3.2rem 1rem 0;
  background: var(--sky);
  overflow: hidden;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 7.5vw, 5.2rem);
  line-height: 1.02;
  color: var(--comb);
  text-shadow: 3px 3px 0 #fff, 6px 6px 0 var(--ink);
  letter-spacing: 0.01em;
}

.hero h1 span {
  display: block;
  font-size: 0.38em;
  color: var(--ink);
  text-shadow: 2px 2px 0 #fff;
  margin-bottom: 0.3em;
  letter-spacing: 0.06em;
}

.hero-sub {
  margin: 1.2rem auto 0;
  max-width: 52ch;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.hero-sub strong { color: var(--comb); }

.coop-stage {
  max-width: 940px;
  margin: 1.6rem auto 0;
  position: relative;
}

/* the lawn continues to the viewport edges */
.coop-stage::before {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  bottom: 0;
  height: 19.5%;
  background: var(--grass);
  border-top: 5px solid var(--ink);
}

.coop-stage svg { position: relative; }

#coop-scene { width: 100%; height: auto; display: block; }

.big-btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--ink);
  background: var(--sunshine);
  border: 4px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--pop);
  padding: 0.6em 1.6em;
  text-decoration: none;
  transform: translateY(-26px);
  transition: transform 0.15s, box-shadow 0.15s;
}

.big-btn:hover {
  transform: translateY(-29px);
  box-shadow: 7px 8px 0 var(--ink);
}

.big-btn:active {
  transform: translateY(-23px);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- coop scene animations ---------- */

.sun-rays { animation: spin 24s linear infinite; transform-origin: 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.cloud-a { animation: drift 34s linear infinite; }
.cloud-b { animation: drift 46s linear infinite reverse; }
@keyframes drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(70px); }
  100% { transform: translateX(0); }
}

.hen { cursor: pointer; }

.hen-body { animation: bob 1.6s ease-in-out infinite; transform-origin: center bottom; }
.hen-2 .hen-body { animation-duration: 1.9s; animation-delay: 0.4s; }
.hen-3 .hen-body { animation-duration: 1.4s; animation-delay: 0.8s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.hen-head { animation: peck 3.4s ease-in-out infinite; transform-origin: 0px 0px; }
.hen-2 .hen-head { animation-duration: 4.1s; animation-delay: 1.2s; }
.hen-3 .hen-head { animation-duration: 2.9s; animation-delay: 2s; }
@keyframes peck {
  0%, 54%, 100% { transform: rotate(0deg); }
  60%, 70% { transform: rotate(26deg) translateY(6px); }
  65% { transform: rotate(30deg) translateY(8px); }
}

.hen:hover .hen-body, .hen:focus-visible .hen-body { animation-duration: 0.5s; }

.hen.flap .wing { animation: flap 0.5s ease-in-out 2; transform-origin: center; }
@keyframes flap {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-24deg) translateY(-4px); }
}

.rooster-body { animation: strut 5s ease-in-out infinite; transform-origin: center bottom; }
@keyframes strut {
  0%, 78%, 100% { transform: rotate(0); }
  84%, 92% { transform: rotate(-7deg); }
}

.crow-bubble {
  opacity: 0;
  transform-origin: -40px -12px;
  animation: crow 5s ease-in-out infinite;
}
@keyframes crow {
  0%, 78% { opacity: 0; transform: scale(0.2); }
  84%, 94% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.2); }
}

.crow-text {
  font-family: var(--display);
  font-size: 15px;
  fill: var(--ink);
}

.egg-drop {
  animation: egg-plop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both;
  transform-origin: center bottom;
}
@keyframes egg-plop {
  0% { transform: translateY(-18px) scale(0.4); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.butterfly {
  animation: fly 26s ease-in-out infinite;
  transform-origin: center;
}
@keyframes fly {
  0%   { transform: translate(70px, 250px); }
  20%  { transform: translate(250px, 150px); }
  40%  { transform: translate(480px, 210px); }
  60%  { transform: translate(620px, 120px); }
  80%  { transform: translate(400px, 90px); }
  100% { transform: translate(70px, 250px); }
}
.butterfly-wings .wing-l { animation: flutter-l 0.35s ease-in-out infinite alternate; transform-origin: 0 0; }
.butterfly-wings .wing-r { animation: flutter-r 0.35s ease-in-out infinite alternate; transform-origin: 0 0; }
@keyframes flutter-l { from { transform: scaleX(1); } to { transform: scaleX(0.35); } }
@keyframes flutter-r { from { transform: scaleX(0.35); } to { transform: scaleX(1); } }

/* ---------- bands & cards ---------- */

.band {
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.2rem;
}

.band-alt {
  max-width: none;
  background: #F6E8CE;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.band-alt > * { max-width: 1060px; margin-left: auto; margin-right: auto; }

.band-title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  color: var(--ink);
  text-shadow: 2.5px 2.5px 0 var(--sunshine);
  margin-bottom: 0.4rem;
  text-align: center;
}

.title-doodle { display: inline-block; transform: rotate(8deg); }

.title-note {
  font-family: var(--body);
  font-weight: 800;
  font-size: 0.45em;
  color: var(--comb);
  vertical-align: 0.5em;
}

.band-intro {
  max-width: 62ch;
  font-size: 1.08rem;
  margin: 0 auto 2.2rem;
  text-align: center;
}

.card {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  padding: 1.5rem 1.6rem;
  transition: transform 0.18s, box-shadow 0.18s;
}

.tilt-l { transform: rotate(-1deg); }
.tilt-r { transform: rotate(1.2deg); }

.card:hover { transform: rotate(0) translateY(-4px); box-shadow: 7px 9px 0 var(--ink); }

.card h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  margin-bottom: 0.7rem;
}

.card-danger { background: #FDEBE8; }
.card-danger h3 { color: var(--comb); }

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem;
}

.fun-list { list-style: none; }

.fun-list li {
  padding-left: 1.3em;
  position: relative;
  font-weight: 700;
}

.fun-list li::before {
  content: "•";
  position: absolute;
  left: 0.2em;
  color: var(--comb);
  font-weight: 900;
}

.fun-list li + li { margin-top: 0.55em; }

.tip-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2rem;
}

.tip-chip {
  background: var(--sunshine);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 0.35em 1em;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 3px 3px 0 var(--ink);
}

/* ---------- seasons ---------- */

.season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.6rem;
}

.season-spring { background: #EDF9EE; }
.season-summer { background: #FFF3D6; }
.season-fall   { background: #FBE9DC; }
.season-winter { background: #E9F2FB; }

/* ---------- breeds ---------- */

.breed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.8rem;
}

.breed { text-align: center; }

.breed img {
  width: min(200px, 70%);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid var(--ink);
  margin-bottom: 0.9rem;
  background: var(--cream);
}

.breed-vibe {
  font-style: italic;
  font-weight: 800;
  color: var(--comb);
  margin-bottom: 0.5rem;
}

.egg-meter {
  font-size: 1rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.7rem;
}

.egg-meter span {
  font-size: 0.85rem;
  font-weight: 900;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.1em 0.6em;
  margin-left: 0.3em;
  letter-spacing: 0;
}

.breed-rooster { background: #FFF3D6; }

/* ---------- fun facts ---------- */

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.fact-egg {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--pop);
  padding: 1.4rem 1.3rem;
  min-height: 150px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s, box-shadow 0.15s;
  line-height: 1.5;
}

.fact-egg:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 7px 9px 0 var(--ink); }

.fact-egg .egg-shell {
  font-size: 3.4rem;
  filter: drop-shadow(3px 3px 0 rgba(51, 39, 42, 0.25));
  animation: wiggle 2.6s ease-in-out infinite;
  display: inline-block;
}

.fact-egg:nth-child(2n) .egg-shell { animation-delay: 0.6s; }
.fact-egg:nth-child(3n) .egg-shell { animation-delay: 1.1s; }

@keyframes wiggle {
  0%, 80%, 100% { transform: rotate(0); }
  85% { transform: rotate(-8deg); }
  90% { transform: rotate(8deg); }
  95% { transform: rotate(-4deg); }
}

.fact-egg.cracked { background: var(--sunshine); cursor: default; }
.fact-egg.cracked .egg-shell { display: none; }
.fact-egg.cracked .fact-text { animation: hatch 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

@keyframes hatch {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- start-here path ---------- */

.path {
  list-style: none;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  padding-left: 3.4rem;
}

.path::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 1.5rem;
  bottom: 1.5rem;
  border-left: 4px dashed var(--grass-dark);
}

.path-step { position: relative; }
.path-step + .path-step { margin-top: 1.6rem; }

.path-num {
  position: absolute;
  left: -3.4rem;
  top: 0.6rem;
  width: 2.7rem;
  height: 3.3rem;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 1.25rem;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 1;
}

/* ---------- egg-dex ---------- */

.eggdex-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem 2rem;
}

.dex-egg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-weight: 900;
}

.dex-egg em {
  font-style: normal;
  font-weight: 700;
  font-size: 0.82rem;
  color: #6b5a55;
}

.dex-shell {
  width: 64px;
  height: 84px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.65) 0 12%, transparent 34%),
    var(--shell, #fff);
  border: 3px solid var(--ink);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 0.5rem;
  transition: transform 0.15s;
}

.dex-egg:hover .dex-shell { transform: rotate(-6deg) translateY(-4px); }

/* ---------- coop shop ---------- */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.6rem;
}

.product { text-align: center; display: flex; flex-direction: column; }

.product-emoji { font-size: 2.6rem; display: block; margin-bottom: 0.4rem; }

.product p { flex: 1; }

.buy-btn {
  display: inline-block;
  margin-top: 1rem;
  align-self: center;
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--sunshine);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 0.5em 1.3em;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s;
}

.buy-btn:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--ink); }
.buy-btn:active { transform: translateY(1px); box-shadow: 2px 2px 0 var(--ink); }

.disclosure {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 700;
  color: #6b5a55;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- community ---------- */

#flock { text-align: center; }

.social-row {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.1rem;
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--pop);
  padding: 0.55em 1.5em;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.social-btn:hover { transform: translateY(-3px); box-shadow: 7px 8px 0 var(--ink); }

.social-fb { background: #1877F2; }
.social-ig { background: linear-gradient(45deg, #F58529, #DD2A7B 60%, #8134AF); }

.social-btn.soon { opacity: 0.55; pointer-events: none; filter: saturate(0.6); }

.social-icon {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  background: #fff;
  color: var(--ink);
  border-radius: 50%;
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 0.9em;
}

.social-note { margin-top: 1.2rem; font-size: 0.92rem; color: #6b5a55; }

/* ---------- confetti ---------- */

.confetti {
  position: fixed;
  top: -12px;
  width: 10px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  z-index: 100;
  pointer-events: none;
  animation: confetti-fall var(--dur, 1.8s) ease-in forwards;
}

@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0) translateX(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(var(--spin, 540deg)) translateX(var(--sway, 40px)); opacity: 0.9; }
}

/* ---------- footer ---------- */

.foot {
  text-align: center;
  background: var(--ink);
  color: var(--cream);
  padding: 2.6rem 1.2rem;
  border-top: 6px solid var(--sunshine);
}

.foot a {
  color: var(--sunshine);
  font-weight: 900;
  text-decoration: none;
  border-bottom: 3px solid var(--sunshine);
}

.foot-privacy {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  opacity: 0.75;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .sun-rays, .cloud-a, .cloud-b, .hen-body, .hen-head, .rooster-body,
  .fact-egg .egg-shell, .egg-drop, .butterfly, .butterfly-wings .wing-l,
  .butterfly-wings .wing-r, .confetti { animation: none; }
  .crow-bubble { animation: none; opacity: 1; transform: scale(1); }
  .card, .big-btn, .fact-egg, .buy-btn, .social-btn, .dex-shell { transition: none; }
}