/* German Dominion - fx.css: site-wide motion polish.
 *
 * Entrance reveals, a page fade-in, and pointer micro-interactions layered on
 * the shared button/card vocabulary from /_shared.css. Design rules:
 *   - Pure CSS. Every entrance uses animation-fill-mode:both, so an element
 *     always ENDS fully visible even if a script never runs - content can
 *     never get stuck hidden.
 *   - Scoped to html.fx-ready (added by fx.js). If the stylesheet loads but
 *     fx.js does not, nothing animates and everything shows normally.
 *   - GPU-friendly: only opacity + transform animate, never layout.
 *   - No color changes and no external assets; tokens come from /_shared.css.
 *   - _shared.css already disables all animation under prefers-reduced-motion,
 *     which neutralizes everything here as well.
 */

@keyframes gd-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gd-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* whole page fades in once */
html.fx-ready body { animation: gd-page-in 0.38s var(--ease, ease) both; }

/* top-level sections rise in with a short, capped stagger */
html.fx-ready main > section { animation: gd-rise 0.5s var(--ease, ease) both; }
html.fx-ready main > section:nth-child(2) { animation-delay: 0.06s; }
html.fx-ready main > section:nth-child(3) { animation-delay: 0.12s; }
html.fx-ready main > section:nth-child(4) { animation-delay: 0.18s; }
html.fx-ready main > section:nth-child(n+5) { animation-delay: 0.22s; }

/* cards in any grid rise in and stagger (also plays as the shop restocks) */
html.fx-ready .grid > .card { animation: gd-rise 0.5s var(--ease, ease) both; }
html.fx-ready .grid > .card:nth-child(2) { animation-delay: 0.05s; }
html.fx-ready .grid > .card:nth-child(3) { animation-delay: 0.10s; }
html.fx-ready .grid > .card:nth-child(4) { animation-delay: 0.15s; }
html.fx-ready .grid > .card:nth-child(5) { animation-delay: 0.20s; }
html.fx-ready .grid > .card:nth-child(n+6) { animation-delay: 0.25s; }

/* a touch more depth on card hover, on top of the existing lift */
html.fx-ready .grid > .card:hover {
  box-shadow: 0 20px 44px -24px rgba(0, 0, 0, 0.72),
              inset 0 0 0 1px var(--glass-border-lit, rgba(57, 201, 119, 0.5));
}

/* clearer keyboard focus ring for accessibility */
html.fx-ready :focus-visible {
  outline: 2px solid var(--accent, #39c977);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html.fx-ready body,
  html.fx-ready main > section,
  html.fx-ready .grid > .card { animation: none !important; }
}