/* ==========================================================================
   NUDOT 复刻 — 页脚功能区（Footer Pro）
   --------------------------------------------------------------------------
   目标：把原站那个"文字堆叠式"的页脚，改成有结构层次、有交互反馈的功能区，
        并让它与上一幕「照片展示区」(#s3-gallery) 平滑衔接。

   设计参照：
     ① 用户提供的参考站（thestart.com.au）—— 大标题带圆点 + 细竖线分栏 +
        胶囊标签 + 字符 scramble
     ② 「黑金」质感 —— 底色沿用照片展示区的黑，金色作为唯一强调色。
        注：早先版本做过米白底（原站菜单的配色），但那与纯黑的照片展示区
        硬切成两段，正是"格格不入"的直接原因。故回归深色。

   实现约束：
     - 不改动原站 DOM 结构，全部用 CSS 重排 + 伪元素 + 少量 JS 注入
     - 原站把 .footer-nav 隐藏了（尺寸 0）。那正是五个导航链接，
       直接启用为「導航」栏，无需另造内容
     - 用 display: contents 把包裹层子元素提为 grid item，从而在不改结构
       的前提下完成分栏

   文件结构：1 主题 → 2 主体 → 3 导航 → 4 胶囊 → 5 链接 → 6 大标题
            → 7 已移除项 → 8 底部版权幕 → 9 响应式 → 10 无障碍 → 11 两幕衔接
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 主题：黑金
   底色对齐上一幕的 #000，仅提 8 级明度做层次，避免交界出现硬边；
   文字用暖白，金色作为唯一强调色。
   -------------------------------------------------------------------------- */
.site-footer {
  --fp-bg: #08090b;
  --fp-bg-soft: #0d0f12;
  --fp-ink: #f1ece3;
  --fp-ink-soft: #9a948a;
  --fp-gold: #c89a45;
  --fp-line: rgba(255, 255, 255, 0.12);
  --fp-line-strong: rgba(255, 255, 255, 0.24);

  position: relative !important;
  background: var(--fp-bg) !important;
  color: var(--fp-ink) !important;
}

/* 与上一幕的缝合：顶部一条渐隐金线作为"接缝"，不让两块黑直接相撞。
   由 JS 加 .fp-seam 触发展开。 */
.site-footer::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(200, 154, 69, 0.55) 28%,
              rgba(200, 154, 69, 0.55) 72%,
              transparent 100%) !important;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  z-index: 4;
  pointer-events: none;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer.fp-seam::before {
  transform: scaleX(1);
}

/* 清掉中间层自带的黑色背景，让 .site-footer 的底色统一生效 */
.footer-top,
.footer-main-content,
.footer-right-panel,
.footer-copyright-bridge {
  background: transparent !important;
}

.footer-top {
  color: var(--fp-ink) !important;
}

/* --------------------------------------------------------------------------
   2. 主体：内容区（单列）
   用 display:contents 让包裹 div "消失"，其子元素直接参与 grid 定位。
   （原设计为「左内容 + 右视频」两列，右侧视频块已按要求移除，故收敛为单列。）
   -------------------------------------------------------------------------- */
.footer-main-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 0 !important;
  padding-top: 0 !important;
  border-bottom: 1px solid var(--fp-line) !important;
  align-items: start !important;
}

.footer-main-content > div:first-child {
  display: contents !important;
}

/* 描述：第 1 行 */
.footer-description {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  color: var(--fp-ink-soft) !important;
  max-width: 52ch !important;
  padding: 34px 0 0 0 !important;
  border-right: 0 !important;
  margin: 0 !important;
}

/* 联系方式：第 2 行 */
.footer-contact-info {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 18px 0 0 0 !important;
  border-right: 0 !important;
  margin: 0 !important;
}

/* 地址：那个没有 class 的内联样式 div，第 3 行 */
.footer-main-content > div:first-child > div:not([class]) {
  grid-column: 1 !important;
  grid-row: 3 !important;
  padding: 10px 0 30px 0 !important;
  border-right: 0 !important;
  margin: 0 !important;
  color: var(--fp-ink-soft) !important;
  font-size: 13px !important;
}

/* 胶囊带：通栏第 4 行 */
.footer-main-content > div:first-child > .footer-nav-links {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  border-right: 0 !important;
  padding: 22px 0 30px 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--fp-line) !important;
}

/* 顶部横向信息条：带分隔的标签带 */
.footer-info-bar {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--fp-line) !important;
  border-bottom: 1px solid var(--fp-line) !important;
  margin-bottom: 0 !important;
}

.footer-info-bar > span {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 20px 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--fp-ink-soft) !important;
}

/* 每个标签前加一枚金色圆点 */
.footer-info-bar > span::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fp-gold);
}

.footer-info-bar > span + span {
  border-left: 1px solid var(--fp-line) !important;
  padding-left: 24px !important;
}

.footer-info-bar > span:nth-child(2) {
  padding-left: 24px !important;
}

.footer-info-bar > span:nth-child(3) {
  justify-content: flex-end !important;
}

/* --------------------------------------------------------------------------
   3. 「導航」栏
   原站把 .footer-nav 设为 display:none（尺寸 0）。由 JS 补 .fp-nav 类并重排为
   5 栏大号导航。

   注意：务必不要再写 `.site-footer .footer-nav { display:none }` ——
   该元素同时挂着 footer-nav 与 fp-nav 两个类，那样会把它一起藏掉
   （且 specificity 更高，!important 也压不过）。这个坑已经踩过一次。
   -------------------------------------------------------------------------- */
.fp-nav {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--fp-line) !important;
}

.fp-nav > a {
  position: relative;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  padding: 22px 20px 22px 0 !important;
  font-family: var(--font-family-display);
  font-size: clamp(15px, 1.35vw, 21px) !important;
  letter-spacing: -0.01em !important;
  color: var(--fp-ink) !important;
  text-decoration: none !important;
  border-right: 1px solid var(--fp-line) !important;
  transition: color 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fp-nav > a:last-child {
  border-right: 0 !important;
}

.fp-nav > a::after {
  content: "↗";
  font-size: 0.72em;
  color: var(--fp-gold);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-nav > a:hover::after,
.fp-nav > a:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

.fp-nav > a:hover {
  color: var(--fp-gold) !important;
}

/* 行末序号 */
.fp-nav__idx {
  margin-left: auto !important;
  padding-left: 14px !important;   /* 保证与标题之间的最小间距，窄屏下不会贴字 */
  flex: 0 0 auto !important;
  font-family: var(--font-family-accent);
  font-size: 10px;
  color: var(--fp-ink-soft);
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   4. 胶囊标签（社交链接）
   关键：原站运行时会把每个 <a> 包进 span.frev-wrap（页脚文字揭示动画层，
   display:block + overflow:hidden）。所以
     ① 必须用后代选择器，`>` 直接子选择器匹配不到 <a>
     ② 胶囊要加在 .frev-wrap 上 —— 它自带的 overflow:hidden 配合
        border-radius 正好把文字动画裁在胶囊内部，比改成 visible 更好看
   -------------------------------------------------------------------------- */
.footer-nav-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.footer-nav-links > .frev-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 11px 22px !important;
  border: 1px solid var(--fp-line-strong) !important;
  border-radius: 999px !important;
  background: transparent !important;
  transition:
    background-color 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.34s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

.footer-nav-links > .frev-wrap::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  background: var(--fp-gold) !important;
}

.footer-nav-links > .frev-wrap > a {
  display: inline-block !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fp-ink) !important;
  text-decoration: none !important;
  transition: color 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-nav-links > .frev-wrap:hover,
.footer-nav-links > .frev-wrap:focus-within {
  background: var(--fp-ink) !important;
  border-color: var(--fp-ink) !important;
  transform: translateY(-2px);
}

.footer-nav-links > .frev-wrap:hover > a,
.footer-nav-links > .frev-wrap:focus-within > a {
  color: var(--fp-bg) !important;
}

/* 兜底：若某页未注入 .frev-wrap，直接给裸 <a> 也套上胶囊 */
.footer-nav-links > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 11px 22px !important;
  border: 1px solid var(--fp-line-strong) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fp-ink) !important;
  text-decoration: none !important;
}

.footer-nav-links > a:hover {
  background: var(--fp-ink) !important;
  border-color: var(--fp-ink) !important;
  color: var(--fp-bg) !important;
}

/* --------------------------------------------------------------------------
   5. 链接：金色下划线扫过
   -------------------------------------------------------------------------- */
.footer-contact-info a,
.footer-description a {
  color: var(--fp-ink) !important;
  text-decoration: none !important;
  background-image: linear-gradient(var(--fp-gold), var(--fp-gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-contact-info a:hover,
.footer-description a:hover {
  background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   6. 大标题：● Let's talk ↗
   由 footer-pro.js 注入。参考站的"圆点 + 大字 + 箭头"语言。
   -------------------------------------------------------------------------- */
.fp-lead {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 46px 0 40px 0 !important;
  border-bottom: 1px solid var(--fp-line) !important;
}

.fp-lead__dot {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--fp-gold);
  box-shadow: 0 0 0 0 rgba(200, 154, 69, 0.5);
  animation: fpPulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes fpPulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 154, 69, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(200, 154, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 154, 69, 0); }
}

.fp-lead__text {
  font-family: var(--font-family-display);
  font-size: clamp(28px, 4vw, 62px);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--fp-ink);
  white-space: nowrap;
}

.fp-lead__arrow {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fp-lead:hover .fp-lead__arrow {
  transform: translate(6px, -6px);
}

.fp-lead__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--fp-line);
}

/* --------------------------------------------------------------------------
   7. 会话中的大 © 圆：已隐藏（信息由底部版权区呈现，不丢失）
   -------------------------------------------------------------------------- */
.footer-copyright-bridge {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. 底部版权幕：黑金体系
   原站这里是「深色底 + 银灰金属浮雕 NU'DOT 大字」，靠
     .footer-parallax-bg { mix-blend-mode: luminosity }
   呈现金属质感。这个混合模式只能在暗底上工作 —— 早先改成米白底时它彻底
   失效（银灰的亮度套上米白色相 → 一片脏灰），整块 300px 成了空洞。

   现在回到深底，改用 screen（亮底相加），并把银灰调成香槟金：
   金色成为连接照片区与页脚的色彩线索。
   -------------------------------------------------------------------------- */
.footer-parallax-section {
  background: var(--fp-bg) !important;
  color: var(--fp-ink) !important;
  border-top: 1px solid var(--fp-line) !important;
  overflow: hidden !important;
}

.footer-parallax-bg {
  /* JS 注入的 --footer-bg-image 相对路径解析基准不对（落在 css/ 下 → 404），
     这里直接指定正确路径，不依赖那个变量 */
  background-image: url("../images/footer.webp") !important;
  /* contain：完整显示浮雕字，两侧自然留白。
     注意 contain 时图小于容器，默认会 repeat —— 必须显式 no-repeat，
     否则两侧会各多出一块重复的 NU'DOT（踩过）。 */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-attachment: scroll !important;
  /* 银灰 → 香槟金。参数刻意保守：早期用 sepia(1) saturate(2.6) 出来是"铜箔"，
     过艳反而不高级。 */
  filter: sepia(0.85) saturate(1.9) hue-rotate(-6deg) brightness(1.0) contrast(1.05) !important;
  /* 深底上用 screen 让金色透出来（multiply 会把金字乘成黑） */
  mix-blend-mode: screen !important;
  opacity: 0.82 !important;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-parallax-copy {
  position: relative !important;
  z-index: 2 !important;
  color: var(--fp-ink-soft) !important;
  letter-spacing: 0.06em !important;
}

/* --------------------------------------------------------------------------
   9. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .fp-nav {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .fp-nav > a {
    font-size: 15px !important;
  }
}

@media (max-width: 767px) {
  .footer-info-bar {
    grid-template-columns: 1fr !important;
  }
  .footer-info-bar > span + span {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  .footer-info-bar > span:nth-child(3) {
    justify-content: flex-start !important;
  }
  .fp-nav {
    grid-template-columns: 1fr !important;
  }
  .fp-nav > a {
    border-right: 0 !important;
    border-bottom: 1px solid var(--fp-line) !important;
  }
  .fp-lead__text {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   10. 无障碍：尊重「减少动态效果」
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fp-lead__dot {
    animation: none !important;
  }
}

/* ==========================================================================
   11. 两幕衔接：照片展示区 → Let's talk
   --------------------------------------------------------------------------
   衔接对象：
     #s3-gallery  (照片展示区, 纯黑 #000, 高 4709, 含 6 张 .pg-item 作品图)
     #site-footer (Let's talk,   #08090b)
   两幕在文档中仅隔 228px，因此过渡必须"跨过"这个缝隙，而不是等页脚自己
   进入视口才开始 —— 那样中间会有一段静止的黑，观感就是断层。

   触发：滚动驱动（scroll-driven），进度取自页脚顶部相对视口的位置。
        不依赖点击或自动播放 —— 用户滚到哪，动画就走到哪，天然连贯。

   节奏：全站统一的品牌主缓动 cubic-bezier(0.16, 1, 0.3, 1)（expo-out），
        单元素 0.9s，逐项错开 70ms，整段序列约 1.8s。刻意不加回弹/过冲。

   不割裂的三个抓手：
     ① 金色接缝线：跟随滚动从中心向两侧展开，成为两幕之间的显式接续物
     ② 照片区上浮：最后一屏照片轻微上移并被"推"出视野，形成前后层次
     ③ 同色系过渡：#000 → #08090b 仅提 8 级明度，交界不产生硬边
   ========================================================================== */

/* ---------------- 11.1 照片展示区：被"推"出去 ---------------- */
.s3-gallery-section {
  position: relative;
  transform: translateY(calc(var(--fp-lift, 0) * -34px));
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.s3-gallery-section::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(var(--fp-lift, 0) * 0.42);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s linear;
}

/* ---------------- 11.2 Let's talk：元素落位 ---------------- */
.fp-lead,
.footer-info-bar,
.fp-nav,
.footer-main-content,
.fp-lead__dot {
  will-change: transform, opacity;
}

.fp-lead {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-info-bar {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 导航与主体的子元素各自错开进场，让"落位"是逐项的 */
.fp-nav > a {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-description,
.footer-contact-info,
.footer-main-content > div:first-child > div:not([class]) {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-nav-links > .frev-wrap,
.footer-nav-links > a {
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 落位态 */
.site-footer.fp-revealed .fp-lead,
.site-footer.fp-revealed .footer-info-bar,
.site-footer.fp-revealed .fp-nav > a,
.site-footer.fp-revealed .footer-description,
.site-footer.fp-revealed .footer-contact-info,
.site-footer.fp-revealed .footer-main-content > div:first-child > div:not([class]),
.site-footer.fp-revealed .footer-nav-links > .frev-wrap,
.site-footer.fp-revealed .footer-nav-links > a {
  opacity: 1;
  transform: none;
}

/* 大标题的金点：最后落位，作为整段的"收束" */
.fp-lead__dot {
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.site-footer.fp-revealed .fp-lead__dot {
  opacity: 1;
  transform: scale(1);
}

/* ---------------- 11.3 底部版权幕 ---------------- */
.footer-parallax-section .footer-parallax-bg {
  transform: translateY(calc(var(--fp-lift, 0) * 18px));
}

.footer-parallax-copy {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer.fp-revealed .footer-parallax-copy,
.footer-parallax-section.fp-in .footer-parallax-copy {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- 11.4 无障碍 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .s3-gallery-section {
    transform: none !important;
  }
  .s3-gallery-section::after {
    opacity: 0 !important;
  }
  .fp-lead,
  .footer-info-bar,
  .fp-nav > a,
  .footer-description,
  .footer-contact-info,
  .footer-main-content > div:first-child > div:not([class]),
  .footer-nav-links > .frev-wrap,
  .footer-nav-links > a,
  .fp-lead__dot,
  .footer-parallax-copy {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}