/* A small moving light on the carved loot. The artwork tilts inside its hit target,
   so dragging, bag placement, and bundle reveal animations keep their own transforms. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .hat-choice, .hat-slot, .starter-pack, .fortune-item, .fortune-offering, .trade-charm, [data-emerald-stack], .bundle-piece) {
    --loot-x: 50%;
    --loot-y: 35%;
    --loot-rx: 0deg;
    --loot-ry: 0deg;
    --loot-glint: 0;
    --loot-scale: 1;
  }
  :is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .hat-choice, .hat-slot, .starter-pack, .fortune-item, .fortune-offering, .trade-charm, [data-emerald-stack], .bundle-piece).loot-lit {
    --loot-scale: 1.055;
  }

  :is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .hat-choice, .hat-slot, .starter-pack, .fortune-item, .fortune-offering, .trade-charm, [data-emerald-stack]) > :is(svg, .tray-art, .carved-charm, .backpack-emerald) {
    transform: perspective(360px) rotateX(var(--loot-rx)) rotateY(var(--loot-ry)) scale(var(--loot-scale));
    transform-origin: center;
    transition: transform 180ms ease-out, filter 180ms ease-out;
    backface-visibility: hidden;
  }

  :is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .hat-choice, .hat-slot, .starter-pack, .fortune-item, .fortune-offering, .trade-charm, [data-emerald-stack]).loot-lit > :is(svg, .tray-art, .carved-charm, .backpack-emerald),
  .hat-slot.loot-lit > svg {
    filter: brightness(1.27) saturate(1.23) drop-shadow(0 8px 6px #07140bb3) drop-shadow(0 0 10px #ffe6a6b3) drop-shadow(0 0 20px #f6ce7180);
  }

  :is(.tray-charm, .packed-charm, .hat-choice, .hat-slot, .starter-pack, .fortune-item, .fortune-offering, .backpack-item, [data-emerald-stack]) {
    isolation: isolate;
  }
  :is(.hat-choice, .hat-slot, .starter-pack, .fortune-item, .backpack-item) { position: relative; }
  :is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .hat-choice, .hat-slot, .starter-pack, .fortune-item, .fortune-offering, [data-emerald-stack])::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    opacity: var(--loot-glint);
    background: radial-gradient(circle at var(--loot-x) var(--loot-y), #fff8d9c0 0, #f8db6d75 20%, transparent 58%),
      linear-gradient(115deg, transparent 30%, #fff7d145 48%, transparent 66%);
    mix-blend-mode: screen;
    transition: opacity 220ms ease-out;
  }

  /* The rope and existing reveal turn stay on their own layers. */
  .bundle-piece .hanging-charm {
    transform: perspective(620px) rotateX(var(--loot-rx)) rotateY(var(--loot-ry)) scale(var(--loot-scale));
    transition: transform 220ms ease-out;
  }
  .bundle-piece.loot-lit .carving-face svg,
  .bundle-piece.loot-lit .hanging-carving > svg {
    filter: brightness(1.24) saturate(1.2) drop-shadow(0 0 12px #ffe5a5b8) drop-shadow(0 0 24px #f1ca7480);
  }
  .bundle-piece .hanging-carving::after {
    content: '';
    position: absolute;
    inset: 3% 0;
    pointer-events: none;
    opacity: var(--loot-glint);
    background: radial-gradient(circle at var(--loot-x) var(--loot-y), #fff6d4c2, #f4ce6073 22%, transparent 60%);
    mix-blend-mode: screen;
    transition: opacity 220ms ease-out;
  }
  .bundle-piece.loot-lit .hanging-charm::after {
    filter: brightness(1.5);
  }
}

/* Three fine diagonal strokes travel across unopened loot and the current item.
   A gradient changes only its background position, so no extra DOM or canvas is needed. */
:is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .hat-choice, .hat-slot, .starter-pack, .fortune-item, .fortune-offering, .trade-charm, [data-emerald-stack])::before,
.bundle-piece .hanging-carving::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg,
    transparent 38%, #fff9df00 41%, #fff9df92 42%, transparent 43%,
    #fff4d25c 45%, transparent 46%, #fff8e538 48%, transparent 50%);
  background-size: 260% 100%;
  background-position: 110% 0;
  mix-blend-mode: screen;
}
.bundle-piece .hanging-carving { position: relative; }
.bundle-piece .hanging-carving::before { inset: 2% 0; }

/* Carved charms already have an exact SVG silhouette mask. Their light must live
   inside that mask; a button-sized overlay would spill onto empty inventory cells. */
:is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .fortune-item, .fortune-offering, .trade-charm, .hanging-carving):has(.carved-charm)::before,
:is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .fortune-item, .fortune-offering, .trade-charm, .hanging-carving):has(.carved-charm)::after {
  content: none;
}
.charm-loot-sheen {
  opacity: 0;
  transform-box: view-box;
  transform: translateX(-110%);
}

/* The mixed-item grid normally hides pseudo elements; these are light only. */
body button.mixed-item::before, body button.mixed-item::after { display: block !important; }

@media (prefers-reduced-motion: no-preference) {
  :is(.tray-charm.unidentified-charm, .starter-pack:not([hidden]))::before,
  .pack-opening-stage[data-phase="hanging"] .bundle-piece:not(.revealed) .hanging-carving::before {
    animation: loot-skim 3.5s ease-in-out infinite;
  }
  :is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .hat-choice, .hat-slot, .starter-pack, .fortune-item, .fortune-offering, .trade-charm, [data-emerald-stack]):is(.loot-lit, :focus-visible)::before,
  .bundle-piece.loot-lit .hanging-carving::before {
    animation: loot-skim 1.7s ease-in-out infinite;
  }
  .tray-charm.unidentified-charm .charm-loot-sheen,
  .pack-opening-stage[data-phase="hanging"] .bundle-piece:not(.revealed) .carving-face .charm-loot-sheen {
    animation: charm-loot-skim 3.5s ease-in-out infinite;
  }
  :is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .fortune-item, .fortune-offering, .trade-charm):is(.loot-lit, :focus-visible) .charm-loot-sheen,
  .bundle-piece.loot-lit .carving-face .charm-loot-sheen {
    animation: charm-loot-skim 1.7s ease-in-out infinite;
  }
  @keyframes loot-skim {
    0%, 12% { opacity: 0; background-position: 110% 0; }
    25%, 56% { opacity: .58; }
    72%, 100% { opacity: 0; background-position: -110% 0; }
  }
  @keyframes charm-loot-skim {
    0%, 12% { opacity: 0; transform: translateX(-110%); }
    25%, 56% { opacity: .85; }
    72%, 100% { opacity: 0; transform: translateX(110%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.tray-charm, .packed-charm, .mixed-item, .backpack-item, .hat-choice, .hat-slot, .starter-pack, .fortune-item, .fortune-offering, .trade-charm, [data-emerald-stack], .bundle-piece) {
    --loot-rx: 0deg !important;
    --loot-ry: 0deg !important;
    --loot-glint: 0 !important;
  }
}