/* Home: animated sky, sun, clouds, owl, three doors. */
.home .mascot { display: none; } /* the hero has its own big waving owl */

.hero {
  position: relative;
  min-height: clamp(470px, 72vh, 660px);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 78%, #e9fbe0 100%);
  border-radius: 0 0 48px 48px;
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.sun {
  position: absolute;
  top: 5%;
  right: 6%;
  width: clamp(120px, 22vw, 240px);
  height: auto;
  overflow: visible;
}
.sun__rays { transform-box: view-box; transform-origin: 0 0; animation: spin 28s linear infinite; animation-play-state: var(--loops); }
.sun__glow { transform-box: view-box; transform-origin: 0 0; animation: pulse-glow 3.4s ease-in-out infinite; animation-play-state: var(--loops); }
.sun__face { transform-box: view-box; transform-origin: 0 20px; animation: sway 5s ease-in-out infinite; animation-play-state: var(--loops); }

.cloud {
  position: absolute;
  left: 0;
  width: 160px;
  height: 52px;
  border-radius: 60px;
  background: #fff;
  box-shadow: 0 10px 0 rgba(140, 200, 240, 0.35);
  opacity: 0.95;
  animation: drift 70s linear infinite;
  animation-play-state: var(--loops);
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
}
.cloud::before { width: 72px; height: 72px; left: 22px; top: -36px; }
.cloud::after { width: 56px; height: 56px; left: 78px; top: -26px; }
.cloud--1 { top: 12%; animation-duration: 75s; animation-delay: -20s; }
.cloud--2 { top: 30%; animation-duration: 95s; animation-delay: -62s; opacity: 0.85; }
.cloud--3 { top: 6%; animation-duration: 120s; animation-delay: -95s; opacity: 0.8; }
html.calm .cloud--1 { transform: translateX(8vw); }
html.calm .cloud--2 { transform: translateX(40vw); }
html.calm .cloud--3 { transform: translateX(62vw); }

.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30%; }

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(48px, 9vh, 96px) var(--gutter) 150px;
  text-align: center;
}
.hero__title { margin: 0; font-size: var(--fs-xxl); line-height: 1; }
.hero__letters { display: inline-flex; flex-wrap: nowrap; }
.hero__letter {
  display: inline-block;
  color: #fff;
  -webkit-text-stroke: 3px rgba(43, 45, 66, 0.85);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(43, 45, 66, 0.25);
  animation: drop-in 700ms var(--ease-spring) both, bob 3.2s ease-in-out infinite;
  animation-play-state: running, var(--loops);
}
.hero__letter--0 { color: #ff6b6b; }
.hero__letter--1 { color: #ffd23f; }
.hero__letter--2 { color: #4cd37a; }
.hero__letter--3 { color: #4cb8ff; }
.hero__letter--4 { color: #b78bff; }
.hero__letter--5 { color: #ff8fd0; }
.hero__letter:nth-child(1) { animation-delay: 100ms, 1.2s; }
.hero__letter:nth-child(2) { animation-delay: 180ms, 1.4s; }
.hero__letter:nth-child(3) { animation-delay: 260ms, 1.6s; }
.hero__letter:nth-child(4) { animation-delay: 340ms, 1.8s; }
.hero__letter:nth-child(5) { animation-delay: 460ms, 2.0s; }
.hero__letter:nth-child(6) { animation-delay: 540ms, 2.2s; }
.hero__letter:nth-child(7) { animation-delay: 620ms, 2.4s; }
.hero__letter:nth-child(8) { animation-delay: 700ms, 2.6s; }
html.calm .hero__letter { animation: fade-in 400ms both; }
@media (prefers-reduced-motion: reduce) { .hero__letter { animation: fade-in 400ms both; } }

.hero__tagline { margin: 0; font-size: var(--fs-l); font-weight: 900; color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8); }
.hero__cta { margin-top: var(--space-3); }

.hero__owl {
  position: absolute;
  left: clamp(8px, 5vw, 80px);
  bottom: 18px;
  width: clamp(96px, 15vw, 180px);
  animation: pop-in 800ms var(--ease-spring) 600ms both;
}
.hero__owl .mascot__svg { width: 100%; height: auto; overflow: visible; }
.hero__owl .mascot__wing--right { animation: wave 1.6s ease-in-out infinite; animation-play-state: var(--loops); }

/* ---------- doors ---------- */
.doors { max-width: 1060px; margin: calc(-1 * var(--space-6)) auto 0; padding: 0 var(--gutter); position: relative; z-index: 2; }
/* one door per group: five in a row on wide screens, three then two, then two by two (an odd
   last door sits in the middle) */
.doors__list {
  --gap: clamp(10px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.doors__list > li { flex: 0 0 calc((100% - 4 * var(--gap)) / 5 - 1px); } /* -1px: rounding never wraps a row */
/* six doors: three and three; seven or eight: rows of four (the class says how many there are) */
.doors__list--n6 > li { flex-basis: calc((100% - 2 * var(--gap)) / 3 - 1px); }
.doors__list--n7 > li,
.doors__list--n8 > li { flex-basis: calc((100% - 3 * var(--gap)) / 4 - 1px); }
.door {
  display: flex;
  flex-direction: column;
  height: 100%; /* doors in a row are the same height, even when a name takes two lines */
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-l);
  background: #fff;
  box-shadow: var(--shadow-2);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.door:hover { color: var(--ink); transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.door:active { transform: scale(0.96); }
.door__frame {
  --door: #ff8a3d;
  --door-dark: #c2410c;
  position: relative;
  display: block;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 18px 18px;
  background: radial-gradient(circle at 50% 40%, #fffbe6 0%, #ffe9a8 60%, #ffd76b 100%);
  box-shadow: inset 0 0 0 8px var(--door-dark);
  perspective: 900px;
}
.door__inside {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(2.4rem, 9vw, 5rem);
  transform: scale(0.7);
  transition: transform var(--dur-3) var(--ease-spring);
}
.door__leaf {
  position: absolute;
  inset: 8px;
  border-radius: 999px 999px 12px 12px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(0, 0, 0, 0.1) 47%, rgba(0, 0, 0, 0.1) 53%, transparent 53%),
    linear-gradient(180deg, var(--door) 0%, var(--door-dark) 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.25);
  transform-origin: 0 50%;
  transition: transform 700ms var(--ease-spring);
  backface-visibility: hidden;
}
.door__window {
  position: absolute;
  left: 30%;
  right: 30%;
  top: 14%;
  height: 18%;
  border-radius: 999px 999px 8px 8px;
  background: rgba(255, 255, 255, 0.55);
}
.door__knob {
  position: absolute;
  right: 12%;
  top: 56%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7c2, #f5a300);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.door:hover .door__leaf,
.door:focus-visible .door__leaf { transform: rotateY(-72deg); }
.door:hover .door__inside,
.door:focus-visible .door__inside { transform: scale(1.05); }
.door__label { font-size: var(--fs-l); font-weight: 900; }
.door__hint { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.door--little-learners .door__frame { --door: #ff7eb6; --door-dark: #b8236b; }
.door--letters-words .door__frame { --door: #3fa9f5; --door-dark: #1b64b5; }
.door--numbers-sums .door__frame { --door: #ff8a3d; --door-dark: #c2410c; }
.door--our-world .door__frame { --door: #3ccf6e; --door-dark: #13803d; }
.door--school-skills .door__frame { --door: #a77bf3; --door-dark: #6a3fc4; }
.door--think-remember .door__frame { --door: #5c6bc0; --door-dark: #283593; }
.door--hindi .door__frame { --door: #ff7043; --door-dark: #bf360c; }
.door--create .door__frame { --door: #ef5350; --door-dark: #b71c1c; }
@media (max-width: 1100px) {
  .doors__list > li { flex-basis: calc((100% - 2 * var(--gap)) / 3 - 1px); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .doors__list--n7 > li,
  .doors__list--n8 > li { flex-basis: calc((100% - 3 * var(--gap)) / 4 - 1px); }
}
@media (max-width: 720px) {
  .doors__list > li { flex-basis: calc((100% - var(--gap)) / 2 - 1px); }
}
@media (max-width: 560px) {
  .door { padding: var(--space-2); }
  .door__hint { display: none; }
  .door__label { font-size: var(--fs-m); }
}

/* ---------- decorative friends ---------- */
.friends {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: 1060px;
  margin: var(--space-7) auto 0;
  padding: 0 var(--gutter);
}
.friend { width: clamp(80px, 14vw, 150px); height: auto; animation: bob 3.6s ease-in-out infinite; animation-play-state: var(--loops); }
.friend--2 { animation-delay: -0.8s; }
.friend--3 { animation-delay: -1.6s; }
.friend--4 { animation-delay: -2.4s; }
.friend--5 { animation-delay: -3.0s; }

@media (max-width: 640px) {
  .sun { width: 92px; top: 8px; right: 8px; }
  .hero { min-height: 0; }
  .hero__content { padding-top: 112px; padding-bottom: 170px; }
  .hero__owl { width: 92px; }
}

/* The Daily challenge card (js/pages/home.js fills in the streak) */
.daily-card { max-width: 560px; margin: var(--space-6) auto 0; padding: 0 var(--gutter); }
.daily-card__link { display: flex; align-items: center; gap: var(--space-4); min-height: var(--tap); padding: var(--space-3) var(--space-5); border-radius: var(--radius-l); background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 6px 0 var(--sun-deep), var(--shadow-2); transition: transform var(--dur-2) var(--ease-spring); }
.daily-card__link:hover { transform: translateY(-3px); }
.daily-card__star { font-size: 2.4rem; line-height: 1; }
.daily-card__text { display: grid; gap: 2px; }
.daily-card__title { font-size: var(--fs-l); }
.daily-card__streak { font-size: var(--fs-s); font-weight: 800; color: var(--ink-soft); }

/* "Do you remember?" card (only when something is due; js/pages/home.js) */
.daily-card--remember { margin-top: var(--space-5); }
.daily-card--remember[hidden] { display: none; }
.daily-card--remember .daily-card__link { box-shadow: 0 6px 0 var(--purple-deep), var(--shadow-2); }