:root {
  --bg: #0f1115;
  --amarillo: #f5c518;
  --tinta: #0f1115;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.screensaver {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ---------------------------------------------------------------
   El escenario replica a mano el comportamiento de object-fit:cover:
   mantiene la proporción de la imagen y se agranda hasta tapar la
   pantalla. Gracias a eso, un 50% del escenario es exactamente el
   centro de la foto, y las zonas clicables no se desalinean nunca.
   --ar = ancho / alto de la imagen que se está mostrando.
   --------------------------------------------------------------- */
.stage {
  --ar: 1.7768; /* 1672 / 941 — versión horizontal */

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: calc(100vw / var(--ar));
  min-width: calc(100vh * var(--ar));
  min-height: 100vh;
  animation: fade-in 900ms ease-out both;
}

.stage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------
   Zonas clicables. Las coordenadas son porcentajes de la imagen y
   cambian según la orientación, porque cada versión de la foto tiene
   a los perros en otro lugar.
   --------------------------------------------------------------- */
.dog {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.dog--ragnar {
  --x: 52.63%;
  --y: 20.72%;
  --w: 18.80%;
  --h: 60.57%;
}

.dog--valkiria {
  --x: 71.47%;
  --y: 29.22%;
  --w: 20.04%;
  --h: 49.95%;
}

@media (orientation: portrait) {
  .stage {
    --ar: 0.4745; /* 864 / 1821 — versión vertical */
  }

  .dog--ragnar {
    --x: 16.2%;
    --y: 43.93%;
    --w: 35.88%;
    --h: 31.3%;
  }

  .dog--valkiria {
    --x: 54.4%;
    --y: 46.95%;
    --w: 40.51%;
    --h: 28.56%;
  }
}

.dog:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 4px;
}

/* Punto que insinúa "acá se puede tocar". Desaparece una vez que
   ese perro ya fue descubierto. */
.dog__hint {
  position: absolute;
  top: 66%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transition: opacity 300ms ease, transform 300ms ease;
}

.dog__hint::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  animation: latido 2.4s ease-out infinite;
}

.dog.is-seen .dog__hint {
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}

/* Etiqueta con el nombre */
.dog__label {
  /* --nudge lo calcula el JS para que una frase larga no se salga
     de la pantalla; 0 mientras la etiqueta entra holgada. */
  --nudge: 0px;

  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translate(calc(-50% + var(--nudge)), 10px);
  scale: 0.92;
  opacity: 0;
  padding: 0.48em 0.9em;
  border-radius: 999px;
  background: rgba(15, 17, 21, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1.5px var(--amarillo);
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(16px, 3vmin, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
  text-wrap: balance;
  max-width: calc(100vw - 28px);
  pointer-events: none;
  transition:
    opacity 260ms ease,
    scale 320ms cubic-bezier(0.2, 0.9, 0.3, 1.25),
    transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

/* Puntita que conecta la etiqueta con el perro */
.dog__label::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: calc(-4.5px - var(--nudge));
  border-radius: 2px;
  background: var(--amarillo);
  transform: translateY(-4px) rotate(45deg);
}

.dog.is-open .dog__label {
  opacity: 1;
  transform: translate(calc(-50% + var(--nudge)), 0);
  scale: 1;
}

/* Cada click repetido reinicia este rebote: se siente como si el perro
   dijera algo nuevo, en vez de que el texto cambie sin aviso. */
.dog__label.is-pop {
  animation: hablar 380ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

@keyframes hablar {
  0% {
    scale: 0.86;
  }
  55% {
    scale: 1.06;
  }
  100% {
    scale: 1;
  }
}

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

@keyframes latido {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  70% {
    transform: scale(2.1);
    opacity: 0;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage,
  .dog__hint::before {
    animation: none;
  }

  .dog__label {
    transition-duration: 1ms;
  }

  .dog__label.is-pop {
    animation: none;
  }
}