/* ============================================
   Freesia Hybrida — 设计变量
   ============================================ */

:root {
  --color-bg: #050505;
  --color-bg-soft: #0a0a0c;
  --color-text: #e9e6dd;
  --color-text-dim: #8c8a80;

  --color-accent: #f3e3a8;
  --color-accent-dim: #c9b97a;
  --color-line: rgba(243, 227, 168, 0.16);

  --font-display: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', serif;
  --font-body: 'Noto Serif SC', 'Cormorant Garamond', 'Songti SC', serif;
  --font-ui: 'Inter', -apple-system, 'PingFang SC', sans-serif;

  --nav-width: 280px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ============================================
   流星特效层
   ============================================ */

.meteor-field {
  position: fixed;
  inset: 0;

  pointer-events: none;
  overflow: hidden;

  /*
   * 必须高于页面主体，否则流星可能被 hero / wallpaper
   * 所在的 stacking context 覆盖。
   */
  z-index: 10;
}


/*
 * 每颗流星本体
 *
 * 这里的 .meteor 本身就是“流星头”。
 * 拖尾通过 ::before 从流星头向后延伸。
 */
.meteor {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--color-accent);

  box-shadow:
    0 0 4px 1px rgba(243, 227, 168, 0.95),
    0 0 10px 2px rgba(243, 227, 168, 0.55);

  /*
   * transform-origin 设置在流星头中心。
   * 后面的 translateX 会沿着旋转后的 X 轴运动。
   */
  transform-origin: center center;

  opacity: 0;

  animation-name: meteor-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  will-change: transform, opacity;
}


/*
 * 流星拖尾
 *
 * 关键：
 *
 * 流星的运动方向：
 *     rotate(var(--meteor-angle))
 *
 * 拖尾则位于流星头的“左侧”：
 *     right: 2px;
 *
 * 因此拖尾天然与运动方向相反。
 *
 * 不再让拖尾自己计算另一套角度，
 * 从根本上避免之前出现的方向偏差。
 */
.meteor::before {
  content: '';

  position: absolute;

  /*
   * 拖尾从流星头向左延伸。
   */
  right: 2px;
  top: 50%;

  width: var(--meteor-tail-length);
  height: 2px;

  transform: translateY(-50%);

  transform-origin: right center;

  /*
   * 右边最亮，向左逐渐消失。
   */
  background: linear-gradient(
    to left,
    rgba(243, 227, 168, 0.9) 0%,
    rgba(243, 227, 168, 0.5) 25%,
    rgba(243, 227, 168, 0.18) 65%,
    transparent 100%
  );

  filter: blur(0.15px);

  pointer-events: none;
}


/*
 * 流星动画
 *
 * angle = 0deg：
 *     向右运动
 *
 * angle = 90deg：
 *     向下运动
 *
 * angle = 135deg：
 *     向左下运动
 *
 * angle = 180deg：
 *     向左运动
 *
 * 所以默认使用大约 135deg，
 * 也就是比较自然的左下方向。
 */
@keyframes meteor-fall {

  /*
   * 起点
   */
  0% {
    transform:
      rotate(var(--meteor-angle))
      translateX(0);

    opacity: 0;
  }


  /*
   * 很快出现
   */
  5% {
    opacity: 1;
  }


  /*
   * 中途
   */
  70% {
    opacity: 0.9;
  }


  /*
   * 飞出屏幕
   */
  100% {
    transform:
      rotate(var(--meteor-angle))
      translateX(var(--meteor-distance));

    opacity: 0;
  }
}


/*
 * 如果用户系统启用了减少动态效果，
 * 仍然保留流星，只降低动画频率。
 *
 * 不再使用 display:none，
 * 避免因为浏览器/系统设置导致流星完全消失。
 */
@media (prefers-reduced-motion: reduce) {

  .meteor {
    animation-duration: 12s !important;
  }
}


/* ============================================
   顶部星空 / 标题区
   ============================================ */

.hero {
  position: relative;

  min-height: 100svh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 6rem 1.5rem 4rem;

  /*
   * 保持原来的页面结构。
   * 流星层 z-index = 10，
   * 因此不会被这里挡住。
   */
  z-index: 2;
}

.hero__title {
  font-family: var(--font-display);

  font-weight: 500;

  font-size: clamp(2.6rem, 7vw, 5.2rem);

  letter-spacing: 0.08em;

  color: var(--color-text);

  margin: 0;

  text-shadow:
    0 0 30px rgba(243, 227, 168, 0.12);
}

.hero__title em {
  font-style: italic;
  color: var(--color-accent);
}

.hero__rule {
  width: 44px;
  height: 1px;

  background: var(--color-line);

  margin: 1.6rem 0 1.4rem;
}

.hero__signature {
  font-family: var(--font-body);

  font-size: clamp(0.85rem, 1.6vw, 1.05rem);

  color: var(--color-text-dim);

  letter-spacing: 0.03em;

  max-width: 32em;

  line-height: 1.9;

  min-height: 1.6em;

  opacity: 0;

  animation:
    fade-in
    1.6s
    ease
    forwards
    0.4s;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}


/* ============================================
   Scroll 提示
   ============================================ */

.hero__scroll-hint {
  position: absolute;

  bottom: 2.2rem;
  left: 50%;

  transform: translateX(-50%);

  font-family: var(--font-ui);

  font-size: 0.68rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: var(--color-text-dim);

  opacity: 0.6;

  animation:
    hint-bob
    2.6s
    ease-in-out
    infinite;
}

@keyframes hint-bob {

  0%,
  100% {
    transform: translate(-50%, 0);
    opacity: 0.35;
  }

  50% {
    transform: translate(-50%, 6px);
    opacity: 0.75;
  }
}


/* ============================================
   壁纸展示区
   ============================================ */

.wallpaper {
  position: relative;

  z-index: 2;

  width: 100%;

  display: flex;
  justify-content: center;

  padding: 0 0 6rem;
}

.wallpaper__frame {
  position: relative;

  width: min(88vw, 720px);

  border: 1px solid var(--color-line);

  padding: 10px;

  background: var(--color-bg-soft);
}

.wallpaper__frame::before,
.wallpaper__frame::after {
  content: '';

  position: absolute;

  width: 14px;
  height: 14px;

  border-color: var(--color-accent-dim);

  opacity: 0.7;
}

.wallpaper__frame::before {
  top: -1px;
  left: -1px;

  border-top: 1px solid;
  border-left: 1px solid;
}

.wallpaper__frame::after {
  bottom: -1px;
  right: -1px;

  border-bottom: 1px solid;
  border-right: 1px solid;
}

.wallpaper__img {
  display: block;

  width: 100%;
  height: auto;
}


/*
 * 默认桌面端：
 * 显示竖屏壁纸
 */
.wallpaper__img--landscape {
  display: none;
}

.wallpaper__img--portrait {
  display: block;
}


/*
 * 移动端：
 * 显示横屏壁纸
 */
@media (max-width: 768px) {

  .wallpaper__img--portrait {
    display: none;
  }

  .wallpaper__img--landscape {
    display: block;
  }

  .wallpaper__frame {
    width: 92vw;
  }
}

.wallpaper__caption {
  margin-top: 0.9rem;

  text-align: center;

  font-family: var(--font-ui);

  font-size: 0.68rem;

  letter-spacing: 0.25em;

  text-transform: uppercase;

  color: var(--color-text-dim);
}


/* ============================================
   汉堡菜单
   ============================================ */

.menu-toggle {
  position: fixed;

  top: 1.6rem;
  left: 1.6rem;

  z-index: 30;

  width: 44px;
  height: 44px;

  background: transparent;

  border: none;

  cursor: pointer;

  display: flex;

  align-items: center;
  justify-content: center;
}

.menu-toggle__bar {
  position: relative;

  width: 24px;
  height: 16px;
}

.menu-toggle__bar span {
  position: absolute;

  left: 0;

  width: 100%;
  height: 1px;

  background: var(--color-text);

  transition:
    transform 0.35s ease,
    opacity 0.25s ease,
    top 0.35s ease;
}

.menu-toggle__bar span:nth-child(1) {
  top: 0;
}

.menu-toggle__bar span:nth-child(2) {
  top: 7.5px;
}

.menu-toggle__bar span:nth-child(3) {
  top: 15px;
}

.menu-toggle.is-open
.menu-toggle__bar
span:nth-child(1) {

  top: 7.5px;

  transform: rotate(45deg);
}

.menu-toggle.is-open
.menu-toggle__bar
span:nth-child(2) {

  opacity: 0;
}

.menu-toggle.is-open
.menu-toggle__bar
span:nth-child(3) {

  top: 7.5px;

  transform: rotate(-45deg);
}


/* ============================================
   导航遮罩
   ============================================ */

.nav-overlay {
  position: fixed;

  inset: 0;

  z-index: 20;

  background:
    rgba(5, 5, 5, 0.92);

  backdrop-filter: blur(6px);

  display: flex;

  align-items: center;
  justify-content: flex-start;

  padding-left: min(10vw, 120px);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.nav-overlay__list {
  list-style: none;

  margin: 0;
  padding: 0;
}

.nav-overlay__list li {
  overflow: hidden;
}

.nav-overlay__list a {
  display: inline-block;

  font-family: var(--font-display);

  font-size:
    clamp(
      1.8rem,
      4.5vw,
      2.8rem
    );

  color: var(--color-text-dim);

  padding: 0.5rem 0;

  letter-spacing: 0.04em;

  transform: translateY(120%);

  transition:
    transform 0.5s
      cubic-bezier(.19, 1, .22, 1),
    color 0.3s ease;
}

.nav-overlay.is-open
.nav-overlay__list a {

  transform: translateY(0);
}

.nav-overlay__list
li:nth-child(1)
a {

  transition-delay: 0.08s;
}

.nav-overlay__list
li:nth-child(2)
a {

  transition-delay: 0.16s;
}

.nav-overlay__list
li:nth-child(3)
a {

  transition-delay: 0.24s;
}

.nav-overlay__list
a:hover,
.nav-overlay__list
a.is-current {

  color: var(--color-accent);
}

.nav-overlay__list
.index {

  font-family: var(--font-ui);

  font-size: 0.7rem;

  color: var(--color-accent-dim);

  vertical-align: super;

  margin-right: 0.6em;

  letter-spacing: 0.1em;
}


/* ============================================
   子页面通用样式
   ============================================ */

.page {
  position: relative;

  z-index: 2;

  min-height: 100vh;

  padding: 8rem 1.6rem 6rem;

  max-width: 760px;

  margin: 0 auto;
}

.page__eyebrow {
  font-family: var(--font-ui);

  font-size: 0.7rem;

  letter-spacing: 0.3em;

  text-transform: uppercase;

  color: var(--color-accent-dim);
}

.page__title {
  font-family: var(--font-display);

  font-size:
    clamp(
      2.2rem,
      6vw,
      3.4rem
    );

  margin:
    0.6rem
    0
    2.4rem;

  color: var(--color-text);
}

.page__body {
  font-size: 1.05rem;

  line-height: 2;

  color: var(--color-text-dim);
}

.page__body p {
  margin: 0 0 1.4em;
}

.back-home {
  display: inline-block;

  margin-top: 3rem;

  font-family: var(--font-ui);

  font-size: 0.75rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--color-accent-dim);

  border-bottom:
    1px solid
    var(--color-line);

  padding-bottom: 4px;
}

.back-home:hover {
  color: var(--color-accent);
}


/* ============================================
   手机端流星优化
   ============================================ */

@media (max-width: 768px) {

  .meteor {
    width: 3px;
    height: 3px;
  }

  .hero {
    padding:
      5rem
      1.2rem
      3.5rem;
  }

  .menu-toggle {
    top: 1.2rem;
    left: 1.2rem;
  }

  .nav-overlay {
    padding-left: 12vw;
  }
}

/* ============================================
   思考 / 文章列表
   ============================================ */

.thinking-intro {
    max-width: 620px;

    margin-bottom: 5rem;
}

.thinking-intro p {
    color: var(--color-text-dim);

    font-size: 1.05rem;

    line-height: 2;
}


.article-section {
    margin-bottom: 6rem;
}


.article-section__heading {
    display: flex;

    align-items: baseline;

    gap: 1rem;

    margin-bottom: 1.8rem;

    padding-bottom: 0.8rem;

    border-bottom:
        1px solid
        var(--color-line);
}


.article-section__number {
    font-family: var(--font-ui);

    font-size: 0.65rem;

    letter-spacing: 0.15em;

    color: var(--color-accent-dim);
}


.article-section__heading h2 {
    margin: 0;

    font-family: var(--font-display);

    font-size: 1.8rem;

    font-weight: 500;

    color: var(--color-text);
}


.article-list {
    display: flex;

    flex-direction: column;

    gap: 1px;

    background:
        var(--color-line);
}


.article-card {
    position: relative;

    display: block;

    padding: 1.8rem 1.6rem;

    background:
        var(--color-bg);

    transition:
        background 0.35s ease,
        padding-left 0.35s ease;
}


.article-card:hover {
    background:
        rgba(243, 227, 168, 0.035);

    padding-left: 2rem;
}


.article-card__meta {
    margin-bottom: 0.65rem;

    font-family: var(--font-ui);

    font-size: 0.6rem;

    letter-spacing: 0.22em;

    color: var(--color-accent-dim);
}


.article-card__title {
    margin: 0 0 0.7rem;

    font-family: var(--font-display);

    font-size: 1.5rem;

    font-weight: 500;

    color: var(--color-text);
}


.article-card__excerpt {
    max-width: 600px;

    margin: 0 0 1.1rem;

    color: var(--color-text-dim);

    font-size: 0.9rem;

    line-height: 1.8;
}


.article-card__more {
    font-family: var(--font-ui);

    font-size: 0.65rem;

    letter-spacing: 0.16em;

    color: var(--color-accent-dim);
}


/* ============================================
   Markdown 文章正文
   ============================================ */

.article-page {
    max-width: 820px;
}


#article {
    color: var(--color-text-dim);

    font-size: 1.05rem;

    line-height: 2;
}


#article h1 {
    margin:
        0 0 2.5rem;

    color: var(--color-text);

    font-family: var(--font-display);

    font-size:
        clamp(
            2.3rem,
            6vw,
            3.6rem
        );

    font-weight: 500;

    line-height: 1.25;
}


#article h2 {
    margin:
        3rem 0 1rem;

    color: var(--color-text);

    font-family: var(--font-display);

    font-size: 1.8rem;

    font-weight: 500;
}


#article h3 {
    margin:
        2.2rem 0 0.8rem;

    color: var(--color-text);

    font-family: var(--font-display);

    font-size: 1.4rem;
}


#article p {
    margin:
        0 0 1.5rem;
}


#article a {
    color: var(--color-accent);

    border-bottom:
        1px solid
        var(--color-line);
}


#article blockquote {
    margin:
        2rem 0;

    padding:
        0.8rem 1.4rem;

    border-left:
        1px solid
        var(--color-accent-dim);

    color: var(--color-text-dim);

    font-style: italic;
}


#article ul,
#article ol {
    padding-left: 1.5rem;

    margin-bottom: 1.5rem;
}


#article li {
    margin-bottom: 0.5rem;
}


#article hr {
    margin:
        3rem 0;

    border: 0;

    border-top:
        1px solid
        var(--color-line);
}


#article code {
    padding:
        0.15rem
        0.35rem;

    background:
        rgba(243, 227, 168, 0.06);

    font-family:
        monospace;

    font-size: 0.9em;
}


#article pre {
    overflow-x: auto;

    padding: 1.2rem;

    background:
        #090909;

    border:
        1px solid
        var(--color-line);
}


#article pre code {
    padding: 0;

    background: transparent;
}
/* ============================================
   Star Field
   ============================================ */

.star-field {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    overflow: hidden;

    /*
     * 流星是 z-index: 10
     * 所以星空放在流星下面
     */
    z-index: 9;
}


.star {
    position: absolute;

    display: block;

    border-radius: 50%;

    box-shadow:
        0 0 4px currentColor;

    animation:
        star-twinkle
        ease-in-out
        infinite;

    will-change:
        opacity,
        transform;
}


@keyframes star-twinkle {

    0%,
    100% {
        opacity: 0.40;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }

}
/* ============================================
   GitHub Open Source Link
   ============================================ */

.github-link {
    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    margin-top: 1rem;

    margin-left: 2.5rem;

    color: var(--color-text-dim);

    font-family: var(--font-ui);

    font-size: 0.65rem;

    letter-spacing: 0.12em;

    text-decoration: none;

    transition:
        color 0.3s ease,
        opacity 0.3s ease;
}


.github-link:hover {
    color: var(--color-text);

    opacity: 1;
}


.github-link__icon {
    width: 18px;

    height: 18px;

    fill: currentColor;

    flex-shrink: 0;

    transition:
        transform 0.3s ease;
}


.github-link:hover
.github-link__icon {
    transform: scale(1.1);
}


.github-link__text {
    white-space: nowrap;
}
/* ============================================
   Thinking Topics
   ============================================ */

.thinking-topics {
    margin-top: 5rem;
    margin-bottom: 5rem;
}


.thinking-topic {
    border-top:
        1px solid
        var(--color-line);
}


.thinking-topic:last-child {
    border-bottom:
        1px solid
        var(--color-line);
}


.thinking-topic__button {
    width: 100%;

    display: grid;

    grid-template-columns:
        3rem 1fr auto;

    align-items: center;

    gap: 1rem;

    padding: 1.5rem 0;

    border: 0;

    background: transparent;

    color: var(--color-text);

    text-align: left;

    cursor: pointer;
}


.thinking-topic__index {
    font-family: var(--font-ui);

    font-size: 0.65rem;

    letter-spacing: 0.15em;

    color: var(--color-accent-dim);
}


.thinking-topic__title {
    font-family: var(--font-display);

    font-size: 1.4rem;

    font-weight: 500;
}


.thinking-topic__symbol {
    font-family: var(--font-ui);

    font-size: 1.2rem;

    color: var(--color-accent-dim);

    transition:
        transform 0.3s ease;
}


.thinking-topic__button:hover
.thinking-topic__title {
    color: var(--color-accent);
}


.thinking-topic__articles {
    padding:
        0 0 2rem 3rem;
}


.thinking-topic__articles[hidden] {
    display: none;
}


/* 文章卡片 */

.thinking-topic__articles
.article-list {
    display: flex;

    flex-direction: column;

    gap: 1px;

    background:
        var(--color-line);
}


.thinking-topic__articles
.article-card {
    display: block;

    padding: 1.5rem;

    background:
        var(--color-bg);

    text-decoration: none;

    transition:
        background 0.3s ease,
        padding-left 0.3s ease;
}


.thinking-topic__articles
.article-card:hover {
    background:
        rgba(243, 227, 168, 0.035);

    padding-left: 1.8rem;
}


.thinking-topic__articles
.article-card__meta {
    margin-bottom: 0.6rem;

    font-family: var(--font-ui);

    font-size: 0.6rem;

    letter-spacing: 0.15em;

    color:
        var(--color-accent-dim);
}


.thinking-topic__articles
.article-card__title {
    margin:
        0 0 0.6rem;

    font-family: var(--font-display);

    font-size: 1.35rem;

    font-weight: 500;

    color:
        var(--color-text);
}


.thinking-topic__articles
.article-card__excerpt {
    max-width: 650px;

    margin: 0 0 0.9rem;

    font-size: 0.88rem;

    line-height: 1.8;

    color:
        var(--color-text-dim);
}


.thinking-topic__articles
.article-card__more {
    font-family: var(--font-ui);

    font-size: 0.62rem;

    letter-spacing: 0.14em;

    color:
        var(--color-accent-dim);
}


.article-loading {
    padding: 1.5rem 0;

    font-size: 0.85rem;

    color:
        var(--color-text-dim);
}