/* ── Grain overlay ───────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.038;
}

/* ── Scroll reveal ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }

/* ── Button press (page-specific types) ─── */
.btn-discord:active  { transform: translateY(2px); box-shadow: 0 2px 0 #3b44c0, 0 4px 10px rgba(88,101,242,0.2); transition: transform 0.06s linear, box-shadow 0.06s linear; }
.btn-sm-ghost:active,
.btn-ghost-light:active,
.btn-ghost-dark:active,
.btn-rules:active    { transform: translateY(2px); transition: transform 0.06s linear; }

/* ── Fade-up entrance (hero elements) ───── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fade-up.d1 { animation-delay: 0.14s; }
.fade-up.d2 { animation-delay: 0.28s; }
.fade-up.d3 { animation-delay: 0.42s; }
.fade-up.d4 { animation-delay: 0.56s; }