/* ============================================================
   NO PERRY — frames.css
   Four frame families: minor, war, relic, avalon
   GPU-friendly: borders, shadows, opacity, transform
   ============================================================ */

.np-frame {
  --frame-ink: var(--gold-aged);
  --frame-glow: rgba(201,162,39,0.18);
  position: relative;
}
.np-frame::before,
.np-frame::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 3;
  border-style: solid;
  border-color: var(--frame-ink);
  opacity: 0.55;
  transition: opacity var(--transition-med), border-color var(--transition-med);
}
.np-frame::before {
  top: 0; left: 0;
  border-width: 1px 0 0 1px;
}
.np-frame::after {
  bottom: 0; right: 0;
  border-width: 0 1px 1px 0;
}
.np-frame:hover::before,
.np-frame:hover::after {
  opacity: 1;
}

/* --- 1. Minor Frame --- */
.frame-minor {
  --frame-ink: rgba(201,162,39,0.55);
  border: 1px solid rgba(139,105,20,0.28);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,0.05);
}
.frame-minor::before,
.frame-minor::after {
  width: 10px;
  height: 10px;
}

/* --- 2. War Frame --- */
.frame-war {
  --frame-ink: rgba(192,57,43,0.7);
  border: 1px solid rgba(192,57,43,0.32);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow:
    inset 0 0 0 1px rgba(139,105,20,0.12),
    0 12px 28px rgba(0,0,0,0.28);
}
.frame-war::before {
  width: 18px;
  height: 18px;
  border-color: rgba(201,162,39,0.45);
}
.frame-war::after {
  width: 18px;
  height: 18px;
  border-color: rgba(192,57,43,0.55);
}
.frame-war:hover {
  box-shadow:
    inset 0 0 0 1px rgba(201,162,39,0.18),
    0 14px 32px rgba(0,0,0,0.35);
}

.war-room-inner.frame-war {
  clip-path: none;
}

.member-card.np-frame::before {
  top: 5px; left: 5px;
}
.member-card.np-frame::after {
  bottom: 5px; right: 5px;
}

/* --- 3. Relic Frame --- */
.frame-relic {
  --frame-ink: rgba(201,162,39,0.55);
  border: 1px solid rgba(139,105,20,0.4);
  box-shadow:
    inset 0 0 0 1px rgba(232,197,71,0.08),
    inset 0 0 24px rgba(139,105,20,0.06),
    0 10px 28px rgba(0,0,0,0.3);
  background-image:
    linear-gradient(180deg, rgba(232,208,160,0.03), transparent 28%);
}
.frame-relic::before,
.frame-relic::after {
  width: 18px;
  height: 18px;
}

/* --- 4. Avalon Frame --- */
.frame-avalon {
  --frame-ink: rgba(77,217,208,0.55);
  border: 1px solid rgba(77,217,208,0.28);
  box-shadow:
    inset 0 0 0 1px rgba(126,202,192,0.08),
    0 0 22px rgba(77,217,208,0.06);
}
.frame-avalon::before,
.frame-avalon::after {
  width: 14px;
  height: 14px;
}
.frame-avalon:hover {
  border-color: rgba(77,217,208,0.5);
  box-shadow:
    inset 0 0 0 1px rgba(126,202,192,0.14),
    0 0 28px rgba(77,217,208,0.12);
}

/* --- CTA metallic edge (pills; no corners) --- */
.frame-cta {
  box-shadow:
    inset 0 1px 0 rgba(255,236,180,0.35),
    0 0 0 1px rgba(139,105,20,0.35),
    var(--shadow-gold);
}
.btn-ghost.frame-cta {
  box-shadow: inset 0 0 0 1px rgba(201,162,39,0.18);
}
.btn-ghost.frame-cta:hover {
  box-shadow: inset 0 0 0 1px rgba(201,162,39,0.4), 0 0 16px rgba(201,162,39,0.12);
}

/* --- Section heading mark --- */
.section-header .divider-gold,
.guild-header .divider-gold,
.avalon-header .divider-gold,
.war-room-inner .divider-gold {
  position: relative;
  overflow: visible;
}
.section-header .divider-gold::before,
.guild-header .divider-gold::before,
.avalon-header .divider-gold::before,
.war-room-inner .divider-gold::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
  opacity: 0.7;
  box-shadow: 0 0 8px rgba(201,162,39,0.35);
}

/* --- Scroll indicator caps --- */
.hero-scroll-indicator .scroll-line {
  position: relative;
}
.hero-scroll-indicator .scroll-line::before,
.hero-scroll-indicator .scroll-line::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 5px;
  height: 1px;
  background: var(--gold-aged);
  transform: translateX(-50%);
  opacity: 0.7;
}
.hero-scroll-indicator .scroll-line::before { top: 0; }
.hero-scroll-indicator .scroll-line::after { bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .np-frame::before,
  .np-frame::after {
    transition: none;
  }
}