/* =====================================================================
   CARD SKINS — Bảng màu Ngũ Hành (phong thủy) + hiệu ứng động nhẹ (pure CSS)
   ---------------------------------------------------------------------
   Cách thêm 1 skin mới:
     1) Thêm 1 khối biến .ecard-container[data-skin="<ten>"] { --p1 --p2 --glow --primary }
     2) Thêm <option value="<ten>"> trong app/views/card/edit.php
     3) (tuỳ chọn) thêm màu vào $skinPrimaryMap trong public.php cho particles
   Hiệu ứng tự áp theo các biến trên — KHÔNG cần sửa gì khác.
   data-fx: low (Nhẹ) | medium (Vừa, mặc định) | high (Mạnh)
   ===================================================================== */

/* ---- Bảng màu 5 hành ---- */
.ecard-container[data-skin="kim"]  { --p1:#e8e8ec; --p2:#c9a86a; --glow:rgba(212,175,55,.55);  --primary:#c9a86a; }
.ecard-container[data-skin="moc"]  { --p1:#34d399; --p2:#0fb9b1; --glow:rgba(16,185,129,.55);  --primary:#10b981; }
.ecard-container[data-skin="thuy"] { --p1:#38bdf8; --p2:#1e6fff; --glow:rgba(56,189,248,.55);  --primary:#38bdf8; }
.ecard-container[data-skin="hoa"]  { --p1:#ff6b4d; --p2:#ff2e93; --glow:rgba(255,77,77,.55);   --primary:#ff4d4d; }
.ecard-container[data-skin="tho"]  { --p1:#f2b441; --p2:#c2703d; --glow:rgba(224,168,46,.55);  --primary:#e0a82e; }

/* ---- Tên: chữ gradient chạy (mọi mức hiệu ứng khi có skin) ---- */
.ecard-container[data-skin] .name {
    background: linear-gradient(90deg, var(--p1), var(--p2), var(--p1));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: skinText 4s linear infinite;
}

/* ---- Cover: ánh sáng quét (mức Vừa & Mạnh) ---- */
.ecard-container[data-fx="medium"] .cover-img,
.ecard-container[data-fx="high"]   .cover-img { overflow: hidden; }
.ecard-container[data-fx="medium"] .cover-img::after,
.ecard-container[data-fx="high"]   .cover-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    animation: skinSheen 6s ease-in-out infinite;
}

/* ---- Avatar: glow nhịp (mức Vừa & Mạnh) ---- */
.ecard-container[data-skin][data-fx="medium"] .avatar-img,
.ecard-container[data-skin][data-fx="high"]   .avatar-img {
    animation: skinPulse 2.8s ease-in-out infinite;
}

/* ---- Cả thẻ: hào quang màu (chỉ mức Mạnh; box-shadow không bị overflow cắt) ---- */
.ecard-container[data-skin][data-fx="high"] {
    animation: skinHalo 4s ease-in-out infinite;
}

@keyframes skinText  { to { background-position: 200% center; } }
@keyframes skinSheen { 0%, 100% { left: -60%; } 55% { left: 140%; } }
@keyframes skinPulse {
    0%, 100% { box-shadow: 0 0 20px var(--primary); }
    50%      { box-shadow: 0 0 34px 4px var(--glow); }
}
@keyframes skinHalo {
    0%, 100% { box-shadow: 0 0 40px rgba(0, 0, 0, .9), 0 0 30px -6px var(--glow); }
    50%      { box-shadow: 0 0 40px rgba(0, 0, 0, .9), 0 0 55px 4px var(--glow); }
}

/* ---- Tôn trọng người dùng tắt chuyển động / máy yếu ---- */
@media (prefers-reduced-motion: reduce) {
    .ecard-container[data-skin] .name,
    .ecard-container .cover-img::after,
    .ecard-container[data-skin] .avatar-img,
    .ecard-container[data-skin][data-fx="high"] {
        animation: none !important;
    }
}