/* =========================================================
   BebeBloom Kids — shared stylesheet
   Design language: "Bloom Meadow" — scalloped petal dividers,
   bouncy rounded type, a parade of characters that bob and
   pop across a candy-bright meadow.
========================================================= */

:root{
  --cream:      #FFF7E9;
  --cream-2:    #FFEFD6;
  --sun:        #FFC93C;
  --sun-dark:   #F5A623;
  --bubble:     #FF6FA5;
  --bubble-dark:#E8477F;
  --sky:        #3FC5E8;
  --sky-dark:   #1BA9CF;
  --leaf:       #63C168;
  --leaf-dark:  #3FA34D;
  --melon:      #FF7A55;
  --melon-dark: #F0562D;
  --grape:      #9B6BE0;
  --plum:       #35264D;
  --plum-soft:  #5C4A7C;
  --white:      #FFFFFF;

  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --shadow-soft: 0 12px 30px rgba(53,38,77,0.12);
  --shadow-pop:  0 8px 0 rgba(53,38,77,0.15);

  --font-display: "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--plum);
  background: var(--cream);
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  margin:0 0 .4em;
  line-height:1.1;
  color: var(--plum);
}
p{ margin:0 0 1em; line-height:1.6; }
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
section{ position:relative; }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-display);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--melon-dark);
  background: rgba(255,122,85,.12);
  padding:6px 16px;
  border-radius:999px;
  margin-bottom:14px;
}
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.section-head p{ color: var(--plum-soft); font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--font-display);
  font-weight:600;
  font-size:1rem;
  padding:14px 30px;
  border-radius:999px;
  transition: transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:active{ transform: translateY(2px); }
.btn-primary{
  background: var(--melon);
  color:#fff;
  box-shadow: 0 6px 0 var(--melon-dark);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 9px 0 var(--melon-dark); }
.btn-secondary{
  background:#fff;
  color: var(--plum);
  box-shadow: 0 6px 0 rgba(53,38,77,.18);
}
.btn-secondary:hover{ transform: translateY(-3px); box-shadow: 0 9px 0 rgba(53,38,77,.18); }
.btn-sky{ background: var(--sky); box-shadow:0 6px 0 var(--sky-dark); color:#fff; }
.btn-sky:hover{ box-shadow:0 9px 0 var(--sky-dark); }
.btn-grape{ background: var(--grape); box-shadow:0 6px 0 #6f45ad; color:#fff; }
.btn-grape:hover{ box-shadow:0 9px 0 #6f45ad; }
.btn-sm{ padding:10px 20px; font-size:.9rem; }
.btn-block{ width:100%; }

/* ---------- Nav ---------- */
.site-nav{
  position: sticky; top:0; z-index:100;
  background: rgba(255,247,233,.9);
  backdrop-filter: blur(8px);
  border-bottom: 3px dashed rgba(53,38,77,.15);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.4rem;
  color: var(--plum);
}
.logo .bloom-dot{
  width:38px;height:38px;border-radius:50%;
  background: conic-gradient(from 210deg, var(--sun), var(--bubble), var(--sky), var(--leaf), var(--sun));
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
  animation: spin-slow 12s linear infinite;
}
@keyframes spin-slow{ to{ transform: rotate(360deg); } }
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-family: var(--font-display);
  font-weight:600;
  padding:10px 16px;
  border-radius:999px;
  color: var(--plum-soft);
  transition: background .18s ease, color .18s ease;
}
.nav-links a:hover, .nav-links a.active{ background: var(--sun); color: var(--plum); }
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:50%;
  background:#fff;
  box-shadow: var(--shadow-soft);
  align-items:center; justify-content:center;
  font-size:1.3rem;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:64px 0 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:40px;
  align-items:center;
  min-height:min(560px, 70vh);
}
.hero-copy h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  color: var(--plum);
}
.hero-copy h1 span{ color: var(--melon); }
.hero-copy p{ font-size:1.15rem; color: var(--plum-soft); max-width:480px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:8px; }
.hero-stage{ position:relative; height:460px; }
.cloud{
  position:absolute; opacity:.9;
  animation: drift 22s linear infinite;
}
.cloud svg{ width:100%; height:100%; }
@keyframes drift{
  0%{ transform: translateX(-30px); }
  50%{ transform: translateX(20px); }
  100%{ transform: translateX(-30px); }
}
.hero-sun{
  position:absolute; top:0; right:30px; width:120px; height:120px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #FFE79A, var(--sun) 70%);
  box-shadow: 0 0 0 14px rgba(255,201,60,.25);
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }
.hero-hill{
  position:absolute; bottom:0; left:0; right:0; height:120px;
  background: var(--leaf);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: scaleX(1.3);
}
.hero-parade{
  position:absolute; bottom:70px; left:0; right:0;
  display:flex; justify-content:space-evenly; align-items:flex-end;
  padding:0 10px;
}
.hero-parade img{
  width:92px; height:auto; filter: drop-shadow(0 10px 8px rgba(0,0,0,.15));
  animation: bob 2.4s ease-in-out infinite;
  border-radius:50%;
  background:#fff;
  padding:6px;
}
.hero-parade img:nth-child(2){ animation-delay:.3s; width:110px; }
.hero-parade img:nth-child(3){ animation-delay:.6s; }
.hero-parade img:nth-child(4){ animation-delay:.9s; width:80px; }
.hero-parade img:nth-child(5){ animation-delay:1.2s; width:80px; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }

.wave-divider{ display:block; width:100%; line-height:0; }
.wave-divider svg{ width:100%; height:70px; display:block; }

/* ---------- Page banner (inner pages) ---------- */
.page-banner{
  position:relative;
  padding:70px 0 90px;
  text-align:center;
  background: linear-gradient(135deg, var(--sky) 0%, var(--leaf) 100%);
  color:#fff;
  overflow:hidden;
}
.page-banner h1{ color:#fff; font-size:clamp(2.2rem,4.4vw,3.2rem); }
.page-banner p{ color:rgba(255,255,255,.92); max-width:560px; margin:0 auto; font-size:1.1rem; }
.page-banner .eyebrow{ background:rgba(255,255,255,.22); color:#fff; }
.page-banner .float-shape{ position:absolute; opacity:.5; }

/* ---------- Character / feature cards ---------- */
.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.char-card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding:20px 20px 26px;
  text-align:center;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.char-card:hover{ transform: translateY(-8px) rotate(-1deg); box-shadow: 0 18px 34px rgba(53,38,77,.18); }
.char-card .blob{
  width:150px;height:150px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.char-card .blob img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.char-card h3{ font-size:1.3rem; margin-bottom:4px; }
.char-card .role{
  font-family: var(--font-display); font-weight:600; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.04em; color: var(--melon-dark);
  margin-bottom:8px; display:block;
}
.char-card p{ color: var(--plum-soft); font-size:.95rem; margin-bottom:0; }

.tone-sun .blob{ background: var(--sun); }
.tone-bubble .blob{ background: var(--bubble); }
.tone-sky .blob{ background: var(--sky); }
.tone-leaf .blob{ background: var(--leaf); }
.tone-melon .blob{ background: var(--melon); }
.tone-grape .blob{ background: var(--grape); }

/* ---------- Feature tiles ---------- */
.feature-card{
  background:#fff;
  border-radius: var(--radius-lg);
  padding:32px;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease;
}
.feature-card:hover{ transform: translateY(-6px); }
.feature-icon{
  width:64px;height:64px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem; margin-bottom:16px;
  color:#fff;
}
.feature-card h3{ font-size:1.35rem; }
.feature-card p{ color: var(--plum-soft); }
.feature-card .btn{ margin-top:10px; }

/* ---------- Episode / video cards ---------- */
.ep-card{
  background:#fff; border-radius: var(--radius-md);
  overflow:hidden; box-shadow: var(--shadow-soft);
  transition: transform .2s ease;
}
.ep-card:hover{ transform: translateY(-6px); }
.ep-thumb{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ep-thumb img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.ep-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(53,38,77,.28);
  transition: background .2s ease;
}
.ep-play span{
  width:56px;height:56px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--melon);
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.ep-card:hover .ep-play span{ transform: scale(1.12); }
.ep-body{ padding:16px 18px 20px; }
.ep-body h4{ font-size:1.05rem; margin-bottom:6px; }
.ep-body p{ font-size:.88rem; color:var(--plum-soft); margin-bottom:0; }

/* ---------- Video embeds ---------- */
.video-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-soft); transition: transform .2s ease;
}
.video-card:hover{ transform: translateY(-6px); }
.video-embed{ position:relative; width:100%; padding-top:56.25%; background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- Testimonials ---------- */
.quote-track{
  display:flex; gap:22px; overflow-x:auto; padding:10px 4px 26px;
  scroll-snap-type:x mandatory;
}
.quote-track::-webkit-scrollbar{ height:8px; }
.quote-track::-webkit-scrollbar-thumb{ background: var(--sun); border-radius:99px; }
.quote-card{
  min-width:300px; scroll-snap-align:start;
  background:#fff; border-radius: var(--radius-md);
  padding:26px; box-shadow: var(--shadow-soft);
}
.quote-card p{ font-style:italic; color: var(--plum-soft); }
.quote-card .who{ font-family: var(--font-display); font-weight:700; color: var(--melon-dark); font-size:.9rem; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--plum);
  color: rgba(255,255,255,.85);
  padding:60px 0 26px;
  margin-top:60px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-grid h4{ color:#fff; font-size:1rem; margin-bottom:14px; }
.footer-grid a{ display:block; padding:5px 0; color: rgba(255,255,255,.72); transition:color .15s ease; }
.footer-grid a:hover{ color: var(--sun); }
.footer-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:#fff; margin-bottom:10px;}
.footer-logo .bloom-dot{ width:32px; height:32px; }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center; transition: background .2s ease, transform .2s ease;
}
.social-row a:hover{ background: var(--melon); transform: translateY(-3px); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding-top:22px; font-size:.85rem; color: rgba(255,255,255,.55);
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-pop{ opacity:0; transform: scale(.85); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.reveal-pop.in-view{ opacity:1; transform:scale(1); }

/* ---------- Filter pills (activities page) ---------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:38px; }
.filter-pill{
  font-family: var(--font-display); font-weight:600; font-size:.92rem;
  padding:10px 22px; border-radius:999px; background:#fff; color:var(--plum-soft);
  box-shadow: var(--shadow-soft); transition: all .18s ease;
}
.filter-pill.active, .filter-pill:hover{ background: var(--melon); color:#fff; }

/* ---------- Worksheet / printable cards ---------- */
.sheet-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-soft); display:flex; flex-direction:column;
  transition: transform .2s ease;
}
.sheet-card:hover{ transform: translateY(-6px); }
.sheet-top{
  aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center;
  font-size:3rem; position:relative;
}
.sheet-top img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.age-badge{
  position:absolute; top:12px; right:12px; background:#fff; color:var(--plum);
  font-family:var(--font-display); font-weight:700; font-size:.75rem;
  padding:4px 10px; border-radius:999px; box-shadow: var(--shadow-soft);
}
.sheet-body{ padding:16px 18px 20px; flex:1; display:flex; flex-direction:column; gap:10px; }
.sheet-body h4{ font-size:1.05rem; }
.sheet-body p{ font-size:.88rem; color:var(--plum-soft); margin-bottom:4px; flex:1; }
.cat-tag{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; padding:3px 10px; border-radius:999px; color:#fff;
}

/* ---------- Party props / product cards ---------- */
.prop-card{
  background:#fff; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-soft); transition: transform .2s ease; position:relative;
}
.prop-card:hover{ transform: translateY(-6px) rotate(-.6deg); }
.prop-tag{
  position:absolute; top:14px; left:14px; background: var(--bubble); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  padding:5px 12px; border-radius:999px; z-index:2;
}
.prop-img{ aspect-ratio:1/1; overflow:hidden; }
.prop-img img{ width:100%; height:100%; object-fit:cover; object-position: top center; }
.prop-body{ padding:18px 20px 22px; }
.prop-body h4{ font-size:1.1rem; margin-bottom:6px; }
.prop-body p{ font-size:.88rem; color:var(--plum-soft); }
.prop-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.prop-price{ font-family:var(--font-display); font-weight:700; color:var(--melon-dark); }

.bundle-banner{
  background: linear-gradient(120deg, var(--grape), var(--bubble));
  border-radius: var(--radius-lg); color:#fff; padding:44px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.bundle-banner h3{ color:#fff; font-size:1.8rem; }
.bundle-banner p{ color:rgba(255,255,255,.9); max-width:420px; }

/* ---------- Donate page ---------- */
.impact-strip{
  display:grid; grid-template-columns: repeat(4,1fr); gap:24px; text-align:center;
}
.impact-num{
  font-family: var(--font-display); font-weight:800; font-size:2.4rem; color: var(--melon);
}
.impact-label{ color: var(--plum-soft); font-size:.92rem; }

.tier-card{
  background:#fff; border-radius: var(--radius-lg); padding:30px; text-align:center;
  box-shadow: var(--shadow-soft); border:3px solid transparent; cursor:pointer;
  transition: all .2s ease;
}
.tier-card:hover{ transform: translateY(-6px); }
.tier-card.selected{ border-color: var(--melon); box-shadow: 0 14px 30px rgba(255,122,85,.25); }
.tier-amt{ font-family: var(--font-display); font-size:2.1rem; font-weight:800; color: var(--melon-dark); }
.tier-what{ font-size:.92rem; color: var(--plum-soft); margin-top:6px; }

.donate-panel{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding:36px; max-width:640px; margin:0 auto;
}
.custom-amt{
  display:flex; align-items:center; gap:10px; background: var(--cream);
  border-radius:999px; padding:6px 6px 6px 18px; margin-top:18px;
}
.custom-amt span{ font-family:var(--font-display); font-weight:700; color:var(--plum-soft); }
.custom-amt input{
  border:none; background:transparent; font-family:var(--font-display); font-size:1.1rem;
  font-weight:700; color:var(--plum); flex:1; outline:none; padding:10px;
}

.faq-item{ border-bottom:1px dashed rgba(53,38,77,.2); padding:18px 0; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.faq-q .plus{ transition: transform .2s ease; font-size:1.4rem; color: var(--melon); }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .3s ease; color: var(--plum-soft); }
.faq-item.open .faq-a{ max-height:200px; padding-top:10px; }

.toast{
  position:fixed; bottom:26px; left:50%; transform: translateX(-50%) translateY(140%);
  background: var(--plum); color:#fff; padding:16px 26px; border-radius:999px;
  font-family: var(--font-display); font-weight:600; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1); z-index:200; display:flex; gap:10px; align-items:center;
}
.toast.show{ transform: translateX(-50%) translateY(0); }

/* ---------- Utilities ---------- */
.mt-lg{ margin-top:60px; }
.mb-lg{ margin-bottom:60px; }
.text-center{ text-align:center; }
.bg-cream-2{ background: var(--cream-2); }
.py-section{ padding:80px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .impact-strip{ grid-template-columns: repeat(2,1fr); gap:30px; }
}
@media (max-width: 860px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-stage{ height:340px; order:-1; }
  .nav-links{
    position:fixed; inset:74px 16px auto 16px; background:#fff; border-radius:24px;
    flex-direction:column; align-items:stretch; padding:12px; box-shadow: var(--shadow-soft);
    transform-origin: top; transform: scaleY(0); opacity:0; pointer-events:none; transition: all .2s ease;
  }
  .nav-links.open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
  .nav-links a{ text-align:center; }
  .nav-toggle{ display:flex; }
  .bundle-banner{ flex-direction:column; text-align:center; }
}
@media (max-width: 620px){
  .grid-4, .grid-3{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .impact-strip{ grid-template-columns: 1fr 1fr; }
  .hero-parade img{ width:60px !important; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}