/* Knowdle card FX (v48), companion to /fx/cardfx.js.
   Every rule is scoped to html.cardfx-on (set by the module), so if the module never runs
   nothing here applies and the cards behave exactly as before. */

:root { --fx-edge: #140b2c; --fx-shadow: rgba(20, 8, 48, .62); }
html[data-theme="light"] { --fx-shadow: rgba(45, 22, 89, .5); }

/* The module owns the transform while it is live; the stylesheet's hover/press transforms
   would otherwise fight the springs (inline wins, but their transitions would smear it). */
html.cardfx-on:not(.cardfx-reduced) .fx-card.fx-card.fx-card:is(:hover, :active, :focus-visible) { transform: none; }
html.cardfx-on .fx-card.fx-live { transition: border-color .18s ease; will-change: transform; }
html.cardfx-on .fx-card.fx-live.fx-rest { will-change: auto; }
html.cardfx-on .fx-live :is(.kgt-thumb, .kgt-emoji, .feat-bg, .feat-art, .feat-ladder, .feat-big,
  .kgt-title, .kgt-meta, .kgt-cta, .feat-h, .feat-meta, .feat-top, .feat-looks, .feat-done, .feat-cta,
  .kids-pic-tile-eyebrow, .kids-pic-tile-title, .kids-pic-tile-meta, .kids-pic-tile-emoji, .kids-pic-tile-cta) { transition: none; }
html.cardfx-on .fx-live:not(.fx-rest) :is(.kgt-thumb, .feat-bg, .feat-art) { will-change: translate, scale; }

/* Raised layers: once a card is lifted, the type and the Play button cast a soft shadow onto
   the art beneath them, so they read as sitting above the face. Toggled once, not per frame. */
html.cardfx-on .fx-lifted :is(.kgt-title, .feat-h, .kids-pic-tile-title) { text-shadow: 0 6px 14px rgba(10, 4, 30, .55), 0 1px 0 rgba(10, 4, 30, .4); }
html.cardfx-on .fx-lifted :is(.kgt-meta, .feat-meta, .kids-pic-tile-meta) { text-shadow: 0 3px 8px rgba(10, 4, 30, .5); }
html.cardfx-on .fx-lifted :is(.kgt-cta, .feat-cta, .kids-pic-tile-cta) { box-shadow: 0 5px 0 var(--purple-deep, #4a1ec1), 0 14px 22px -8px rgba(10, 4, 30, .7); }
html.cardfx-on .fx-pressed :is(.kgt-cta, .feat-cta, .kids-pic-tile-cta) { box-shadow: 0 2px 0 var(--purple-deep, #4a1ec1), 0 6px 12px -6px rgba(10, 4, 30, .6); }

/* Specular glare: a soft, warm-white hotspot plus a faint sheen band, moved by transform only.
   The box is twice the card so translating it never shows an edge; the card clips it. */
html.cardfx-on .fx-glare {
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
  z-index: 4; pointer-events: none; opacity: 0; border-radius: inherit;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(255, 250, 240, .30) 0%, rgba(255, 246, 230, .11) 34%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .08) 47%, rgba(255, 255, 255, 0) 56%);
}
/* A crisp top-edge rim light, like light catching a lacquered card's bevel. */
html.cardfx-on .fx-card.fx-lifted::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* Entrance: hidden until the module plays its spring; never applies without the module. */
html.cardfx-on:not(.cardfx-reduced) .fx-card.fx-pending { opacity: 0; }

/* Carousels clip vertically; give lifted, tilted cards a little headroom without moving layout. */
html.cardfx-on:not(.cardfx-reduced) .hub-row .cat-row-track.game-card-track { padding-top: 14px; margin-top: -6px; }
html.cardfx-on:not(.cardfx-reduced) .feat-row { padding-top: 14px; margin-top: -6px; }

/* Reduced motion: static cards, a simple lift on hover and keyboard focus. */
html.cardfx-on.cardfx-reduced .fx-card:focus-visible { transform: translateY(-3px); }
html.cardfx-on.cardfx-reduced .fx-glare { display: none; }
html.cardfx-on:not(.cardfx-reduced) .hero-band + .feat .feat-row { padding-top: 10px; }