/* ==========================================================================
   Art Style Archive · Impeccable Craft Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-canvas: #090a0c;
  --bg-surface: #141518;
  --bg-surface-hover: #1e2025;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --accent-terracotta: #e25c38;
  --accent-terracotta-glow: rgba(226, 92, 56, 0.35);
  --text-primary: #fbfbfa;
  --text-muted: #a1a1aa;
  --text-dim: #8e9099; /* Boosted for WCAG AA compliance (>=4.5:1 on dark canvas) */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

html {
  background-color: var(--bg-canvas);
  color: #f4f4f5;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-canvas);
  min-height: 100vh;
}

/* Global Accessible Keyboard Focus Rings */
:focus-visible {
  outline: 2px solid var(--accent-terracotta) !important;
  outline-offset: 2px !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: var(--bg-canvas);
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Gallery Masonry Layout (Strictly Max 3 Columns) */
#galleryGrid {
  column-count: 1;
  column-gap: 1.25rem;
}

@media (min-width: 540px) {
  #galleryGrid {
    column-count: 2;
    column-gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  #galleryGrid {
    column-count: 3;
    column-gap: 1.5rem;
  }
}

/* Card */
.art-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .art-card {
    margin-bottom: 1.25rem;
  }
}

.art-card:hover {
  transform: translateY(-3px);
  border-color: rgba(226, 92, 56, 0.45);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8), 0 0 15px -3px rgba(226, 92, 56, 0.15);
}

.art-card-media {
  position: relative;
  overflow: hidden;
  background-color: #0d0e11;
  cursor: pointer;
}

.art-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.art-card:hover .art-card-media img {
  transform: scale(1.035);
}

/* Tactile Press Feedback (:active state on buttons & cards) */
button,
[role="button"],
.art-card-media {
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

button:active,
[role="button"]:active,
.art-card-media:active {
  transform: scale(0.975);
}

/* Full-Screen Cinema Lightbox Viewport & Progressive Blur-Up Architecture */
#lightboxViewport {
  position: relative;
  max-width: 94vw;
  max-height: 86vh;
  width: min(94vw, calc(86vh * (var(--art-ratio-num, 16) / var(--art-ratio-den, 9))));
  height: min(86vh, calc(94vw * (var(--art-ratio-den, 9) / var(--art-ratio-num, 16))));
  aspect-ratio: var(--art-aspect-ratio, 16 / 9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #0d0e11;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease-out;
}

#lightboxModal.opacity-0 #lightboxViewport {
  transform: scale(0.97);
  opacity: 0;
}

/* Low-Res Progressive Blur-Up Placeholder Layer */
#lightboxThumbImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px);
  transition: opacity 300ms ease-out;
  pointer-events: none;
  z-index: 1;
}

/* High-Resolution Full Layer (Fades in seamlessly over thumbnail with zero jump) */
#lightboxImg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 350ms cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating Prompt Bar Smooth Sliding Drawer */
#lightboxPromptBar {
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), opacity 180ms ease-out;
}

#lightboxPromptBar.collapsed {
  transform: translate(-50%, calc(100% + 32px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Toast Arrival & Symmetrical Dismissal */
#toast {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease-out;
}

#toast.toast-hidden {
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
}

/* Random Shuffle Icon Spin */
.icon-spin-180 {
  transform: rotate(180deg);
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  button:active,
  [role="button"]:active,
  .art-card-media:active,
  #lightboxModal.opacity-0 #lightboxViewport,
  .icon-spin-180 {
    transform: none !important;
  }
}