/* Grow Kids — playful page layer on top of the Grow design system.
   Kid-friendly palette + "Baloo 2" display font are scoped to this page only;
   brand orange stays the anchor so it still feels like Grow Church. */

:root {
  --k-coral: var(--color-primary);      /* brand orange stays the hero */
  --k-yellow: var(--color-accent);      /* #F5A623 from tokens */
  --k-sky: #3BA5E8;
  --k-green: #3EBF8E;
  --k-purple: #9B6DFF;
  --font-fun: "Baloo 2", var(--font-heading);
}

/* ============ Hero ============ */
.kids-hero {
  min-height: 92svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; position: relative;
  padding: 150px var(--side-pad) 90px;
  overflow: hidden;
}
.kids-hero h1 {
  font-family: var(--font-fun);
  font-size: clamp(54px, 11vw, 170px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  text-transform: lowercase;
}
.kids-hero h1 .l { display: inline-block; animation: bounceIn 0.8s var(--ease) both; }
.kids-hero h1 .l:nth-child(odd)  { color: var(--k-coral); }
.kids-hero h1 .l:nth-child(3n)   { color: var(--k-sky); }
.kids-hero h1 .l:nth-child(4n)   { color: var(--k-green); }
.kids-hero h1 .l:nth-child(5n)   { color: var(--k-yellow); }
@keyframes bounceIn {
  0%   { opacity: 0; transform: translateY(-80px) rotate(-8deg); }
  60%  { opacity: 1; transform: translateY(12px) rotate(3deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
.kids-hero .sub {
  margin-top: 26px; max-width: 560px;
  font-size: clamp(16px, 1.7vw, 20px); line-height: 1.6;
  color: rgb(30 27 22 / 0.8);
  opacity: 0; animation: fadeUp 1s var(--ease) 1.1s forwards;
}
.kids-hero .sub strong { color: var(--k-coral); }
.kids-hero .badges {
  display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; justify-content: center;
  opacity: 0; animation: fadeUp 1s var(--ease) 1.3s forwards;
}
.badge {
  font-family: var(--font-fun); font-weight: 700; font-size: 15px;
  padding: 10px 22px; border-radius: 999px; transform: rotate(-2deg);
}
.badge.b1 { background: var(--k-yellow); color: var(--color-dark); }
.badge.b2 { background: var(--k-sky); color: var(--color-white); transform: rotate(2deg); }
.badge.b3 { background: var(--k-green); color: var(--color-white); }
.kids-hero .cta-row {
  margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  opacity: 0; animation: fadeUp 1s var(--ease) 1.5s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.float {
  position: absolute; font-size: clamp(30px, 4vw, 56px);
  animation: floaty 6s ease-in-out infinite; opacity: 0.9;
  user-select: none; pointer-events: none;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-24px) rotate(8deg); }
}

/* Playful buttons */
.btn.fun { font-family: var(--font-fun); text-transform: none; letter-spacing: 0; font-size: 16px; }
.btn.fun:hover { transform: scale(1.07) rotate(-2deg); }
.btn.sunny { background: var(--k-yellow); color: var(--color-dark); }
.btn.sunny:hover { background: var(--color-dark); color: var(--color-bg); }

/* ============ Tilted marquee ============ */
.kids-marquee {
  background: var(--k-yellow); color: var(--color-dark);
  overflow: hidden; padding: 16px 0; white-space: nowrap;
  transform: rotate(-1.2deg); margin: 0 -20px;
}
.kids-marquee .track { display: inline-block; animation: marqKids 20s linear infinite; }
.kids-marquee span {
  font-family: var(--font-fun); font-weight: 800;
  font-size: clamp(17px, 2.2vw, 26px);
  text-transform: uppercase; margin: 0 26px;
}
@keyframes marqKids { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ Playful tags & headings ============ */
.kids-page .tag.fun {
  font-family: var(--font-fun); letter-spacing: 0.12em; font-size: 14px;
  background: var(--color-dark); color: var(--color-white);
  border: 0; transform: rotate(-2deg);
}
.kids-page .fun-title {
  font-family: var(--font-fun);
  font-size: clamp(34px, 5.5vw, 74px);
  text-transform: none; line-height: 1.05;
}
.kids-page .fun-title em { font-style: normal; color: var(--k-coral); }

/* ============ Photo wall ============ */
.wall { padding-top: 40px; }
.wall .fun-title { text-align: center; margin-bottom: 56px; }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.wall .ph {
  border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: 0 22px 45px -18px rgb(30 27 22 / 0.3);
  transition: transform 0.5s var(--ease);
}
.wall .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.wall .ph:nth-child(1) { transform: rotate(-3deg); }
.wall .ph:nth-child(2) { transform: rotate(2deg) translateY(20px); }
.wall .ph:nth-child(3) { transform: rotate(-2deg); }
.wall .ph:nth-child(4) { transform: rotate(3deg) translateY(14px); }
.wall .ph:hover { transform: rotate(0) translateY(-10px) scale(1.04); z-index: 2; }
.wall .ph:hover img { transform: scale(1.1); }

/* ============ Check-in (sky card) ============ */
.checkin {
  background: var(--k-sky); color: var(--color-white);
  border-radius: 44px; margin: 0 3vw;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.checkin .tag.fun { background: var(--color-white); color: var(--k-sky); }
.checkin .fun-title { color: var(--color-white); }
.checkin p { line-height: 1.7; font-size: 16px; margin-bottom: 16px; color: rgb(255 255 255 / 0.94); }
.checkin p strong { color: var(--k-yellow); }
@media (max-width: 860px) { .checkin { grid-template-columns: 1fr; } }

.sticker {
  background: var(--color-white); color: var(--color-dark);
  border-radius: 26px; padding: 34px; max-width: 360px; margin: 0 auto;
  transform: rotate(-3deg);
  box-shadow: 0 30px 60px -20px rgb(30 27 22 / 0.4);
  transition: transform 0.5s var(--ease);
}
.sticker:hover { transform: rotate(2deg) scale(1.05); }
.sticker .top { font-family: var(--font-fun); font-weight: 800; font-size: 24px; color: var(--k-coral); margin-bottom: 8px; }
.sticker .name { font-family: var(--font-fun); font-weight: 800; font-size: 38px; line-height: 1; }
.sticker .code {
  margin-top: 18px; background: var(--k-yellow); border-radius: 14px; padding: 12px;
  text-align: center; font-family: var(--font-heading); font-weight: 700;
  letter-spacing: 0.35em; font-size: 22px;
}
.sticker .small { margin-top: 12px; font-size: 12px; color: var(--color-text-muted); text-align: center; }

/* ============ Age groups ============ */
.groups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.group-card {
  border-radius: 28px; padding: 40px 32px; color: var(--color-white);
  transition: transform 0.45s var(--ease);
}
.group-card:hover { transform: translateY(-10px) rotate(-1.5deg); }
.group-card.g1 { background: var(--k-green); }
.group-card.g2 { background: var(--k-coral); }
.group-card.g3 { background: var(--k-purple); }
.group-card .ic { font-size: 36px; }
.group-card h3 { font-family: var(--font-fun); font-size: clamp(24px, 2.4vw, 32px); margin: 14px 0 6px; }
.group-card .ages {
  display: inline-block; font-family: var(--font-fun); font-weight: 700; font-size: 14px;
  background: rgb(255 255 255 / 0.25); border-radius: 999px; padding: 4px 16px; margin-bottom: 14px;
}
.group-card p { font-size: 15px; line-height: 1.65; color: rgb(255 255 255 / 0.94); }

/* ============ First visit checklist ============ */
.firstvisit .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 860px) { .firstvisit .cols { grid-template-columns: 1fr; } }
.firstvisit p { line-height: 1.75; color: rgb(30 27 22 / 0.8); font-size: 16px; margin-bottom: 18px; max-width: 520px; }
.checklist { list-style: none; margin: 10px 0 26px; }
.checklist li {
  font-family: var(--font-fun); font-weight: 600; font-size: 17px;
  padding: 12px 0 12px 44px; position: relative;
  border-bottom: 2px dashed rgb(30 27 22 / 0.15);
}
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--k-green); color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transform: rotate(-6deg);
}
.firstvisit .photo {
  border-radius: 30px; overflow: hidden; transform: rotate(2deg);
  box-shadow: 0 26px 55px -20px rgb(30 27 22 / 0.35);
  transition: transform 0.5s var(--ease);
}
.firstvisit .photo:hover { transform: rotate(0) scale(1.03); }
.firstvisit .photo img { width: 100%; height: 100%; object-fit: cover; }

/* ============ Register (orange rounded card) ============ */
.register-band {
  background: var(--k-coral); color: var(--color-bg);
  border-radius: 44px; margin: 0 3vw;
  position: relative; overflow: hidden;
}
.register-band .fun-title { color: var(--color-bg); text-align: center; margin-bottom: 16px; }
.register-band > p { max-width: 520px; margin: 0 auto 40px; text-align: center; line-height: 1.65; font-size: 17px; color: rgb(251 244 226 / 0.94); }
.register-band .form-wrap { margin: 0 auto; }
.register-band .float { opacity: 0.5; }

/* ============ Grown-ups strip (safety) ============ */
.grownups { text-align: center; }
.grownups .safe-chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.safe-chip {
  font-family: var(--font-fun); font-weight: 700; font-size: 14px;
  border: 2.5px solid var(--color-dark); color: var(--color-dark);
  padding: 10px 22px; border-radius: 999px; transform: rotate(-1.5deg);
}
.safe-chip:nth-child(2n) { transform: rotate(1.5deg); }
.grownups p { max-width: 640px; margin: 18px auto 0; line-height: 1.7; color: rgb(30 27 22 / 0.8); font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .kids-hero h1 .l { animation: none; opacity: 1; }
  .kids-hero .sub, .kids-hero .badges, .kids-hero .cta-row { opacity: 1; animation: none; }
  .float { animation: none; }
}