/* Editorial Blog Design System — tokens + custom utilities only.
   All component visuals are Tailwind utility classes in the templates. */

:root {
  --font-display: "Oswald", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --motion-framer-ease: ease-out;
  --motion-tailwind-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-duration-progress: 100ms;
  --motion-duration-toc: 150ms;
  --motion-duration-drawer: 200ms;
  --motion-duration-lightbox-panel: 250ms;
  --motion-duration-default: 300ms;
  --motion-duration-compact: 400ms;
  --motion-duration-detail: 500ms;
  --motion-duration-hero: 600ms;
  --motion-stagger-compact: 80ms;
  --motion-stagger-default: 100ms;
  --motion-stagger-menu: 50ms;
  --ease-out-quart: var(--motion-framer-ease);
  --ease-out-expo: var(--motion-framer-ease);
  --background: 0 0% 100%;
  --foreground: 0 0% 8%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 8%;
  --primary: 0 0% 8%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 8%;
  --muted: 0 0% 92%;
  --muted-foreground: 0 0% 45%;
  --accent: 40 20% 97%;
  --accent-foreground: 0 0% 8%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 88%;
  --input: 0 0% 88%;
  --ring: 0 0% 8%;
  --radius: 0rem;
  --editorial-border: 0 0% 20%;
  --editorial-divider: 0 0% 85%;
  --editorial-highlight: 0 0% 95%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 8%;
  --sidebar-primary: 0 0% 8%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 95%;
  --sidebar-accent-foreground: 0 0% 8%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 8%;
}

html.dark {
  --font-display: "Oswald", sans-serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --motion-framer-ease: ease-out;
  --motion-tailwind-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-duration-progress: 100ms;
  --motion-duration-toc: 150ms;
  --motion-duration-drawer: 200ms;
  --motion-duration-lightbox-panel: 250ms;
  --motion-duration-default: 300ms;
  --motion-duration-compact: 400ms;
  --motion-duration-detail: 500ms;
  --motion-duration-hero: 600ms;
  --motion-stagger-compact: 80ms;
  --motion-stagger-default: 100ms;
  --motion-stagger-menu: 50ms;
  --ease-out-quart: var(--motion-framer-ease);
  --ease-out-expo: var(--motion-framer-ease);
  --background: 0 0% 6%;
  --foreground: 0 0% 95%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 8%;
  --popover-foreground: 0 0% 95%;
  --primary: 0 0% 95%;
  --primary-foreground: 0 0% 8%;
  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 95%;
  --muted: 0 0% 18%;
  --muted-foreground: 0 0% 60%;
  --accent: 0 0% 14%;
  --accent-foreground: 0 0% 95%;
  --destructive: 0 62% 30%;
  --destructive-foreground: 0 0% 95%;
  --border: 0 0% 20%;
  --input: 0 0% 20%;
  --ring: 0 0% 80%;
  --editorial-border: 0 0% 80%;
  --editorial-divider: 0 0% 25%;
  --editorial-highlight: 0 0% 12%;
  --sidebar-background: 0 0% 8%;
  --sidebar-foreground: 0 0% 95%;
  --sidebar-primary: 0 0% 95%;
  --sidebar-primary-foreground: 0 0% 8%;
  --sidebar-accent: 0 0% 14%;
  --sidebar-accent-foreground: 0 0% 95%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 0 0% 80%;
}

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

[hidden] {
  display: none !important;
}

.theme-toggle-button {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: hsl(var(--foreground));
  transition:
    background-color var(--motion-duration-drawer) var(--motion-tailwind-ease),
    border-color var(--motion-duration-drawer) var(--motion-tailwind-ease),
    color var(--motion-duration-drawer) var(--motion-tailwind-ease);
}

.theme-toggle-button:hover {
  background: hsl(var(--secondary));
}

.theme-toggle-button:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.theme-toggle-button svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

[data-theme-toggle] .sun {
  display: none !important;
}

[data-theme-toggle] .moon {
  display: inline-flex !important;
}

html.dark [data-theme-toggle] .sun {
  display: inline-flex !important;
}

html.dark [data-theme-toggle] .moon {
  display: none !important;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { transition: color var(--motion-duration-drawer) var(--motion-tailwind-ease); }

::selection {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}

/* Custom component-level utility classes (mirror React index.css @layer components) */
.section-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}

.display-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.05em;
}
@media (min-width: 640px) { .display-heading { font-size: 3rem; } }
@media (min-width: 768px) { .display-heading { font-size: 3.75rem; } }
@media (min-width: 1024px) { .display-heading { font-size: 4.5rem; } }

.display-xl {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 5rem;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 4rem;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.display-md {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 3.3rem;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.display-sm {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 2.4rem;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.subheading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
@media (min-width: 640px) { .subheading { font-size: 1.5rem; } }

.body-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

.editorial-divider {
  width: 100%;
  height: 1px;
  background: hsl(var(--border));
}

.editorial-card {
  transition: background-color var(--motion-duration-default) var(--motion-tailwind-ease), color var(--motion-duration-default) var(--motion-tailwind-ease), opacity var(--motion-duration-default) var(--motion-framer-ease), transform var(--motion-duration-default) var(--motion-framer-ease);
}
.editorial-card:hover { background: hsl(var(--secondary)); }

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .editorial-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .editorial-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Reveal-on-scroll (IntersectionObserver in blog-studio.js) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--motion-duration-detail) var(--motion-framer-ease), transform var(--motion-duration-detail) var(--motion-framer-ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal.stagger-1 { transition-delay: calc(var(--motion-stagger-default) * 1); }
.reveal.stagger-2 { transition-delay: calc(var(--motion-stagger-default) * 2); }
.reveal.stagger-3 { transition-delay: calc(var(--motion-stagger-default) * 3); }
.reveal.stagger-4 { transition-delay: calc(var(--motion-stagger-default) * 4); }
.reveal.stagger-5 { transition-delay: calc(var(--motion-stagger-default) * 5); }
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

.post-list > .reveal {
  transition-duration: var(--motion-duration-compact);
}
.post-list > .reveal:nth-child(1) { transition-delay: calc(var(--motion-stagger-compact) * 0); }
.post-list > .reveal:nth-child(2) { transition-delay: calc(var(--motion-stagger-compact) * 1); }
.post-list > .reveal:nth-child(3) { transition-delay: calc(var(--motion-stagger-compact) * 2); }
.post-list > .reveal:nth-child(4) { transition-delay: calc(var(--motion-stagger-compact) * 3); }
.post-list > .reveal:nth-child(5) { transition-delay: calc(var(--motion-stagger-compact) * 4); }
.post-list > .reveal:nth-child(6) { transition-delay: calc(var(--motion-stagger-compact) * 5); }
.post-list > .reveal:nth-child(7) { transition-delay: calc(var(--motion-stagger-compact) * 6); }
.post-list > .reveal:nth-child(8) { transition-delay: calc(var(--motion-stagger-compact) * 7); }
.post-list > .reveal:nth-child(9) { transition-delay: calc(var(--motion-stagger-compact) * 8); }
.post-list > .reveal:nth-child(10) { transition-delay: calc(var(--motion-stagger-compact) * 9); }
.post-list > .reveal:nth-child(11) { transition-delay: calc(var(--motion-stagger-compact) * 10); }
.post-list > .reveal:nth-child(12) { transition-delay: calc(var(--motion-stagger-compact) * 11); }
.featured-post > .reveal {
  transition-duration: var(--motion-duration-detail);
  transition-delay: 0ms;
}
.public-stats .reveal,
.reveal.motion-duration-300 {
  transition-duration: var(--motion-duration-default);
}
.reveal.motion-duration-600 {
  transition-duration: var(--motion-duration-hero);
}

@keyframes motion-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motion-fade-down {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motion-toc-nav {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motion-fade-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes motion-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes motion-menu-open {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 420px; }
}

@keyframes motion-sidebar-in {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes motion-lightbox-panel-next {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes motion-lightbox-panel-prev {
  from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

.motion-fade-up {
  opacity: 0;
  animation: motion-fade-up var(--motion-duration-hero) var(--motion-framer-ease) forwards;
}

.motion-fade-down {
  opacity: 0;
  animation: motion-fade-down var(--motion-duration-compact) var(--motion-framer-ease) forwards;
}

.motion-fade-left {
  opacity: 0;
  animation: motion-fade-left var(--motion-duration-detail) var(--motion-framer-ease) forwards;
}

.motion-scale-in {
  opacity: 0;
  animation: motion-scale-in var(--motion-duration-compact) var(--motion-framer-ease) forwards;
}

.motion-duration-300 {
  animation-duration: var(--motion-duration-default);
}

.motion-duration-500 {
  animation-duration: var(--motion-duration-detail);
}

.interactive-scale {
  transform: translateZ(0);
  transition: transform var(--motion-duration-default) var(--motion-framer-ease), opacity var(--motion-duration-default) var(--motion-framer-ease), background-color var(--motion-duration-default) var(--motion-tailwind-ease), color var(--motion-duration-default) var(--motion-tailwind-ease), border-color var(--motion-duration-default) var(--motion-tailwind-ease), box-shadow var(--motion-duration-default) var(--motion-tailwind-ease);
}

.interactive-scale:hover { transform: scale(1.02); }
.interactive-scale:active { transform: scale(0.98); }

.admin-sidebar-motion {
  animation: motion-sidebar-in var(--motion-duration-default) var(--motion-framer-ease) both;
}

.admin-logo-motion,
.admin-nav-motion,
.admin-topbar-motion,
.admin-title-motion,
.admin-content-motion,
.auth-motion-card {
  opacity: 0;
  animation: motion-fade-up var(--motion-duration-default) var(--motion-framer-ease) forwards;
}

.admin-logo-motion,
.admin-nav-motion {
  animation-name: motion-fade-left;
}

.admin-title-motion {
  animation-name: motion-fade-down;
}

.admin-content-motion {
  animation-duration: var(--motion-duration-default);
}

.auth-motion-card {
  animation-duration: var(--motion-duration-detail);
}

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

/* Mobile menu drawer (used by data-mobile-menu/-toggle) */
[data-mobile-menu].is-open {
  display: flex !important;
  animation: motion-menu-open var(--motion-duration-drawer) var(--motion-framer-ease) both;
}

[data-mobile-menu].is-open a {
  opacity: 0;
  animation: motion-fade-left var(--motion-duration-default) var(--motion-framer-ease) forwards;
}

[data-mobile-menu].is-open a:nth-child(1) { animation-delay: calc(var(--motion-stagger-menu) * 0); }
[data-mobile-menu].is-open a:nth-child(2) { animation-delay: calc(var(--motion-stagger-menu) * 1); }
[data-mobile-menu].is-open a:nth-child(3) { animation-delay: calc(var(--motion-stagger-menu) * 2); }
[data-mobile-menu].is-open a:nth-child(4) { animation-delay: calc(var(--motion-stagger-menu) * 3); }

/* Article detail reading aids */
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 2px;
  background: transparent;
  pointer-events: none;
}

.reading-progress-fill {
  width: 0%;
  height: 100%;
  background: hsl(var(--foreground));
  transform-origin: left center;
  transition: width var(--motion-duration-progress) var(--motion-framer-ease);
}

.post-toc {
  position: fixed;
  top: 5rem;
  right: 1rem;
  z-index: 40;
  pointer-events: none;
}

@media (min-width: 768px) {
  .post-toc { right: 2rem; }
}

@media (min-width: 1024px) {
  .post-toc {
    top: 6rem;
    right: 3rem;
  }
}

@media (min-width: 1280px) {
  .post-toc { right: 21rem; }
}

.post-toc-panel {
  width: 240px;
  max-width: calc(100vw - 2rem);
  pointer-events: auto;
}

.post-toc-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.4;
  transition: opacity var(--motion-duration-toc) var(--motion-tailwind-ease);
}

.post-toc-panel:hover .post-toc-summary,
.post-toc.is-open .post-toc-summary {
  opacity: 1;
}

.post-toc-current {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.375rem 0;
  text-align: left;
}

.post-toc-current [data-toc-active-index],
.post-toc-restore span,
.post-toc-link-index {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.625rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}

.post-toc-current [data-toc-active-title] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.75rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.post-toc-collapse {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  color: hsl(var(--muted-foreground));
  transition: color var(--motion-duration-toc) var(--motion-tailwind-ease);
}

.post-toc-collapse:hover { color: hsl(var(--foreground)); }

.post-toc-divider {
  height: 1px;
  background: hsl(var(--foreground));
  opacity: 0.3;
  transition: opacity var(--motion-duration-toc) var(--motion-tailwind-ease);
}

.post-toc-panel:hover .post-toc-divider,
.post-toc.is-open .post-toc-divider {
  opacity: 1;
}

.post-toc-nav {
  max-height: 60vh;
  margin-top: 0.5rem;
  overflow-y: auto;
  animation: motion-toc-nav var(--motion-duration-toc) var(--motion-framer-ease) both;
}

.post-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-toc-link {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.375rem 0;
  text-align: left;
  color: hsl(var(--muted-foreground));
  transition: color var(--motion-duration-toc) var(--motion-tailwind-ease);
}

.post-toc-link:hover,
.post-toc-link.is-active {
  color: hsl(var(--foreground));
}

.post-toc-link.is-level-3 {
  padding-left: 1.5rem;
}

.post-toc-link-index {
  width: 1.5rem;
}

.post-toc-link-text {
  font-size: 0.75rem;
  line-height: 1.35;
}

.post-toc-link.is-active .post-toc-link-text {
  font-weight: 600;
}

.post-toc-restore {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  color: hsl(var(--muted-foreground) / 0.6);
  transition: color var(--motion-duration-toc) var(--motion-tailwind-ease);
}

.post-toc-restore:hover {
  color: hsl(var(--foreground));
}

.post-toc.is-collapsed .post-toc-panel {
  display: none;
}

.post-toc.is-collapsed .post-toc-restore {
  display: inline-flex;
}

/* Admin markdown preview */
.admin-markdown-editor {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.admin-markdown-mode {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(5.75rem, 1fr));
  border: 1px solid hsl(var(--border));
}

.admin-markdown-mode button {
  min-height: 2.25rem;
  padding: 0 0.875rem;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  transition: background-color 160ms var(--motion-framer-ease), color 160ms var(--motion-framer-ease);
}

.admin-markdown-mode button + button {
  border-left: 1px solid hsl(var(--border));
}

.admin-markdown-mode button:hover,
.admin-markdown-mode button:focus-visible {
  color: hsl(var(--foreground));
  background: hsl(var(--secondary));
  outline: none;
}

.admin-markdown-mode button.is-active {
  color: hsl(var(--background));
  background: hsl(var(--foreground));
}

.admin-markdown-toolbar[hidden],
.admin-markdown-source[hidden],
.admin-markdown-preview[hidden] {
  display: none;
}

.admin-markdown-source {
  width: 100%;
  min-height: 34rem;
}

.admin-markdown-preview {
  width: 100%;
  min-height: 34rem;
  max-width: none;
  padding: 1.25rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  overflow-x: auto;
}

.admin-markdown-preview.prose {
  font-size: 0.98rem;
  line-height: 1.68;
}

.admin-markdown-preview.prose h1,
.admin-markdown-preview.prose h2,
.admin-markdown-preview.prose h3,
.admin-markdown-preview.prose h4 {
  max-width: 46rem;
}

.admin-markdown-preview.prose p,
.admin-markdown-preview.prose ul,
.admin-markdown-preview.prose ol,
.admin-markdown-preview.prose blockquote {
  max-width: 48rem;
}

.admin-markdown-preview.prose img {
  max-height: 28rem;
  object-fit: contain;
}

.admin-markdown-empty {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

/* Line clamp (for excerpt) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Markdown prose */
.prose {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.75;
  color: hsl(var(--foreground));
  max-width: 65ch;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display);
  margin-top: 2em;
  margin-bottom: 0.6em;
  line-height: 1.2;
  scroll-margin-top: 6rem;
}
.prose h1 { font-size: 2rem; }
.prose h2 { font-size: 1.625rem; }
.prose h3 { font-size: 1.25rem; }
.prose p { margin: 0 0 1.25em; }
.prose ul, .prose ol { margin: 0 0 1.25em 1.5em; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote {
  border-left: 3px solid hsl(var(--foreground));
  padding-left: 1rem;
  margin: 1.5em 0;
  color: hsl(var(--muted-foreground));
  font-style: italic;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  background: hsl(var(--secondary));
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}
.prose pre {
  background: hsl(var(--secondary));
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: 0.95em;
}
.prose pre code { background: transparent; padding: 0; }
.prose a {
  color: hsl(var(--foreground));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em 0;
}
.prose hr {
  border: 0;
  border-top: 1px solid hsl(var(--border));
  margin: 2em 0;
}

/* Hamburger close-state icon swap */
.mobile-menu-toggle .menu-close { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .menu-open { display: none; }
.mobile-menu-toggle[aria-expanded="true"] .menu-close { display: inline-flex; }

[data-gallery-lightbox]:not([hidden]) {
  display: flex;
}

[data-gallery-lightbox] {
  opacity: 0;
  transition: opacity var(--motion-duration-default) var(--motion-framer-ease);
}

[data-gallery-lightbox].is-open {
  opacity: 1;
}

[data-lightbox-panel] {
  opacity: 0;
  transform: translateX(100px);
}

[data-gallery-lightbox].is-open [data-lightbox-panel] {
  animation: motion-lightbox-panel-next var(--motion-duration-lightbox-panel) var(--motion-framer-ease) forwards;
}

[data-gallery-lightbox].is-open.is-prev [data-lightbox-panel] {
  animation-name: motion-lightbox-panel-prev;
}

[data-gallery-card] {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--motion-duration-default) var(--motion-framer-ease), transform var(--motion-duration-default) var(--motion-framer-ease);
}

[data-gallery-card].is-gallery-visible {
  opacity: 1;
  transform: scale(1);
}

@media (scripting: none) {
  [data-gallery-card] {
    opacity: 1;
    transform: none;
  }
}

[data-gallery-card]:not([hidden]):hover img {
  transform: scale(1.05);
}

[data-gallery-folder] {
  transition: transform var(--motion-duration-default) var(--motion-framer-ease);
}

[data-gallery-folder]:hover { transform: scale(1.02); }
[data-gallery-folder]:active { transform: scale(0.98); }

[data-gallery-filter].active {
  background: hsl(var(--foreground));
  color: hsl(var(--background));
}

[data-admin-sidebar-overlay].is-open {
  animation: motion-overlay-in var(--motion-duration-drawer) var(--motion-framer-ease) both;
}

@media (max-width: 1023px) {
  .admin-sidebar-motion {
    animation: none;
  }

  [data-admin-sidebar] {
    display: block !important;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    transition: opacity var(--motion-duration-default) var(--motion-framer-ease), transform var(--motion-duration-default) var(--motion-framer-ease);
  }

  [data-admin-sidebar].is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
}

.lightbox-open {
  overflow: hidden;
}