/*
 * frames.css — Ornate frame system for cards, avatars, and media.
 *
 * Pure CSS — no images, no build step.
 * Uses layered box-shadows, conic-gradients, and pseudo-elements.
 */

/* ============================================================
   CSS custom properties for frame colors
   ============================================================ */
:root {
  --frame-gold:    var(--accent);       /* follows accent so gold theme stays consistent */
  --frame-gold-raw: #ffe099;           /* fallback raw value for box-shadow alpha math */
  --frame-teal:    #00f5ff;
  --frame-violet:  #a78bfa;
  --frame-rose:    #f472b6;
  --frame-gap: rgb(10 10 28 / 95%); /* matches modal/card dark bg */
}

/* ============================================================
   Avatar frame — ornate multi-ring glow
   ============================================================ */
.avatar-framed {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar-framed img,
.avatar-framed .header-avatar {
  position: relative;
  z-index: 2;
  width: var(--avatar-size, 110px) !important;
  height: var(--avatar-size, 110px) !important;
  border-radius: 50% !important;
  border: none !important;
  box-shadow:
    0 0 0 3px var(--frame-gold),
    0 0 0 5px var(--frame-gap),
    0 0 0 7px rgba(0,245,255,.6),
    0 0 0 9px var(--frame-gap),
    0 0 0 10px rgba(245,215,110,.3),
    0 0 28px rgba(245,215,110,.4),
    0 0 55px rgba(0,245,255,.2);
}
@media (min-width: 768px) {
  .header-avatar-wrap {--avatar-size: 130px;}
}

/* Sparkle pseudo-elements removed */
.avatar-framed::before,
.avatar-framed::after { content: none; }

/* ============================================================
   Card frame — ornate bordered post card
   ============================================================ */
.card-framed {
  position: relative;
  border-color: transparent !important;
}

/* Main gradient border via pseudo-element */
.card-framed::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(
    135deg,
    rgba(245,215,110,.7) 0%,
    rgba(0,245,255,.5)   25%,
    rgba(167,139,250,.5) 50%,
    rgba(0,245,255,.5)   75%,
    rgba(245,215,110,.7) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Glow behind the border */
.card-framed::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: calc(var(--radius-lg) + 8px);
  background: radial-gradient(
    ellipse at center,
    rgba(0,245,255,.08) 0%,
    transparent 70%
  );
  z-index: 0;
  pointer-events: none;
}

/* Corner jewels using decorative spans (injected by JS on photo posts) */
.card-frame-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, var(--frame-teal) 30%, rgba(0,245,255,.3) 70%);
  border-radius: 50%;
  z-index: 6;
  box-shadow: 0 0 8px var(--frame-teal), 0 0 16px rgba(0,245,255,.4);
}
.card-frame-corner.tl { top: -4px;  left: -4px; }
.card-frame-corner.tr { top: -4px;  right: -4px; }
.card-frame-corner.bl { bottom: -4px; left: -4px; }
.card-frame-corner.br { bottom: -4px; right: -4px; }

/* Top star ornament */
.card-frame-star {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--frame-gold);
  font-size: 1.1rem;
  text-shadow: 0 0 8px rgba(245,215,110,.9);
  z-index: 6;
  pointer-events: none;
  line-height: 1;
}

/* Content inside must sit above the border pseudo-elements */
.card-framed > * { position: relative; z-index: 1; }

/* Box-shadow glow on hover */
.card-framed:hover {
  box-shadow:
    var(--shadow-hover),
    0 0 0 1px rgba(245,215,110,.4),
    0 0 30px rgba(0,245,255,.15) !important;
}

/* ============================================================
   Image frame — for expanded post / single photo cards
   ============================================================ */
.img-framed {
  position: relative;
  display: block;
}

.img-framed::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(245,215,110,.8),
    rgba(0,245,255,.6),
    rgba(167,139,250,.6),
    rgba(245,215,110,.8)
  );
  z-index: 0;
}

.img-framed img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ============================================================
   Pinned frame — subtle gold top accent for pinned cards
   ============================================================ */
.post-card.is-pinned.card-framed::before {
  background: linear-gradient(
    135deg,
    rgba(245,215,110,.9) 0%,
    rgba(0,245,255,.6)   50%,
    rgba(245,215,110,.9) 100%
  );
}

/* ============================================================
   PNG Frame System — 9-slice scalable ornate frames
   ============================================================
   To activate a PNG frame set, define a frame-set class
   (e.g. .frame-set-gold) on the body or a container.

   Each set needs 9 PNG slices in static/frames/<set-name>/:
     tl.png  tc.png  tr.png
     ml.png  -- (card content) --  mr.png
     bl.png  bc.png  br.png

   Corner size is controlled by --png-frame-corner.
   Slice size defaults are tuned for ~120px corner PNGs.

   When no PNGs exist yet the card falls back to the CSS-only
   frame above — so this framework is safe to ship now.
   ============================================================ */

:root {
  /* Path to the active frame set (empty = no PNG frame) */
  --png-frame-set:    '';

  /* Slice measurements — update per graphic set */
  --png-frame-corner: 60px;   /* size of each corner tile */
  --png-frame-edge:   20px;   /* width/height of edge tiles */
  --png-frame-slice:  60 20 60 fill; /* CSS border-image slice values */
}

/* ── Card PNG frame ──────────────────────────────────────────── */
/*
  Usage: add class "card-framed-png" to any .post-card.
  When --png-frame-set is set the PNG 9-slice frame renders.
  Falls back to the CSS gradient frame when no set is defined.
*/
.card-framed-png {
  position: relative;
  border-color: transparent !important;
}

/* 9-slice border — only active when a frame set is configured */
.card-framed-png.has-png-frame {
  border-image-source:
    url('/static/frames/var(--png-frame-set)/frame.png');
  border-image-slice: var(--png-frame-slice);
  border-image-width: var(--png-frame-corner);
  border-image-outset: calc(var(--png-frame-corner) * 0.3);
  border-image-repeat: stretch;
  border-style: solid;
  border-width: var(--png-frame-corner);
  /* Ensure content sits above the border rendering layer */
  overflow: visible;
}

/* ── Avatar PNG frame ────────────────────────────────────────── */
/*
  When a PNG avatar frame set is active, replace the
  CSS box-shadow ring with a proper border-image frame.
  Target the wrapper, not the <img>, so the frame can
  extend beyond the circular clip.
*/
.avatar-framed.has-png-frame img,
.avatar-framed.has-png-frame .header-avatar {
  box-shadow: none !important;  /* suppress CSS-only fallback */
}

.avatar-framed-png-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* PNG overlay — sized to exceed the avatar so corners show */
.avatar-frame-png-overlay {
  position: absolute;
  inset: calc(var(--png-frame-corner) * -0.5);
  pointer-events: none;
  z-index: 3;
  /* Set src from JS when a frame set is active */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ── JS helper — frame-set activation ───────────────────────── */
/*
  When body has data-frame-set="<set-name>", JS (see app.js
  applyFrameSet) adds class "has-png-frame" to framed elements
  and sets CSS vars so the above rules activate.

  Example frame sets to create later:
    static/frames/gold-ornate/frame.png   (card frame, 9-slice)
    static/frames/gold-ornate/avatar.png  (avatar overlay)
    static/frames/mystic/frame.png
    static/frames/mystic/avatar.png
*/