/* PUPPY LEAFLET INTERACTIVE IMAGE */

.puppy-leaflet-map {
  position: relative;
  width: 100%;
  max-width: 1214px;
  margin: 0 auto;
  line-height: 0;
}

.puppy-leaflet-image {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
  margin: 0 auto;
}

/* LEAFLET LINKS */

.puppy-leaflet-link {
  position: absolute;
  display: block;
  box-sizing: border-box;
  z-index: 2;

  border: 2px solid #59351f;
  border-radius: 5px;
  background: rgba(89, 53, 31, 0.035);

  box-shadow:
    0 0 0 1px rgba(184, 134, 11, 0.4),
    0 0 6px rgba(89, 53, 31, 0.4),
    inset 0 0 4px rgba(89, 53, 31, 0.15);

  animation: puppy-leaflet-pulse 1.7s ease-in-out infinite;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;

  line-height: normal;
  -webkit-tap-highlight-color: transparent;
}

/* DESKTOP PULSE */

@keyframes puppy-leaflet-pulse {
  0%, 100% {
    border-color: #59351f;
    box-shadow:
      0 0 0 1px rgba(184, 134, 11, 0.35),
      0 0 5px rgba(89, 53, 31, 0.35),
      inset 0 0 3px rgba(89, 53, 31, 0.12);
  }

  50% {
    border-color: #b8860b;
    box-shadow:
      0 0 0 2px rgba(184, 134, 11, 0.8),
      0 0 12px rgba(89, 53, 31, 0.65),
      inset 0 0 6px rgba(89, 53, 31, 0.22);
  }
}

/* HOVER AND KEYBOARD FOCUS */

.puppy-leaflet-link:hover,
.puppy-leaflet-link:focus-visible {
  border-color: #b8860b;
  background: rgba(184, 134, 11, 0.1);
  box-shadow:
    0 0 0 2px rgba(184, 134, 11, 0.85),
    0 0 15px rgba(89, 53, 31, 0.7),
    inset 0 0 6px rgba(89, 53, 31, 0.2);

  animation: none;
  outline: none;
}

/* ACTIVE LINK */

.puppy-leaflet-link:active {
  border-color: #c18b32;
  background: rgba(184, 134, 11, 0.18);
  box-shadow:
    0 0 0 3px rgba(184, 134, 11, 0.9),
    0 0 18px rgba(89, 53, 31, 0.8),
    inset 0 0 7px rgba(89, 53, 31, 0.25);
}

/* PRELIMINARY LEAFLET POSITIONS */
/* Adjust these values after checking the image in the browser. */

/* VERTICAL LEAFLET FRAMES */

/* VERTICAL LEAFLET FRAMES */

/* FIRST THREE LEAFLETS */

/* FIRST THREE LEAFLETS */

/* FIRST THREE LEAFLETS */

/* FIRST THREE LEAFLETS */

/* FIRST THREE LEAFLETS */

.puppy-leaflet-1 {
  left: 58%;
  top: 11%;
  width: 11%;
  height: 15%;
  transform: rotate(-9deg);
  transform-origin: center center;
}

.puppy-leaflet-2 {
  left: 71%;
  top: 10%;
  width: 11%;
  height: 16%;
  transform: rotate(-5deg);
  transform-origin: center center;
}

.puppy-leaflet-3 {
  left: 85%;
  top: 11%;
  width: 11%;
  height: 16%;
  transform: rotate(1deg);
  transform-origin: center center;
}

.puppy-leaflet-4 {
  left: 67%;
  top: 42%;
  width: 11%;
  height: 14%;
  transform: rotate(-6deg);
  transform-origin: center center;
}

.puppy-leaflet-5 {
  left: 82%;
  top: 42%;
  width: 11%;
  height: 14%;
  transform: rotate(6deg);
  transform-origin: center center;
}
/* MOBILE SETTINGS */

@media (max-width: 600px) {
  .puppy-leaflet-link {
    border-width: 1px;
    border-radius: 4px;
    animation: puppy-leaflet-pulse-mobile 1.45s ease-in-out infinite;
  }

  .puppy-leaflet-link:hover,
  .puppy-leaflet-link:focus-visible {
    animation: none;
  }

  /* Stronger pulse for small screens */

  @keyframes puppy-leaflet-pulse-mobile {
    0%, 100% {
      border-color: #59351f;
      box-shadow:
        0 0 0 1px rgba(184, 134, 11, 0.55),
        0 0 5px rgba(89, 53, 31, 0.45),
        inset 0 0 3px rgba(89, 53, 31, 0.15);
    }

    50% {
      border-color: #c18b32;
      box-shadow:
        0 0 0 2px rgba(184, 134, 11, 0.95),
        0 0 13px rgba(89, 53, 31, 0.8),
        inset 0 0 6px rgba(89, 53, 31, 0.25);
    }
  }
}

/* REDUCED MOTION ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .puppy-leaflet-link {
    animation: none;
    border-color: #9b672e;
    box-shadow:
      0 0 0 2px rgba(184, 134, 11, 0.7),
      0 0 6px rgba(89, 53, 31, 0.45);
  }
}