/* Wanted Poster stream overlay (OBS browser source).
   Fonts come from wanted.css, which is enqueued on the overlay page too. */

#hlw-overlay-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  z-index: 2147483000;
}

.hlw-event {
  position: absolute;
  will-change: transform, opacity;
  transform: rotate(var(--hlw-tilt, 0deg));
  transform-origin: 50% 12%;
  pointer-events: none;
}

/* Direct child only - the poster photo inside the note keeps its own sizing. */
.hlw-event > img {
  display: block;
  max-width: 340px;
  height: auto;
}

.hlw-event-img.hlw-fly-in {
  /* No fill mode on the wobble: with "both" its 0% frame would override the
     fly-in transform during the 500ms delay and suppress the entire fly-in. */
  animation: hlw-fly-in 500ms ease-in 1 both, hlw-impact-wobble 600ms ease-out 500ms 1;
}

.hlw-event.hlw-swing {
  animation: hlw-swing 3.2s ease-in-out infinite;
}

.hlw-event.hlw-fade-out {
  animation: hlw-fade-out 600ms ease-in 1 both;
}

@keyframes hlw-fly-in {
  from {
    opacity: 0;
    transform: translate(-70vw, -60vh) scale(1.6) rotate(-24deg);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes hlw-impact-wobble {
  0% { transform: scale(1) rotate(0deg); }
  18% { transform: scale(1.06) rotate(3deg); }
  40% { transform: scale(0.98) rotate(-2.5deg); }
  62% { transform: scale(1.02) rotate(1.6deg); }
  82% { transform: scale(0.995) rotate(-0.8deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes hlw-swing {
  0% { transform: rotate(calc(var(--hlw-tilt, 0deg) - 2deg)); }
  50% { transform: rotate(calc(var(--hlw-tilt, 0deg) + 2deg)); }
  100% { transform: rotate(calc(var(--hlw-tilt, 0deg) - 2deg)); }
}

@keyframes hlw-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* --- Flutter mode: poster sails down, dagger pins it -----------------------
   The container is a zero-size anchor at the stage origin. Every child is moved
   by transform only, driven frame by frame from JS - no keyframes here, or the
   CSS timeline would fight the rAF loop. */

.hlw-flutter {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

.hlw-flutter-poster {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: auto;
  will-change: transform;
  /* Known cost: a live drop-shadow is re-rasterised every animation frame, and
     with several sheets in the air that is measurable. It stays anyway - the
     alternative (baking the shadow into the sheet texture) would grow the
     PNG's opaque bounds, and the pin/landing logic measures the alpha bounding
     box of that very texture to find the sheet corner the dagger nails. */
  filter: drop-shadow(0 10px 18px rgba(15, 8, 2, 0.45));
}

/* Theme armor: the clean page still loads the theme's stylesheets via wp_head,
   and virtually every theme ships a global `img { max-width: 100% }`. Our
   anchor container is 0x0, so 100% resolves to 0 and the poster collapses to
   nothing (the dagger survives only because its wrapper has explicit sizes).
   These constraints must never apply inside the flutter elements. */
.hlw-flutter-poster,
.hlw-dagger-img {
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Small dark entry wound right under the cut edge of the blade. */
.hlw-pin-shadow {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 9, 2, 0.75), rgba(18, 9, 2, 0.28) 55%, rgba(18, 9, 2, 0) 100%);
  will-change: transform, opacity;
}

/* Square wrapper whose vertical centre line is the blade axis (see the JS
   comment on spawnFlutterEvent). Transitions stay off - the motion is rAF. */
.hlw-dagger-wrap {
  position: absolute;
  left: 0;
  top: 0;
  transition: none;
  will-change: transform, clip-path;
}

.hlw-dagger-img {
  position: absolute;
  display: block;
}

.hlw-note-text {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translateX(-50%);
  max-width: 260px;
  font-family: "Pirata One", "Trebuchet MS", serif;
  color: #2b1d0f;
  letter-spacing: 0.5px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  text-shadow: 0 1px 0 rgba(255, 244, 214, 0.85), 0 0 6px rgba(255, 240, 200, 0.6);
}

.hlw-note-name {
  font-size: 1em;
}

.hlw-note-bounty {
  font-size: 0.78em;
  margin-top: 0.15em;
  opacity: 0.92;
}

.hlw-note-photo {
  display: block;
  margin: 8px auto 0;
  max-width: 70%;
  height: auto;
  border: 3px solid #f6ead0;
  border-radius: 3px;
  transform: rotate(-2.5deg);
  box-shadow: 0 6px 16px rgba(20, 12, 4, 0.45);
}