:root {
  --bg-primary: #ffffff;
  --text-primary: #000000;
  --text-secondary: #4b5563;
  --bg-card: rgba(0,0,0,.03);
  --border-color: rgba(0,0,0,.1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

body {
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Cursor ─────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after, button, a, input, textarea, select {
    cursor: none !important;
  }
}
@media (hover: none) and (pointer: coarse) {
  * { cursor: auto !important; }
}

/* ── Scrollbars ─────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #b90b114d;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #b90b1199; }

/* ── Smooth scroll in panel ─────────────────────────── */
[class*="overflow-y-auto"], [class*="overflow-x-auto"] {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* ── View transitions ───────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ── Image fade-in on load ──────────────────────────── */
@keyframes imgFadeIn {
  from { opacity: 0; transform: scale(1.01); }
  to   { opacity: 1; transform: scale(1); }
}
img[class*="object-cover"],
img[class*="object-contain"] {
  animation: imgFadeIn 0.45s var(--ease-out-quart) both;
}

/* ── Card hover — 3D tilt + GPU compositing ─────────── */
[class*="rounded-3xl"][class*="cursor-pointer"],
[class*="rounded-2xl"][class*="cursor-pointer"] {
  will-change: transform, filter;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

/* Prevent inner content from looking warped during tilt */
[class*="rounded-3xl"][class*="cursor-pointer"] > *,
[class*="rounded-2xl"][class*="cursor-pointer"] > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Smooth the blur filter transitions from Framer Motion */
[class*="filter"] {
  will-change: filter, opacity, transform;
}

/* ── Focus rings ────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #b90b11;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Text selection ─────────────────────────────────── */
::selection {
  background: #b90b1133;
  color: inherit;
}

/* ── Responsive masonry ─────────────────────────────── */
@media (max-width: 639px) {
  .masonry-grid { column-count: 1 !important; }
}

/* ── Staggered card entrance ────────────────────────── */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton shimmer for loading thumbnails ────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
[class*="bg-gradient-to-br"][class*="opacity-50"] {
  background-size: 400px 100%;
  animation: shimmer 2s infinite linear;
  background-image: linear-gradient(
    90deg,
    rgba(200,200,200,0.08) 25%,
    rgba(200,200,200,0.18) 50%,
    rgba(200,200,200,0.08) 75%
  );
}

/* ── Video player polish ─────────────────────────────── */
video::-webkit-media-controls-panel {
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}
video {
  border-radius: 0;
}

/* ── Panel backdrop blur sharpness ─────────────────── */
[class*="backdrop-blur"] {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

/* ── Smooth border transitions ──────────────────────── */
[class*="border"][class*="group-hover"] {
  transition: border-color 0.25s var(--ease-out-quart),
              box-shadow 0.25s var(--ease-out-quart);
}

/* ── Typography spacing ─────────────────────────────── */
h1, h2, h3 {
  text-wrap: balance;
  letter-spacing: -0.01em;
}