/* Parastichy-34 — Vogel sunflower in CSS
   θ = n·137.508°, r ∝ √n. Visible spiral families 21 and 34 (Fibonacci). */

.para {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, #0a1612, #03080a 70%);
  transform: rotateX(calc((var(--py, 0.5) - 0.5) * -8deg)) rotateY(calc((var(--px, 0.5) - 0.5) * 8deg));
  transition: transform 180ms ease-out;
}

.para__field {
  position: absolute;
  inset: 4%;
  animation: para-spin 89s linear infinite;
}

@keyframes para-spin {
  to {
    transform: rotate(360deg);
  }
}

.para__seed {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(0.32rem + var(--n) * 0.016rem);
  height: calc(0.32rem + var(--n) * 0.016rem);
  margin: 0;
  border-radius: 50%;
  background: hsl(calc(148 + var(--n) * 1.85), 68%, 56%);
  box-shadow: 0 0 8px hsl(calc(148 + var(--n) * 1.85), 80%, 42%);
  transform-origin: 0 0;
  transform: rotate(calc(var(--n) * 137.5077640848deg)) translateY(calc(sqrt(var(--n)) * -2.12%));
  opacity: 0.92;
}

.para__arms {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0 9.176deg,
    rgba(226, 177, 90, 0.1) 9.176deg 10.588deg
  );
  /* 360/34 ≈ 10.588 */
  -webkit-mask-image: radial-gradient(circle, transparent 8%, #000 18% 72%, transparent 78%);
  mask-image: radial-gradient(circle, transparent 8%, #000 18% 72%, transparent 78%);
  mix-blend-mode: screen;
  animation: para-arms 34s linear infinite;
  pointer-events: none;
}

.para__arms--21 {
  background: repeating-conic-gradient(
    from 4deg,
    transparent 0 15.14deg,
    rgba(122, 212, 255, 0.12) 15.14deg 17.14deg
  );
  /* 360/21 ≈ 17.14 */
  animation-duration: 21s;
  animation-direction: reverse;
}

@keyframes para-arms {
  to {
    transform: rotate(-360deg);
  }
}

.para__heart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7%;
  height: 7%;
  margin: -3.5% 0 0 -3.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff8d0, #7dffb3 40%, #123 100%);
  box-shadow: 0 0 18px rgba(125, 255, 179, 0.45);
  animation: para-heart 3.4s ease-in-out infinite;
}

@keyframes para-heart {
  0%,
  100% {
    transform: scale(0.92);
  }
  50% {
    transform: scale(1.08);
  }
}

.art-vitrine.is-paused .para__field,
.art-vitrine.is-paused .para__arms,
.art-vitrine.is-paused .para__heart {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .para__field,
  .para__arms,
  .para__heart {
    animation: none !important;
  }
}

/* Hub thumbnails — signature of each piece, no full chamber */
.thumb-chy,
.thumb-p7,
.thumb-oct,
.thumb-para {
  position: absolute;
  inset: 0;
}

.thumb-chy {
  background:
    repeating-conic-gradient(from 0deg, transparent 0 16deg, rgba(122, 212, 255, 0.22) 16deg 21deg),
    radial-gradient(circle at 50% 50%, #e2b15a 0 8%, transparent 9%),
    repeating-linear-gradient(36deg, transparent 0 10px, rgba(226, 177, 90, 0.15) 10px 11px),
    #071018;
  animation: chy-drift 28s linear infinite;
}

.thumb-p7 {
  background:
    repeating-conic-gradient(from 0deg, transparent 0 41deg, rgba(255, 107, 74, 0.45) 41deg 51.4deg),
    radial-gradient(circle at 50% 50%, #ff8a4a 0 7%, #140808 48%);
  border-radius: 50%;
  inset: 8%;
  animation: p7-spin 22s linear infinite;
}

.thumb-oct {
  background:
    linear-gradient(135deg, transparent 42%, rgba(130, 210, 255, 0.4) 43% 57%, transparent 58%),
    linear-gradient(45deg, transparent 42%, rgba(226, 177, 90, 0.35) 43% 57%, transparent 58%),
    #0c1420;
  box-shadow: inset 0 0 0 2px rgba(130, 210, 255, 0.35);
  animation: octa4-w 7s ease-in-out infinite;
}

.thumb-para {
  background:
    radial-gradient(circle at 50% 50%, #7dffb3 0 5%, transparent 6%),
    repeating-conic-gradient(from 0deg, transparent 0 9deg, rgba(125, 255, 179, 0.2) 9deg 10.6deg),
    #0a1612;
  animation: sculp-spin 40s linear infinite;
}

@keyframes sculp-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes sculp-pulse {
  0%,
  100% {
    transform: scale(0.94);
  }
  50% {
    transform: scale(1.06);
  }
}

.thumb-chy {
  animation: sculp-spin 28s linear infinite;
}

.thumb-p7 {
  animation: sculp-spin 22s linear infinite;
}

.thumb-oct {
  animation: sculp-pulse 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .thumb-chy,
  .thumb-p7,
  .thumb-oct,
  .thumb-para {
    animation: none !important;
  }
}

@supports not (transform: translateY(calc(sqrt(4) * 1%))) {
  .para__seed {
    transform: rotate(calc(var(--n) * 137.5077640848deg)) translateY(calc(var(--n) * -0.42%));
  }
}