/*  plate-fresco.css — fresco frame crossfade styling.
 *
 *  The painted register on the right half of the slider is a narrative
 *  sequence of complete paintings — see views/plate-fresco.js's FRAMES
 *  manifest. Each frame mounts as <image class="fresco-frame
 *  fresco-frame-NAME"> in the foreground parallax band; opacity is set
 *  imperatively from JS by setPoeticism(t), which derives the per-frame
 *  envelope from adjacent peakTs.
 *
 *  This stylesheet adds the cosmetic transition smoothing for the
 *  imperatively-set opacity. JS sets discrete opacity values whenever
 *  the slider moves; the transition fills in micro-interpolation
 *  between samples so rapid scrubbing doesn't strobe.                    */

.plate-svg .fresco-frame {
  /*  Frames don't intercept clicks — pointer events delegate to the
   *  depth=1.0 schema layer. Belt-and-suspenders: the parallax-band
   *  group already sets pointer-events:none for depth<1.0, but the
   *  rule here keeps the behaviour explicit at the frame level.        */
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .plate-svg .fresco-frame { transition: none; }
}

/* — Inner cartouche around the central fresco rect ———————
 *
 *  A doubled gold rule + four corner fleurons frame the central image
 *  (1187.5×950), distinguishing it from the side land tiles that bleed
 *  into the margins. The whole cartouche rides --gold-tint, so it fades
 *  in alongside the sigils' gold transition over [0.42, 0.55]; once
 *  established it shares the same 2.4s breathing rhythm as the sigils
 *  via a parallel pulse animation.                                       */
.plate-svg .fresco-cartouche {
  pointer-events: none;
  opacity: var(--cartouche-opacity, 0);
  transition: opacity 200ms ease-out;
}

.plate-svg .fresco-cartouche-outer {
  stroke: #d4af37;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1.2px #f5d96d);
  opacity: 0.78;
}

.plate-svg .fresco-cartouche-inner {
  stroke: #b8902a;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

.plate-svg .fresco-cartouche-fleuron {
  font-family: 'IM Fell English', Palatino, serif;
  font-size: 22px;
  fill: #d4af37;
  filter: drop-shadow(0 0 1px #f5d96d);
  opacity: 0.85;
}

/*  Once the fresco has fully arrived (--gold-tint = 1, at t ≥ 0.55),
 *  the cartouche shares the sigils' breathing rhythm — the rules' glow
 *  and the fleurons brighten in lockstep with the gold pulse.            */
body[data-fresco-arrived] .plate-svg .fresco-cartouche-outer {
  animation: cartouche-rule-pulse 2.4s ease-in-out infinite;
}
body[data-fresco-arrived] .plate-svg .fresco-cartouche-fleuron {
  animation: cartouche-fleuron-pulse 2.4s ease-in-out infinite;
}

@keyframes cartouche-rule-pulse {
  0%, 100% { filter: drop-shadow(0 0 1.2px #f5d96d); }
  50%      { filter: drop-shadow(0 0 3.5px #f5d96d) drop-shadow(0 0 1.2px #fff5b3); }
}

@keyframes cartouche-fleuron-pulse {
  0%, 100% { filter: drop-shadow(0 0 1px #f5d96d); }
  50%      { filter: drop-shadow(0 0 3px #fff5b3) drop-shadow(0 0 1.5px #f5d96d); }
}

@media (prefers-reduced-motion: reduce) {
  .plate-svg .fresco-cartouche { transition: none; }
  body[data-fresco-arrived] .plate-svg .fresco-cartouche-outer,
  body[data-fresco-arrived] .plate-svg .fresco-cartouche-fleuron {
    animation: none;
  }
}