/* =====================================================
   SPEAKER GRILLE EFFECT — Reusable module
   Usage: <div class="alc-grille" data-grille data-grille-preset="alchimist-orange" data-grille-follow-mouse="true"></div>
   ===================================================== */

.alc-grille {
    /* === CSS Variables (per-instance, có thể override qua inline style) === */
    --metal-color:      #4a4a4a;
    --metal-light:      #888888;
    --metal-dark:       #1a1a1a;
    --inner-color:      #6a6a6a;
    --light-color:      #c0c0c0;
    --shadow-color:     #000000;
    --tile-size:        56px;
    --light-x:          50%;
    --light-y:          50%;
    --light-radius:     90%;
    --light-power:      0.85;
    --shadow-power:     0.85;
    --bevel-light-pow:  1.0;
    --bevel-dark-pow:   0.85;
    --inner-pow:        0.7;

    /* === Layout === */
    position: relative;
    overflow: hidden;
    background: #000;
    isolation: isolate;
    transition: --light-x 0s, --light-y 0s; /* placeholder, smooth tween qua JS RAF */
}

/* === Preset variants === */
.alc-grille[data-grille-preset="alchimist-orange"] {
    --metal-color:#5a3a18; --metal-light:#e67e22; --metal-dark:#1a0a00;
    --light-color:#ffae5a; --shadow-color:#000; --inner-color:#a85a18;
    --bevel-light-pow:1.0; --bevel-dark-pow:0.85; --inner-pow:0.75;
}
.alc-grille[data-grille-preset="side-left"] {
    --metal-color:#4a4a4a; --metal-light:#888; --metal-dark:#1a1a1a;
    --light-color:#c0c0c0; --shadow-color:#000; --inner-color:#7a7a7a;
}
.alc-grille[data-grille-preset="dramatic"] {
    --metal-color:#3a3a3a; --metal-light:#bbb; --metal-dark:#000;
    --light-color:#e0e0e0; --shadow-color:#000; --inner-color:#888;
    --bevel-light-pow:1.3; --bevel-dark-pow:1.2; --inner-pow:1.0;
}
.alc-grille[data-grille-preset="gold"] {
    --metal-color:#5a4318; --metal-light:#fbbf24; --metal-dark:#1a0f00;
    --light-color:#ffd96a; --shadow-color:#000; --inner-color:#b08818;
}
/* Neutral B&W — không màu, chỉ xám trắng. Phù hợp overlay trên ảnh sản phẩm */
.alc-grille[data-grille-preset="neutral"] {
    --metal-color:#3a3a3a;
    --metal-light:#cfcfcf;
    --metal-dark:#0a0a0a;
    --light-color:#e8e8e8;
    --shadow-color:#000;
    --inner-color:#9a9a9a;
}

/* === Layer 1: Metal frame === */
.alc-grille .alc-metal {
    position: absolute; inset: 0;
    background-color: var(--metal-color);
    z-index: 1;
    filter: blur(0.4px);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='31' viewBox='0 0 54 31'><path fill='white' fill-rule='evenodd' d='M0,0 L54,0 L54,31 L0,31 Z M15,15.5 L7.5,28.5 L-7.5,28.5 L-15,15.5 L-7.5,2.5 L7.5,2.5 Z M42,0 L34.5,13 L19.5,13 L12,0 L19.5,-13 L34.5,-13 Z M42,31 L34.5,44 L19.5,44 L12,31 L19.5,18 L34.5,18 Z M69,15.5 L61.5,28.5 L46.5,28.5 L39,15.5 L46.5,2.5 L61.5,2.5 Z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='54' height='31' viewBox='0 0 54 31'><path fill='white' fill-rule='evenodd' d='M0,0 L54,0 L54,31 L0,31 Z M15,15.5 L7.5,28.5 L-7.5,28.5 L-15,15.5 L-7.5,2.5 L7.5,2.5 Z M42,0 L34.5,13 L19.5,13 L12,0 L19.5,-13 L34.5,-13 Z M42,31 L34.5,44 L19.5,44 L12,31 L19.5,18 L34.5,18 Z M69,15.5 L61.5,28.5 L46.5,28.5 L39,15.5 L46.5,2.5 L61.5,2.5 Z'/></svg>");
    -webkit-mask-size: var(--tile-size) calc(var(--tile-size) * 0.5741);
            mask-size: var(--tile-size) calc(var(--tile-size) * 0.5741);
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
}

/* === Layer 2/3/3.5: Bevel & Inner highlight (mask sinh động qua JS) === */
.alc-grille .alc-bevel-dark,
.alc-grille .alc-bevel-light,
.alc-grille .alc-inner {
    position: absolute; inset: 0;
    -webkit-mask-size: var(--tile-size) calc(var(--tile-size) * 0.5741);
            mask-size: var(--tile-size) calc(var(--tile-size) * 0.5741);
    -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
    pointer-events: none;
}
.alc-grille .alc-bevel-dark {
    z-index: 2;
    background-color: var(--metal-dark);
    opacity: var(--bevel-dark-pow);
    -webkit-mask-image: var(--alc-bevel-dark-mask);
            mask-image: var(--alc-bevel-dark-mask);
}
.alc-grille .alc-bevel-light {
    z-index: 3;
    background-color: var(--metal-light);
    opacity: var(--bevel-light-pow);
    -webkit-mask-image: var(--alc-bevel-light-mask);
            mask-image: var(--alc-bevel-light-mask);
}
.alc-grille .alc-inner {
    z-index: 35;
    background-color: var(--inner-color);
    opacity: var(--inner-pow);
    -webkit-mask-image: var(--alc-inner-mask);
            mask-image: var(--alc-inner-mask);
}

/* === Layer 4: Radial light (color-dodge) === */
.alc-grille .alc-light {
    position: absolute; inset: 0;
    z-index: 4;
    background: radial-gradient(
        circle at var(--light-x) var(--light-y),
        var(--light-color) 0%,
        transparent var(--light-radius)
    );
    opacity: var(--light-power);
    mix-blend-mode: color-dodge;
    pointer-events: none;
    transition: background 0.18s ease-out, opacity 0.18s ease-out;
}

/* === Layer 5: Vignette (multiply) === */
.alc-grille .alc-vignette {
    position: absolute; inset: 0;
    z-index: 5;
    background: radial-gradient(
        ellipse at var(--light-x) var(--light-y),
        white 30%,
        var(--shadow-color) 110%
    );
    opacity: var(--shadow-power);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: background 0.18s ease-out;
}

/* === Content overlay (text/UI nằm trên grille) === */
.alc-grille .alc-content {
    position: relative;
    z-index: 50;
    pointer-events: auto;
}

/* === Reduced motion: tắt mouse follow === */
@media (prefers-reduced-motion: reduce) {
    .alc-grille {
        --light-x: 50% !important;
        --light-y: 50% !important;
    }
    .alc-grille .alc-light,
    .alc-grille .alc-vignette {
        transition: none !important;
    }
}

/* =====================================================
   OVERLAY MODE — grille trong suốt phủ lên ảnh sản phẩm
   ===================================================== */
.alc-grille[data-grille-overlay] {
    background: transparent;       /* nền không che ảnh, hex hole nhìn xuyên */
    --light-power:     0.25;        /* radial light rất dịu, không chói */
    --bevel-light-pow: 0.5;         /* lip sáng mảnh */
    --bevel-dark-pow:  0.4;         /* lip tối mờ */
    --inner-pow:       0.25;        /* vành trong rất nhẹ */
    --shadow-power:    0.35;        /* vignette tối góc giảm */
}

/* Card hover trigger: grille fade-in khi hover product */
.alc-grille-hover {
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;          /* không chặn click ban đầu */
}
.alc-grille-trigger:hover .alc-grille-hover,
.alc-grille-trigger:focus-within .alc-grille-hover {
    opacity: 0.35;                 /* mặc định overlay 35% — ảnh hiện rất rõ */
    pointer-events: auto;          /* enable mousemove tracking khi hover */
}

/* Trigger container: cần position + overflow để grille phủ đúng */
.alc-grille-trigger {
    position: relative;
    overflow: hidden;
}

/* Đảm bảo grille phủ trùm vùng cần (mặc định inset:0 đã có ở .alc-grille) */
.alc-grille-hover {
    position: absolute;
    inset: 0;
    z-index: 5;                    /* trên ảnh, dưới text caption */
}

/* Khi user prefers-reduced-motion: bỏ hover effect luôn */
@media (prefers-reduced-motion: reduce) {
    .alc-grille-hover {
        transition: none !important;
    }
    .alc-grille-trigger:hover .alc-grille-hover {
        opacity: 0 !important;     /* tắt hoàn toàn cho accessibility */
    }
}