/**
 * Banner 與封面：首頁 Banner、手機平板比例、Ken Burns、輪播、文章封面圖層
 *
 * @package Yafun2027
 */

/* ==========================================================================
   基礎樣式（源自 Dyad，已精簡；先於本檔下方的野放樣式）
   ========================================================================== */

.site-banner {
  background-color: #242629;
  opacity: 1;
  position: fixed;
  text-shadow: rgba(0, 0, 0, 0.3) 0 0 8px;
  top: 0;
  width: 100%;
  z-index: 1;
  --banner-progress: 0;
}

.admin-bar .site-banner {
  top: 32px;
}

.site-banner-inner {
  opacity: 1;
  transition: opacity 1s;
}

.is-scrolled .site-banner-inner {
  opacity: 0.8;
}

.site-banner-header {
  bottom: 6rem;
  color: #fff;
  left: 25%;
  opacity: 1;
  position: absolute;
  right: 25%;
  text-align: center;
  z-index: 5;
  transition: opacity 0.2s;
}

.is-scrolled .site-banner-header {
  opacity: 0.5;
}

.site-banner-header::before,
.site-banner-header::after {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  content: "";
  display: block;
  margin: 0 auto;
  position: absolute;
}

.site-banner-header::before {
  left: 25%;
  top: 0;
  width: 50%;
}

.site-banner-header::after {
  bottom: 0;
  left: 44%;
  width: 12%;
}

.site-banner .site-description {
  clip: auto;
  position: static;
}

.site-banner-media {
  height: 0;
  overflow: hidden;
  padding-bottom: 37%;
  position: relative;
  z-index: 0;
}

.site-banner .site-banner-thumbnail {
  background-position: center center;
  background-size: cover;
  padding-bottom: 37%;
}

.banner-custom-header .site-banner-header {
  padding: 3rem 0;
}

.site-banner .site-banner-media::before,
.banner-custom-header .site-banner-media::before {
  inset: 30% 0 0;
  content: "";
  position: absolute;
  z-index: 2;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}

@media only screen and (max-width: 1600px) {
  .site-banner-header {
    left: 15%;
    right: 15%;
  }

  .site-banner-media,
  .site-banner .site-banner-thumbnail {
    padding-bottom: 40%;
  }

}
@media only screen and (max-width: 1200px) {
  .site-banner {
    position: relative;
    width: 100%;
  }

  .site-banner-header {
    bottom: 5rem;
    left: 15%;
    right: 15%;
  }

  .site-banner-media,
  .site-banner .site-banner-thumbnail {
    padding-bottom: 50%;
  }

  .admin-bar .site-banner {
    top: auto;
  }

  .is-scrolled .site-banner-inner,
  .is-scrolled .site-banner-header {
    opacity: 1;
  }

}
@media only screen and (max-width: 960px) {
  .site-banner-header::after {
    display: none;
  }

}
@media only screen and (max-width: 680px) {
  .site-banner {
    border-bottom: 1px solid #fff;
  }

  .site-banner-header {
    bottom: 20px;
    left: 0;
    right: 0;
  }

  .site-banner-header::after,
  .site-banner-header::before {
    display: none;
  }

  .banner-custom-header .site-banner-header {
    padding-top: 15px;
  }

}
@media only screen and (max-width: 400px) {
  .banner-custom-header .site-banner-header {
    padding: 10px 0;
  }

}

/* ==========================================================================
   首頁 Banner 動態
   - 背景緩慢推近（Ken Burns），隨機封面載入後淡入
   - 標語依序浮現、裝飾線由中間展開
   - 往下捲動時標語上移淡出（由 js/banner.js 設定 --banner-progress）
   ========================================================================== */

.site-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 22, 18, 0.55) 0%, rgba(15, 22, 18, 0) 55%),
    linear-gradient(to bottom, rgba(15, 22, 18, 0.35) 0%, rgba(15, 22, 18, 0) 25%);
  pointer-events: none;
}

.banner-custom-header .site-banner-thumbnail {
  transform-origin: 60% 50%;
  animation: yf-banner-kenburns 24s ease-in-out infinite alternate;
  transition: opacity 1.2s ease;
}

.banner-custom-header.is-loading .site-banner-thumbnail {
  opacity: 0;
}

.site-banner .site-banner-header,
.is-scrolled .site-banner-header {
  opacity: calc(1 - var(--banner-progress) * 1.4);
  transform: translateY(calc(var(--banner-progress) * -40px));
  transition: none;
  will-change: opacity, transform;
}

/* 標語原為 <h1>，改為 <div> 後補回父主題 .site-banner h1 的版面設定 */
.banner-custom-header .site-banner-header .site-description {
  display: block;
  position: static;
  clip: auto;
  margin: 0 3rem;
  padding: 0;
  text-align: center;
  font-family: var(--font-kai);
  font-weight: 400;
  font-size: clamp(2rem, 2.4vw, 3.2rem);
  letter-spacing: 0.2em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

/* 標語逐句浮現：banner.js 會依全形逗號拆成 .banner-phrase */
.banner-phrase {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(4px);
  animation: yf-phrase-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.5s + var(--i, 0) * 0.45s);
}

/* 裝飾線：上方細線與主色短線由中間向兩側展開 */
.site-banner-header::before,
.site-banner-header::after,
.banner-custom-header .site-banner-header .site-description::before {
  transform: scaleX(0);
  animation: yf-line-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.site-banner-header::after {
  animation-delay: 1.6s;
}

.banner-custom-header .site-banner-header .site-description::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 120px;
  margin-left: -60px;
  background-color: var(--color-sand);
  height: 3px;
  margin-top: -1.5px;
}

.banner-custom-header .site-banner-header.hide-deco .site-description::before {
  display: none;
}

/* 捲動提示 */
.banner-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  z-index: 6;
  width: 1px;
  height: 4.2rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
  opacity: calc(1 - var(--banner-progress) * 3);
}

.banner-scroll-hint::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: yf-scroll-hint 2.2s ease-in-out 2.4s infinite;
}

@keyframes yf-banner-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08) translate(-1%, -1%); }
}

@keyframes yf-phrase-in {
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes yf-line-grow {
  to { transform: scaleX(1); }
}

@keyframes yf-scroll-hint {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

@media (max-width: 767px) {
  .banner-custom-header .site-banner-header .site-description {
    letter-spacing: 0.08em;
  }

  .banner-scroll-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-custom-header .site-banner-thumbnail,
  .banner-phrase,
  .site-banner-header::before,
  .site-banner-header::after,
  .banner-custom-header .site-banner-header .site-description::before,
  .banner-scroll-hint::after {
    animation: none !important;
  }

  .banner-phrase {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .site-banner-header::before,
  .site-banner-header::after,
  .banner-custom-header .site-banner-header .site-description::before {
    transform: none;
  }

  .posts .entry-media,
  .posts .entry-title a,
  .link-more a {
    transition: none;
  }

  .posts .hentry:hover .entry-media {
    transform: none;
  }
}
/* ==========================================================================
   手機／平板：首頁 Banner 與列表頁主視覺改為正方形
   橫向平板時以「螢幕高度扣掉頁首」為上限，避免整個畫面都被 Banner 佔滿
   ========================================================================== */

@media only screen and (max-width: 1200px) {
  /* 不用 aspect-ratio：搭配 max-height 時瀏覽器會為了維持 1:1 而縮窄寬度（橫向平板只剩半邊）。
     改為寬度滿版、高度取「螢幕寬度」與「螢幕高度扣掉頁首」的較小值。 */
  .site-banner-media {
    width: 100%;
    padding-bottom: 0;
    height: min(100vw, calc(100vh - var(--yf-header-h, 64px)));
    height: min(100vw, calc(100svh - var(--yf-header-h, 64px)));
  }

  .site-banner .site-banner-thumbnail {
    position: absolute;
    inset: 0;
    padding-bottom: 0;
  }

  .yf-archive-hero {
    width: 100%;
    min-height: min(100vw, calc(100vh - var(--yf-header-h, 64px)));
    min-height: min(100vw, calc(100svh - var(--yf-header-h, 64px)));
    box-sizing: border-box;
  }

  /* 搜尋頁頂端沒有照片，維持依內容高度 */
  .yf-archive-hero.yf-search-hero {
    min-height: 0;
  }
}

/* 手機直式：列表卡片左右各留白 10px、卡片間距 10px，半滿版大圖仍維持滿版 */
@media (max-width: 767px) and (orientation: portrait) {
  .posts {
    gap: 10px;
    padding: 10px;
    background: var(--color-paper);
  }

  .posts .hentry {
    border-radius: 6px;
    border: 1px solid #e2ddcf;
    box-shadow: 0 1px 2px rgba(31, 42, 36, 0.06), 0 4px 12px -4px rgba(31, 42, 36, 0.12);
  }

  .posts .yf-featured {
    margin: 0 -10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* 卡片圖片上下各少 20px（總高度減 40px），維持置中裁切 */
  .posts .hentry:not(.yf-featured) .entry-media {
    padding-bottom: calc(66.666% - 40px);
  }
}

/* ==========================================================================
   文章頁封面：與首頁 Banner 相同的緩慢推近（Ken Burns）
   封面是父主題寫在元素上的 inline 背景圖，以 ::before 繼承同一張圖做動畫，
   元素本身不縮放，避免超出版面。
   - 961px 以上：.entry-media 顯示直式大圖
   - 960px 以下：.entry-media-thumb 顯示橫式圖
   ========================================================================== */

.is-singular .entry-media,
.is-singular .entry-media-thumb {
  position: relative;
  overflow: hidden;
}

@media only screen and (min-width: 961px) {
  .is-singular .entry-media {
    position: fixed;
  }
}

.is-singular .entry-media::before,
.is-singular .entry-media-thumb::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: inherit;
  background-position: center;
  background-size: cover;
  transform-origin: 60% 50%;
  animation: yf-banner-kenburns 24s ease-in-out infinite alternate;
  pointer-events: none;
  content: none;
}

.is-singular .entry-media > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .is-singular .entry-media::before,
  .is-singular .entry-media-thumb::before,
  .yf-archive-hero-media {
    animation: none;
  }
}
/* ==========================================================================
   Banner 輪播（js/slideshow.js）
   每 5 秒淡入下一張（1.6 秒），每張在 7 秒內交替緩慢放大或縮小
   ========================================================================== */

.yf-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.yf-slides > .yf-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform-origin: 55% 50%;
  transition: opacity 1.6s ease;
  animation: none;
}

.yf-slides > .yf-slide.is-leaving {
  z-index: 1;
  opacity: 1;
}

.yf-slides > .yf-slide.is-active {
  z-index: 2;
  opacity: 1;
}

.yf-slides > .yf-slide.zoom-in {
  animation: yf-slide-zoom-in 7s linear forwards;
}

.yf-slides > .yf-slide.zoom-out {
  animation: yf-slide-zoom-out 7s linear forwards;
}

@keyframes yf-slide-zoom-in {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

@keyframes yf-slide-zoom-out {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .yf-slides > .yf-slide {
    transition: none;
    animation: none;
  }
}
/* ==========================================================================
   文章頁封面：.yf-cover 圖層（js/slideshow.js 淡入並輪播）
   取代先前以 ::before 繼承背景圖的推近效果
   ========================================================================== */

.yf-cover {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  /* JS 未執行時的保險：4 秒後自動顯示 */
  opacity: 0;
  animation: yf-cover-fallback 0s 4s forwards;
}

.yf-cover.is-static {
  opacity: 1;
  animation: none;
}

@keyframes yf-cover-fallback {
  to { opacity: 1; }
}

.is-singular .entry-media > .yf-cover,
.is-singular .entry-media > .yf-slides,
.is-singular .entry-media-thumb > .yf-cover,
.is-singular .entry-media-thumb > .yf-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 行動版顯示橫式封面，直式封面圖層不顯示（也不會下載） */
@media only screen and (max-width: 960px) {
  .is-singular .entry-media > .yf-cover,
  .is-singular .entry-media > .yf-slides {
    display: none;
  }
}

/* 文章頁封面：12 秒換一張，放大／縮小緩慢（15 秒內變化 8%，涵蓋停留與淡入時間） */
.is-singular .entry-media .yf-slides > .yf-slide.zoom-in {
  animation: yf-cover-zoom-in 15s linear forwards;
}

.is-singular .entry-media .yf-slides > .yf-slide.zoom-out {
  animation: yf-cover-zoom-out 15s linear forwards;
}

@keyframes yf-cover-zoom-in {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

@keyframes yf-cover-zoom-out {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* 首頁 Banner：每張停留 7–10 秒，放大／縮小更緩慢（14 秒內變化 8%） */
.site-banner-media .yf-slides > .yf-slide.zoom-in {
  animation: yf-cover-zoom-in 14s linear forwards;
}

.site-banner-media .yf-slides > .yf-slide.zoom-out {
  animation: yf-cover-zoom-out 14s linear forwards;
}

/* 平板橫式：首頁 Banner 與列表頁主視覺不再佔滿螢幕高度，比例與桌機相同 */
@media only screen and (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
  .site-banner-media {
    height: 37vw;
  }

  .yf-archive-hero {
    min-height: 42vh;
  }
}