/* NubiMoo website. Mobile first. Colors and shapes follow the app. */

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #143f38;
  --green: #2b796a;
  --green-dark: #1f5f53;
  --mint: #ddeedc;
  --mint-soft: #ebf5ea;
  --paper: #faf7ef;
  --card: #ffffff;
  --coral: #f16f4c;
  --yellow: #fdc92f;
  --muted: #45645c;
  --line: rgba(20, 63, 56, 0.12);
  --shadow: 0 1px 2px rgba(20, 63, 56, 0.05), 0 18px 40px -22px rgba(20, 63, 56, 0.28);
  --r-lg: 32px;
  --r-md: 22px;
  --wrap: 1120px;
  --gutter: 16px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (min-width: 900px) { html { scroll-padding-top: 96px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Keep the small hover transitions; stop looping, wiggling and scroll animations. */
  *, *::before, *::after { animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 1.0625rem/1.6 "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--green); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
a:hover { color: var(--green-dark); }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(2.35rem, 8vw, 4.1rem); font-weight: 900; }
h2 { font-size: clamp(1.9rem, 5.2vw, 2.9rem); font-weight: 900; }
h3 { font-size: 1.25rem; font-weight: 850; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 30;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 800;
}
.skip:focus { top: 12px; color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Header: sticky. On phones the logo row scrolls away and the menu row stays (negative top). */
.site-header {
  position: sticky; top: -52px; z-index: 20;
  padding-block: 8px;
  background: rgba(250, 247, 239, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }

.logo {
  display: inline-flex; align-items: center; gap: 8px; height: 44px;
  color: var(--ink); text-decoration: none; font-weight: 900; font-size: 1.5rem; letter-spacing: -0.02em;
}
.logo img { width: 48px; }
.logo .o1 { color: var(--coral); }
.logo .o2 { color: var(--yellow); }
.logo:hover { color: var(--ink); }

.nav {
  order: 3; flex: 1 0 100%; display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none; margin-inline: -6px; padding: 2px 6px;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: none; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 0.95rem;
  padding: 8px 10px; border-radius: 999px; transition: background-color 0.2s ease;
}
.nav a:hover { background: var(--mint); }

.lang {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--mint-soft); border: 1px solid var(--line);
  color: var(--ink); font-weight: 800; text-decoration: none;
}
.lang:hover { background: var(--mint); color: var(--ink); }

/* Legal pages have no menu: on phones their header simply scrolls away */
.site-header:not(:has(.nav)) { position: relative; }

@media (min-width: 900px) {
  .site-header, .site-header:not(:has(.nav)) { position: sticky; top: 0; padding-block: 12px; }
  .site-header .wrap { flex-wrap: nowrap; }
  .logo { font-size: 1.7rem; }
  .logo img { width: 52px; }
  .nav { order: 0; flex: none; margin-left: auto; overflow: visible; margin-inline: auto 0; padding: 0; }
  .nav a { font-size: 1rem; padding: 8px 14px; }
  .nav + .lang { margin-left: 8px; }
}

/* A clearer shadow once the page scrolls (scroll timelines only) */
@keyframes header-lift { to { background: rgba(250, 247, 239, 0.97); box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(20, 63, 56, 0.35); } }
@supports (animation-timeline: scroll()) {
  .site-header { animation: header-lift linear both; animation-timeline: scroll(); animation-range: 0 120px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 12px 26px; border-radius: 999px;
  font: inherit; font-weight: 850; font-size: 1.1rem; text-decoration: none; text-align: left;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { flex: none; }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-soft { background: var(--mint); color: var(--ink); }
.btn-soft:hover { background: #cfe6ce; color: var(--ink); }
.btn-play { background: var(--ink); color: #fff; padding-inline: 22px 28px; line-height: 1.15; }
.btn-play:hover { background: #0c2d28; color: #fff; }
.btn-play small { display: block; font-size: 0.78rem; font-weight: 700; opacity: 0.85; letter-spacing: 0.02em; }

/* Hero: text on the illustration's free left side (wide), stacked on small screens */
.hero { padding-block: 4px 40px; }
.hero-card {
  position: relative; display: grid; overflow: hidden;
  width: min(100% - 16px, 1280px); margin-inline: auto;
  background: #fef7e7; border-radius: var(--r-lg);
}
.hero-text { display: grid; gap: 20px; padding: 28px 20px 8px; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.35rem, 8vw, 3.7rem); }
.eyebrow {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
  font-weight: 800; font-size: 0.95rem;
}
.eyebrow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.soon { font-size: 0.95rem; color: var(--muted); font-weight: 700; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 0; list-style: none; }
.facts li {
  padding: 6px 14px; border-radius: 999px; background: var(--mint); font-weight: 800; font-size: 0.95rem;
}
.facts b { font-weight: 900; }
/* The left third of the illustration is empty paper: show only the painting friends. */
.hero-art img { width: 100%; aspect-ratio: 1260 / 941; object-fit: cover; object-position: 100% 50%; }

@media (min-width: 900px) {
  .hero { padding-block: 8px 48px; }
  .hero-card { width: min(100% - 48px, 1280px); border-radius: 48px; grid-template-columns: 1fr 1.15fr; align-items: center; }
  .hero-text { padding: 48px 0 48px clamp(32px, 5vw, 72px); }
  .hero-card { grid-template-columns: 1fr 1.25fr; }
}

/* Sections */
.section { padding-block: 56px; }
.section-head { display: grid; gap: 14px; margin-bottom: 32px; max-width: 44em; }
.section-head p { font-size: 1.15rem; color: var(--muted); }
.section-head .kicker, .kicker { font-weight: 900; color: var(--green); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }
.band, .band-mint { margin-inline: 8px; border-radius: var(--r-lg); }
.band { background: var(--card); }
.band-mint { background: var(--mint-soft); }
@media (min-width: 900px) { .band, .band-mint { margin-inline: 24px; border-radius: 48px; } }

@media (min-width: 900px) {
  .section { padding-block: 88px; }
}

.card {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px;
}
.card p + p { margin-top: 10px; }

/* Worlds */
.worlds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 0; margin: 0; list-style: none; }
.worlds li {
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow);
  padding: 12px 12px 14px; text-align: center; font-weight: 900; font-size: 1.1rem;
}
.worlds img { width: 100%; aspect-ratio: 1; margin-bottom: 6px; }

@media (min-width: 640px) { .worlds { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .worlds { grid-template-columns: repeat(6, 1fr); } }

.points { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.points li { display: flex; gap: 12px; align-items: flex-start; }
.points li::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 0.42em; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 4px rgba(253, 201, 47, 0.25);
}
.points li:nth-child(3n + 2)::before { background: var(--coral); box-shadow: 0 0 0 4px rgba(241, 111, 76, 0.2); }
.points li:nth-child(3n)::before { background: var(--green); box-shadow: 0 0 0 4px rgba(43, 121, 106, 0.2); }

@media (min-width: 760px) { .points-2 { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }

/* Tools: the paint box */
.paintbox { display: grid; gap: 28px; align-items: start; }
.tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px;
  padding: 16px; margin: 0; list-style: none; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.tools li { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; text-align: center; font-size: 0.85rem; font-weight: 800; line-height: 1.2; }
.tools img { width: 56px; height: 56px; }
.tools .eraser { color: var(--muted); }

@media (min-width: 900px) { .paintbox { grid-template-columns: 1fr 1fr; gap: 40px; } }

/* Screenshots */
.shots {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(62%, 240px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 8px var(--gutter) 22px; margin: 0 calc(-1 * var(--gutter)); list-style: none;
}
.shots li { scroll-snap-align: center; }
.shots figure { margin: 0; }
.shots img {
  width: 100%; aspect-ratio: 480 / 1067; object-fit: cover; border-radius: 28px;
  border: 6px solid var(--ink); background: var(--ink); box-shadow: var(--shadow);
}
.shots figcaption { margin-top: 10px; font-size: 0.95rem; font-weight: 700; color: var(--muted); text-align: center; }
.scenes { display: grid; gap: 20px; margin-top: 36px; }
.scenes figure { margin: 0; }
.scenes picture { display: block; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.scenes img { width: 100%; }
.scenes figcaption { margin-top: 10px; font-size: 0.95rem; font-weight: 700; color: var(--muted); text-align: center; }
.scenes-note { margin-top: 16px; font-size: 0.9rem; color: var(--muted); text-align: center; }
@media (min-width: 800px) { .scenes { grid-template-columns: 1fr 1fr; gap: 28px; } }

@media (min-width: 1000px) {
  .shots { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin: 0; padding: 8px 0 0; }
}

/* Parents */
.nope { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 32px; list-style: none; }
.nope li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 12px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
  font-weight: 850; font-size: 1.05rem;
}
.nope li::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.nope s { text-decoration-thickness: 2px; text-decoration-color: rgba(20, 63, 56, 0.45); }

.cards { display: grid; gap: 16px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.cards .card { display: grid; gap: 10px; align-content: start; }
.icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mint); color: var(--green);
}
.icon svg { width: 24px; height: 24px; }
.icon-coral { background: #fde3db; color: #b8452a; }
.icon-yellow { background: #fff1c4; color: #8a6400; }
.card p { color: var(--muted); }

.gate-words { font-weight: 900; color: var(--ink); white-space: nowrap; }

/* About */
.about { display: grid; gap: 28px; align-items: center; }
.about-text { display: grid; gap: 16px; font-size: 1.15rem; }
.about-text .strong { font-weight: 900; }
.about-art { width: min(100%, 360px); justify-self: center; }
.ai-note {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  margin-top: 8px; padding: 18px 20px; border-radius: var(--r-md); background: var(--mint-soft); border: 1px dashed rgba(43, 121, 106, 0.45);
  font-size: 1rem;
}
.ai-note strong { display: block; margin-bottom: 2px; }
.ai-note p { color: var(--muted); }

@media (min-width: 900px) { .about { grid-template-columns: 1.3fr 1fr; gap: 56px; } .about-art { max-width: 400px; } }

/* Support */
.support-head { display: grid; gap: 8px 40px; align-items: center; margin-bottom: 32px; }
.support-head .section-head { margin-bottom: 0; }
.support-art { display: block; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.support-art img { width: 100%; }
@media (min-width: 900px) { .support-head { grid-template-columns: 1fr 1fr; } }
.support .card { gap: 14px; }
.support .btn { justify-self: start; margin-top: auto; }
.share-url { font-weight: 900; color: var(--ink); }
.placeholder { outline: 2px dashed var(--coral); outline-offset: 2px; }

.feedback {
  margin-top: 16px; display: grid; gap: 14px; align-items: center;
  background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 28px 24px;
}
.feedback h3 { font-size: 1.5rem; }
.feedback p { color: rgba(255, 255, 255, 0.86); }
.feedback .mail { color: var(--yellow); font-weight: 900; font-size: 1.2rem; word-break: break-all; }
.feedback .btn-soft { justify-self: start; }

@media (min-width: 800px) {
  .feedback { grid-template-columns: 1fr auto; padding: 32px 40px; }
}

/* Footer */
.site-footer { padding-block: 40px 48px; margin-top: 32px; border-top: 1px solid var(--line); font-size: 0.98rem; }
.site-footer .wrap { display: grid; gap: 18px; }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0; margin: 0; list-style: none; }
.site-footer nav a { color: var(--ink); font-weight: 800; }
.site-footer p { color: var(--muted); }
.site-footer .footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.site-footer .logo { font-size: 1.4rem; }
.site-footer .logo img { width: 42px; }

/* Legal pages */
.legal { padding-block: 16px 64px; }
.legal .wrap { max-width: 780px; }
.legal article { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 28px 22px; }
.legal h1 { font-size: clamp(2rem, 6vw, 2.8rem); margin-bottom: 8px; }
.legal h2 { font-size: 1.45rem; margin: 32px 0 10px; }
.legal h3 { font-size: 1.1rem; margin: 20px 0 6px; }
.legal p, .legal ul, .legal dl { margin: 0 0 12px; }
.legal ul { padding-left: 1.25em; }
.legal li + li { margin-top: 4px; }
.legal .stand { color: var(--muted); font-weight: 700; }
.legal .summary { background: var(--mint-soft); border-radius: var(--r-md); padding: 16px 18px; margin: 18px 0 8px; }
.legal dl { display: grid; grid-template-columns: 1fr; gap: 2px 20px; }
.legal dt { font-weight: 850; margin-top: 10px; }
.legal dd { margin: 0; }
.legal address { font-style: normal; }
.fill { background: #fff1c4; border-radius: 6px; padding: 0 4px; font-weight: 800; }

@media (min-width: 700px) {
  .legal article { padding: 44px 52px; }
  .legal dl { grid-template-columns: 13em 1fr; }
  .legal dt { margin-top: 0; }
}

.back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-weight: 800; }

/* 404 */
.notfound { text-align: center; padding-block: 40px 80px; }
.notfound img { width: 200px; margin: 0 auto 20px; }
.notfound .hero-cta { justify-content: center; margin-top: 24px; }
.notfound .lead { margin: 16px auto 0; }
.nowrap { white-space: nowrap; }

/* ---------- Motion: calm and small. Everything is off with "reduce motion". ---------- */
:root { --bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease: cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -10deg; } 50% { rotate: 8deg; } 75% { rotate: -4deg; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(241, 111, 76, 0.45); } 100% { box-shadow: 0 0 0 10px rgba(241, 111, 76, 0); } }
@keyframes reveal { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }

/* Logo: Moo shakes her head */
.logo img { transition: transform 0.4s var(--bounce); }
.logo:hover img { animation: wiggle 0.6s ease-in-out; }

/* Hero: the friends float gently, the dot breathes */
.hero-art img { animation: float 7s ease-in-out infinite; }
.eyebrow .dot { animation: pulse 2.4s ease-out infinite; }

/* Buttons */
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-play svg { transition: transform 0.3s var(--bounce); }
.btn-play:hover svg { transform: translateX(3px) scale(1.12); }

/* Cards lift, their icon pops */
.card, .worlds li, .nope li, .tools { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.card:hover, .worlds li:hover, .nope li:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 2px rgba(20, 63, 56, 0.05), 0 26px 48px -22px rgba(20, 63, 56, 0.34);
}
.icon { transition: transform 0.4s var(--bounce); }
.card:hover .icon, .ai-note:hover .icon { transform: scale(1.14) rotate(-8deg); }

/* Worlds: the friends lean in */
.worlds img { transition: transform 0.45s var(--bounce); }
.worlds li:hover img { transform: scale(1.07) rotate(-3deg); }
.worlds li:nth-child(even):hover img { transform: scale(1.07) rotate(3deg); }

/* Paint box: each tool wiggles */
.tools li { transition: transform 0.3s var(--bounce); }
.tools img { transition: transform 0.3s var(--bounce); }
.tools li:hover img { animation: wiggle 0.6s ease-in-out; transform: scale(1.18); }

/* No list: the cross turns */
.nope li::before { transition: rotate 0.4s var(--bounce); }
.nope li:hover::before { rotate: 90deg; }

/* Bullet dots grow */
.points li::before { transition: transform 0.3s var(--bounce); }
.points li:hover::before { transform: scale(1.35); }

/* Phones tilt a little, like picked up */
.shots img { transition: transform 0.45s var(--bounce), box-shadow 0.45s var(--ease); }
.shots li:hover img { transform: translateY(-8px) rotate(-2deg); box-shadow: 0 30px 50px -24px rgba(20, 63, 56, 0.45); }
.shots li:nth-child(even):hover img { transform: translateY(-8px) rotate(2deg); }

/* Photos zoom inside their frame */
.scenes img, .support-art img { transition: transform 0.8s var(--ease); }
.scenes figure:hover img, .support-art:hover img { transform: scale(1.05); }

/* Moo sways while she paints */
.about-art, .notfound img { transform-origin: 50% 90%; animation: sway 5s ease-in-out infinite; }

/* Feedback button */
.feedback .btn-soft:hover { background: var(--yellow); color: var(--ink); }

/* Sections fade in while scrolling (browsers with scroll timelines only; others show everything at once) */
@supports (animation-timeline: view()) {
  .section-head, .card, .worlds li, .tools, .shots li, .scenes figure, .nope, .about-art, .ai-note, .feedback, .support-art {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
  .about-art { animation: reveal linear both, sway 5s ease-in-out infinite; animation-timeline: view(), auto; animation-range: entry 0% entry 40%, normal; }
}

@media (hover: none) {
  /* Touch: no stuck hover states */
  .card:hover, .worlds li:hover, .nope li:hover { transform: none; box-shadow: var(--shadow); }
}

/* Until the Play Store release the Play button is a label, not a link */
.btn.is-soon, .btn.is-soon:hover { cursor: default; transform: none; background: var(--ink); }
.btn.is-soon:hover svg { transform: none; }