/* ==========================================================================
   TrinityStack — three glass circles (large centre + two flanking) over a
   faint bean scatter, springing out from the centre on load. Ported from the
   app's SwiftUI TrinityStack; positions/rotations mirror its Placement values.
   ========================================================================== */
.trinity {
  position: relative;
  width: 340px;
  max-width: 100%;
  height: 148px;
  margin: 0 auto 18px;
}

.trinity__item,
.trinity__bg {
  position: absolute;
  top: 50%;
  left: 50%;
}

/* Circles — each centred on the stack, then offset/rotated to its slot. */
.trinity__item {
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot));
  animation: trinity-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.13s both;
}

.trinity__item--leading {
  --tx: -76px;
  --ty: 5px;
  --rot: -12deg;
  width: 80px;
  height: 80px;
  animation-delay: 0.18s;
}

.trinity__item--trailing {
  --tx: 76px;
  --ty: 15px;
  --rot: 7deg;
  width: 80px;
  height: 80px;
  animation-delay: 0.18s;
}

.trinity__item--center {
  --tx: 0px;
  --ty: 0px;
  --rot: 0deg;
  width: 110px;
  height: 110px;
  animation-delay: 0.1s;
}

.trinity__circle {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8%;
  border-radius: 50%;
  border: 1px solid transparent;
  overflow: hidden;
  background:
    linear-gradient(180deg, #1d1d1d, #131313) padding-box,
    linear-gradient(150deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 42%, rgba(255, 255, 255, 0.14)) border-box;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.trinity__item--center .trinity__circle {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Full-bleed variant — a raster app icon fills the circle (no glass inset). */
.trinity__circle--app {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.trinity__circle--app img {
  object-fit: cover;
}

.trinity__circle img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Background beans — faint accent scatter behind the circles. */
.trinity__bg {
  width: clamp(16px, 4vw, 22px);
  height: clamp(16px, 4vw, 22px);
  color: var(--color-accent);
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot));
  opacity: var(--op);
  animation: trinity-bg-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.13s both;
}

.trinity__bg--1 {
  --tx: -160px;
  --ty: -20px;
  --rot: -35deg;
  --op: 0.14;
}

.trinity__bg--2 {
  --tx: -110px;
  --ty: -50px;
  --rot: -18deg;
  --op: 0.40;
}

.trinity__bg--3 {
  --tx: 160px;
  --ty: -20px;
  --rot: 35deg;
  --op: 0.14;
}

.trinity__bg--4 {
  --tx: 110px;
  --ty: -50px;
  --rot: 18deg;
  --op: 0.40;
}

.trinity__bean {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

.trinity__bean-crease {
  fill: none;
  stroke: var(--color-bg);
  stroke-width: 2.6;
  stroke-linecap: round;
}

@keyframes trinity-pop {
  from {
    transform: translate(-50%, -50%) translate(0, 0) rotate(-37.5deg) scale(0.08);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
    opacity: 1;
  }
}

@keyframes trinity-bg-pop {
  from {
    transform: translate(-50%, -50%) translate(0, var(--ty)) rotate(-10deg) scale(0.88);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
    opacity: var(--op);
  }
}

@media (prefers-reduced-motion: reduce) {

  .trinity__item,
  .trinity__bg {
    animation: none;
  }
}