:root {
  --bg-basalt: #0f1113;
  --card-basalt: #16181a;
  --moss-accent: #324233;
  --glacial-ice: #a2b9bc;
}

* {
  box-sizing: border-box;
}

::selection {
  background-color: #324233;
  color: #e1ebec;
}

body {
  background-color: #0f1113;
  color: #d5dbe0;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.volcanic-grain {
  background-image: radial-gradient(rgba(162, 185, 188, 0.04) 1px, transparent 0);
  background-size: 28px 28px;
}

.basalt-card {
  background: linear-gradient(160deg, rgba(22, 24, 26, 0.86) 0%, rgba(15, 17, 19, 0.94) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(162, 185, 188, 0.08);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.basalt-card:hover {
  border-color: rgba(92, 120, 94, 0.45);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 28px -4px rgba(50, 66, 51, 0.35);
  transform: translateY(-4px);
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #0a0b0d;
}
::-webkit-scrollbar-thumb {
  background: #282c30;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #435844;
}

@keyframes pulseLine {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

.animate-scroll-line {
  animation: pulseLine 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.topo-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q 30 5, 60 20 T 120 20 M0 60 Q 40 40, 80 60 T 120 60 M0 100 Q 35 85, 70 100 T 120 100' fill='none' stroke='rgba(162,185,188,0.03)' stroke-width='1'/%3E%3C/svg%3E");
}