/* ═══════════════════════════════════════════
   SVG.CSS — DonatJS Icon Engine Styles
   Versi: 2.0
   Token warna/radius diwarisi dari donat.css (:root).
   File ini TIDAK mendefinisikan :root ulang.
   ═══════════════════════════════════════════ */

/* ─── PLACEHOLDER: sembunyikan <img> asli ── */
/*     Ikon belum dirender tampil transparan  */
img[data-src]:not([data-loaded]) {
    opacity:    0;
    visibility: hidden;
    display:    inline-block;
    min-width:  1px;   /* jaga agar tidak collapse dan MutationObserver tetap memicunya */
    min-height: 1px;
}

/* ─── CONTAINER SVG ──────────────────────── */
.di-svg {
    overflow:    visible;           /* biarkan drop-shadow tidak terpotong */
    flex-shrink: 0;
    display:     inline-block;
    vertical-align: middle;
}

/* ─── ENTRY ANIMATION ────────────────────── */
.di-svg.loaded {
    animation:  fadeInIcon 0.4s ease forwards;
    max-width:  100%;
    height:     auto;
}

@keyframes fadeInIcon {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── PATH (semua layer) ─────────────────── */
.svg-p {
    stroke:       white;
    stroke-width: 1;
    transition:   fill 0.3s ease, stroke-dashoffset 0.3s ease;
}

/* ─── HOVER: stroke animasi berjalan ─────── */
.di-svg:hover .svg-p {
    stroke-dasharray:  80;
    stroke-dashoffset: 80;
    animation:         svgWalkStroke 4s linear infinite;
    filter:            drop-shadow(0 0 4px white);
}

@keyframes svgWalkStroke {
    to { stroke-dashoffset: 0; }
}

/* ─── DROP SHADOW default ─────────────────── */
.di-svg.shadow-on {
    filter: drop-shadow(3px 5px 2px rgba(0,0,0,0.25));
}

/* ─── ANIMASI: bisa ditambah ke data-src ─── */
/*     Contoh: <img data-src="donat/32/red/1/spin"> */

.spin {
    transform-origin: center;
    animation: svgSpin 2s linear infinite;
}

.float {
    animation: svgFloat 6s ease-in-out infinite;
}

.pulse {
    transform-origin: center;
    animation: svgPulse 3s ease-in-out infinite;
}

.shake {
    animation: svgShake 0.8s ease-in-out infinite;
}

.bounce {
    animation: svgBounce 1s ease infinite;
}

@keyframes svgSpin {
    to { transform: rotate(360deg); }
}

@keyframes svgFloat {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-4px); }
}

@keyframes svgPulse {
    0%,100% { transform: scale(1);    opacity: 1;   }
    50%     { transform: scale(1.12); opacity: 0.75; }
}

@keyframes svgShake {
    0%,100% { transform: rotate(0deg);  }
    25%     { transform: rotate(-8deg); }
    75%     { transform: rotate( 8deg); }
}

@keyframes svgBounce {
    0%,100% { transform: translateY(0);    }
    50%     { transform: translateY(-6px); }
}

/* ─── LAYER MAIN: merespons --pColor ──────── */
/*     Layer dengan class layer-main menggunakan fill="var(--pColor)"
       sehingga otomatis berubah saat tema berganti.             */
.layer-main { transition: fill 0.4s ease; }


/* ═══════════════════════════════════════════
   ICON GRID — untuk halaman demo / galeri
   Digunakan oleh d.view.icons()
   ═══════════════════════════════════════════ */
.gIcons {
    display:   flex;
    flex-wrap: wrap;
    gap:       16px;
    padding:   12px 0;
}

.icons {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    padding:        12px 8px;
    border-radius:  var(--radius-md, 8px);
    background:     #fff;
    border:         1px solid #eee;
    min-width:      72px;
    cursor:         default;
    transition:     box-shadow 0.2s ease, transform 0.2s ease;
}

.icons:hover {
    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,.1));
    transform:  translateY(-2px);
}

.icons span {
    font-size:   11px;
    color:       #555;
    text-align:  center;
    word-break:  break-word;
    max-width:   68px;
}

/* ─── RESPONSIVE ─────────────────────────── */
@media (max-width: 450px) {
    .gIcons  { gap: 10px; }
    .icons   { min-width: 60px; padding: 8px 6px; }
}