/* ÁREA PREHISTÓRICA */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Efecto fade in al entrar en el Área Prehistórica */
body {
  opacity: 0;
  animation: fade-in-prehistorica 800ms ease-in-out forwards;
}

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

  to {
    opacity: 1;
  }
}

/* ESCENA E IMAGEN ACTIVA */

#escena {
  position: relative;
  width: min(80vw, 120dvh);
  max-width: 1228px;
  margin: auto;
  line-height: 0;
  flex-shrink: 0;
}

/* Tamaño de los tickets */
#escena.ticket {
  width: min(60vw, 750dvh);
  max-width: 600px;
}

#imagenActiva {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  transition: opacity 300ms ease-in-out;
}

#imagenActiva.desvaneciendo {
  opacity: 0;
}

/* ZONAS CLICABLES */

.zona {
  position: absolute;
  display: block;
  z-index: 3;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.zona:focus-visible {
  outline: 3px solid #f5c17a;
  outline-offset: 2px;
}

.zona[hidden] {
  display: none !important;
}

/* FOLLETO */

#zonaFolleto {
  left: 52.1%;
  top: 51.6%;
  width: 39.3%;
  height: 25.5%;
}

/* FOLLETO — REVELACIÓN DEL SELLO */

#zonaFolleto {
  background: #deb282;
  opacity: 0.96;
  filter: blur(7px);

  -webkit-mask-image: url("/media/images/area-prehistorica/folleto_acceso.png");
  mask-image: url("/media/images/area-prehistorica/folleto_acceso.png");

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  transition:
    opacity 600ms ease,
    filter 600ms ease;
}

#zonaFolleto:hover,
#zonaFolleto:focus-visible {
  opacity: 0;
  filter: blur(0);
}

/* TÚNELES */

#zona2002 {
  left: 6.5%;
  top: 24%;
  width: 29%;
  height: 68%;
  border-radius: 50%;
}

#zona2019 {
  left: 64%;
  top: 23%;
  width: 31%;
  height: 69%;
  border-radius: 50%;
}

/* OSCURECIMIENTO DIFUMINADO DE LOS TÚNELES */

.iluminacionTunel {
  position: absolute;
  z-index: 2;
  pointer-events: none;

  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.88) 35%,
    rgba(0, 0, 0, 0.7) 55%,
    rgba(0, 0, 0, 0.42) 70%,
    rgba(0, 0, 0, 0.18) 84%,
    rgba(0, 0, 0, 0.04) 95%,
    rgba(0, 0, 0, 0) 100%
  );

  filter: blur(12px);
  opacity: 1;
  transition: opacity 350ms ease-in-out;
}

.iluminacionTunel[hidden] {
  display: none !important;
}

/* Túnel izquierdo: versión 2002 */
#oscurecer2002 {
  left: 6.5%;
  top: 24%;
  width: 29%;
  height: 68%;
  border-radius: 50%;
}

/* Túnel derecho: versión 2019 */
#oscurecer2019 {
  left: 64%;
  top: 23%;
  width: 31%;
  height: 69%;
  border-radius: 50%;
}

/* Aclarar únicamente el túnel activo */
#escena:has(#zona2002:hover) #oscurecer2002,
#escena:has(#zona2002:focus-visible) #oscurecer2002,
#escena:has(#zona2019:hover) #oscurecer2019,
#escena:has(#zona2019:focus-visible) #oscurecer2019 {
  opacity: 0;
}

/* Desactivar las capas de los túneles en la escena de tickets */
#escena:not(.transicionando):has(#zonaTicket:not([hidden])) .iluminacionTunel {
  display: none !important;
}

/* TICKETS — HOVER  */

.zonaTicket2002,
.zonaTicket2019 {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  cursor: pointer;
}

/* Enlace sobre el ticket izquierdo de la versión 2002 */
.zonaTicket2002 {
  clip-path: polygon(0% 5%, 72% 5%, 77% 90%, 6% 90%);
}

/* Enlace sobre el ticket izquierdo de la versión 2019 */
.zonaTicket2019 {
  clip-path: polygon(0% 1%, 73% 1%, 76% 91%, 5% 91%);
}

#zonaTicketResto {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  background: transparent;
  cursor: default;
  pointer-events: auto;
}

/* Hover del lado derecho del ticket 2002 */
#zonaTicketResto.zonaTicketResto2002 {
  clip-path: polygon(72% 5%, 97% 2%, 100% 87%, 78% 90%);
}

/* Hover del lado derecho del ticket 2019 */
#zonaTicketResto.zonaTicketResto2019 {
  clip-path: polygon(73% 1%, 99% 0%, 100% 90%, 77% 91%);
}

/* CAPA DE OSCURECIMIENTO DEL TICKET */

#oscurecerTicket {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  display: block;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 2s ease;
}

/* Ocultar cuando no se muestra una escena de ticket */
#oscurecerTicket[hidden] {
  display: none !important;
}

/* Ticket 2002: mantener siempre definido su polígono */
#escena.ticket2002 #oscurecerTicket {
  clip-path: polygon(71.7% 5%, 99% 1%, 100% 88%, 77.1% 90%);
}

/* Ticket 2019: mantener siempre definido su polígono */
#escena.ticket2019 #oscurecerTicket {
  clip-path: polygon(72.5% 1%, 99% 0%, 100% 90%, 76.2% 91%);
}

/* Oscurecer únicamente mientras el cursor está fuera del ticket */
#escena.oscurecer2002 #oscurecerTicket,
#escena.oscurecer2019 #oscurecerTicket {
  opacity: 1;
}

/* Fundido de salida al pulsar el ticket */
#transicionSalida {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

#transicionSalida.activa {
  opacity: 1;
  pointer-events: auto;
}

/* ENLACE SALIR */

#enlaceSalida {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 10000;

  display: block;
  width: clamp(150px, 20vw, 240px);
  line-height: 0;

  opacity: 0.25;

  transition:
    opacity 500ms ease-in-out,
    transform 500ms ease,
    filter 500ms ease;
}

#enlaceSalida img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

#enlaceSalida:hover,
#enlaceSalida:focus-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1.07);
  filter: drop-shadow(0 0 10px rgba(245, 193, 122, 0.75));
}

#enlaceSalida:focus-visible {
  outline: 2px solid #f5c17a;
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-height: 500px) {
  #enlaceSalida {
    width: clamp(100px, 15vw, 160px);
    bottom: 6px;
  }
}