/* Decorative scroll raccoons V3 — never capture clicks or affect layout */
.raccoon-scroll-scenes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(9.5rem, 22vh);
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.raccoon-scroll-scenes--peek {
  top: 18%;
  bottom: auto;
  height: min(11rem, 28vh);
}

.raccoon-scroll-scenes--play {
  /* Keep clear of Converse Flag Wave V5 in #contato */
  right: max(0px, min(42%, 22rem));
  left: auto;
  width: min(48%, 22rem);
  height: min(10rem, 24vh);
  /* Do not clip sprite into a hard rectangular matte near the footer */
  overflow: visible;
  isolation: auto;
}

/* WALK: keep horizontal clip for enter/exit; avoid vertical rectangular clip */
.raccoon-scroll-scenes:has(.is-walk) {
  overflow-x: hidden;
  overflow-y: visible;
  isolation: auto;
}

.raccoon-scroll-scenes__actor {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.78;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  background-repeat: no-repeat;
  background-position: 0 0;
  will-change: transform, background-position;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.raccoon-scroll-scenes__actor.is-peek {
  opacity: 0.82;
}

/*
 * WALK / PLAY: drop-shadow + overflow:hidden on the corridor composites a
 * rectangular filter region (tall near-square sprites). RUN/PEEK keep shadow.
 */
.raccoon-scroll-scenes__actor.is-walk,
.raccoon-scroll-scenes__actor.is-play {
  filter: none;
  box-shadow: none;
  outline: none;
  border: none;
  background-color: transparent;
  /* opacity<1 + isolated corridor can leave a faint rectangular matte */
  opacity: 1;
  will-change: auto;
}

.raccoon-scroll-scenes__actor.is-play {
  /* Alpha-mask the painted box to the sprite silhouette (synced in JS). */
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.raccoon-scroll-scenes__debug {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  z-index: 2;
  margin: 0;
  padding: 0.25rem 0.4rem;
  max-width: 96%;
  font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #f5f5f5;
  background: rgba(8, 10, 14, 0.72);
  border: 1px solid rgba(253, 185, 19, 0.45);
  white-space: pre-wrap;
  pointer-events: none;
}

@media (max-width: 820px) {
  .raccoon-scroll-scenes {
    height: min(7.5rem, 18vh);
  }

  .raccoon-scroll-scenes--peek {
    height: min(8.5rem, 22vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  .raccoon-scroll-scenes {
    display: none !important;
  }
}