/* 首页：门厅 + 卡片墙 */

#app { position: relative; width: 100%; height: 100%; }

/* ── 背景照片层 ───────────────────────────────── */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink-900);
}
/* 原图自带「碎碎念FM」的标题排版（集中在上半部），构图上必须避开它，
   否则会和页面自己的标题糊成一片。宽屏把人物推到右侧、裁掉上方文字区；
   竖屏则整体下移取景。 */
.backdrop__img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: 72% 58%;
  transform-origin: 72% 55%;
  animation: ken-burns 46s var(--ease-in-out) infinite alternate;
  filter: saturate(0.88) contrast(1.05) brightness(0.8);
}
@keyframes ken-burns {
  from { transform: scale(1.0) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -2.2%, 0); }
}

/* 竖屏时整张图都在视口里，原图上方的「碎碎念FM」标题会跟页面标题撞在一起。
   把元素拉高到 154vh 并贴底，等于只取原图下面约三分之二——人物还在，文字裁掉。 */
@media (max-width: 899px) {
  .backdrop__img {
    inset: auto auto 0 -6%;
    width: 112%;
    /* 原图的标题区一直排到约 39% 高度处。元素贴底、高 167vh，
       视口里只剩原图下面 60%，那一整块字正好全被切掉。 */
    height: 167vh;
    object-position: 58% 50%;
    /* 从底部往上放大，别把人物顶出画面下沿 */
    transform-origin: 58% 100%;
  }

  /* 双保险：顶部再压一道，万一裁切边缘还漏出一点字也看不见 */
  .backdrop__scrim {
    background:
      linear-gradient(to bottom,
        rgba(6,4,5,0.92) 0%,
        rgba(6,4,5,0.6) 10%,
        rgba(7,5,6,0.12) 26%,
        rgba(6,4,4,0.5) 74%,
        rgba(5,3,3,0.92) 100%),
      radial-gradient(120% 60% at 62% 34%, rgba(0,0,0,0) 0%, rgba(6,4,4,0.34) 62%, rgba(4,3,3,0.8) 100%);
  }
}

/* 压暗 + 暖色调，让文字站得住。左侧压得更重，给标题铺一块干净的底。 */
.backdrop__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg,
      rgba(6,4,5,0.94) 0%,
      rgba(6,4,5,0.86) 26%,
      rgba(7,5,6,0.56) 48%,
      rgba(8,6,6,0.2) 70%,
      rgba(10,7,7,0.42) 100%),
    radial-gradient(130% 86% at 74% 52%, rgba(0,0,0,0) 0%, rgba(6,4,4,0.4) 60%, rgba(4,3,3,0.88) 100%),
    linear-gradient(to bottom, rgba(8,6,5,0.62) 0%, rgba(8,6,5,0.1) 34%, rgba(6,4,4,0.44) 74%, rgba(5,3,3,0.9) 100%);
}
/* 极细颗粒，去掉数码感 */
.backdrop__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("../assets/bg/grain.png");
  background-repeat: repeat;
  animation: grain-shift 6s steps(6) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* 首页的星尘/流萤画布 */
/* canvas 是替换元素：光给 inset:0 不会被拉伸，必须显式给宽高 */
#embers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ── 门厅 ─────────────────────────────────────── */
/* 竖屏居中；宽屏改成左文右像的编排，正好躲开原图的标题区 */
.hall {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  text-align: center;
  transition: opacity 0.8s var(--ease-in-out), transform 1.1s var(--ease-out), filter 0.9s var(--ease-in-out);
}

@media (min-width: 900px) {
  .hall {
    align-items: flex-start;
    text-align: left;
    padding: 0 clamp(48px, 9vw, 132px);
  }
  /* 副标题每个字实占约 1.34em（字距 0.34em），18 个字要 ~25em。
     给窄了就会在「碎/碎念完」中间断开，很难看。 */
  .hall > * { max-width: 30em; }
  .hall__title { max-width: none; }
  .hall__sub { max-width: none; white-space: nowrap; }
  .hall__eyebrow::after { display: none; }
  .hall__eyebrow::before { margin-left: 0; }
  .hall__rule { align-self: flex-start; }
}
.hall.is-gone {
  opacity: 0;
  transform: scale(1.09) translateY(-22px);
  filter: blur(9px);
  pointer-events: none;
}

.hall__eyebrow {
  margin: 0 0 26px;
  font-size: clamp(10px, 2.4vw, 12px);
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: rgba(217, 183, 140, 0.82);
  animation: rise-in 1.5s var(--ease-out) both 0.25s;
}
.hall__eyebrow::before,
.hall__eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  vertical-align: middle;
  background: linear-gradient(to right, transparent, rgba(217,183,140,0.7));
  margin: 0 14px 3px 0;
}
.hall__eyebrow::after {
  background: linear-gradient(to left, transparent, rgba(217,183,140,0.7));
  margin: 0 0 3px 14px;
}

/* 主标题：碎碎念专属 */
.hall__title {
  position: relative;
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(40px, 12.5vw, 96px);
  line-height: 1.08;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: transparent;
  background-image: linear-gradient(
    100deg,
    #efe2d8 0%, #fbf3ec 22%,
    #ffe6ef 38%, #ffffff 46%,
    #ffd9e6 54%, #f6e7d9 70%,
    #dcc7b6 100%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation:
    rise-in 1.7s var(--ease-out) both 0.4s,
    sheen 9s linear infinite 1.6s;
  filter: drop-shadow(0 3px 34px rgba(0,0,0,0.85)) drop-shadow(0 0 30px rgba(255,158,196,0.2));
}
@keyframes sheen {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

.hall__sub {
  margin: 24px 0 0;
  font-family: var(--font-serif);
  font-size: clamp(12px, 3vw, 15px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: rgba(246, 239, 233, 0.62);
  text-shadow: 0 2px 20px rgba(0,0,0,0.9);
  animation: rise-in 1.6s var(--ease-out) both 0.7s;
}

.hall__rule {
  width: min(260px, 62vw);
  height: 14px;
  margin: 30px 0 40px;
  opacity: 0.75;
  animation: rise-in 1.6s var(--ease-out) both 0.9s;
}

/* 入口按钮 */
.enter {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: 58px;
  padding: 0 40px;
  font-family: var(--font-serif);
  font-size: clamp(15px, 3.6vw, 17px);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--paper);
  border: 1px solid rgba(246, 239, 233, 0.34);
  border-radius: 999px;
  background: rgba(14, 10, 9, 0.34);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  overflow: hidden;
  animation: rise-in 1.6s var(--ease-out) both 1.15s;
  transition: color 0.4s, border-color 0.5s, transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.enter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,223,233,0.42) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: enter-sweep 4.2s var(--ease-in-out) infinite 2.2s;
}
@keyframes enter-sweep {
  0%, 62% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
/* 呼吸光环 */
.enter::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 158, 196, 0.42);
  animation: enter-pulse 3.4s var(--ease-in-out) infinite 2s;
}
@keyframes enter-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,158,196,0.34); }
  55%      { box-shadow: 0 0 0 15px rgba(255,158,196,0); }
}
.enter:hover, .enter:focus-visible {
  color: #fff;
  border-color: rgba(255, 190, 210, 0.85);
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 14px 46px -14px rgba(255, 158, 196, 0.6);
}
.enter:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }
.enter:active { transform: translateY(0) scale(0.985); }

.hall__hint {
  margin: 22px 0 0;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: rgba(246, 239, 233, 0.3);
  animation: rise-in 1.6s var(--ease-out) both 1.5s;
}

/* ── 卡片墙 ───────────────────────────────────── */
.wall {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: max(78px, calc(env(safe-area-inset-top) + 74px)) 22px max(46px, calc(env(safe-area-inset-bottom) + 34px));
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(38, 20, 26, 0.5), transparent 70%),
    rgba(6, 4, 4, 0.84);
  backdrop-filter: blur(26px) saturate(1.1);
  -webkit-backdrop-filter: blur(26px) saturate(1.1);
}
.wall.is-open { display: flex; }

.wall__head {
  flex: none;
  text-align: center;
  margin: 0 0 34px;
}
.wall__head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 5vw, 27px);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  color: var(--paper);
}
.wall__head p {
  margin: 13px 0 0;
  font-size: clamp(11px, 2.6vw, 12.5px);
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--paper-faint);
}

.grid {
  flex: none;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 17px;
  list-style: none;
  padding: 0;
}

.card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 17px;
  overflow: hidden;
  background: var(--ink-800);
  border: 1px solid rgba(246, 239, 233, 0.1);
  text-align: left;
  opacity: 0;
  transition:
    transform 0.55s var(--ease-out),
    border-color 0.45s,
    box-shadow 0.55s;
}
.wall.is-open .card {
  animation: card-in 0.78s var(--ease-out) both;
  animation-delay: calc(var(--i) * 62ms + 120ms);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(26px) scale(0.965); }
  to   { opacity: 1; transform: none; }
}
.card:hover, .card:focus-visible {
  border-color: rgba(255, 190, 210, 0.5);
  box-shadow: 0 20px 54px -22px rgba(0, 0, 0, 0.95), 0 0 30px -12px rgba(255, 158, 196, 0.42);
  transform: translateY(-5px) scale(1.014);
}
.card:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.card:active { transform: translateY(-1px) scale(0.995); }

.card canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,3,3,0.9) 4%, rgba(4,3,3,0.34) 44%, transparent 78%);
}
.card__text {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
}
.card__text h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--paper);
  text-shadow: 0 2px 14px rgba(0,0,0,0.9);
}
.card__text p {
  margin: 7px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.55;
  color: rgba(246, 239, 233, 0.5);
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}
.card__no {
  position: absolute;
  top: 13px;
  left: 16px;
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(217, 183, 140, 0.72);
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}

.wall__foot {
  flex: none;
  margin: 40px auto 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(246, 239, 233, 0.24);
}

@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; }
  .card__text h3 { font-size: 15px; letter-spacing: 0.14em; }
  .card__text p  { font-size: 10px; }
  .card__text { left: 13px; right: 13px; bottom: 11px; }
}