.asgine-presence {
  --presence-accent: #e3ad4d;
  --presence-accent-rgb: 227, 173, 77;
  --presence-soft: rgba(227, 173, 77, .18);
  --presence-actor-w: 118px;
  --presence-actor-h: 166px;
  --presence-look-x: 0;
  --presence-look-y: 0;
  --presence-phase: 0;
  --presence-step: 0;
  position: fixed;
  z-index: 940;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  contain: layout style;
  transition: opacity .28s ease;
}

.asgine-presence[data-brand="ai"] {
  --presence-accent: #bd86f4;
  --presence-accent-rgb: 189, 134, 244;
  --presence-soft: rgba(174, 101, 246, .2);
}

.asgine-presence[data-brand="vfx"] {
  --presence-accent: #69ddef;
  --presence-accent-rgb: 105, 221, 239;
  --presence-soft: rgba(73, 213, 236, .2);
}

.asgine-presence[data-brand="vfx"] .asgine-presence-character {
  filter: drop-shadow(0 12px 13px rgba(0, 0, 0, .34)) drop-shadow(0 0 8px rgba(105, 221, 239, .16));
}
.asgine-presence[data-brand="vfx"] .asgine-presence-shadow {
  background: radial-gradient(ellipse, rgba(105, 221, 239, .5), rgba(105, 221, 239, .12) 38%, rgba(0, 0, 0, 0) 72%);
}
.asgine-presence[data-brand="vfx"] .asgine-presence-actor::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 17%;
  right: 17%;
  bottom: -2px;
  height: 18px;
  border: 1px solid rgba(105, 221, 239, .5);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(105, 221, 239, .22), inset 0 0 8px rgba(105, 221, 239, .15);
  opacity: .54;
  transform: scaleY(.34);
  pointer-events: none;
}
.asgine-presence[data-brand="vfx"].is-vfx-showcase .asgine-presence-character {
  filter: drop-shadow(0 14px 15px rgba(0, 0, 0, .38)) drop-shadow(0 0 14px rgba(105, 221, 239, .46));
}
.asgine-presence[data-brand="vfx"].is-vfx-showcase .asgine-presence-shadow {
  opacity: 1;
  animation: asgine-presence-vfx-stage 1.15s cubic-bezier(.2, .8, .2, 1) infinite alternate;
}
.asgine-presence[data-brand="vfx"].is-vfx-showcase .asgine-presence-actor::after {
  opacity: .92;
  animation: asgine-presence-vfx-ring 1.15s cubic-bezier(.2, .8, .2, 1) infinite alternate;
}

.asgine-presence.is-ready { opacity: 1; }
.asgine-presence.is-hidden .asgine-presence-actor { opacity: 0; visibility: hidden; transform: translate3d(var(--presence-x), calc(var(--presence-y) + 18px), 0) scale(.92); }
.asgine-presence.is-packing .asgine-presence-actor { opacity: 0; transform: translate3d(calc(100vw - 66px), calc(100vh - 66px), 0) scale(.22); transition: transform .26s cubic-bezier(.55, 0, .45, 1), opacity .2s ease; }
.asgine-presence:not(.is-hidden) .asgine-presence-return { display: none; }

.asgine-presence-actor {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--presence-actor-w);
  height: var(--presence-actor-h);
  transform: translate3d(var(--presence-x), var(--presence-y), 0) scale(var(--presence-scale, 1)) rotate(var(--presence-rotation, 0deg));
  transform-origin: center bottom;
  will-change: transform;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}

.asgine-presence-character {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 42% 42% 24% 24%;
  color: inherit;
  background: transparent;
  filter: drop-shadow(0 12px 13px rgba(0, 0, 0, .27));
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  transition: filter .18s ease, transform .18s cubic-bezier(.2, .8, .2, 1);
}

.asgine-presence-hitbox {
  position: absolute;
  z-index: 4;
  left: 18%;
  right: 18%;
  top: 0;
  bottom: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 46% 46% 28% 28%;
  background: transparent;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.asgine-presence-actor:has(.asgine-presence-hitbox:hover) .asgine-presence-character { filter: drop-shadow(0 14px 15px rgba(0, 0, 0, .34)) brightness(1.045); transform: translateY(-2px); }
.asgine-presence[data-state="moving"] .asgine-presence-hitbox,
.asgine-presence[data-state="turning"] .asgine-presence-hitbox { pointer-events: none; }
.asgine-presence-hitbox:focus-visible { outline: 2px solid var(--presence-accent); outline-offset: 3px; }
.asgine-presence.is-dragging .asgine-presence-hitbox { cursor: grabbing; }
.asgine-presence.is-dragging .asgine-presence-character { filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .38)) brightness(1.05); transform: scale(1.035); }
.asgine-presence.is-owner-affection .asgine-presence-character {
  filter: drop-shadow(0 12px 13px rgba(0, 0, 0, .27)) drop-shadow(0 0 12px rgba(244, 133, 166, .38)) brightness(1.045);
}
.asgine-presence.is-owner-affection .asgine-presence-caption {
  border-color: rgba(244, 133, 166, .52);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .34), 0 0 18px rgba(244, 133, 166, .12);
}
.asgine-presence.is-patted .asgine-presence-character { animation: asgine-presence-pat .58s cubic-bezier(.2, .8, .2, 1); }
.asgine-presence.is-landing .asgine-presence-character { animation: asgine-presence-land .5s cubic-bezier(.2, .85, .2, 1); }
.asgine-presence-actor.is-entering-portal { animation: asgine-presence-enter-portal .44s cubic-bezier(.55, 0, 1, .45) forwards; }

.asgine-presence-character img {
  width: 100%;
  height: 100%;
  margin-left: 0;
  max-width: none;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  user-select: none;
  -webkit-user-drag: none;
  transform: translate(calc(var(--presence-look-x) * 1.25px), calc(var(--presence-look-y) * .75px));
}

.asgine-presence-character [data-presence-sprite] {
  position: relative;
  z-index: 2;
  opacity: 1;
  transition: opacity .112s cubic-bezier(.22, .72, .2, 1);
}

.asgine-presence-character [data-presence-sprite].is-turn-entering { opacity: 1; }

.asgine-presence-turn-ghost {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.asgine-presence-turn-ghost.is-active { opacity: 1; }
.asgine-presence-turn-ghost.is-fading {
  opacity: 0;
  transition: opacity .112s cubic-bezier(.22, .72, .2, 1);
}

.asgine-presence[data-state="moving"] .asgine-presence-character img,
.asgine-presence[data-state="turning"] .asgine-presence-character img {
  width: var(--presence-actor-h);
  height: var(--presence-actor-h);
  margin-left: calc((var(--presence-actor-w) - var(--presence-actor-h)) / 2);
  transform: translateY(calc(var(--presence-step) * -1px));
}

.asgine-presence-touch {
  position: absolute;
  left: 30%;
  top: 7%;
  width: 40%;
  height: 31%;
  border-radius: 50%;
}

.asgine-presence-shadow {
  position: absolute;
  z-index: 1;
  left: 24%;
  right: 24%;
  bottom: 1px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .58), rgba(0, 0, 0, .18) 46%, rgba(0, 0, 0, 0) 73%);
  opacity: .78;
  transform: scaleX(var(--presence-shadow-scale, 1));
  transition: opacity .2s ease;
}

.asgine-presence[data-state="moving"] .asgine-presence-shadow,
.asgine-presence[data-state="turning"] .asgine-presence-shadow { opacity: .62; }
.asgine-presence.is-dragging .asgine-presence-shadow { opacity: .15; transform: scale(.72); }

.asgine-presence-caption {
  position: absolute;
  z-index: 4;
  right: calc(100% - 16px);
  bottom: 68%;
  width: max-content;
  max-width: min(220px, calc(100vw - 150px));
  padding: 8px 11px;
  border: 1px solid rgba(var(--presence-accent-rgb), .24);
  border-radius: 12px 12px 3px 12px;
  color: rgba(255, 255, 255, .84);
  background: rgba(10, 12, 17, .91);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: blur(14px);
  font: 650 11px/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .01em;
  opacity: 0;
  transform: translate(5px, 7px) scale(.96);
  transform-origin: right bottom;
  pointer-events: none;
  transition: opacity .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
}

.asgine-presence-caption::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(var(--presence-accent-rgb), .24);
  background: rgba(10, 12, 17, .91);
  transform: skewX(-38deg);
}

.asgine-presence-actor[data-caption-side="right"] .asgine-presence-caption {
  right: auto;
  left: calc(100% - 16px);
  border-radius: 12px 12px 12px 3px;
  transform: translate(-5px, 7px) scale(.96);
  transform-origin: left bottom;
}

.asgine-presence-actor[data-caption-side="right"] .asgine-presence-caption::after {
  right: auto;
  left: -5px;
  border-right: 0;
  border-left: 1px solid rgba(var(--presence-accent-rgb), .24);
  transform: skewX(38deg);
}

.asgine-presence.has-caption .asgine-presence-actor[data-caption-side="right"] .asgine-presence-caption { transform: none; }

.asgine-presence-actor::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 18%;
  right: 18%;
  bottom: -3px;
  height: 22px;
  border: 1px solid rgba(var(--presence-accent-rgb), .55);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: scale(.7, .28);
}

.asgine-presence.is-signature .asgine-presence-actor::after {
  animation: asgine-presence-signature 1.35s cubic-bezier(.2, .8, .2, 1) infinite;
}

.asgine-presence.is-signature .asgine-presence-character {
  filter: drop-shadow(0 15px 17px rgba(0, 0, 0, .32)) drop-shadow(0 0 12px rgba(var(--presence-accent-rgb), .2));
}

.asgine-presence[data-brand="ai"].is-inviting .asgine-presence-actor::before {
  content: 'TAP ME';
  position: absolute;
  z-index: 6;
  right: 70%;
  bottom: 76%;
  width: max-content;
  padding: 5px 8px;
  border: 1px solid rgba(189, 134, 244, .38);
  border-radius: 999px;
  color: rgba(236, 218, 255, .94);
  background: rgba(10, 8, 18, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 18px rgba(174, 101, 246, .18);
  font: 750 9px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .11em;
  pointer-events: none;
  animation: asgine-presence-invite 1.8s ease-in-out infinite;
}

.asgine-presence[data-brand="ai"].is-engine-pulsing .asgine-presence-actor::before {
  content: 'STORY PULSE';
  position: absolute;
  z-index: 5;
  right: 68%;
  bottom: 82%;
  width: max-content;
  padding: 5px 8px;
  border: 1px solid rgba(196, 181, 253, .42);
  border-radius: 999px;
  color: #ede9fe;
  background: rgba(10, 8, 18, .94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 20px rgba(139, 92, 246, .3);
  font: 750 9px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .11em;
  pointer-events: none;
  animation: asgine-presence-invite 1.25s ease-in-out infinite;
}

.asgine-presence.has-caption .asgine-presence-caption { opacity: 1; transform: none; }

.asgine-presence-controls {
  display: none;
}

.asgine-presence-controls button {
  min-width: 29px;
  height: 27px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 9px;
  color: rgba(255, 255, 255, .58);
  background: rgba(9, 11, 15, .82);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .22);
  font: 700 8px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.asgine-presence-controls button:hover,
.asgine-presence-controls button:focus-visible { border-color: rgba(var(--presence-accent-rgb), .5); color: var(--presence-accent); outline: none; }
.asgine-presence-controls [data-presence-quiet][aria-pressed="true"] { color: var(--presence-accent); }

.asgine-presence-return {
  position: fixed;
  z-index: 5;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--presence-accent-rgb), .34);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 36%, var(--presence-soft), rgba(9, 11, 15, .96) 72%);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3), 0 0 0 4px rgba(var(--presence-accent-rgb), .055);
  cursor: pointer;
  pointer-events: auto;
}

.asgine-presence-return img { width: 76px; height: 88px; max-width: none; object-fit: contain; image-rendering: pixelated; transform: translate(-14px, -11px); }
.asgine-presence-return span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.asgine-presence-attended { outline: 1px solid rgba(var(--presence-accent-rgb, 244, 209, 118), .38) !important; outline-offset: 3px; transition: outline-color .18s ease, outline-offset .18s ease; }

.asgine-presence-fx { position: fixed; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }

.asgine-presence-thread { position: fixed; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.asgine-presence-thread path { fill: none; stroke: var(--presence-accent); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px rgba(var(--presence-accent-rgb), .72)); stroke-dasharray: 1; stroke-dashoffset: 1; animation: asgine-presence-thread 1.55s cubic-bezier(.2, .75, .2, 1) forwards; }
.asgine-presence-thread.is-success path { stroke: #64df9e; }
.asgine-presence-thread.is-idea path { stroke: #f4d176; }
.asgine-presence-thread.is-vfx path { stroke: #69ddef; stroke-width: 2.4; }
.asgine-presence-thread.is-working path { stroke-dasharray: .055 .04; animation-duration: 2.25s; }
.asgine-presence-thread.is-qa path { animation: none; }

.asgine-presence-weave {
  position: fixed;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: opacity .5s ease, filter .5s ease;
}

.asgine-presence-weave path {
  fill: none;
  stroke: rgba(196, 139, 255, .82);
  stroke-width: 1.7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  path-length: 1;
  stroke-dasharray: .045 .026;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(174, 99, 246, .68));
  animation: asgine-presence-weave 3.1s var(--weave-delay, 0ms) cubic-bezier(.18, .76, .2, 1) forwards;
}

.asgine-presence-weave.is-vfx path { stroke: rgba(103, 224, 242, .88); filter: drop-shadow(0 0 8px rgba(73, 207, 234, .74)); }
.asgine-presence-weave.is-studio path:nth-child(odd) { stroke: rgba(103, 224, 242, .88); }
.asgine-presence-weave.is-studio path:nth-child(even) { stroke: rgba(196, 139, 255, .88); }
.asgine-presence-weave.is-leaving { opacity: 0; filter: blur(3px); }

.asgine-presence-core {
  position: fixed;
  z-index: 3;
  width: 13px;
  height: 13px;
  margin: -6px;
  border: 2px solid rgba(244, 225, 255, .9);
  border-radius: 50%;
  background: rgba(174, 99, 246, .82);
  box-shadow: 0 0 0 7px rgba(174, 99, 246, .09), 0 0 22px rgba(174, 99, 246, .82);
  pointer-events: none;
  animation: asgine-presence-core 1.15s cubic-bezier(.2, .8, .2, 1) infinite;
  transition: opacity .5s ease, transform .5s ease;
}

.asgine-presence-core.is-vfx { background: #65deef; border-color: #ddfbff; box-shadow: 0 0 0 7px rgba(72, 210, 236, .09), 0 0 24px rgba(72, 210, 236, .88); }
.asgine-presence-core.is-studio { background: linear-gradient(135deg, #65deef, #c48bff); }
.asgine-presence-core.is-leaving { opacity: 0; transform: scale(1.8); }

.asgine-presence-knot {
  position: fixed;
  z-index: 4;
  width: 11px;
  height: 11px;
  margin: -5px;
  border: 1px solid rgba(255, 239, 187, .88);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6cf 0 18%, var(--presence-accent) 25% 48%, rgba(var(--presence-accent-rgb), .08) 52%);
  box-shadow: 0 0 8px rgba(var(--presence-accent-rgb), .68), 0 0 22px rgba(var(--presence-accent-rgb), .22);
  opacity: 0;
  pointer-events: none;
  transform: scale(.35);
  animation: asgine-presence-knot-in .66s var(--knot-delay, 0ms) cubic-bezier(.16, .82, .2, 1) forwards;
  transition: opacity .45s ease, transform .45s ease;
}
.asgine-presence-knot.is-leaving { opacity: 0 !important; transform: scale(.25) !important; }

.asgine-presence-cursor-spark {
  position: fixed;
  z-index: 4;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 235, 244, .9);
  border-radius: 50%;
  background: #ef8fa5;
  box-shadow: 0 0 0 7px rgba(239, 143, 165, .08), 0 0 18px rgba(239, 143, 165, .9), 0 0 38px rgba(239, 143, 165, .42);
  pointer-events: none;
  will-change: transform;
  transition: opacity .28s ease, filter .28s ease;
}

.asgine-presence-cursor-spark::after {
  content: '';
  position: absolute;
  inset: -10px;
  border: 1px dashed rgba(255, 226, 239, .4);
  border-radius: 50%;
  animation: asgine-presence-orbit 1.2s linear infinite;
}

.asgine-presence-cursor-spark.is-vfx { background: #65deef; border-color: #e4fdff; box-shadow: 0 0 0 7px rgba(72, 210, 236, .08), 0 0 18px rgba(72, 210, 236, .92), 0 0 38px rgba(72, 210, 236, .44); }
.asgine-presence-cursor-spark.is-caught { opacity: 0; filter: blur(4px); }

.asgine-presence-particle {
  --size: 7px;
  position: fixed;
  z-index: 3;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(var(--sx), var(--sy), 0);
  animation: asgine-presence-particle 1.02s var(--delay, 0ms) cubic-bezier(.2, .72, .15, 1) forwards;
}

.asgine-presence-particle.is-token { --size: 8px; border: 2px solid #8b5b13; background: #f1c45c; box-shadow: inset 0 0 0 1px #ffe09a, 0 0 12px rgba(239, 188, 76, .5); }
.asgine-presence-particle.is-story { --size: 6px; border-radius: 2px; background: #c690ff; box-shadow: 0 0 12px #a65cff; transform: translate3d(var(--sx), var(--sy), 0) rotate(45deg); }
.asgine-presence-particle.is-spark { --size: 5px; border-radius: 1px; background: var(--presence-accent); box-shadow: 0 0 10px var(--presence-accent); }
.asgine-presence-particle.is-idea { --size: 6px; background: #f4d176; box-shadow: 0 0 14px rgba(244, 209, 118, .8); }
.asgine-presence-particle.is-heart { --size: 8px; border-radius: 2px 6px 2px 6px; background: #ef8fa5; box-shadow: 0 0 10px rgba(239, 143, 165, .48); transform: translate3d(var(--sx), var(--sy), 0) rotate(45deg); }
.asgine-presence-particle.is-dust { --size: 5px; background: rgba(255, 255, 255, .32); box-shadow: none; }

.asgine-presence-target {
  position: fixed;
  z-index: 2;
  border: 1px solid rgba(var(--presence-accent-rgb), .74);
  border-radius: max(8px, inherit);
  box-shadow: 0 0 0 0 rgba(var(--presence-accent-rgb), .26), inset 0 0 22px rgba(var(--presence-accent-rgb), .08);
  animation: asgine-presence-target 1.25s cubic-bezier(.2, .8, .2, 1) forwards;
}

.asgine-presence-target.is-success { border-color: rgba(100, 224, 158, .72); box-shadow: 0 0 0 0 rgba(100, 224, 158, .24), inset 0 0 22px rgba(100, 224, 158, .08); }
.asgine-presence-target.is-story { border-color: rgba(196, 139, 255, .78); }
.asgine-presence-target.is-idea { border-color: rgba(244, 209, 118, .78); }

.asgine-presence-portal {
  position: fixed;
  z-index: 2;
  width: 120px;
  height: 178px;
  margin: -89px 0 0 -60px;
  border: 3px solid rgba(var(--presence-accent-rgb), .82);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--presence-accent-rgb), .18), rgba(7, 8, 13, .82) 54%, transparent 56%);
  box-shadow: inset 0 0 28px rgba(var(--presence-accent-rgb), .44), 0 0 22px rgba(var(--presence-accent-rgb), .3), 0 0 60px rgba(var(--presence-accent-rgb), .16);
  opacity: 0;
  transform: scale(.45) rotate(-8deg);
  animation: asgine-presence-portal 1.35s cubic-bezier(.18, .8, .2, 1) forwards;
}

.asgine-presence-portal::before,
.asgine-presence-portal::after { content: ''; position: absolute; inset: -8px; border: 1px dashed rgba(var(--presence-accent-rgb), .58); border-radius: 50%; animation: asgine-presence-orbit 2.1s linear infinite; }
.asgine-presence-portal::after { inset: 7px; animation-direction: reverse; animation-duration: 1.55s; }

.asgine-presence-qa-effect {
  position: fixed;
  z-index: 2;
  width: calc(18px + 84px * var(--qa-t));
  height: calc(18px + 84px * var(--qa-t));
  margin: calc((18px + 84px * var(--qa-t)) / -2);
  border: 2px solid rgba(var(--presence-accent-rgb), calc(.2 + .64 * var(--qa-t)));
  border-radius: 50%;
  opacity: calc(1 - (var(--qa-t) - .5) * (var(--qa-t) - .5) * 3.2);
  box-shadow: 0 0 calc(8px + 24px * var(--qa-t)) rgba(var(--presence-accent-rgb), .3);
  transform: rotate(calc(var(--qa-t) * 120deg));
}

.asgine-presence-qa-effect.is-daily-reward,
.asgine-presence-qa-effect.is-purchase { border-style: dashed; border-color: rgba(242, 197, 92, .85); }
.asgine-presence-qa-effect.is-publish { border-radius: 18% 50% 18% 50%; }
.asgine-presence-qa-effect.is-error { border-color: rgba(239, 104, 118, .76); box-shadow: 0 0 24px rgba(239, 104, 118, .24); }

.asgine-presence-qa-particle { position: fixed; z-index: 3; width: 7px; height: 7px; margin: -3px; border-radius: 2px; background: var(--presence-accent); box-shadow: 0 0 10px rgba(var(--presence-accent-rgb), .62); }
.asgine-presence-qa-particle.is-token { border: 1px solid #8b5b13; border-radius: 50%; background: #f1c45c; }
.asgine-presence-qa-particle.is-idea { border-radius: 50%; background: #f4d176; }
.asgine-presence-qa-particle.is-warning { background: #ef6876; }

.asgine-presence.is-busy .asgine-presence-shadow::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 16px;
  margin: -8px 0 0 -27px;
  border: 1px solid rgba(var(--presence-accent-rgb), .28);
  border-radius: 50%;
  animation: asgine-presence-busy 1.7s ease-in-out infinite;
}

.asgine-presence-seed {
  position: absolute;
  z-index: 5;
  left: 84%;
  top: 14%;
  width: 27px;
  height: 27px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.2);
  transition: opacity .42s ease, transform .58s cubic-bezier(.2, .84, .2, 1), filter .45s ease;
}
.asgine-presence-seed::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 239, 187, .9);
  border-radius: 50% 46% 52% 42%;
  background: radial-gradient(circle at 36% 30%, #fff8d7 0 16%, #f4ca69 24%, #a962e8 68%, rgba(89, 43, 132, .85));
  box-shadow: 0 0 8px rgba(244, 202, 105, .7), 0 0 18px rgba(var(--presence-accent-rgb), .48);
  transform: rotate(45deg);
}
.asgine-presence-seed::after {
  content: '';
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(var(--presence-accent-rgb), .28);
  border-radius: 50%;
  animation: asgine-presence-seed-orbit 4.8s linear infinite;
}
.asgine-presence-seed[data-stage="1"],
.asgine-presence-seed[data-stage="2"],
.asgine-presence-seed[data-stage="3"],
.asgine-presence-seed[data-stage="4"] { opacity: .94; transform: translate(-50%, -50%) scale(.78); }
.asgine-presence-seed[data-stage="2"] { transform: translate(-50%, -50%) scale(.9); }
.asgine-presence-seed[data-stage="3"],
.asgine-presence-seed[data-stage="4"] { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.asgine-presence-seed span,
.asgine-presence-seed b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: #f7d77e;
  box-shadow: 0 0 7px rgba(247, 215, 126, .85);
  opacity: 0;
}
.asgine-presence-seed[data-stage="3"] b,
.asgine-presence-seed[data-stage="4"] b { opacity: .9; animation: asgine-presence-seed-petal 3.6s ease-in-out infinite; }
.asgine-presence-seed b:nth-of-type(1) { --seed-angle: 0deg; animation-delay: -.5s; }
.asgine-presence-seed b:nth-of-type(2) { --seed-angle: 120deg; animation-delay: -1.7s; }
.asgine-presence-seed b:nth-of-type(3) { --seed-angle: 240deg; animation-delay: -2.8s; }
.asgine-presence-seed.is-awakening { animation: asgine-presence-seed-wake 1.1s cubic-bezier(.2, .84, .2, 1); }
.asgine-presence-seed.is-listening { filter: brightness(1.28); }
.asgine-presence-seed.is-blooming,
.asgine-presence-seed.is-bonding { animation: asgine-presence-seed-bloom 1.35s cubic-bezier(.2, .84, .2, 1); }
.asgine-presence-seed.is-feeding { animation: asgine-presence-seed-feed .92s cubic-bezier(.16, .82, .2, 1); }
.asgine-presence-seed[data-stage="4"]::after {
  border-style: dashed;
  box-shadow: 0 0 16px rgba(var(--presence-accent-rgb), .28);
  animation-duration: 3.5s;
}

.asgine-presence.is-writing:not(.is-dragging):not(.is-busy) { opacity: .62; }
.asgine-presence.is-scrolling:not(.is-dragging) .asgine-presence-actor { opacity: .56; }
.asgine-presence.is-obstructing:not(.is-dragging) .asgine-presence-actor { opacity: .24; filter: saturate(.75); }
.asgine-presence.is-obstructing .asgine-presence-hitbox { pointer-events: none; }
.asgine-presence.is-suppressed { display: none !important; }

@keyframes asgine-presence-pat {
  0%, 100% { transform: translateY(0) scale(1); }
  28% { transform: translateY(3px) scale(1.018, .982); }
  58% { transform: translateY(-2px) scale(.992, 1.008); }
}

@keyframes asgine-presence-vfx-stage { from { transform: scaleX(.82); filter: brightness(.85); } to { transform: scaleX(1.18); filter: brightness(1.35); } }
@keyframes asgine-presence-vfx-ring { from { transform: scale(.84, .3); filter: brightness(.86); } to { transform: scale(1.12, .42); filter: brightness(1.38); } }

@keyframes asgine-presence-land {
  0% { transform: translateY(-5px) scale(1); }
  38% { transform: translateY(2px) scale(1.045, .955); }
  68% { transform: translateY(-2px) scale(.985, 1.015); }
  100% { transform: none; }
}

@keyframes asgine-presence-enter-portal {
  from { opacity: 1; transform: scale(1) rotate(0); }
  to { opacity: 0; transform: scale(.12) rotate(12deg); }
}

@keyframes asgine-presence-particle {
  0% { opacity: 0; transform: translate3d(var(--sx), var(--sy), 0) scale(.45) rotate(0); }
  14% { opacity: 1; }
  52% { transform: translate3d(calc((var(--sx) + var(--ex)) / 2 + var(--curve)), calc((var(--sy) + var(--ey)) / 2 - 28px), 0) scale(1.06) rotate(135deg); }
  100% { opacity: 0; transform: translate3d(var(--ex), var(--ey), 0) scale(.62) rotate(270deg); }
}

@keyframes asgine-presence-thread {
  0% { opacity: 0; stroke-dashoffset: 1; }
  16% { opacity: 1; }
  68% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes asgine-presence-weave {
  0% { opacity: 0; stroke-dashoffset: 1; }
  13% { opacity: .95; }
  55% { opacity: .92; stroke-dashoffset: 0; }
  82% { opacity: .68; stroke-dashoffset: -.14; }
  100% { opacity: 0; stroke-dashoffset: -.28; }
}

@keyframes asgine-presence-core {
  0%, 100% { transform: scale(.82); opacity: .74; }
  48% { transform: scale(1.15); opacity: 1; }
}

@keyframes asgine-presence-knot-in {
  0% { opacity: 0; transform: scale(.3); }
  52% { opacity: 1; transform: scale(1.28); }
  100% { opacity: .9; transform: scale(1); }
}

@keyframes asgine-presence-target {
  0% { opacity: 0; transform: scale(.94); box-shadow: 0 0 0 0 rgba(var(--presence-accent-rgb), .28); }
  22% { opacity: 1; transform: scale(1.012); }
  65% { opacity: .9; box-shadow: 0 0 0 8px rgba(var(--presence-accent-rgb), 0); }
  100% { opacity: 0; transform: scale(1.025); box-shadow: 0 0 0 14px rgba(var(--presence-accent-rgb), 0); }
}

@keyframes asgine-presence-portal {
  0% { opacity: 0; transform: scale(.45) rotate(-8deg); }
  34% { opacity: 1; transform: scale(1.04) rotate(2deg); }
  74% { opacity: 1; transform: scale(.98) rotate(0); }
  100% { opacity: 0; transform: scale(.68) rotate(8deg); }
}

@keyframes asgine-presence-orbit { to { transform: rotate(360deg); } }
@keyframes asgine-presence-busy { 0%, 100% { opacity: .3; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes asgine-presence-seed-orbit { to { transform: rotate(360deg); } }
@keyframes asgine-presence-seed-petal {
  0%, 100% { transform: rotate(var(--seed-angle)) translateX(13px) scale(.65); opacity: .42; }
  48% { transform: rotate(var(--seed-angle)) translateX(16px) scale(1); opacity: 1; }
}
@keyframes asgine-presence-seed-wake {
  0% { opacity: 0; transform: translate(-50%, 12px) scale(.15); }
  55% { opacity: 1; transform: translate(-50%, -58%) scale(1.18); }
  100% { opacity: .9; transform: translate(-50%, -50%) scale(.78); }
}
@keyframes asgine-presence-seed-bloom {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  38% { transform: translate(-50%, -60%) scale(1.42); filter: brightness(1.5); }
  72% { transform: translate(-50%, -48%) scale(.9); }
}
@keyframes asgine-presence-seed-feed {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  28% { transform: translate(-50%, -64%) scale(1.5); filter: brightness(1.75); }
  58% { transform: translate(-50%, -48%) scale(.9); filter: brightness(1.2); }
  78% { transform: translate(-50%, -54%) scale(1.12); }
}
@keyframes asgine-presence-invite { 0%, 100% { opacity: .68; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes asgine-presence-signature {
  0%, 100% { opacity: 0; transform: scale(.68, .24); box-shadow: 0 0 0 rgba(var(--presence-accent-rgb), 0); }
  32% { opacity: .82; }
  62% { opacity: .2; transform: scale(1.16, .48); box-shadow: 0 0 22px rgba(var(--presence-accent-rgb), .26); }
}

@media (max-width: 720px) {
  .asgine-presence { z-index: 820; }
  .asgine-presence-caption {
    right: calc(100% - 12px);
    bottom: 61%;
    max-width: min(180px, calc(100vw - 96px));
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.25;
  }
  .asgine-presence-actor[data-caption-side="right"] .asgine-presence-caption { left: calc(100% - 12px); }
  .asgine-presence-controls {
    right: -3px;
    top: -5px;
    opacity: 0;
    visibility: hidden;
  }
  .asgine-presence-actor:focus-within .asgine-presence-controls { visibility: visible; }
  .asgine-presence-controls button { min-width: 38px; height: 36px; padding-inline: 8px; }
  .asgine-presence[data-brand="ai"].is-inviting .asgine-presence-actor::before { right: 60%; bottom: 78%; padding: 4px 6px; font-size: 8px; }
  .asgine-presence[data-brand="ai"].is-engine-pulsing .asgine-presence-actor::before { right: 60%; bottom: 78%; padding: 4px 6px; font-size: 8px; }
  .asgine-presence.is-writing:not(.is-dragging):not(.is-busy) .asgine-presence-actor { opacity: .2; transform: translate3d(var(--presence-x), calc(var(--presence-y) + 24px), 0); }
  .asgine-presence-portal { width: 82px; height: 124px; margin: -62px 0 0 -41px; }
}

@media (max-width: 420px) {
  .asgine-presence-caption { bottom: calc(100% - 10px); max-width: 164px; }
}

@media (prefers-reduced-motion: reduce) {
  .asgine-presence,
  .asgine-presence *,
  .asgine-presence *::before,
  .asgine-presence *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .asgine-presence-particle { display: none; }
}

@media (prefers-contrast: more) {
  .asgine-presence-caption,
  .asgine-presence-controls button { border-width: 2px; background: #050608; }
}
