/* Visage Design System */

/* ===== Color System (OKLCH) ===== */
:root {
  /* Brand colors */
  --brand: oklch(52% 0.08 282);
  --brand-hover: oklch(45% 0.08 282);
  --accent: oklch(70% 0.06 185);
  --accent-hover: oklch(63% 0.06 185);

  /* Text colors */
  --text: oklch(18% 0.01 280);
  --text-muted: oklch(45% 0.02 280);

  /* Compatibility aliases (templates/JS references) */
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --primary: var(--brand);
  --error: var(--destructive);
  --bg-secondary: var(--surface);

  /* Surface colors */
  --surface: oklch(99% 0.005 280);
  --surface-elevated: oklch(100% 0 0);

  /* Border */
  --border: oklch(0% 0 0 / 0.08);

  /* Semantic colors */
  --destructive: oklch(58% 0.10 25);
  --destructive-hover: oklch(52% 0.10 25);
  --success: oklch(60% 0.08 145);
  --warning: oklch(70% 0.07 85);

  /* Shadows */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-card: 0 1px 6px oklch(0% 0 0 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-elevated: 0 10px 28px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06);

  /* Focus ring */
  --ring-brand: oklch(52% 0.08 282 / 0.4);

  /* App-specific gradients (subtler than marketing) */
  --gradient-subtle: linear-gradient(135deg, oklch(52% 0.08 282 / 0.02) 0%, oklch(70% 0.06 185 / 0.02) 100%);
  --gradient-cta-app: var(--brand);
  --glow-brand-subtle: transparent;
  --glow-brand-hover: transparent;

  /* Easing and transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* ===== Editorial Studio app-shell tokens ===== */
  /* Type stacks: Inter UI, Prata display, JetBrains Mono labels */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Prata", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "SFMono-Regular", monospace;

  /* Radii — soft editorial radii for the product register */
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;

  /* Wash + strong-border derivatives of the palette above */
  --brand-wash: oklch(52% 0.08 282 / 0.08);
  --border-strong: oklch(0% 0 0 / 0.16);
  --surface-wash: oklch(99% 0.005 280);
}

.dark {
  /* Brand colors - slightly brighter for dark mode */
  --brand: oklch(65% 0.07 282);
  --brand-hover: oklch(72% 0.07 282);
  --accent: oklch(75% 0.05 185);
  --accent-hover: oklch(80% 0.05 185);

  /* Text colors */
  --text: oklch(92% 0.01 280);
  --text-muted: oklch(65% 0.02 280);

  /* Surface colors - slight purple tint */
  --surface: oklch(12% 0.01 280);
  --surface-elevated: oklch(16% 0.01 280);

  /* Border */
  --border: oklch(100% 0 0 / 0.08);

  /* Semantic colors */
  --destructive: oklch(65% 0.09 25);
  --success: oklch(68% 0.07 145);
  --warning: oklch(75% 0.06 85);

  /* Shadows - more subtle in dark mode */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.2);
  --shadow-card: 0 1px 6px oklch(0% 0 0 / 0.3), 0 1px 2px oklch(0% 0 0 / 0.2);
  --shadow-elevated: 0 10px 28px oklch(0% 0 0 / 0.4), 0 2px 8px oklch(0% 0 0 / 0.3);

  /* Focus ring */
  --ring-brand: oklch(65% 0.07 282 / 0.4);

  /* App-specific gradients (subtler than marketing) */
  --gradient-subtle: none;
  --gradient-cta-app: var(--brand);
  --glow-brand-subtle: transparent;
  --glow-brand-hover: transparent;

  /* App-shell derivatives for dark */
  --brand-wash: oklch(65% 0.07 282 / 0.16);
  --border-strong: oklch(100% 0 0 / 0.18);
  --surface-wash: oklch(12% 0.01 280);
}

/* Custom Serif Typography stack */
.font-display {
  font-family: "Prata", "Georgia", serif;
  letter-spacing: -0.01em;
}

/* Custom premium micro-animations */
.animate-text-hover {
  transition: letter-spacing 0.3s var(--ease-out-expo), color 0.3s ease;
}
.animate-text-hover:hover {
  letter-spacing: -0.03em;
}

.transition-rigid {
  transition: all 150ms var(--ease-out-expo);
}

.transition-brand {
  transition: all 300ms var(--ease-out-expo);
}

/* Graphic Design Gridded Drawing Board background */
.bg-grid {
  background-size: 24px 24px;
  background-image: 
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
}


/* ===== High Contrast Mode (WCAG AAA) ===== */
/* Designed for users who need maximum contrast and clarity */
.high-contrast {
  /* Brand colors - maximum contrast */
  --brand: oklch(45% 0.25 280);
  --brand-hover: oklch(38% 0.25 280);
  --accent: oklch(40% 0.20 180);
  --accent-hover: oklch(35% 0.20 180);

  /* Text colors - pure black for maximum readability */
  --text: oklch(0% 0 0);
  --text-muted: oklch(25% 0.01 280);

  /* Surface colors - pure white background */
  --surface: oklch(100% 0 0);
  --surface-elevated: oklch(100% 0 0);

  /* Border - thicker and more visible */
  --border: oklch(0% 0 0 / 0.25);

  /* Semantic colors - high contrast versions */
  --destructive: oklch(45% 0.25 25);
  --destructive-hover: oklch(40% 0.25 25);
  --success: oklch(40% 0.22 145);
  --warning: oklch(50% 0.20 85);

  /* Shadows - removed for cleaner high contrast look */
  --shadow-sm: none;
  --shadow-card: 0 0 0 2px var(--border);
  --shadow-elevated: 0 0 0 2px var(--border);

  /* Focus ring - extra visible */
  --ring-brand: oklch(45% 0.25 280 / 0.8);

  /* Gradients - disabled for clarity */
  --gradient-subtle: none;
  --gradient-cta-app: var(--brand);
  --glow-brand-subtle: transparent;
  --glow-brand-hover: transparent;

  /* App-shell derivatives for high contrast */
  --brand-wash: oklch(45% 0.25 280 / 0.14);
  --border-strong: oklch(0% 0 0 / 0.5);
  --surface-wash: oklch(100% 0 0);
}

.high-contrast.dark {
  /* Brand colors - bright for dark high contrast */
  --brand: oklch(80% 0.20 280);
  --brand-hover: oklch(85% 0.20 280);
  --accent: oklch(80% 0.18 180);
  --accent-hover: oklch(85% 0.18 180);

  /* Text colors - pure white for maximum readability */
  --text: oklch(100% 0 0);
  --text-muted: oklch(80% 0.01 280);

  /* Surface colors - pure black background */
  --surface: oklch(0% 0 0);
  --surface-elevated: oklch(8% 0.01 280);

  /* Border - bright for visibility */
  --border: oklch(100% 0 0 / 0.35);

  /* Semantic colors - high contrast versions for dark */
  --destructive: oklch(70% 0.22 25);
  --success: oklch(75% 0.20 145);
  --warning: oklch(80% 0.18 85);

  /* Focus ring - extra visible on dark */
  --ring-brand: oklch(80% 0.20 280 / 0.8);

  /* App-shell derivatives for dark high contrast */
  --brand-wash: oklch(80% 0.20 280 / 0.2);
  --border-strong: oklch(100% 0 0 / 0.6);
  --surface-wash: oklch(0% 0 0);
}

/* High contrast mode specific overrides */
.high-contrast .card,
.high-contrast .modal,
.high-contrast .input,
.high-contrast .select,
.high-contrast .btn-secondary {
  border-width: 2px;
}

.high-contrast .image-card,
.high-contrast .video-card {
  border-width: 2px;
}

/* Enhanced focus states for high contrast */
.high-contrast a:focus-visible,
.high-contrast button:focus-visible,
.high-contrast [tabindex]:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  box-shadow: none;
}

/* Remove decorative elements that reduce clarity */
.high-contrast .glass,
.high-contrast .glass-subtle,
.high-contrast .glass-dark {
  background: var(--surface-elevated);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.high-contrast .generation-loading,
.high-contrast .skeleton {
  background: var(--border);
  animation: none;
}

/* Ensure links are clearly distinguishable */
.high-contrast a:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-destructive):not(.btn-ghost):not(.btn-vibrant) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.high-contrast a:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-destructive):not(.btn-ghost):not(.btn-vibrant):hover {
  text-decoration-thickness: 3px;
}

/* Badge visibility improvements */
.high-contrast .badge {
  border: 2px solid currentColor;
}

/* Button visibility improvements */
.high-contrast .btn-primary,
.high-contrast .btn-vibrant {
  font-weight: 600;
}

.high-contrast .btn-ghost {
  border: 2px solid var(--border);
}

/* Toast visibility */
.high-contrast .toast {
  border: 2px solid currentColor;
}

/* ===== Alpine.js cloak ===== */
[x-cloak] {
  display: none !important;
}

/* Fix Tailwind hidden class specificity with modal-overlay */
.hidden.modal-overlay {
  display: none !important;
}

/* ===== Scrollbar Utilities ===== */
/* Hide scrollbar but allow scrolling (mobile horizontal scroll) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ===== Safe Area Insets (iOS notch/home indicator) ===== */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-top {
  padding-top: env(safe-area-inset-top, 0);
}

/* Ensure viewport respects safe areas */
@supports (padding: max(0px)) {
  .safe-area-bottom {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* ===== Mobile Bottom Navigation ===== */
@media (max-width: 640px) {
  /* Bottom nav styling - visible on mobile only */
  nav[aria-label="Main navigation"] {
    backdrop-filter: blur(12px);
    background-color: color-mix(in oklab, var(--surface-elevated) 92%, transparent);
    box-shadow: 0 -1px 0 var(--border), 0 -8px 24px oklch(0% 0 0 / 0.08);
  }

  /* Active state enhancement for bottom nav items */
  nav[aria-label="Main navigation"] a:active,
  nav[aria-label="Main navigation"] button:active {
    transform: scale(0.95);
    transition: transform 100ms ease-out;
  }
}

/* Active state via aria-current (JS-driven) */
nav[aria-label="Main navigation"] a,
nav[aria-label="Main navigation"] button {
  position: relative;
}

nav[aria-label="Main navigation"] a[aria-current="page"],
nav[aria-label="Main navigation"] button[aria-current="page"] {
  color: var(--brand);
}

nav[aria-label="Main navigation"] a[aria-current="page"] svg,
nav[aria-label="Main navigation"] button[aria-current="page"] svg {
  transform: translateY(-1px);
}

nav[aria-label="Main navigation"] a[aria-current="page"]::after,
nav[aria-label="Main navigation"] button[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 16px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 9999px;
  background-color: var(--brand);
  opacity: 0.85;
}

/* Sidebar (vertical) active item — pill treatment, not the top-nav underline. */
nav:not([aria-label="Main navigation"]) a[aria-current="page"],
nav:not([aria-label="Main navigation"]) button[aria-current="page"] {
  background-color: var(--brand-wash);
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

nav:not([aria-label="Main navigation"]) a[aria-current="page"] .sp-nav-badge {
  background-color: var(--brand);
  color: #fff;
}

/* ===== Typography Base ===== */
body {
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Marketing pages use larger text */
.marketing-text {
  font-size: 18px;
}

/* Monospace for technical displays */
.font-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* ===== Buttons ===== */
@layer components {
  :where(.btn-primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--brand);
  color: white;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color 200ms, transform 150ms, box-shadow 200ms;
  cursor: pointer;
  border: none;
  }

  .btn-primary:hover {
  background-color: var(--brand-hover);
  box-shadow: var(--shadow-sm);
  }

  .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  }

  .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  }

  :where(.btn-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--surface-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color 200ms, border-color 200ms, box-shadow 200ms;
  cursor: pointer;
  }

  .btn-secondary:hover {
  background-color: var(--surface);
  border-color: oklch(0% 0 0 / 0.15);
  box-shadow: var(--shadow-sm);
  }

  .btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  }

  :where(.btn-danger) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--destructive);
  color: white;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color 200ms, box-shadow 200ms;
  cursor: pointer;
  border: none;
  }

  :where(.btn-destructive) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--destructive);
  color: white;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color 200ms, box-shadow 200ms;
  cursor: pointer;
  border: none;
  }

  .btn-danger:hover,
  .btn-destructive:hover {
  background-color: var(--destructive-hover);
  }

  .btn-danger:focus-visible,
  .btn-destructive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--destructive);
  }

  .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: transparent;
  color: var(--text-muted);
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: background-color 150ms, color 150ms;
  cursor: pointer;
  border: none;
  }

  .btn-ghost:hover {
  background-color: var(--surface);
  color: var(--text);
  }

  .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;  /* 44px minimum touch target */
  min-height: 2.75rem;
  padding: 0.625rem;
  background-color: transparent;
  color: var(--text-muted);
  border-radius: 0.5rem;
  transition: background-color 150ms, color 150ms;
  cursor: pointer;
  border: none;
  }

  .btn-icon:hover {
  background-color: var(--surface);
  color: var(--text);
  }

  .btn-icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  }

  .btn-square {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    border-radius: 0.625rem;
    flex-shrink: 0;
  }

  /* Small button variant */
  .btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  }

  /* Vibrant CTA button - gradient with subtle glow */
  .btn-vibrant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: var(--gradient-cta-app);
  color: white;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: transform 150ms ease-out, box-shadow 200ms ease-out;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 20px var(--glow-brand-subtle);
  }

  .btn-vibrant:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 30px var(--glow-brand-hover), var(--shadow-elevated);
  }

  .btn-vibrant:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand), 0 0 20px var(--glow-brand-subtle);
  }

  .btn-vibrant:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  }

  .btn-vibrant:disabled:hover {
  transform: none;
  }
}

/* ===== Cards ===== */
.card {
  background-color: var(--surface-elevated);
  border-radius: 0.875rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}

.card-interactive {
  will-change: transform, box-shadow;
}

.card-interactive:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px) translateZ(0);
}

.card-interactive:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand);
}

/* Card with hover glow effect */
.card-glow {
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
  will-change: box-shadow;
}

.card-glow:hover {
  box-shadow: var(--shadow-elevated), 0 0 30px var(--glow-brand-subtle);
}

/* ===== Inputs ===== */
.input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  font-size: 0.9375rem;
  transition: border-color 200ms, box-shadow 200ms;
}

.input::placeholder {
  color: var(--text-muted);
}

.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring-brand);
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

textarea.input {
  resize: vertical;
  min-height: 100px;
}

/* Prompt box textarea should be compact on mobile */
.prompt-box textarea.input {
  min-height: auto;
}

/* ===== Select ===== */
.select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.625rem;
  color: var(--text);
  font-size: 0.9375rem;
  transition: border-color 200ms, box-shadow 200ms;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2386868b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-right: 2.25rem;
}

.select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring-brand);
}

/* ===== Toast Notifications ===== */
.toast {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-elevated);
  font-size: 0.875rem;
  font-weight: 500;
  animation: slide-up 200ms ease-out;
  will-change: transform, opacity;
  transform: translateZ(0); /* Force GPU layer */
}

.toast-success {
  background-color: var(--success);
  color: white;
}

.toast-error {
  background-color: var(--destructive);
  color: white;
}

.toast-info {
  background-color: var(--brand);
  color: white;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 200ms ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: oklch(0% 0 0 / 0.4);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal {
  background: color-mix(in oklab, var(--surface-elevated) 95%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px oklch(0% 0 0 / 0.2), 0 8px 16px oklch(0% 0 0 / 0.1);
  will-change: transform, opacity;
  transform: translateZ(0); /* Force GPU layer */
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Modal overlay - must be higher than prompt-box */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: oklch(0% 0 0 / 0.4);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Dialog element centering – showModal() places the dialog in the top layer;
   the browser centers it automatically when margin is auto. */
dialog[open] {
  margin: auto;
}

dialog::backdrop {
  background-color: oklch(0% 0 0 / 0.5);
  backdrop-filter: blur(4px);
}

/* ===== Gallery Grid (Masonry.js) ===== */
.gallery-grid {
  position: relative; /* Required for Masonry absolute positioning */
}

.gallery-grid > .image-card,
.gallery-grid > .video-card,
.gallery-grid > .image-card-placeholder,
.gallery-grid > .video-card-placeholder {
  width: calc(25% - 12px); /* 4 columns with gap */
  margin-bottom: 1rem;
}

/* ===== Bento Grid Layout (CSS Grid alternative to Masonry) ===== */
.gallery-grid.bento-layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 280px));
  justify-content: center;
  gap: 0.75rem;
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
}

.gallery-grid.bento-layout > .image-card,
.gallery-grid.bento-layout > .video-card,
.gallery-grid.bento-layout > .image-card-placeholder,
.gallery-grid.bento-layout > .video-card-placeholder {
  width: 100%;
  margin-bottom: 0;
  position: relative !important;
  left: auto !important;
  top: auto !important;
}

/* Bento featured items - larger cells */
.gallery-grid.bento-layout > .image-card:nth-child(5n+1),
.gallery-grid.bento-layout > .video-card:nth-child(5n+1) {
  grid-column: span 2;
  grid-row: span 2;
}

/* Bento tall items for portrait images */
.gallery-grid.bento-layout > .image-card.bento-tall,
.gallery-grid.bento-layout > .video-card.bento-tall {
  grid-row: span 2;
}

/* Bento wide items for landscape images */
.gallery-grid.bento-layout > .image-card.bento-wide,
.gallery-grid.bento-layout > .video-card.bento-wide {
  grid-column: span 2;
}

/* Bento large items */
.gallery-grid.bento-layout > .image-card.bento-large,
.gallery-grid.bento-layout > .video-card.bento-large {
  grid-column: span 2;
  grid-row: span 2;
}

/* Bento images fill their cells */
.gallery-grid.bento-layout .image-card img,
.gallery-grid.bento-layout .video-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hide info section in bento layout - images fill entire cell */
.gallery-grid.bento-layout .image-card > div:last-child,
.gallery-grid.bento-layout .video-card > div:last-child {
  display: none;
}

/* Ensure proper overflow on bento cards */
.gallery-grid.bento-layout .image-card,
.gallery-grid.bento-layout .video-card {
  overflow: hidden;
}

.gallery-grid.bento-layout .image-card > div:first-child,
.gallery-grid.bento-layout .video-card > div:first-child {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Bento grid responsive */
@media (max-width: 1280px) {
  .gallery-grid.bento-layout {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 180px;
    gap: 0.75rem;
  }

  .gallery-grid.bento-layout > .image-card:nth-child(5n+1),
  .gallery-grid.bento-layout > .video-card:nth-child(5n+1) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (max-width: 1024px) {
  .gallery-grid.bento-layout {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: 0.625rem;
  }

  .gallery-grid.bento-layout > .image-card:nth-child(5n+1),
  .gallery-grid.bento-layout > .video-card:nth-child(5n+1) {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (max-width: 640px) {
  .gallery-grid.bento-layout {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
    gap: 0.5rem;
  }

  /* Disable featured sizing on mobile */
  .gallery-grid.bento-layout > .image-card:nth-child(5n+1),
  .gallery-grid.bento-layout > .video-card:nth-child(5n+1) {
    grid-column: span 1;
    grid-row: span 1;
  }

  .gallery-grid.bento-layout > .image-card.bento-tall,
  .gallery-grid.bento-layout > .video-card.bento-tall,
  .gallery-grid.bento-layout > .image-card.bento-wide,
  .gallery-grid.bento-layout > .video-card.bento-wide,
  .gallery-grid.bento-layout > .image-card.bento-large,
  .gallery-grid.bento-layout > .video-card.bento-large {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* Infinite scroll trigger in bento layout */
.gallery-grid.bento-layout > [id*="infinite-scroll-trigger"] {
  grid-column: 1 / -1;
  height: auto;
}

/* ===== Large Screen Bento Layout ===== */
@media (min-width: 1536px) {
  .gallery-grid.bento-layout {
    grid-template-columns: repeat(5, minmax(0, 280px));
    grid-auto-rows: 180px;
  }
}

@media (min-width: 1920px) {
  .gallery-grid.bento-layout {
    grid-template-columns: repeat(6, minmax(0, 280px));
    grid-auto-rows: 180px;
  }
}

@media (min-width: 2560px) {
  .gallery-grid.bento-layout {
    grid-template-columns: repeat(8, minmax(0, 280px));
    grid-auto-rows: 180px;
  }
}

/* Infinite scroll trigger - full width Masonry item so it appears at bottom */
.gallery-grid > [id*="infinite-scroll-trigger"] {
  width: 100%;
  margin-bottom: 1rem;
}

/* ===== Large Screen Masonry Layout ===== */
@media (min-width: 1536px) {
  .gallery-grid > .image-card,
  .gallery-grid > .video-card,
  .gallery-grid > .image-card-placeholder,
  .gallery-grid > .video-card-placeholder {
    width: calc(20% - 13px); /* 5 columns */
  }
}

@media (min-width: 1920px) {
  .gallery-grid > .image-card,
  .gallery-grid > .video-card,
  .gallery-grid > .image-card-placeholder,
  .gallery-grid > .video-card-placeholder {
    width: calc(16.666% - 14px); /* 6 columns */
  }
}

@media (min-width: 2560px) {
  .gallery-grid > .image-card,
  .gallery-grid > .video-card,
  .gallery-grid > .image-card-placeholder,
  .gallery-grid > .video-card-placeholder {
    width: calc(12.5% - 14px); /* 8 columns */
  }
}

@media (max-width: 1280px) {
  .gallery-grid > .image-card,
  .gallery-grid > .video-card,
  .gallery-grid > .image-card-placeholder,
  .gallery-grid > .video-card-placeholder {
    width: calc(33.333% - 11px); /* 3 columns */
  }
}

@media (max-width: 1024px) {
  .gallery-grid > .image-card,
  .gallery-grid > .video-card,
  .gallery-grid > .image-card-placeholder,
  .gallery-grid > .video-card-placeholder {
    width: calc(50% - 8px); /* 2 columns */
  }
}

@media (max-width: 640px) {
  .gallery-grid > .image-card,
  .gallery-grid > .video-card,
  .gallery-grid > .image-card-placeholder,
  .gallery-grid > .video-card-placeholder {
    width: 100%; /* 1 column */
  }
}

/* ===== Examples Grid (Masonry.js) ===== */
.examples-grid {
  position: relative; /* Required for Masonry absolute positioning */
}

.examples-grid > .image-card {
  width: calc(25% - 12px); /* 4 columns with gap */
  margin-bottom: 1rem;
}

/* Infinite scroll trigger - full width Masonry item so it appears at bottom */
.examples-grid > [id*="infinite-scroll-trigger"] {
  width: 100%;
  margin-bottom: 1rem;
}

@media (max-width: 1280px) {
  .examples-grid > .image-card {
    width: calc(33.333% - 11px); /* 3 columns */
  }
}

@media (max-width: 1024px) {
  .examples-grid > .image-card {
    width: calc(50% - 8px); /* 2 columns */
  }
}

@media (max-width: 640px) {
  .examples-grid > .image-card {
    width: 100%; /* 1 column */
  }
}

/* ===== Masonry Fallback Layout ===== */
.gallery-grid.masonry-fallback,
.examples-grid.masonry-fallback {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.gallery-grid.masonry-fallback > .image-card,
.gallery-grid.masonry-fallback > .video-card,
.gallery-grid.masonry-fallback > .image-card-placeholder,
.gallery-grid.masonry-fallback > .video-card-placeholder,
.gallery-grid.masonry-fallback > [id*="infinite-scroll-trigger"],
.examples-grid.masonry-fallback > .image-card,
.examples-grid.masonry-fallback > [id*="infinite-scroll-trigger"] {
  width: 100%;
  margin-bottom: 0;
  position: static !important;
  left: auto !important;
  top: auto !important;
}

.gallery-grid.masonry-fallback > [id*="infinite-scroll-trigger"],
.examples-grid.masonry-fallback > [id*="infinite-scroll-trigger"] {
  grid-column: 1 / -1;
}

@media (max-width: 1280px) {
  .gallery-grid.masonry-fallback,
  .examples-grid.masonry-fallback {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .gallery-grid.masonry-fallback,
  .examples-grid.masonry-fallback {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .gallery-grid.masonry-fallback,
  .examples-grid.masonry-fallback {
    grid-template-columns: 1fr;
  }
}

/* ===== Image/Video Cards ===== */
.image-card,
.video-card,
.image-card-placeholder,
.video-card-placeholder {
  position: relative;
  border-radius: 0.75rem;
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
  transform: translateZ(0); /* Force GPU layer for smoother animations */
}

.image-card,
.video-card {
  position: relative;
}

.image-card:hover,
.video-card:hover,
.image-card:focus-within,
.video-card:focus-within {
  box-shadow: var(--shadow-card);
  z-index: 35;
}

.image-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Video cards use aspect ratio containers - don't override h-full class */
.video-card video {
  display: block;
}

.image-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(0% 0 0 / 0.6) 0%, oklch(0% 0 0 / 0.15) 35%, transparent 55%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, visibility 0ms linear 200ms;
  pointer-events: none;
  will-change: opacity;
  border-radius: inherit;
}

.image-card:hover .image-card-overlay,
.image-card:focus-within .image-card-overlay,
.video-card:hover .image-card-overlay,
.video-card:focus-within .image-card-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease-out, visibility 0ms;
  pointer-events: auto;
}

/* Ensure favorite button is above the overlay */
.favorite-btn {
  z-index: 10;
}

/* Selected state for images */
.image-card-selected {
  box-shadow: 0 0 0 2px var(--brand);
}

/* ===== Image Card Aspect Ratios for Examples Grid (Masonry) ===== */
/* These ensure cards have proper height before images load */
/* Scoped to examples-grid only - gallery should preserve original aspect ratios */
.examples-grid .image-card.aspect-16-9 > div:first-child { aspect-ratio: 16 / 9; }
.examples-grid .image-card.aspect-3-2 > div:first-child { aspect-ratio: 3 / 2; }
.examples-grid .image-card.aspect-4-3 > div:first-child { aspect-ratio: 4 / 3; }
.examples-grid .image-card.aspect-3-4 > div:first-child { aspect-ratio: 3 / 4; }
.examples-grid .image-card.aspect-2-3 > div:first-child { aspect-ratio: 2 / 3; }
.examples-grid .image-card.aspect-9-16 > div:first-child { aspect-ratio: 9 / 16; }

/* Default aspect ratio for example cards without specific class */
.examples-grid .image-card:not([class*="aspect-"]) > div:first-child { aspect-ratio: 1 / 1; }

/* Ensure images fill their container in examples grid */
/* Target the image wrapper (nested div), not the outer container */
.examples-grid .image-card > div:first-child > div:first-child {
  overflow: hidden;
}

.examples-grid .image-card > div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery grid - preserve original image aspect ratios */
/* Target the image wrapper (nested div), not the outer container */
.gallery-grid .image-card > div:first-child > div:first-child {
  overflow: hidden;
}

.gallery-grid .image-card > div:first-child img {
  width: 100%;
  height: auto;
}

/* ===== Loading Spinner ===== */
.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton pulse animation for loading states */
.skeleton-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Generation loading gradient overlay */
.generation-loading {
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(65% 0.18 280 / 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  opacity: 0.5;
}

/* ===== Dropzone ===== */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: 0.75rem;
  padding: 2rem;
  text-align: center;
  transition: border-color 200ms, background-color 200ms, box-shadow 200ms;
  cursor: pointer;
}

.dropzone:hover {
  border-color: var(--brand);
  background-color: oklch(65% 0.18 280 / 0.03);
  box-shadow: var(--shadow-sm);
}

.dropzone.dragover {
  border-color: var(--brand);
  background-color: oklch(65% 0.18 280 / 0.05);
  box-shadow: var(--shadow-card);
}

/* ===== Badge ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  background-color: var(--surface);
  color: var(--text-muted);
}

.badge-success {
  background-color: oklch(65% 0.18 145 / 0.1);
  color: var(--success);
}

.badge-error {
  background-color: oklch(60% 0.2 25 / 0.1);
  color: var(--destructive);
}

.badge-pending {
  background-color: oklch(75% 0.15 85 / 0.1);
  color: var(--warning);
}

.badge-brand {
  background-color: oklch(65% 0.18 280 / 0.1);
  color: var(--brand);
}

/* ===== Alert / Message Boxes ===== */
.alert-error {
  background-color: oklch(60% 0.2 25 / 0.08);
  color: var(--destructive);
  border: 1px solid oklch(60% 0.2 25 / 0.2);
}

.dark .alert-error {
  background-color: oklch(65% 0.18 25 / 0.1);
  border-color: oklch(65% 0.18 25 / 0.25);
}

.alert-success {
  background-color: oklch(65% 0.18 145 / 0.08);
  color: var(--success);
  border: 1px solid oklch(65% 0.18 145 / 0.2);
}

.dark .alert-success {
  background-color: oklch(70% 0.16 145 / 0.1);
  border-color: oklch(70% 0.16 145 / 0.25);
}

.alert-warning {
  background-color: oklch(75% 0.15 85 / 0.08);
  color: var(--warning);
  border: 1px solid oklch(75% 0.15 85 / 0.2);
}

.dark .alert-warning {
  background-color: oklch(78% 0.14 85 / 0.1);
  border-color: oklch(78% 0.14 85 / 0.25);
}

/* ===== Glassmorphism Utilities ===== */
.glass {
  background: color-mix(in oklab, var(--surface-elevated) 75%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
}

.glass-subtle {
  background: color-mix(in oklab, var(--surface-elevated) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.glass-dark {
  background: oklch(0% 0 0 / 0.6);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

/* ===== Floating Prompt Box ===== */
.prompt-box {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -4px);
  --prompt-box-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  --prompt-input-height: 44px;
  bottom: var(--prompt-box-bottom);
  width: calc(100% - 2rem);
  max-width: 920px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0.55rem;
  z-index: 40;
  box-sizing: border-box;
  transition: bottom 150ms var(--ease-out-expo), box-shadow 200ms var(--ease-out-expo), transform 200ms var(--ease-out-expo);
  box-shadow: var(--shadow-elevated);
}

@media (max-width: 640px) {
  .prompt-box {
    /* Position above the 64px bottom nav + 8px gap */
    --prompt-box-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    --prompt-input-height: 40px;
    width: calc(100% - 1rem);
    padding: 0.5rem;
    border-radius: 0;
    /* Stronger shadow on mobile for better separation */
    box-shadow: 0 -4px 20px oklch(0% 0 0 / 0.1), var(--shadow-elevated);
  }
  .prompt-box .space-y-3 {
    gap: 0.5rem;
  }
}

@media (max-width: 360px) {
  .prompt-box {
    --prompt-input-height: 36px;
  }
}

.prompt-box form,
.prompt-box form > * {
  min-width: 0;
  max-width: 100%;
}

/* ===== Utility Classes ===== */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 200ms;
}

/* ===== HTMX Loading Indicator ===== */
.htmx-request .htmx-indicator {
  opacity: 1;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in;
}

/* ===== Update Notification Banner ===== */
.update-notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, var(--brand), var(--brand-hover));
  color: white;
  padding: 0.75rem 1rem;
  animation: slideDown 300ms ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.update-notification-content {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.update-notification-btn {
  background: oklch(100% 0 0 / 0.2);
  border: 1px solid oklch(100% 0 0 / 0.3);
  color: white;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms;
}

.update-notification-btn:hover {
  background: oklch(100% 0 0 / 0.3);
}

.update-notification-close {
  background: none;
  border: none;
  color: oklch(100% 0 0 / 0.7);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
  margin-left: 0.5rem;
}

.update-notification-close:hover {
  color: white;
}

/* ===== Lightbox Styles ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: oklch(8% 0.01 280 / 0.98);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.lightbox-presentation {
  background: oklch(0% 0 0);
}

.lightbox-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(to bottom, oklch(0% 0 0 / 0.7), transparent);
  z-index: 10;
}

.lightbox-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: oklch(100% 0 0 / 0.1);
  color: oklch(100% 0 0 / 0.8);
  border: none;
  cursor: pointer;
  transition: background 200ms, color 150ms;
}

.lightbox-btn:hover {
  background: oklch(100% 0 0 / 0.2);
  color: white;
}

.lightbox-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: oklch(0% 0 0 / 0.5);
  color: oklch(100% 0 0 / 0.8);
  border: none;
  cursor: pointer;
  transition: background 200ms, color 150ms;
}

.lightbox-nav:hover {
  background: oklch(0% 0 0 / 0.7);
  color: white;
}

.lightbox-nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand);
}

.lightbox-nav-prev {
  left: 0.5rem;
}

.lightbox-nav-next {
  right: 0.5rem;
}

@media (min-width: 640px) {
  .lightbox-nav {
    width: 3.5rem;
    height: 3.5rem;
  }
  .lightbox-nav-prev {
    left: 1rem;
  }
  .lightbox-nav-next {
    right: 1rem;
  }
}

.lightbox-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 3.5rem 0.5rem 5rem 0.5rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .lightbox-media {
    padding: 4rem 4rem 6rem 4rem;
  }
}

.lightbox-content {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.1);
}

/* Force visible controls on video player against dark background */
video.lightbox-content {
  color-scheme: only light;
}

video.lightbox-content::-webkit-media-controls {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

video.lightbox-content::-webkit-media-controls-panel {
  background: rgba(0, 0, 0, 0.7) !important;
}

video.lightbox-content::-webkit-media-controls-play-button,
video.lightbox-content::-webkit-media-controls-volume-slider,
video.lightbox-content::-webkit-media-controls-mute-button,
video.lightbox-content::-webkit-media-controls-fullscreen-button,
video.lightbox-content::-webkit-media-controls-current-time-display,
video.lightbox-content::-webkit-media-controls-time-remaining-display {
  filter: invert(1) !important;
}

.lightbox-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(to top, oklch(0% 0 0 / 0.8), transparent);
  z-index: 10;
}

.lightbox-presentation .lightbox-media {
  padding: 0;
}

.lightbox-presentation .lightbox-content {
  border-radius: 0;
  max-width: 100vw;
  max-height: 100vh;
  box-shadow: none;
}

/* ===== Focus States (Accessibility) ===== */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Character Card Enhancements ===== */
/* Character card with enhanced hover state */
.card.spotlight-card {
  transition: transform 250ms ease-out, box-shadow 250ms ease-out, border-color 250ms ease-out;
  will-change: transform, box-shadow;
}

.card.spotlight-card:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 12px 40px oklch(0% 0 0 / 0.12), 0 4px 12px oklch(0% 0 0 / 0.08), 0 0 0 1px var(--brand)/20;
  border-color: color-mix(in oklab, var(--brand) 30%, var(--border));
}

/* Character card reference images hover */
.card.spotlight-card .ref-images-sortable img {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.card.spotlight-card:hover .ref-images-sortable img {
  box-shadow: var(--shadow-card);
}

.card.spotlight-card .ref-images-sortable img:hover {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: var(--shadow-elevated);
}

/* Character card menu dropdown with glassmorphism */
.card.spotlight-card [x-show="showMenu"] {
  background: color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* Character card action button hover */
.card.spotlight-card button:hover:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-destructive) {
  background-color: var(--surface);
}

/* ===== Character Card Stack ===== */
.character-card-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.character-card-stack img {
  position: absolute;
  width: 60%;
  height: 60%;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 2px solid var(--surface-elevated);
  box-shadow: var(--shadow-card);
}

.character-card-stack img:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 3;
}

.character-card-stack img:nth-child(2) {
  top: 20%;
  left: 20%;
  z-index: 2;
}

.character-card-stack img:nth-child(3) {
  top: 40%;
  left: 40%;
  z-index: 1;
}

/* ===== Step Indicator ===== */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.step-indicator-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 200ms, color 200ms;
}

.step-indicator-item.active {
  background-color: var(--brand);
  color: white;
}

.step-indicator-item.completed {
  background-color: var(--success);
  color: white;
}

.step-indicator-item.pending {
  background-color: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.step-indicator-line {
  flex: 1;
  height: 2px;
  background-color: var(--border);
}

.step-indicator-line.completed {
  background-color: var(--success);
}

/* ===== Quick Actions (Image Hover) ===== */
.quick-actions {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(0.5rem) translateZ(0);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  will-change: opacity, transform;
}

.image-card:hover .quick-actions {
  opacity: 1;
  transform: translateY(0) translateZ(0);
}

.quick-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: oklch(0% 0 0 / 0.6);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 150ms;
  backdrop-filter: blur(4px);
}

.quick-action-btn:hover {
  background: oklch(0% 0 0 / 0.8);
}

.quick-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand);
}

/* Mobile-friendly action button with 44px+ touch target */
.image-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;  /* 44px minimum for touch targets */
  height: 2.75rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, oklch(0% 0 0) 55%, transparent);
  color: white;
  cursor: pointer;
  transition: background 180ms ease-out, transform 150ms ease-out, box-shadow 180ms ease-out;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid oklch(100% 0 0 / 0.15);
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.2);
}

.image-action-btn:hover {
  background: color-mix(in oklab, oklch(0% 0 0) 70%, transparent);
  transform: scale(1.08);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.3);
}

.image-action-btn:active {
  transform: scale(0.92);
  transition: transform 50ms ease-out;
}

.image-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--brand);
}

/* Image card action dropdown menu */
.image-card .absolute[x-show="moreOpen"] {
  background: color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* ===== Sortable Reference Images ===== */
.ref-images-sortable .sortable-ghost {
  opacity: 0.4;
}

.ref-images-sortable .sortable-chosen {
  transform: scale(1.05);
  box-shadow: var(--shadow-elevated);
}

.ref-images-sortable .sortable-drag {
  opacity: 1;
}

.drag-handle {
  touch-action: none;
}

/* ===== App Scroll Animations ===== */
/* Wrapper class that enables scroll animations for children */
.app-animated .reveal-up {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.app-animated .reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation delays for grid items */
.app-animated .stagger-1 { transition-delay: 0.05s; }
.app-animated .stagger-2 { transition-delay: 0.1s; }
.app-animated .stagger-3 { transition-delay: 0.15s; }
.app-animated .stagger-4 { transition-delay: 0.2s; }
.app-animated .stagger-5 { transition-delay: 0.25s; }
.app-animated .stagger-6 { transition-delay: 0.3s; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .app-animated .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Micro-Interactions ===== */

/* Button press feedback - tactile feel */
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled),
.btn-destructive:active:not(:disabled),
.btn-vibrant:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform 50ms ease-out;
}

.btn-icon:active:not(:disabled),
.btn-ghost:active:not(:disabled) {
  transform: scale(0.92);
  transition: transform 50ms ease-out;
}

/* Enhanced card hover with subtle lift */
.card-interactive:hover {
  transform: translateY(-3px) translateZ(0);
}

.card-interactive:active {
  transform: translateY(-1px) translateZ(0);
  transition: transform 100ms ease-out;
}

/* Image card enhanced hover */
.image-card:hover,
.video-card:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12), 0 4px 12px oklch(0% 0 0 / 0.08);
}

/* Favorite button heart animation */
.favorite-btn {
  transition: transform 150ms ease-out;
}

.favorite-btn:active {
  transform: scale(0.85);
}

.favorite-btn.is-favorited {
  animation: heart-pop 300ms ease-out;
}

@keyframes heart-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Success checkmark draw animation */
@keyframes checkmark-draw {
  0% {
    stroke-dashoffset: 24;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.success-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: checkmark-draw 300ms ease-out forwards;
}

/* Error shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake {
  animation: shake 400ms ease-out;
}

/* Subtle pulse for generating state */
@keyframes gentle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.generating-pulse {
  animation: gentle-pulse 2s ease-in-out infinite;
}

/* Progress bar animation */
@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.progress-bar-indeterminate {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-radius: 9999px;
}

.progress-bar-indeterminate::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 50%;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

/* Quick action buttons slide up */
.quick-actions {
  transform: translateY(8px) translateZ(0);
}

.image-card:hover .quick-actions,
.video-card:hover .quick-actions {
  transform: translateY(0) translateZ(0);
}

/* Dropdown/popover enter animation */
@keyframes dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-enter {
  animation: dropdown-enter 150ms ease-out;
}

/* Toast slide in from bottom */
@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-enter {
  animation: toast-enter 200ms ease-out;
}

/* Input focus glow effect */
.input:focus {
  box-shadow: 0 0 0 3px var(--ring-brand), 0 0 20px oklch(65% 0.18 280 / 0.1);
}

/* Ripple effect for touch feedback */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), var(--brand) 0%, transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: opacity 300ms, transform 300ms;
}

.ripple:active::after {
  opacity: 0.15;
  transform: scale(2);
  transition: opacity 0ms, transform 0ms;
}

/* Character card setup progress indicator */
.setup-progress {
  display: flex;
  gap: 4px;
}

.setup-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background-color 200ms, transform 200ms;
}

.setup-progress-dot.completed {
  background: var(--success);
}

.setup-progress-dot.active {
  background: var(--brand);
  transform: scale(1.25);
}

/* Badge count animation */
@keyframes badge-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.badge-update {
  animation: badge-pop 200ms ease-out;
}

/* Empty state illustration float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.empty-state-float {
  animation: float 3s ease-in-out infinite;
}

/* Skeleton loading with better shimmer */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    oklch(from var(--surface) calc(l + 0.05) c h) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

/* Generation status indicator */
.generation-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.generation-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  animation: gentle-pulse 1.5s ease-in-out infinite;
}

/* ===== Onboarding Step Animations ===== */
@keyframes scale-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.scale-in {
  animation: scale-in 400ms ease-out;
}

/* Step completion celebration */
/* Using hardcoded oklch values for browser compatibility (oklch(from ...) has limited support) */
@keyframes step-complete {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 0 0 oklch(65% 0.18 145);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 8px oklch(65% 0.18 145 / 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 oklch(65% 0.18 145 / 0);
  }
}

.step-complete {
  animation: step-complete 500ms ease-out;
}

/* Onboarding progress bar glow */
@keyframes progress-glow {
  0%, 100% {
    box-shadow: 0 0 8px oklch(65% 0.18 280);
  }
  50% {
    box-shadow: 0 0 16px oklch(65% 0.18 280), 0 0 24px oklch(65% 0.18 280 / 0.3);
  }
}

.progress-glow {
  animation: progress-glow 2s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active,
  .btn-secondary:active,
  .btn-danger:active,
  .btn-destructive:active,
  .btn-vibrant:active,
  .btn-icon:active,
  .btn-ghost:active,
  .card-interactive:hover,
  .card-interactive:active,
  .image-card:hover,
  .video-card:hover,
  .favorite-btn:active {
    transform: none;
  }

  .favorite-btn.is-favorited,
  .success-check,
  .shake,
  .generating-pulse,
  .progress-bar-indeterminate::after,
  .empty-state-float,
  .skeleton,
  .generation-status-dot,
  .badge-update,
  .scale-in,
  .step-complete,
  .progress-glow {
    animation: none;
  }
}