/* ============================================================
   04-border.css  — BORDER GAMBAR GARIS CRAYON
   ------------------------------------------------------------
   Cara kerja:
   - .crayon-frame adalah lapisan fixed di atas konten, jaraknya (inset)
     mengikuti layar -> border selalu pas di semua ukuran layar.
   - Gambar garis (PNG/SVG) dipasang lewat `border-image` (9-slice),
     sehingga ujungnya melengkung & tidak gepeng saat diskalakan.
   - CSS di bawah = cadangan murni CSS kalau file gambarnya belum ada.
   ------------------------------------------------------------
   Jangan ubah nilai --bf-* lewat CSS, itu di-set otomatis oleh
   assets/js/border.js. Ubah lewat config.js.
   ============================================================ */

.crayon-frame{
  position:fixed;
  z-index:50;
  inset: var(--bf-inset, 14px);
  pointer-events:none;
  border-style: solid;
  border-width: var(--bf-tebal, 14px);
  border-color: transparent;
  border-radius: var(--bf-radius, 28px);

  /* nilai awal; border.js akan menulis ulang sesuai gambar + layar */
  border-image-source: var(--bf-gambar, none);
  border-image-slice: var(--bf-slice, 40px);
  border-image-width: var(--bf-lebar, var(--bf-tebal, 14px));
  border-image-repeat: round;
  border-image-outset: 0;
  transition: opacity .35s ease;
}
.crayon-frame.is-hidden{ opacity:0; }

/* ---------- fallback pure CSS (kalau file gambar belum ada) ----------
   Dipakai otomatis oleh border.js dengan cara menambahkan kelas
   .no-image. Garis putus-putus + sedikit akek (ala ransom note). */
.crayon-frame.no-image{
  border-style: dashed;
  border-color: var(--bf-warna, var(--merah));
  border-image: none;
}

/* ---------- warna alternatif (dipakai kalau cuma ada 1 file gambar,
   tombol 🖍️ akan memutar warna) ---------- */
.crayon-frame[data-style="1"]{ --bf-warna: var(--biru); }
.crayon-frame[data-style="2"]{ --bf-warna: var(--hijau); }
.crayon-frame[data-style="3"]{ --bf-warna: var(--ungu); }
.crayon-frame[data-style="4"]{ --bf-warna: var(--oranye); }
.crayon-frame[data-style="5"]{ --bf-warna: var(--kuning); }

/* label kecil di sudut border */
.crayon-frame__inner{ position:absolute; inset:0; }
.crayon-frame__tag{
  position:absolute;
  font-size: clamp(16px, 2.4vmin, 26px);
  line-height:1;
  opacity:.9;
  animation: tagBob 3.2s ease-in-out infinite;
}
.crayon-frame__tag--tl{ top:-10px; left:-10px;  transform: rotate(-14deg); }
.crayon-frame__tag--tr{ top:-10px; right:-10px; transform: rotate(12deg);  animation-delay:.6s; }
.crayon-frame__tag--bl{ bottom:-10px; left:-10px;  transform: rotate(10deg);  animation-delay:1.2s; }
.crayon-frame__tag--br{ bottom:-10px; right:-10px; transform: rotate(-12deg); animation-delay:1.8s; }