/* 1 ЭКРАН */

html, body {
  margin: 0;
  padding: 0;
  font-family: 'ElmaMono', monospace;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: auto;
}

.screen1 {
  height: 100vh;
  background: #D8D8D8;
  position: relative;
}

/*адаптив мобилка*/
.backphone{
  display: none;
}

.back {
  position: absolute;
  left: -8vw;
  top: 5vh;
  width: 110vw;
  z-index: 1;
}

.islands-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.island1{
  position: absolute;
  left: 13vw;
  top: 14vw;
  height: 8vw;
  z-index: 999;
}

.island2{
  position: absolute;
  z-index: 999;
  top: 12.5vw;
  left: 27vw;
  width: 12vw;
}

.island3{
  position: absolute;
  z-index: 999;
  top: 20vw;
  left: 15vw;
  width: 12vw;
  height: 13vw;
}

.island4{
  position: absolute;
  z-index: 999;
  top: 21vw;
  left: 5.5vw;
  height: 19vw;
  transform: rotate(-5deg);

}

.island5{
  position: absolute;
  z-index: 999;
  bottom: 4.5vw;
  left: 20vw;
}

.swarm {
  position: absolute;
  top: 55%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 39vw;
  height: 39vw;
  z-index: 2;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.orbit1 { width: 13vw; animation: spinReverse 200s linear infinite; }
.orbit2 { width: 23vw; animation: spinReverse 300s linear infinite; }
.orbit3 { width: 30vw; animation: spinClock 300s linear infinite; }
.orbit4 { width: 37vw; animation: spinClock 300s linear infinite; }

.bug-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.bug {
  position: absolute;
  width: 1.1vw;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.1s linear;
}


/*around island1*/
.bug1{left:14.7vw;top:22.6vh;}
.bug2{left:16.5vw;top:23.1vh;}
.bug3{left:17.2vw;top:25.8vh;}
.bug4{left:18vw;top:28.5vh;}
.bug5{left:19.5vw;top:30.3vh;}
.bug6{left:20.8vw;top:32.7vh;}
.bug7{left:20.4vw;top:36.4vh;}
.bug8{left:18.4vw;top:37.5vh;}
.bug9{left:17vw;top:38.4vh;}
.bug10{left:15.3vw;top:39.0vh;}
.bug11{left:13.7vw;top:38.0vh;}
.bug12{left:12.8vw;top:35.3vh;}
.bug13{left:12.0vw;top:32.5vh;}
.bug14{left:11.5vw;top:29.7vh;}
.bug15{left:11.6vw;top:26.0vh;}
.bug16{left:12.6vw;top:22.6vh;}

/*around island4*/
.bug17{left:13.1vw;top:39.6vh;}
.bug18{left:12.7vw;top:42.1vh;}
.bug19{left:12.7vw;top:45.0vh;}
.bug20{left:13.7vw;top:47.6vh;}
.bug21{left:15.0vw;top:49.6vh;}
.bug22{left:15.3vw;top:52.5vh;}
.bug23{left:14.2vw;top:54.1vh;}
.bug24{left:15.0vw;top:56.3vh;}
.bug25{left:17.2vw;top:55.0vh;}
.bug26{left:19.1vw;top:55.8vh;}
.bug27{left:20.5vw;top:57.9vh;}
.bug28{left:21.5vw;top:59.5vh;}
.bug29{left:20.5vw;top:62.4vh;}
.bug30{left:18.5vw;top:70vh;}
.bug31{left:20vw;top:65vh;}
.bug32{left:17vw;top:65vh;}
.bug33{left:16.1vw;top:70vh;}
.bug34{left:13.9vw;top:70vh;}
.bug36{left:12.0vw;top:65.0vh;}
.bug37{left:11.0vw;top:66.1vh;}
.bug38{left:9vw;top:67vh;}
.bug39{left:8.1vw;top:61.9vh;}
.bug40{left:7.5vw;top:56.7vh;}
.bug41{left:6.0vw;top:57.3vh;}
.bug61{left:13.6vw;top:65.1vh;}

/*around island3*/
.bug42{left:22.4vw;top:57.1vh;}
.bug43{left:23.7vw;top:55.1vh;}
.bug44{left:25.5vw;top:54.6vh;}
.bug45{left:27.4vw;top:53.0vh;}
.bug46{left:28.6vw;top:47.8vh;}
.bug47{left:28.1vw;top:43.6vh;}
.bug48{left:26.2vw;top:41.1vh;}
.bug49{left:24.5vw;top:38.6vh;}

/*around island2*/
.bug50{left:25.2vw;top:32.9vh;}
.bug51{left:24.2vw;top:34.7vh;}
.bug52{left:25.7vw;top:29.9vh;}
.bug53{left:25.8vw;top:26.3vh;}
.bug54{left:27.3vw;top:23.3vh;}
.bug55{left:29.4vw;top:23.6vh;}
.bug56{left:31.3vw;top:23.3vh;}
.bug57{left:33.5vw;top:21.9vh;}
.bug58{left:35.8vw;top:16.5vh;}
.bug59{left:34.9vw;top:19.4vh;}
.bug60{left:38vw;top:16vh;}

/*inside island5*/
.bug62{left:27vw;top:73vh;}
.bug63{left:27.7vw;top:76vh;}
/*around*/
.bug87{left:31.6vw;top:87.9vh;}
.bug97{left:35vw;top:80vh;}

/*left side*/
.bug64{left:10vw;top:15vh;}
.bug65{left:4.1vw;top:14.1vh;}
.bug66{left:1.9vw;top:18.8vh;}
.bug67{left:1.1vw;top:24.1vh;}
.bug68{left:1.1vw;top:28.7vh;}
.bug69{left:2.3vw;top:34.2vh;}
.bug70{left:3.8vw;top:38.2vh;}
.bug71{left:4vw;top:44.1vh;}
.bug72{left:4vw;top:48vh;}

/*right bottom*/
.bug73{left:63vw;top:91vh;}
.bug74{left:65vw;top:86vh;}
.bug75{left:66vw;top:82vh;}
.bug76{left:68.9vw;top:77vh;}
.bug77{left:72vw;top:74vh;}
.bug78{left:74.0vw;top:79.4vh;}
.bug79{left:74.3vw;top:86.5vh;}
.bug80{left:81vw;top:80vh;}

/*right top*/
.bug81{left:56.6vw;top:15.8vh;}
.bug82{left:60.5vw;top:17.3vh;}
.bug83{left:64.8vw;top:20.3vh;}
.bug84{left:71.7vw;top:28.6vh;}
.bug85{left:71.9vw;top:30.6vh;}
.bug86{left:72.4vw;top:34.9vh;}

/*left bottom*/
.bug88{left:5vw;top:78.5vh;}
.bug89{left:10vw;top:86vh;}
.bug90{left:6vw;top:84vh;}
.bug91{left:11.6vw;top:92vh;}
.bug92{left:15vw;top:93vh;}
.bug93{left:17vw;top:93vh;}
.bug94{left:20.4vw;top:92vh;}
.bug95{left:23.5vw;top:92vh;}
.bug96{left:27vw;top:91vh;}

/*text*/
.bug98{left:95.0vw;top:19.7vh;}

.mother {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.514vw;
  z-index: 5;
  animation: slight-wiggle 2s infinite ease-in-out;
}

.info {
  position: absolute;
  top: 1vh;
  left: 1vw;
  font-family: "ElmaMono";
  font-size: 1vw;
  line-height: 1.2;
  white-space: nowrap;
}

.title {
  position: absolute;
  top: 0.5vh;
  left: 0;
  width: 100%;
  font-family: "ElmaMono";
  font-weight: 400;
  font-size: 6vw;
  text-align: center;
  letter-spacing: 0.75vw;
  white-space: nowrap;
  margin: 0;
}

.head {
  position: absolute;
  bottom: 1.5vh;
  right: 1vw;
  width: 31vw;
  z-index: 5;
  transition: opacity 0.3s;
}

.exhibition-description {
  position: absolute;
  top: 17vh;
  right: 2vw;
  width: 20vw;
  text-align: left;
  line-height: 1.3;
  color: #000000;
  padding: 10px;
}

.tw {
  transform: translateY(0.3vw);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.1vw solid black;
  animation: blinkCursor 0.7s steps(1) infinite;
}

.exhibition-description p {
  margin: 0 0 1vh 0;
}

.marquee {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: white;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeMove 300s linear infinite;
}

.marquee span {
  white-space: nowrap;
  font-family: "ElmaMono";
  font-size: 1vw;
  padding-right: 2.7vw;
}

@keyframes slight-wiggle {
  0%   { transform: translate(-50%, -50%) translateX(0); }
  50%  { transform: translate(-50%, -50%) translateX(3px); }
  100% { transform: translate(-50%, -50%) translateX(0); }
}

@keyframes spinClock {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spinReverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes marqueeMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes blinkCursor {
  0%, 100% { border-color: black; }
  50% { border-color: transparent; }
}


/* 2 ЭКРАН */


.screen2 { position:relative; 
  width:100%; 
  height:100vh; 
  background:#d8d8d8; 
}

/*адаптив мобилка*/
.exhibition-description-phone { display: none; }
.backphone { display: none; }
.phone-about-title { display: none; }
.mazetablet { display: none; }


.overlay {
  position: absolute; 
  inset:0; 
  background:rgba(0,0,0,0.35);
  z-index:10; 
  opacity:0; 
  pointer-events:none; 
  transition:opacity .3s ease;
}

.overlay.active { 
  opacity:1; 
  pointer-events:auto; 
}

.popup {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.94);
  opacity:0; 
  pointer-events:none; 
  transition:.3s; 
  z-index:20; 
  cursor:pointer;
}

.popup.active {
  opacity:1; 
  transform:translate(-50%,-50%) scale(1); 
  pointer-events:auto;
}

.popup img { 
  display:block; 
  width:53vw; 
  max-width:560px; 
  min-width:280px; 
}

.maze-container {
  position:absolute; 
  inset:0; 
  overflow:hidden;
}

.maze {
  position:absolute; 
  top:.5vh; 
  left:2vw; 
  width:105vw;
}


/*костыли для работы лабиринта*/
.walls {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.wall {
  position: absolute;
  pointer-events: none;
}
.wall1  { 
  left: 18vw; 
  bottom: 0vw;  
  width: 60vw; 
  height: 15vh; 
}

.wall2 {
  left: 0vw; 
  bottom: 0vw;  
  width: 18vw; 
  height: 5vh; 

}

.wall3 {
  right: 10vw; 
  bottom: 0vw;  
  width: 12vw; 
  height: 5.5vh; 

}

.wall4 {
  right: 23vw; 
  bottom: 10vw;  
  width: 50vw; 
  height: 5vh; 

}

.wall5 {
  right: 0vw; 
  bottom: 10vw;  
  width: 18vw; 
  height: 5vh; 

}

.wall6 {
  right: 14vw; 
  bottom: 8vw;  
  width: 4vw; 
  height: 3vh; 

}

.wall7 {
  right: 0vw; 
  bottom: 0vw;  
  width: 10vw; 
  height: 18vh; 

}

.wall8 {
  right: 40vw; 
  bottom: 13vw;  
  width: 20vw; 
  height: 8vh; 

}

.wall9 {
  right: 37vw; 
  bottom: 18vw;  
  width: 7.5vw; 
  height: 5vh; 

}

.wall10 {
  right: 19vw; 
  bottom: 18vw;  
  width: 8vw; 
  height: 5vh; 

}

.wall11 {
  left: 0vw; 
  bottom: 3vw;  
  width: 5vw; 
  height: 15vh; 

}

.wall12 {
  right: 12vw; 
  bottom: 13vw;  
  width: 3vw; 
  height: 4vh; 

}

.wall13 {
  right: 48vw; 
  bottom: 23vw;  
  width: 5vw; 
  height: 4vh; 

}

.wall14  { 
  left: 25vw; 
  margin-top: 18vw;  
  width: 55vw; 
  height: 15vh; 
}

.wall15 {
  right: 50vw; 
  bottom: 18vw;  
  width: 7.5vw; 
  height: 5vh; 

}

.wall15 {
  right: 52vw; 
  bottom: 18vw;  
  width: 6vw; 
  height: 5vh; 

}

.wall16 {
  right: 65vw; 
  bottom: 21vw;  
  width: 12vw; 
  height: 10vh; 

}

.wall17 {
  left: 8vw; 
  bottom: 10vw;  
  width: 5vw; 
  height: 38vh; 

}

.wall18 {
  left: 16vw; 
  bottom: 32vw;  
  width: 2vw; 
  height: 4vh; 

}

.wall19 {
  left: 8vw; 
  top: 0vw;  
  width: 5vw; 
  height: 30vh; 

}

.wall20 {
  left: 4vw; 
  top: 17vw;  
  width: 5vw; 
  height: 15vh; 

}

.wall21 {
  right: 10vw; 
  bottom: 16vw;  
  width: 2vw; 
  height: 14vh; 

}

.wall22 {
  right: 10vw; 
  bottom: 25vw;  
  width: 7vw; 
  height: 14vh; 

}

.wall23 {
  right: 25vw; 
  top: 28vw;  
  width: 6vw; 
  height: 5vh; 

}

.wall24 {
  right: 23vw; 
  bottom: 22vw;  
  width: 2vw; 
  height: 4vh; 

}

.wall25 {
  right: 32vw; 
  bottom: 24vw;  
  width: 1vw; 
  height: 4vh; 

}

.wall26 {
  right: 59vw; 
  bottom: 27vw;  
  width: 15vw; 
  height: 4vh; 

}

.wall27 {
  left: 14vw; 
  bottom: 45vw;  
  width: 2vw; 
  height: 4vh; 

}

.wall28 {
  left: 24vw; 
  bottom: 40vw;  
  width: 6vw; 
  height: 5vh; 

}

.wall29 {
  left: 38vw; 
  bottom: 40vw;  
  width: 6vw; 
  height: 5vh; 

}

.wall30 {
  right: 0vw; 
  bottom: 40vw;  
  width: 26vw; 
  height: 5vh; 

}

.wall31 {
  right: 13vw; 
  top: 4vw;  
  width: 70vw; 
  height: 5vh; 

}

.wall32 {
  right: 36vw; 
  top: 8vw;  
  width: 13vw; 
  height: 5vh; 

}



.start, .finish {
  position:absolute; 
  font-family:'ElmaMono'; 
  font-size:1.75vw;
  background:#fff; 
  z-index:5;
}

.finish { 
  top:27vh; 
  right:13vw; 
}

.start  { 
  bottom:1vh; 
  right:13vw; 
}



.player-bug {
  position:absolute; 
  width:3vw; 
  transform-origin:50% 50%; 
  z-index:10;
}

.food, .poison {
  position:absolute; 
  width:2.5vw; 
  z-index:6; 
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,100% { transform:translateY(0); } 
  50% { transform:translateY(6px); }
}

.food1 { 
  top: 23vh; 
  left: 32.75vw; 
}

.food2 { 
  top:88vh; 
  left:10vw; 
}

.food3 { 
  top:49vh; 
  left:78.5vw; 
}

.food4 { 
  top:58vh; 
  left:70.5vw; 
}

.food5 { 
  top:61vh; 
  left:50vw; 
}

.poison1 { 
  top:36vh; 
  left:10vw; 
}

.poison2 { 
  top:48.5vh; 
  left:63vw; 
}

.poison3 { 
  top:70.5vh; 
  left:60vw; 
}




/* 3 ЭКРАН */

.screen3 {
  min-height: 100vh;
  background: #d8d8d8;
  position: relative;
  padding: 5vh 5vw 8vh;
  box-sizing: border-box;
  overflow: hidden;
}



/*адаптив мобилка*/
.mazeiphone {
  display: none;
}

.screen3-title {
  margin: 0 0 3vh 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6vw;
  font-family: 'ElmaMono', monospace;
  font-size: 3.2vw;
  font-weight: 400;
  letter-spacing: 0.18vw;
  text-align: center;
  position: relative;
  z-index: 5;
}

.gallery {
  display: flex;
  align-items: stretch;
  gap: 3vw;
  position: relative;
  z-index: 5;
}

.art-card {
  width: 29.5vw;
  display: flex;
  flex-direction: column;
}

.art-image {
  width: 100%;
  height: 32vw;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: default;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.95s ease, transform 0.45s ease;
  will-change: opacity, transform;
  position: relative;
  z-index: 5;
}

.art-image:hover {
  transform: scale(1.01);
}

.art-caption {
  background: #ffffff;
  padding: 1.2vw 1vw;
  box-sizing: border-box;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 10vw;
}

.art-caption p {
  margin: 0 0 0.5vw 0;
  font-family: 'ElmaMono', monospace;
  font-size: 1vw;
  line-height: 1.2;
  letter-spacing: 0.04vw;
  display: flex;
  justify-content: flex-start;
  gap: 0.5vw;
}

.art-caption p:last-child {
  margin-bottom: 0;
}

.tw-caption {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.08vw solid black;
  padding-right: 0.08vw;
  animation: blinkCaptionCursor 0.7s steps(1) infinite;
  vertical-align: baseline;
  min-width: 0.2vw;
}

.tw-caption.done {
  border-right: none;
  animation: none;
}

@keyframes blinkCaptionCursor {
  0%, 50% {
    border-right-color: black;
  }
  51%, 100% {
    border-right-color: transparent;
  }
}

.overlay-screen3 {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 101;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.overlay-screen3.active {
  opacity: 1;
  pointer-events: auto;
}

.popup-screen3 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  pointer-events: none;
  z-index: 102;
  transition: transform 0.35s ease, opacity 0.35s ease;
  cursor: pointer;
}

.popup-screen3.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.popup-screen3 img {
  width: 42vw;
  max-width: 760px;
  min-width: 320px;
  display: block;
}

/* жук в заголовке */
.bugwwings-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2vw;
  min-width: 28px;
  opacity: 0;
  pointer-events: none;
}

.bugwwings {
  width: 100%;
  display: block;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: brightness(0) saturate(100%) invert(68%) sepia(2%) saturate(100%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

.bugwwings-wrap.settled {
  opacity: 1;
  pointer-events: none;
}

.bugwwings-wrap.settled .bugwwings {
  opacity: 1;
  transform: scale(1);
  pointer-events: none;
  animation: bugSettle 3.2s ease-in-out infinite;
}

@keyframes bugSettle {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(1px, -1px) rotate(-2deg); }
  50%  { transform: translate(2px, 0px) rotate(2deg); }
  75%  { transform: translate(1px, 1px) rotate(-1deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* летающий жук */
.bugwwings-fly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.9vw;
  min-width: 40px;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  z-index: 100;
  pointer-events: none;
  display: none;
  cursor: pointer;
  will-change: transform, opacity;
}

.bugwwings-fly.visible {
  display: block;
}

.bugwwings-fly.entering {
  opacity: 1;
  pointer-events: auto;
  animation: bugEnter 2.8s ease-out forwards;
}

.bugwwings-fly.orbiting {
  opacity: 1;
  pointer-events: auto;
  animation: bugOrbit 6s ease-in-out infinite;
}

.bugwwings-fly.returning {
  animation: bugReturn 1.1s ease-in forwards;
}

.bugwwings-fly-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10vw;
  height: 10vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(166,165,164,0.8) 0%,
    rgba(166,165,164,0.2) 50%,
    transparent 80%);
  opacity: 0;
  filter: blur(12px);
}

.bugwwings-fly.glow .bugwwings-fly-glow {
  opacity: 1;
}

.bugwwings-fly-img {
  width: 100%;
  display: block;
  pointer-events: auto;
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(68%) sepia(2%) saturate(100%) hue-rotate(0deg) brightness(95%) contrast(90%);
}

@keyframes bugEnter {
  0% {
    transform: translate(-140%, -50%) scale(0.6);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes bugOrbit {
  0%   { transform: translate(-50%, -60%); }
  50%  { transform: translate(-48%, -45%); }
  100% { transform: translate(-50%, -60%); }
}

@keyframes bugReturn {
  0% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1);
  }
  100% {
    transform: translate(-220%, -180%) scale(0.4);
    opacity: 0;
  }
}

/* правый жук */
.bugscreen3 {
  width: 2.55vw;
  min-width: 24px;
  display: inline-block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: bugBuzz 1.1s infinite linear;
  position: relative;
  z-index: 20;
}

@keyframes bugBuzz {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(0.5px, -0.5px) rotate(-1deg); }
  50%  { transform: translate(-0.5px, 0.5px) rotate(1deg); }
  75%  { transform: translate(0.5px, 0.5px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (max-width: 900px) {
  .screen3 {
    padding: 5vh 4vw 7vh;
  }

  .screen3-title {
    font-size: 6.5vw;
    gap: 3vw;
    margin-bottom: 4vh;
  }

  .gallery {
    flex-direction: column;
    gap: 4vh;
  }

  .art-card {
    width: 100%;
  }

  .art-image {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .art-caption {
    padding: 16px 14px 12px;
  }

  .art-caption p {
    font-size: 18px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
  }

  .popup-screen3 img {
    width: 78vw;
    min-width: unset;
  }

  .bugwwings-fly {
    width: 10vw;
    min-width: 36px;
  }

  .bugwwings-wrap {
    width: 6vw;
  }

  .bugscreen3 {
    width: 5vw;
  }
}



/* 4 ЭКРАН */

.screen4 {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #d9d9d9;
  isolation: isolate;
}

.screen4__inner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 3.2vw 3.5vw 2.2vw;
}

.screen4__title {
  position: relative;
  z-index: 3;
  margin: 0;
  padding-top: 8.5vw;
  text-align: center;
  font-family: "elmamono", monospace;
  font-weight: 400;
  font-size: clamp(34px, 4.1vw, 78px);
  line-height: 1;
  letter-spacing: 0.08em;
  color: #231919;
  text-transform: uppercase;
}

.screen4__text {
  position: relative;
  z-index: 3;
  margin-top: 6.5vw;
  width: 100%;
  min-height: 32vw;
  font-family: "elmamono", monospace;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 72px);
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: #231919;
}

.screen4__line {
  position: relative;
  white-space: nowrap;
}

.screen4__line span {
  display: inline-block;
}

.screen4__line--1 {
  margin-left: 2vw;
}

.screen4__line--2 {
  margin-left: 31.5vw;
  margin-top: 0.9vw;
}

.screen4__line--3 {
  margin-left: 2vw;
  margin-top: 1.1vw;
}

.screen4__line--4 {
  margin-left: 2vw;
  margin-top: 1.1vw;
}

.screen4__line--5 {
  margin-left: 2vw;
  margin-top: 1.1vw;
}

/* ПУСТОТЫ */

.screen4__hole-btn {
  position: absolute;
  z-index: 20;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  cursor: default;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.screen4__hole-btn:hover {
  transform: scale(1.03);
}

.screen4__hole-btn.is-locked {
  cursor: default;
}

.hole-btn__img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.screen4__hole-btn--1 {
  left: 2vw;
  top: 4.2vw;
  width: 28vw;
  max-width: 405px;
}

.screen4__hole-btn--2 {
  right: 17.5vw;
  top: 7vw;
  width: 30vw;
  max-width: 435px;
}

.screen4__hole-btn--3 {
  right: 24vw;
  top: 14vw;
  width: 31vw;
  max-width: 450px;
}

.screen4__hole-btn--4 {
  right: 16vw;
  top: 18vw;
  width: 28vw;
  max-width: 405px;
}

/* ДЕКОРАТИВНЫЕ ЖУКИ */

.screen4__bug {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.screen4__bug--decor {
  pointer-events: none;
  z-index: 1;
}

.screen4__bug--top-left {
  top: 6.4vw;
  left: 24.2vw;
  width: clamp(28px, 2.8vw, 52px);
}

.screen4__bug--top-right {
  top: 25vw;
  right: 10vw;
  width: clamp(34px, 3.8vw, 74px);
}

.screen4__bug--bottom-left {
  left: 12.8vw;
  bottom: 10vw;
  width: clamp(34px, 3.8vw, 74px);
}

.bottombug{
  position: absolute;
  left: 50vw;
  bottom: 3vw;
  width: 3vw;
}

/* ГЛАВНЫЙ ЖУК */

.screen4__bug-trigger {
  position: absolute;
  right: 16vw;
  bottom: 3.2vh;
  width: 6vw;
  min-width: 60px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  display: block;
  cursor: pointer;
  z-index: 100;
  animation: screen4BugOrbit 4.2s linear infinite;
}

.screen4__bug--main {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  transform-origin: center center;
  animation: screen4BugFloat 1.2s ease-in-out infinite;
  transition: transform 0.2s ease;
}

.screen4__bug-trigger:hover .screen4__bug--main {
  transform: scale(1.06);
}

.screen4__bug-trigger.screen4-spinning .screen4__bug--main {
  animation:
    screen4BugFloat 1.2s ease-in-out infinite,
    screen4BugSpin 1s linear infinite;
}

/* ПОПАП */

.screen4__popup {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.screen4__popup.is-hidden {
  display: none;
}

.popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.popup__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44vw;
  max-width: 760px;
  min-width: 320px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.popup__img {
  width: 100%;
  display: block;
  pointer-events: none;
}

/* АНИМАЦИИ */

@keyframes screen4BugOrbit {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0.35vw, -0.45vh);
  }
  50% {
    transform: translate(0, -0.7vh);
  }
  75% {
    transform: translate(-0.35vw, -0.45vh);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes screen4BugFloat {
  0% {
    transform: rotate(-0.8deg);
  }
  50% {
    transform: rotate(0.8deg);
  }
  100% {
    transform: rotate(-0.8deg);
  }
}

@keyframes screen4BugSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ПОДВАЛ */

.footer {
  position: relative;
  width: 100%;
  height: 35.56vw;
  min-height: 300px;
  max-height: 512px;
  overflow: hidden;
  background: #d9d9d9;
}

.footer-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  overflow: visible;
}

.footer-running-text {
  font-family: 'ElmaMono', monospace;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: #111;
}

.footer-bug image {
  opacity: 0.75;
}

/* SVG-дырки */
.footer-hole {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.footerhole4{
  position: absolute;
  z-index: 2;
  width: 22vw;
  height: 10vw;
  right: 0vw;
}

/* Левая дырка */
.footer-hole-left {
  width: 31.5vw;
  min-width: 320px;
  max-width: 455px;
  left: 14vw;
  top: 4%;
  transform: rotate(-8deg);
}

/* Правая дырка */
.footer-hole-right {
  width: 25vw;
  min-width: 300px;
  max-width: 430px;
  right: 14.75vw;
  top: 6.5vw;
  transform: rotate(-10deg);
}

@media (max-width: 1024px) {
  .footer-running-text {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .footer {
    min-height: 240px;
  }

  .footer-running-text {
    font-size: 22px;
    letter-spacing: 0.05em;
  }

  .footer-hole-left {
    min-width: 220px;
    left: -2%;
    top: 8%;
  }

  .footer-hole-right {
    min-width: 220px;
    right: -8%;
    top: 40%;
  }
}

.screen4-phone,
.screen5-phone,
.screen6-phone,
.screen7-phone,
.footer-phone {
  display: none;
}