/* Atlas site: the five helpers (Lumi, Puddle, Leafy, Clover, Jelly), added to the original page.
   Three places: Lumi sits by the sun in the hero, all five in "Your helpers live in your contacts",
   three peek over the closing ask bar. Animated loops are swapped in by mascots.js; this file is the
   still, calm state (no JavaScript, reduced motion, paused, or off-screen). Transforms and opacity only. */

/* The mascot box: a fixed square, so nothing ever shifts when a loop loads */
.mc { position: relative; display: block; width: var(--mc, 120px); height: var(--mc, 120px); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.mc img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; -webkit-user-drag: none; }
.mc.on .mc-still { visibility: hidden; }
.mc.pre { opacity: 0; }
.mc-loop.pop { animation: mc-pop 560ms var(--ease-out) both; }
@keyframes mc-pop { from { opacity: 0; transform: translateY(16%) scale(.92); } to { opacity: 1; transform: none; } }

/* Mascots that sit on top of an ask bar (hero, closing). The frame's bottom edge sits a little inside the bar's
   top edge, so the feet rest on it and the soft shadow hides behind it. --dy = how far the feet are above the frame bottom. */
.horizon .mc-edge { position: absolute; z-index: 0; top: calc(var(--sun-d) * .62 + var(--mc) * var(--dy) - var(--mc)); }
.mc-lumi { --dy: .08; }
.mc-puddle { --dy: .105; }
.mc-leafy { --dy: .17; }
.mc-plush { --dy: .105; }
.mc-jelly { --dy: .13; }
/* Hero: all five along the top edge of the ask bar, left to right Clover, Puddle, Lumi, Leafy, Jelly
   (the two greens always at the far ends). --x = where each one's middle sits across the bar. */
.hero .mc-h { --mc: 100px; left: calc(var(--x) - var(--mc) / 2); }
.hero .mc-h.mc-lumi { --mc: 108px; }
.hero .mc-h1 { --x: 9%; }
.hero .mc-h2 { --x: 25.5%; }
.hero .mc-h3 { --x: 50%; }
.hero .mc-h4 { --x: 74.5%; }
.hero .mc-h5 { --x: 91%; }
/* Closing: Clover and Puddle on the left of the sun, Leafy and Jelly on the right */
.close .mc-edge { --mc: 100px; left: calc(var(--x) - var(--mc) / 2); }
.close .mc-a { --x: 9%; }
.close .mc-b { --x: 24%; }
.close .mc-c { --x: 76%; }
.close .mc-d { --x: 91%; }

/* A tiny chat bubble: WhatsApp-size, one short line, a soft tail, gone after a few seconds */
.mc-say {
  position: absolute; z-index: 4; bottom: 84%; left: 50%; width: max-content; max-width: 190px; padding: 8px 12px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 1px 1px rgba(29, 28, 26, .03), 0 8px 20px -8px rgba(29, 28, 26, .18);
  font: 400 13.5px/1.35 "Inter", system-ui, sans-serif; letter-spacing: -0.005em; color: var(--ink); text-align: left; text-wrap: balance;
  opacity: 0; visibility: hidden; transform: translateY(4px) scale(.97); pointer-events: none;
  transition: opacity .22s ease, transform .3s var(--ease-out), visibility 0s linear .3s;
}
.mc-say::after { content: ""; position: absolute; bottom: -5px; left: var(--tail, 50%); width: 9px; height: 9px; background: #fff; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: rotate(45deg); }
.mc-say.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* Hero: Lumi arrives after the ask bar has landed */
@media (prefers-reduced-motion: no-preference) {
  .hero .mc-h { animation: mc-in 900ms var(--ease-out) 1900ms both; }
  .hero .mc-h2, .hero .mc-h4 { animation-delay: 2050ms; }
  .hero .mc-h1, .hero .mc-h5 { animation-delay: 2200ms; }
  @keyframes mc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* "Your helpers live in your contacts": the four faces in the example list are the helpers too */
.c img.m { padding: 0; object-fit: cover; background: var(--field); }

/* The five helpers, as a row of small cards under the contact list */
.crew { list-style: none; margin: 88px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.crew li { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px 14px 24px; text-align: center; }
.crew .mc-crew { --mc: 124px; margin: 0 auto 6px; }
.crew b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.crew span.line { display: block; margin: 4px auto 0; max-width: 15em; color: var(--ink-2); font-size: 14px; line-height: 1.45; }

/* Pause / Play: the loops never run while hidden, off-screen or paused; this is the visitor's own switch */
.mc-toggle {
  position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line-2); box-shadow: 0 6px 18px -8px rgba(29, 28, 26, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 13px/1 "Inter", system-ui, sans-serif; letter-spacing: -0.005em; color: var(--ink-2); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .3s var(--ease-out), visibility 0s linear .3s, color .15s ease;
}
.mc-toggle.in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mc-toggle:hover { color: var(--ink); }
.mc-toggle svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 1100px) {
  .crew { gap: 12px; }
  .crew li { padding-left: 10px; padding-right: 10px; }
  .crew .mc-crew { --mc: 108px; }
}
@media (max-width: 960px) {
  .crew { grid-template-columns: 1fr; margin-top: 56px; gap: 10px; }
  .crew li { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 12px 22px 12px 14px; border-radius: 22px; }
  .crew .mc-crew { --mc: 96px; grid-row: 1 / span 2; margin: 0; }
  .crew b { align-self: end; }
  .crew span.line { align-self: start; margin: 2px 0 0; max-width: none; }
}
@media (max-width: 560px) {
  .hero .mc-h { --mc: 66px; }
  .hero .mc-h.mc-lumi { --mc: 78px; }
  .hero .mc-h1 { --x: 11%; }
  .hero .mc-h2 { --x: 28.5%; }
  .hero .mc-h4 { --x: 71.5%; }
  .hero .mc-h5 { --x: 89%; }
  .close .mc-edge { --mc: 84px; }
  .close .mc-a { --x: 12%; }
  .close .mc-d { --x: 88%; }
  .close .mc-b, .close .mc-c { display: none; }
  .crew { margin-top: 48px; }
  .crew li { grid-template-columns: 80px 1fr; padding: 10px 18px 10px 10px; }
  .crew .mc-crew { --mc: 80px; }
  .crew b { font-size: 16px; }
  .mc-say { font-size: 13px; max-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-say, .mc-toggle { transition: none !important; }
}