/* presence.css: Scarlet's presence (assets/presence/presence.js). Page-agnostic: a page places it with four custom
   properties and nothing else.
     --sp-core    the being's resting diameter (the round button), 84px; 68px on a phone
     --sp-right   distance of the being's edge from the right of the viewport, 16px
     --sp-bottom  distance of the being's edge from the bottom of the viewport, 16px
     --sp-z       its stacking order, 519
   The canvas is 2.1 times the core, centred on it, so the waves have room to travel; only the round button takes
   the pointer. html[data-presence="on"] is set while it is mounted, so a page can make room for it. */
:root{--sp-core:84px;--sp-right:16px;--sp-bottom:16px;--sp-z:519}
@media (max-width:560px){:root{--sp-core:68px;--sp-right:12px;--sp-bottom:12px}}

.sp-presence{
  --sp-span:calc(var(--sp-core) * 2.1);
  --sp-pad:calc((var(--sp-span) - var(--sp-core)) / 2);
  position:fixed;z-index:var(--sp-z);
  right:calc(var(--sp-right) - var(--sp-pad));bottom:calc(var(--sp-bottom) - var(--sp-pad));
  width:var(--sp-span);height:var(--sp-span);
  pointer-events:none;
  --sp-ink:#f4efe4;--sp-ring:#f3d9a0;--sp-tip-bg:rgba(9,14,22,.78);--sp-tip-b:rgba(243,217,160,.28);
}
.sp-presence[data-era="day"]{--sp-ink:#16101e;--sp-ring:#b8862f;--sp-tip-bg:rgba(255,252,245,.9);--sp-tip-b:rgba(184,134,47,.4)}
.sp-presence__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* the button: the being's body, round, transparent; it grows a little while she speaks */
.sp-presence__btn{
  appearance:none;-webkit-appearance:none;margin:0;padding:0;border:0;
  position:absolute;left:var(--sp-pad);top:var(--sp-pad);width:var(--sp-core);height:var(--sp-core);
  border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;
  display:grid;place-items:center;color:var(--sp-ink);
  -webkit-tap-highlight-color:transparent;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.sp-presence.is-speaking .sp-presence__btn{transform:scale(1.08)}
.sp-presence__btn:focus{outline:none}
.sp-presence__btn:focus-visible{outline:2px solid var(--sp-ring);outline-offset:4px}

/* the glyph: play or pause, drawn in CSS, only on hover or focus (and faintly while she is paused) */
.sp-presence__glyph{position:relative;width:14px;height:16px;opacity:0;transition:opacity .35s ease;filter:drop-shadow(0 0 5px rgba(0,0,0,.45))}
.sp-presence[data-era="day"] .sp-presence__glyph{filter:drop-shadow(0 0 5px rgba(255,250,240,.8))}
.sp-presence__glyph::before,.sp-presence__glyph::after{content:"";position:absolute;top:0;height:100%;background:currentColor;border-radius:1px}
.sp-presence__glyph::before{left:1px;width:13px;clip-path:polygon(0 0,100% 50%,0 100%)}
.sp-presence__glyph::after{display:none}
.sp-presence[data-state="speaking"] .sp-presence__glyph::before,.sp-presence[data-state="lead"] .sp-presence__glyph::before{left:1px;width:4px;clip-path:none}
.sp-presence[data-state="speaking"] .sp-presence__glyph::after,.sp-presence[data-state="lead"] .sp-presence__glyph::after{display:block;right:1px;width:4px}
.sp-presence.is-hover .sp-presence__glyph,.sp-presence__btn:focus-visible .sp-presence__glyph{opacity:.85}
.sp-presence[data-state="paused"] .sp-presence__glyph{opacity:.55}
.sp-presence[data-state="paused"].is-hover .sp-presence__glyph{opacity:.9}

/* a short notice ("Sound on for Scarlet", "No line here"): shown only for a moment, never her name on hover or focus
   (6 Nov 2026). It sits above the whole canvas, so it clears her halo and rings, right-aligned to her edge. Her accessible
   name is the button's aria-label. */
.sp-presence__tip{
  position:absolute;right:var(--sp-pad);bottom:calc(100% + 2px);transform:translateY(4px);
  padding:5px 10px 4px;border-radius:999px;white-space:nowrap;
  font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sp-ink);background:var(--sp-tip-bg);border:1px solid var(--sp-tip-b);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.sp-presence.is-notice .sp-presence__tip{opacity:1;transform:none}

/* the overture (assets/levels/kit/overture.js, ScarletPresence.intro): the first meeting. Laid out large and centred, in layout,
   so the canvas backs at the large size; the overture flies her home with a transform (scale below 1, never an upscale) and
   intro(false) swaps to the home layout on the flight's last frame. She takes no press until she is home. */
.sp-presence.sp-presence--intro{
  --sp-core:var(--sp-intro-core,min(30vmin,280px));
  right:auto;bottom:auto;left:calc(50% - var(--sp-span) / 2);top:calc(var(--sp-intro-y,46%) - var(--sp-span) / 2);
  z-index:var(--sp-intro-z,965);
}
.sp-presence--intro .sp-presence__btn{pointer-events:none;transition:none}
@media (max-width:560px){.sp-presence.sp-presence--intro{--sp-core:var(--sp-intro-core,min(52vw,220px))}}

@media (prefers-reduced-motion:reduce){
  .sp-presence__btn,.sp-presence__tip,.sp-presence__glyph{transition:none}
  .sp-presence.is-speaking .sp-presence__btn{transform:none}
}
@media print{.sp-presence{display:none}}