/* ===== 如此生活三十年 — 十週年派對 landing page ===== */

:root {
  --black:      #000000;
  --teal:       #5199b1;  /* 主青色：標題條 / CTA */
  --teal-dark:  #4d96ae;  /* wordmark */
  --teal-text:  #247b98;  /* timeline 時間標籤 */
  --blue-muted: #8eafc5;
  --gray:       #d0d0d0;  /* 標籤 pill / 區塊 */
  --offwhite:   #f6f6f6;  /* 淺底資訊區 / 說明 pill */
  --white:      #ffffff;

  --serif-en: 'Playfair Display', serif;
  --serif-tc: 'Noto Serif TC', serif;
  --crimson:  'Crimson Text', serif;
  --mono:     'Fira Code', monospace;
  --mono2:    'Fira Mono', monospace;

  --maxw: 1280px;

  /* 字級（三段式，對齊 Figma Desktop/Tablet/Mobile）。桌機預設： */
  --fs-head:  40px;  /* Playfair 大標題：40 / 35 / 26 */
  --fs-cta:   40px;  /* 報名表單：40 / 34 / 28 */
  --fs-label: 20px;  /* Crimson 標籤條：20 / 18 / 16 */
  --fs-md:    15px;  /* Noto 內文 / Fira Mono 連結：15 / 14 / 13 */
  --fs-sm:    13px;  /* Fira Code 小字：13 / 12 / 12 */

  --pad-x:    60px;  /* 內容左右 padding：桌機/平板 60、手機 40 */
  --footer-gap: 200px; /* Footer 上下兩塊間距：桌機 200 / 平板 160 / 手機 80 */
}

/* 平板（Figma 800）字級 */
@media (max-width: 900px) {
  :root {
    --fs-head:  35px;
    --fs-cta:   34px;
    --fs-label: 18px;
    --fs-md:    14px;
    --fs-sm:    12px;
    --footer-gap: 160px;
  }
}
/* 手機（Figma 375）字級 */
@media (max-width: 720px) {
  :root {
    --fs-head:  24px;
    --fs-cta:   28px;
    --fs-label: 16px;
    --fs-md:    13px;
    --fs-sm:    12px;
    --pad-x:    40px;
    --footer-gap: 80px;
  }
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--serif-tc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 整頁統一寬度：1280 置中，寬螢幕兩側留黑邊（對齊 Figma 畫板） */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* 各區塊上下相鄰時，1px 邊框會疊成 2px；往上收 1px 統一成 1px 線 */
.band,
.intro,
.section-head,
.tl-bar,
.tl-rows,
.location-name,
.venue { margin-top: -1px; }

/* ===== 跑馬燈 ===== */
.ticker {
  background: var(--teal);
  overflow: hidden;
  white-space: nowrap;
  animation: fade-in 1.4s ease 0.3s both;   /* 載入時淡入（與 hero 同步）*/
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ticker__track {
  display: inline-flex;
  animation: ticker 37s linear infinite;
}
.ticker__item {
  font-family: 'Fira Mono', 'Noto Serif TC', monospace;   /* 英文用 Fira Mono、中文用 Noto Serif TC */
  font-size: 11px;
  line-height: 44px;
  color: var(--black);
  padding-right: 1.5rem;
}
.ticker__item i { font-style: normal; opacity: .65; padding: 0 .35rem; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker,
  .hero,
  .ticker__track,
  .location-name__track { animation: none; }
}

/* ===== Hero ===== */
.hero {
  display: block;
  line-height: 0;
  animation: fade-in 1.4s ease 0.3s both;   /* 與跑馬燈一起淡入 */
}
.hero img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;     /* 預留空間避免載入前版面跳動 */
  object-fit: cover;
}

/* ===== 青色標題條 (Celebrate / Location) ===== */
.band {
  background: var(--teal);
  text-align: center;
  padding: 30px 1rem;
  border: 1px solid var(--black);
}
.band__title {
  font-family: var(--serif-en);
  font-weight: 600;
  font-size: var(--fs-head);
  color: var(--white);
}

/* ===== 活動介紹 ===== */
.intro {
  display: grid;
  grid-template-columns: 1fr 464px;
  align-items: stretch;
}
.intro__text {
  background: var(--black);
  padding: 50px var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  border: 1px solid var(--black);
}
.intro__body {
  font-family: var(--serif-tc);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 23px;
  color: var(--white);
}
.intro__caption {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--blue-muted);
}
.intro__lyrics {
  background: var(--gray);
  display: flex;
  align-items: flex-start;   /* 歌詞靠上對齊 */
  justify-content: flex-start; /* 歌詞靠左對齊 */
  padding: 50px 40px;        /* 上 padding 對齊左側文字 */
  border: 1px solid var(--black);
}
.intro__lyrics p {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--teal);
}

/* ===== 和服合照 ===== */
.photo {
  position: relative;
  height: 600px;
  background: url('assets/photo-mid.jpg') center/cover no-repeat;
}
.photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%);
}
.photo__caption {
  position: absolute;
  right: var(--pad-x);
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  z-index: 1;
}
.photo__zh {
  font-family: var(--serif-tc);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 23px;
  color: var(--white);
}
.photo__en {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--white);
}

/* ===== 資訊區 ===== */
.info__row {
  display: grid;
  grid-template-columns: 353px 1fr;
  align-items: stretch;
}
.info__row--reverse { grid-template-columns: 1fr 433px; }
/* 相鄰區塊收掉重複的框線，維持 1px */
.info__row > :nth-child(2) { border-left: none; }
.info__row + .info__row { margin-top: -1px; }
.info__label {
  background: var(--gray);
  color: var(--black);
  font-family: var(--crimson);
  font-size: var(--fs-label);
  line-height: 24px;
  display: flex;
  align-items: center;
  padding: 20px var(--pad-x);
  border: 1px solid var(--black);
}
.info__note {
  background: var(--offwhite);
  color: var(--black);
  font-family: var(--serif-tc);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 23px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px var(--pad-x);
  border: 1px solid var(--black);
}

/* ===== Timeline ===== */
.section-head {
  background: var(--teal);
  text-align: center;
  font-family: var(--serif-en);
  font-weight: 600;
  font-size: var(--fs-head);
  color: var(--white);
  padding: 30px 1rem;
  border: 1px solid var(--black);
}
.tl-bar {
  background: var(--gray);
  color: var(--black);
  font-family: var(--crimson);
  font-size: var(--fs-label);
  line-height: 24px;
  text-align: center;
  border: 1px solid var(--black);
  overflow: hidden;          /* 遮罩：內層文字升起時裁切 */
}
.tl-bar__in {
  display: block;
  padding: 10px 1rem;
}
.tl-rows {
  display: flex;
  flex-direction: column;
}
.tl-row { display: flex; min-height: 55px; }
.tl-row + .tl-row { margin-top: -1px; }   /* 列貼齊、收掉相鄰重複的框線 */
.tl-row--left   { justify-content: flex-start; }
.tl-row--center { justify-content: center; }
.tl-row--right  { justify-content: flex-end; }
.tl-time {
  background: var(--offwhite);
  color: var(--teal-text);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 20px;
  padding: 8px 10px;
  white-space: nowrap;
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
  align-self: flex-start;  /* tag 不撐滿列高，內容高度、靠上對齊 */
  margin-right: -1px;      /* 與右側說明框共用 1px 分隔線 */
}
.tl-desc {
  background: var(--offwhite);
  color: var(--black);
  font-family: var(--serif-tc);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 23px;
  padding: 8px 20px;
  border: 1px solid var(--black);
  display: flex;
  align-items: center;
}
.tl-desc--note { color: var(--black); }

/* ===== Location 名稱 ===== */
.location-name {
  background: var(--black);
  padding: 36px 0;
  border: 1px solid var(--black);
  overflow: hidden;
  white-space: nowrap;
}
.location-name__track {
  display: inline-flex;
  animation: ticker 42s linear infinite;
}
.location-name__item {
  font-family: 'Playfair Display', var(--serif-tc);   /* 英文用 Playfair、中文用 Noto Serif TC */
  font-weight: 600;
  font-size: var(--fs-head);
  line-height: 44px;
  color: var(--white);
  padding-right: 1.4em;   /* 每份之間的間隔 */
  word-spacing: 0.35em;   /* 字裡空白也撐開，整體更透氣 */
  white-space: nowrap;
}

/* ===== 店面照 + CTA ===== */
.venue {
  display: grid;
  grid-template-columns: 1fr 404px;
  min-height: 500px;
  border: 1px solid var(--black);
}
.venue__photo {
  position: relative;
  background: url('assets/venue.jpg') center/cover no-repeat;
}
.venue__map {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);   /* 桌機/平板：左側垂直置中 */
  font-family: var(--mono2);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--white);
  text-decoration: none;
  opacity: .9;
  text-shadow: 0 1px 5px rgba(60, 60, 60, .7);   /* 淺灰陰影，讓字在圖上更清楚 */
  transition: color .2s ease, opacity .2s ease, text-shadow .2s ease;
}
.venue__map:active {       /* 觸控點按瞬間的回饋（hover 見下方 hover-only 區塊）*/
  opacity: 1;
  color: var(--black);
  text-shadow: none;
}
.venue__cta {
  background: var(--teal);
  color: var(--white);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
  transition: background .2s ease, color .2s ease;
  border-left: 1px solid var(--black);
}
.venue__cta:active { background: var(--black); color: var(--teal); }
.venue__cta-top {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 20px;
}
.venue__cta-title {
  font-family: var(--serif-tc);
  font-weight: 700;
  font-size: var(--fs-cta);
  line-height: 56px;
}
.venue__cta-sub {
  font-family: var(--mono2);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: 20px;
}

/* ===== Footer ===== */
.footer {
  background: var(--black);
  padding: 60px;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__links a,
.footer__top-link {
  font-family: var(--mono2);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--white);
  text-decoration: none;
  opacity: .9;
}
.footer__top-link { font-family: var(--mono); font-weight: 400; font-size: var(--fs-sm); }
.footer__links a:active,
.footer__top-link:active { opacity: 1; color: var(--teal); }

.footer__bottom {
  margin-top: var(--footer-gap);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.footer__wordmark { height: 100px; width: auto; display: block; }
.footer__meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__join {
  font-family: var(--mono2);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--teal);
  border: 1px solid var(--teal);
  padding: 6px 18px;
  align-self: flex-end;
  border-radius: 999px;       /* 完全圓角（藥丸形） */
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.footer__join:active {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.footer__credit {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--white);
}

/* hover 樣式只在「有滑鼠可懸停」的裝置套用，
   避免觸控裝置點擊後 hover 狀態黏住（觸控回饋改用上面的 :active）*/
@media (hover: hover) {
  .venue__map:hover { opacity: 1; color: var(--black); text-shadow: none; }
  .venue__cta:hover { background: var(--black); color: var(--teal); }
  .footer__links a:hover,
  .footer__top-link:hover { opacity: 1; color: var(--teal); }
  .footer__join:hover { background: var(--white); color: var(--black); border-color: var(--white); }
}

/* ===== 捲動進場動畫（需 JS：.js 由 head 立即加上）===== */

/* Celebrate 區塊：整塊 fade & slide in from bottom */
.js #invitation,
.js .intro__lyrics {
  opacity: 0;
  transform: translateY(28px);
}
.js #invitation.in-view,
.js .intro.in-view .intro__lyrics {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* 區塊內文字：依序 fade & slide in from left（左滑距離小，不超出底色區）*/
.js .intro__body,
.js .intro__caption,
.js .intro__lyrics p {
  opacity: 0;
  transform: translateX(-16px);
}
.js .intro.in-view .intro__body,
.js .intro.in-view .intro__caption {     /* 先：左邊中文 */
  opacity: 1;
  transform: none;
  transition: opacity .8s ease .3s, transform .8s ease .3s;
}
.js .intro.in-view .intro__lyrics p {    /* 後：右邊英文 */
  opacity: 1;
  transform: none;
  transition: opacity .8s ease .6s, transform .8s ease .6s;
}

/* 合照 banner：圖片先 fade in，文字隨後從右邊 fade & slide in */
.js .photo { opacity: 0; }
.js .photo.in-view {
  opacity: 1;
  transition: opacity .9s ease;
}
.js .photo__caption {
  opacity: 0;
  transform: translateX(20px) translateY(-50%);   /* 從右邊（保留垂直置中）*/
}
.js .photo.in-view .photo__caption {
  opacity: 1;
  transform: translateX(0) translateY(-50%);
  transition: opacity .8s ease .7s, transform .8s ease .7s;
}

/* 資訊區：整排一起 fade & slide in（上排由左、下排由右）*/
.js .info__row { opacity: 0; transform: translateX(-28px); }   /* 上排：由左 */
.js .info__row--reverse { transform: translateX(28px); }        /* 下排：由右 */
.js .info__row.in-view {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .8s ease;
}

/* Timeline 標題：先 fade in */
.js .section-head { opacity: 0; }
.js .section-head.in-view {
  opacity: 1;
  transition: opacity .5s ease;
}
/* Door Open / Event Time 灰條：文字由下升起、被灰條遮罩裁切 */
.js .tl-bar__in { transform: translateY(100%); }
.js .tl-bar.in-view .tl-bar__in {
  transform: translateY(0);
  transition: transform .6s ease;
}
/* 卡片：依捲動順序、由左 fade & slide in（同批進場交錯延遲由 JS 加） */
.js .tl-row {
  opacity: 0;
  transform: translateX(-24px);
}
.js .tl-row.in-view {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* Location：標題＋漂浮台北跑馬燈一起 fade & slide up */
.js [data-reveal-group="location"] {
  opacity: 0;
  transform: translateY(30px);
}
.js [data-reveal-group="location"].in-view {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
/* 店面照：捲到才 fade in */
.js .venue { opacity: 0; }
.js .venue.in-view { opacity: 1; transition: opacity .8s ease; }
/* 報名按鈕：等內容出現後再進場（三個斷點都由下往上）*/
.js .venue__cta {
  opacity: 0;
  transform: translateY(28px);
}
.js .venue__cta.in-view {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease .4s, transform .9s ease .4s, background .2s ease, color .2s ease;
}

/* Footer：整塊 fade in；Join 按鈕晚一點由下方 fade & slide in */
.js .footer { opacity: 0; }
.js .footer.in-view { opacity: 1; transition: opacity .8s ease; }
.js .footer__join {
  opacity: 0;
  transform: translateY(16px);
}
.js .footer__join.in-view {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease .25s, transform .6s ease .25s, background .2s ease, color .2s ease, border-color .2s ease;
}

/* 減少動態效果：直接顯示、不滑動 */
@media (prefers-reduced-motion: reduce) {
  .js #invitation,
  .js .intro__lyrics,
  .js .intro__body,
  .js .intro__caption,
  .js .intro__lyrics p,
  .js .photo,
  .js .info__row,
  .js .section-head,
  .js .tl-bar__in,
  .js .tl-row,
  .js [data-reveal-group="location"],
  .js .venue,
  .js .venue__cta,
  .js .footer,
  .js .footer__join {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .photo__caption {
    opacity: 1 !important;
    transform: translateY(-50%) !important;   /* 保留垂直置中 */
    transition: none !important;
  }
}

/* ===== 響應式 ===== */
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; }
  .intro__lyrics { display: none; }   /* 歌詞區只在桌機顯示（依需求隱藏） */
  /* 平板維持並排，欄寬對齊 Figma 平板 frame */
  .info__row { grid-template-columns: 249px 1fr; }
  .info__row--reverse { grid-template-columns: 1fr 386px; }
  .venue { grid-template-columns: 1fr 260px; min-height: 350px; }
}

@media (max-width: 720px) {
  .hero img { aspect-ratio: 2000 / 2833; }   /* 手機直式海報比例 */
  /* 跑馬燈：手機縮小字級與高度 */
  .ticker__item { font-size: 10px; line-height: 32px; }
  /* 藍色標題條（Celebrate / Timeline / Location）：手機略縮高度 */
  .band,
  .section-head { padding-top: 24px; padding-bottom: 24px; }
  .photo { height: 460px; }
  /* 資訊區手機堆疊：標題在上、說明在下 */
  .info__row,
  .info__row--reverse { grid-template-columns: 1fr; }
  .info__row--reverse .info__label { order: -1; }
  .info__row > :nth-child(2) { border-left: 1px solid var(--black); }
  .info__note { border-top: none; }
  /* 報名區手機堆疊 */
  .venue { grid-template-columns: 1fr; min-height: 0; }
  .venue__photo { min-height: 360px; }
  .venue__cta { min-height: 247px; padding: 40px var(--pad-x); border-left: none; }
  /* 報名按鈕：手機維持原本速度 .6s */
  .js .venue__cta.in-view {
    transition: opacity .6s ease .4s, transform .6s ease .4s, background .2s ease, color .2s ease;
  }
  /* Timeline 手機版：垂直堆疊（標籤一列 + 說明滿版一列），對齊 Figma 手機 frame */
  .tl-row { flex-direction: column; align-items: stretch; min-height: 0; }
  /* 手機格子左右 padding 對齊頁面其他區塊（Figma：Time Label 10/40、Music Artist 16/40）*/
  .tl-time { align-self: flex-start; border-bottom: none; padding: 10px var(--pad-x); }
  .tl-desc { padding: 16px var(--pad-x); }
  .tl-time + .tl-desc { border-left: 1px solid var(--black); }
  /* 灰色時段條：手機略縮 padding */
  .tl-bar__in { padding: 10px 12px; }
  /* Map：手機改水平置中、靠近照片底（對齊 Figma 手機 frame）*/
  .venue__map { left: 50%; top: auto; bottom: 30px; transform: translateX(-50%); }
  /* Footer 手機版：全部置中堆疊（對齊 Figma 手機 frame）*/
  .footer__top { flex-direction: column; align-items: center; gap: 40px; }
  .footer__links { align-items: center; text-align: center; }
  .footer__bottom { flex-direction: column; align-items: center; gap: 60px; }
  .footer__meta { text-align: center; align-items: center; }
  .footer__join { align-self: center; }
  .footer__wordmark { height: 67px; }
  .venue__cta-title { line-height: 40px; }
}