/* Mirrors TalkTogether/App/AppTheme.swift:
   "Hello Friend" light palette (the site always uses light mode). */
:root {
  color-scheme: light;
  --bg: #fffae8;            /* cream */
  --surface: #fffdf2;       /* surface */
  --surface-muted: #fff0bf; /* surfaceMuted */
  --peach: #fff0b3;
  --ink: #17385e;
  --muted: #63635a;         /* mutedInk */
  --accent: #ffd94a;        /* sunnyYellow */
  --accent-2: #f57a05;      /* warmOrange */
  --accent-strong: #b84a00; /* coralDark */
  --coral: #ffb52b;
  --mint: #b8e0b8;
  --rose: #f29a7a;
  --green: #299761;         /* speakingGreen */
  --electric: #c7dbed;
  --navy: #17385e;
  --line: rgba(99, 99, 90, .18);
  --on-accent: #17385e;
}


* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent) 0, transparent 420px),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--electric) 12%, transparent) 0, transparent 480px),
    linear-gradient(135deg, var(--bg), color-mix(in srgb, var(--peach) 72%, var(--bg)), var(--bg));
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.65 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Nunito", system-ui, sans-serif;
}

a { color: var(--accent-strong); }

header,
main,
footer {
  width: min(960px, calc(100% - 32px));
  margin: auto;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.brand {
  color: var(--ink);
  font-weight: 850;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  text-decoration: none;
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { border-radius: 10px; box-shadow: 0 4px 10px rgba(23, 56, 94, .12); }

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

nav a {
  border-radius: 14px;
  color: var(--muted);
  font-weight: 650;
  padding: 7px 12px;
  text-decoration: none;
}

nav a[aria-current="page"],
nav a:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.hero { padding: 80px 0 52px; }

.eyebrow {
  background: var(--peach);
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-block;
  font-size: .9rem;
  font-weight: 750;
  padding: 4px 12px;
}

.hero h1,
.legal h1 {
  font-size: clamp(2.4rem, 8vw, 4.75rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.04;
  margin: .3em 0;
}

.lede {
  color: var(--muted);
  font-size: 1.2rem;
  max-width: 700px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.chips span {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 650;
  padding: 7px 14px;
}

.card-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
}

.card-grid article,
.notice,
.legal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 10px 30px -18px rgba(23, 56, 94, .35);
  padding: 28px;
}

.card-grid article { border-top: 4px solid var(--accent); }
.card-grid article:nth-child(2) { border-top-color: var(--accent-2); }
.card-grid article:nth-child(3) { border-top-color: var(--green); }

.card-grid h2,
.notice h2 { font-size: 1.15rem; margin-top: 0; }

.card-grid p,
.notice p,
.legal p,
.legal li { color: var(--muted); }

.notice {
  background: linear-gradient(135deg, var(--peach), var(--surface));
  margin: 18px 0 70px;
}

.button {
  background: var(--accent);
  border-radius: 16px;
  color: var(--on-accent);
  display: inline-block;
  font-weight: 800;
  margin-top: 8px;
  padding: 11px 18px;
  text-decoration: none;
  transition: transform .15s ease;
}

.button:hover { transform: translateY(-1px); }

.legal { margin: 40px 0 56px; }
.legal h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
.legal h2 { color: var(--accent-strong); margin-top: 2rem; }
.updated { font-size: .9rem; }

footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
  padding: 26px 0 40px;
}

/* Welcome hero — mirrors WelcomeView */
.welcome { text-align: center; padding-top: 96px; }
.welcome .lede { margin: 18px auto 0; max-width: 520px; }
.welcome .chips { justify-content: center; margin-top: 28px; }
.hero-logo {
  border: 1px solid color-mix(in srgb, var(--surface) 65%, transparent);
  border-radius: 31px;
  box-shadow: 0 14px 28px rgba(23, 56, 94, .12);
  display: block;
  margin: 0 auto 28px;
}
.cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.cta .button { border: 1px solid var(--line); border-radius: 18px; padding: 15px 26px; margin: 0; }
.button-dark { background: var(--navy); border-color: color-mix(in srgb, var(--coral) 50%, transparent) !important; color: #fff; }
.button-soft { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--accent-strong); }
.fineprint { color: var(--muted); font-size: .8rem; opacity: .8; margin-top: 20px; }

.avatars { display: flex; margin-bottom: 22px; }
.avatars img {
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(23, 56, 94, .12);
  height: 64px;
  margin-right: -14px;
  width: 64px;
}

/* ---------- Motion ---------- */
:root { --ease: cubic-bezier(.22, 1, .36, 1); /* Apple-like ease-out */ }

.hero-stage { position: relative; width: 132px; margin: 0 auto 8px; }
.hero-stage .hero-logo { position: relative; z-index: 1; margin-bottom: 20px;
  animation: pop-in .9s var(--ease) both, float 6s ease-in-out 1s infinite; }

.buddy {
  position: absolute;
  width: 58px; height: 58px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(23, 56, 94, .14);
  opacity: 0;
  animation: pop-in .8s var(--ease) forwards, bob 4.5s ease-in-out infinite;
  transition: transform .4s var(--ease);
}
.buddy:hover { transform: scale(1.15) rotate(-8deg); }
.b1 { left: -150px; top: 10px;  animation-delay: .5s, 1.3s; }
.b2 { right: -150px; top: -6px; animation-delay: .65s, 1.9s; width: 64px; height: 64px; }
.b3 { left: -95px;  top: 92px;  animation-delay: .8s, 1.6s; width: 50px; height: 50px; }
.b4 { right: -100px; top: 86px; animation-delay: .95s, 2.3s; width: 52px; height: 52px; }
.b5 { left: 50%; top: -58px; margin-left: -22px; width: 44px; height: 44px; animation-delay: 1.1s, 2.6s; }

.hello { height: 2.4rem; margin: 0; overflow: hidden; overflow: clip; overflow-clip-margin: 12px; }
.hello-word {
  color: var(--accent-2);
  display: inline-block;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.02em;
  animation: hello-enter 1s var(--ease) .3s backwards;
  transition: opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease);
}
/* Fly in from the right, fly out to the left */
.hello-word.out { opacity: 0; transform: translateX(-160px) scale(.9); filter: blur(8px); }
.hello-word.in  { opacity: 0; transform: translateX(160px) scale(.9);  filter: blur(8px); transition: none; }

.reveal span {
  display: inline-block;
  animation: rise 1s var(--ease) both;
}
.reveal span:nth-child(1) { animation-delay: .9s; }
.reveal span:nth-child(2) { animation-delay: 1s; }
.reveal span:nth-child(4) { animation-delay: 1.1s; }
.reveal span:nth-child(5) { animation-delay: 1.2s; }
.reveal-late { animation: rise .9s var(--ease) 1.45s both; }
.chips.reveal-late { animation-delay: 1.6s; }
.cta.reveal-late { animation-delay: 1.75s; }

.avatars img { animation: pop-in .7s var(--ease) both, bob 4.5s ease-in-out infinite; transition: transform .4s var(--ease); }
.avatars img:nth-child(1) { animation-delay: .05s, .8s; }
.avatars img:nth-child(2) { animation-delay: .15s, 1.3s; }
.avatars img:nth-child(3) { animation-delay: .25s, 1s; }
.avatars img:nth-child(4) { animation-delay: .35s, 1.6s; }
.avatars img:nth-child(5) { animation-delay: .45s, 1.15s; }
.avatars img:hover { transform: translateY(-6px) rotate(-6deg) scale(1.08); z-index: 1; position: relative; }

@keyframes pop-in { from { opacity: 0; transform: scale(.6) translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hello-enter { from { opacity: 0; transform: translateX(160px) scale(.9); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -10px; rotate: 3deg; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .buddy { opacity: 1; }
}

@media (max-width: 720px) {
  .b1 { left: -100px; } .b2 { right: -100px; }
  .b3 { left: -62px; top: 100px; } .b4 { right: -64px; top: 96px; }
  .buddy { width: 46px; height: 46px; } .b5 { width: 38px; height: 38px; margin-left: -19px; top: -48px; }
}

@media (max-width: 720px) {
  header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .hero { padding-top: 48px; }
  .card-grid { grid-template-columns: 1fr; }
  .card-grid article, .notice, .legal { padding: 22px; }
}