/* ============================================================
   WIP OVERLAY SYSTEM
   Usage: add <div class="wip"></div> inside any container.
   Parent needs position:relative — add class wip-wrap if needed.
   ============================================================ */

.wip-wrap { position: relative; }

.wip {
  position: absolute;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: all;
  background: none;
  border-radius: inherit;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wip-strip {
  position: absolute;
  left: -60%;
  width: 220%;
  height: 54px;
  background: repeating-linear-gradient(
    -45deg,
    #000 0px, #000 10px,
    #1a5c2a                10px, #1a5c2a               20px
  );
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 0;
  transform-origin: center center;
  /* box-shadow: 0 8px 28px rgba(0,0,0,0.95), 0 2px 6px rgba(0,0,0,0.8), 0 -4px 16px rgba(0,0,0,0.5); */
}

.wip-strip-inner {
  white-space: nowrap;
  font-family: Impact, 'Arial Narrow', Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  -webkit-text-stroke: 0px;
  letter-spacing: 2px;
  color: #000;
  text-transform: none;
  padding: 6px 16px;
  background: #1a5c2a;
  display: inline-block;
  flex-shrink: 0;
  margin: 0 -1px 0 0;
  vertical-align: top;
}

.wip-hazard {
  display: inline-block;
  width: 120px;
  height: 54px;
  flex-shrink: 0;
}

/* Vignette on top of tape */
.wip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
  z-index: 5;
}

/* PNG tape image */
.wip-tape-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.85)) drop-shadow(0 2px 6px rgba(0,0,0,0.6));
  transform: scale(1.30);
}

/* Centre badge */
.wip-badge {
  position: relative;
  z-index: 100;
  pointer-events: none;
  animation: wip-pulse 3.5s ease-in-out infinite;
}

@keyframes wip-pulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.06); }
}

.wip-badge img {
  width: 150px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.9)) drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}