/* Placeholder artwork for the six gallery plates — tonal CSS studies, one per frame.
   Each scene paints .art::before; JS only nudges --py for a light parallax. */

.art { position: absolute; inset: 0; overflow: hidden; background: var(--sand); }
.art::before, .art::after { content: ""; position: absolute; }
.art::before { inset: -8% 0; transform: translateY(calc(var(--py, 0) * 1px)); }

.plate .slot-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 5; max-width: calc(100% - 24px);
  padding: 6px 9px 5px;
  background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink-2);
  font-size: 9.5px; letter-spacing: .12em;
}

/* 01 — centre court: low sun, sand, a net on two posts */
[data-scene="court"] .art::before {
  --k: linear-gradient(var(--ink), var(--ink));
  background:
    var(--k) 26% 67% / 2px 24% no-repeat,
    var(--k) 74% 67% / 2px 24% no-repeat,
    var(--k) 50% 51% / 48% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(22, 19, 15, .38) 0 1px, transparent 1px 10px) 50% 56% / 48% 9% no-repeat,
    repeating-linear-gradient(0deg, rgba(22, 19, 15, .38) 0 1px, transparent 1px 10px) 50% 56% / 48% 9% no-repeat,
    radial-gradient(circle at 18% 28%, var(--paper) 0 7.5%, transparent 7.9%),
    linear-gradient(180deg, transparent 0 66%, #CDBD9B 66%),
    linear-gradient(180deg, #C4D1DB, #EDE6D6 66%);
}

/* 02 — floodlit semi-final: night blue, two cones of light, a lit court */
[data-scene="lights"] .art::before {
  background:
    radial-gradient(ellipse 40% 6% at 50% 84%, rgba(246, 242, 234, .6), transparent 72%),
    conic-gradient(from 148deg at 10% 6%, rgba(246, 242, 234, .2) 0 34deg, transparent 34deg),
    conic-gradient(from 178deg at 90% 6%, rgba(246, 242, 234, .2) 0 34deg, transparent 34deg),
    radial-gradient(circle at 10% 6%, var(--paper) 0 1.6%, transparent 2%),
    radial-gradient(circle at 90% 6%, var(--paper) 0 1.6%, transparent 2%),
    linear-gradient(180deg, #0F2234, #1B3A57 62%, #13293E);
}

/* 03 — diving defence: a long low body, a rising ball on its arc */
[data-scene="dive"] .art::before {
  background:
    radial-gradient(circle at 64% 34%, var(--paper) 0 4.8%, var(--accent) 5.1% 5.8%, transparent 6.1%),
    radial-gradient(circle at 12% 112%, transparent 0 69%, rgba(27, 58, 87, .55) 69% 69.4%, transparent 69.8%),
    radial-gradient(ellipse 130% 34% at 40% 116%, #C9B88F 0 62%, transparent 63%),
    linear-gradient(180deg, #F0E9D9, #DCCFB2);
}
[data-scene="dive"] .art::after {
  left: 16%; top: 66%; width: 50%; height: 8%;
  border-radius: 50%; background: var(--accent); transform: rotate(-17deg);
}

/* 04 — the jump serve: ball at the top of its flight, a net far away */
[data-scene="serve"] .art::before {
  --k: linear-gradient(var(--ink), var(--ink));
  background:
    radial-gradient(circle at 24% 22%, var(--paper) 0 3.6%, var(--accent) 3.9% 4.4%, transparent 4.7%),
    radial-gradient(circle at 24% 160%, transparent 0 177%, rgba(27, 58, 87, .5) 177% 177.4%, transparent 177.8%),
    var(--k) 70% 65% / 2px 20% no-repeat,
    var(--k) 92% 65% / 2px 20% no-repeat,
    var(--k) 90% 52% / 22% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(22, 19, 15, .35) 0 1px, transparent 1px 9px) 90% 58% / 22% 8% no-repeat,
    repeating-linear-gradient(0deg, rgba(22, 19, 15, .35) 0 1px, transparent 1px 9px) 90% 58% / 22% 8% no-repeat,
    linear-gradient(180deg, transparent 0 72%, #CDBD9B 72%),
    linear-gradient(180deg, #D5DEE4, #F1EBDD 72%);
}

/* 05 — quarter-final crowd: stands as arcs of dots round a bright court */
[data-scene="crowd"] .art::before {
  background:
    radial-gradient(circle, rgba(27, 58, 87, .7) 0 1.6px, transparent 2px) 0 0 / 12px 12px,
    repeating-radial-gradient(ellipse 100% 100% at 50% 112%, transparent 0 10px, rgba(27, 58, 87, .22) 10px 11px),
    #DCCFB2;
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 112%, transparent 0 34%, #000 35% 96%, transparent 97%);
  mask-image: radial-gradient(ellipse 92% 92% at 50% 112%, transparent 0 34%, #000 35% 96%, transparent 97%);
}
[data-scene="crowd"] .art::after {
  left: 30%; right: 30%; bottom: 0; height: 22%;
  border-radius: 999px 999px 0 0; background: var(--paper);
  box-shadow: 0 0 0 10px rgba(246, 242, 234, .5);
}

/* 06 — team and partner day: two arches and the ball between them */
[data-scene="team"] .art { background: linear-gradient(180deg, #EDE6D6, var(--sand)); }
[data-scene="team"] .art::before {
  inset: auto; left: 16%; bottom: -4%; width: 36%; height: 74%;
  border-radius: 999px 999px 0 0; background: var(--accent);
}
[data-scene="team"] .art::after {
  left: 44%; bottom: -4%; width: 36%; height: 62%;
  border-radius: 999px 999px 0 0; background: #A9BCCB; mix-blend-mode: multiply;
}