/* cardboard.markets — motion & UI enhancement layer
   Injected by serve.mjs on every page. Keys off the incumbent class system
   (.card-art, .btn-copper, .btn-ghost, .chip, .card, table) — no DOM ownership. */

/* ---------- Browser surfaces, themed from the palette ---------- */

::selection {
  background: #ffcb05;
  color: #1b3a82;
}

input,
textarea {
  caret-color: #2a75bb;
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(27, 58, 130, 0.28) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(27, 58, 130, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 58, 130, 0.45);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background: transparent;
}

:focus-visible {
  outline: 3px solid rgba(42, 117, 187, 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn-copper:focus-visible,
.btn-ghost:focus-visible,
.chip:focus-visible,
.rounded-pill:focus-visible,
nav a:focus-visible {
  border-radius: 999px;
}
.input:focus-visible {
  outline: none; /* .input already has its own themed focus ring */
}

/* Price and stat columns read as columns, not ragged digits */
table {
  font-variant-numeric: tabular-nums;
}

/* The snapshot's footer link row is wider than small screens; let it wrap */
footer .flex.items-center.gap-4 {
  flex-wrap: wrap;
}

/* ---------- Feedback: press, hover, links ---------- */

.btn-copper,
.btn-ghost {
  transition-property: transform, background-color, opacity, box-shadow, color;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-duration: 0.18s;
}
.btn-copper:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(27, 58, 130, 0.25), 0 8px 18px rgba(255, 203, 5, 0.35);
}
.btn-copper:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 0 rgba(27, 58, 130, 0.2);
  transition-duration: 0.08s;
}
.btn-ghost:active,
button.chip:active,
a.chip:active {
  transform: scale(0.96);
  transition-duration: 0.08s;
}

nav a {
  transition: color 0.15s ease, background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
nav a:hover {
  background-color: rgba(42, 117, 187, 0.08);
}

.link {
  transition: text-decoration-color 0.18s ease, text-underline-offset 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.link:hover {
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

/* Row hover: the thumbnail leans in with the row tint */
tbody tr {
  transition: background-color 0.15s ease;
}
tbody tr .card-art {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
tbody tr:hover .card-art {
  transform: rotate(-2deg) scale(1.06);
}

/* ---------- Continuity: header state, route entrance ---------- */

header.sticky {
  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-scrolled] header.sticky {
  box-shadow: 0 1px 0 rgba(27, 58, 130, 0.06), 0 6px 20px rgba(27, 58, 130, 0.1);
}

@keyframes cb-page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
main.cb-page-enter {
  animation: cb-page-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Mount stagger (boot window only, set by enhance.js) ---------- */

@keyframes cb-row-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
html.cb-boot main tbody tr,
html.cb-boot main .grid > * {
  animation: cb-row-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.cb-boot main tbody tr:nth-child(2),
html.cb-boot main .grid > :nth-child(2) {
  animation-delay: 0.03s;
}
html.cb-boot main tbody tr:nth-child(3),
html.cb-boot main .grid > :nth-child(3) {
  animation-delay: 0.06s;
}
html.cb-boot main tbody tr:nth-child(4),
html.cb-boot main .grid > :nth-child(4) {
  animation-delay: 0.09s;
}
html.cb-boot main tbody tr:nth-child(5),
html.cb-boot main .grid > :nth-child(5) {
  animation-delay: 0.12s;
}
html.cb-boot main tbody tr:nth-child(6),
html.cb-boot main .grid > :nth-child(6) {
  animation-delay: 0.15s;
}
html.cb-boot main tbody tr:nth-child(7),
html.cb-boot main .grid > :nth-child(7) {
  animation-delay: 0.18s;
}
html.cb-boot main tbody tr:nth-child(n + 8),
html.cb-boot main .grid > :nth-child(n + 8) {
  animation-delay: 0.21s;
}

/* ---------- Focal moment: holographic card tilt ---------- */

/* Vars (--cb-rx, --cb-ry, --cb-gx, --cb-gy) are set on the image's parent
   by enhance.js; card and glare share them so they move as one object. */
img.card-art.cb-holo {
  /* !important: must beat arbitrary Tailwind utility stacks (group-hover scale,
     transition-transform, float animation) across all pages */
  transform: perspective(900px) rotateX(var(--cb-rx, 0deg)) rotateY(var(--cb-ry, 0deg)) scale(1.02) !important;
  transition: transform 0.09s linear !important;
  animation: none !important; /* the hero float yields while you hold the card */
  will-change: transform;
}

.cb-glare {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
  transform: perspective(900px) rotateX(var(--cb-rx, 0deg)) rotateY(var(--cb-ry, 0deg)) scale(1.02);
  background:
    radial-gradient(
      70% 48% at var(--cb-gx, 50%) var(--cb-gy, 50%),
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0) 60%
    ),
    linear-gradient(
      115deg,
      rgba(255, 64, 160, 0.34),
      rgba(255, 203, 5, 0.3) 30%,
      rgba(64, 255, 196, 0.28) 60%,
      rgba(80, 150, 255, 0.34)
    );
  background-position:
    0 0,
    var(--cb-gx, 50%) 0;
  background-size:
    100% 100%,
    220% 100%;
}
.cb-glare.cb-on {
  opacity: 1;
  transition: opacity 0.09s linear, transform 0.09s linear;
}

/* ---------- Reduced motion: fewer and gentler, feedback stays ---------- */

@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-marquee,
  .animate-marquee-rev {
    animation: none;
  }
  .shimmer {
    animation-duration: 2.8s; /* loading state stays legible, just calmer */
  }
  main.cb-page-enter,
  html.cb-boot main tbody tr,
  html.cb-boot main .grid > * {
    animation: none;
  }
  img.card-art.cb-holo {
    transform: none;
  }
  .cb-glare {
    display: none;
  }
  .btn-copper:hover,
  .btn-copper:active,
  .btn-ghost:active,
  button.chip:active,
  a.chip:active {
    transform: none;
  }
  tbody tr:hover .card-art {
    transform: none;
  }
}