@import url("can.css");

.canvas-box { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

.mural-xl { font-size: clamp(32px, 5.4vw, 60px); font-weight: 900; line-height: 1.04; color: var(--paper); letter-spacing: -0.02em; text-transform: uppercase; }
.mural-lg { font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.15; color: var(--paper); text-transform: uppercase; }
.stencil-text { font-size: 18px; color: var(--paper-dim); max-width: 640px; }
.drip { color: var(--volt); }

.spray-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 30px; border-radius: var(--edge-sm); font-weight: 800; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.03em;
  transition: transform var(--tag-fast) ease, background var(--tag-fast) ease;
  white-space: nowrap;
}
.spray-solid {
  background: var(--volt); color: var(--ink);
}
.spray-solid:hover { transform: translateY(-2px); background: var(--volt-dim); }
.spray-line {
  background: transparent; border: 2px solid var(--paper); color: var(--paper);
}
.spray-line:hover { border-color: var(--volt); color: var(--volt); }
.spray-full { width: 100%; }
.spray-big { padding: 19px 34px; font-size: 16px; }

.fade-in-spray { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in-spray.tagged { opacity: 1; transform: none; }