/* ======================================================================
   Project pages: display format illustrations
   Scenes built in project-pages.js (FF_ART) on one shared 3/4 camera. Screen layouts drift, a light
   sweep crosses the glass, the totem takes a tap, one Dancing Wall glides and the figure at the room
   screen gestures. All motion holds still under prefers-reduced-motion.
   ====================================================================== */
.ff-art {
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(172,43,108,.05), transparent 60%),
    linear-gradient(180deg, #fbfafc 0%, #f3eff5 62%, #ece7f0 100%);
  box-shadow: inset 0 0 0 1px rgba(34,28,46,.06);
}
.ff-art .ff-dim-label { font: 700 8px/1 var(--font-site); letter-spacing: .08em; fill: var(--muted); text-anchor: middle; }
.ff-art .ff-ripple { opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ff-art .ff-flow { animation: ff-flow 18s linear infinite; }
  .ff-art .ff-sweep { animation: ff-sweep 11s cubic-bezier(.45,0,.3,1) infinite; }
  .ff-wall .ff-sweep { animation-delay: -4s; }
  .ff-totem .ff-sweep { animation-delay: -7s; }
  .ff-art .ff-pulse { animation: ff-pulse 3.2s ease-in-out infinite; }
  .ff-art .ff-ring { animation: ff-ring 9s ease-in-out infinite; }
  .ff-art .ff-gesture { animation: ff-gesture 6s ease-in-out infinite; }
  .ff-art .ff-tap { animation: ff-tap 4.2s ease-in-out infinite; }
  .ff-art .ff-ripple { animation: ff-ripple 4.2s ease-out infinite; }
  .ff-art .ff-ripple-2 { animation-delay: .25s; }
  .ff-art .ff-glide { animation: ff-glide 10s ease-in-out infinite; }
}
@keyframes ff-flow { to { transform: translateX(var(--p)); } }
@keyframes ff-sweep { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(var(--sweep)); } }
@keyframes ff-pulse { 50% { opacity: .35; } }
@keyframes ff-ring { 50% { stroke-dasharray: 82 100; } }
@keyframes ff-gesture { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(-4deg); } 70% { transform: rotate(1.5deg); } }
@keyframes ff-tap { 0%, 30%, 100% { transform: rotate(0deg); } 12% { transform: rotate(-3deg); } }
@keyframes ff-ripple { 0%, 22% { opacity: 0; transform: scale(.3); } 26% { opacity: .9; } 60%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ff-glide { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--ffgx), var(--ffgy)); } }

/* Style iterations (format-art-styles.js, ?ff=1..5) and their localhost-only switch. */
.ff-switch { display: flex; flex-wrap: wrap; gap: 2px; width: max-content; max-width: calc(100vw - 40px); margin: 40px 0 -24px; padding: 3px; border-radius: 999px; background: rgb(20 16 28 / .9); font: 600 11.5px/1 system-ui, sans-serif; }
.ff-switch button { padding: 7px 11px; border: 0; border-radius: 999px; background: none; color: #eee; cursor: pointer; }
.ff-switch button[aria-pressed="true"] { background: #fff; color: #140f1c; }
.ff-art.ffs-1 { background: radial-gradient(90% 80% at 50% 45%, #fbfafd, #ece7f2); }
.ff-art.ffs-2 { background: #fdfcfb; box-shadow: inset 0 0 0 1px rgba(34,28,46,.1); }
.ff-art.ffs-3 { background: radial-gradient(120% 90% at 50% 30%, #ffffff 0%, #f1edf4 55%, #e2dce8 100%); }
.ff-art.ffs-4 { background: #f6efe8; box-shadow: none; }
.ff-art.ffs-5 { background: radial-gradient(110% 80% at 50% 35%, #2a1f3a 0%, #17111f 55%, #0d0a13 100%); box-shadow: none; }
.ff-art .ffl-dim { font: 600 7.5px/1 var(--font-site); letter-spacing: .04em; fill: #221c2e; text-anchor: middle; }
.ff-art .ffl-note { font: 600 6px/1 var(--font-site); letter-spacing: .12em; fill: #6b6172; }