/* Material Design 3 Footer (Monumental Plinth) — Shared across all pages */

.w-full { width: 100%; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

@media (min-width: 768px) {
  .px-8 { padding-left: 4rem; padding-right: 4rem; }
}
.border-t { border-top: 1px solid; }
.border-\[\#d4af37\]\/20 { border-color: rgba(212, 175, 55, 0.2); }
.bg-\[#0a0a0c\] { background-color: #0a0a0c; }
.text-on-surface { color: #e5dfd5; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.opacity-\[0.03\] { opacity: 0.03; }

.font-serif { font-family: Georgia, serif; }
.text-\[80px\] { font-size: 80px; }
.text-\[140px\] { font-size: 140px; }
.tracking-tight { letter-spacing: -0.015em; }
.text-white { color: white; }
.whitespace-nowrap { white-space: nowrap; }
.uppercase { text-transform: uppercase; }

.reticle-grid {
  background-image:
    linear-gradient(to right, rgba(212, 175, 55, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.2;
}

.max-w-3xl { max-width: 48rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.space-y-16 > * + * { margin-top: 4rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.text-center { text-align: center; }
.z-10 { z-index: 10; }

.inline-flex { display: inline-flex; }
.gap-2 { gap: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.rounded-full { border-radius: 9999px; }
.border { border: 1px solid; }
.border-secondary\/30 { border-color: rgba(255, 222, 165, 0.3); }
.bg-secondary\/5 { background-color: rgba(255, 222, 165, 0.05); }
.text-secondary { color: #ffdea5; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }
.text-\[10px\] { font-size: 10px; }
.tracking-\[0.25em\] { letter-spacing: 0.25em; }

.font-headline-display { font-family: Georgia, serif; font-weight: 600; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.italic { font-style: italic; }
.text-primary { color: #ffdea5; }
.leading-relaxed { line-height: 1.625; }

.font-mono { font-family: 'IBM Plex Mono', monospace; }
.text-xs { font-size: 0.75rem; }
.tracking-widest { letter-spacing: 0.1em; }

.text-sm { font-size: 0.875rem; }
.tracking-wider { letter-spacing: 0.05em; }
.text-outline { color: #8d8b8f; }

.hover\:text-primary:hover { color: #ffdea5; }
.transition-colors { transition: color 0.2s ease; }

a { text-decoration: none; }

.border-outline-variant\/40 { border-color: rgba(141, 139, 143, 0.4); }
.pt-12 { padding-top: 3rem; }

img.butterfly-mark {
  width: 2.5rem !important;
  height: 2.5rem !important;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 16px rgba(255, 87, 8, 0.75)) !important;
  background-color: transparent !important;
}

html[data-theme="unbuilt-archive"] img.butterfly-mark {
  background-color: transparent !important;
}

.group:hover .butterfly-mark {
  transform: scale(1.1);
}

.text-\[11px\] { font-size: 11px; }
.max-w-xl { max-width: 36rem; }
.leading-relaxed { line-height: 1.625; }

.inline-flex { display: inline-flex; }
.gap-1\.5 { gap: 0.375rem; }
.border-secondary\/40 { border-color: rgba(255, 222, 165, 0.4); }
.hover\:border-secondary:hover { border-color: #ffdea5; }
.bg-secondary\/10 { background-color: rgba(255, 222, 165, 0.1); }
.hover\:bg-secondary\/20:hover { background-color: rgba(255, 222, 165, 0.2); }
.hover\:text-primary:hover { color: #ffdea5; }
.transition-all { transition: all 0.2s ease; }
.active\:scale-95:active { transform: scale(0.95); }

/* Reveal animation for footer elements */
.reveal-elem {
  opacity: 0;
  transform: translateY(24px);
  animation: reveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.1s;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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