/* LLM Council — match reference Venn proportions */

/* Animate frost mask in sync with circle transforms (single blur, no stacked overlap). */
@property --llm-f1x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --llm-f1y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 20%;
}
@property --llm-f2x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 23%;
}
@property --llm-f2y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 69%;
}
@property --llm-f3x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 77%;
}
@property --llm-f3y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 69%;
}
@property --llm-fr {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 13.5%;
}

.llm-council-visual {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 28px;
  border-radius: 14px;
  overflow: hidden;
  --llm-f1x: 50%;
  --llm-f1y: 20%;
  --llm-f2x: 23%;
  --llm-f2y: 69%;
  --llm-f3x: 77%;
  --llm-f3y: 69%;
  --llm-fr: 13.5%;
  transition:
    --llm-f1x 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    --llm-f1y 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    --llm-f2x 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    --llm-f2y 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    --llm-f3x 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    --llm-f3y 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    --llm-fr 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.llm-council-visual.is-merged {
  --llm-f1y: 37.7%;
  --llm-f2x: 37.7%;
  --llm-f2y: 57.8%;
  --llm-f3x: 62.3%;
  --llm-f3y: 57.8%;
  --llm-fr: 23%;
}

/* One backdrop blur masked to union of three disks — overlap is not double-blurred. */
.llm-venn-frost-sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  background: rgba(200, 215, 230, 0.14);
  -webkit-mask-image:
    radial-gradient(
      circle at var(--llm-f1x) var(--llm-f1y),
      #000 0%,
      #000 calc(var(--llm-fr) - 0.4%),
      transparent calc(var(--llm-fr) + 1.2%)
    ),
    radial-gradient(
      circle at var(--llm-f2x) var(--llm-f2y),
      #000 0%,
      #000 calc(var(--llm-fr) - 0.4%),
      transparent calc(var(--llm-fr) + 1.2%)
    ),
    radial-gradient(
      circle at var(--llm-f3x) var(--llm-f3y),
      #000 0%,
      #000 calc(var(--llm-fr) - 0.4%),
      transparent calc(var(--llm-fr) + 1.2%)
    );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-composite: source-over, source-over;
  mask-image:
    radial-gradient(
      circle at var(--llm-f1x) var(--llm-f1y),
      #000 0%,
      #000 calc(var(--llm-fr) - 0.4%),
      transparent calc(var(--llm-fr) + 1.2%)
    ),
    radial-gradient(
      circle at var(--llm-f2x) var(--llm-f2y),
      #000 0%,
      #000 calc(var(--llm-fr) - 0.4%),
      transparent calc(var(--llm-fr) + 1.2%)
    ),
    radial-gradient(
      circle at var(--llm-f3x) var(--llm-f3y),
      #000 0%,
      #000 calc(var(--llm-fr) - 0.4%),
      transparent calc(var(--llm-fr) + 1.2%)
    );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-composite: add, add;
}

.llm-council-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    url("../Public/King_John_III_Sobieski_sending_Message_of_Victory_to_the_Pope,_after_the_Battle_of_Vienna_111.png")
    center / cover no-repeat;
  filter: brightness(0.65) saturate(0.8);
}

.llm-council-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 90% 90% at 50% 50%,
    rgba(0, 0, 0, 0.0) 0%,
    rgba(0, 0, 0, 0.25) 100%
  );
  pointer-events: none;
}

.llm-venn-circles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/*
  Frost + blur live on .llm-venn-frost-sheet (single layer, union mask).
  Rings: transparent fill so overlap does not stack tint.
*/
.llm-venn-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  aspect-ratio: 1;
  display: flex;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.llm-venn-circle-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.llm-venn-icon {
  width: clamp(20px, 4.5vw, 28px);
  height: clamp(20px, 4.5vw, 28px);
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.llm-venn-circle-label {
  text-align: center;
  font-size: clamp(0.78rem, 2vw, 1.05rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 0, 0, 0.4);
}

/*
  SEPARATED state (default) — smallest; animates up to merged scale.
*/
.llm-venn-circle--a {
  transform: translate(-50%, -50%) translate(0, -54%) scale(0.48);
  align-items: flex-start;
  justify-content: center;
  padding-top: 14%;
}
.llm-venn-circle--b {
  transform: translate(-50%, -50%) translate(-48%, 34%) scale(0.48);
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 12% 12%;
}
.llm-venn-circle--c {
  transform: translate(-50%, -50%) translate(48%, 34%) scale(0.48);
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 12% 12% 0;
}

/*
  MERGED state — matching the reference proportions.
  Top circle sits upper-center, bottom two form the base.
  ~40% overlap between adjacent circles.
*/
.llm-council-visual.is-merged .llm-venn-circle--a {
  transform: translate(-50%, -50%) translate(0, -22%) scale(0.82);
}
.llm-council-visual.is-merged .llm-venn-circle--b {
  transform: translate(-50%, -50%) translate(-22%, 14%) scale(0.82);
}
.llm-council-visual.is-merged .llm-venn-circle--c {
  transform: translate(-50%, -50%) translate(22%, 14%) scale(0.82);
}

/* White glow at triple intersection */
.llm-venn-glow {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 4;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.9) 25%,
    rgba(255, 255, 255, 0.35) 55%,
    rgba(255, 255, 255, 0.0) 80%
  );
  transition:
    opacity 0.6s ease 1.2s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s;
  pointer-events: none;
}

.llm-council-visual.is-merged .llm-venn-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: glowPulse 3s ease-in-out 2.2s infinite alternate;
}

@keyframes glowPulse {
  from { opacity: 0.85; }
  to   { opacity: 1; }
}

/* Crown icon — revealed on merge */
.llm-venn-center {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 5;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #0a0a0b;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.5),
    0 0 24px 4px rgba(255, 255, 255, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.4);
  /* Fast hide when unmerging — delay only on .is-merged for the reveal */
  transition:
    opacity 0.16s ease,
    transform 0.2s cubic-bezier(0.32, 0, 0.55, 1),
    box-shadow 0.2s ease;
  animation: none;
}

.llm-council-visual.is-merged .llm-venn-center {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.5s ease 1.4s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.4s,
    box-shadow 0.5s ease 1.4s;
  animation: llmGlow 3s ease-in-out 2.2s infinite alternate;
}

.llm-venn-center svg {
  width: 13px;
  height: 13px;
  stroke: #0a0a0b;
}

@keyframes llmGlow {
  from { box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 18px 2px rgba(255,255,255,0.25), 0 6px 20px rgba(0,0,0,0.4); }
  to   { box-shadow: 0 0 0 2px rgba(255,255,255,0.65), 0 0 40px 8px rgba(255,255,255,0.4), 0 6px 20px rgba(0,0,0,0.4); }
}

@media (max-width: 520px) {
  .llm-venn-circle-label {
    font-size: 0.68rem;
  }

  .llm-venn-icon {
    width: 16px;
    height: 16px;
  }

  .llm-venn-glow {
    width: 38px;
    height: 38px;
  }

  .llm-venn-center {
    width: 22px;
    height: 22px;
  }

  .llm-venn-center svg {
    width: 10px;
    height: 10px;
  }
}