/* skinfx.css — how each material ARRIVES when chosen.
 *
 * The conductor (skinFx in app.html) only sets body.skinfx for ~1s on an
 * explicit switch — picker tap or side change, never an ordinary repaint.
 * Everything here keys off html[data-skin], so each material moves like
 * itself: paper settles, board flaps down, chalk draws in, glass catches
 * the light. Stagger caps at 8 tiles; reduced-motion collapses to a fade.
 */

body.skinfx .saka-w, body.skinfx .pv {
  animation: sfxFade 340ms var(--ease-out-smooth, ease-out) backwards;
}
@keyframes sfxFade { from { opacity: 0; } }

/* Original — paper settling onto the desk */
:root[data-skin="ivory"] body.skinfx .saka-w,
:root[data-skin="ivory"] body.skinfx .pv {
  animation: sfxSettle 380ms var(--ease-out-smooth, ease-out) backwards;
}
@keyframes sfxSettle { from { opacity: 0; transform: translateY(8px); } }

/* Glass — the pane lands, then catches the light once */
:root[data-skin="forest"] body.skinfx .saka-w, :root[data-skin="ink"] body.skinfx .saka-w,
:root[data-skin="steel"] body.skinfx .saka-w, :root[data-skin="porcelain"] body.skinfx .saka-w {
  animation: sfxSettle 380ms var(--ease-out-smooth, ease-out) backwards;
}
:root[data-skin="forest"] body.skinfx .saka-w:not(.saka-gain)::after,
:root[data-skin="ink"] body.skinfx .saka-w:not(.saka-gain)::after,
:root[data-skin="steel"] body.skinfx .saka-w:not(.saka-gain)::after,
:root[data-skin="porcelain"] body.skinfx .saka-w:not(.saka-gain)::after {
  animation: sfxGlare 700ms var(--ease-out-smooth, ease-out) backwards;
}
@keyframes sfxGlare { from { left: -85%; opacity: .5; } to { left: 155%; opacity: 0; } }

/* Cardboard — box flaps folding shut: stiff, weighty, no bounce */
:root[data-skin="kraft"] body.skinfx .saka-w,
:root[data-skin="whitebox"] body.skinfx .saka-w,
:root[data-skin="kraft"] body.skinfx .pv,
:root[data-skin="whitebox"] body.skinfx .pv {
  transform-origin: top center;
  animation: sfxFlap 420ms cubic-bezier(.2,.9,.3,1) backwards;
}
@keyframes sfxFlap {
  from { opacity: 0; transform: perspective(700px) rotateX(-22deg); }
  to { opacity: 1; transform: perspective(700px) rotateX(0); }
}

/* Chalk — the stroke draws in left to right, marks resolve out of dust */
:root[data-skin="blackboard"] body.skinfx .saka-w:not(.act),
:root[data-skin="schoolgreen"] body.skinfx .saka-w:not(.act),
:root[data-skin="blackboard"] body.skinfx .pv,
:root[data-skin="schoolgreen"] body.skinfx .pv {
  animation: sfxChalkBody 460ms ease-out backwards;
}
@keyframes sfxChalkBody { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: blur(0); } }
:root[data-skin="blackboard"] body.skinfx .saka-w:not(.act):not(.saka-gain)::before,
:root[data-skin="schoolgreen"] body.skinfx .saka-w:not(.act):not(.saka-gain)::before,
:root[data-skin="blackboard"] body.skinfx .pv::before,
:root[data-skin="schoolgreen"] body.skinfx .pv::before {
  animation: sfxDraw 520ms ease-out backwards;
}
@keyframes sfxDraw {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
/* the sticky notes just land — paper, light */
:root[data-skin="blackboard"] body.skinfx .saka-w.act,
:root[data-skin="schoolgreen"] body.skinfx .saka-w.act {
  animation: sfxSettle 320ms ease-out backwards;
}

/* the stagger — cap 8, then everyone arrives together */
body.skinfx .saka-w:nth-child(1) { animation-delay: 0ms; }
body.skinfx .saka-w:nth-child(2) { animation-delay: 45ms; }
body.skinfx .saka-w:nth-child(3) { animation-delay: 90ms; }
body.skinfx .saka-w:nth-child(4) { animation-delay: 135ms; }
body.skinfx .saka-w:nth-child(5) { animation-delay: 180ms; }
body.skinfx .saka-w:nth-child(6) { animation-delay: 225ms; }
body.skinfx .saka-w:nth-child(7) { animation-delay: 270ms; }
body.skinfx .saka-w:nth-child(8) { animation-delay: 315ms; }
body.skinfx .saka-w:nth-child(2)::before { animation-delay: 45ms; }
body.skinfx .saka-w:nth-child(3)::before { animation-delay: 90ms; }
body.skinfx .saka-w:nth-child(4)::before { animation-delay: 135ms; }
body.skinfx .saka-w:nth-child(5)::before { animation-delay: 180ms; }
body.skinfx .saka-w:nth-child(2)::after { animation-delay: 45ms; }
body.skinfx .saka-w:nth-child(3)::after { animation-delay: 90ms; }
body.skinfx .saka-w:nth-child(4)::after { animation-delay: 135ms; }

@media (prefers-reduced-motion: reduce) {
  body.skinfx .saka-w, body.skinfx .pv,
  body.skinfx .saka-w::before, body.skinfx .saka-w::after {
    animation: sfxFade 150ms ease-out backwards !important;
  }
}