/* ============================================================
   LEDURA home: four arts (#features), js/fx-arts.js
   Default (no motion / mobile): the intro, then the four panels
   as a grid (desktop) or a stack (mobile), each with its giant
   glyph. .arts.is-panning (desktop + motion): one horizontal
   track of full-height panels, pinned and scrubbed sideways.
   Every panel is a size container, so the glyph scales with the
   panel it lives in and the same composition works in both.
   ============================================================ */
.arts {
  position: relative;
  padding-block: clamp(72px, 10vw, 140px);
  overflow-x: clip;
}
.arts-track {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- intro ---------- */
.art-intro { padding-block: 0 clamp(24px, 4vw, 56px); }
.arts-title { font-size: var(--fs-h2); max-width: 14ch; }

/* ---------- a panel: giant glyph + name + one line ---------- */
.art-panel {
  position: relative;
  container-type: size;
  height: min(118vw, 560px);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: radial-gradient(90% 70% at var(--gx, 70%) var(--gy, 40%),
    color-mix(in srgb, var(--night-glow) 9%, transparent), transparent 70%);
}
.art-glyph {
  /* the four arts as solid gold, rendered in Blender (assets/art/glyph-*.webp);
     sized in panel units (--gh) by the compositions below */
  position: absolute;
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
.art-glyph img {
  display: block;
  width: auto;
  height: var(--gh, 60cqh);
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--night-bg) 70%, transparent));
  transition: opacity 1.2s var(--ease-out), filter 1.2s var(--ease-out);
}

.art-copy {
  position: absolute;
  max-width: min(32ch, 86%);
}
.art-copy h3 {
  font-size: clamp(34px, 3.8vw, 58px);
  font-style: italic;
  color: var(--night-ink);
}
.art-copy p {
  margin: .6em 0 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* ---------- four compositions (glyph and copy never sit the same way twice) ----------
   The glyphs are images now: sized and placed in panel units (cqh/cqw). */
/* Sun: glyph right, copy low left. */
[data-art="astro"]  { --gh: 70cqh; --gx: 72%; --gy: 45%; }
[data-art="astro"] .art-glyph { right: 8cqw; top: 50%; translate: 0 -50%; }
[data-art="astro"] .art-copy { left: 7cqw; bottom: 10cqh; }

/* Seven: a tall cast numeral at the left, copy middle right. */
[data-art="numero"] { --gh: 80cqh; --gx: 25%; --gy: 40%; }
[data-art="numero"] .art-glyph { left: 7cqw; top: 50%; translate: 0 -50%; }
[data-art="numero"] .art-copy { right: 7cqw; top: 50%; translate: 0 -50%; text-align: right; }

/* Ayn: glyph centred, copy beneath it, centred. */
[data-art="ebced"]  { --gh: 58cqh; --gx: 50%; --gy: 38%; }
[data-art="ebced"] .art-glyph { left: 50%; top: 8cqh; translate: -50% 0; }
[data-art="ebced"] .art-copy { left: 50%; bottom: 8cqh; translate: -50% 0; text-align: center; }

/* Crescent: high left, copy low right. */
[data-art="energy"] { --gh: 64cqh; --gx: 28%; --gy: 30%; }
[data-art="energy"] .art-glyph { left: 9cqw; top: 9cqh; }
[data-art="energy"] .art-copy { right: 7cqw; bottom: 10cqh; text-align: right; }

/* ---------- phones and tablets: glyph owns the upper panel, the words sit below it ---------- */
@media (max-width: 899px) {
  .art-panel { height: min(140vw, 560px); }
  .art-panel .art-copy { top: auto; bottom: 7cqh; translate: none; }
  .art-panel .art-glyph { top: 5cqh; translate: none; }
  [data-art="astro"]  { --gh: 50cqh; }
  [data-art="astro"] .art-glyph { right: 6cqw; }
  [data-art="numero"] { --gh: 54cqh; }
  [data-art="numero"] .art-glyph { left: 10cqw; }
  [data-art="ebced"]  { --gh: 50cqh; }
  [data-art="ebced"] .art-glyph { left: 50%; translate: -50% 0; }
  [data-art="ebced"] .art-copy { translate: -50% 0; }
  [data-art="energy"] { --gh: 50cqh; }
}

/* ---------- static desktop: intro across, panels as a 2 x 2 grid ---------- */
@media (min-width: 768px) {
  .arts-track { grid-template-columns: 1fr 1fr; }
  .art-intro { grid-column: 1 / -1; }
  .art-panel { height: clamp(460px, 40vw, 520px); }
}

/* ---------- motion: glyphs rest dim and brighten when their panel is in focus ---------- */
.arts.is-live .art-glyph img { opacity: .38; filter: saturate(.7) brightness(.8); }
.arts.is-live .art-panel.is-lit .art-glyph img {
  opacity: 1;
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--night-glow) 38%, transparent));
}

/* ---------- desktop + motion: the horizontal pan ---------- */
.arts.is-panning {
  height: 100svh;
  padding-block: 0;
  overflow: hidden;
}
.arts.is-panning .arts-track {
  display: flex;
  gap: 0;
  width: max-content;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.arts.is-panning .art-intro {
  /* fixed width, never sized by its words: the pan length (and every
     scroll position below it) stays the same in all languages */
  flex: none;
  width: 70vw;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 4vw 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
}
.arts.is-panning .arts-title { font-size: clamp(48px, 5.6vw, 96px); max-width: none; }
.arts.is-panning .art-panel {
  flex: none;
  min-width: 0;
  height: 100%;
  overflow: visible;
  border-radius: 0;
  background: none; /* panels flow into one sky; the glyphs carry the light */
}
.arts.is-panning [data-art="astro"]  { width: 80vw; }
.arts.is-panning [data-art="numero"] { width: 62vw; }
/* the numeral and its words stay one group while the track moves */
.arts.is-panning [data-art="numero"] .art-copy { right: auto; left: 48cqw; text-align: left; }
.arts.is-panning [data-art="ebced"]  { width: 84vw; }
.arts.is-panning [data-art="energy"] { width: 86vw; }
/* Copy sits clear of the fixed header. */
.arts.is-panning .art-copy { max-width: 30ch; }
.arts.is-panning [data-art="energy"] .art-copy { right: 14cqw; }

/* ---------- the armillary sphere (js/fx-orrery.js) ----------
   The Blender poster holds the place; the live canvas fades in over it. */
.orrery {
  position: relative;
  width: min(86vw, 440px);
  aspect-ratio: 1;
  margin: clamp(28px, 6vw, 56px) auto 0;
}
.orrery::before {                     /* the core's light, felt around the rings */
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--night-glow) 26%, transparent), transparent 68%);
  pointer-events: none;
}
.orrery img, .orrery canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 1.2s var(--ease-out);
}
.orrery canvas { opacity: 0; }
.orrery.is-live canvas { opacity: 1; }
.orrery.is-live .orrery-poster { opacity: 0; }

/* desktop pan: the title and the sphere share the opening panel */
.arts.is-panning .art-intro { width: 100vw; gap: 2vw; justify-content: space-between; }
.arts.is-panning .orrery {
  flex: none;
  width: min(72svh, 40vw);
  margin: 0 4vw 0 0;
}