/* ================================
   森林郵局｜主樣式
   Mobile-first, CSS Custom Properties
   ================================ */

/* --------------------------------
   1. CSS 變數
   -------------------------------- */
:root {
  /* 色彩 */
  --color-bg-deep:     #1a3a2a;
  --color-bg-mid:      #2d5a3d;
  --color-bg-light:    #3d7a52;
  --color-cream:       #f5e6c8;
  --color-cream-dark:  #e8d4a8;
  --color-text-dark:   #3b2a1a;
  --color-text-mid:    #5a4030;
  --color-red:         #c0392b;
  --color-red-dark:    #a93226;
  --color-gold:        #f0c060;
  --color-gold-light:  #f8e090;
  --color-white:       #ffffff;

  /* 字體 */
  --font-serif:   'Noto Serif TC', serif;
  --font-sans:    'Noto Sans TC', sans-serif;
  --font-cursive: 'Caveat', cursive;

  /* 字體大小（流體） */
  --fs-xs:    clamp(0.75rem,  2vw, 0.875rem);
  --fs-sm:    clamp(0.875rem, 2.5vw, 1rem);
  --fs-base:  clamp(1rem,     3vw,   1.125rem);
  --fs-lg:    clamp(1.125rem, 3.5vw, 1.375rem);
  --fs-xl:    clamp(1.5rem,   5vw,   2rem);
  --fs-2xl:   clamp(2rem,     7vw,   3rem);
  --fs-label: clamp(0.75rem,  2vw,   0.875rem);

  /* 間距 */
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* 圓角 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* 森林暖霧文字系統 */
  --text-title:       #2F2A26;
  --text-body:        #5A524C;
  --text-muted:       #7A6E63;
  --text-light:       #F4ECE7;
  --text-light-soft:  #E8D8BF;
  --btn-bg:           rgba(244, 236, 231, 0.88);
  --btn-text:         #2F2A26;
  --btn-border:       rgba(47, 42, 38, 0.16);
  --text-shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.25);
  --text-shadow-warm: 0 2px 10px rgba(74, 49, 24, 0.28);

  /* 動畫時間常數 */
  --dur-fade:    300ms;
  --dur-sending-full: 2500ms;
  --dur-sending-short: 1000ms;
  --dur-envelope: 800ms;
  --ease-natural: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------
   2. Reset & Base
   -------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-serif);
  background-color: var(--color-bg-deep);
  color: var(--color-cream);
  line-height: 1.6;
  min-height: 100dvh;
  position: relative;
}

/* 無障礙隱藏（給 screen reader 用）*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------
   3. 背景裝飾層
   -------------------------------- */
.forest-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.forest-bg__layer {
  position: absolute;
  inset: 0;
}

.forest-bg__layer--back {
  background-image: url('../assets/images/forest-bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.forest-bg__layer--front {
  /* 漸層覆蓋層：加深四周、保留中心可讀性 */
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(240,192,96,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 20% 100%, rgba(13,32,24,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 80% 100%, rgba(13,32,24,0.55) 0%, transparent 60%),
    linear-gradient(180deg, rgba(13,32,24,0.3) 0%, transparent 30%, transparent 70%, rgba(13,32,24,0.3) 100%);
}

/* --------------------------------
   4. Section 基礎
   -------------------------------- */
.section {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  /* flex-start + margin:auto on inner = 有空間時置中，內容超高時可捲動至頂 */
  align-items: flex-start;
  justify-content: center;
  /* 上下 padding 加入 iOS 安全區域（notch / home indicator）*/
  padding-top:    max(var(--space-lg), env(safe-area-inset-top));
  padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
  padding-left:   max(var(--space-md), env(safe-area-inset-left));
  padding-right:  max(var(--space-md), env(safe-area-inset-right));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fade) var(--ease-natural);
}

.section--active {
  opacity: 1;
  pointer-events: auto;
}

.section__inner {
  width: 100%;
  max-width: 480px;
  /* margin: auto 0 讓 inner 在有空間時垂直置中；overflow 時從頂部開始 */
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

/* --------------------------------
   5. Landing Section
   -------------------------------- */
.landing__scene {
  width: 100%;
}

/* 郵局建築插圖 */
.building-img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  /* 讓插圖底部有輕微陰影融入背景 */
  filter: drop-shadow(0 8px 24px rgba(13, 32, 24, 0.5));
}

.landing__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(13, 32, 24, 0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  width: 100%;
}

.landing__label {
  font-family: var(--font-cursive);
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  color: var(--color-gold);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), var(--text-shadow-warm);
}

.landing__title {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55), var(--text-shadow-soft);
}

.landing__subtitle {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: var(--text-light-soft);
  margin-bottom: var(--space-md);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4), var(--text-shadow-soft);
}

/* --------------------------------
   6. Question Section
   -------------------------------- */
.question__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  /* 半透明深色底，讓文字不被背景吃掉 */
  background: rgba(13, 32, 24, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  width: 100%;
}

.question__label {
  font-family: var(--font-cursive);
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  color: var(--color-gold);
  text-shadow: var(--text-shadow-warm);
}

.question__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-light);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5), var(--text-shadow-soft);
}

.question__hint {
  font-size: var(--fs-sm);
  color: var(--text-light-soft);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.question__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.question__textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 16px; /* iOS 防縮放：不可低於 16px */
  color: var(--text-title);
  background: var(--color-cream);
  border: 2px solid var(--color-cream-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  resize: none;
  line-height: 1.7;
  transition: border-color var(--dur-fade) var(--ease-natural);
  -webkit-appearance: none;
}

.question__textarea::placeholder {
  color: rgba(59, 42, 26, 0.4);
}

.question__textarea:focus {
  outline: none;
  border-color: var(--color-gold);
}

/* --------------------------------
   7. Sending Section
   -------------------------------- */
.sending__scene {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 300px;
  margin: 0 auto;
}

/* 信箱插圖 */
.postbox-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(13, 32, 24, 0.45));
}

/* 信封插圖（動畫物件）*/
.envelope-img {
  display: block;
  width: 96px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.3));
}

.envelope-anim {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.sending__text {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-title);
}

.sending__skip {
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* --------------------------------
   8. Answer Section
   -------------------------------- */
.answer__envelope {
  width: 100%;
  max-width: 280px;
  /* 初始隱藏狀態由此統一管理（動畫 12 節的 is-opening 覆蓋）*/
  opacity: 0;
  transform: scale(0.85);
}

/* 信封展開插圖 */
.envelope-open-img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.3));
}

.answer__letter {
  width: 100%;
  max-width: 360px;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.answer__from {
  font-family: var(--font-cursive);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-align: right;
  margin-top: var(--space-xs);
}

.answer__main {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-title);
  line-height: 1.4;
}

.answer__description {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  color: var(--text-body);
  line-height: 1.7;
}

.answer__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  max-width: 280px;
}

#btn-home,
#btn-skip,
#btn-skip-anim {
  color: var(--text-title);
}

/* --------------------------------
   9. 按鈕系統
   -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* >= 44px WCAG */
  padding: var(--space-sm) var(--space-xl);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  width: 100%;
  max-width: 280px;
  transition:
    background-color var(--dur-fade) var(--ease-natural),
    transform 150ms var(--ease-natural),
    opacity var(--dur-fade) var(--ease-natural),
    box-shadow var(--dur-fade) var(--ease-natural);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* 主要按鈕：半透明暖米白底，深暖灰褐文字 */
.btn--primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  box-shadow: 0 8px 24px rgba(47, 42, 38, 0.18);
}

.btn--primary:hover:not(:disabled) {
  background: rgba(244, 236, 231, 0.96);
  box-shadow: 0 10px 28px rgba(47, 42, 38, 0.22);
  transform: translateY(-1px);
}

.btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(47, 42, 38, 0.16);
}

/* 次要按鈕（Ghost）：暖米白文字 */
.btn--ghost {
  background-color: transparent;
  color: var(--text-light-soft);
  border: 1px solid rgba(244, 236, 231, 0.3);
}

.btn--ghost:hover:not(:disabled) {
  color: var(--text-light);
  border-color: rgba(244, 236, 231, 0.55);
  background-color: rgba(244, 236, 231, 0.07);
}

.btn--ghost:active:not(:disabled) {
  background-color: rgba(244, 236, 231, 0.12);
}

/* disabled 狀態（防連點）*/
.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* --------------------------------
   10. RWD — 平板 & 桌機
   -------------------------------- */
@media (min-width: 481px) {
  .section__inner {
    max-width: 560px;
  }
}

@media (min-width: 769px) {
  .section {
    /* 覆蓋 padding（safe-area 仍保留於 mobile，桌機不需要）*/
    padding-top:    var(--space-xl);
    padding-bottom: var(--space-xl);
    padding-left:   var(--space-2xl);
    padding-right:  var(--space-2xl);
  }

  .section__inner {
    max-width: 480px;
  }
}

/* --------------------------------
   11. 信件投遞動畫（Sending）
   -------------------------------- */

/* 完整版：2.5 秒，有彈跳感 */
@keyframes envelope-fly-full {
  0%   { transform: translateX(-50%) translateY(0px)   rotate(-8deg); opacity: 1; }
  40%  { transform: translateX(-50%) translateY(70px)  rotate(4deg);  opacity: 1; }
  75%  { transform: translateX(-50%) translateY(150px) rotate(-2deg); opacity: 1; }
  90%  { transform: translateX(-50%) translateY(175px) rotate(0deg);  opacity: 0.6; }
  100% { transform: translateX(-50%) translateY(195px) rotate(0deg);  opacity: 0; }
}

/* 縮短版：1 秒，直接飛入 */
@keyframes envelope-fly-short {
  0%   { transform: translateX(-50%) translateY(0px)   rotate(-5deg); opacity: 1; }
  80%  { transform: translateX(-50%) translateY(175px) rotate(2deg);  opacity: 0.7; }
  100% { transform: translateX(-50%) translateY(195px) rotate(0deg);  opacity: 0; }
}

.envelope-anim.is-flying {
  animation: envelope-fly-full var(--dur-sending-full) ease-in forwards;
}

.envelope-anim.is-flying--short {
  animation: envelope-fly-short var(--dur-sending-short) ease-in forwards;
}

/* --------------------------------
   12. 信封展開動畫（Answer）
   -------------------------------- */

@keyframes envelope-open {
  0%   { transform: scale(0.8);    opacity: 0; }
  60%  { transform: scale(1.04);   opacity: 1; }
  100% { transform: scale(1);      opacity: 1; }
}

.answer__envelope.is-opening {
  animation: envelope-open var(--dur-envelope) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --------------------------------
   13. 答案文字淡入（Answer）
   -------------------------------- */

/* 初始狀態：隱藏，等待 JS 加 class */
.answer__main,
.answer__description,
.answer__from {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity  0.4s var(--ease-natural),
    transform 0.4s var(--ease-natural);
}

.answer__main.is-revealed,
.answer__description.is-revealed,
.answer__from.is-revealed {
  opacity: 1;
  transform: translateY(0);
}