/* CaseCrow FX overlay: rarity light, spotlight cards, embers. Sits on top of the live build. */

/* Spotlight + lift on interactive panels */
.cc-mode-card, .cc-rail__block {
  position: relative;
  isolation: isolate;
  transition: transform var(--dur-base, 260ms) var(--ease-out-expo, ease-out),
              border-color var(--dur-base, 260ms) var(--ease-out-expo, ease-out),
              box-shadow var(--dur-base, 260ms) var(--ease-out-expo, ease-out);
}
.cc-mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base, 260ms) ease-out;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--accent, #ffc26a) 24%, transparent), transparent 70%);
}
@media (hover: hover) {
  .cc-mode-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent, #ffc26a) 55%, var(--border-subtle, #3a2c23));
    box-shadow: var(--elev-2, 0 18px 40px -16px rgba(0, 0, 0, .7));
  }
  .cc-mode-card:hover::after { opacity: 1; }
}

/* Rarity light on the live drops list (data-rarity is set by casecrow-fx.js) */
.cc-drop[data-rarity] {
  position: relative;
  border-radius: var(--r-sm, 6px);
  background: linear-gradient(90deg, var(--rc-soft), transparent 62%);
  box-shadow: inset 3px 0 0 var(--rc),
              0 0 var(--rc-spread) calc(var(--rc-spread) * -.6) var(--rc-glow);
}
.cc-drop[data-rarity="CONSUMER"], .cc-drop[data-rarity="INDUSTRIAL"] {
  box-shadow: inset 2px 0 0 var(--rc);
}
.cc-drop.cc-fx-new { animation: cc-fx-drop-in 1.1s var(--ease-out-expo, ease-out) both; }
@keyframes cc-fx-drop-in {
  0%   { opacity: 0; transform: translateX(-14px); filter: brightness(2.2); }
  40%  { opacity: 1; filter: brightness(1.6); }
  100% { transform: none; filter: none; }
}

/* Header pulse when a chase-tier item drops (Classified and above) */
.fidelity-header.cc-fx-pulse { animation: cc-fx-header 1.2s ease-out; }
@keyframes cc-fx-header {
  0%   { box-shadow: inset 0 -2px 0 0 var(--fx-rc, var(--accent)), 0 10px 40px -10px var(--fx-rc, var(--accent)); }
  100% { box-shadow: inset 0 -2px 0 0 transparent, 0 10px 40px -10px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-mode-card:hover { transform: none; }
  .cc-drop.cc-fx-new, .fidelity-header.cc-fx-pulse { animation: none; }
}

/* ── Case opening: tension, landing bloom, flash, result glow ───────── */
.cc-fx-vignette {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(8, 4, 2, .72) 100%);
  transition: opacity .7s ease-out;
}
html.cc-fx-spinning .cc-fx-vignette { opacity: 1; }
.dz-reel.is-settling .dz-reel__marker { animation: cc-fx-marker .42s ease-in-out infinite alternate; }
@keyframes cc-fx-marker {
  from { filter: drop-shadow(0 0 4px var(--accent, #ffc26a)); }
  to   { filter: drop-shadow(0 0 16px var(--accent, #ffc26a)); }
}
.cc-fx-bloom {
  position: fixed; z-index: 31; pointer-events: none; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.3); opacity: 0;
  animation: cc-fx-bloom var(--fx-dur, 1000ms) cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes cc-fx-bloom {
  0%   { transform: translate(-50%, -50%) scale(.3);  opacity: 0; }
  22%  { opacity: var(--fx-peak, .8); }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}
.cc-fx-flash {
  position: fixed; inset: 0; z-index: 32; pointer-events: none; opacity: 0;
  animation: cc-fx-flash 520ms ease-out forwards;
}
@keyframes cc-fx-flash { 0% { opacity: 0; } 14% { opacity: var(--fx-peak, .5); } 100% { opacity: 0; } }
.cc-fx-burst { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 33; pointer-events: none; }

/* Result card carries the rarity light */
.dz-record[data-rarity] { filter: drop-shadow(0 0 calc(var(--rc-spread, 18px) * .7) var(--rc-glow)); }
.dz-record[data-rarity] .dz-record__value { text-shadow: 0 0 14px var(--rc-soft); }

@media (prefers-reduced-motion: reduce) {
  .cc-fx-vignette, .cc-fx-bloom, .cc-fx-flash, .cc-fx-burst { display: none; }
  .dz-reel.is-settling .dz-reel__marker { animation: none; }
}