@charset "UTF-8";
/* ==========================================================================
   根引导页 · 四境入口（landing-portal）
   仅由 wwwroot/index.html 加载，主站与其他页面不引用本文件。
   视觉语言与主站引导页一致：深空底 #0E1116 + 电青 + 琥珀；
   四张门卡各带自己的主色（电青 / 僧黄 / 极光青 / 亮金黄），悬停时按该主色发光。
   注意：渐变文字一律用 background-image（background 简写会重置 background-clip）。
   ========================================================================== */

.lp-portals{
  width:100%;
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(8px,1.4vw,20px) var(--gap) calc(var(--foot-h,52px) + clamp(18px,2.4vw,34px));
}

/* —— 标题区 —— */
.lp-p-head{text-align:center;margin:0 auto clamp(18px,2.4vw,30px);max-width:760px}
.lp-p-kicker{
  display:inline-block;margin-bottom:12px;padding:5px 15px;border-radius:var(--r-pill);
  font-size:11.5px;letter-spacing:.2em;font-weight:700;
  color:var(--brand);background:var(--brand-soft);border:1px solid rgba(34,211,238,.3);
}
.lp-p-head h2{
  margin:0 0 10px;font-size:clamp(21px,2.5vw,31px);line-height:1.32;
  font-weight:800;letter-spacing:.06em;color:var(--text);
}
.lp-p-head h2 em{
  font-style:normal;
  background-image:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.lp-p-head p{margin:0;font-size:14.6px;line-height:1.82;color:var(--text-2)}

/* —— 四卡栅格：宽屏 4 列，中屏 2×2，窄屏 1 列 —— */
.lp-gates{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(13px,1.5vw,20px)}

.lp-gate{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:9px;
  padding:clamp(18px,2vw,26px) clamp(16px,1.9vw,24px) clamp(15px,1.7vw,20px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:var(--grad-panel),rgba(23,28,38,.66);
  text-decoration:none;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.25,1),border-color .4s,box-shadow .4s;
}
/* 顶部主色条 */
.lp-gate::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--lp-accent);opacity:.72;transition:opacity .4s;
}
/* 底部主色辉光，悬停浮现 */
.lp-gate::after{
  content:"";position:absolute;left:-25%;right:-25%;bottom:-58%;height:62%;
  background:radial-gradient(58% 100% at 50% 100%,var(--lp-glow),transparent 72%);
  opacity:0;transition:opacity .5s;pointer-events:none;
}
.lp-gate:hover{
  transform:translateY(-6px);
  border-color:var(--lp-line);
  box-shadow:0 26px 58px rgba(0,0,0,.48),0 0 0 1px var(--lp-line),0 0 42px var(--lp-glow);
}
.lp-gate:hover::before{opacity:1}
.lp-gate:hover::after{opacity:1}
.lp-gate:focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px}

.lp-g-ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;
  color:var(--lp-accent);background:var(--lp-glow);border:1px solid var(--lp-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.lp-g-ico svg{width:23px;height:23px;display:block}
.lp-g-kicker{font-size:10.5px;letter-spacing:.2em;color:var(--text-3);font-weight:700}
.lp-g-name{font-size:clamp(17px,1.6vw,21px);font-weight:800;letter-spacing:.1em;color:var(--text)}
.lp-g-desc{flex:1;font-size:13.2px;line-height:1.78;color:var(--text-2)}
.lp-g-go{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  font-size:12.8px;font-weight:700;letter-spacing:.06em;color:var(--lp-accent);
}
.lp-g-go svg{width:14px;height:14px;display:block;transition:transform .32s cubic-bezier(.2,.8,.25,1)}
.lp-gate:hover .lp-g-go svg{transform:translateX(4px)}

/* —— 各境主色 —— */
.lp-g-main{--lp-accent:#22D3EE;--lp-glow:rgba(34,211,238,.17);--lp-line:rgba(34,211,238,.48)}
.lp-g-ancient{--lp-accent:#C89434;--lp-glow:rgba(200,148,52,.19);--lp-line:rgba(200,148,52,.5)}
.lp-g-future{--lp-accent:#7ED2EC;--lp-glow:rgba(126,210,236,.19);--lp-line:rgba(126,210,236,.5)}
.lp-g-sunny{--lp-accent:#FFCB3D;--lp-glow:rgba(255,203,61,.20);--lp-line:rgba(255,203,61,.55)}

/* —— 自适应 —— */
@media (max-width:1180px){
  .lp-gates{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .lp-gates{grid-template-columns:repeat(2,1fr);gap:14px}
  .lp-gate{padding:18px 18px 16px}
  .lp-p-head p{font-size:14px}
}
@media (max-width:640px){
  .lp-gates{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .lp-gate,.lp-gate::after,.lp-g-go svg{transition:none}
  .lp-gate:hover{transform:none}
}

/* ==========================================================================
   V5 · 四境玻璃滤镜入口（叠在精选作品 2×2 四格照片上层）
   需求：臣澜（尘世境）左上·景泰蓝玻璃·春 ／ 昭芒（理想境）右上·亮黄玻璃·夏 ／
         亘古（岁月境）左下·僧黄玻璃·秋 ／ 玄宙（未来境）右下·奶白玻璃·冬；
         玻璃之外每格还有光影与一道反光划过；照片与原排版保持不变。
   ========================================================================== */
.lgrid .rlm-tile{
  position:relative;isolation:isolate;display:block;
  aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;
  border:1px solid rgba(255,255,255,.10);background:#0A0D12;padding:0;
  text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.42);
  transition:transform var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);
}
.lgrid .rlm-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.lgrid .rlm-tile:hover{transform:translateY(-3px);border-color:var(--rlm-line);box-shadow:0 16px 34px rgba(0,0,0,.5),0 0 0 1px var(--rlm-line),0 0 34px var(--rlm-glow)}
.lgrid .rlm-tile:hover img{transform:scale(1.06)}
.lgrid .rlm-tile:focus-visible{outline:2px solid var(--rlm-accent);outline-offset:3px}

/* —— 季节玻璃滤镜：半透明主色 + 对角高光，像隔了一块对应季节的彩色玻璃 —— */
.rlm-glass{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--rlm-tint);
  -webkit-backdrop-filter:blur(1.6px) saturate(1.18);
  backdrop-filter:blur(1.6px) saturate(1.18);
}
.rlm-glass::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(148deg,rgba(255,255,255,.22),transparent 40%,transparent 62%,rgba(255,255,255,.10));
}
/* —— 反光划过玻璃：一道斜向高光周期性扫过（各格错峰） —— */
.rlm-sheen{
  position:absolute;top:-32%;bottom:-32%;left:-72%;width:44%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.36) 46%,rgba(255,255,255,.10) 54%,transparent);
  transform:skewX(-18deg);filter:blur(2px);
  animation:rlmSweep 6.4s cubic-bezier(.4,0,.2,1) infinite;
}
.lgrid .rlm-tile:nth-child(2) .rlm-sheen{animation-delay:1.4s}
.lgrid .rlm-tile:nth-child(3) .rlm-sheen{animation-delay:2.8s}
.lgrid .rlm-tile:nth-child(4) .rlm-sheen{animation-delay:4.2s}
@keyframes rlmSweep{
  0%,52%{left:-72%;opacity:0}
  60%{opacity:1}
  78%,100%{left:132%;opacity:0}
}
/* —— 站点图标（沿用原四卡的图标，移到照片左上；季节印章已按站长反馈移除，画面更简约） —— */
.rlm-ico{
  position:absolute;top:9px;left:9px;z-index:3;width:30px;height:30px;
  display:grid;place-items:center;border-radius:10px;
  color:var(--rlm-accent);background:rgba(8,11,16,.55);border:1px solid var(--rlm-line);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.rlm-ico svg{width:16px;height:16px;display:block}
/* —— 文字层：站名 + 境名 + 一句话介绍（压在照片底部渐变上） —— */
.rlm-info{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;flex-direction:column;gap:4px;padding:30px 13px 11px;
  background:linear-gradient(transparent,rgba(5,8,12,.78));
  text-align:left;
}
.rlm-name{
  display:flex;align-items:baseline;gap:8px;
  font-size:clamp(15px,1.35vw,18px);font-weight:800;letter-spacing:.14em;color:#fff;
}
.rlm-name i{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.72)}
.rlm-desc{
  font-size:11.6px;line-height:1.62;color:rgba(255,255,255,.80);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* —— 各境玻璃主色 ——
   景泰蓝 #166EB4（春·臣澜）／ 亮金黄 #FFC428（夏·昭芒）／
   僧袍黄 #7A5C1C（秋·亘古，比亮黄更深更沉）／ 奶白 #FFF6E8（冬·玄宙） */
.rlm-main{--rlm-accent:#4FC3F7;--rlm-line:rgba(79,195,247,.5);--rlm-glow:rgba(79,195,247,.20);
  --rlm-tint:linear-gradient(152deg,rgba(22,110,180,.38),rgba(88,175,255,.14) 58%,rgba(22,110,180,.26))}
.rlm-sunny{--rlm-accent:#FFCB3D;--rlm-line:rgba(255,203,61,.55);--rlm-glow:rgba(255,203,61,.22);
  --rlm-tint:linear-gradient(152deg,rgba(255,196,40,.34),rgba(255,232,150,.14) 58%,rgba(255,180,30,.28))}
.rlm-ancient{--rlm-accent:#D8A94E;--rlm-line:rgba(216,169,78,.5);--rlm-glow:rgba(216,169,78,.20);
  --rlm-tint:linear-gradient(152deg,rgba(122,88,28,.42),rgba(196,146,58,.16) 58%,rgba(110,80,26,.34))}
.rlm-future{--rlm-accent:#F2E9D8;--rlm-line:rgba(255,248,236,.55);--rlm-glow:rgba(255,248,236,.16);
  --rlm-tint:linear-gradient(152deg,rgba(255,248,236,.34),rgba(255,255,255,.12) 58%,rgba(250,240,224,.26))}

@media (prefers-reduced-motion:reduce){
  .rlm-sheen{animation:none;opacity:0}
  .lgrid .rlm-tile,.lgrid .rlm-tile img{transition:none}
  .lgrid .rlm-tile:hover{transform:none}
}

/* ==========================================================================
   V5.1 · 引导页顶部对齐修正 + LOGO 中英文对齐（站长 2026-10-09 二次反馈）
   问题：顶部左右两组元素贴到了「页面」左右边缘，显得分散。
   目标：左组（LOGO+头像）与下方条形码左边缘对齐；
         右组（四境入口 / 节日彩蛋 / 声音按钮）与大图右边缘对齐。
   做法：把 header 收进与 .landing-body 相同的内容栏（max-width:--wrap + 22px 内边距），
         宽屏时左组再左移 36px 与条形码外探量对齐。
   ========================================================================== */
.landing-head{
  width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px;
}
/* 宽屏（内容栏两侧余量足够）时，让 LOGO 组与条形码左边缘齐平 */
@media (min-width:1280px){
  .landing-head>.brand{margin-left:-36px}
}
/* —— LOGO 中英文：中文略放大、英文缩小并把字距拉开到与中文等宽，两行左对齐、不遮挡 —— */
.landing-head .brand{gap:12px}
.landing-head .brand-txt{gap:2px}
.landing-head .brand-txt b{font-size:24px;line-height:1.06;letter-spacing:.1em;font-weight:900}
.landing-head .brand-txt span{
  font-size:8px;line-height:1.25;letter-spacing:.62px;
  color:var(--text-3);text-transform:uppercase;white-space:nowrap;
}
@media (max-width:640px){
  .landing-head .brand-txt b{font-size:20px}
  .landing-head .brand-txt span{font-size:7.4px;letter-spacing:.4px}
}

/* ==========================================================================
   V5.1 · 四宫格：鼠标悬停后玻璃由模糊渐清，2 秒内看清画面（移开恢复）
   其他效果（反光扫过、季节印章、图标、文字层、悬浮位移）保持不变。
   ========================================================================== */
.lgrid .rlm-tile .rlm-glass{
  transition:backdrop-filter 2s cubic-bezier(.4,0,.2,1),
             -webkit-backdrop-filter 2s cubic-bezier(.4,0,.2,1),
             opacity 1.6s cubic-bezier(.4,0,.2,1);
}
.lgrid .rlm-tile:hover .rlm-glass,
.lgrid .rlm-tile:focus-visible .rlm-glass{
  -webkit-backdrop-filter:blur(0px) saturate(1.04);
  backdrop-filter:blur(0px) saturate(1.04);
  opacity:.30;                       /* 色玻璃保留一点季节色，但画面清晰可辨 */
}
@media (prefers-reduced-motion:reduce){
  .lgrid .rlm-tile .rlm-glass{transition:none}
}

/* V5.1 访客胶囊：IP 用等宽数字字体，城市名强调 */
.visitor-badge .vb-ip{font-family:var(--font-num,ui-monospace,Consolas,monospace);letter-spacing:.3px}
.visitor-badge [data-visitor-city]{font-weight:900}