/*
 * css/art.css — Ayutthaya: The River Throne
 * Palette tokens (DESIGN §12), art helper classes and ALL art motion (.fx-*).
 * Motion is off under prefers-reduced-motion, html.reduce-motion, or [data-motion="reduced"] on <html>/<body>.
 */
:root {
  --lacquer-0: #0B0907;
  --lacquer-1: #15100C;
  --lacquer-2: #1F1712;
  --red-0: #3B0D0B;
  --red-1: #6B1A14;
  --gold-0: #8A6A1E;
  --gold-1: #C9A13B;
  --gold-2: #E6C76A;
  --gold-3: #F6E3A1;
  --ivory: #EFE6CF;
  --ivory-dim: #BFB49A;
  --palm: #D9C9A3;
  --ink: #241A12;
  --vermilion: #D2553F;
  --jade: #5E8C6A;
}

/* ---- art helpers -------------------------------------------------------------------------- */
.ayu-portrait, .ayu-scene, .ayu-icon, .ayu-motif { display: block; }
.ayu-portrait { width: 100%; height: auto; aspect-ratio: 200 / 240; }
.ayu-scene { width: 100%; height: 100%; }
.ayu-icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.25em; }
.ayu-divider, .ayu-border { width: 100%; height: auto; }
.ayu-seal { width: 4rem; height: 4rem; }

/* ---- motion (DESIGN §12): flicker 1.6–2.4 s, drift 8 s, ripple 6 s, glint 10 s ------------- */
.fx-flicker, .fx-oar, .fx-glint { transform-box: fill-box; }
.fx-flicker { transform-origin: 50% 100%; animation: ayu-flicker 1.9s ease-in-out infinite alternate; }
.fx-flicker:nth-of-type(2n) { animation-duration: 2.3s; animation-delay: -.7s; }
.fx-flicker:nth-of-type(3n) { animation-duration: 1.6s; animation-delay: -1.1s; }
@keyframes ayu-flicker {
  0% { transform: scale(1, 1) skewX(0deg); opacity: 1; }
  35% { transform: scale(.94, 1.06) skewX(-3deg); opacity: .92; }
  70% { transform: scale(1.04, .95) skewX(2deg); opacity: 1; }
  100% { transform: scale(.97, 1.03) skewX(-1deg); opacity: .95; }
}
.fx-drift path { animation: ayu-drift 8s linear infinite; }
.fx-drift path + path { animation-duration: 11s; }
@keyframes ayu-drift { to { stroke-dashoffset: -88; } }
.fx-ripple { animation: ayu-ripple 6s ease-in-out infinite alternate; }
@keyframes ayu-ripple { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
.fx-cloud { animation: ayu-cloud 40s ease-in-out infinite alternate; }
.fx-cloud:nth-of-type(2n) { animation-duration: 55s; animation-direction: alternate-reverse; }
@keyframes ayu-cloud { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.fx-twinkle circle { animation: ayu-twinkle 3.2s ease-in-out infinite alternate; }
.fx-twinkle circle:nth-child(3n) { animation-delay: -1.3s; }
.fx-twinkle circle:nth-child(3n+1) { animation-delay: -2.4s; animation-duration: 4.4s; }
@keyframes ayu-twinkle { from { opacity: 1; } to { opacity: .35; } }
.fx-oar { transform-origin: 50% 0; animation: ayu-oar 2.4s ease-in-out infinite alternate; }
@keyframes ayu-oar { from { transform: skewX(14deg); } to { transform: skewX(-12deg); } }
.fx-glow { animation: ayu-glow 9s ease-in-out infinite alternate; }
@keyframes ayu-glow { from { opacity: .75; } to { opacity: 1; } }
.fx-glint { animation: ayu-glint 10s ease-in-out infinite; }
@keyframes ayu-glint { 0%, 86%, 100% { opacity: 1; filter: none; } 92% { opacity: 1; filter: brightness(1.35); } }

/* ---- reduced motion: OS setting, or the game's own setting (html.reduce-motion / data-motion) ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-flicker, .fx-drift path, .fx-ripple, .fx-cloud, .fx-twinkle circle, .fx-oar, .fx-glow, .fx-glint { animation: none !important; }
}
html.reduce-motion :is(.fx-flicker, .fx-drift path, .fx-ripple, .fx-cloud, .fx-twinkle circle, .fx-oar, .fx-glow, .fx-glint),
[data-motion="reduced"] :is(.fx-flicker, .fx-drift path, .fx-ripple, .fx-cloud, .fx-twinkle circle, .fx-oar, .fx-glow, .fx-glint) { animation: none !important; }
/* corner pieces are drawn top-left; mirror for the other corners */
.ayu-corner.tr { transform: scaleX(-1); }
.ayu-corner.bl { transform: scaleY(-1); }
.ayu-corner.br { transform: scale(-1, -1); }