/* Chrysopoeia-17 — unique CSS generative sculpture
   Composed 28 August 2026, 02:45 EDT (06:45Z)
   Seed: D17 · pentagrid · φ · 7:11 · 2026≡226°
   Visuals are CSS. JS only drives --px/--py and pause. */

.art-page {
  --gold: #e2b15a;
  --gold-dim: rgba(226, 177, 90, 0.42);
  --ion: #7ad4ff;
  --ion-dim: rgba(122, 212, 255, 0.38);
  --violet: #9a7dff;
  --seed-hue: 226;
  --phi: 1.618033988749895;
  --fold: 17;
  --theta: 21.176470588235294deg;
  --gold-ang: 137.5077640848deg;
  --phi-tilt: 31.717474411deg;
}

.art-page .page-intro {
  max-width: 46rem;
}

.art-edition {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  justify-content: center;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.art-edition li {
  border: 1px solid var(--color-panel-outline);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
}

.art-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin: 1.1rem 0 0;
}

.art-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-panel-outline);
  border-radius: 999px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 500;
}

.art-jump a:hover,
.art-jump a:focus-visible {
  border-color: var(--color-link);
  color: var(--color-link);
}

.art-chamber {
  max-width: var(--max-width);
  margin: 0 auto 2.5rem;
}

.art-chamber__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.85rem;
}

.art-chamber__header h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.8vw, 1.7rem);
}

.art-chamber__kicker {
  margin: 0 0 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cipher-accent);
}

.art-chamber__lede {
  margin: 0 0 1rem;
  max-width: 68ch;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.art-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.art-controls button {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-panel-outline);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.art-controls button:hover,
.art-controls button:focus-visible,
.art-controls button[aria-pressed="true"] {
  border-color: var(--color-link);
  color: var(--color-link);
}

.art-vitrine {
  position: relative;
  width: 100%;
  max-width: min(100%, 820px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 1.1rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, var(--color-panel-outline));
  background: #03050a;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(226, 177, 90, 0.08);
  touch-action: pan-y;
  --px: 0.5;
  --py: 0.5;
  --spin: 0deg;
}

.art-vitrine--study {
  max-width: min(100%, 420px);
  aspect-ratio: 1 / 1;
}

.art-vitrine__live {
  position: absolute;
  z-index: 3;
  top: 0.7rem;
  left: 0.75rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ion) 80%, white);
  pointer-events: none;
}

.art-vitrine__caption {
  position: absolute;
  z-index: 3;
  right: 0.75rem;
  bottom: 0.7rem;
  margin: 0;
  max-width: 18rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: rgba(231, 240, 234, 0.55);
  pointer-events: none;
}

/* —— Layer stack —— */
.chy {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc((var(--py) - 0.5) * -8deg)) rotateY(calc((var(--px) - 0.5) * 10deg));
  transition: transform 180ms ease-out;
}

.chy__layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 1. Void well */
.chy__void {
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(18, 28, 48, 0.95), transparent 62%),
    radial-gradient(circle at 50% 50%, #071018 0%, #03050a 58%, #010204 100%);
}

/* 2. de Bruijn pentagrid — five 36° families (Penrose dual) */
.chy__pentagrid {
  inset: -20%;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(122, 212, 255, 0.11) 13px 14px),
    repeating-linear-gradient(36deg, transparent 0 21px, rgba(154, 125, 255, 0.1) 21px 22px),
    repeating-linear-gradient(72deg, transparent 0 8px, rgba(226, 177, 90, 0.09) 8px 9px),
    repeating-linear-gradient(108deg, transparent 0 34px, rgba(125, 255, 179, 0.08) 34px 35px),
    repeating-linear-gradient(144deg, transparent 0 5px, rgba(255, 122, 110, 0.07) 5px 6px);
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: chy-drift 28s linear infinite;
}

/* Second pentagrid, offset by month (8°) — unique beat with the first */
.chy__pentagrid--ghost {
  inset: -28%;
  opacity: 0.45;
  animation: chy-drift-ghost 17s linear infinite reverse;
  filter: hue-rotate(28deg);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(226, 177, 90, 0.14) 9px 10px),
    repeating-linear-gradient(36deg, transparent 0 15px, rgba(122, 212, 255, 0.1) 15px 16px),
    repeating-linear-gradient(72deg, transparent 0 24px, rgba(154, 125, 255, 0.1) 24px 25px),
    repeating-linear-gradient(108deg, transparent 0 6px, rgba(125, 255, 179, 0.09) 6px 7px),
    repeating-linear-gradient(144deg, transparent 0 19px, rgba(255, 180, 80, 0.08) 19px 20px);
}

@keyframes chy-drift {
  to {
    transform: rotate(360deg);
  }
}

@keyframes chy-drift-ghost {
  from {
    transform: rotate(8deg) scale(1.07);
  }
  to {
    transform: rotate(368deg) scale(1.07);
  }
}

/* 3. Coprime 7:11 moiré veil */
.chy__moire {
  inset: 4%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      transparent 0 45.428571deg,
      rgba(122, 212, 255, 0.16) 45.428571deg 51.428571deg
    ),
    repeating-conic-gradient(
      from 8deg,
      transparent 0 29.727272deg,
      rgba(226, 177, 90, 0.13) 29.727272deg 32.727272deg
    );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 42%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 42%, transparent 72%);
  mix-blend-mode: screen;
  animation: chy-moire 11s linear infinite;
  opacity: 0.7;
}

@keyframes chy-moire {
  to {
    transform: rotate(-360deg);
  }
}

/* 4. D17 iris — 17 wedges, θ = 360/17 */
.chy__iris {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  animation: chy-iris 17s linear infinite;
}

@keyframes chy-iris {
  to {
    transform: rotate(360deg);
  }
}

.chy__iris i {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(122, 212, 255, 0.0) 8%,
    rgba(122, 212, 255, 0.22) 38%,
    rgba(226, 177, 90, 0.18) 62%,
    transparent 86%
  );
  -webkit-clip-path: polygon(50% 50%, 50% 0, 68.05% 3.37%);
  clip-path: polygon(50% 50%, 50% 0, 68.05% 3.37%);
  transform: rotate(calc(var(--i) * 21.176470588235294deg));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 6px rgba(122, 212, 255, 0.25));
}

.chy__iris i:nth-child(odd) {
  background: linear-gradient(
    180deg,
    transparent 10%,
    rgba(154, 125, 255, 0.2) 36%,
    rgba(226, 177, 90, 0.28) 58%,
    transparent 84%
  );
}

/* 5. φ-spiral of 28 golden rhombs (day-of-month) */
.chy__helix {
  position: absolute;
  inset: 0;
  animation: chy-helix 28s linear infinite;
}

@keyframes chy-helix {
  to {
    transform: rotate(-360deg);
  }
}

.chy__helix b {
  --k: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(0.55rem + var(--k) * 0.11rem);
  height: calc((0.55rem + var(--k) * 0.11rem) / 1.618033988749895);
  margin: 0;
  background: linear-gradient(
    135deg,
    rgba(226, 177, 90, 0.95),
    rgba(122, 212, 255, 0.35) 55%,
    rgba(154, 125, 255, 0.55)
  );
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform-origin: 0 0;
  transform:
    rotate(calc(var(--k) * 137.5077640848deg))
    translate(calc(1.35rem + var(--k) * 0.42rem))
    rotate(31.717474411deg);
  opacity: calc(0.28 + var(--k) * 0.022);
  box-shadow: 0 0 10px rgba(226, 177, 90, 0.25);
  mix-blend-mode: plus-lighter;
}

@supports not (mix-blend-mode: plus-lighter) {
  .chy__helix b {
    mix-blend-mode: screen;
  }
}

/* 6. 8-point inner star (month) */
.chy__octad {
  position: absolute;
  inset: 32%;
  background:
    conic-gradient(
      from 22.5deg,
      rgba(226, 177, 90, 0.0) 0 18deg,
      rgba(226, 177, 90, 0.55) 18deg 27deg,
      transparent 27deg 45deg
    );
  -webkit-mask-image: radial-gradient(circle, transparent 28%, #000 29% 62%, transparent 63%);
  mask-image: radial-gradient(circle, transparent 28%, #000 29% 62%, transparent 63%);
  animation: chy-octad 8s linear infinite;
  mix-blend-mode: screen;
}

@keyframes chy-octad {
  to {
    transform: rotate(45deg);
  }
}

/* 7. Armillary nucleus */
.chy__armil {
  position: absolute;
  inset: 34%;
  transform-style: preserve-3d;
  animation: chy-precess 24.5s linear infinite;
  transform: rotateX(18deg) rotateY(calc((var(--px) - 0.5) * 24deg));
}

@keyframes chy-precess {
  to {
    transform: rotateX(18deg) rotateY(360deg);
  }
}

.chy__ring {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1.5px solid rgba(226, 177, 90, 0.55);
  box-shadow:
    0 0 18px rgba(122, 212, 255, 0.25),
    inset 0 0 18px rgba(226, 177, 90, 0.12);
}

.chy__ring--mer {
  transform: rotateY(90deg);
  border-color: rgba(122, 212, 255, 0.5);
}

.chy__ring--dec {
  transform: rotateX(90deg);
  border-color: rgba(154, 125, 255, 0.48);
}

.chy__ring--dash {
  inset: 0;
  border-style: dashed;
  border-width: 1px;
  animation: chy-dash 17s linear infinite;
}

@keyframes chy-dash {
  to {
    transform: rotateZ(-360deg);
  }
}

.chy__nucleus {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #fff6d6, #e2b15a 28%, #3a6a88 68%, #0a1218 100%);
  box-shadow:
    0 0 28px rgba(226, 177, 90, 0.55),
    0 0 60px rgba(122, 212, 255, 0.28);
  animation: chy-pulse 2.45s ease-in-out infinite;
}

@keyframes chy-pulse {
  0%,
  100% {
    transform: scale(0.92);
    filter: hue-rotate(0deg);
  }
  50% {
    transform: scale(1.06);
    filter: hue-rotate(17deg);
  }
}

/* 8. Lissajous ribbons — 3:5 via @property */
@property --t {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.chy__lissa {
  position: absolute;
  inset: 0;
  animation: chy-t 15s linear infinite;
}

@keyframes chy-t {
  to {
    --t: 6.28318530718;
  }
}

.chy__lissa span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin: -0.28rem;
  border-radius: 50%;
  background: rgba(122, 212, 255, 0.85);
  box-shadow: 0 0 12px rgba(122, 212, 255, 0.7);
  transform: translate(
    calc(cos(var(--t) * 3) * 28%),
    calc(sin(var(--t) * 5) * 26%)
  );
}

.chy__lissa span:nth-child(2) {
  background: rgba(226, 177, 90, 0.9);
  box-shadow: 0 0 12px rgba(226, 177, 90, 0.7);
  transform: translate(
    calc(cos(var(--t) * 3 + 2.094395) * 31%),
    calc(sin(var(--t) * 5 + 2.094395) * 24%)
  );
}

.chy__lissa span:nth-child(3) {
  background: rgba(154, 125, 255, 0.9);
  box-shadow: 0 0 12px rgba(154, 125, 255, 0.7);
  transform: translate(
    calc(cos(var(--t) * 3 + 4.18879) * 26%),
    calc(sin(var(--t) * 5 + 4.18879) * 29%)
  );
}

/* Fallback if @property is missing: orbit instead of Lissajous */
@supports not (transform: translate(cos(1) * 1%)) {
  .chy__lissa span {
    animation: chy-orbit 9s linear infinite;
    transform: none;
    left: 22%;
    top: 48%;
  }
  .chy__lissa span:nth-child(2) {
    animation-duration: 11s;
    left: 70%;
  }
  .chy__lissa span:nth-child(3) {
    animation-duration: 7s;
    left: 50%;
    top: 22%;
  }
}

@keyframes chy-orbit {
  to {
    transform: rotate(360deg) translateX(120px) rotate(-360deg);
  }
}

/* 9. Chromatic limb + vignette */
.chy__limb {
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 80px 18px #03050a,
    inset 0 0 0 1px rgba(226, 177, 90, 0.2);
  background: radial-gradient(circle at 50% 50%, transparent 46%, rgba(3, 5, 10, 0.72) 78%);
  mix-blend-mode: multiply;
}

.chy__scan {
  background: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    rgba(3, 5, 10, 0.18) 3px 4px
  );
  opacity: 0.35;
  mix-blend-mode: multiply;
  animation: chy-scan 8s linear infinite;
}

@keyframes chy-scan {
  to {
    background-position: 0 28px;
  }
}

.art-vitrine.is-paused .chy__pentagrid,
.art-vitrine.is-paused .chy__pentagrid--ghost,
.art-vitrine.is-paused .chy__moire,
.art-vitrine.is-paused .chy__iris,
.art-vitrine.is-paused .chy__helix,
.art-vitrine.is-paused .chy__octad,
.art-vitrine.is-paused .chy__armil,
.art-vitrine.is-paused .chy__ring--dash,
.art-vitrine.is-paused .chy__nucleus,
.art-vitrine.is-paused .chy__lissa,
.art-vitrine.is-paused .chy__scan,
.art-vitrine.is-paused .octa__grid,
.art-vitrine.is-paused .mobius__band {
  animation-play-state: paused;
}

/* —— Study: Ammann–Beenker octagrid —— */
.octa {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #081018, #03050a 70%);
}

.octa__grid {
  position: absolute;
  inset: -15%;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(226, 177, 90, 0.2) 16px 17px),
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(122, 212, 255, 0.18) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(154, 125, 255, 0.16) 16px 17px),
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(125, 255, 179, 0.14) 11px 12px);
  mix-blend-mode: screen;
  animation: chy-drift 22s linear infinite;
}

.octa__star {
  position: absolute;
  inset: 22%;
  background: conic-gradient(
    from 0deg,
    transparent 0 18deg,
    rgba(226, 177, 90, 0.45) 18deg 27deg,
    transparent 27deg 45deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 20%, #000 21% 70%, transparent 71%);
  mask-image: radial-gradient(circle, transparent 20%, #000 21% 70%, transparent 71%);
  animation: chy-octad 8s linear infinite reverse;
  mix-blend-mode: screen;
}

.octa__core {
  position: absolute;
  inset: 42%;
  border-radius: 20%;
  background: linear-gradient(135deg, #e2b15a, #7ad4ff);
  transform: rotate(45deg);
  box-shadow: 0 0 24px rgba(226, 177, 90, 0.45);
}

/* —— Study: Möbius chromatograph —— */
.mobius {
  position: absolute;
  inset: 0;
  perspective: 720px;
  background: radial-gradient(circle at 50% 50%, #0a1018, #03050a 72%);
}

.mobius__space {
  position: absolute;
  inset: 12%;
  transform-style: preserve-3d;
  animation: chy-precess 18s linear infinite;
}

.mobius__band {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 42%;
  height: 28%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    hsl(226, 90%, 62%),
    hsl(46, 85%, 62%),
    hsl(286, 70%, 62%),
    hsl(166, 70%, 55%),
    hsl(226, 90%, 62%)
  );
  transform: rotateX(66deg) rotateY(18deg);
  animation: chy-moire 14s linear infinite;
  box-shadow: 0 0 40px rgba(154, 125, 255, 0.3);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 32%, #000 33% 48%, transparent 49%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 32%, #000 33% 48%, transparent 49%);
}

.mobius__band--flip {
  transform: rotateX(-66deg) rotateY(-18deg) rotateZ(180deg);
  filter: hue-rotate(28deg);
  animation-direction: reverse;
  opacity: 0.85;
}

.mobius__seed {
  position: absolute;
  inset: 44%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e2b15a 40%, #123 80%);
  box-shadow: 0 0 20px rgba(226, 177, 90, 0.5);
}

.art-studies {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--max-width);
  margin: 0 auto 2.75rem;
}

@media (min-width: 760px) {
  .art-studies {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.art-study h3 {
  margin: 0.85rem 0 0.35rem;
  font-size: 1.15rem;
}

.art-study p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.art-colophon {
  max-width: 52rem;
  margin: 0 auto 2rem;
  padding: 1.25rem 1.2rem 1.35rem;
  border: 1px solid var(--color-panel-outline);
  border-radius: 1rem;
  background: var(--color-surface);
}

.art-colophon h2 {
  margin: 0 0 0.65rem;
  font-size: 1.25rem;
}

.art-colophon p,
.art-colophon li {
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.art-colophon ul {
  margin: 0.5rem 0 0.85rem;
  padding-left: 1.15rem;
}

.art-colophon code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}

.art-colophon__formula {
  margin: 0.85rem 0;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--gold);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .art-vitrine {
    border-radius: 0.75rem;
    max-width: 100%;
  }

  .art-vitrine__caption {
    max-width: 70%;
    font-size: 0.58rem;
  }

  .chy__helix b {
    width: calc(0.42rem + var(--k) * 0.09rem);
    height: calc((0.42rem + var(--k) * 0.09rem) / 1.618033988749895);
  }

  .art-chamber__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chy__pentagrid,
  .chy__pentagrid--ghost,
  .chy__moire,
  .chy__iris,
  .chy__helix,
  .chy__octad,
  .chy__armil,
  .chy__ring--dash,
  .chy__nucleus,
  .chy__lissa,
  .chy__scan,
  .octa__grid,
  .octa__star,
  .mobius__space,
  .mobius__band {
    animation: none !important;
  }
}