/*
Tooplate 2117 Infinite Loop
https://www.tooplate.com/view/2117-infinite-loop

Home 视图专属样式（home.html）
公共部分（字体 / 基础 / 导航栏 / 公共响应式）见 css/common.css
由 index.html 统一加载，切换视图时不再重复下载。
*/

/* ========== 通用工具类 ========== */
.tm-font-big {
  font-size: 1.25rem;
}

/* ========== Hero ========== */
#home,
#infinite {
  background-color: #ffffff;
  height: 100vh;      /* 固定为正好一屏 */
  min-height: 100vh;
  overflow: hidden;   /* 内容超出时裁切，保证区块高度不被撑高 */
  position: relative;
}

@media (min-height: 600px) and (min-width: 1920px) {
  #home,
  #infinite {
    background-size: cover;
  }
}

@media (min-height: 830px) {
  #home,
  #infinite {
    background-position: center -210px;
  }
}

@media (min-height: 680px) and (max-height: 829px) {
  #home,
  #infinite {
    background-position: center -300px;
  }
}

@media (min-height: 500px) and (max-height: 679px) {
  #home,
  #infinite {
    background-position: center -400px;
  }
}

@media (max-height: 499px) {
  #home,
  #infinite {
    background-position: center -450px;
  }
}

.tm-hero-text-container {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* 让 Connecting 文案紧贴顶部固定导航栏的下沿；
     桌面端导航高度约 56px，把留白压到 36px 让文案与菜单栏的间距几乎为 0。
     移动端窄屏时导航变成汉堡按钮（位于左上角），为避免和文案左上角相撞，
     见下方 @media 重新放大留白 */
  padding-top: 36px;
  padding-bottom: 16px;
}

.tm-hero-text-container-inner {
  text-align: left;
}

.tm-hero-title {
  font-family: "DINPro Bold", "Inter Medium", "Raleway", sans-serif;
  font-size: 8rem;
  color: #000000;
}

.tm-hero-subtitle {
  font-size: 1.125rem;
  color: #000000;
  line-height: 1.35;
}

/* 窄屏（<768px）：导航变成左上角汉堡按钮，必须让出 56px 以上的顶部空间，
   避免汉堡按钮压到 Connecting 文案的左上角 */
@media (max-width: 767.98px) {
  .tm-hero-text-container {
    padding-top: 56px;
  }
}

@media (max-height: 480px) {
  .tm-hero-text-container {
    padding-top: 90px;
    padding-bottom: 0;
  }
}

/* ========== 轮播与图片动效 / Gallery ========== */
.tm-gallery-container {
  padding-top: 0;
  padding-bottom: 40px;
}

.tm-gallery-item {
  margin: 0 20px;
}

.tm-gallery-item img {
  width: 100%;
  max-height: calc(100vh - 375px); /* 高度随视口自适应，保证一屏内放得下轮播 */
  object-fit: cover;               /* 高度受限时按比例裁切，铺满不拉伸 */
}

.slick-dots {
  bottom: -65px;
}

.slick-dots li {
  margin: 0 13px;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before,
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #3ba0dd;
}

.slick-dots li button:before {
  font-size: 18px;
}

.tm-container-gallery {
  padding-top: 24px;
}

.tm-hero-title-gallery {
  text-align: left;
  line-height: 0.95;
  margin-bottom: 0;
}

/* Hover Effect */
/* Common style */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-size: 0.9em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 600;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/*---------------*/
/***** Honey *****/
/*---------------*/
figure.effect-honey {
  background: #4a3753;
  max-width: none;
}

figure.effect-honey img {
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-honey:hover img {
  opacity: 0.4;
}

figure.effect-honey figcaption::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #38C;
  content: "";
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}

figure.effect-honey h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em 1.5em;
  width: 100%;
  text-align: left;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey h2 i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* ========== 首页专属 / Home ========== */
/* BIGFISH 字标图片（替换原文字标题） */
.tm-hero-logo {
  display: block;
  width: 640px;      /* 接近原 8rem 文字标题的视觉宽度 */
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* 与下方轮播图之间的间距 */
}

/* Home 区图片仅作展示，不提供点击弹框，鼠标保持默认样式 */
#home .tm-gallery figure {
  cursor: default;
}

/* 首页首张轮播图与上方 BIGFISH 字标共用同一条左边缘。
   公共轮播样式给每个 figure 设置了 20px 左右外边距，
   这会让首页最左侧图片额外向右偏移；首页只去掉左侧外边距，
   其它间距继续沿用桌面端与移动端各自的公共规则。 */
#home .tm-gallery-item {
  margin-left: 0;
}

/* Home 区图片悬停时保持原样（Work 页的悬停动效不受影响）：
   1) 图片不淡出、不位移，始终以原透明度显示
      （覆盖下方 figure.effect-honey:hover img 的 0.4 透明度）；
   2) 隐藏 figcaption，悬停时底部不再滑出蓝色条与案例标题文字。 */
#home figure.effect-honey:hover img {
  opacity: 1;
}

#home figure.effect-honey figcaption {
  display: none;
}

/* Home 区：BIGFISH 字标与轮播图整体下移一点。
   上面的 Connecting 文案上移了 10px（.tm-hero-text-container 留白 68→58），
   这里同步把留白 64→74 补回来：只有文案上移，字标与轮播保持原位 */
#home .tm-container-gallery {
  padding-top: 74px;
}

/* 下移后，Home 轮播图高度上限同步下调，仍保证整块内容在一屏内 */
#home .tm-gallery-item img {
  max-height: calc(100vh - 415px);
}

/* ========== 响应式 / Responsive ========== */
@media (min-width: 1200px) {
  .tm-container-gallery {
    max-width: calc(100% - 130px);
  }

  .tm-hero-text-container {
    max-width: calc(100% - 130px);
  }
}

@media (max-width: 480px) {
  .tm-gallery-container {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }

  .slick-dots li {
    margin: 0 8px;
  }

  .tm-gallery-item {
    margin: 0;
  }
}