import { __decorate } from "tslib";
import { css, customElement, GenesisElement, html } from '@genesislcap/web-core';
import { AI_COLOUR_AMBER, AI_COLOUR_CYAN, AI_COLOUR_PINK, AI_COLOUR_VIOLET, } from '../styles/ai-colours';
/**
 * Animated "plasma orb" loading indicator — a fixed glowing energy sphere whose
 * luminous filaments and swirls drift and rotate inside it, like a plasma ball.
 * The globe never resizes; only the energy moves.
 *
 * Brand-coloured: a violet energy core, a slow cyan/pink tint wash, and a warm
 * amber hot-spot — covering all four brand colours.
 *
 * Visual sibling of the dots loading indicator; interchangeable with the other
 * loading styles for the "assistant is working" state.
 *
 * @example
 * ```html
 * <ai-plasma-orb-indicator></ai-plasma-orb-indicator>
 * ```
 *
 * @beta
 */
let AiPlasmaOrbIndicator = class AiPlasmaOrbIndicator extends GenesisElement {
};
AiPlasmaOrbIndicator = __decorate([
    customElement({
        name: 'ai-plasma-orb-indicator',
        template: html `
    <div class="pulse" role="img" aria-label="Assistant is working">
      <div class="plasma">
        <div class="swirl1"></div>
        <div class="swirl2"></div>
        <svg class="filaments" viewBox="0 0 100 100">
          <g>
            <path d="M8 50 Q50 18 92 50" />
            <path d="M50 8 Q82 50 50 92" />
            <path d="M18 22 Q52 54 82 80" />
            <path d="M82 20 Q48 46 20 82" />
            <path d="M12 64 Q50 38 88 34" />
            <path d="M30 12 Q55 50 72 88" />
            <path d="M14 38 Q50 60 86 62" />
            <path d="M66 10 Q44 48 24 90" />
            <path d="M10 28 Q56 44 90 72" />
            <path d="M88 44 Q46 52 16 76" />
            <path d="M40 6 Q58 50 88 86" />
            <path d="M22 86 Q46 44 60 8" />
          </g>
        </svg>
        <div class="tint"></div>
        <div class="hot"></div>
      </div>
      <div class="ring-emit"></div>
      <div class="ring-emit r2"></div>
    </div>
  `,
        styles: css `
    :host {
      position: relative;
      display: inline-block;
      width: 56px;
      height: 56px;
    }

    /* Authored at the gallery's native 100px size and scaled down so the px
       glow/filament geometry keeps its proportions. Absolutely centred so the
       overflowing glow/rings don't affect the host's layout box. */
    .pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      transform: translate(-50%, -50%) scale(0.56);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .plasma {
      position: relative;
      width: 86px;
      height: 86px;
      border-radius: 50%;
      overflow: hidden;
      isolation: isolate;
      background: radial-gradient(
        circle at 50% 40%,
        #fdf2ff 0%,
        #f3c7fd 14%,
        #e362ff 38%,
        ${AI_COLOUR_VIOLET} 62%,
        #8a0a9c 84%,
        #3a0044 100%
      );
      box-shadow:
        0 0 20px 5px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 20%),
        0 0 48px 12px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 58%),
        inset 0 0 22px rgb(255 255 255 / 22%),
        inset 0 0 8px rgb(255 255 255 / 50%);
    }

    /* bright rim light */
    .plasma::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      z-index: 5;
      pointer-events: none;
      box-shadow:
        inset 0 0 6px 1px rgb(245 220 255 / 90%),
        inset 0 0 16px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 35%);
    }

    /* slow colour shift: washes the orb toward cyan/pink and back */
    .tint {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      z-index: 4;
      pointer-events: none;
      background: radial-gradient(
        circle at 50% 40%,
        color-mix(in srgb, ${AI_COLOUR_CYAN}, white 35%) 0%,
        ${AI_COLOUR_CYAN} 45%,
        ${AI_COLOUR_PINK} 100%
      );
      mix-blend-mode: color;
      opacity: 0;
      animation: plasma-tint 9s ease-in-out infinite;
    }
    @keyframes plasma-tint {
      0%,
      100% {
        opacity: 0;
      }
      50% {
        opacity: 0.85;
      }
    }

    /* warm white-hot core highlight (shifts, never resizes the orb) */
    .hot {
      position: absolute;
      left: 50%;
      top: 38%;
      width: 42px;
      height: 36px;
      z-index: 4;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(3px);
      background: radial-gradient(
        circle,
        rgb(255 255 255 / 90%) 0%,
        color-mix(in srgb, ${AI_COLOUR_AMBER}, white 30%) 42%,
        rgb(255 255 255 / 0%) 70%
      );
      animation: plasma-hot 5s ease-in-out infinite;
    }
    @keyframes plasma-hot {
      0%,
      100% {
        opacity: 0.65;
        transform: translate(-50%, -50%) translate(-2px, 1px);
      }
      50% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(3px, -2px);
      }
    }

    /* swirling radial filaments */
    .swirl1,
    .swirl2 {
      position: absolute;
      inset: -25%;
      border-radius: 50%;
      z-index: 2;
      mix-blend-mode: screen;
    }
    .swirl1 {
      background: conic-gradient(
        from 0deg,
        transparent 0 4deg,
        rgb(225 240 255 / 55%) 7deg,
        transparent 11deg 58deg,
        rgb(190 225 255 / 45%) 64deg,
        transparent 70deg 138deg,
        rgb(255 255 255 / 50%) 144deg,
        transparent 150deg 220deg,
        rgb(200 230 255 / 45%) 226deg,
        transparent 232deg 300deg,
        rgb(255 255 255 / 45%) 306deg,
        transparent 312deg 360deg
      );
      filter: blur(3px);
      animation: plasma-spin-cw 9s linear infinite;
    }
    .swirl2 {
      background: conic-gradient(
        from 40deg,
        transparent 0 30deg,
        rgb(180 215 255 / 40%) 36deg,
        transparent 42deg 110deg,
        rgb(255 255 255 / 40%) 116deg,
        transparent 122deg 190deg,
        rgb(190 225 255 / 40%) 196deg,
        transparent 202deg 280deg,
        rgb(255 255 255 / 40%) 286deg,
        transparent 292deg 360deg
      );
      filter: blur(5px);
      animation: plasma-spin-ccw 13s linear infinite;
    }

    /* curved web filaments */
    .filaments {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      overflow: visible;
      mix-blend-mode: screen;
      filter: blur(0.5px);
    }
    .filaments g {
      transform-box: fill-box;
      transform-origin: center;
      animation: plasma-spin-ccw 18s linear infinite;
    }
    .filaments path {
      fill: none;
      stroke: rgb(230 245 255 / 50%);
      stroke-width: 0.7;
    }

    /* soft light rings emitting outward from the orb */
    .ring-emit {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 86px;
      height: 86px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 2px solid color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 25%);
      box-shadow: 0 0 8px color-mix(in srgb, ${AI_COLOUR_VIOLET}, transparent 35%);
      pointer-events: none;
      z-index: 0;
      animation: plasma-emit 2.8s ease-out infinite;
    }
    .ring-emit.r2 {
      animation-delay: 1.4s;
    }
    @keyframes plasma-emit {
      0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
      }
      100% {
        transform: translate(-50%, -50%) scale(1.45);
        opacity: 0;
      }
    }

    @keyframes plasma-spin-cw {
      to {
        transform: rotate(360deg);
      }
    }
    @keyframes plasma-spin-ccw {
      to {
        transform: rotate(-360deg);
      }
    }
  `,
    })
], AiPlasmaOrbIndicator);
export { AiPlasmaOrbIndicator };
