/* =========================================================
   KAYLEE-MP3 IDENTICAL PHOTOREALISTIC OUTRO
   ========================================================= */

.outro-wrap {
  display: flex;
  width: 100%;
  justify-content: center;
  overflow-x: auto;
  background: #151311;
}

.outro-scene {
  position: relative;
  flex: 0 0 auto;
  width: min(1023px, 100vw);
  aspect-ratio: 1023 / 1537;
  overflow: hidden;
  background-image: url("images/outro-scene.png?v=identical-1");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: 0 0 38px rgba(0, 0, 0, .58);
}

/* ---------------------------------------------------------
   WAVING GIF
   --------------------------------------------------------- */

.outro-gif-screen {
  position: absolute;
  z-index: 4;
  left: 49.85%;
  top: 24.53%;
  width: 40.05%;
  height: 28.43%;
  overflow: hidden;
  background: transparent;
  clip-path: polygon(
    11.75% 0,
    100% 10.30%,
    81.70% 100%,
    0 84.45%
  );
}

.outro-gif-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter:
    brightness(.86)
    saturate(.84)
    contrast(.98);
}

.outro-gif-screen img[hidden] {
  display: none;
}

/* ---------------------------------------------------------
   FULL-SCENE TRANSPARENT LAYERS
   --------------------------------------------------------- */

.outro-tama-screen-layer,
.outro-tama-pet-layer,
.outro-flame-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.outro-tama-screen-layer {
  z-index: 5;
}

.outro-tama-pet-layer {
  z-index: 6;
  transform: translateY(0);
}

.outro-tama-pet-layer.is-jumping {
  animation:
    outro-tama-jump
    .66s
    cubic-bezier(.2, .78, .22, 1);
}

@keyframes outro-tama-jump {
  0% {
    transform: translateY(0);
  }

  15% {
    transform: translateY(.18%);
  }

  43% {
    transform: translateY(-1.55%);
  }

  64% {
    transform: translateY(-1.75%);
  }

  83% {
    transform: translateY(.10%);
  }

  100% {
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
   TAMAGOTCHI CLICK AREA
   --------------------------------------------------------- */

.outro-tamagotchi-button {
  position: absolute;
  z-index: 9;
  left: 14.25%;
  top: 47.20%;
  width: 29.40%;
  height: 22.50%;
  padding: 0;
  border: 0;
  border-radius: 48%;
  background: transparent;
  touch-action: manipulation;
}

.outro-tamagotchi-button:focus-visible {
  outline:
    2px dotted
    rgba(244, 221, 168, .95);
  outline-offset: 5px;
}

/* ---------------------------------------------------------
   LIGHTER
   The full lighter is clickable; only the flame appears.
   --------------------------------------------------------- */

.outro-flame-layer {
  z-index: 7;
  opacity: 0;
  transition: opacity .13s ease;
  filter:
    drop-shadow(
      0 0 8px
      rgba(255, 186, 76, .78)
    );
}

.outro-scene.lighter-lit .outro-flame-layer {
  opacity: 1;
  animation:
    outro-flame-flicker
    .19s
    infinite
    alternate
    ease-in-out;
}

@keyframes outro-flame-flicker {
  from {
    opacity: .88;
    filter:
      brightness(.97)
      drop-shadow(
        0 0 7px
        rgba(255, 178, 62, .72)
      );
  }

  to {
    opacity: 1;
    filter:
      brightness(1.08)
      drop-shadow(
        0 0 12px
        rgba(255, 194, 82, .94)
      );
  }
}

.outro-lighter-button {
  position: absolute;
  z-index: 10;
  left: 44.25%;
  top: 57.55%;
  width: 23.00%;
  height: 28.50%;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: manipulation;
}

.outro-lighter-button:focus-visible {
  outline:
    2px dotted
    rgba(244, 221, 168, .95);
  outline-offset: 5px;
}

/* ---------------------------------------------------------
   REWIND NOTE
   --------------------------------------------------------- */

.outro-rewind-button {
  position: absolute;
  z-index: 10;
  left: 61.20%;
  top: 61.20%;
  width: 31.00%;
  height: 17.60%;
  padding: 0;
  border: 0;
  background: transparent;
  transform: rotate(6deg);
  touch-action: manipulation;
}

.outro-rewind-button:focus-visible {
  outline:
    2px dotted
    rgba(244, 221, 168, .95);
  outline-offset: 4px;
}

.outro-tamagotchi-button:active,
.outro-lighter-button:active,
.outro-rewind-button:active {
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .outro-tama-pet-layer,
  .outro-flame-layer {
    animation: none !important;
    transition: none !important;
  }
}