:root {
  --filter-editor: invert(11%) sepia(94%) saturate(7199%) hue-rotate(5deg) brightness(105%) contrast(113%);
}
[hidden] {
  display: none !important;
}
header {
  display: grid;
  justify-items: center;
}
.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
img {
  height: auto;
  padding: 0;
  margin: 0;
}
.btn {
  background: transparent;
}

/* #region - BACKGROUND - */
.bg-scroll {
  background: url(/resources/background_main.webp) no-repeat center top / cover;
}
.bg-top {
  background-image: url(/resources/frame_top.webp);
  aspect-ratio: 1171/260;
}

.bg-fill {
  background-image: url(/resources/frame_repeat.webp);
}

.bg-bottom {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1171 / 260;
  background: none;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/resources/frame_top.webp") no-repeat center / 100% auto;
    transform: scaleY(-1);
    pointer-events: none;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 8cqw;
    left: 50%;
    width: 78.55cqw;
    aspect-ratio: 919 / 147;
    background: url("/resources/footer_bank-logo.webp") no-repeat center / 100% auto;
    transform: translateX(-50%);
    pointer-events: none;
  }
}

.splash::after, .pg__wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  background: url("/resources/background_noise.webp") repeat center/100% auto;
  pointer-events: none;
}
/* #endregion */

/* #region - SPLASH - */
.splash {
  background: #e8d6b6;
}
.sp__bar-fill {
  background: #a94c43;
}
.sp__pct {
  font-family: "Peralta", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4cqw;
  color: #2a565a;
}
/* #endregion */

/* #region - WELCOME HEADER -*/
.welcome-header {
  padding-top: 11.2cqw;
}
.welcome-header__ribbon {
  width: 86.84cqw;
}
.welcome-header__logo {
  margin-top: -1cqw;
  width: 73.59cqw;
}
/* #endregion */

/* #region - COMPACT HEADER -*/
.compact-header {
  padding-top: 14cqw;
  gap: 4.5cqw;
}
.compact-header__lookup {
  width: 76.50cqw;
}
.compact-header__title {
  width: 93.59cqw;
}
/* #endregion */

/* #region - P00_HOME_CONTENT - */
.home .page-content {
  padding-top: 8cqw;
}
.home__start-btn {
  .btn__image {
    width: 78.89cqw;
  }
}
/* #endregion */

/* #region - P01_POINT CARD_CONTENT -*/
.point-card .page-content {
  padding-top: 7.5cqw;
}
.point-card__stamp-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3.5cqw;
  gap: 1cqw;
  width: 80.43cqw;
  aspect-ratio: 941/699;
  background: url(/resources/stamp_card-background.webp) no-repeat center/100% auto;
  pointer-events: none;
}
.point-card__stamp-wrap {
  display: grid;
  justify-items: center;
  gap: 3cqw;
}
.point-card__scanner-btn {
  margin-top: -5.2cqw;
  .btn__image {
    width: 20.34cqw;
  }
}
/* #endregion */
/*#region - P01_POINT CARD_STAMP - */
.stamp {
  width: 22.74cqw;
  opacity: 0.25;
}
/* is-collected：已收集 */
.stamp.is-collected {
  opacity: 1;
}
/* is-collected：剛收集，播放集章動態 */
.stamp.is-collecting {
  animation: jello-horizontal 1s both;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.stamp__label {
  width: 15.04cqw;
}
/*#endregion */

/* #region - P02_REDEMPTION_CONTENT -*/
.redemption__unredeemed-view .page-content {
  padding-top: 5.5cqw;
  gap: 4.1cqw;
}
.redemption__redeem-message {
  width: 78.89cqw;
}
.redemption__redeem-btn .btn__image {
  width: 20.34cqw;
}

.redemption__redeemed-view .page-content {
  margin-top: -4.8cqw;
  gap: 2.5cqw;
}
.redemption__complete-message {
  width: 78.97cqw;
}
/* #endregion */
/* #region - P02_REDEMPTION_GIFT -*/
.gift {
  width: 43.16cqw;
  opacity: 1;
}
.gift.is-exchanged::after {
  opacity: 1;
}
.gift.is-exchanging {
  animation: jello-horizontal 1s both;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
/* #endregion */

/* #region - P03_SCANNER_CONTENT -*/
.scanner .page-content {
  padding-top: 3.5cqw;
  gap: 3.5cqw;
  /* filter: var(--filter-editor); */
}
.scanner__camera {
  position: relative;
  width: 54.96cqw;
  padding: 0.26cqw;
  aspect-ratio: 1;
  background: url(/resources/scanner_frame.webp) no-repeat center/cover;
  z-index: 100;
}
#scanner-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.scanner__corner {
  position: absolute;
  width: 8.63cqw;
  aspect-ratio: 1;
  background: url(/resources/scanner_corner.webp) no-repeat center/cover;
  pointer-events: none;
}
.scanner__corner--top-left {
  top: 5cqw;
  left: 5cqw;
}
.scanner__corner--top-right {
  top: 5cqw;
  right: 5cqw;
  transform: scaleX(-1);
}
.scanner__corner--bottom-left {
  bottom: 5cqw;
  left: 5cqw;
  transform: scaleY(-1);
}
.scanner__corner--bottom-right {
  bottom: 5cqw;
  right: 5cqw;
  transform: scaleY(-1) scaleX(-1);
}

.scanner__back-btn .btn__image {
  width: 33.5cqw;
}
/* #endregion */