@charset "UTF-8";

:root {
  --color-page-background: #f3c9cd;
  --color-text: #fff;
  --color-swal-text: #ff5498;
  --color-swal-button: #f35cc9;
  --color-panel: #f09cca;
  --color-heading: #c42d36;
  --content-width: 860px;
  --action-width: 400px;
  --action-width-mobile: 319px;
  --page-gutter: 20px;
  --action-gutter: 24px;
  --section-spacing: 70px;
  --grid-gap: 30px;
  --overlap-height: 200px;
  --panel-radius: 56px;
  --motion-duration: 0.3s;
  --status-line-height: 36px;
  --contact-line-width: 15%;
  --contact-qr-width: 10%;
  --contact-line-width-mobile: 30%;
  --contact-qr-width-mobile: 25%;
  --qr-modal-image-size: 360px;
  --modal-close-size: 36px;
  /* 主視覺底部淡出遮罩，背景圖與閃爍層共用 */
  --hero-mask: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--overlap-height)),
    transparent 100%
  );
}

html,
body {
  background-color: var(--color-page-background);
}

body {
  color: var(--color-text);
  font-family:
    system-ui, 'Segoe UI', 'Microsoft JhengHei', 'Microsoft YaHei', 'Noto Sans',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

img,
button {
  -webkit-user-drag: none;
  user-select: none;
}

/* SweetAlert 共用樣式 */
.swal2-popup .swal2-title,
.swal2-popup .swal2-html-container {
  color: var(--color-swal-text);
}

.swal2-popup .swal2-actions .swal2-confirm {
  background-color: var(--color-swal-button);
  border-radius: var(--panel-radius);
}

.swal2-popup {
  border-radius: var(--panel-radius);
}

/* 首頁主視覺 */
.hero {
  position: relative;
  z-index: 1;
  height: 0;
  padding-bottom: 67%;
  overflow: hidden;
}

.hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url(../img/headerbg.jpg) top center / cover no-repeat;
  content: '';
  pointer-events: none;
  -webkit-mask-image: var(--hero-mask);
  mask-image: var(--hero-mask);
}

/* 寶石閃爍層：位置與節奏由 sparkles.js 隨機指派 */
.sparkle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 主視覺的閃爍層需與背景圖切齊同一組底部淡出 */
.hero__sparkles {
  z-index: 1;
  -webkit-mask-image: var(--hero-mask);
  mask-image: var(--hero-mask);
}

/* 按鈕的閃爍層以按鈕圖去背當遮罩，光點才會貼在按鈕本體而非浮在透明角落 */
.action-button .sparkle-layer {
  -webkit-mask-image: var(--button-mask);
  mask-image: var(--button-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.action-button--sign {
  --button-mask: url(../img/button.png);
}

.action-button--vip {
  --button-mask: url(../img/JKFVIP.png);
}

.sparkle {
  --sparkle-size: 10px;
  --sparkle-hue: 330;
  --sparkle-opacity: 0.9;
  --sparkle-duration: 3s;
  --sparkle-delay: 0s;

  position: absolute;
  width: var(--sparkle-size);
  height: var(--sparkle-size);
  background: radial-gradient(
    circle,
    #fff 0%,
    #fff 22%,
    hsla(var(--sparkle-hue), 100%, 84%, 0.95) 46%,
    hsla(var(--sparkle-hue), 100%, 68%, 0) 74%
  );
  /* 八角星芒模擬寶石折射：主軸長芒、對角短芒 */
  clip-path: polygon(
    50% 0%,
    52.7% 43.5%,
    64.1% 35.9%,
    56.5% 47.3%,
    100% 50%,
    56.5% 52.7%,
    64.1% 64.1%,
    52.7% 56.5%,
    50% 100%,
    47.3% 56.5%,
    35.9% 64.1%,
    43.5% 52.7%,
    0% 50%,
    43.5% 47.3%,
    35.9% 35.9%,
    47.3% 43.5%
  );
  opacity: 0;
  filter: drop-shadow(0 0 3px hsla(0, 0%, 100%, 0.9))
    drop-shadow(0 0 10px hsla(var(--sparkle-hue), 100%, 70%, 0.85));
  animation: sparkle-twinkle var(--sparkle-duration) ease-in-out
    var(--sparkle-delay) infinite;
}

@keyframes sparkle-twinkle {
  0%,
  100% {
    transform: scale(0.2) rotate(0deg);
    opacity: 0;
  }

  /* 中段維持最亮，避免同一瞬間多數光點都處於淡出狀態 */
  40% {
    transform: scale(1) rotate(45deg);
    opacity: var(--sparkle-opacity);
  }

  60% {
    transform: scale(0.95) rotate(70deg);
    opacity: var(--sparkle-opacity);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle {
    transform: scale(0.85);
    opacity: calc(var(--sparkle-opacity) * 0.6);
    animation: none;
  }
}

.hero__cover {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: block;
  width: 70%;
  max-width: 1255px;
  max-height: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}

/* 操作區 */
.page-background {
  position: relative;
  z-index: 0;
  margin-top: calc(-1 * var(--overlap-height));
  padding: var(--overlap-height) 0 var(--section-spacing);
  background: url(../img/bg.jpg) top center / cover no-repeat;
}

.action-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
}

.action-button {
  position: relative;
  display: block;
  width: var(--action-width);
  max-width: calc(100% - var(--action-gutter));
  transition: transform var(--motion-duration) ease;
}

.action-button img {
  display: block;
  width: 100%;
  height: auto;
}

.action-button:hover {
  transform: scale(1.05);
}

.action-button:active {
  transform: scale(0.95);
}

.action-button:focus-visible {
  outline: 3px solid var(--color-swal-button);
  outline-offset: 4px;
}

.action-button--sign {
  -webkit-appearance: none;
  appearance: none;
  margin: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.status-message {
  min-height: var(--status-line-height);
  color: var(--color-swal-text);
  font-size: 24px;
  font-weight: 700;
  line-height: var(--status-line-height);
  text-align: center;
}

.status-message--sign {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.vip-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 20px auto 0;
}

/* 活動內容 */
.activity-content {
  width: 100%;
  max-width: var(--content-width);
  margin: var(--section-spacing) auto 0;
}

.sign-days {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid-gap);
  width: 100%;
  max-width: var(--content-width);
  padding: 0 100px;
  list-style: none;
}

.sign-days__item {
  position: relative;
  width: calc((100% - (var(--grid-gap) * 3)) / 4);
}

.sign-days__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter var(--motion-duration) ease;
}

.sign-days__item--claimed img {
  filter: grayscale(100%);
}

.sign-days__item--claimed::after {
  position: absolute;
  top: 17%;
  right: 5%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 3px solid var(--color-text);
  border-radius: 50%;
  background-color: var(--color-heading);
  color: var(--color-text);
  content: '✓';
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.25);
}

.activity-info {
  margin-top: var(--section-spacing);
}

.section-heading {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 0 -50px;
  padding: 0 var(--page-gutter);
  line-height: 0;
  text-align: center;
}

.section-heading img {
  width: 50%;
  height: auto;
}

.info-panel {
  margin-bottom: var(--section-spacing);
  padding: var(--section-spacing) 30px;
  background-color: var(--color-panel);
  border-radius: var(--panel-radius);
  line-height: var(--status-line-height);
}

.info-panel p {
  margin-bottom: var(--status-line-height);
}

.info-panel ol {
  margin: 0;
  padding-left: 1.5em;
}

.info-panel li {
  padding-left: 0.25em;
}

.info-panel h2,
.info-panel h3 {
  color: var(--color-heading);
}

.contact-line {
  width: var(--contact-line-width);
  height: auto;
  vertical-align: middle;
}

.contact-qr {
  display: block;
  width: 100%;
  height: auto;
}

.qr-trigger {
  display: inline-block;
  width: var(--contact-qr-width);
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  vertical-align: middle;
  cursor: pointer;
}

.qr-trigger:focus-visible {
  outline: 3px solid var(--color-swal-button);
  outline-offset: 4px;
  border-radius: var(--panel-radius);
}

.qr-modal .swal2-image {
  width: min(80vw, var(--qr-modal-image-size));
  max-width: 100%;
  height: auto;
}

.qr-modal .swal2-close {
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  border-radius: 50%;
  background-color: var(--color-swal-button);
  color: var(--color-text);
  font-size: 24px;
  line-height: var(--modal-close-size);
}

@media (max-width: 1320px) {
  .activity-content {
    padding: 0 10px;
  }
}

@media (max-width: 1024px) {
  .hero {
    padding-bottom: 75%;
  }

  .hero__cover {
    width: 78%;
  }
}

@media (max-width: 768px) {
  .hero {
    padding-bottom: 80%;
  }

  .hero__cover {
    width: 83%;
  }

  .action-button {
    width: var(--action-width-mobile);
  }

  .contact-line {
    width: var(--contact-line-width-mobile);
  }

  .qr-trigger {
    width: var(--contact-qr-width-mobile);
  }

  .sign-days {
    padding: 0 var(--page-gutter);
  }
}

@media (max-width: 430px) {
  .hero {
    padding-bottom: 114%;
  }

  .hero__cover {
    width: 100%;
  }

  .section-heading img {
    width: 100%;
  }

  .sign-days__item {
    width: calc((100% - var(--grid-gap)) / 2);
  }
}