/* Constellation component and the landing guide bubble (Astro is drawn by src/mascot). Shared by the landing and, later, the chat.
   Motion runs on transform/opacity only. Kind colors map to the chat signal keys.
   --cst-grow: how much a star grows on hover, focus or tap (1.2 to 1.4). */
.cst{--kind-gusto:#f5b860;--kind-habilidad:#8fb3ff;--kind-forma:#c9a6ff;--cst-line:rgb(220 228 255 / .32);--cst-grow:1.3;--cst-w:min(150px,30vw);
 touch-action:pan-y}
/* Zero specificity, so the host page can place the field (absolute, grid item, ...). */
:where(.cst){position:relative}
.cst-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cst-links line{stroke:var(--cst-line);stroke-width:1.2}
/* A regrouping constellation shows its links only once every star has arrived. */
.cst-links{transition:opacity 1s ease}
.cst.is-forming .cst-links{opacity:0}
/* The star point sits at the ring center: half the width left, 22px (half the ring) up. JS writes only the drag offset. */
.cst-star{--c:var(--kind-gusto);position:absolute;width:var(--cst-w);margin:-22px 0 0 calc(var(--cst-w) / -2);
 padding:0;border:0;background:none;color:inherit;font:600 13px/1.25 system-ui,sans-serif;text-align:center;
 touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.cst-star.is-dragging{cursor:grabbing;z-index:2}
.cst-body{display:grid;justify-items:center;gap:8px;transform-origin:50% 22px;transition:transform .35s cubic-bezier(.2,.75,.25,1)}
.cst-star.is-focus .cst-body,.cst-star:focus-visible .cst-body,.cst-star.is-dragging .cst-body{transform:scale(var(--cst-grow))}
@media(hover:hover){.cst-star:hover .cst-body{transform:scale(var(--cst-grow))}}
.cst-star[data-kind="habilidad"]{--c:var(--kind-habilidad)}
.cst-star[data-kind="forma"]{--c:var(--kind-forma)}
.cst-star:focus-visible{outline:none}
.cst-star:focus-visible .cst-ring circle{stroke:currentColor;stroke-dashoffset:0;opacity:.7}
/* 44px hit area: the ring box is the tap target; the core is the star itself. */
.cst-ring{grid-area:1/1;width:44px;height:44px;transform:rotate(-90deg)}
.cst-ring circle{fill:none;stroke:var(--c);stroke-width:2.5;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .25s}
.cst-core{grid-area:1/1;align-self:center;width:14px;height:14px;border-radius:50%;background:var(--c);
 box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent),0 0 22px 4px color-mix(in srgb,var(--c) 55%,transparent);
 transition:transform .3s cubic-bezier(.2,.75,.25,1)}
.cst-label{max-width:100%;padding:3px 8px;border-radius:999px;background:rgb(10 14 32 / .55);opacity:.85}
.cst-star.is-holding .cst-ring circle{stroke-dashoffset:0;transition:stroke-dashoffset .7s linear}
.cst-star.is-chosen .cst-ring circle{stroke-dashoffset:0}
.cst-star.is-chosen .cst-core{transform:scale(1.45)}
/* The brightest star of a figure: the first one picked in each question. */
.cst-star[data-bright] .cst-core{width:20px;height:20px}
.cst-star.is-chosen .cst-label{opacity:1;background:color-mix(in srgb,var(--c) 30%,rgb(10 14 32))}
.cst-core.is-pop{animation:cst-pop .45s cubic-bezier(.2,.75,.25,1)}
@keyframes cst-pop{40%{transform:scale(1.8)}}
.cst-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cst[data-mode="display"] .cst-ring circle{stroke-dashoffset:0;opacity:.5}
.cst[data-mode="display"]{--cst-w:min(140px,28vw)}
/* Ambient: a small decorative constellation inside another control (the path choices). Core only. */
.cst[data-mode="ambient"]{--cst-w:9px}
.cst[data-mode="ambient"] .cst-star{margin-top:-4.5px;cursor:inherit;pointer-events:none}
.cst[data-mode="ambient"] .cst-ring,.cst[data-mode="ambient"] .cst-label{display:none}
.cst[data-mode="ambient"] .cst-core{width:9px;height:9px;background:#fff;box-shadow:0 0 12px 2px color-mix(in srgb,var(--c) 70%,transparent)}
.cst[data-mode="ambient"] .cst-links line{stroke:rgb(220 228 255 / .55)}

/* ---------- Landing guide: Astro under a comic bubble ---------- */
.nebula{position:absolute;display:grid;justify-items:center;gap:6px;width:min(420px,92vw);pointer-events:none}
.nebula>*{pointer-events:auto}
.nebula-body{width:min(230px,60vw);cursor:pointer}
.nebula-body[hidden]{display:none}

/* Comic bubble with a tail pointing down at Astro. */
.nebula-bubble{position:relative;display:grid;gap:10px;justify-items:center;width:100%;padding:16px 18px;border-radius:22px;
 background:#fbfaff;color:#1e1838;box-shadow:0 18px 40px -20px rgb(0 0 0 / .7)}
.nebula-bubble::after{content:"";position:absolute;left:50%;bottom:-10px;width:20px;height:20px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:0 0 6px 0}
.nebula-ask,.nebula-say{margin:0;min-height:44px;font:400 clamp(19px,2.2vw,24px)/1.25 Georgia,"Times New Roman",serif;color:inherit;text-align:center}
.nebula-ask{width:100%;padding:4px;border:0;background:none;cursor:pointer;animation:nb-in .35s ease-out}
.nebula-ask:hover{text-decoration:underline;text-underline-offset:4px}
.nebula-say{display:grid;align-items:center;font-size:clamp(16px,1.8vw,19px);animation:nb-in .35s ease-out}
@keyframes nb-in{from{opacity:0;transform:translateY(6px)}}
.nebula-dots{position:relative;z-index:1;display:flex;gap:4px}
.nebula-say[hidden],.nebula-dots[hidden]{display:none}
.nebula-dot{display:grid;place-items:center;width:44px;height:28px;padding:0;border:0;background:none}
.nebula-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:#cfc7ee;transition:transform .3s,background .3s}
.nebula-dot.is-current::before{background:#6e5ae6;transform:scale(1.3)}
.nebula-dot:focus-visible{outline:2px solid #6e5ae6;outline-offset:0}

@media(prefers-reduced-motion:reduce){
 .nebula-ask,.nebula-say,.cst-core.is-pop{animation:none}
 .cst-ring circle,.cst-core,.cst-body{transition:none}
}