/* Copied verbatim from desktop/src/styles.css: CompanionOrb layers, transitions and keyframes.
   Markup mirrors desktop/src/pet/CompanionOrb.tsx. Only preview placement is separate. */
.companion-sprite-face {
  display: block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  image-rendering: auto;
  filter: drop-shadow(0 8px 10px rgb(15 23 42 / 0.14));
  transition:
    transform 0.45s cubic-bezier(0.55, -0.35, 0.4, 1),
    opacity 0.32s ease;
}

/* Lytte-orben (spec 2026-07-09 §3 - design fra Robins mockups; blur
   bloedgjort paa Robins oenske 2026-08-21). Drives af data-visual paa
   .companion-shell + --lvl (0-1, lerpet i CompanionPet). Orb-basen er ALTID
   50px (Mellem-designet); stoerrelsestrinnet ganges ind via --orb-scale i
   transformen, saa blur og gloed skalerer med og bleed-forholdet til
   vindueskanten er ens paa alle trin. Den milde bleed-beskaering ved kanten
   er accepteret - fast width/height pr. trin gav derimod en synlig kasse paa
   Lille, fordi blur i faste px ikke skrumpede med. */
.companion-shell {
  --lvl: 0;
}

.companion-shell[data-visual="orb-listening"] .companion-sprite-face,
.companion-shell[data-visual="orb-working"] .companion-sprite-face,
.companion-shell[data-visual="flash-ready"] .companion-sprite-face,
.companion-shell[data-visual="flash-error"] .companion-sprite-face {
  transform: scale(0.22) rotate(8deg);
  opacity: 0;
}

.companion-sprite {
  position: relative;
}

.companion-orb {
  --orb-scale: 1;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(calc(var(--orb-scale) * 0.25));
  transition:
    transform 0.5s cubic-bezier(0.2, 1.4, 0.4, 1),
    opacity 0.38s ease 0.08s,
    filter 0.35s ease;
  pointer-events: none;
}

.companion-shell[data-visual="orb-listening"] .companion-orb,
.companion-shell[data-visual="orb-working"] .companion-orb,
.companion-shell[data-visual="flash-ready"] .companion-orb,
.companion-shell[data-visual="flash-error"] .companion-orb {
  opacity: 1;
  transform: scale(var(--orb-scale));
}

.companion-shell[data-visual="flash-ready"] .companion-orb {
  filter: brightness(1.3) saturate(1.2);
  transform: scale(calc(var(--orb-scale) * 1.12));
}

.companion-shell[data-visual="flash-error"] .companion-orb {
  animation: companion-orb-shake 0.45s ease;
}

.companion-orb__react {
  position: absolute;
  inset: 0;
  transform: scale(calc(0.84 + var(--lvl, 0) * 0.26));
}

.companion-orb__layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.companion-orb__swirl {
  background: conic-gradient(
    from 0deg,
    #2e4c9a,
    #8fa7e0,
    #6b5a9e,
    #e9b98e,
    #2e4c9a
  );
  /* Blur-styrken er saenket fra 7/10/9/6 til 4/6/6/4 (Robin 2026-08-21:
     "for kraftigt blur") - orben faar en mere defineret kant og mindre
     gloed-bleed, uden at swirl-designet aendres. */
  filter: blur(4px) saturate(1.3);
  animation:
    companion-orb-spin 3.4s linear infinite,
    companion-orb-blob 5.2s ease-in-out infinite;
  opacity: 0.9;
}

.companion-orb__swirl2 {
  background: conic-gradient(
    from 180deg,
    #8fa7e0,
    #2e4c9a,
    #a7c0f0,
    #6b5a9e,
    #8fa7e0
  );
  filter: blur(6px);
  animation:
    companion-orb-spin 5.6s linear infinite reverse,
    companion-orb-blob 4.1s ease-in-out infinite reverse;
  opacity: 0.7;
  inset: 6%;
}

.companion-orb__core {
  inset: 12%;
  background: radial-gradient(
    circle,
    rgb(255 255 255 / 0.38) 0%,
    rgb(199 214 244 / 0.25) 50%,
    transparent 80%
  );
  filter: blur(6px);
  transform: scale(calc(0.9 + var(--lvl, 0) * 0.3));
}

.companion-orb__error {
  background: radial-gradient(
    circle,
    rgb(190 55 45 / 0.65) 0%,
    rgb(190 55 45 / 0.35) 55%,
    transparent 80%
  );
  filter: blur(4px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.companion-shell[data-visual="flash-error"] .companion-orb__error {
  opacity: 1;
}

@keyframes companion-orb-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes companion-orb-blob {
  0%,
  100% {
    border-radius: 50% 48% 52% 50% / 49% 51% 49% 51%;
  }
  33% {
    border-radius: 53% 47% 45% 55% / 52% 46% 54% 48%;
  }
  66% {
    border-radius: 46% 54% 55% 45% / 47% 55% 45% 53%;
  }
}

@keyframes companion-orb-shake {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: -3px 0;
  }
  50% {
    translate: 3px 0;
  }
  75% {
    translate: -2px 0;
  }
}