/*
 * Equipment motion layer
 *
 * The ceramic board, wave coordinates and item controls remain owned by the
 * existing integrated sheet. This file only adds a transform-based motion
 * layer and the previously approved transparent glass asset.
 */

html body .build-column > .equipment-block,
html body .build-column > .equipment-block .equipped-row {
  overflow: visible !important;
}

/* Scale the hover surface with the available equipment board instead of
 * locking it to one desktop pixel size. The board is the sizing context so
 * the six-slot row remains the reference at every desktop width. */
html body .build-column > .equipment-block {
  container-type: inline-size;
}

@property --equipment-float-y {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

html body .build-column > .equipment-block .equipment-slot {
  --equipment-wave-y: 0px;
  --equipment-float-delay: 0s;
  --equipment-float-duration: 4s;
  --equipment-float-amplitude: 8px;
  --equipment-float-y: 0px;
  position: relative !important;
  transform-origin: 50% 0;
  animation: equipment-visual-float var(--equipment-float-duration) ease-in-out var(--equipment-float-delay) infinite;
}

@keyframes equipment-visual-float {
  0%, 100% { --equipment-float-y: var(--equipment-float-amplitude); }
  25%, 75% { --equipment-float-y: 0px; }
  50% { --equipment-float-y: calc(var(--equipment-float-amplitude) * -1); }
}

html body .build-column > .equipment-block .equipment-slot.empty,
html body .build-column > .equipment-block .equipment-slot.dragging,
html body .build-column > .equipment-block .equipment-motion-dragging .equipment-slot {
  animation: none !important;
  --equipment-float-y: 0px !important;
}

html body .build-column > .equipment-block .equipment-main {
  --equipment-content-shift-y: 11px;
  perspective: 720px !important;
  transform-style: preserve-3d !important;
  isolation: isolate !important;
}

/* The rank is a real grid child; the glass is absolute and never changes the
 * existing icon/name/price grid tracks. */
html body .build-column > .equipment-block .equipment-main > .equipment-rank {
  position: relative !important;
  z-index: 9 !important;
  transform: translate3d(0, var(--equipment-float-y), 0) !important;
}

html body .build-column > .equipment-block .equipment-main .equipment-glass-surface {
  --equipment-tilt-x: 0deg;
  --equipment-tilt-y: 0deg;
  position: absolute !important;
  z-index: 1 !important;
  /* Anchor the surface to the icon's centre, so changing its responsive
   * height does not make the icon drift toward the top of the card. */
  top: 74px !important;
  left: 50% !important;
  --equipment-glass-width: clamp(104px, 14cqw, 116px);
  width: var(--equipment-glass-width) !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 100 / 136 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate3d(-50%, calc(-50% + var(--equipment-float-y)), 0) scale(.94) rotateX(var(--equipment-tilt-x)) rotateY(var(--equipment-tilt-y)) !important;
  transform-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  filter: drop-shadow(0 6px 9px rgba(104, 71, 53, .18)) drop-shadow(0 13px 20px rgba(109, 80, 61, .09)) !important;
  transition: opacity 90ms ease, transform 120ms ease, filter 120ms ease, visibility 0s linear 90ms !important;
}

html body .build-column > .equipment-block .equipment-main .equipment-glass-surface img {
  position: static !important;
  z-index: auto !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: fill !important;
  filter: none !important;
}

html body .build-column > .equipment-block .equipment-main:hover .equipment-glass-surface.is-ready,
html body .build-column > .equipment-block .equipment-main:focus-visible .equipment-glass-surface.is-ready {
  opacity: .9 !important;
  visibility: visible !important;
  transform: translate3d(-50%, calc(-50% + var(--equipment-float-y)), 0) scale(1) rotateX(var(--equipment-tilt-x)) rotateY(var(--equipment-tilt-y)) !important;
  filter: drop-shadow(0 8px 12px rgba(104, 71, 53, .23)) drop-shadow(0 17px 24px rgba(109, 80, 61, .12)) !important;
  transition-delay: 0s !important;
}

/* Icon and copy stay upright; only the glass surface receives the 3D tilt. */
html body .build-column > .equipment-block .equipment-main > img {
  position: relative !important;
  z-index: 10 !important;
  width: 70px !important;
  height: 70px !important;
  align-self: center !important;
  transform: translate3d(0, calc(var(--equipment-float-y) + 6px + var(--equipment-content-shift-y)), 0) !important;
  transition: transform 100ms ease, filter 100ms ease !important;
}

html body .build-column > .equipment-block .equipment-main > b {
  position: relative !important;
  z-index: 8 !important;
  transform: translate3d(0, calc(var(--equipment-float-y) + var(--equipment-content-shift-y)), 0) !important;
}

html body .build-column > .equipment-block .equipment-main:hover > img,
html body .build-column > .equipment-block .equipment-main:focus-visible > img {
  transform: translate3d(0, calc(var(--equipment-float-y) + 6px + var(--equipment-content-shift-y)), 18px) !important;
  filter: drop-shadow(0 5px 5px rgba(77, 61, 40, .29)) !important;
}

html body .build-column > .equipment-block .equipment-motion-dragging .equipment-glass-surface {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 1000px) {
  html body .build-column > .equipment-block .equipment-slot {
    animation: none !important;
    --equipment-float-y: 0px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .build-column > .equipment-block .equipment-slot,
  html body .build-column > .equipment-block .equipment-main > img,
  html body .build-column > .equipment-block .equipment-main .equipment-glass-surface {
    animation: none !important;
    transition: none !important;
  }
}

/* Performance refinement: keep the approved float visible at rest while the
 * pointer work remains rAF-coalesced in equipment-motion.js. Six transform-
 * only cards are inexpensive; pausing the animation made the approved lift
 * disappear from the normal view. Reduced-motion and compact breakpoints stay
 * disabled below. */
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  html body .build-column > .equipment-block .equipment-slot {
    animation-play-state: running !important;
  }

  html body .build-column > .equipment-block:has(.equipment-main:hover) .equipment-slot,
  html body .build-column > .equipment-block:has(.equipment-main:focus-visible) .equipment-slot {
    animation-play-state: running !important;
  }
}