/* =========================================================================
   HeartFelt Kids — Homepage sections
   Ported from the approved watercolor mockup. Loaded only on the front page.
   Order: hero + scene → Melody → fresh today → surprise → explore →
          featured songs → sticker book → seasons → write a song → newsletter
   ========================================================================= */

/* =========================================================================
   HERO + WATERCOLOR SCENE
   ========================================================================= */
.hero { position: relative; overflow: hidden; padding-bottom: 80px;
  background: linear-gradient(180deg, #BFE3F5 0%, #DDF0FA 40%, #EAF6DC 72%, var(--cream) 100%); }

.scene { position: absolute; inset: 0; pointer-events: none; }
.scene-sun { position: absolute; top: 44px; left: 72px; }
.scene-rainbow { position: absolute; top: 30px; left: -70px; opacity: 0.85; }
.scene-cloud { position: absolute; }
.scene-cloud--1 { top: 60px; left: 410px; width: 120px; }
.scene-cloud--2 { top: 40px; right: 150px; width: 140px; }
.scene-cloud--3 { top: 150px; left: 120px; width: 90px; }
.scene-cloud--4 { top: 118px; right: 420px; width: 105px; }

/* The little creatures. Each is a tappable button, so the usual button
   chrome is stripped away and only the drawing remains. */
.critter { position: absolute; background: none; border: 0; padding: 0; cursor: pointer;
  line-height: 0; z-index: 2; }
.critter:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 4px; border-radius: 50%; }
/* The welcome panel sits in the middle of the meadow, so the creatures live
   in the open space either side of it where children can actually see them. */
.critter--butterfly-1 { top: 200px; left: 96px; }
.critter--butterfly-2 { top: 168px; right: 108px; }
.critter--bee { bottom: 62px; left: 218px; }
.critter--snail { bottom: 26px; left: 430px; }
.scene-mushroom { position: absolute; bottom: 22px; left: 316px; }
.scene-bird { position: absolute; top: 120px; left: 600px; }
.scene-tree { position: absolute; right: 34px; bottom: 0; }
.scene-flowers { position: absolute; left: 160px; bottom: 20px; display: flex; gap: 22px; }

/* Rolling meadow hills, drawn as soft ellipses */
.hill { position: absolute; border-radius: 50%; }
.hill--back { width: 1900px; height: 390px; left: -260px; bottom: -292px; background: #A5D683; opacity: 0.6; }
.hill--front { width: 1700px; height: 350px; right: -320px; bottom: -274px; background: #8FCB6B; opacity: 0.8; }

.hero-inner { position: relative; z-index: 2; display: flex; justify-content: center; padding-top: 70px; }
.hero-panel { position: relative; width: 820px; max-width: 100%; text-align: center;
  padding: 52px 60px 48px; overflow: hidden; }

/* Notebook rule lines behind the welcome text */
.notebook-lines { position: absolute; left: 40px; right: 40px; top: 150px; bottom: 40px; }
.notebook-lines span { display: block; height: 1px; background: #E4EEF6; margin-bottom: 33px; }
.hero-panel > *:not(.notebook-lines) { position: relative; z-index: 1; }

.hero-mark { display: flex; justify-content: center; margin-bottom: 14px; }
.hero-panel .display { margin: 0 0 8px; }
.hero-tagline { font-family: var(--font-head); font-weight: var(--w-bold); font-size: 19px;
  color: var(--wood-deep); margin: 0 0 14px; }
.hero-panel .hero-sub { max-width: 560px; margin: 0 auto; font-size: 18px; color: var(--body); }

/* Three action tiles: icon above label, never overlapping */
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.action-tile { border-radius: var(--radius-lg); padding: 24px 16px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; align-items: center; }
.action-tile__icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.9);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.action-tile__title { font-family: var(--font-head); font-weight: var(--w-extrabold); font-size: 18px; color: #fff; }
.action-tile__sub { color: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: var(--w-bold); margin-top: 3px; }
.action-tile--sun { background: var(--sun-deep); }
.action-tile--meadow { background: var(--meadow-deep); }
.action-tile--heart { background: var(--heart); }

.hero-promise { display: flex; justify-content: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.hero-promise li { display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--w-extrabold); font-size: 14px; color: var(--ink); }

/* =========================================================================
   MELODY, the buddy who greets children
   ========================================================================= */
.buddy { position: absolute; left: 44px; bottom: 20px; z-index: 3; width: 236px; }
.buddy__trigger { display: block; width: 100%; text-align: left; }
.buddy__bubble { display: block; position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--shadow); padding: 13px 16px;
  font-family: var(--font-head); font-weight: var(--w-bold); font-size: 14px;
  line-height: 1.35; color: var(--ink); margin: 0 0 12px 30px; }
.buddy__tail { position: absolute; left: 34px; top: 100%; }
.buddy__name { position: absolute; left: 104px; bottom: 76px; background: var(--heart); color: #fff;
  font-family: var(--font-head); font-weight: var(--w-bold); font-size: 12px;
  border-radius: var(--pill); padding: 4px 12px; box-shadow: var(--shadow-sm); }
.buddy__figure { margin-left: 2px; }

/* =========================================================================
   FRESH TODAY — song and story of the day
   ========================================================================= */
.today-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.today-card { display: flex; align-items: center; gap: 22px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 22px; }
.today-card__art { flex: none; width: 120px; height: 120px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center; position: relative; }
.today-card__badge { position: absolute; left: 8px; top: 8px; background: #fff; color: var(--ink);
  font-family: var(--font-head); font-weight: var(--w-extrabold); font-size: 9.5px; letter-spacing: 1px;
  border-radius: var(--pill); padding: 4px 9px; box-shadow: var(--shadow-sm); }
.today-card__body { flex: 1; }
.today-card__kicker { font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
.today-card h3 { font-size: 22px; margin: 4px 0 3px; }
.today-card__body p { margin: 0 0 14px; font-size: 14.5px; color: var(--soft); }

/* =========================================================================
   SURPRISE ME
   ========================================================================= */
.surprise { background: linear-gradient(120deg, #FFD45E 0%, #FFB03A 100%);
  border-radius: var(--radius-xl); padding: 44px 56px; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.surprise__copy { max-width: 520px; }
.surprise__copy h2 { color: var(--wood-deep); margin: 0 0 8px; }
.surprise__copy p { color: #7A5A2E; font-size: 17px; font-weight: var(--w-bold); margin: 0; }
.surprise__btn { flex: none; display: flex; flex-direction: column; align-items: center;
  background: #fff; border: none; border-radius: 34px; padding: 22px 34px; box-shadow: var(--shadow); }
.surprise__btn-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--heart);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.surprise__btn-text { font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: 20px; color: var(--heart); }

/* =========================================================================
   EXPLORE — category tiles with colored label bars
   ========================================================================= */
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cat-tile { display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 12px 12px 0; box-shadow: var(--shadow-sm);
  overflow: hidden; transition: transform var(--ease), box-shadow var(--ease); }
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-tile__art { height: 150px; border-radius: var(--radius); position: relative;
  display: flex; align-items: center; justify-content: center; }
.cat-tile__go { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px;
  border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); }
.cat-tile__label { margin: 12px -12px 0; padding: 14px 16px; text-align: center; }
.cat-tile__label h3 { color: #fff; font-size: 20px; }
.cat-tile__label p { color: rgba(255, 255, 255, 0.92); font-size: 13px; margin: 3px 0 0; font-weight: var(--w-bold); }

/* Tints and label colors, one per section */
.tint-sky    { background: var(--sky-soft); }    .label-sky    { background: var(--sky-deep); }
.tint-meadow { background: var(--meadow-soft); } .label-meadow { background: var(--meadow-deep); }
.tint-sun    { background: var(--sun-soft); }    .label-sun    { background: var(--sun-deep); }
.tint-lav    { background: var(--lav-soft); }    .label-lav    { background: var(--lav-deep); }
.tint-heart  { background: var(--heart-soft); }  .label-heart  { background: var(--heart); }
.tint-wood   { background: var(--wood-soft); }   .label-wood   { background: var(--wood); }

/* =========================================================================
   FEATURED SONGS
   ========================================================================= */
.songs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.song-card { display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 12px 12px 16px; box-shadow: var(--shadow-sm);
  transition: transform var(--ease), box-shadow var(--ease); }
.song-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.song-card__cover { height: 150px; border-radius: var(--radius); position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.song-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.song-card__play { position: absolute; right: 12px; bottom: 12px; width: 46px; height: 46px;
  border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); }
.song-card__body { padding: 14px 4px 0; }
.song-card__body h3 { font-size: 18px; margin: 0 0 3px; }
.song-card__body p { margin: 0; font-size: 13px; color: var(--soft); }

/* =========================================================================
   STICKER BOOK
   ========================================================================= */
.sticker-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 36px 40px; }
.sticker-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.sticker-progress__bar { flex: 1; height: 12px; border-radius: 6px; background: var(--sun-soft);
  position: relative; overflow: hidden; }
.sticker-progress__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--sun); }
.sticker-progress__count { font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: 15px; color: var(--wood-deep); white-space: nowrap; }
.sticker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 18px; }
.sticker { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sticker--earned { box-shadow: var(--shadow-sm); }
.sticker--locked { background: #FBF6EC; border: 2px dashed #E4D8C4; }
@media (max-width: 900px) { .sticker-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 640px) { .sticker-grid { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   SEASONS
   ========================================================================= */
.season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.season { border-radius: var(--radius-lg); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); overflow: hidden; background: #fff; }
.season__art { height: 150px; position: relative; display: flex; align-items: flex-end;
  justify-content: center; overflow: hidden; }
/* Sits over the season gradient and deepens as the sun sets. */
.season__sky { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.season__sun { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border-radius: 50%; }
.season__weather { position: absolute; inset: 0; pointer-events: none; }
.season__particle { position: absolute; top: -14px; opacity: 0; }
.season__particle--1 { left: 12%; } .season__particle--2 { left: 28%; }
.season__particle--3 { left: 45%; } .season__particle--4 { left: 62%; }
.season__particle--5 { left: 78%; } .season__particle--6 { left: 90%; }
.season__hill { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; border-radius: 120px 120px 0 0; }
.season__tree { position: relative; z-index: 1; margin-bottom: 6px; }
.season__label { padding: 14px 16px; text-align: center; }
.season__label h3 { font-size: 18px; }
.season__label p { margin: 2px 0 0; font-size: 12.5px; color: var(--soft); font-weight: var(--w-bold); }
.season--spring { background: linear-gradient(180deg, #DDF0FA, #EAF6DC); }
.season--summer { background: linear-gradient(180deg, #BFE3F5, #E7F5D6); }
.season--autumn { background: linear-gradient(180deg, #FBE6C8, #F6E7CE); }
.season--winter { background: linear-gradient(180deg, #E3EDF5, #F2F6FA); }

/* =========================================================================
   WRITE YOUR OWN SONG band
   ========================================================================= */
.write-band { background: linear-gradient(120deg, var(--heart) 0%, #F58AA6 100%);
  border-radius: var(--radius-xl); padding: 48px 56px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.write-band h2 { color: #fff; margin: 12px 0 0; }
.write-band p { color: rgba(255, 255, 255, 0.92); font-size: 18px; margin: 12px 0 22px; }
.write-band .eyebrow { color: #fff; }
.write-band__art { display: flex; justify-content: center; }

/* =========================================================================
   NEWSLETTER
   ========================================================================= */
.news-band { background: var(--sun-soft); border: 1px solid #F2E3B8; border-radius: var(--radius-xl);
  padding: 48px 56px; text-align: center; }
.news-band h2 { margin: 0 0 8px; }
.news-band p { margin: 0 auto 24px; max-width: 520px; font-size: 17px; }
.news-form { display: flex; gap: 12px; justify-content: center; max-width: 500px; margin: 0 auto; }
.news-form .field { flex: 1; }
.news-form .btn { flex: none; }
.news-note { margin: 14px 0 0; font-size: 13.5px; color: var(--wood-deep); font-weight: var(--w-bold); }
.news-msg { margin: 12px 0 0; font-weight: var(--w-bold); font-size: 15px; }
.news-msg--ok { color: var(--meadow-deep); }
.news-msg--error { color: var(--danger); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* Melody stands beside the panel, so she only appears when the meadow is
   wide enough to hold her without leaning on the welcome card. */
@media (max-width: 1420px) {
  .buddy { display: none; }
}
/* The welcome panel takes over the side margins as the screen narrows, which
   would hide the creatures behind it. From here down they move to the open
   grass band under the panel, where children can still spot and tap them.
   Same breakpoint as Melody above, so the whole left side clears at once. */
@media (max-width: 1420px) {
  .critter--butterfly-1 { top: auto; bottom: 8px; left: 60px; }
  .critter--butterfly-2 { top: auto; bottom: 20px; left: 640px; right: auto; }
  .critter--bee { bottom: 6px; left: 300px; }
}
@media (max-width: 1100px) {
  .scene-tree { width: 200px; }
}
@media (max-width: 1024px) {
  .today-grid { grid-template-columns: 1fr; }
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
  .songs-grid { grid-template-columns: repeat(2, 1fr); }
  .season-grid { grid-template-columns: repeat(2, 1fr); }
  .write-band { grid-template-columns: 1fr; }
  .write-band__art { display: none; }
  .hero-panel { padding: 40px 32px 36px; }
}
@media (max-width: 760px) {
  .surprise { flex-direction: column; text-align: center; padding: 34px 28px; }
  .surprise__copy { max-width: none; }
  .action-row { grid-template-columns: 1fr; }
  .today-card { flex-direction: column; text-align: center; }
  .scene-rainbow, .scene-flowers { display: none; }
  /* Phone width: keep a butterfly, the bee and the snail, drop the rest so the
     grass band does not become a crowd. */
  .critter--butterfly-2, .scene-mushroom { display: none; }
  .critter--butterfly-1 { top: auto; bottom: 6px; left: 24px; }
  .critter--bee { bottom: 6px; left: 200px; }
  .critter--snail { left: 320px; right: auto; bottom: 22px; }
  .news-form { flex-direction: column; }
  .news-form .btn { width: 100%; }
}
@media (max-width: 640px) {
  .explore-grid, .songs-grid, .season-grid { grid-template-columns: 1fr; }
  .notebook-lines { display: none; }
  /* A phone is too narrow for the snail's full journey, so it takes a shorter
     stroll. The three of them are spaced across the band so their paths do not
     run into one another. */
  .critter--snail { left: 150px; bottom: 20px; }
  .critter--bee { left: 260px; }
  .sticker-panel { padding: 24px 20px; }
  .write-band, .news-band { padding: 32px 24px; }
}