/* Mechanics Page Specific Styles - keep minimal and complementary to base.css */
.hero {
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 60%);
  width: 100%;
  overflow: hidden;
}

.hero .card figure img,
#interfejs .card figure img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* Table of contents styling */
.toc .toc-list a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-gray-800);
  max-width: 100%;
  word-wrap: break-word;
}
.toc .toc-list a:hover {
  background: var(--color-bg-tertiary);
}

@media (max-width: 640px) {
  .toc .toc-list a {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
  }
}

/* Subtle reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-slow) var(--ease-out), transform var(--transition-slow) var(--ease-out);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}