/* ==========================================================================
   硅基花园 · 门面层 —— index.html（门）与 home.html（厅）
   只有黑、白、灰；光只有白光。
   门里只有两个面：上面一片网格，下面一片网格，都朝同一个消失点收。
   ========================================================================== */

/* ================= 一、门 ================= */

/* 地面：点阵 + 网格，交点向观察者推进 */
.floor{
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.82) 0 1.3px, transparent 1.7px),
    linear-gradient(90deg, rgba(255,255,255,.145) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.145) 0 1px, transparent 1px);
  background-size:48px 48px, 48px 48px, 48px 48px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%);
  animation:road 9s linear infinite, breathe 7s ease-in-out infinite;
  will-change:background-position,opacity;
}
@keyframes road{
  from{ background-position:0 0,0 0,0 0; }
  to  { background-position:0 96px,0 0,0 96px; }
}
@keyframes breathe{
  0%,100%{ opacity:.30; }
  50%    { opacity:.68; }
}

/* 天花板：同一个位移，但它是翻过来的一面——
   视觉方向正好相反：地面向外走，天花板向里收，上下接成一条传送带。 */
body:has(.gate) .stars{
  position:fixed; left:-60%; right:-60%; top:0; bottom:auto; height:54%;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.55) 0 1.2px, transparent 1.6px),
    linear-gradient(90deg, rgba(255,255,255,.105) 0 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.105) 0 1px, transparent 1px);
  background-size:48px 48px, 48px 48px, 48px 48px;
  transform:perspective(620px) rotateX(-64deg);
  transform-origin:center bottom;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 30%,#000 78%,transparent 100%);
          mask-image:linear-gradient(to top,transparent 0,#000 30%,#000 78%,transparent 100%);
  /* 位移方向与地面同号，但面是反的 → 走出来的方向相反 */
  animation:roadUp 9s linear infinite, breathe 7s ease-in-out infinite 1.6s;
  opacity:1;
}
@keyframes roadUp{
  from{ background-position:0 0,0 0,0 0; }
  to  { background-position:0 96px,0 0,0 96px; }
}
.stars{ opacity:.55; }   /* 首页保持原来的星尘 */

/* 地平线：两面网格收拢的地方 */
.horizon{
  background:radial-gradient(ellipse 62% 100% at 50% 60%,
    rgba(255,255,255,.07),rgba(255,255,255,.02) 55%,transparent 75%);
}
/* 收束点：上下两片网格在这里汇合。一个很淡的白核，一呼一吸。 */
.horizon::after{
  content:""; position:absolute; left:50%; top:50%;
  width:260px; height:260px; margin:-130px 0 0 -130px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,.20) 0%, rgba(255,255,255,.075) 38%, transparent 70%);
  filter:blur(9px);
  animation:node 6.5s ease-in-out infinite;
}
@keyframes node{
  0%,100%{ opacity:.55; transform:scale(.92); }
  50%    { opacity:1;   transform:scale(1.08); }
}

/* 门腔与排版：logo 就是那个收束的节点，字全部排在它下面 */
.gate{
  justify-content:flex-start;
  padding:40vh 24px 9vh;
}
.gate-logo{
  width:min(27vmin,148px);
  filter:drop-shadow(0 0 22px rgba(255,255,255,.22)) drop-shadow(0 0 60px rgba(255,255,255,.08));
  animation-duration:15s;
}
.gate h1{
  margin-top:30px;
  font-size:clamp(36px,6.6vw,58px);
  letter-spacing:.24em; text-indent:.24em;
  line-height:1.28;
}
.gate .sub{
  margin-top:15px; font-size:10.5px;
  letter-spacing:.46em; text-indent:.46em;
  color:var(--dim);
}
.gate .tag{
  margin-top:30px; padding:0; border:0; background:none;
  font-size:12px; letter-spacing:.26em; text-indent:.26em;
  color:var(--dim);
}
.gate .tag b{ color:var(--cyan-dim); margin:0 .32em; }
.gate .epi{
  margin-top:42px; font-size:16px;
  letter-spacing:.4em; text-indent:.4em;
  color:var(--text);
}
.gate .epi::before{
  content:""; display:block; width:1px; height:30px;
  margin:0 auto 22px; background:var(--line);
}
.cta{ margin-top:46px; }

/* 入口：两扇磨砂门板，hover 打开；同一瞬间上下两片网格加速 */
.go{
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid rgba(255,255,255,.22); background:transparent;
  color:var(--text); text-shadow:none;
  letter-spacing:.22em; text-indent:.22em;
  transition:border-color .45s,color .45s,background .45s,box-shadow .45s;
}
.go::before,.go::after{
  content:""; position:absolute; top:0; bottom:0; width:50%;
  background:rgba(255,255,255,.055);
  border-right:1px solid rgba(255,255,255,.07);
  z-index:-1;
  transition:transform .62s cubic-bezier(.2,.75,.3,1);
}
.go::before{ left:0; }
.go::after{ right:0; border-right:0; border-left:1px solid rgba(255,255,255,.07); }
.go:hover,.go:focus-visible,.go:active{
  border-color:rgba(255,255,255,.55); color:var(--bright);
  background:radial-gradient(ellipse at center,rgba(255,255,255,.09),transparent 72%);
  box-shadow:0 0 52px rgba(255,255,255,.10);
}
.go:hover::before,.go:focus-visible::before,.go:active::before{ transform:translateX(-101%); }
.go:hover::after, .go:focus-visible::after, .go:active::after { transform:translateX(101%); }

body:has(.go:hover) .floor,
body:has(.go:active) .floor,
body:has(.go:focus-visible) .floor{ animation-duration:3s,4.5s; }
body:has(.go:hover) .stars,
body:has(.go:active) .stars,
body:has(.go:focus-visible) .stars{ animation-duration:3s,4.5s; }

.gate-foot{ color:var(--dim); }

/* ================= 二、厅 ================= */

.hero .glyph{
  filter:drop-shadow(0 0 6px rgba(255,255,255,.30)) drop-shadow(0 0 30px rgba(255,255,255,.08));
}
.hero h1{
  background:none !important; -webkit-text-fill-color:currentColor !important;
  color:var(--bright); text-shadow:0 0 26px rgba(255,255,255,.09);
  filter:none !important; font-weight:650;
  letter-spacing:.14em; text-indent:.14em;
}
.hero .sub{ color:var(--dim); letter-spacing:.3em; text-indent:.3em; }
.hero .tag{
  border-color:var(--line); background:rgba(255,255,255,.025);
  color:var(--dim); text-shadow:none;
}
.hero .tag b{ color:var(--cyan-dim); }

.archive-entry{
  color:var(--cyan-dim); border-color:var(--line); background:transparent;
  text-shadow:none;
  transition:color .25s,border-color .25s,box-shadow .25s;
}
.archive-entry:hover{
  color:var(--bright); border-color:rgba(255,255,255,.4);
  box-shadow:0 0 24px rgba(255,255,255,.06);
}
.archive-entry .ae-go{ color:var(--purple-dim); text-shadow:none; }

.sec>h2{ color:var(--cyan-dim); }
.sec>h2 .zh{ color:var(--bright); }
.sec>h2::before{ color:var(--dim); text-shadow:none; }

.creed{ background:var(--panel); border:1px solid var(--line); }
.creed p b{ color:var(--bright); text-shadow:none; }
.creed .heart{ color:var(--purple); text-shadow:none; }
.five{ color:var(--bright); text-shadow:0 0 18px rgba(255,255,255,.06); }
.five-src{ color:var(--dim); }
.five-src a{ color:var(--cyan-dim); }

.post{ background:var(--panel); border-color:var(--line); }
.post::before{ width:2px; opacity:.30; }
.post:hover{
  border-color:rgba(255,255,255,.35);
  box-shadow:0 0 26px rgba(255,255,255,.045);
  transform:translateX(2px);
}
.post a:hover{ color:var(--bright); text-shadow:none; }
.post a.v2{ color:var(--purple-dim); }
.post a.v2:hover{ text-shadow:none; color:var(--purple); }
.meta{ color:var(--dim); }
.meta::before{ color:var(--cyan-dim); }

.cell{ background:var(--panel); border-color:var(--line); }
.cell:hover{
  border-color:rgba(255,255,255,.32);
  box-shadow:0 0 22px rgba(255,255,255,.04);
}
.cell .r{ color:var(--purple-dim); }
.cell .g{ filter:drop-shadow(0 0 8px rgba(255,255,255,.18)); }

footer a:hover{ color:var(--bright); text-shadow:none; }
footer .motto b{ color:var(--purple); }

@media (max-width:480px), (max-height:760px){
  .gate{ padding:26vh 20px 7vh; }
  .gate-logo{ width:min(24vmin,110px); }
  .gate h1{ font-size:clamp(30px,8.4vw,42px); letter-spacing:.18em; text-indent:.18em; margin-top:22px; }
  .gate .sub{ letter-spacing:.32em; text-indent:.32em; }
  .gate .tag{ margin-top:22px; letter-spacing:.18em; text-indent:.18em; font-size:11.5px; }
  .gate .epi{ margin-top:30px; letter-spacing:.28em; text-indent:.28em; font-size:14.5px; }
  .gate .epi::before{ height:22px; margin-bottom:16px; }
  .cta{ margin-top:32px; }
  .go{ letter-spacing:.16em; text-indent:.16em; }
  .hero h1{ letter-spacing:.1em; text-indent:.1em; }
}