/* sections/meet.html (#product): meet Noty and the buddy. Uses core.css tokens.
   The arch stage: sky + sun, the speech bubble, three floating skill chips, the buddy on a soft floor shadow.
   Entrance (once, when site.js adds .in): buddy springs up, then the bubble, then the chips. Reduced motion: all still. */
.meet-in{display:grid;gap:clamp(48px,7vw,112px);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.meet-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.meet-art{width:100%;max-width:520px;margin-inline:auto}
.meet-card{--arch:999px;position:relative;aspect-ratio:1/1.08;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);border-radius:var(--arch) var(--arch) var(--r-2xl) var(--r-2xl);background:var(--surface-2);box-shadow:var(--shadow-1)}
.meet-sky{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 55% at 50% 30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 72%),
    linear-gradient(to bottom,var(--accent-soft) 0%,var(--surface-2) 74%)}
.meet-sky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;border-top:1px solid var(--line);
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1.4px) 0 0/16px 16px,var(--surface-2)}
.meet-sun{position:absolute;left:50%;top:17%;width:58%;aspect-ratio:1;margin-left:-29%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--surface) 92%,transparent),transparent);opacity:.9}
:root[data-theme="dark"] .meet-sun{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent)}
.meet-floor{position:absolute;left:50%;bottom:9.5%;width:30%;height:16px;margin-left:-15%;border-radius:50%;background:rgba(10,12,20,.22);filter:blur(7px)}
.meet-card .buddy{position:absolute;left:50%;bottom:10.5%;z-index:1;width:auto;height:58%;transform:translateX(-50%);transform-origin:50% 100%;
  filter:drop-shadow(0 14px 16px rgba(20,22,27,.16))}
.meet-card .meet-bubble{position:absolute;left:50%;top:13%;z-index:2;transform:translateX(-50%);margin:0;padding:10px 16px 12px;white-space:nowrap;
  font-size:var(--fs-s);font-weight:600;transform-origin:30% 100%}
.meet-bubble .bubble-label img{width:14px;height:14px;border-radius:4px}

/* floating skills */
.meet-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);box-shadow:var(--shadow-2);color:var(--ink-2);font-size:var(--fs-xs);line-height:1.2;white-space:nowrap}
.meet-chip strong{color:var(--ink);font-weight:650}
.meet-chip-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.meet-chip-ic svg{width:15px;height:15px}
.meet-chip-1{left:6%;top:43%;transform:rotate(-3deg)}
.meet-chip-2{right:5%;top:52%;transform:rotate(2.5deg)}
.meet-chip-3{left:9%;bottom:16%;transform:rotate(1.5deg)}
.meet-chip-1 .meet-chip-ic{background:var(--grad-brand);color:#FFFFFF}
.meet-chip-3 .meet-chip-ic{background:var(--ok-soft);color:var(--ok)}

/* entrance: once, after the stage is revealed */
.js .meet-art .buddy{transition:transform var(--d-5) var(--ease-spring) .1s,opacity var(--d-4) ease .1s;transform:translateX(-50%) translateY(14%) scale(.92);opacity:0}
.js .meet-art .meet-bubble{transition:transform var(--d-4) var(--ease-spring) .55s,opacity var(--d-3) ease .55s;transform:translateX(-50%) translateY(8px) scale(.9);opacity:0}
.js .meet-art .meet-chip{transition:transform var(--d-5) var(--ease-out),opacity var(--d-4) ease;opacity:0;translate:0 10px}
.js .meet-art .meet-chip-1{transition-delay:.8s}
.js .meet-art .meet-chip-2{transition-delay:.95s}
.js .meet-art .meet-chip-3{transition-delay:1.1s}
.js .meet-art.in .buddy{transform:translateX(-50%);opacity:1}
.js .meet-art.in .meet-bubble{transform:translateX(-50%);opacity:1}
.js .meet-art.in .meet-chip{opacity:1;translate:0 0}
/* a little wave hello on hover */
@media (hover:hover){
  .js .meet-art.in .meet-card:hover .buddy{transform:translateX(-50%) translateY(-6px) rotate(-2deg);transition:transform var(--d-4) var(--ease-spring)}
}

/* copy */
.meet-copy h2{margin-bottom:var(--space-5)}
.meet-lede{margin-bottom:var(--space-4);color:var(--ink)}
.meet-p{color:var(--ink-2);max-width:36em}
.meet-ticks{margin-top:var(--space-6)}
.nt-cta{margin-top:var(--space-6)}
.nt-cta:has(.nt-start[hidden]){display:none}

@media (max-width:639.98px){
  .meet-card{aspect-ratio:1/1.2}
  .meet-card .meet-bubble{top:11%;font-size:var(--fs-xs)}
  .meet-card .buddy,.js .meet-art .buddy,.js .meet-art.in .buddy{left:70%}
  .meet-card .buddy{height:52%;bottom:11%}
  .meet-floor{left:70%;bottom:10%;width:26%;margin-left:-13%}
  .meet-chip{padding:5px 10px 5px 5px}
  .meet-chip-ic{width:22px;height:22px}
  .meet-chip-ic svg{width:13px;height:13px}
  .meet-chip-1{left:5%;top:42%}
  .meet-chip-2{left:8%;right:auto;top:55%}
  .meet-chip-3{left:4%;bottom:auto;top:68%}
}