/* =====================================================
   NAMO FAZIL — SHATTER-REVEAL COVER (v3 · 2-hit)
   Frosted glass over the homepage identity photo.
   Takes TWO punches — cracks register where you click —
   then the glass shatters in 3D from your final hit.
   Reduced-motion safe.
   ===================================================== */

.shatter{
    position:absolute;
    inset:0;
    z-index:5;
    cursor:pointer;
    border-radius:inherit;
    perspective:1100px;
    -webkit-tap-highlight-color:transparent;
    outline:none;
    --ox:50%;
    --oy:50%;
}
.shatter.is-hidden{ visibility:hidden; pointer-events:none; }

/* Frosted blur+darken of the photo underneath */
.shatter__frost{
    position:absolute;
    inset:0;
    z-index:1;
    background:rgba(8,8,10,.5);
    -webkit-backdrop-filter:blur(16px) brightness(.6) saturate(.9);
    backdrop-filter:blur(16px) brightness(.6) saturate(.9);
    transition:opacity .8s ease;
}

/* Glass shards (clip-path + 3D vars set inline by JS) */
.shatter__shard{
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08), transparent 38%),
        linear-gradient(135deg, rgba(30,30,34,.6), rgba(10,10,12,.68));
    box-shadow:inset 0 0 0 .6px rgba(255,255,255,.07);
    backface-visibility:hidden;
    will-change:transform, opacity;
}

/* Crack lines SVG (paths injected by JS at the click point) */
.shatter__cracks{
    position:absolute;
    inset:0;
    z-index:3;
    width:100%; height:100%;
    overflow:visible;
    pointer-events:none;
    transition:opacity .5s ease;
}
.shatter__cracks path{
    fill:none;
    stroke:rgba(232,200,120,.95);
    stroke-width:.5;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:1;
    stroke-dashoffset:1;
    filter:drop-shadow(0 0 3px rgba(227,189,99,.75));
}

/* Diagonal glass sheen */
.shatter__sheen{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(125deg,
        transparent 28%,
        rgba(255,255,255,.12) 44%,
        rgba(255,255,255,.02) 54%,
        transparent 68%);
    transition:opacity .5s ease;
}

/* Gold pane frame */
.shatter__edge{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    border:1px solid rgba(200,162,74,.20);
    border-radius:inherit;
    transition:opacity .5s ease;
}

/* Impact flash (radial, centered on the click point) */
.shatter__flash{
    position:absolute;
    inset:0;
    z-index:4;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(circle at var(--ox) var(--oy),
        rgba(255,255,255,.95),
        rgba(255,240,200,.35) 16%,
        transparent 40%);
}

/* Gold sparks (created per-punch by JS, anchored in px) */
.shatter__dust{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
}
.shatter__spark{
    position:absolute;
    width:7px; height:7px;
    border-radius:50%;
    background:radial-gradient(circle, #f4dd95, #c8a24a 70%);
    box-shadow:0 0 9px rgba(200,162,74,.85);
    opacity:0;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

/* Impact burst ring (positioned in px at the click point) */
.shatter__glow{
    position:absolute;
    z-index:5;
    pointer-events:none;
    width:44px; height:44px;
    margin:-22px 0 0 -22px;
    border-radius:50%;
    border:2px solid var(--gold-bright);
    opacity:0;
    transform:scale(0);
}

/* Attention pulse behind the glove */
.shatter__pulse{
    position:absolute;
    left:50%; top:50%;
    width:80px; height:80px;
    margin:-40px 0 0 -40px;
    border-radius:50%;
    border:1px solid var(--gold-line);
    opacity:0;
    z-index:5;
    pointer-events:none;
}
.shatter.hit-once .shatter__pulse{ display:none; }

/* Centered prompt: glove + label */
.shatter__prompt{
    position:absolute;
    z-index:6;
    left:50%; top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
}
.shatter__glove{
    width:78px; height:78px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:38px; line-height:1;
    background:rgba(10,10,12,.62);
    border:1px solid var(--gold-line);
    box-shadow:var(--shadow-1);
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
    transition:box-shadow .3s ease, border-color .3s ease;
}
.shatter__label{
    font-size:10px;
    font-weight:700;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--gold);
    min-height:12px;
}

/* ============ MOTION ============ */
@media(prefers-reduced-motion:no-preference){

    /* idle */
    .shatter__glove{ animation:shGloveIdle 2.4s ease-in-out infinite; }
    @keyframes shGloveIdle{
        0%,100%{ transform:translateY(0) rotate(-7deg); }
        50%{ transform:translateY(-6px) rotate(-7deg); }
    }
    .shatter__pulse{ animation:shPulse 2.4s ease-out infinite; }
    @keyframes shPulse{
        0%{ opacity:.55; transform:scale(.75); }
        70%{ opacity:0; transform:scale(1.7); }
        100%{ opacity:0; transform:scale(1.7); }
    }
    .shatter:hover .shatter__glove,
    .shatter:focus-visible .shatter__glove{
        box-shadow:0 0 30px rgba(200,162,74,.45);
        border-color:var(--gold);
    }

    /* per-punch feedback (class toggled + reflow-restarted by JS) */
    .shatter__cracks path{
        animation:shCrackDraw .3s ease-out forwards;
        animation-delay:var(--cd, 0ms);
    }
    @keyframes shCrackDraw{ to{ stroke-dashoffset:0; } }

    .shatter__flash.go{ animation:shFlash .42s ease-out; }
    @keyframes shFlash{ 0%{opacity:0;} 22%{opacity:.9;} 100%{opacity:0;} }

    .shatter__glove.jab{ animation:shGlovePunch .32s ease-out; }
    @keyframes shGlovePunch{
        0%{ transform:translateY(0) rotate(-7deg) scale(1); }
        42%{ transform:translate(7px,7px) rotate(5deg) scale(1.2); }
        100%{ transform:translateY(0) rotate(-7deg) scale(1); }
    }

    .shatter__glow.go{ animation:shGlow .6s var(--ease-out); }
    @keyframes shGlow{ 0%{opacity:.9; transform:scale(0);} 100%{opacity:0; transform:scale(4.4);} }

    .shatter__spark{ animation:shDust .9s ease-out forwards; animation-delay:var(--dd, 0ms); }
    @keyframes shDust{
        0%{ opacity:0; }
        12%{ opacity:1; }
        100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--px,0), var(--py,0)) scale(.2); }
    }

    .lx-editorial__media.shake{ animation:shMediaShake .42s ease-out; }
    @keyframes shMediaShake{
        0%,100%{ transform:translate(0,0); }
        18%{ transform:translate(-5px,3px); }
        38%{ transform:translate(6px,-3px); }
        58%{ transform:translate(-4px,-4px); }
        78%{ transform:translate(4px,3px); }
    }

    /* final shatter — 3D shards tumble away */
    .shatter__shard{
        transition:transform 1.05s cubic-bezier(.2,.7,.2,1), opacity .95s ease;
        transition-delay:var(--delay, 0ms);
    }
    .shatter.is-breaking .shatter__shard{
        transform:translate3d(var(--tx,0), var(--ty,0), var(--tz,0))
                  rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg))
                  scale(var(--sc,.6));
        opacity:0;
    }
    .shatter.is-breaking .shatter__prompt{ opacity:0; transform:translate(-50%,-50%) scale(1.4); }
    .shatter.is-breaking .shatter__frost,
    .shatter.is-breaking .shatter__sheen,
    .shatter.is-breaking .shatter__edge,
    .shatter.is-breaking .shatter__cracks{ opacity:0; }
}

/* Reduced motion: simple dissolve */
@media(prefers-reduced-motion:reduce){
    .shatter{ transition:opacity .5s ease; }
    .shatter.is-breaking{ opacity:0; }
}

@media(max-width:860px){
    .shatter__glove{ width:66px; height:66px; font-size:32px; }
    .shatter__pulse{ width:68px; height:68px; margin:-34px 0 0 -34px; }
}