/* =========================================================
   SCENE 1 — Casa + Cartel "Local" overlay
   (loaded after styles.css; uses global tokens / easings)
   ========================================================= */

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Casa — slides in from the right.
   Resting position: between center and right edge, near the bottom */
.house {
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: 653px;
  max-width: 704px;
  transform: translateX(140%) rotate(8deg);
  transition:
    transform 900ms var(--ease-bounce),
    filter 600ms var(--ease-out);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
  will-change: transform;
}

/* Cartel "Local" — hangs from top, aligned over the house */
.sign {
  position: absolute;
  right: 11%;
  top: -432px;                 /* start above the canvas */
  width: 518px;
  max-width: 558px;
  transform-origin: 50% -80px; /* swings from the cables */
  transition:
    top 1100ms var(--ease-bounce),
    transform 2600ms var(--ease-out);
  will-change: top, transform;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.55));
}

/* Cables suspending the cartel from above.
   Measured cable x-positions in the asset: 22.72% and 77.37%. */
.sign::before,
.sign::after {
  content: "";
  position: absolute;
  bottom: calc(100% - 4px);
  width: 5px;
  height: 1080px;
  background: linear-gradient(
    to right,
    rgba(120, 120, 120, 0.6) 0%,
    rgba(210, 210, 210, 0.95) 50%,
    rgba(110, 110, 110, 0.6) 100%
  );
  pointer-events: none;
}
.sign::before { left: 22.72%; transform: translateX(-50%); }
.sign::after  { left: 77.37%; transform: translateX(-50%); }

.sign__art {
  display: block;
  width: 100%;
  height: auto;
}
.sign__label {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%) rotate(-2deg);
  font-family: 'Permanent Marker', 'Bangers', cursive;
  font-size: 120px;
  color: #1a1a1a;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.06);
  pointer-events: none;
}

/* State: enter — house slides in, sign drops & swings */
.scene--1[data-overlay="enter"] .house,
.scene--1[data-overlay="hold"]  .house {
  transform: translateX(0) rotate(0deg);
}
.scene--1[data-overlay="enter"] .sign,
.scene--1[data-overlay="hold"]  .sign {
  top: 119px;
  animation: signSwing 2600ms var(--ease-out) 900ms 1 both;
}

/* State: exit — both retract the way they came */
.scene--1[data-overlay="exit"] .house {
  transform: translateX(140%) rotate(8deg);
  transition: transform 800ms var(--ease-in);
}
.scene--1[data-overlay="exit"] .sign {
  top: -432px;
  transition: top 900ms var(--ease-in);
  animation: none;
}

@keyframes signSwing {
  0%   { transform: rotate(-6deg); }
  18%  { transform: rotate(5deg); }
  38%  { transform: rotate(-3.2deg); }
  58%  { transform: rotate(2deg); }
  76%  { transform: rotate(-1.1deg); }
  90%  { transform: rotate(0.5deg); }
  100% { transform: rotate(0deg); }
}