/**
 * Decorations.css - Neo-Brutalism 装饰性元素集合
 * 用于为页面添加各种装饰性视觉元素
 */

/* ========================================
   基础贴纸样式
   ======================================== */
.nb-sticker {
  position: absolute;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  font-weight: 900;
  border: var(--border-width) solid var(--ink);
  background: var(--accent-yellow);
  box-shadow: 4px 4px 0 var(--ink);
  z-index: 3;
  user-select: none;
}

/* 贴纸位置变体 */
.sticker-1 { 
  top: 10px; 
  left: -20px; 
  transform: rotate(-15deg); 
  background: var(--accent-yellow); 
}

.sticker-2 { 
  bottom: 2rem;
  right: 20px; 
  transform: rotate(10deg); 
  background: var(--accent-pink);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sticker-3 {
  top: 50%;
  right: -15px;
  transform: rotate(5deg);
  background: var(--accent-teal);
}

.sticker-4 {
  bottom: 10px;
  left: 30px;
  transform: rotate(-8deg);
  background: var(--primary);
}

/* ========================================
   圆形贴纸
   ======================================== */
.nb-sticker-circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: var(--border-width) solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 900;
  z-index: 3;
  user-select: none;
}

.nb-sticker-circle.small { width: 40px; height: 40px; font-size: 1rem; }
.nb-sticker-circle.large { width: 70px; height: 70px; font-size: 1.75rem; }

.nb-sticker-circle.yellow { background: var(--accent-yellow); }
.nb-sticker-circle.pink { background: var(--accent-pink); }
.nb-sticker-circle.teal { background: var(--accent-teal); }
.nb-sticker-circle.red { background: var(--primary); }

/* ========================================
   方形标签
   ======================================== */
.nb-sticker-tag {
  position: absolute;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: var(--border-width) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 3;
  user-select: none;
}

.nb-sticker-tag.yellow { background: var(--accent-yellow); }
.nb-sticker-tag.pink { background: var(--accent-pink); }
.nb-sticker-tag.teal { background: var(--accent-teal); }
.nb-sticker-tag.red { background: var(--primary); }

/* ========================================
   装饰性条纹
   ======================================== */
.nb-stripe {
  position: absolute;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0px,
    var(--ink) 10px,
    var(--accent-yellow) 10px,
    var(--accent-yellow) 20px
  );
  border: 2px solid var(--ink);
  z-index: 2;
}

.nb-stripe.horizontal { width: 100px; }
.nb-stripe.vertical { 
  width: 8px; 
  height: 100px;
  background: repeating-linear-gradient(
    0deg,
    var(--ink) 0px,
    var(--ink) 10px,
    var(--accent-yellow) 10px,
    var(--accent-yellow) 20px
  );
}

/* ========================================
   装饰性圆点
   ======================================== */
.nb-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  z-index: 2;
}

.nb-dot.small { width: 8px; height: 8px; }
.nb-dot.large { width: 20px; height: 20px; }

.nb-dot.yellow { background: var(--accent-yellow); border: 2px solid var(--ink); }
.nb-dot.pink { background: var(--accent-pink); border: 2px solid var(--ink); }
.nb-dot.teal { background: var(--accent-teal); border: 2px solid var(--ink); }
.nb-dot.red { background: var(--primary); border: 2px solid var(--ink); }

/* 圆点组 */
.nb-dots {
  position: absolute;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.nb-dots.vertical { flex-direction: column; }

/* ========================================
   装饰性十字
   ======================================== */
.nb-cross {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 2;
}

.nb-cross::before,
.nb-cross::after {
  content: '';
  position: absolute;
  background: var(--ink);
}

.nb-cross::before {
  width: 100%;
  height: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.nb-cross::after {
  width: 4px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.nb-cross.small { width: 16px; height: 16px; }
.nb-cross.large { width: 36px; height: 36px; }

/* ========================================
   装饰性箭头
   ======================================== */
.nb-arrow {
  position: absolute;
  font-size: 2rem;
  font-weight: 900;
  color: var(--ink);
  z-index: 2;
  user-select: none;
}

.nb-arrow.up::after { content: '↑'; }
.nb-arrow.down::after { content: '↓'; }
.nb-arrow.left::after { content: '←'; }
.nb-arrow.right::after { content: '→'; }

/* ========================================
   装饰性波浪线
   ======================================== */
.nb-wave {
  position: absolute;
  width: 100px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10 Q 12.5 0, 25 10 T 50 10 T 75 10 T 100 10' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") repeat-x;
  z-index: 2;
}

/* ========================================
   装饰性星星
   ======================================== */
.nb-star {
  position: absolute;
  font-size: 1.5rem;
  z-index: 2;
  user-select: none;
}

.nb-star::after { content: '★'; }
.nb-star.outline::after { content: '☆'; }
.nb-star.small { font-size: 1rem; }
.nb-star.large { font-size: 2.5rem; }

.nb-star.yellow { color: var(--accent-yellow); -webkit-text-stroke: 1px var(--ink); }
.nb-star.pink { color: var(--accent-pink); -webkit-text-stroke: 1px var(--ink); }
.nb-star.teal { color: var(--accent-teal); -webkit-text-stroke: 1px var(--ink); }

/* ========================================
   装饰性闪电
   ======================================== */
.nb-bolt {
  position: absolute;
  font-size: 2rem;
  z-index: 2;
  user-select: none;
}

.nb-bolt::after { content: '⚡'; }
.nb-bolt.small { font-size: 1.25rem; }
.nb-bolt.large { font-size: 3rem; }

/* ========================================
   装饰性角标
   ======================================== */
.nb-corner {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 2;
}

.nb-corner.top-left {
  top: 0;
  left: 0;
  border-top: 40px solid var(--accent-yellow);
  border-right: 40px solid transparent;
}

.nb-corner.top-right {
  top: 0;
  right: 0;
  border-top: 40px solid var(--accent-yellow);
  border-left: 40px solid transparent;
}

.nb-corner.bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 40px solid var(--accent-yellow);
  border-right: 40px solid transparent;
}

.nb-corner.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 40px solid var(--accent-yellow);
  border-left: 40px solid transparent;
}

/* ========================================
   动画效果
   ======================================== */
.nb-float {
  animation: nb-float 3s ease-in-out infinite;
}

@keyframes nb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.nb-pulse {
  animation: nb-pulse 2s ease-in-out infinite;
}

@keyframes nb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.nb-wiggle {
  animation: nb-wiggle 1s ease-in-out infinite;
}

@keyframes nb-wiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.nb-spin {
  animation: nb-spin 4s linear infinite;
}

@keyframes nb-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}