/* Motion layer: progressive enhancement, safe to remove without affecting layout. */
.raid-hud {
  position: fixed;
  z-index: 80;
  right: 18px;
  bottom: 16px;
  width: 154px;
  padding: 9px 10px;
  border: 1px solid #59604e;
  background: rgba(7, 9, 7, .82);
  color: #aeb5a7;
  box-shadow: 0 10px 35px #0009, inset 0 0 20px #141a10;
  backdrop-filter: blur(10px);
  pointer-events: none;
  font: 800 8px/1.3 ui-monospace, monospace;
  letter-spacing: .12em;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.raid-hud-head { display: flex; justify-content: space-between; gap: 8px; }
.raid-hud-state { color: #d4bd7d; }
.raid-hud-track { display: block; height: 3px; margin-top: 7px; overflow: hidden; background: #252b23; }
.raid-hud-track i { display: block; width: 100%; height: 100%; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left; background: linear-gradient(90deg, #776b46, #d3b96f 70%, #a9d38e); box-shadow: 0 0 9px #a9d38e; }
.raid-hud.near .raid-hud-state { color: #bde8a4; text-shadow: 0 0 9px #76a75c; }
.raid-hud.near { border-color: #718765; }

.field-scan {
  position: fixed;
  z-index: 79;
  top: 0;
  left: 272px;
  right: 0;
  height: 1px;
  opacity: .24;
  background: linear-gradient(90deg, transparent, #c7b16f 35%, #a8d88d 68%, transparent);
  box-shadow: 0 0 13px #c7b16f;
  pointer-events: none;
  animation: fieldScan 8s linear infinite;
}
@keyframes fieldScan { from { transform: translateY(0); } to { transform: translateY(100vh); } }

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: blur(4px);
  transition: opacity .65s ease, transform .7s cubic-bezier(.2,.75,.2,1), filter .55s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0); filter: none; }

.parallax-visual { --parallax-y: 0px; }
.parallax-visual > img { transform: translate3d(0, var(--parallax-y), 0) scale(1.045); will-change: transform; }

.motion-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.motion-card:hover { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px); }
.motion-ready .motion-card.is-visible { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
.motion-ready .motion-card.is-visible:hover { transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px); }
.motion-card::selection { background: #d2b873; color: #080a08; }

.signal-pulse {
  position: fixed;
  z-index: 78;
  left: 50%;
  bottom: 27px;
  width: 9px;
  height: 9px;
  margin-left: -5px;
  border: 1px solid #c8f5ad;
  border-radius: 50%;
  opacity: 0;
  background: #8eca72;
  box-shadow: 0 0 16px #8eca72;
  pointer-events: none;
}
.signal-pulse.active { animation: signalPing 1.8s ease-out; }
@keyframes signalPing {
  0% { opacity: 0; transform: scale(.5); box-shadow: 0 0 0 0 #8eca7290; }
  18% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25); box-shadow: 0 0 0 36px #8eca7200; }
}

@media (max-width: 820px) {
  .field-scan { left: 0; }
  .raid-hud { right: 10px; bottom: 10px; width: 132px; opacity: .86; }
}

@media (hover: none) {
  .motion-card, .motion-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .field-scan, .signal-pulse { display: none; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .parallax-visual > img, .motion-card, .motion-card:hover { transform: none; }
  .raid-hud-track i { transition: none; }
}