/* OnchainApp Light Grey & Pale Emerald Tokens */
:root {
  --bg-main: #edf3ef;
  --text-dark: #0f172a;
  --text-muted: #64748b;
  --emerald-primary: #15803d;
  --emerald-light: #22c55e;
  --emerald-border: #cadccf;
  --emerald-surface: #f4f8f5;
}

/* Scroll reveal motion */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
              transform .6s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

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

/* Preloader styles */
.loader-screen {
  position: fixed;
  inset: 0;
  background-color: #edf3ef;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.loader-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  pointer-events: none;
}

.loader-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.circular-progress {
  position: relative;
  width: 130px;
  height: 130px;
}

.progress-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circle-bg {
  fill: none;
  stroke: #d4e4d8;
  stroke-width: 8;
}

.circle-bar {
  fill: none;
  stroke: #16a34a;
  stroke-width: 8;
  stroke-dasharray: 314.15;
  stroke-dashoffset: 314.15;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.08s linear;
  filter: drop-shadow(0 2px 8px rgba(22, 163, 74, 0.35));
}

.progress-val {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: #15803d;
  font-weight: bold;
}

.loader-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 15px;
  color: #0f1f17;
  letter-spacing: 2px;
  margin: 6px 0 0;
  text-shadow: 0 1px 4px rgba(22, 163, 74, 0.2);
}

.loader-sub {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: #496353;
  letter-spacing: 1px;
}

/* Whitelist Celebration Toast Notification */
.celebration-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: rgba(15, 31, 23, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(74, 222, 128, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 24px rgba(34, 197, 94, 0.2);
  padding: 14px 24px;
  border-radius: 14px;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  max-width: calc(100vw - 32px);
  width: max-content;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, visibility 0.45s;
}

.celebration-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.toast-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-body {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.toast-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.3;
}

.toast-subtitle {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: #bbf7d0;
  margin-top: 3px;
}

.toast-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #0d1f14;
  background: #4ade80;
  padding: 5px 9px;
  border-radius: 6px;
  font-weight: bold;
  letter-spacing: 0.5px;
  margin-left: 6px;
  flex-shrink: 0;
}

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