/* Homepage: the street's own colours on the web. Loads after site.css. */

:root {
  --sky-top: #5EAEC0;
  --sky: #7EC0CC;
  --sky-horizon: #C9E6DE;
  --grass: #A8C7AE;
  --grass-deep: #8DB596;
  --locked: #EBE5DA;
  --night: #2B2A33;
  --night-deep: #1F1E26;
  --lamp: #FFE9A3;
}

/* ---- header on the home page: adds the main action ---- */
.hm-head .gk-nav ul { align-items: center; }
.hm-head .gk-nav .gk-btn { margin-left: var(--gk-space-3); }
@media (max-width: 559px) { .hm-head .gk-nav .gk-btn { display: none; } }

/* ---- hero: sky, clouds, a house, the ball going over ---- */
.hm-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky) 45%, var(--sky-horizon) 100%); color: var(--gk-ink); }
.hm-hero__inner { position: relative; z-index: 2; display: grid; gap: var(--gk-space-6); padding-top: var(--gk-space-8); padding-bottom: 0; }
@media (min-width: 900px) { .hm-hero__inner { grid-template-columns: 6fr 6fr; align-items: end; gap: var(--gk-space-7); padding-top: var(--gk-space-9); } }
.hm-hero__copy { display: grid; gap: var(--gk-space-5); padding-bottom: var(--gk-space-8); align-content: start; position: relative; z-index: 2; }
.hm-hero__logo { margin: 0; max-width: 560px; }
.hm-hero__logo img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 0 rgba(43, 42, 51, 0.18)); }
.hm-pill { display: inline-flex; align-items: center; gap: var(--gk-space-2); font-family: var(--gk-font-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--gk-type-small); background: var(--gk-cream); border: 2px solid var(--gk-ink); border-radius: 999px; padding: 6px 14px; width: max-content; max-width: 100%; }
.hm-pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gk-over); border: 2px solid var(--gk-ink); flex: none; }
.hm-hero .gk-lead { font-weight: 700; max-width: 22ch; }
.hm-hero .gk-textlink { font-weight: 700; }

/* the scene: house in the middle, Tuck left, Bea right, ball over the roof */
.hm-scene { position: relative; height: 340px; }
@media (min-width: 560px) { .hm-scene { height: 420px; } }
@media (min-width: 900px) { .hm-scene { height: 520px; } }
.hm-scene img { position: absolute; bottom: 0; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.hm-scene__house { left: 50%; width: 62%; transform: translateX(-50%); bottom: 2%; }
.hm-scene__tuck { left: 2%; width: 24%; bottom: 0; }
.hm-scene__bea { right: 4%; width: 21%; bottom: 0; }
.hm-scene__shadow { position: absolute; bottom: 2px; height: 14px; border-radius: 50%; background: rgba(43, 42, 51, 0.16); }
.hm-scene__shadow--tuck { left: 6%; width: 18%; }
.hm-scene__shadow--bea { right: 7%; width: 16%; }
.hm-ball { position: absolute; left: 14%; bottom: 46%; width: 10%; max-width: 56px; aspect-ratio: 1; }
.hm-ball::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--gk-over); border: 3px solid var(--gk-ink); box-shadow: 0 3px 0 var(--gk-ink); }
.hm-ball__x { position: absolute; inset: 0; animation: hm-ball-x 3.2s linear infinite; }
.hm-ball__y { position: absolute; inset: 0; animation: hm-ball-y 3.2s cubic-bezier(.2, .9, .8, 1) infinite; }
@keyframes hm-ball-x { 0% { transform: translateX(0); } 100% { transform: translateX(640%); } }
@keyframes hm-ball-y { 0% { transform: translateY(0); } 50% { transform: translateY(-260%); } 100% { transform: translateY(0); } }
@media (max-width: 559px) { .hm-ball { max-width: 32px; } @keyframes hm-ball-x { 0% { transform: translateX(0); } 100% { transform: translateX(560%); } } }
.hm-ball__trail { position: absolute; inset: 0; }

/* ground */
.hm-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: var(--grass); z-index: 1; }
.hm-ground::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: var(--grass-deep); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }

/* clouds: cream blobs drifting */
.hm-cloud { position: absolute; z-index: 0; fill: var(--gk-cream); opacity: 0.95; }
.hm-cloud--a { width: 220px; top: 8%; left: -40px; animation: hm-drift 70s linear infinite; }
.hm-cloud--b { width: 150px; top: 22%; left: 55%; animation: hm-drift 95s linear infinite; animation-delay: -30s; }
.hm-cloud--c { width: 110px; top: 4%; left: 78%; animation: hm-drift 120s linear infinite; animation-delay: -60s; }
@keyframes hm-drift { 0% { transform: translateX(-30vw); } 100% { transform: translateX(110vw); } }

/* ---- kids: a consistent way to show a character ---- */
.hm-kid { display: grid; justify-items: center; gap: var(--gk-space-2); }
.hm-kid img { width: 100%; height: auto; max-width: 180px; transition: transform 240ms cubic-bezier(.3, 1.4, .5, 1); transform-origin: 50% 100%; }
.hm-kid:hover img, .hm-kid:focus-within img { transform: translateY(-8px) rotate(-3deg); }
.hm-kid__shadow { width: 60%; height: 10px; border-radius: 50%; background: rgba(43, 42, 51, 0.14); margin-top: -8px; }

/* ---- about strip ---- */
.hm-about { background: var(--gk-cream); }
.hm-about__grid { display: grid; gap: var(--gk-space-7); align-items: center; }
@media (min-width: 900px) { .hm-about__grid { grid-template-columns: 6fr 5fr; } }
.hm-about__kids { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gk-space-4); align-items: end; }
.hm-about__kids .hm-kid:nth-child(2) { transform: translateY(-14px); }

/* ---- game cards ---- */
.hm-cards { display: grid; gap: var(--gk-space-5); }
@media (min-width: 720px) { .hm-cards { grid-template-columns: 7fr 5fr; } }
.hm-card { position: relative; display: grid; gap: var(--gk-space-4); align-content: start; border: var(--gk-keyline); border-radius: var(--gk-radius-media); padding: var(--gk-space-6); box-shadow: var(--gk-shadow-media); background: var(--gk-cream); min-height: 360px; transition: transform var(--gk-dur-hover) ease-out, box-shadow var(--gk-dur-hover) ease-out; }
.hm-card:hover { transform: translateY(-4px); box-shadow: 0 12px 0 var(--gk-ink); }
.hm-card--over { background: var(--gk-over); overflow: hidden; }
.hm-card--over .hm-card__logo { width: min(100%, 320px); height: auto; }
.hm-card--over .hm-card__art { position: absolute; right: -4%; bottom: -2%; width: 46%; max-width: 300px; pointer-events: none; }
.hm-card--over .hm-card__body { max-width: 24ch; position: relative; z-index: 1; }
.hm-card__meta { display: flex; gap: var(--gk-space-2); flex-wrap: wrap; align-items: center; }
.hm-card--locked { background: var(--locked); border-style: dashed; box-shadow: none; justify-items: center; text-align: center; }
.hm-card--locked:hover { transform: none; box-shadow: none; }
.hm-card--locked .hm-card__silhouette { width: 120px; height: auto; filter: brightness(0) opacity(0.22); transition: transform 300ms ease; }
.hm-card--locked:hover .hm-card__silhouette { transform: rotate(-6deg); }
.hm-card--locked .hm-card__q { font-family: var(--gk-font-label); font-weight: 700; font-size: 3rem; line-height: 1; letter-spacing: 0.1em; }

/* ---- action: the video and the three moves ---- */
.hm-action { background: var(--sky-horizon); }
.hm-action__grid { display: grid; gap: var(--gk-space-7); align-items: center; }
@media (min-width: 900px) { .hm-action__grid { grid-template-columns: 5fr 7fr; } }
.hm-moves { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gk-space-4); align-items: end; }
.hm-moves .hm-kid img { max-width: 220px; }
.hm-moves .hm-move__label { font-family: var(--gk-font-headline); font-weight: 900; font-size: var(--gk-type-h3); letter-spacing: -0.01em; }
.hm-action .gk-frame { max-width: 300px; margin: 0 auto; }

/* ---- the street: friends and their lines ---- */
.hm-street { background: var(--gk-cream); }
.hm-friends { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gk-space-5); }
@media (min-width: 720px) { .hm-friends { grid-template-columns: repeat(4, 1fr); } }
.hm-friend { display: grid; gap: var(--gk-space-3); justify-items: center; text-align: center; }
.hm-friend q { display: block; font-weight: 700; quotes: none; background: var(--gk-cream); border: 2px solid var(--gk-ink); border-radius: 16px; padding: var(--gk-space-3) var(--gk-space-4); position: relative; }
.hm-friend q::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 14px; height: 14px; background: var(--gk-cream); border-right: 2px solid var(--gk-ink); border-bottom: 2px solid var(--gk-ink); transform: translateX(-50%) rotate(45deg); }

/* ---- sign-up at dusk ---- */
.hm-dusk { background: linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%); color: var(--gk-cream); position: relative; overflow: hidden; }
.hm-dusk .gk-muted { color: var(--gk-cream-muted); }
.hm-lamp { position: absolute; right: 8%; top: 18%; bottom: 0; width: 8px; border-radius: 4px 4px 0 0; background: var(--gk-cream-muted); opacity: 0.3; }
.hm-lamp::before { content: ""; position: absolute; top: 0; left: 50%; width: 260px; height: 260px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 233, 163, 0.35) 0%, rgba(255, 233, 163, 0) 70%); }
.hm-lamp::after { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--lamp); box-shadow: 0 0 24px 8px rgba(255, 233, 163, 0.55); }
@media (max-width: 719px) { .hm-lamp { display: none; } }

/* ---- the three doors ---- */
.hm-doors { display: grid; gap: var(--gk-space-4); }
@media (min-width: 720px) { .hm-doors { grid-template-columns: repeat(3, 1fr); } }
.hm-door { display: grid; gap: var(--gk-space-2); align-content: start; padding: var(--gk-space-5); border: var(--gk-keyline); border-radius: var(--gk-radius-media); background: var(--gk-cream); text-decoration: none; color: inherit; box-shadow: var(--gk-shadow-press); transition: transform var(--gk-dur-hover) ease-out, box-shadow var(--gk-dur-hover) ease-out; }
a.hm-door:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--gk-ink); }
.hm-door .gk-h3 { margin: 0; }

/* ---- section rhythm on the home page ---- */
.hm-section { padding-block: var(--gk-space-8); }
@media (min-width: 960px) { .hm-section { padding-block: var(--gk-space-9); } }
.hm-section__head { display: grid; gap: var(--gk-space-3); margin-bottom: var(--gk-space-6); max-width: 34ch; }
.hm-section__head .gk-h2 { text-wrap: balance; }

/* ---- motion off ---- */
@media (prefers-reduced-motion: reduce) {
  .hm-ball__x, .hm-ball__y, .hm-cloud { animation: none !important; }
  .hm-ball { left: 47%; bottom: 80%; }
  .hm-kid img, .hm-card, .hm-door, .hm-card__silhouette { transition: none !important; transform: none !important; }
}

/* ---- Duolingo-style rows: copy one side, art the other, alternating ---- */
.hm-row__grid { display: grid; gap: var(--gk-space-6); align-items: center; }
@media (min-width: 900px) { .hm-row__grid { grid-template-columns: 1fr 1fr; gap: var(--gk-space-9); } .hm-row--flip .hm-row__art { order: 2; } }
.hm-row__copy { display: grid; gap: var(--gk-space-4); align-content: center; }
.hm-row__copy .gk-h1 { text-wrap: balance; max-width: 16ch; }
.hm-row__art { display: grid; justify-items: center; }
.hm-row__logo { width: min(100%, 520px); height: auto; filter: drop-shadow(0 8px 0 rgba(43, 42, 51, 0.12)); }
.hm-row .gk-frame { max-width: 300px; }

/* hero without the scene: headline left, mascot slot right, on the grass */
.hm-hero .gk-display { max-width: 15ch; text-wrap: balance; }
.hm-hero__copy { padding-bottom: var(--gk-space-9); }

/* mascot slots: where the drawn art goes once it exists. Dashed, labelled, never shipped. */
.hm-slot { display: grid; place-content: center; text-align: center; gap: var(--gk-space-1); border: 3px dashed var(--gk-ink); border-radius: var(--gk-radius-media); color: var(--gk-ink); background: rgba(255, 248, 236, 0.55); font-weight: 700; }
.hm-slot--hero { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: min(78%, 360px); aspect-ratio: 1; }
.hm-slot--friend { width: 100%; max-width: 180px; aspect-ratio: 1; font-size: var(--gk-type-small); }
.hm-card--locked { min-height: 0; width: min(100%, 360px); padding: var(--gk-space-7) var(--gk-space-6); }
@media (min-width: 560px) { #action-title { white-space: nowrap; max-width: none; } }

/* ---- Plimsoul ---- */
.hm-mascot { height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.hm-mascot--hero { position: absolute; left: 50%; bottom: 3%; width: min(70%, 380px); transform: translateX(-50%); transform-origin: 50% 100%; animation: hm-bob 3s ease-in-out infinite; }
@keyframes hm-bob { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0); } 50% { transform: translateX(-50%) translateY(-10px) rotate(-2deg); } }
.hm-row__art--over { position: relative; }
.hm-mascot--over { position: absolute; width: 34%; max-width: 220px; right: -2%; bottom: -10%; z-index: 1; transform: rotate(6deg); }
.hm-mascot--dive { width: min(60%, 300px); margin-top: var(--gk-space-3); }
.hm-mascot--friend { width: 100%; max-width: 190px; transition: transform 240ms cubic-bezier(.3, 1.4, .5, 1); transform-origin: 50% 100%; }
.hm-friend:hover .hm-mascot--friend { transform: translateY(-8px) rotate(-4deg); }
.hm-card--locked .hm-card__silhouette { width: 150px; }
@media (prefers-reduced-motion: reduce) { .hm-mascot--hero { animation: none; } .hm-mascot--friend { transition: none; transform: none !important; } }