:root {
  --bg: #060a0f;
  --mint: #BAFFDF;
  --green: #24EF90;
  --orange: #FF7F30;
  --orangelight: #FFBE97;
  --blue: #24E1EF;
  --hint: #DAF9FC;
  --white: #fff;
}
.text-green {
  color: var(--green);
}
.text-orange {
  color: var(--orange);
}
.text-blue {
  color: var(--blue);
}
.text-white {
  color: var(--white);
}

@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Regular.woff2") format("woff2"),
       url("/fonts/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Bold.woff2") format("woff2"),
       url("/fonts/Roboto-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Black.woff2") format("woff2"),
       url("/fonts/Roboto-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("/fonts/Unbounded-Regular.woff2") format("woff2"),
       url("/fonts/Unbounded-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/fonts/Unbounded-Bold.woff2") format("woff2"),
       url("/fonts/Unbounded-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("/fonts/Unbounded-Black.woff2") format("woff2"),
       url("/fonts/Unbounded-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

::selection {
  background-color: var(--orange);
  color: var(--white);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
img {
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background-color: transparent;
  -webkit-user-drag: none;
}
button {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  font: inherit;
}
ul, ol {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:after, blockquote:before, q:after, q:before {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

[hidden] {
  display: none;
}
.unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}
.text-selectable {
  -webkit-user-select: text!important;
  -khtml-user-select: text!important;
  -moz-user-select: text!important;
  -o-user-select: text!important;
  user-select: text!important;
}

html {
  background: var(--bg);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar {
  display: none;
}
html,
body {
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
  color: var(--mint);
  font-family: "Roboto", sans-serif;
  font-size: clamp(8px, 0.8333vw, 30px);
  font-weight: 700;
  line-height: 1.5;
}
body {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url("/img/bg-1.avif") center/cover no-repeat;
  z-index: 0;
  opacity: 0;
  animation: BgFadeIn 0.1s ease-out 0.8s forwards;
}
.btn-green {
  width: 19.2625rem;
  height: 4.8875rem;
  background: url("/img/btn-green.avif") center/contain no-repeat;
  font-family: "Roboto", sans-serif;
  font-size: 1.656rem;
  font-weight: 700;
  color: var(--mint);
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 0 18px rgba(0, 255, 136, 0.7)) drop-shadow(0 0 4px rgba(0, 255, 136, 0.7)) brightness(1);
}
.btn-green:hover {
  filter: drop-shadow(0 0 24px rgba(0, 255, 136, 0.9)) drop-shadow(0 0 8px rgba(0, 255, 136, 0.9)) brightness(1.1);
  animation-play-state: paused;
  color: var(--white);
}
.btn-blue {
  width: 19.2625rem;
  height: 4.8875rem;
  background: url("/img/btn-blue.avif") center / contain no-repeat;
  font-family: "Roboto", sans-serif;
  font-size: 1.656rem;
  font-weight: 700;
  color: var(--hint);
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 0 18px rgba(33, 221, 237, 0.7)) drop-shadow(0 0 4px rgba(33, 221, 237, 0.7)) brightness(1);
}
.btn-blue:hover {
  filter: drop-shadow(0 0 24px rgba(33, 221, 237, 0.9)) drop-shadow(0 0 8px rgba(33, 221, 237, 0.9)) brightness(1.1);
  color: var(--white);
}
.btn-orange {
  width: 19.2625rem;
  height: 4.8875rem;
  background: url("/img/btn-orange.avif") center / contain no-repeat;
  font-family: "Roboto", sans-serif;
  font-size: 1.656rem;
  font-weight: 700;
  color: var(--orangelight);
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 0 18px rgba(255, 152, 112, 0.7)) drop-shadow(0 0 4px rgba(255, 152, 112, 0.7)) brightness(1);
}
.btn-orange:hover {
  filter: drop-shadow(0 0 24px rgba(255, 152, 112, 0.9)) drop-shadow(0 0 8px rgba(255, 152, 112, 0.9)) brightness(1.1);
  color: var(--white);
}


/* screen-1 */
.panel {
  position: absolute;
  top: 7rem;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 20;
  display: flex;
  align-items: stretch;
  gap: 0.9rem;
}
.panel-subtitle-left,
.panel-subtitle-right {
  width: 10.82rem;
  height: 9.27rem;
  background: url("/img/subtitle.avif") center/contain no-repeat;
  padding: 1rem;
  display: block;
  color: var(--hint);
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 1.44rem;
  font-weight: 400;
  line-height: 1.2;
  opacity: 0;
}
.panel-subtitle-left {
  padding-top: 1.8rem;
}
.screen-1.show .panel-subtitle-left {
  animation: PanelSubLeftIn 0.8s ease-out 0.1s forwards;
}
.screen-1.show .panel-subtitle-right {
  animation: PanelSubRightIn 0.8s ease-out 0.1s forwards;
}
.screen-1.opened .panel-subtitle-left {
  animation: PanelSubLeftOut 0.8s ease-out forwards;
}
.screen-1.opened .panel-subtitle-right {
  animation: PanelSubRightOut 0.8s ease-out forwards;
}
.panel-title {
  width: 28.58rem;
  height: 9.27rem;
  background: url("/img/title.avif") center/contain no-repeat;
  display: block;
  opacity: 0;
  transform: translate(0, -100%);
}
.screen-1.show .panel-title {
  animation: PanelTitleIn 0.8s ease-out 0.1s forwards;
}
.screen-1.strong .panel-title {
  animation: PanelTitleOut 0.8s ease-out forwards;
}
.panel-title-text {
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #FF984E -62.11%, #DAFEFC 74.21%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding: 1.8rem 2.7rem 0;
  font-family: "Unbounded", sans-serif;
  font-size: 2.34rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--mint);
}

.start-btn {
  position: absolute;
  top: 33rem;
  left: 50%;
  z-index: 60;
  transform: translate(-50%, 100%);
  opacity: 0;
}
.screen-1.show .start-btn {
  animation: StartAppear 0.8s ease-out 0.3s forwards, StartBlink 2s ease-out 1.1s infinite;
}
.screen-1.strong .start-btn {
  animation: StartBtnOut 0.8s ease-out forwards;
}
.doors {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 94vh;
  background: var(--bg);
  transform: scale(1, 1);
  opacity: 1;
}
.screen-1.opened .doors {
  transform: scale(4, 4);
  opacity: 0;
  transition: transform 1.6s ease-out 3.6s, opacity 0.8s ease-out 4.4s;
}
.doors-bg {
  width: 119.7rem;
  height: 65rem;
  background: var(--bg) url("/img/bg-1.avif") center/auto no-repeat;
  position: relative;
  top: 0;
  left: 50%;
  z-index: 5;
  transform: translate(-50%, 0%) scale(1, 1);
  filter: blur(5px);
  opacity: 1;
}
.screen-1.opened .doors-bg {
  transform: translate(-50%, 0%) scale(0.6, 0.6);
  filter: blur(0);
  opacity: 0;
  transition: transform 1.6s ease-out 3.6s, filter 2.4s ease-out 2.4s, opacity 1.6s ease-out 3.6s;
}
.doors-locked {
  width: 119.7rem;
  height: 67.5rem;
  background: url("/img/doors-locked.avif") center/cover no-repeat;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 20;
  transition: opacity 0.4s ease-out;
}
.screen-1.unlocked .doors-locked {
  opacity: 0;
  transition: opacity 0.4s ease-out 0.2s;
}

.doors-unlocked {
  width: 119.7rem;
  height: 67.5rem;
  background: url("/img/doors-unlocked.avif") center/cover no-repeat;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 10;
}
.doors-item {
  width: 50rem;
  height: 35.55rem;
  position: absolute;
  top: 18.2rem;
  left: 50%;
  z-index: 9;
  transform: translate(-50%, 0%);
  overflow: hidden;
}
.doors-item-l-l,
.doors-item-l-c,
.doors-item-r-c,
.doors-item-r-r {
  position: absolute;
  top: 0;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.doors-item-l-l {
  width: 14.22rem;
  left: 0%;
  background-image: url("/img/doors-l-l.avif");
  transform: translate(0%, 0%);
  z-index: 7;
}
.doors-item-l-c {
  width: 11.79rem;
  left: 50%;
  background-image: url("/img/doors-l-c.avif");
  transform: translate(-100%, 0%);
  z-index: 6;
}
.doors-item-r-c {
  width: 11.79rem;
  right: 50%;
  background-image: url("/img/doors-r-c.avif");
  transform: translate(100%, 0%);
  z-index: 6;
}
.doors-item-r-r {
  width: 14.22rem;
  right: 0%;
  background-image: url("/img/doors-r-r.avif");
  transform: translate(0%, 0%);
  z-index: 7;
}

.screen-1.opened .doors-item-l-l {
  transform: translate(-85%, 0%);
  transition: transform 0.8s ease-in-out 2.8s;
}
.screen-1.opened .doors-item-l-c {
  animation: DoorsLeftCenterOpen 0.8s ease-in-out 1.6s forwards, DoorsLeftOpen 0.8s ease-in-out 2.8s forwards;
}
.screen-1.opened .doors-item-r-r {
  transform: translate(85%, 0%);
  transition: transform 0.8s ease-in-out 2.8s;
}
.screen-1.opened .doors-item-r-c {
  animation: DoorsRightCenterOpen 0.8s ease-in-out 1.6s forwards, DoorsRightOpen 0.8s ease-in-out 2.8s forwards;
}
.fume-left,
.fume-right {
  position: absolute;
  left: 50%;
  top: 35.24rem;
  z-index: 30;
  width: 29.16rem;
  height: 15.12rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  opacity: 0;
}
.fume-left {
  background-image: url("/img/fume-l-c.avif");
  transform: translate(-100%, 0);
}
.fume-right {
  background-image: url("/img/fume-r-c.avif");
  transform: translate(0, 0);
}
.fume-left::before,
.fume-right::before {
  content: '';
  position: absolute;
  top: 0;
  z-index: 31;
  width: 29.16rem;
  height: 15.12rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.fume-left::before {
  right: 50%;
  background-image: url("/img/fume-l-l.avif");
  transform: rotate(-30deg);
}
.fume-right::before {
  left: 50%;
  background-image: url("/img/fume-r-r.avif");
  transform: rotate(30deg);
}

.screen-1.opened .fume-left {
  animation: FumeLeftOpen 2s ease-in-out 1.2s forwards;
}
.screen-1.opened .fume-right {
  animation: FumeRightOpen 2s ease-in-out 1.2s forwards;
}
.screen-1.opened .fume-left::before {
  animation: FumeLeftBeforeOpen 1.2s ease-in-out 1.6s forwards;
}
.screen-1.opened .fume-right::before {
  animation: FumeRightBeforeOpen 1.2s ease-in-out 1.6s forwards;
}
.strongbox {
  width: 42.3rem;
  height: 42.3rem;
  background: url("/img/strongbox.avif") center/contain no-repeat;
  position: absolute;
  top: 6rem;
  left: 50%;
  z-index: 50;
  transform: translate(-50%, 100%);
  opacity: 0;
  transition: transform 0.8s ease-out 0.4s, opacity 0.8s ease-out 0.4s;
}
.screen-1.strong .strongbox {
  animation: StrongboxIn 0.8s ease-out 0.8s forwards;
}
.screen-1.opened .strongbox {
  animation: StrongboxOut 0.8s ease-in forwards;
}
.strongbox-btn {
  position: absolute;
  bottom: 9.5%;
  left: 50%;
  width: 34%;
  height: 14%;
  background: url("/img/strongbox-btn.avif") center/contain no-repeat;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 31;
  filter: drop-shadow(0 0 18px rgba(255, 127, 48, 0.7)) drop-shadow(0 0 4px rgba(255, 127, 48, 0.7));
  animation: BtnPuls 2s ease-out 0s infinite;
}
.strongbox-btn:hover {
  filter: drop-shadow(0 0 18px rgba(255, 127, 48, 0.7)) drop-shadow(0 0 4px rgba(255, 127, 48, 0.7)) brightness(1);
  animation-play-state: paused;
}
.strongbox-btn:active {
  filter:  drop-shadow(0 0 18px rgba(255, 127, 48, 0.7)) !important;
  animation-play-state: paused;
}
.strongbox-btn.locked {
  filter: none;
  cursor: default;
}
.screen-1.push .strongbox-btn {
  animation: BtnPush 0.4s ease-out 0s forwards;
}
.strongbox-zipp-left,
.strongbox-zipp-right {
  width: 29.5%;
  height: 30.1%;
  position: absolute;
  top: 10.3%;
}
.strongbox-zipp-left {
  left: 19.5%;
}
.strongbox-zipp-right {
  right: 19.5%;
}
.strongbox-zipp-left-t,
.strongbox-zipp-right-t,
.strongbox-zipp-left-b,
.strongbox-zipp-right-b,
.strongbox-zipp-left-r,
.strongbox-zipp-right-r,
.strongbox-zipp-left-l,
.strongbox-zipp-right-l {
  width: 1.71rem;
  height: 1.71rem;
  background: url("/img/zipp.avif") center/contain no-repeat;
  position: absolute;
  z-index: 32;
}
.strongbox-zipp-right-b,
.strongbox-zipp-left-r {
  background: url("/img/key.avif") center/contain no-repeat;
}
.screen-1.unlocked-left .strongbox-zipp-left-t,
.screen-1.unlocked-right .strongbox-zipp-right-t,
.screen-1.unlocked-left .strongbox-zipp-left-b,
.screen-1.unlocked-right .strongbox-zipp-right-r,
.screen-1.unlocked-left .strongbox-zipp-left-l,
.screen-1.unlocked-right .strongbox-zipp-right-l {
  filter: grayscale(90%);
}
.strongbox-zipp-left-t,
.strongbox-zipp-right-t {
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0);
}
.strongbox-zipp-left-r,
.strongbox-zipp-right-r {
  right: 0%;
  top: 50%;
  transform: translate(0, -50%);
}
.strongbox-zipp-left-b,
.strongbox-zipp-right-b {
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0);
}
.strongbox-zipp-left-l,
.strongbox-zipp-right-l {
  left: 0%;
  top: 50%;
  transform: translate(0, -50%);
}

.strongbox-switch {
  position: absolute;
  width: 19%;
  height: 19%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  z-index: 32;
  transition: transform 0.3s ease;
}
.screen-1.wink-left .strongbox-switch-left,
.screen-1.wink-right .strongbox-switch-right {
  animation: SwitchWinkIn 0.4s ease;
}
.strongbox-switch-left {
  left: 25%;
  top: 16%;
  background-image: url("/img/switch-left.avif");
}
.strongbox-switch-right {
  right: 25%;
  top: 16%;
  background-image: url("/img/switch-right.avif");
}
.strongbox-indicator {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translateX(-49%);
  width: 57%;
  height: 30%;
  background: url("/img/strongbox-indicator.avif") left center no-repeat;
  background-size: contain;
  z-index: 32;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.1s linear;
}
.strongbox-indicator.hold {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 2.4s linear;
}

.strongbox-hint {
  width: 19%;
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translateX(-50%) scale(1);
  font-family: "Unbounded", sans-serif;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--hint);
  text-align: center;
  line-height: 1.5;
  pointer-events: none;
}
.screen-1.wink .strongbox-hint,
.screen-1.unhold .strongbox-hint,
.screen-1.push .strongbox-hint {
  animation: HintWinkIn 0.4s ease;
}
.strongbox-hint-1,
.strongbox-hint-2,
.strongbox-hint-3 {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.2s ease-out;
}
.strongbox-hint-2,
.strongbox-hint-3 {
  opacity: 0;
}
.screen-1.unlocked .strongbox-hint-1 {
  opacity: 0;
}
.screen-1.unlocked .strongbox-hint-2 {
  opacity: 1;
}
.screen-1.opened .strongbox-hint-2 {
  opacity: 0;
}
.screen-1.opened .strongbox-hint-3 {
  opacity: 1;
}

.screen-1.hide .doors,
.screen-1.hide .doors-bg,
.screen-1.hide .doors-locked,
.screen-1.hide .doors-unlocked,
.screen-1.hide .doors-item,
.screen-1.hide .fume-left,
.screen-1.hide .fume-right,
.screen-1.hide .strongbox {
  opacity: 0;
  visibility: hidden;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  line-height: 0 !important;
  overflow: hidden !important;
  position: fixed !important;
  z-index: -1;
  display: none !important;
}

/* /screen-1 */


/* screen-2 */
.luggage {
  position: relative;
  width: 100%;
  min-height: 94vh;
  overflow: hidden;
  padding-top: 8rem;
}
.luggage-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  position: relative;
  z-index: 10;
}
.luggage-panel-title {
  width: 23.4375rem;
  height: 9.6875rem;
  background: url("/img/luggage-panel-title.avif") center / contain no-repeat;
  padding: 1.25rem 2rem 1.5rem;
  display: block;
  filter: drop-shadow(0 41px 40px rgba(0, 0, 0, 0.60));
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hint);
  opacity: 0;
  transform: translate(-100%, 0);
}
.screen-2.show .luggage.show .luggage-panel-title {
  animation: LuggagePanelTitleIn 0.8s ease-out 0.1s forwards;
}
.luggage-panel-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}
.luggage-panel-info-select {
  width: 16.1875rem;
  height: 5.5rem;
  background: url("/img/luggage-panel-info-select.avif") center / contain no-repeat;
  padding: 1.2rem 2rem;
  filter: drop-shadow(0 41px 40px rgba(0, 0, 0, 0.60));
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transform: translate(100%, 0);
}
.screen-2.show .luggage.show .luggage-panel-info-select {
  animation: LuggagePanelInfoSelectIn 0.8s ease-out 0.1s forwards;
}
.luggage-panel-info-available {
  width: 16.25rem;
  height: 3.625rem;
  background: url("/img/luggage-panel-info-available.avif") center / contain no-repeat;
  padding: 1rem;
  filter: drop-shadow(0 41px 40px rgba(0, 0, 0, 0.60));
  font-family: "Roboto", sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--orange);
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transform: translate(100%, 0);
}
.screen-2.show .luggage.show .luggage-panel-info-available {
  animation: LuggagePanelInfoAvailableIn 1.2s ease-out 0.1s forwards;
}
.luggage-boxs {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 0;
}
.luggage-box {
  width: 43.375rem;
  height: 35.5625rem;
  position: relative;
  display: block;
  cursor: pointer;
  filter: grayscale(0.2) brightness(0.8);
  transition: all 0.4s ease-out;
  pointer-events: auto;
}
.luggage-box * {
  pointer-events: none;
}
.luggage-box.box-hover {
  animation: LuggageBoxHover 0.8s ease-out forwards;
}
.luggage-box.box-leave {
  animation: LuggageBoxLeave 0.4s ease-out forwards !important;
}
.luggage-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: block;
  cursor: pointer;
  transform: scale(0.8);
  transition: all 0.4s ease-out;
}
.luggage-box.box-hover .luggage-bg {
  animation: LuggageBgHover 0.8s ease-out forwards;
}
.luggage-box.box-leave .luggage-bg {
  animation: LuggageBgLeave 0.4s ease-out forwards !important;
}
.luggage-bg-orange {
  background: url("/img/luggage-box-orange.avif") center / contain no-repeat;
}
.luggage-bg-green {
  background: url("/img/luggage-box-green.avif") center / contain no-repeat;
}
.luggage-bg-blue {
  background: url("/img/luggage-box-blue.avif") center / contain no-repeat;
}

.luggage-fume {
  position: absolute;
  top: -5rem;
  left: 50%;
  z-index: 8;
  width: 46.1875rem;
  height: 27.9375rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
  transition: all 0.4s ease-out;
}
.luggage-box.box-hover .luggage-fume {
  animation: LuggageFumeHover 0.8s ease-out 0.4s forwards;
}
.luggage-box.box-leave .luggage-fume {
  animation: LuggageFumeLeave 0.4s ease-out forwards !important;
}
.luggage-fume-orange {
  background-image: url("/img/fume-orange.avif");
}
.luggage-fume-green {
  background-image: url("/img/fume-green.avif");
}
.luggage-fume-blue {
  background-image: url("/img/fume-blue.avif");
}

.luggage-img {
  width: 90%;
  height: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%) scale(0.9);
  transition: all 0.4s ease-out;
}
.luggage-box.box-hover .luggage-img {
  animation: LuggageImgHover 0.8s ease-out forwards;
}
.luggage-box.box-leave .luggage-img {
  animation: LuggageImgLeave 0.4s ease-out forwards !important;
}

.luggage-items {
  display: flex;
  gap: 0.3rem;
  position: absolute;
  top: 19.5rem;
  left: 50%;
  z-index: 11;
  opacity: 0;
  transform: translate(-50%, -5rem);
  transition: all 0.4s ease-out;
}
.luggage-box.box-hover .luggage-items {
  animation: LuggageItemsHover 0.4s ease-out 0.4s forwards;
}
.luggage-box.box-leave .luggage-items {
  animation: LuggageItemsLeave 0.4s ease-out forwards !important;
}
.luggage-item {
  width: 9rem;
  height: 6.235rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.luggage-item-orange {
  background: url("/img/luggage-item-orange.avif") center / contain no-repeat;
}
.luggage-item-green {
  background: url("/img/luggage-item-green.avif") center / contain no-repeat;
}
.luggage-item-blue {
  background: url("/img/luggage-item-blue.avif") center / contain no-repeat;
}

.luggage-item-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.luggage-item-orange .luggage-item-img {
  filter:
    drop-shadow(0 0 1px rgba(255, 127, 48, 0.80))
    drop-shadow(0 0 1px rgba(255, 127, 48, 0.80))
    drop-shadow(0 0 4px rgba(255, 127, 48, 0.40))
    drop-shadow(0 0 3px rgba(255, 127, 48, 0.50))
    drop-shadow(0 0 2px rgba(255, 127, 48, 0.60));
}
.luggage-item-green .luggage-item-img {
  filter:
    drop-shadow(0 0 1px rgba(36, 239, 144, 0.80))
    drop-shadow(0 0 1px rgba(36, 239, 144, 0.80))
    drop-shadow(0 0 4px rgba(36, 239, 144, 0.40))
    drop-shadow(0 0 3px rgba(36, 239, 144, 0.50))
    drop-shadow(0 0 2px rgba(36, 239, 144, 0.60));
}
.luggage-item-blue .luggage-item-img {
  filter:
    drop-shadow(0 0 1px rgba(33, 221, 237, 0.80))
    drop-shadow(0 0 1px rgba(33, 221, 237, 0.80))
    drop-shadow(0 0 4px rgba(33, 221, 237, 0.40))
    drop-shadow(0 0 3px rgba(33, 221, 237, 0.50))
    drop-shadow(0 0 2px rgba(33, 221, 237, 0.60));
}

.luggage-btn {
  position: absolute;
  top: 27rem;
  left: 50%;
  z-index: 12;
  margin: 0 auto;
  opacity: 0;
  transform: translate(-50%, -10rem);
  transition: all 0.4s ease-out;
}
.luggage-box.box-hover .luggage-btn {
  animation: LuggageBtnHover 0.4s ease-out 0.4s forwards;
}
.luggage-box.box-leave .luggage-btn {
  animation: LuggageBtnLeave 0.4s ease-out forwards !important;
}

.luggage-steam {
  position: absolute;
  top: 35rem;
  left: 50%;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: inherit;
  cursor: pointer;
  width: 100%;
  justify-content: center;
  opacity: 0;
  transform: translate(-50%, -5rem);
  transition: all 0.4s ease-out;
}
.luggage-box.box-hover .luggage-steam {
  animation: LuggageSteamHover 0.4s ease-out 0.4s forwards;
}
.luggage-box.box-leave .luggage-steam {
  animation: LuggageSteamLeave 0.4s ease-out forwards !important;
}
.steam-orange {
  color: var(--orange);
}
.steam-green {
  color: var(--green);
}
.steam-blue {
  color: var(--blue);
}
.luggage-steam::before {
  content: '';
  display: inline-block;
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
}
.steam-orange::before {
  background: url("/img/steam-orange.avif") center / contain no-repeat;
}
.steam-green::before {
  background: url("/img/steam-green.avif") center / contain no-repeat;
}
.steam-blue::before {
  background: url("/img/steam-blue.avif") center / contain no-repeat;
}

.luggage-steam:hover {
  opacity: 1;
}


.thanks {
  position: relative;
  width: 100%;
  min-height: 94vh;
  overflow: hidden;
  padding-top: 8rem;
}
.thanks .bg {
  width: 100%;
  height: 100%;
  background: url("/img/bg-2.avif") center / cover no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.thanks-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  position: relative;
  z-index: 5;
}
.thanks-panel-access {
  width: 14.5625rem;
  height: 3.5625rem;
  background: url("/img/thanks-panel-access.avif") center / contain no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--green);
  opacity: 0;
  transform: translate(-100%, 0);
  transition: all 0.4s ease-out;
}
.screen-2.show .thanks.show .thanks-panel-access {
  animation: ThanksPanelAccessIn 0.4s ease-out 0.6s forwards;
}
.thanks-panel-title {
  width: 23.4375rem;
  height: 10.4375rem;
  background: url("/img/thanks-panel-title.avif") center / contain no-repeat;
  display: block;
  padding: 1rem;
  opacity: 0;
  transform: translate(0, -5rem);
  transition: all 0.4s ease-out;
}
.screen-2.show .thanks.show .thanks-panel-title {
  animation: ThanksPanelTitleIn 0.4s ease-out 0.6s forwards;
}
.thanks-panel-title-text {
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #24EF90 -62.11%, #DAFEFC 74.21%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  padding: 1rem 1rem 0;
  font-family: "Unbounded", sans-serif;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
}
.thanks-panel-continue {
  width: 18.1875rem;
  height: 5.5rem;
  background: url("/img/thanks-panel-continue.avif") center / contain no-repeat;
  display: block;
  padding: 1rem;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1.5;
  opacity: 0;
  transform: translate(100%, 0);
  transition: all 0.4s ease-out;
}
.screen-2.show .thanks.show .thanks-panel-continue {
  animation: ThanksPanelContinueIn 0.4s ease-out 0.6s forwards;
}
.spawn {
  position: relative;
  z-index: 6;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 0;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
}
.spawn-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
  position: relative;
}
.spawn-left {
  position: relative;
  width: 46rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 7;
}

.spawn-loadout {
  position: absolute;
  top: 1.3rem;
  left: 0;
  z-index: 5;
  width: 8rem;
  border-radius: 6.25rem;
  padding: 0.6rem 0 0.5rem;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 1.0125rem;
  line-height: 1;
  font-weight: 400;
  opacity: 0;
  transition: all 0.4s ease-out;
}
.screen-2.show .thanks.show .spawn-loadout {
  animation: SpawnLoadoutIn 0.8s ease-out 0.6s forwards;
}
.spawn-loadout-orange {
  background: radial-gradient(78.88% 100.97% at 50.34% 103.88%, rgba(255, 127, 48, 0.60) 0%, rgba(255, 127, 48, 0.00) 100%), #1D2F37;
  box-shadow: 0 0 4px 0 #FF7F30 inset, 0 0 30px 0 rgba(40, 45, 96, 0.60) inset;
  color: var(--orangelight);
}
.spawn-loadout-green {
  background: radial-gradient(78.88% 100.97% at 50.34% 103.88%, rgba(36, 239, 144, 0.60) 0%, rgba(36, 239, 144, 0.00) 100%), #1D2F37;
  box-shadow: 0 0 4px 0 #24EF90 inset, 0 0 30px 0 rgba(36, 239, 144, 0.60) inset;
  color: var(--mint);
}
.spawn-loadout-blue {
  background: radial-gradient(78.88% 100.97% at 50.34% 103.88%, rgba(36, 239, 252, 0.60) 0%, rgba(36, 239, 252, 0.00) 100%), #1D2F37;
  box-shadow: 0 0 4px 0 #24ECFC inset, 0 0 30px 0 rgba(36, 236, 252, 0.60) inset;
  color: var(--hint);
}

.spawn-line {
  width: 70rem;
  height: 14rem;
  position: absolute;
  top: -1.8rem;
  left: 8.5rem;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: all 0.4s ease-out;
}
.screen-2.show .thanks.show .spawn-line {
  animation: SpawnLineIn 0.8s ease-out 0.6s forwards;
}
.spawn-line-orange {
  background: url("/img/line-orange.avif") left top / contain no-repeat;
}
.spawn-line-green {
  background: url("/img/line-green.avif") left top / contain no-repeat;
}
.spawn-line-blue {
  background: url("/img/line-blue.avif") left top / contain no-repeat;
}

.spawn-fume {
  position: absolute;
  top: -3rem;
  left: 50%;
  z-index: 9;
  width: 46.1875rem;
  height: 27.9375rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
  transition: all 0.4s ease-out;
  animation: SpawnFumeIn 0.2s ease-out 0.2s forwards;
}
.spawn-fume-orange {
  background-image: url("/img/fume-orange.avif");
}
.spawn-fume-green {
  background-image: url("/img/fume-green.avif");
}
.spawn-fume-blue {
  background-image: url("/img/fume-blue.avif");
}
.spawn-img {
  display: block;
  margin-top: 2rem;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  transform: translate(0, -30rem);
  transition: all 0.4s ease-out;
}
.screen-2.show .thanks.show .spawn-img {
  animation: SpawnImgIn 0.4s ease-out forwards, SpawnImgBlimp 1.6s ease-out 0.8s infinite;
}
.spawn-right {
  flex: 0 0 auto;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.spawn-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: all 0.4s ease-out;
}
.screen-2.show .thanks.show .spawn-items {
  animation: SpawnItemsIn 0.4s ease-out 0.6s forwards;
}
.spawn-items:nth-child(2) {
  padding: 0 0 0 7rem;
}
.spawn-item {
  position: relative;
  width: 14.625rem;
  height: 13.9125rem;
  display: block;
  padding: 0;
}
.spawn-item:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: all 0.4s ease-out;
}
.screen-2.show .thanks.show .spawn-item:nth-child(2) {
  animation: SpawnItemIn 0.4s ease-out 0.6s forwards;
}
.spawn-item-orange {
  background: url("/img/spawn-item-orange.avif") center / contain no-repeat;
}
.spawn-item-green {
  background: url("/img/spawn-item-green.avif") center / contain no-repeat;
}
.spawn-item-blue {
  background: url("/img/spawn-item-blue.avif") center / contain no-repeat;
}
.spawn-item-img {
  width: 80%;
  margin: 0 auto;
  filter: brightness(1);
  transform: scale(1);
  transition: all 0.2s ease-out;
}
.spawn-item-img:hover {
  filter: brightness(1.2);
  transform: scale(1.1);
}
.spawn-item-orange .spawn-item-img {
  filter:
    drop-shadow(0 0 1px rgba(255, 127, 48, 0.80))
    drop-shadow(0 0 1px rgba(255, 127, 48, 0.80))
    drop-shadow(0 0 4px rgba(255, 127, 48, 0.40))
    drop-shadow(0 0 3px rgba(255, 127, 48, 0.50))
    drop-shadow(0 0 2px rgba(255, 127, 48, 0.60));
}
.spawn-item-green .spawn-item-img {
  filter:
    drop-shadow(0 0 1px rgba(36, 239, 144, 0.80))
    drop-shadow(0 0 1px rgba(36, 239, 144, 0.80))
    drop-shadow(0 0 4px rgba(36, 239, 144, 0.40))
    drop-shadow(0 0 3px rgba(36, 239, 144, 0.50))
    drop-shadow(0 0 2px rgba(36, 239, 144, 0.60));
}
.spawn-item-blue .spawn-item-img {
  filter:
    drop-shadow(0 0 1px rgba(33, 221, 237, 0.80))
    drop-shadow(0 0 1px rgba(33, 221, 237, 0.80))
    drop-shadow(0 0 4px rgba(33, 221, 237, 0.40))
    drop-shadow(0 0 3px rgba(33, 221, 237, 0.50))
    drop-shadow(0 0 2px rgba(33, 221, 237, 0.60));
}
.spawn-item-info {
  position: absolute;
  top: 9.8rem;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: center;
}
.spawn-item-type {
  width: 90%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--green);
  line-height: 1;
  margin: 0 auto;
}
.spawn-item-type::before {
  content: "";
  width: 100%;
  height: 1px;
  display: inline-block;
  z-index: 13;
}
.spawn-item-type::after {
  content: "";
  width: 100%;
  height: 1px;
  display: inline-block;
  z-index: 13;
}
.spawn-item-type-orange::before {
  background: linear-gradient(to right, transparent, #FFA500);
}
.spawn-item-type-orange::after {
  background: linear-gradient(to right, #FFA500, transparent);
}
.spawn-item-type-green::before {
  background: linear-gradient(to right, transparent, #24EF90);
}
.spawn-item-type-green::after {
  background: linear-gradient(to right, #24EF90, transparent);
}
.spawn-item-type-blue::before {
  background: linear-gradient(to right, transparent, #24ECFC);
}
.spawn-item-type-blue::after {
  background: linear-gradient(to right, #24ECFC, transparent);
}

.spawn-item-type-text {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 0.25rem;
  z-index: 14;
}
.spawn-item-name {
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--white);
  line-height: 1;
}
.spawn-btn {
  flex-shrink: 0;
  position: relative;
  top: -6rem;
  z-index: 30;
  opacity: 0;
  transform: translate(0, 100%);
  transition: all 0.4s ease-out;
}
.screen-2.show .thanks.show .spawn-btn.btn-orange {
  animation: SpawnBtnIn 0.4s ease-out 0.6s forwards, StartBlinkOrange 2s ease-out infinite;
}
.screen-2.show .thanks.show .spawn-btn.btn-green {
  animation: SpawnBtnIn 0.4s ease-out 0.6s forwards, StartBlinkGreen 2s ease-out infinite;
}
.screen-2.show .thanks.show .spawn-btn.btn-blue {
  animation: SpawnBtnIn 0.4s ease-out 0.6s forwards, StartBlinkBlue 2s ease-out infinite;
}
/* /screen-2 */


/* screens */
.screen-1,
.screen-2 {
  opacity: 0;
  visibility: hidden;
  height: 0;
  padding: 0;
  margin: 0;
  border: none;
  line-height: 0;
  overflow: hidden;
  position: fixed;
  z-index: -1;
  display: none;
}
.screen-1.show,
.screen-2.show {
  position: relative;
  height: auto;
  opacity: 1;
  visibility: visible;
  z-index: 100;
  display: block;
}
.thanks,
.luggage {
  display: none;
}
.thanks.show,
.luggage.show {
  display: block;
}
.spawn-1,
.spawn-2,
.spawn-3 {
  display: none;
}
.thanks[data-item_show="1"] .spawn-1 {
  display: flex;
}
.thanks[data-item_show="2"] .spawn-2 {
  display: flex;
}
.thanks[data-item_show="3"] .spawn-3 {
  display: flex;
}
/* /screens */


/* main */
.mb {
  display: none;
}

.main {
  position: relative;
  min-height: 94vh;
  padding: 0;
}
.content {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
}

.spin {
  width: 3.6rem;
  height: 3.6rem;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: SpinRotate 1.6s infinite;
}
.spin:before,
.spin:after {
  border-radius: 50%;
  content: "";
  display: block;
  height: 3.6rem;
  width: 3.6rem;
}
.spin:before {
  animation: SpinBall1 1s infinite;
  background-color: var(--mint);
  box-shadow: 3.6rem 0 0 var(--orange);
  margin-bottom: 3.6rem;
}
.spin:after {
  animation: SpinBall2 1s infinite;
  background-color: var(--orange);
  box-shadow: 3.6rem 0 0 var(--mint);
}
.body.show .spin {
  animation-play-state: paused;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease-out;
}
.spin.hide {
  display: none;
  animation-play-state: stopped;
}
/* /main */


/* header */
.header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 2.4rem 9.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.header-logo {
  display: inline-grid;
  align-self: center;
}

.header-logo-img {
  width: 20rem;
}
/* /header */


/* footer */
.footer {
  position: relative;
  z-index: 100;
  margin: auto auto 0;
  width: 100%;
  background: linear-gradient(180deg, #162031 0%, #010101 100%);
  border-radius: 1.25rem 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.footer-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 3.6rem;
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: var(--hint);
}
.footer-container:first-child {
  border-bottom: 1px solid rgba(218, 249, 252, 0.05);
}
.footer-container:last-child {
  opacity: 0.4;
}
.edge {
  opacity: 0.65;
}

.rules {
  display: flex;
  gap: 3rem;
}
.rules-link {
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
}
.rules-link:hover {
  opacity: 1;
  color: var(--mint);
}
.footer-site {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}
.footer-info {
  display: flex;
  flex-direction: column;
}
.footer-info a {
  color: inherit;
  transition: color 0.2s;
}
.footer-info a:hover {
  color: var(--mint);
}
/* /footer */


/* terms */
.terms {
  width: 100%;
  max-width: 74vw;
  margin: 0 auto;
  padding: 14rem 0;
  color: var(--white);
  font-family: "Roboto", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
}
.terms-content {
  background: rgb(23, 41,  61, 90%);
  padding: 4rem;
  border-radius: 1rem;
}
.terms h1 {
  color: var(--white);
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.terms h1:after {
  content: "";
  position: relative;
  width: 20vw;
  height: 2px;
  display: block;
  background: linear-gradient(90deg, #87493400 0%, #c97c6b 50.2%, #87493400 100%);
  border: none;
  margin: 1.25rem auto 3.75rem;
}
.terms h2 {
  margin: 2.5rem 0 1.25rem;
  color: #c97c6b;
  font-family: "Roboto", sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}
.terms h3 {
  margin: 1.875rem 0 0.625rem;
  color: var(--white);
  font-family: "Roboto", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}
.terms:selection {
  background-color: #5baef1;
}
.terms :is(li, p) {
  margin: 0.3125rem 0;
}
.terms strong {
  font-weight: 700;
}
.terms ol {
  list-style-type: decimal;
  padding-left: 4vw;
}
.terms ul {
  list-style-type: disc;
  padding-left: 4vw;
}
/* /terms */

/* cookies */
.cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  display: none;
  pointer-events: none;
  padding: 0;
}
.cookies.show {
  display: block;
  animation: CookiesSlideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Inner container */
.cookies-inner {
  position: relative;
  max-width: 66.667vw;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5625vw;
  padding: 1.25vw 2.0833vw;
  background: rgba(5, 8, 12, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.052vw solid rgba(0, 255, 136, 0.18);
  border-bottom: none;
  border-radius: 0.4167vw 0.4167vw 0 0;
  box-shadow:
    0 0 1.0417vw rgba(0, 255, 136, 0.10),
    0 0 3.125vw  rgba(0, 255, 136, 0.05),
    inset 0 1px 0 rgba(218, 249, 252, 0.06);
  pointer-events: auto;
}
.cookies-content {
  flex: 1;
  min-width: 0;
}
.cookies-title {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 0.3646vw;
  background: linear-gradient(135deg, #DAF9FC 0%, #24EF90 55%, #BAFFDF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cookies-text {
  font-family: "Unbounded", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(218, 249, 252, 0.60);
}
.cookies-text a {
  color: var(--mint);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s;
}
.cookies-text a:hover {
  color: var(--green);
}
.cookies-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.cookies-btn {
  position: relative;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #BAFFDE;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 2.0833vw;
  height: 2.7778vh;
  min-width: 7.8125vw;
  background: #1D2F37;
  clip-path: polygon(
    0.5em 0%, calc(100% - 0.5em) 0%,
    100% 0.5em, 100% calc(100% - 0.5em),
    calc(100% - 0.5em) 100%, 0.5em 100%,
    0% calc(100% - 0.5em), 0% 0.5em);
  filter:
    drop-shadow(0 0 0.3125vw rgba(0, 255, 136, 0.65))
    drop-shadow(0 0 0.7292vw rgba(0, 255, 136, 0.45))
    drop-shadow(0 0 1.3021vw rgba(0, 255, 136, 0.25));
  transition: filter 0.2s, transform 0.15s;
  white-space: nowrap;
}
.cookies-btn:hover {
  filter:
    drop-shadow(0 0 0.4167vw rgba(0, 255, 136, 0.90))
    drop-shadow(0 0 1.0417vw rgba(0, 255, 136, 0.65))
    drop-shadow(0 0 1.8229vw rgba(0, 255, 136, 0.40));
  transform: scale(1.04);
}
.cookies-btn:active {
  transform: scale(0.97);
  filter:
    drop-shadow(0 0 0.2604vw rgba(0, 255, 136, 0.40))
    drop-shadow(0 0 0.5208vw rgba(0, 255, 136, 0.25));
}
/* /cookies */


@media (max-width: 767px) {
  .footer {
    border-radius: 0;
  }

  .footer-container:first-child {
    height: auto;
    min-height: 10vw;
    padding: 2.5vw 5vw;
    flex-wrap: wrap;
    gap: 2vw;
    font-size: 1.4rem;
  }

  .footer-container:last-child {
    padding: 1.5vw 5vw 2.5vw;
    font-size: 1.4rem;
    flex-wrap: wrap;
    gap: 1.5vw;
    height: auto;
  }

  .edge {
    position: static;
    transform: none;
  }

  .rules {
    gap: 3.4091vw;
    flex-wrap: wrap;
  }

  .footer-info {
    gap: 3vw;
    flex-wrap: wrap;
  }

  html, body { overflow-x: hidden; }

  .dk {
    display: none;
  }
  .mb {
    display: block;
  }

  .main {
    padding: 19vw 0 0;
  }

  .header {
    padding: 2rem;
  }
  .header-logo {
    margin: 0 auto;
  }

  .header-logo-img {
    width: 15vw;
  }

  .cookies-inner {
    gap: 3vw;
    padding: 3.5vw 4vw;
    max-width: 90vw;
  }
  .cookies-title {
    font-size: 1rem;
    margin-bottom: 1.5vw;
  }
  .cookies-text {
    font-size: 1rem;
  }
  .cookies-btn {
    font-size: 1.5rem;
  }


  /* screen-1 */
  .panel {
    top: 4vw;
    flex-wrap: wrap;
    width: 92vw;
    gap: 2vw;
  }

  .screen-1.strong .panel {
    transform: translate(-50%, -30vw);
    transition: all 0.4s ease-out;
    align-items: self-end;
  }

  .panel-title {
    order: -1;
    flex: 0 0 100%;
    width: 90vw;
    height: 30vw;
  }

  .panel-title-text {
    font-size: 9vw;
    padding: 4vw 2vw 0;
  }

  .panel-subtitle-left,
  .panel-subtitle-right {
    flex: 0 0 44vw;
    width: 48vw;
    font-size: 4.2vw;
    text-align: left;
  }
  .panel-subtitle-left {
    background: url("/img/subtitle-left-m.avif") center / contain no-repeat;
    height: 17vw;
    padding: 3vw 4vw;
  }
  .panel-subtitle-right {
    background: url("/img/subtitle-right-m.avif") center / contain no-repeat;
    height: 24vw;
    padding: 4.5vw 4vw;
  }

  .start-btn {
    top: 46vh;
    width: 78vw;
    height: 14vw;
    font-size: 5vw;
  }

  .doors {
    overflow: hidden;
  }

  .doors-bg {
    width: 150vw;
    background-size: cover;
    top: 50%;
    transform: translate(-50%, -50%) scale(1, 1);
  }
  .screen-1.opened .doors-bg {
    transform: translate(-50%, -50%) scale(0.6, 0.6);
  }

  .doors-locked,
  .doors-unlocked {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .doors-item {
    top: 50%;
    transform: translate(-50%, -44%);
  }

  .fume-left,
  .fume-right {
    width: 38vw;
    height: 20vw;
    top: 120vw;
  }

  .strongbox {
    width: 120vw;
    height: 120vw;
    top: 32vw;
  }
    .strongbox-zipp-left, .strongbox-zipp-right {
    width: 28.5%;
    height: 29.1%;
    top: 10.8%;
  }
  .strongbox-zipp-left {
    left: 19.9%;
  }
  .strongbox-zipp-right {
    right: 19.9%;
  }
  .strongbox-hint {
    font-size: 1.3rem;
    line-height: 1.3;
  }
  .btn-green {
    width: 36vw;
    height: 9vw;
    font-size: 3vw;
    padding: 0;
  }

  /* /screen-1 */


  /* luggage */

  .luggage {
    padding-top: 2vw;
    min-height: auto;
  }

  .luggage-panel {
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    padding: 0 4vw;
  }

  .luggage-panel-title {
    width: 90vw;
    height: 30vw;
    padding: 4vw;
    font-size: 10vw;
  }

  .luggage-panel-info {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2vw;
  }

  .luggage-panel-info-select {
    width: 50vw;
    height: 17vw;
    padding: 2.5vw 5vw;
    font-size: 4.5vw;
  }

  .luggage-panel-info-available {
    width: 52vw;
    height: 12vw;
    padding: 3vw 5vw;
    font-size: 4.5vw;
    order: -1;
    margin-top: -7vw;
  }

  .luggage-boxs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    align-items: center;
    padding: 10vw;
    gap: 4vw;
    scrollbar-width: none;
  }

  .luggage-boxs::-webkit-scrollbar {
    display: none;
  }

  .luggage-box {
    width: 84vw;
    height: 70vw;
    flex-shrink: 0;
    scroll-snap-align: center;
    margin: 0 auto;
  }

  .luggage-fume {
    width: 94vw;
    height: 57vw;
    top: -10vw;
  }

  .luggage-items {
    top: 39.5vw;
  }

  .luggage-item {
    width: 18vw;
    height: 13vw;
    padding: 1vw;
  }

  .luggage-btn {
    top: 54vw;
  }

  .luggage-steam {
    top: 73vw;
    font-size: 3vw;
  }

  .luggage-steam::before {
    width: 5vw;
    height: 5vw;
  }
  
  .luggage-box {
    animation: none !important;
    transition: filter 0.5s ease-out;
    filter: grayscale(0.2) brightness(0.8);
  }
  .luggage.show .luggage-box {
    filter: grayscale(0) brightness(1) !important;
  }

  .luggage-bg {
    animation: none !important;
    transition: transform 0.5s ease-out;
    transform: scale(0.8);
  }
  .luggage.show .luggage-bg {
    transform: scale(1) !important;
  }

  .luggage-fume {
    animation: none !important;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  .luggage.show .luggage-fume {
    opacity: 1 !important;
    transform: translateX(-50%) scale(1) !important;
  }

  .luggage-img {
    animation: none !important;
    transition: transform 0.5s ease-out;
    transform: translate(-50%, -50%) scale(0.9);
  }
  .luggage.show .luggage-img {
    transform: translate(-50%, -80%) scale(1) !important;
  }

  .luggage-items {
    animation: none !important;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    opacity: 0;
    transform: translate(-50%, -5rem);
  }
  .luggage.show .luggage-items {
    opacity: 1 !important;
    transform: translate(-50%, 0%) !important;
  }

  .luggage-btn {
    animation: none !important;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    opacity: 0;
    transform: translate(-50%, -10rem);
  }
  .luggage.show .luggage-btn {
    opacity: 1 !important;
    transform: translate(-50%, 0%) !important;
  }

  .luggage-steam {
    animation: none !important;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    opacity: 0;
    transform: translate(-50%, -5rem);
  }
  .luggage.show .luggage-steam {
    opacity: 1 !important;
    transform: translate(-50%, 0%) !important;
  }
  /* /luggage */


  /* thanks */
  .thanks {
    padding-top: 2vw;
  }

  .thanks-panel {
    flex-direction: column;
    align-items: center;
    gap: 2vw;
    padding: 0 4vw;
  }

  .thanks-panel-access {
    width: 50vw;
    height: 17vw;
    padding: 2.5vw 5vw;
    font-size: 4.5vw;
    margin-bottom: -8vw;
    position: relative;
    z-index: 10;
  }

  .thanks-panel-title {
    width: 90vw;
    height: 30vw;
  }

  .thanks-panel-title-text {
    padding: 4vw;
    font-size: 9vw;
  }

  .thanks-panel-continue {
    width: 54vw;
    height: 15vw;
    padding: 2vw 5vw;
    font-size: 3.8vw;
    text-align: center;
    margin-top: -7vw;
    z-index: 10;
  }

  .spawn {
    padding: 0;
    margin-top: 0;
  }
  .spawn-body {
    flex-direction: column;
    align-items: center;
  }
  .spawn-left {
    width: 100%;
    align-items: center;
  }
  .spawn-loadout {
    top: 34vw;
    left: auto;
    padding: 1.5vw 0;
    font-size: 3.5vw;
    z-index: 20;
    width: 33vw;
  }
  .spawn-line {
    display: none;
  }
  .spawn-fume {
    width: 100vw;
    height: 60vw;
    top: -10vw;
  }
  .spawn-img {
    width: 90%;
  }
  .spawn-right {
    width: 100%;
    padding: 0 2vw;
    margin-top: -17vw;
  }

  .spawn-items {
    justify-content: center;
    gap: 2vw;
  }
  .spawn-items:nth-child(2) {
    padding: 0;
    transform: translate(0%, -50%);
  }
  .screen-2.show .thanks.show .spawn-items {
    animation: SpawnItemsIn 0.4s ease-out 0.6s forwards;
  }
    .screen-2.show .thanks.show .spawn-items:nth-child(2) {
    animation: SpawnItemsTwoIn 0.4s ease-out 0.6s forwards;
  }
    .spawn-item {
    width: 37vw;
    height: 35vw;
  }
  .spawn-item:nth-child(2) {
    opacity: 1;
    transform: translate(0%, 0%);
  }
  .screen-2.show .thanks.show .spawn-item:nth-child(2) {
    animation: none !important;
  }

  .spawn-item-info {
    top: 26vw;
  }
  .spawn-item-type {
    font-size: 2.5vw;
  }
  .spawn-item-name {
    font-size: 3vw;
  }
  .spawn-btn {
    top: 4vw;
    width: 80vw;
    height: 17vw;
    font-size: 5vw;
  }
  /* /thanks */


}


/* ============================================================
   luggage box keyframes
   ============================================================ */

@media (min-width: 2800px) {
  .luggage,
  .thanks {
    padding-top: 2rem;
  }
}

/* ==========================================================================
   @keyframes
   ========================================================================== */

@keyframes BgFadeIn {
  to { opacity: 1; }
}
@keyframes PanelSubLeftIn {
  0% {
    opacity: 0;
    transform: translate(-60%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes PanelSubRightIn {
  0% {
    opacity: 0;
    transform: translate(60%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes PanelSubLeftOut {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  10% {
    opacity: 1;
    transform: translate(5%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-60%, 0);
  }
}
@keyframes PanelSubRightOut {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  10% {
    opacity: 1;
    transform: translate(-5%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(60%, 0);
  }
}
@keyframes PanelTitleIn {
  0% {
    opacity: 0;
    transform: translate(0, -100%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes PanelTitleOut {
  0% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -100%);
  }
}
@keyframes StartAppear {
  0% {
    opacity: 0;
    transform: translate(-50%, 100%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes StartBlink {
  0%   {
    filter: drop-shadow(0 0 18px rgba(0, 255, 136, 0.7)) drop-shadow(0 0 4px rgba(0, 255, 136, 0.7)) brightness(1);
  }
  50%  {
    filter: drop-shadow(0 0 24px rgba(0, 255, 136, 0.9)) drop-shadow(0 0 8px rgba(0, 255, 136, 0.9)) brightness(1.1);
  }
  100% {
    filter: drop-shadow(0 0 18px rgba(0, 255, 136, 0.7)) drop-shadow(0 0 4px rgba(0, 255, 136, 0.7)) brightness(1);
  }
}
@keyframes StartBlinkOrange {
  0%   {
    filter: drop-shadow(0 0 18px rgba(255, 127, 48, 0.7)) drop-shadow(0 0 4px rgba(255, 127, 48, 0.7)) brightness(1);
  }
  50%  {
    filter: drop-shadow(0 0 24px rgba(255, 127, 48, 0.9)) drop-shadow(0 0 8px rgba(255, 127, 48, 0.9)) brightness(1.1);
  }
  100% {
    filter: drop-shadow(0 0 18px rgba(255, 127, 48, 0.7)) drop-shadow(0 0 4px rgba(255, 127, 48, 0.7)) brightness(1);
  }
}
@keyframes StartBlinkGreen {
  0%   {
    filter: drop-shadow(0 0 18px rgba(36, 239, 144, 0.7)) drop-shadow(0 0 4px rgba(36, 239, 144, 0.7)) brightness(1);
  }
  50%  {
    filter: drop-shadow(0 0 24px rgba(36, 239, 144, 0.9)) drop-shadow(0 0 8px rgba(36, 239, 144, 0.9)) brightness(1.1);
  }
  100% {
    filter: drop-shadow(0 0 18px rgba(36, 239, 144, 0.7)) drop-shadow(0 0 4px rgba(36, 239, 144, 0.7)) brightness(1);
  }
}
@keyframes StartBlinkBlue {
  0%   {
    filter: drop-shadow(0 0 18px rgba(33, 221, 237, 0.7)) drop-shadow(0 0 4px rgba(33, 221, 237, 0.7)) brightness(1);
  }
  50%  {
    filter: drop-shadow(0 0 24px rgba(33, 221, 237, 0.9)) drop-shadow(0 0 8px rgba(33, 221, 237, 0.9)) brightness(1.1);
  }
  100% {
    filter: drop-shadow(0 0 18px rgba(33, 221, 237, 0.7)) drop-shadow(0 0 4px rgba(33, 221, 237, 0.7)) brightness(1);
  }
}
@keyframes StartBtnOut {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 100%);
    z-index: -1;
  }
}
@keyframes DoorsLeftCenterOpen {
  0%   {
    transform: translate(-100%, 0%);
  }
  100%  {
    transform: translate(-190%, 0%);
  }
}
@keyframes DoorsLeftOpen {
  0%   {
    transform: translate(-190%, 0%);
  }
  100% {
    transform: translate(-290%, 0%);
  }
}
@keyframes DoorsRightCenterOpen {
  0%   {
    transform: translate(100%, 0%);
  }
  100%  {
    transform: translate(190%, 0%);
  }
}
@keyframes DoorsRightOpen {
  0%   {
    transform: translate(190%, 0%);
  }
  100% {
    transform: translate(290%, 0%);
  }
}
@keyframes FumeLeftOpen {
  0%   {
    opacity: 0;
  }
  30%   {
    opacity: 1;
    transform: translate(-100%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-200%, -20%);
  }
}
@keyframes FumeRightOpen {
  0%   {
    opacity: 0;
    transform: translate(0%, 0);
  }
  30%   {
    opacity: 1;
    transform: translate(0%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(100%, -20%);
  }
}
@keyframes FumeLeftBeforeOpen {
  0%   {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(-60deg) translate(50%, 50%);
  }
}
@keyframes FumeRightBeforeOpen {
  0%   {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(60deg) translate(-50%, 50%);
  }
}
@keyframes StrongboxIn {
  0% {
    opacity: 0;
    transform: translate(-50%, 100%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
}
@keyframes StrongboxOut {
  0% {
    opacity: 1;
    transform: translate(-50%, 0%);
  }
  5% {
    transform: translate(-50%, -5%);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 100%);
  }
}
@keyframes BtnPuls {
  0%   {
    filter: drop-shadow(0 0 18px rgba(255, 127, 48, 0.7)) drop-shadow(0 0 4px rgba(255, 127, 48, 0.7)) brightness(1);
  }
  50%  {
    filter: drop-shadow(0 0 18px rgba(255, 127, 48, 0.7)) drop-shadow(0 0 8px rgba(255, 127, 48, 0.7)) brightness(1.1);
  }
  100% {
    filter: drop-shadow(0 0 18px rgba(255, 127, 48, 0.7)) drop-shadow(0 0 4px rgba(255, 127, 48, 0.7)) brightness(1);
  }
}
@keyframes BtnPush {
  0%   {
    transform: translateX(-50%) scale(1);
  }
  30%   {
    transform: translateX(-50%) scale(0.98);
  }
  60%   {
    transform: translateX(-50%) scale(1);
  }
  80% {
    transform: translateX(-50%) scale(0.96);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}
@keyframes SwitchWinkIn {
  0%   {
    filter: none;
  }
  30%  {
    filter: drop-shadow(0 0 8px var(--orange)) brightness(1.2);
  }
  60%  {
    filter: none;
  }
  80%  {
    filter: drop-shadow(0 0 8px var(--orange)) brightness(1.4);
  }
  100% {
    filter: none;
  }
}
@keyframes HintWinkIn {
  0%   {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }
  10%  {
    opacity: 0.5;
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }
  30%  {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
    filter: brightness(1.1);
  }
  60%  {
    opacity: 0.5;
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }  
  80%  {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
    filter: brightness(1.2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }
}
@keyframes LuggagePanelTitleIn {
  0%   {
    opacity: 0;
    transform: translate(-100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes LuggagePanelInfoSelectIn {
  0%   {
    opacity: 0;
    transform: translate(100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes LuggagePanelInfoAvailableIn {
  0%   {
    opacity: 0;
    transform: translate(100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes ThanksPanelAccessIn {
  0%   {
    opacity: 0;
    transform: translate(-100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes ThanksPanelTitleIn {
  0%   {
    opacity: 0;
    transform: translate(0, -5rem);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes ThanksPanelContinueIn {
  0%   {
    opacity: 0;
    transform: translate(100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes SpawnLoadoutIn {
  0%   {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes SpawnLineIn {
  0%   {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes SpawnFumeIn {
  0%   {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@keyframes SpawnImgIn {
  0%   {
    opacity: 0;
    transform: translate(0, -30rem);
  }
  5% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes SpawnItemsIn {
  0%   {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes SpawnItemIn {
  0%   {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes SpawnBtnIn {
  0%   {
    opacity: 0;
    transform: translate(0, 100%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes SpinRotate {
  0% {
    transform: rotate(0deg) scale(0.8);
  }
  50% {
    transform: rotate(360deg) scale(1.2);
  }
  100% {
    transform: rotate(720deg) scale(0.8);
  }
}
@keyframes SpinBall1 {
  0% {
    box-shadow: 3.6rem 0 0 var(--orange);
  }
  50% {
    box-shadow: 0 0 0 var(--orange);
    margin-bottom: 0;
    transform: translate(0.9375rem, 0.9375rem);
  }
  100% {
    box-shadow: 3.6rem 0 0 var(--orange);
    margin-bottom: 3.6rem;
  }
}
@keyframes SpinBall2 {
  0% {
    box-shadow: 3.6rem 0 0 var(--mint);
  }
  50% {
    box-shadow: 0 0 0 var(--mint);
    margin-top: -3.6rem;
    transform: translate(0.9375rem, 0.9375rem);
  }
  100% {
    box-shadow: 12rem 0 0 var(--mint);
    margin-top: 0;
  }
}
@keyframes CookiesSlideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes StrongboxIn {
    0% {
      opacity: 0;
      transform: translate(-50%, 100%);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, 0%);
    }
  }
@keyframes SpawnItemsIn {
    0%   {
      opacity: 0;
      transform: translate(0%, -50%);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
@keyframes SpawnItemsTwoIn {
    0%   {
      opacity: 0;
      transform: translate(0%, -100%);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
@keyframes LuggageBoxHover {
  0%   {
    filter: grayscale(0.2) brightness(0.8);
  }
  100% {
    filter: grayscale(0) brightness(1);
  }
}
@keyframes LuggageBoxLeave {
  0%   {
    filter: grayscale(0) brightness(1);
  }
  100% {
    filter: grayscale(0.2) brightness(0.8);
  }
}
@keyframes LuggageBgHover {
  0%   {
    transform: scale(0.8);
  }
  50%  {
    transform: scale(0.7);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes LuggageBgLeave {
  0%   {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes LuggageFumeHover {
  0%   {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
  50%  {
    transform: translateX(-50%) scale(0.7);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@keyframes LuggageFumeLeave {
  0%   {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(0.8);
  }
}
@keyframes LuggageImgHover {
  0%   {
    transform: translate(-50%, -50%) scale(0.9);
  }
  50%  {
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    transform: translate(-50%, -80%) scale(1);
  }
}
@keyframes LuggageImgLeave {
  0%   {
    transform: translate(-50%, -80%) scale(1);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
  }
}
@keyframes LuggageItemsHover {
  0%   {
    transform: translate(-50%, -5rem);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, 0%);
    opacity: 1;
  }
}
@keyframes LuggageItemsLeave {
  0%   {
    transform: translate(-50%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -5rem);
    opacity: 0;
  }
}
@keyframes LuggageBtnHover {
  0% {
    transform: translate(-50%, -10rem);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, 0%);
    opacity: 1;
  }
}
@keyframes LuggageBtnLeave {
  0% {
    transform: translate(-50%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -10rem);
    opacity: 0;
  }
}
@keyframes LuggageSteamHover {
  0%   {
    transform: translate(-50%, -5rem);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, 0%);
    opacity: 1;
  }
}
@keyframes LuggageSteamLeave {
  0%   {
    transform: translate(-50%, 0%);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -5rem);
    opacity: 0;
  }
}
@keyframes SpawnImgBlimp {
  0%   {
    transform: scale(1);
  }
  5% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}