/* ===========================================================================
   Pillow Client — PixelCard                           ported 2026-10-17
   ---------------------------------------------------------------------------
   The React Bits "PixelCard" stylesheet, worn by the host element that
   src/scripts/pixel-card.js mounts onto. Owned by the component, not by
   landing.css, so the file is standalone: no @import, no Tailwind, no custom
   property from another stylesheet — only its own --pixel-card-* set, each with
   a literal fallback.

   One deliberate change from the component: `.pixel-card` no longer forces
   300x400. Here the host is the card, so the card fills the box the page gives
   it (width/height 100%) and the size stays a page decision — a page sets the
   host's own width/height (or its grid cell) instead of overriding two lines.

   The canvas is inserted as the host's first child by the script;
   `.pixel-card > :not(.pixel-card-canvas)` keeps the page's own children above
   it. Everything else, including the ::after rim, the :focus-visible ring and
   the data-theme / data-active hooks, is the component's own CSS.
   =========================================================================== */

.pixel-card {
  --pixel-card-surface: linear-gradient(180deg, #17151c 0%, #0f0e13 100%);
  --pixel-card-edge: rgba(255, 255, 255, 0.08);
  --pixel-card-edge-active: rgba(255, 255, 255, 0.16);
  --pixel-card-highlight: rgba(255, 255, 255, 0.06);
  --pixel-card-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.85), 0 8px 18px -10px rgba(0, 0, 0, 0.6);
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--pixel-card-radius, 24px);
  background: var(--pixel-card-surface);
  box-shadow: var(--pixel-card-shadow);
  isolation: isolate;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.pixel-card[data-theme='light'] {
  --pixel-card-surface: linear-gradient(180deg, #ffffff 0%, #f6f6f8 100%);
  --pixel-card-edge: rgba(24, 24, 27, 0.08);
  --pixel-card-edge-active: rgba(24, 24, 27, 0.16);
  --pixel-card-highlight: rgba(255, 255, 255, 1);
  --pixel-card-shadow: 0 24px 48px -26px rgba(24, 24, 27, 0.32), 0 8px 18px -12px rgba(24, 24, 27, 0.18);
}

.pixel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--pixel-card-edge),
    inset 0 1px 0 var(--pixel-card-highlight);
  pointer-events: none;
  transition: box-shadow 260ms ease;
}

.pixel-card[data-active]::after {
  box-shadow:
    inset 0 0 0 1px var(--pixel-card-edge-active),
    inset 0 1px 0 var(--pixel-card-highlight);
}

.pixel-card:focus-visible {
  box-shadow:
    var(--pixel-card-shadow),
    0 0 0 3px rgba(127, 127, 140, 0.45);
}

.pixel-card-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pixel-card > :not(.pixel-card-canvas) {
  position: relative;
  z-index: 1;
}