/* =========================================================
   絮語 LIMINAL｜品牌入口頁
========================================================= */

:root {
  --entrance-text: #403931;
  --entrance-gold: #aa8557;
  --entrance-gold-light: #d8bc92;
  --entrance-muted: #80766b;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;

  color: var(--entrance-text);

  font-family:
    "Noto Serif TC",
    "Microsoft JhengHei",
    serif;

  background: linear-gradient(
    135deg,
    #ebe4da 0%,
    #f8f4ee 48%,
    #e7ddd0 100%
  );
}

/* =========================================================
   背景柔光
========================================================= */

.entrance-light {
  position: fixed;
  z-index: -1;

  width: 550px;
  height: 550px;

  border-radius: 50%;
  filter: blur(45px);
  pointer-events: none;
}

.entrance-light-left {
  top: -240px;
  left: -220px;
  background: rgba(255,255,255,.8);
}

.entrance-light-right {
  right: -220px;
  bottom: -240px;
  background: rgba(197,162,117,.28);
}

/* =========================================================
   入口頁主排版
========================================================= */

.entrance-page {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
  min-height: 100svh;

  padding: 70px 24px;
}

.entrance-content {
  width: min(100%, 620px);
  text-align: center;
}

.entrance-eyebrow {
  margin: 0 0 48px;

  color: var(--entrance-gold);
  font-size: 10px;
  letter-spacing: .34em;
}

/* =========================================================
   品牌文字與金屬質感
========================================================= */

.entrance-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entrance-symbol {
  margin-bottom: 20px;
  color: var(--entrance-gold);
  font-size: 27px;
}

.entrance-brand h1 {
  margin: 0 0 12px;

  font-size: clamp(38px, 6vw, 64px);
  font-weight: 400;
  letter-spacing: .3em;
  text-indent: .3em;
}

.entrance-brand strong {
  font-family: Georgia, serif;
  font-size: clamp(45px, 10vw, 90px);
  font-weight: 500;
  letter-spacing: .13em;
  text-indent: .13em;

  background: linear-gradient(
    165deg,
    #765331 0%,
    #d9bb8b 24%,
    #fff4d8 43%,
    #a47a48 65%,
    #6e4e2f 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: drop-shadow(
    0 5px 8px rgba(113,83,47,.12)
  );
}

.entrance-divider {
  width: 65px;
  height: 1px;
  margin: 38px auto;

  background: linear-gradient(
    90deg,
    transparent,
    var(--entrance-gold),
    transparent
  );
}

.entrance-quote {
  margin: 0;
  font-size: 16px;
  letter-spacing: .12em;
  line-height: 2;
}

.entrance-description {
  margin: 20px 0 45px;

  color: var(--entrance-muted);
  font-size: 12px;
  line-height: 2.2;
  letter-spacing: .08em;
}

.entrance-description span {
  display: block;
}

/* =========================================================
   進入按鈕
========================================================= */

.entrance-button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;

  min-width: 225px;
  min-height: 55px;
  padding: 0 23px;

  color: #fffdf8;
  font: inherit;
  font-size: 13px;
  letter-spacing: .12em;

  background: linear-gradient(
    135deg,
    #c4a06f,
    #987348
  );

  border: 0;
  border-radius: 15px;

  box-shadow:
    0 12px 30px rgba(116,83,47,.2);

  cursor: pointer;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.entrance-button:hover {
  transform: translateY(-3px);
  box-shadow:
    0 17px 35px rgba(116,83,47,.26);
}

.entrance-button:disabled {
  opacity: .7;
  cursor: wait;
}

.entrance-notice {
  margin-top: 32px;
  color: rgba(73,64,55,.4);
  font-size: 10px;
  letter-spacing: .2em;
}

/* =========================================================
   黑幕轉場
========================================================= */

.entrance-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;

  background: #171411;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .8s ease,
    visibility .8s ease;
}

.entrance-transition.is-active {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   手機版
========================================================= */

@media (max-width: 600px) {
  .entrance-page {
    padding: 45px 22px;
  }

  .entrance-eyebrow {
    font-size: 8px;
    letter-spacing: .2em;
  }

  .entrance-brand h1 {
    font-size: 42px;
  }

  .entrance-brand strong {
    font-size: clamp(43px, 11vw, 65px);
  }

  .entrance-quote {
    font-size: 13px;
  }

  .entrance-description {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entrance-transition {
    transition: none;
  }

  .entrance-button {
    transition: none;
  }
}

/* =========================================================
   INDEX｜正式 LOGO 圖片
   保留原本奶茶金背景與整體排版
========================================================= */

.entrance-logo {
  display: block;

  width: min(100%, 480px);
  height: auto;

  margin: 0 auto;

  object-fit: contain;

  filter: drop-shadow(
    0 12px 20px rgba(110, 80, 47, 0.12)
  );
}

/* =========================================================
   手機版 LOGO
========================================================= */

@media (max-width: 600px) {
  .entrance-logo {
    width: min(100%, 320px);
  }
}