@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   story.css — Chapter 07｜Story Wall
   「一個活著的照片牆」

   ── 原則 ────────────────────────────────────────────────
     第一眼只有照片，沒有任何字。
     照片大中小不一，像 Pinterest。
     牆面很慢地自己漂移。
     滑鼠移過去才淡淡浮出心得。

   ── 動畫 ────────────────────────────────────────────────
     只有 Fade / Scale / Opacity / 緩慢位移。
     沒有飛入、旋轉、bounce。
   ═══════════════════════════════════════════════════════════ */

.sec-story{
  background:#FCFBFA;
  overflow:hidden;              /* 漂移時不要露出水平捲軸 */
}

.sec-story .sec-head{ margin-bottom:var(--s-4) }
.sec-story .sec-title{ letter-spacing:.12em; font-weight:500 }
.sec-story .sec-lead{ line-height:2; letter-spacing:.08em }


/* ── 標題下方的計數：很淡、很小 ── */
.sec-story .story-count{
  display:flex; flex-direction:column; align-items:center;
  gap:2px;
  margin:0 auto var(--s-7);
  color:var(--c-gray-2);
}
.sec-story .story-count__num{
  font-family:var(--f-en);
  font-size:clamp(28px, 1.4rem + 1.2vw, 40px);
  font-weight:300;
  letter-spacing:.06em;
  color:var(--c-navy);
  opacity:.55;
}
.sec-story .story-count__label{
  font-family:var(--f-en);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  opacity:.7;
}


/* ═══════════════════════════════════════════
   牆面
   位置與高度由 JS 設定（Masonry）
   ═══════════════════════════════════════════ */
.sec-story .story-wall{
  --wall-gap:20px;
  position:relative;
  width:100%;
}
.sec-story .story-wall[data-cols="1"]{
  display:flex; flex-direction:column;
  gap:var(--wall-gap);
  height:auto !important;
}


/* ═══════════════════════════════════════════
   單張：只有照片
   ═══════════════════════════════════════════ */
.sec-story .story-card{
  display:block;
  /* 漂移用 transform，過渡要慢而柔，才像藝術展 */
  transition:transform 1.2s var(--ease), opacity .8s var(--ease);
  will-change:transform;
}

/* 新卡片淡入的起始狀態 */
.sec-story .story-card--enter{
  opacity:0;
  transform:translateY(16px);
}

.sec-story .story-card__photo{
  position:relative;
  width:100%;
  padding-top:var(--ratio, 125%);
  overflow:hidden;
  border-radius:4px;
  background:var(--c-gray-1);
}
.sec-story .story-card__photo picture,
.sec-story .story-card__photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}


/* ── 心得：平時完全不存在，滑過去才浮出 ── */
.sec-story .story-card__reveal{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s-4) var(--s-3) var(--s-3);
  color:var(--c-white);
  background:linear-gradient(to top,
    rgba(18,18,20,.62) 0%, rgba(18,18,20,.20) 45%, rgba(18,18,20,0) 78%);
  opacity:0;
  transition:opacity .55s var(--ease);
}
.sec-story .story-card__quote{
  font-size:var(--fs-note);
  font-weight:500;
  line-height:1.85;
  letter-spacing:.04em;
  transform:translateY(10px);
  transition:transform .55s var(--ease);
}
.sec-story .story-card__more{
  margin-top:var(--s-2);
  font-size:14px;
  letter-spacing:.1em;
  opacity:.92;
  transform:translateY(10px);
  transition:transform .55s var(--ease) .06s;
}
.sec-story .story-card__more i{ font-style:normal }


/* PC：滑鼠移入才浮出 */
@media (hover:hover){
  .sec-story .story-card:hover .story-card__photo img{ transform:scale(1.06) }
  .sec-story .story-card:hover .story-card__reveal{ opacity:1 }
  .sec-story .story-card:hover .story-card__quote,
  .sec-story .story-card:hover .story-card__more{ transform:translateY(0) }
}

/* 手機：滑到畫面中央 → JS 加 is-active */
.sec-story .story-card.is-active .story-card__photo img{ transform:scale(1.05) }
.sec-story .story-card.is-active .story-card__reveal{ opacity:1 }
.sec-story .story-card.is-active .story-card__quote,
.sec-story .story-card.is-active .story-card__more{ transform:translateY(0) }


.sec-story .story-empty{
  text-align:center; color:var(--c-gray-2);
  padding-block:var(--s-8);
}

/* 無限滾動的觸發點，看不見 */
.sec-story .story-sentinel{ height:1px; width:100% }


/* ═══════════════════════════════════════════
   減少動態偏好：關掉放大、浮出、漂移、淡入
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .sec-story .story-card,
  .sec-story .story-card__photo img,
  .sec-story .story-card__reveal,
  .sec-story .story-card__quote,
  .sec-story .story-card__more{ transition:none !important; transform:none !important }
  .sec-story .story-card--enter{ opacity:1 }
}