/* ==========================================================================
   写春秋首页 · 电影级三幕
   film-hs   握手（帧序列 + 滚动驱动）
   film-24   二十四小时（视频 + 时钟 + 数字孪生溶解）
   founder   创始人肖像（纯 CSS 重排版，不改任何 DOM）
   前缀统一 film-，不与现有 geo- 冲突
   ========================================================================== */

:root {
  --film-ink: #0B0809;
  --film-red: #c8102e;
  --film-gold: #bf9b30;
  --film-paper: #f2ede7;
}

/* ---------------------------------------------------- 通用文案层 */
.film-caps { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.film-cap {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(90vw, 880px); text-align: center; opacity: 0;
}
.film-cap__eyebrow {
  margin: 0 0 1rem; font-size: .72rem; letter-spacing: .42em;
  color: var(--film-gold); text-transform: uppercase;
}
.film-cap h2 {
  margin: 0; font-weight: 800; line-height: 1.3; letter-spacing: .01em;
  font-size: clamp(1.6rem, 4.4vw, 3rem); color: #fff;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .92);
}
.film-cap h2 em { font-style: normal; color: #ff6f78; }
.film-cap p {
  margin: 1rem auto 0; max-width: 32em; color: #d6cdca; line-height: 1.9;
  font-size: clamp(.86rem, 1.6vw, 1.04rem); text-shadow: 0 2px 18px rgba(0, 0, 0, .92);
}
.film-cta {
  display: inline-flex; align-items: center; gap: .55rem; pointer-events: auto;
  background: var(--film-red); color: #fff; text-decoration: none; font-weight: 700;
  padding: .95rem 2.15rem; letter-spacing: .06em;
  box-shadow: 0 12px 44px rgba(200, 16, 46, .48);
}
.film-cta:hover { background: #a50d26; color: #fff; }
.film-cta:focus-visible { outline: 3px solid var(--film-gold); outline-offset: 3px; }

/* ---------------------------------------------------- 第一幕 握手 */
.film-hs__scene { position: relative; height: 420vh; }
.film-hs__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: radial-gradient(120% 95% at 50% 50%, #2a1013 0%, #140d0f 44%, #070506 100%);
}
.film-hs__media {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; will-change: transform;
}
.film-hs__canvas,
.film-hs__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.film-hs__poster {
  background: center / cover no-repeat;
  transition: opacity .5s ease;
}
.film-hs__canvas { opacity: 0; transition: opacity .5s ease; }
.film-hs.is-ready .film-hs__canvas { opacity: 1; }
.film-hs.is-ready .film-hs__poster { opacity: 0; }

.film-hs__fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.film-hs__flash {
  position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0;
  pointer-events: none; mix-blend-mode: screen;
}
.film-hs__vig {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(74% 64% at 50% 50%, transparent 34%, rgba(0, 0, 0, .74) 100%);
}
.film-hs .film-cap--a { top: 9vh; }
.film-hs .film-cap--b { bottom: 17vh; }
.film-hs .film-cap--c { bottom: 8vh; }
.film-hs__seal { position: absolute; z-index: 4; right: 6vw; bottom: 14vh; opacity: 0; }

/* ---------------------------------------------------- 第二幕 二十四小时 */
.film-24__scene { position: relative; height: 560vh; }
.film-24__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden; background: #06090c;
}
.film-24__video,
.film-24__twin {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 1;
}
.film-24__twin { opacity: 0; z-index: 2; }
.film-24__flow { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.film-24__scrim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 9, 12, .9) 0%, rgba(6, 9, 12, .55) 34%, rgba(6, 9, 12, 0) 62%),
    linear-gradient(0deg, rgba(6, 9, 12, .78) 0%, rgba(6, 9, 12, 0) 46%);
}

/* 时钟 */
.film-clock {
  position: absolute; top: 6vh; right: 5vw; z-index: 5;
  width: clamp(104px, 12vw, 168px); text-align: center; color: var(--film-paper);
}
.film-clock svg { width: 100%; height: auto; display: block; }
.film-clock__time {
  margin: .55rem 0 0; font-size: clamp(1.1rem, 2.1vw, 1.65rem); font-weight: 700;
  letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.film-clock__label {
  margin: .1rem 0 0; font-size: .66rem; letter-spacing: .34em; color: var(--film-gold);
}

/* 时段文案 */
.film-24__slots {
  position: absolute; z-index: 5; left: 6vw; bottom: 16vh;
  width: min(86vw, 620px);
}
.film-slot {
  position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0;
  pointer-events: none;
}
.film-slot__at {
  margin: 0 0 .7rem; font-size: .7rem; letter-spacing: .4em; color: var(--film-gold);
  font-variant-numeric: tabular-nums;
}
.film-slot h2,
.film-slot p.film-slot__line {
  margin: 0; color: #fff; font-weight: 800; line-height: 1.34;
  font-size: clamp(1.35rem, 3.4vw, 2.5rem); text-shadow: 0 2px 30px rgba(0, 0, 0, .95);
}
.film-slot--peak p.film-slot__line { color: #fff; }
.film-slot--peak p.film-slot__line strong { color: #f0dba6; font-weight: 800; }
.film-24__lead {
  position: absolute; z-index: 5; left: 6vw; top: 9vh; width: min(86vw, 620px);
}
.film-24__lead .film-cap__eyebrow { text-align: left; }
.film-24__lead h2 {
  margin: 0; color: #fff; font-weight: 800; line-height: 1.3; text-align: left;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); text-shadow: 0 2px 30px rgba(0, 0, 0, .95);
}

/* ---------------------------------------------------- 第三幕 创始人肖像
   只用 CSS 重排现有 .geo-home-team--founder 区块，DOM 一个字不改 */
.geo-home-team--founder {
  position: relative;
  background: linear-gradient(180deg, #faf7f3 0%, #f2ede7 100%);
  padding-block: clamp(4.5rem, 10vw, 9.5rem);
  overflow: hidden;
}
.geo-home-team--founder::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 8, 9, .06) 0%, transparent 18%);
}
.geo-home-team--founder .geo-home-section-hd { text-align: left; }
.geo-home-team--founder .geo-home-section-hd h2 {
  font-size: clamp(1.7rem, 4vw, 2.6rem); color: #17110f; letter-spacing: .02em;
}
.geo-home-team--founder .geo-eyebrow { color: var(--film-red); letter-spacing: .38em; }

.geo-home-team--founder .geo-team-founder {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
  .geo-home-team--founder .geo-team-founder {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 38%);
  }
  /* 文字在左，肖像在右 */
  .geo-home-team--founder .geo-team-founder__info { order: 1; }
  .geo-home-team--founder .geo-team-founder__photo { order: 2; }
}

/* 印刷套色错位：肖像下压一层暗红，向左下偏移，随滚动微增 */
.geo-home-team--founder .geo-team-founder__photo {
  position: relative; isolation: isolate;
  --film-offset: 10px;
}
.geo-home-team--founder .geo-team-founder__photo::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0;
  transform: translate(calc(var(--film-offset) * -1), var(--film-offset));
  background: var(--film-red);
  transition: transform .1s linear;
}
.geo-home-team--founder .geo-team-founder__photo img {
  display: block; width: 100%; height: auto; border-radius: 0;
  box-shadow: none; outline: 1px solid rgba(191, 155, 48, .85); outline-offset: -1px;
  will-change: transform;
}

.geo-home-team--founder .geo-team-founder__info h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: #17110f; margin: 0 0 .4rem;
  letter-spacing: .14em;
}
.geo-home-team--founder .geo-team-founder__title {
  margin: 0 0 1.6rem; padding-bottom: 1.4rem; color: #6c605c;
  font-size: .74rem; letter-spacing: .3em; line-height: 2.1;
  border-bottom: 1px solid rgba(191, 155, 48, .55);
}
.geo-home-team--founder .geo-team-founder__bio {
  margin: 0; color: #2b2320; max-width: 30em;
  font-size: clamp(1.02rem, 1.9vw, 1.32rem); line-height: 2.05;
  font-family: "Songti SC", "SimSun", Georgia, serif;
}
.geo-home-team--founder .geo-team-founder__link {
  display: inline-block; margin-top: 2rem; color: var(--film-red);
  font-weight: 700; letter-spacing: .06em; text-decoration: none;
  border-bottom: 2px solid rgba(200, 16, 46, .3); padding-bottom: .2rem;
}
.geo-home-team--founder .geo-team-founder__link:hover {
  border-bottom-color: var(--film-red);
}

/* ---------------------------------------------------- 移动端与低动效兜底 */
@media (max-width: 767px) {
  .film-hs__scene { height: 300vh; }
  .film-24__scene { height: 460vh; }
  .film-24__slots { left: 5vw; bottom: 12vh; }
  .film-clock { top: 4vh; right: 4vw; }
}

@media (prefers-reduced-motion: reduce) {
  .film-hs__scene,
  .film-24__scene { height: auto; }
  .film-hs__sticky,
  .film-24__sticky { position: relative; height: min(100vh, 720px); }
  .film-hs .film-cap { position: static; transform: none; opacity: 1; width: auto; }
  .film-hs__caps {
    position: absolute; inset: auto 0 6vh; display: grid; gap: 1.4rem;
    justify-items: center; padding: 0 1.5rem;
  }
  .film-slot { position: static; opacity: 1; }
  .film-24__slots { position: absolute; display: grid; gap: 1.2rem; }
  .film-hs__canvas { opacity: 0 !important; }
  .film-hs__poster { opacity: 1 !important; }
}


/* 兜底：JS 没跑或用户要求减少动效时，这一幕原来一个字都不显示。
   让最后那条（也就是钉子那句）静态摆出来，内容绝不能凭空消失。 */
@media (prefers-reduced-motion: reduce) {
  .film-24__slots .film-slot { position: static; opacity: 1; }
  .film-24__slots .film-slot:not(.film-slot--peak) { display: none; }
}
.no-js .film-24__slots .film-slot { position: static; opacity: 1; }
.no-js .film-24__slots .film-slot:not(.film-slot--peak) { display: none; }
.no-js .film-hs__canvas { display: none; }
.no-js .film-hs__poster { opacity: 1 !important; }