:root {
  --cubic-bezier: cubic-bezier(.46,1.68,.54,.59);
  --height: 130px;
  --slides-per-view: 2;
  --wrapper-height: 100vh;
  --color-green: #5FD068;
  --color-green-90: rgba(95, 208, 104, 0.9);
  --color-red: #c62f42;
  --color-pink: #FF7082;
  --color-pink-dark: #c62f42;
  --color-text: #000;
  --color-background: #5FD068;
  --color-button-background: #FF7082;
  --color-button-rev-background: #5FD068;
  --font: 'galano', 'sans-serif';
  --font-regular: 400;
  --font-semi-bold: 500;
  --font-bold: 600;
  --line-height: 140%;
  --padding: 1rem;
  --shadow-offset: .5rem;
  --border-width: .15rem;
  --border-radius: 1rem;
  --offscreen-left: -2000px;
  --offscreen-right: 2000px;
}
@media all and (max-width: 768px) {
  :root {
    --offscreen-left: -1000px;
    --offscreen-right: 1000px;
  }
}

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button {
  all: unset;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

input[type=text], input[type=email], input[type=number], input[type=tel] {
  all: unset;
  box-sizing: border-box;
}

.page-header {
  z-index: 100;
  background-color: #000;
  padding: var(--padding);
  width: 100%;
  display: flex;
  view-transition-name: page-header;
}
@media all and (max-width: 768px) {
  .page-header {
    justify-content: center;
  }
}
.page-header .pw-Logo--gas {
  height: 1.5rem;
}
@media all and (min-width: 768px) {
  .page-header .pw-Logo--gas {
    height: 2rem;
  }
}
.page-header .pw-Logo--gas {
  margin-top: 0.5rem;
}

.page-footer {
  z-index: 100;
  background-color: #000;
  color: #fff;
  padding: var(--padding);
  display: flex;
  gap: var(--padding);
  position: relative;
  width: 100%;
  font-size: 0.75rem;
  line-height: 1em;
  justify-content: center;
  view-transition-name: page-footer;
  border-bottom: 1px solid rgb(255, 255, 255);
}

#grabaseat_footer {
  --padding: 40px;
  font-size: 17px;
  padding: calc(var(--padding) * 1);
  display: flex;
  justify-content: center;
}
#grabaseat_footer .grabaseat-footer-inner {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1312px;
}
@media all and (min-width: 768px) {
  #grabaseat_footer .grabaseat-footer-inner {
    padding-left: calc(var(--padding) * 1);
    padding-right: calc(var(--padding) * 1);
  }
}
#grabaseat_footer .grabaseat-footer-inner {
  gap: calc(var(--padding) * 0.5);
}
#grabaseat_footer .footer-links {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
}
#grabaseat_footer .footer-links .col {
  padding: calc(var(--padding) * 0.25);
  width: 33%;
}
@media all and (max-width: 768px) {
  #grabaseat_footer .footer-links .col {
    width: 100%;
  }
}
#grabaseat_footer .footer-links .col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--padding) * 0.25);
}
#grabaseat_footer .footer-links .col a, #grabaseat_footer .footer-links .col button {
  display: block;
}
#grabaseat_footer .footer-logo-container {
  width: 286px;
  max-width: 100%;
  padding: calc(var(--padding) * 0.25);
}
#grabaseat_footer .footer-logo-container svg {
  display: block;
  width: 100%;
  height: auto;
}
#grabaseat_footer .footer-staralliance,
#grabaseat_footer .footer-social-links,
#grabaseat_footer .footer-copyright {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: calc(var(--padding) * 0.25);
  gap: calc(var(--padding) * 0.25);
}
#grabaseat_footer .footer-social-links {
  display: flex;
}
#grabaseat_footer .footer-social-links a {
  display: block;
  gap: calc(var(--padding) * 0.5);
}
#grabaseat_footer .footer-social-links a img {
  display: block;
  height: 20px;
}
#grabaseat_footer .footer-staralliance img {
  display: block;
  width: 206px;
}
#grabaseat_footer .footer-copyright {
  color: rgb(137, 137, 137);
  font-size: 15px;
  margin-top: calc(var(--padding) * -0.5);
}
#grabaseat_footer a, #grabaseat_footer button {
  color: #fff;
}
#grabaseat_footer a:hover, #grabaseat_footer button:hover {
  text-decoration: underline;
}

@font-face {
  font-family: "galano";
  src: url("../fonts/galano-grotesque-heavy.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: "swap";
}
@font-face {
  font-family: "galano";
  src: url("../fonts/galano-grotesque-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: "swap";
}
@font-face {
  font-family: "galano";
  src: url("../fonts/galano-grotesque-medium.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: "swap";
}
.button {
  text-decoration: none;
  font-size: 1.5rem;
  padding: 0.5em;
  padding-left: 1em;
  padding-right: 1em;
  display: inline-block;
  border-radius: 1.5em 1.5em 0em 1.5em;
  border: var(--border-width) solid var(--color-text);
  color: var(--color-text);
  background-color: var(--color-button-background);
  box-shadow: calc(var(--shadow-offset) * -1) var(--shadow-offset) rgba(0, 0, 0, 0.33);
  font-weight: var(--font-bold);
  cursor: pointer;
  transition: 0.25s 0s var(--cubic-bezier);
}
.button:hover {
  box-shadow: calc(var(--shadow-offset) * -1.5) calc(var(--shadow-offset) * 1.5) rgba(0, 0, 0, 0.33);
  transform: translate(calc(var(--shadow-offset) * 0.5), calc(var(--shadow-offset) * -0.5));
}
.button.rev {
  background-color: var(--color-button-rev-background);
}
.button.small {
  font-size: 1rem;
}

a, button {
  text-decoration: none;
  cursor: pointer;
}
a.underline, button.underline {
  text-decoration: underline;
  color: #000;
}
a:focus-visible, button:focus-visible {
  outline: 1px solid #fff;
}

.section-wrap {
  min-height: var(--wrapper-height);
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.section-wrap:has(.page-wrap[data-page=guess]) {
  overflow: hidden;
}

.page-overflow {
  overflow: visible;
  flex-grow: 1;
  display: flex;
  background-color: var(--color-background);
  width: 100%;
  view-transition-name: page-overflow;
  min-height: var(--wrapper-height);
}

.page-wrap {
  min-height: var(--wrapper-height);
  overflow: visible;
  view-transition-name: page-wrap;
  view-transition-group: page-overflow;
  z-index: 2;
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-wrap .page-content {
  text-align: center;
  display: flex;
  gap: calc(var(--padding) * 1.5);
  flex-direction: column;
  padding: var(--padding);
}
.page-wrap[data-page=default] .combination-lock, .page-wrap[data-page=pre] .combination-lock {
  --height: 20vw;
}
@media all and (min-width: 768px) {
  .page-wrap[data-page=default] .combination-lock, .page-wrap[data-page=pre] .combination-lock {
    --height: 130px;
  }
}
@media all and (min-width: 768px) and (max-width: 1280px) {
  .page-wrap[data-page=default] .combination-lock, .page-wrap[data-page=pre] .combination-lock {
    --height: 90px;
  }
}
.page-wrap[data-page=closed] .combination-lock {
  --height: 12vw;
}
@media all and (min-width: 768px) {
  .page-wrap[data-page=closed] .combination-lock {
    --height: 130px;
  }
}
@media all and (min-width: 768px) and (max-width: 1280px) {
  .page-wrap[data-page=closed] .combination-lock {
    --height: 90px;
  }
}
.page-wrap[data-page=guess] {
  view-transition-name: suitcase-in;
}
.page-wrap[data-page=guess] .page-content h1, .page-wrap[data-page=guess] .page-content h2, .page-wrap[data-page=guess] .page-content p, .page-wrap[data-page=guess] .page-content .result-copy {
  position: relative;
  z-index: 2;
}
.page-wrap[data-page=guess] .combination-lock {
  margin-top: calc(var(--padding) * 1);
  margin-bottom: calc(var(--padding) * 1);
  --height: 13vw;
}
@media all and (min-width: 1100px) {
  .page-wrap[data-page=guess] .combination-lock {
    --height: 100px;
    margin-top: calc(var(--padding) * 1.5);
    margin-bottom: calc(var(--padding) * 1.5);
  }
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase {
  position: absolute;
  pointer-events: none;
  width: calc(var(--height) * 17);
  display: block;
  transform: translate(-52%, -32%) skewY(1deg);
}
@media all and (max-width: 768px) {
  .page-wrap[data-page=guess] .combination-lock .combination-suitcase {
    transform: translate(-51.2%, -39%) skewY(1deg);
    width: calc(var(--height) * 16.5);
  }
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase {
  left: 50%;
  top: 50%;
  z-index: 1;
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase #confetti_suitcase {
  z-index: 2;
  position: absolute;
  aspect-ratio: 2/3;
  width: 150%;
  top: -60%;
  left: -72%;
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase .suitcase {
  position: relative;
  width: 100%;
  display: block;
  z-index: 3;
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase .suitcase.opening {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  display: none;
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase .suitcase.over {
  z-index: 3;
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase .suitcase.under {
  z-index: 1;
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase[data-is=moving] .smoke-gif {
  opacity: 1;
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase .smoke-gif {
  display: block;
  position: absolute;
  width: 130%;
  height: auto;
  bottom: 0px;
  right: 100%;
  transform: translate(27%, 3%);
  z-index: 11;
  opacity: 0;
}
.page-wrap[data-page=guess] .combination-lock .combination-suitcase .smoke-gif.g2 {
  z-index: 9;
  transform: translate(15%, -2%);
}
.page-wrap[data-page=guess] [data-content=result-count] {
  display: none;
}
.page-wrap[data-page=guess] {
  --small-scale: 1;
}
.page-wrap[data-page=guess][data-complete=true] {
  --small-scale: .33;
}
.page-wrap[data-page=guess][data-animation=shake] {
  animation: shake 1.25s forwards;
}
.page-wrap[data-page=guess] {
  --open-speed: .5s;
}
.page-wrap[data-page=guess][data-animation=opening] {
  animation: opening var(--open-speed) forwards;
}
.page-wrap[data-page=guess][data-animation=open] {
  transform: rotate(0deg) scale(var(--small-scale));
}
.page-wrap[data-page=guess][data-animation=offscreen] {
  animation: offscreen 0.5s ease-in forwards;
}
.page-wrap[data-page=guess][data-content=hide] h1, .page-wrap[data-page=guess][data-content=hide] h2, .page-wrap[data-page=guess][data-content=hide] h3, .page-wrap[data-page=guess][data-content=hide] p, .page-wrap[data-page=guess][data-content=hide] .combination, .page-wrap[data-page=guess][data-content=hide] button[data-popup=open][data-i=howtoplay] {
  transition: 0.25s;
  opacity: 0;
}
.page-wrap[data-page=guess] .page-content[data-state=reveal] .hide-reveal {
  display: none;
}

@keyframes offscreen {
  0% {
    transform: rotate(0deg) scale(var(--small-scale));
  }
  100% {
    transform: scale(var(--small-scale)) translateY(calc(var(--offscreen-right) * 2)) skewX(0deg);
  }
}
@keyframes shake {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(0deg) scale(var(--small-scale));
  }
  60% {
    transform: rotate(-1deg) scale(var(--small-scale));
  }
  70% {
    transform: rotate(2deg) scale(var(--small-scale));
  }
  80% {
    transform: rotate(-2deg) scale(var(--small-scale));
  }
  90% {
    transform: rotate(1deg) scale(var(--small-scale));
  }
  100% {
    transform: rotate(0deg) scale(var(--small-scale));
  }
}
@keyframes opening {
  0% {
    transform: rotate(0deg) scale(var(--small-scale));
  }
  33% {
    transform: rotate(-10deg) translateY(-20px) scale(var(--small-scale));
  }
  66% {
    transform: rotate(10deg) translateY(-20px) scale(var(--small-scale));
  }
  100% {
    transform: rotate(0deg) scale(var(--small-scale));
  }
}
.combination-lock {
  --height: 130px;
  --slides-per-view: 2;
  display: flex;
  width: 100%;
  justify-content: center;
  gap: calc(var(--height) * 0.2);
  position: relative;
}
.combination-lock[data-interactive=true] .swiper {
  cursor: pointer;
}
.combination-lock.green-bg .combination {
  background-color: var(--color-green);
}
.combination-lock .combination {
  border: calc(var(--height) * 0.03) solid var(--color-text);
  border-radius: calc(var(--height) * 0.2);
  position: relative;
  padding: calc(var(--height) * 0.075);
  z-index: 2;
}
.combination-lock .combination[data-revealed=true] {
  transition: 0.5s;
  animation: lock_jiggle 0.75s forwards;
  background-color: #777;
  pointer-events: none !important;
}
.combination-lock .combination[data-revealed=true] .swiper-nav {
  display: none;
}
.combination-lock .combination[data-result=true] {
  transition: 0.5s;
  background-color: var(--color-green);
}
.combination-lock .combination .swiper, .combination-lock .combination .swiper-slide {
  width: auto;
  background-color: #fff;
}
.combination-lock .combination .swiper-nav {
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--padding) * 2.5);
  background-color: var(--color-green);
  cursor: pointer;
  position: absolute;
  left: 0px;
}
.combination-lock .combination .swiper-nav.swiper-next {
  border-radius: 0px 0px calc(var(--height) * 0.05) calc(var(--height) * 0.05);
  order: 3;
  border-top: calc(var(--height) * 0.03) solid var(--color-text);
  bottom: 0px;
}
.combination-lock .combination .swiper-nav.swiper-prev {
  border-radius: calc(var(--height) * 0.05) calc(var(--height) * 0.05) 0px 0px;
  order: 1;
  border-bottom: calc(var(--height) * 0.03) solid var(--color-text);
  top: 0px;
}
.combination-lock .combination .swiper-nav:hover {
  background-color: var(--color-pink);
}
@media all and (max-width: 768px) {
  .combination-lock .combination .swiper-nav {
    display: none !important;
  }
}
.combination-lock .combination .swiper {
  height: calc(var(--height) * var(--slides-per-view));
  background-color: #fff;
  border-radius: calc(var(--height) * 0.1);
  order: 2;
}
.combination-lock .combination .swiper-slide {
  aspect-ratio: 60/83;
  height: var(--height);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../img/combination-bg.svg");
  background-size: 100% 100%;
}
.combination-lock .combination .swiper-slide .display {
  font-weight: var(--font-bold);
  line-height: 1em;
  font-size: calc(var(--height) * 0.5);
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.combination-lock .combination .spacer {
  position: relative;
  border: calc(var(--height) * 0.03) solid var(--color-text);
  border-radius: calc(var(--height) * 0.1);
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
.combination-lock .combination::after {
  left: 100%;
  height: 90%;
  width: calc(var(--height) * 1);
  position: absolute;
  content: "";
  border-radius: 0px calc(var(--height) * 1) calc(var(--height) * 1) 0px;
  background-color: rgba(0, 0, 0, 0.3);
  top: 5%;
  transform: scaleX(0.15);
  transform-origin: 0px 0px;
}

@keyframes lock_jiggle {
  0% {
    transform: translateY(0px);
  }
  33% {
    transform: translateY(0.5rem);
  }
  66% {
    transform: translateY(-0.5rem);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes swoop {
  0% {
    top: var(--run-bottom);
    transform: translate(var(--offscreen-left), -100%) scale(var(--scale-large));
  }
  40% {
    top: var(--run-bottom);
    transform: translate(var(--offscreen-right), -100%) scale(var(--scale-large));
  }
  40.1% {
    top: var(--run-top);
    transform: translate(var(--offscreen-right), -100%) rotateY(180deg) scale(var(--scale-small));
  }
  100% {
    top: var(--run-top);
    transform: translate(var(--offscreen-left), -100%) rotateY(180deg) scale(var(--scale-small));
  }
}
@keyframes zindex_swoop {
  0% {
    z-index: 99;
  }
  40% {
    z-index: 99;
  }
  40.1% {
    z-index: 1;
  }
  100% {
    z-index: 1;
  }
}
.suitcase-animation-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  --scale-large: .6;
  --scale-small: .4;
  --run-top: 20%;
  --run-bottom: 95%;
}
@media all and (min-width: 768px) {
  .suitcase-animation-wrapper {
    --run-top: 35%;
    --scale-large: 1.25;
    --scale-small: .66;
  }
}
@media all and (min-width: 768px) and (max-width: 1280px) {
  .suitcase-animation-wrapper {
    --scale-large: 1;
    --scale-small: .5;
  }
}
.suitcase-animation-wrapper .suitcase-positioner {
  position: absolute;
  animation: swoop 10s linear infinite;
  top: 50%;
  left: 50%;
  transform-origin: bottom;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 0.5s;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .suitcase-img {
  display: block;
  width: 200px;
  z-index: 10;
  position: relative;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .suitcase-open-img,
.suitcase-animation-wrapper .suitcase-positioner .suitcase .suitcase-opening-img {
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 115%;
  height: 115%;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 11;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .speed-lines {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .speed-lines .line {
  width: 30%;
  height: 1%;
  position: absolute;
  overflow: hidden;
  border-radius: 5px;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .speed-lines .line:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 100%;
  width: 100%;
  height: 100%;
  background-color: #000;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .speed-lines .line.l1 {
  top: 25%;
  left: -10%;
  --line-delay: 0s;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .speed-lines .line.l2 {
  top: 35%;
  left: -25%;
  --line-delay: .2s;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .speed-lines .line.l3 {
  top: 45%;
  left: -10%;
  --line-delay: .4s;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .speed-lines .line.l4 {
  bottom: 6%;
  left: 40%;
  --line-delay: .1s;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .speed-lines .line.l5 {
  bottom: 2.2%;
  left: 60%;
  --line-delay: .5s;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .smoke-gif {
  display: block;
  position: absolute;
  width: 200%;
  height: auto;
  bottom: 0px;
  right: 100%;
  transform: translate(19%, 34%);
  z-index: 11;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase .smoke-gif.g2 {
  z-index: 9;
  transform: translate(12%, 28%);
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase {
  --suitcase-skew-x: 0deg;
  --suitcase-translate-x: -50%;
  --suitcase-translate-y: -100%;
  --suitcase-scale: 1;
  --suitcase-rotate: 0deg;
  transform: translate(var(--suitcase-translate-x), var(--suitcase-translate-y)) rotate(var(--suitcase-rotate)) skewX(var(--suitcase-skew-x)) scale(var(--suitcase-scale));
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-state=moving] {
  --suitcase-skew-x: -5deg;
  animation: suitcase_moving 1s linear infinite;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-state=moving] .speed-lines .line:after {
  animation: line_animate 1s var(--line-delay) ease-in-out infinite;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-state=moving] .smoke-wrapper .s {
  width: 60px;
  height: 60px;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-state=moving] .smoke-wrapper.sm1 {
  left: 0%;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-state=moving] .smoke-wrapper.sm2 {
  left: -20%;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-zoom=in] {
  --suitcase-translate-x: -150%;
  --suitcase-translate-y: 185%;
  --suitcase-scale: 10;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-open=true] {
  animation: open_suitcase 0.5s ease-in-out forwards;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-open=true] .suitcase-open-img {
  animation: open_suitcase_img 0.5s ease-in-out forwards;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-open=true] .suitcase-opening-img {
  animation: opening_suitcase_img 0.5s ease-in-out forwards;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-open=true] .suitcase-img {
  animation: hide_suitcase_img 0.5s ease-in-out forwards;
}
.suitcase-animation-wrapper .suitcase-positioner .suitcase[data-open=true] #mouse {
  display: block;
}

@keyframes hide_suitcase_img {
  48% {
    opacity: 1;
    visibility: visible;
  }
  50%, 100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes opening_suitcase_img {
  48% {
    opacity: 0;
    visibility: hidden;
  }
  50%, 78% {
    opacity: 1;
    visibility: visible;
  }
  80%, 100% {
    opacity: 0;
    visibility: visible;
  }
}
@keyframes open_suitcase_img {
  78% {
    opacity: 0;
    visibility: hidden;
  }
  80%, 100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes open_suitcase {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(0px) translateY(0px);
  }
  30% {
    transform: translate(-50%, -50%) rotate(3deg) translateX(0px) translateY(-10px);
  }
  60% {
    transform: translate(-50%, -50%) rotate(-3deg) translateX(0px) translateY(-10px);
  }
  70% {
    transform: translate(-50%, -50%) rotate(1deg) translateX(0px) translateY(-10px);
  }
  80% {
    transform: translate(-50%, -50%) rotate(5deg) translateX(0px) translateY(-5px);
  }
  100% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(0px) translateY(0px);
  }
}
@keyframes suitcase_moving {
  0% {
    margin-top: 0px;
  }
  20% {
    margin-top: -3px;
  }
  40% {
    margin-top: 0px;
  }
  60% {
    margin-top: -5px;
  }
  80% {
    margin-top: 1px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes line_animate {
  0% {
    left: 100%;
  }
  100% {
    left: -100%;
  }
}
@keyframes smoke1 {
  0% {
    bottom: 0%;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  50% {
    transform: translate(-20%, -50%) scale(1.2) rotate(40deg);
  }
  100% {
    bottom: 120%;
    transform: translate(0%, -50%) scale(0) rotate(80deg);
  }
}
@keyframes smoke2 {
  0% {
    bottom: 0%;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  50% {
    transform: translate(0%, -50%) scale(0.9) rotate(-40deg);
  }
  100% {
    bottom: 100%;
    transform: translate(-50%, -50%) scale(0) rotate(-70deg);
  }
}
@keyframes smoke3 {
  0% {
    bottom: 0%;
    transform: translate(-50%, -50%) scale(0) rotate(30deg);
  }
  60% {
    transform: translate(20%, -50%) scale(1.05) rotate(70deg);
  }
  100% {
    bottom: 105%;
    transform: translate(20%, -50%) scale(0) rotate(100deg);
  }
}
@keyframes smoke4 {
  0% {
    bottom: 0%;
    transform: translate(-50%, -50%) scale(0) rotate(-50deg);
  }
  60% {
    transform: translate(30%, -50%) scale(1) rotate(-100deg);
  }
  100% {
    bottom: 90%;
    transform: translate(50%, -50%) scale(0) rotate(-150deg);
  }
}
@keyframes reveal {
  0% {
    transform: translate(-50%, -50%) rotate(-90deg) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-90deg) scale(1);
  }
}
.popups {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10rem);
  z-index: 101;
  pointer-events: none;
  display: flex;
  visibility: hidden;
  transition: 0.5s;
  background-color: var(--color-green-90);
  opacity: 0;
  padding: calc(var(--padding) * 2);
  overflow-y: auto;
}
.popups:has(.popup[data-state=open]) {
  visibility: visible;
  opacity: 1;
}
.popups .close-popup {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}
.popups .popup {
  pointer-events: all;
  background-color: #fff;
  padding: calc(var(--padding) * 0.5);
  width: 100%;
  max-width: 680px;
  border-radius: 2rem 2rem 0em 2rem;
  box-shadow: calc(var(--shadow-offset) * -1) var(--shadow-offset) rgba(0, 0, 0, 0.33);
  transition: all 0s, transform 0.5s ease-in-out;
  transform: translate(0px, 10rem);
  margin-top: auto;
  margin-bottom: auto;
}
.popups .popup .popup-content {
  padding: calc(var(--padding) * 1);
  text-align: center;
  display: flex;
  gap: var(--padding);
  flex-direction: column;
}
.popups .popup .popup-content ul, .popups .popup .popup-content ol {
  text-align: left;
  padding: 0px;
  padding-top: calc(var(--padding) * 0.15);
  padding-bottom: calc(var(--padding) * 0.15);
  padding-left: calc(var(--padding) * 1);
}
.popups .popup .popup-content ul li, .popups .popup .popup-content ol li {
  padding: 0px;
  padding-top: calc(var(--padding) * 0.15);
  padding-bottom: calc(var(--padding) * 0.15);
}
.popups .popup .popup-content .row {
  display: flex;
  flex-grow: 1;
  gap: calc(var(--padding) * 1.5);
  padding-bottom: var(--padding);
}
.popups .popup .popup-content .row .rc {
  border-radius: 2rem 2rem 0em 2rem;
  padding: var(--padding);
  background-color: rgba(0, 0, 0, 0.1);
}
.popups .popup .popup-content .row .rc img {
  display: block;
  width: 100%;
  border-radius: 100%;
  margin-bottom: var(--padding);
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
.popups .popup .popup-content .row .rc {
  width: 50%;
}
.popups .popup .popup-content .seperator {
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: var(--padding);
  margin-top: var(--padding);
}
.popups .popup[data-state=open] {
  transform: translate(0px, 0px);
  transition: all 0s, transform 0.5s cubic-bezier(0.46, 1.68, 0.54, 0.59);
}
.popups .popup[data-popup=terms] {
  text-align: left;
  max-width: 900px;
}
.popups .popup[data-popup=terms] .popup-content {
  font-size: 12px;
  line-height: 130%;
}
.popups[data-type=borderless] {
  background-color: transparent;
  backdrop-filter: none;
}
.popups[data-type=borderless] .popup {
  background-color: transparent;
  max-width: 100%;
  border-radius: none;
  box-shadow: none;
}

.form {
  display: flex;
  gap: calc(var(--padding) * 0.75);
  flex-direction: row;
  text-align: left;
  flex-wrap: wrap;
  text-align: left;
}
.form label {
  display: block;
  font-size: 0.85rem;
  line-height: var(--line-height);
  padding-bottom: calc(var(--padding) * 0.25);
}
.form input[type=text], .form input[type=email], .form input[type=number], .form input[type=tel] {
  display: block;
  border: var(--border-width) solid #000;
  border-radius: 0.3rem;
  width: 100%;
  padding: calc(var(--padding) * 0.5);
  background-color: #fff;
}
.form input:focus-visible {
  outline: var(--border-width) solid #fff;
}
.form input[type=checkbox] {
  display: block;
  width: auto;
  width: 12px;
  height: 12px;
  transform: scale(1.25);
  transform-origin: 0px 0px;
  margin-top: 0.1em;
}
.form input[type=checkbox]:focus-visible {
  outline: var(--border-width) solid #000;
}
.form .input-border {
  border: var(--border-width) solid #000;
  border-radius: 0.6rem;
  padding: 0.2rem;
  background-color: var(--color-green);
}
.form .input {
  width: 100%;
  flex-grow: 1;
}
.form .input:has(input[type=checkbox]) {
  display: flex;
  gap: calc(var(--padding) * 0.5);
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.form .input:has(.button) {
  display: flex;
  justify-content: center;
}
.form .input.w-50 {
  width: 45%;
}
.form .input.enter-manually {
  display: none;
}
.form .input.enter-manually .input-border {
  display: flex;
}
.form .input.enter-manually .input-border input {
  font-size: 3rem;
  font-weight: var(--font-bold);
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  flex-grow: 1;
  letter-spacing: 0.1em;
  border-radius: 0px;
}
.form .input.enter-manually .input-border input:first-child {
  border-radius: 0.3rem 0px 0px 0.3rem;
}
.form .input.enter-manually .input-border input:last-child {
  border-radius: 0px 0.3rem 0.3rem 0px;
}
.form .input.input-guess {
  display: none;
}
.form .input:has([data-valid=false]) .input-border {
  background-color: var(--color-red);
}
.form .input:has([data-valid=false]):has(input[type=checkbox]) {
  color: var(--color-red);
}
.form .input:has([data-valid=false]):has(input[type=checkbox]) a {
  color: var(--color-red);
}

input[type=number] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

@view-transition {
  navigation: auto;
}
::view-transition-group(page-overflow) {
  overflow: hidden;
}

::view-transition-new(page-wrap) {
  animation: 1.5s ease-in-out both move-in-from-left;
}

::view-transition-old(page-wrap) {
  animation: 1.5s ease-in-out both move-out-to-right;
}

::view-transition-new(suitcase-in) {
  animation: 1.5s ease-in-out both move-suitcase-in-from-left;
}

::view-transition-old(suitcase-in) {
  animation: 1.5s ease-in-out both move-suitcase-out-to-bottom;
}

@keyframes move-out-to-right {
  0% {
    transform: scale(1) translateX(0%);
  }
  50%, 100% {
    transform: scale(1) translateX(var(--offscreen-right));
  }
}
@keyframes move-in-from-left {
  0%, 50% {
    transform: scale(1) translateX(var(--offscreen-left));
  }
  100% {
    transform: scale(1) translateX(0%);
  }
}
@keyframes move-suitcase-in-from-left {
  0% {
    transform: scale(0.25) translateX(calc(var(--offscreen-left) * 4)) skewX(-20deg);
  }
  50% {
    transform: scale(0.25) translateX(0%) skewX(0deg);
  }
  100% {
    transform: scale(1) translateX(0%) skewX(0deg);
  }
}
@keyframes move-suitcase-out-to-right {
  0% {
    transform: scale(1) translateX(0%) skewX(0deg);
  }
  50% {
    transform: scale(1) translateX(0%) skewX(0deg);
  }
  100% {
    transform: scale(1) translateX(calc(var(--offscreen-right) * 2)) skewX(-20deg);
  }
}
@keyframes move-suitcase-out-to-bottom {
  0% {
    transform: scale(1) translateX(0%) skewX(0deg);
  }
  50% {
    transform: scale(1) translateX(0%) skewX(0deg);
  }
  100% {
    transform: scale(1) translateY(calc(var(--offscreen-right) * 2)) skewX(0deg);
  }
}
.result-copy {
  background-color: #fff;
  padding: calc(var(--padding) * 1.5);
  border-radius: 2rem 2rem 0em 2rem;
  box-shadow: calc(var(--shadow-offset) * -1) var(--shadow-offset) rgba(0, 0, 0, 0.33);
  max-width: calc(var(--height) * 5.2);
  display: none;
  margin-left: var(--padding);
  margin-right: var(--padding);
}
@media all and (min-width: 768px) {
  .result-copy {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
.result-copy h1, .result-copy h2, .result-copy h3, .result-copy p {
  padding: calc(var(--padding) * 0.5);
}

.section-wrap,
.page-content,
.page-overflow,
.page-wrap,
.combination-lock,
.suitcase-animation-wrapper,
.suitcase {
  transform: translate3d(0, 0, 0);
  will-change: transform, top, left, opacity;
  backface-visibility: hidden;
}

.slide-reveal {
  position: relative;
  overflow: hidden;
  --delay: 0s;
}
.slide-reveal span {
  display: inline-block;
  transform: translate(0%, 110%);
  animation: slide_reveal 0.5s var(--delay) forwards;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}
.slide-reveal span .button {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

@keyframes slide_reveal {
  0% {
    transform: translate(0%, 110%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
body, html {
  margin: 0px;
  padding: 0px;
  font-size: 13px;
}
@media all and (min-width: 768px) {
  body, html {
    font-size: 16px;
  }
}
@media all and (min-width: 768px) and (max-width: 1280px) {
  body, html {
    font-size: 13px;
  }
}
body, html {
  line-height: var(--line-height);
  color: var(--color-text);
  font-family: var(--font);
  font-weight: var(--font-regular);
  background-color: #000;
}

* {
  box-sizing: border-box;
}

h1, h2, h2, h3, h4, p {
  line-height: var(--line-height);
  font-weight: var(--font-regular);
  margin: 0px;
  padding: 0px;
}

h1 {
  font-weight: var(--font-bold);
  font-size: 4rem;
}

h2 {
  font-weight: var(--font-bold);
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h1, h2 {
  line-height: calc(var(--line-height) * 0.7);
}

strong {
  font-weight: var(--font-semi-bold);
}

#audio {
  height: 0px;
  overflow: hidden;
}

.icon-actions {
  position: absolute;
  top: var(--padding);
  right: var(--padding);
  z-index: 1;
  display: flex;
  gap: var(--padding);
}/*# sourceMappingURL=main.v1.css.map */