/* ============================================================================
   Product-image glint + sparkle "ding"
   ----------------------------------------------------------------------------
   Shared across the home/category grid cards AND the listing-page main image.
   Driven by the `.glint-run` class that boilerplate.js adds to the host
   container (.card on the grid, .gallery-main on the listing page). The CSS
   keys off `.glint-run` alone so it works under either host.

   Markup per image:
     <div class="product-img-frame">
       <img ...>
       <span class="product-img-glint" aria-hidden="true"></span>   (sweep)
       <span class="card-sparkle"      aria-hidden="true"></span>   (main ding)
     </div>
   The white flash + secondary twinkle ride the frame's ::after / ::before, so
   they need no extra markup.

   Sequence once .glint-run lands: light-sweep (1.2s) -> white flash + main
   ding (~1.2s) -> secondary twinkle (~1.5s). Animates transform/opacity only
   (cheap to paint) and is fully disabled under prefers-reduced-motion.
   ============================================================================ */

.product-img-frame {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}

/* Sweep overlay — a SIBLING of the <img> (not an ancestor), so the image's
   own hover glow/zoom is never clipped by this overflow. */
.product-img-glint {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--border-radius-large, 12px);
    overflow: hidden;
    pointer-events: none;
}
/* Pokémon-foil double shine: one big leading band + a smaller trailing band
   with a clean gap, baked into a single gradient so they always move together.
   Hard color stops = crisp edges, no soft blur. Sweeps bottom-left -> top-right. */
.product-img-glint::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(
        45deg,
        transparent 0 45%,
        rgba(255, 255, 255, 0.30) 45% 47.5%,   /* small trailing band */
        transparent 47.5% 50%,                 /* gap */
        rgba(255, 255, 255, 0.62) 50% 55%,     /* big leading band */
        transparent 55% 100%
    );
    opacity: 0;
    transform: translate3d(-45%, 45%, 0);
}
.glint-run .product-img-glint::after {
    animation: product-img-sweep 1.2s ease-out;
}
@keyframes product-img-sweep {
    0%   { opacity: 0; transform: translate3d(-45%, 45%, 0); }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(45%, -45%, 0); }
}

/* Shiny-teeth "ding": a single crisp, completely-white 4-point star that pops
   at the image's top-right corner a beat after the sweep. */
.card-sparkle {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background: #ffffff;
    clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
    /* completely white: solid fill + fully-opaque white glow layers */
    filter: drop-shadow(0 0 2px #ffffff)
            drop-shadow(0 0 6px #ffffff)
            drop-shadow(0 0 13px rgba(255, 255, 255, 0.9));
    transform: scale(0.2);
}
.glint-run .card-sparkle {
    animation: card-sparkle 0.7s ease-out 0.95s;
}
@keyframes card-sparkle {
    0%   { opacity: 0; transform: scale(0.2) rotate(-25deg); }
    15%  { opacity: 1; transform: scale(1.2) rotate(0deg); }   /* fast pop to full white */
    80%  { opacity: 1; transform: scale(1.0) rotate(6deg); }   /* long hold at full white */
    100% { opacity: 0; transform: scale(0.82) rotate(10deg); }
}

/* White flash: a quick radial bloom that bursts behind the ding to sell the
   "ting". Lives on the frame's ::after (z below the star). */
.product-img-frame::after {
    content: "";
    position: absolute;
    top: -28px;
    right: -28px;
    width: 56px;
    height: 56px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.2) 30%,
        rgba(255, 255, 255, 0) 65%);
    transform: scale(0.2);
}
.glint-run .product-img-frame::after {
    animation: card-flash 0.5s ease-out 1s;
}
@keyframes card-flash {
    0%   { opacity: 0;   transform: scale(0.2); }
    35%  { opacity: 0.4; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.6); }
}

/* Secondary twinkle: a small second star that blinks a beat after the main
   ding, just inside the corner. Lives on the frame's ::before. */
.product-img-frame::before {
    content: "";
    position: absolute;
    top: 9px;
    right: 1px;
    width: 15px;
    height: 15px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background: #ffffff;
    clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
    filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
    transform: scale(0.2);
}
.glint-run .product-img-frame::before {
    animation: card-twinkle 0.5s ease-out 1.25s;
}
@keyframes card-twinkle {
    0%   { opacity: 0; transform: scale(0.2) rotate(-20deg); }
    45%  { opacity: 1; transform: scale(1.05) rotate(0deg); }
    100% { opacity: 0; transform: scale(0.5) rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
    .product-img-glint::after,
    .card-sparkle,
    .product-img-frame::after,
    .product-img-frame::before { animation: none; opacity: 0; }
}