/* Portrait frames — shop "Frames" items wrapped around avatar portraits.
   Markup: <span class="<?= cqFrameClass($slug, 'sm'|'md') ?>">…portrait box…</span>
   One modifier per item slug (items.item_type = 'frame'). */

.cq-frame {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
  vertical-align: middle;
}

.cq-frame--sm { padding: 4px; }
.cq-frame--md { padding: 8px; }

/* Corner gems (md only): set --gem / --gem-edge per frame */
.cq-frame--md::before,
.cq-frame--md::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 10px;
  height: 10px;
  background: var(--gem, transparent);
  box-shadow: 0 0 0 2px var(--gem-edge, transparent);
  transform: rotate(45deg);
}
.cq-frame--md::before { top: -5px; left: -5px; }
.cq-frame--md::after { right: -5px; bottom: -5px; }

.cq-frame--frame-oak {
  background: repeating-linear-gradient(90deg, #8a5a2e 0 6px, #74471f 6px 12px);
  box-shadow: 0 0 0 2px #2e1b0c, inset 0 0 0 2px #b07a44;
}

.cq-frame--frame-iron {
  background:
    radial-gradient(circle at 5px 5px, #e3e6ee 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 5px) 5px, #e3e6ee 2px, transparent 2.5px),
    radial-gradient(circle at 5px calc(100% - 5px), #e3e6ee 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #e3e6ee 2px, transparent 2.5px),
    #5b6170;
  box-shadow: 0 0 0 2px #15171d, inset 0 0 0 2px #9aa0ad;
}

.cq-frame--frame-moss {
  --gem: #7DD892;
  --gem-edge: #10240f;
  background: repeating-linear-gradient(45deg, #2f6136 0 4px, #3d7a45 4px 8px);
  box-shadow: 0 0 0 2px #10240f, inset 0 0 0 2px #7DD892;
}

.cq-frame--frame-frost {
  --gem: #e8f4ff;
  --gem-edge: #0f1f3a;
  background: linear-gradient(135deg, #e8f4ff, #8ec5ff 35%, #3a6fc0 70%, #cfe8ff);
  box-shadow: 0 0 0 2px #0f1f3a, inset 0 0 0 2px #e8f4ff, 0 0 14px rgba(95, 164, 255, 0.45);
}

.cq-frame--frame-arcane {
  --gem: #c9d3ff;
  --gem-edge: #121633;
  background: repeating-linear-gradient(90deg, #3a438f 0 2px, #5D73C7 2px 6px);
  box-shadow: 0 0 0 2px #121633, inset 0 0 0 2px #8EA6FF, 0 0 10px rgba(142, 166, 255, 0.4);
  animation: cq-frame-arcane 2.4s ease-in-out infinite;
}

.cq-frame--frame-ember {
  --gem: #F5B83D;
  --gem-edge: #2a0c0c;
  background: linear-gradient(0deg, #5a1f1f, #B44848 45%, #F26B6B 80%, #F5B83D);
  box-shadow: 0 0 0 2px #2a0c0c, inset 0 0 0 2px #ffb08a, 0 -4px 16px rgba(242, 107, 107, 0.45);
}

.cq-frame--frame-dragon {
  --gem: #fff1c9;
  --gem-edge: #2a1a04;
  background:
    radial-gradient(circle at 50% 100%, transparent 3px, #F5B83D 3.5px, #F5B83D 4.5px, transparent 5px) 0 0 / 10px 8px,
    #8a5a12;
  box-shadow: 0 0 0 2px #2a1a04, inset 0 0 0 2px #ffd98a, 0 0 12px rgba(245, 184, 61, 0.4);
  animation: cq-frame-gold 2s ease-in-out infinite;
}

.cq-frame--frame-codex {
  --gem: #EFEBE1;
  --gem-edge: #0E0F15;
  background: linear-gradient(90deg, #F5B83D, #8EA6FF, #7DD892, #F26B6B, #F5B83D);
  background-size: 400% 100%;
  box-shadow: 0 0 0 2px #0E0F15, inset 0 0 0 2px #EFEBE1, 0 0 22px rgba(239, 235, 225, 0.35);
  animation: cq-frame-codex 6s linear infinite;
}

@keyframes cq-frame-arcane {
  50% { box-shadow: 0 0 0 2px #121633, inset 0 0 0 2px #8EA6FF, 0 0 24px rgba(142, 166, 255, 0.7); }
}

@keyframes cq-frame-gold {
  50% { box-shadow: 0 0 0 2px #2a1a04, inset 0 0 0 2px #ffd98a, 0 0 26px rgba(245, 184, 61, 0.75); }
}

@keyframes cq-frame-codex {
  to { background-position: 400% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cq-frame { animation: none !important; }
}