/* CrossGate Portal — 首页「黄金黑洞」太空舞台
 *
 * 独立组件，仅首页按条件加载（base.html）。刻意不复用 site.css 的 .hero，
 * 全部规则收口在 .portal-hero 作用域内，避免与站点公共样式互相影响。
 *
 * 约束：站点 CSP 为 default-src 'self'; style-src 'self'，无 unsafe-inline、
 * 无 CDN 白名单，故全部效果为纯 CSS，无外部依赖、无 JS、无 url() 外链。
 * 滚动视差使用 CSS 原生 animation-timeline，不支持的浏览器降级为缓慢漂浮。
 */

.portal-hero {
  --pg-gold: #f5c451;
  --pg-gold-hi: #ffeab4;
  --pg-amber: #e0872a;
  --pg-ember: rgba(245, 196, 81, 0.42);
  --pg-void: #07050a;
  --pg-text: #f7f0e2;
  --pg-muted: #bcab8d;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding: 60px 56px;
  margin-bottom: 26px;
  border-radius: 20px;
  border: 1px solid rgba(245, 196, 81, 0.18);
  background:
    linear-gradient(to bottom, transparent 76%, #050308 100%),
    radial-gradient(58% 46% at 74% 44%, rgba(224, 135, 42, 0.26) 0%, transparent 62%),
    radial-gradient(90% 70% at 50% 108%, rgba(245, 196, 81, 0.09) 0%, transparent 60%),
    linear-gradient(168deg, #0c0812 0%, #07050a 48%, #050308 100%);
  box-shadow: 0 26px 64px rgba(8, 5, 14, 0.5);
  color: var(--pg-text);
}

.portal-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  perspective: 1000px;
  perspective-origin: 72% 46%;
  pointer-events: none;
}

/* ---------- 星场（两层，纯渐变，无图片） ---------- */

.pg-stars {
  position: absolute;
  inset: -20% 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 245, 220, 0.9) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 63% 12%, rgba(255, 236, 190, 0.75) 50%, transparent 51%),
    radial-gradient(1.7px 1.7px at 84% 32%, rgba(255, 250, 235, 0.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 27% 54%, rgba(255, 240, 205, 0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 77%, rgba(255, 248, 225, 0.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 91% 68%, rgba(255, 238, 198, 0.65) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 7% 84%, rgba(255, 244, 214, 0.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 72% 92%, rgba(255, 240, 208, 0.55) 50%, transparent 51%);
  background-size: 100% 100%;
  opacity: 0.9;
}

.pg-stars-2 {
  inset: -30% 0;
  background-image:
    radial-gradient(1px 1px at 33% 26%, rgba(255, 236, 196, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 77% 48%, rgba(255, 244, 214, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 19% 66%, rgba(255, 232, 186, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 57% 8%, rgba(255, 240, 206, 0.42) 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 84%, rgba(255, 238, 200, 0.38) 50%, transparent 51%);
  opacity: 0.7;
}

/* ---------- 行星 ---------- */

.pg-planet {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* 近景：带环的琥珀巨星 */
.pg-planet-a {
  width: 132px;
  height: 132px;
  left: 6%;
  top: 68%;
  background:
    radial-gradient(circle at 32% 30%, #ffdb94 0%, #e0872a 38%, #8a4510 72%, #2a1405 100%);
  box-shadow: 0 0 46px rgba(224, 135, 42, 0.3), inset -14px -10px 34px rgba(0, 0, 0, 0.62);
}

.pg-planet-a::after {
  content: "";
  position: absolute;
  left: -42%;
  top: 38%;
  width: 184%;
  height: 26%;
  border-radius: 50%;
  border: 2px solid rgba(245, 196, 81, 0.55);
  border-bottom-color: rgba(245, 196, 81, 0.18);
  transform: rotate(-18deg);
}

/* 中景：冷白小卫星 */
.pg-planet-b {
  width: 56px;
  height: 56px;
  left: 27%;
  top: 20%;
  background:
    radial-gradient(circle at 36% 32%, #fff6e2 0%, #cdbb9a 44%, #6a5c45 78%, #211b12 100%);
  box-shadow: inset -7px -5px 16px rgba(0, 0, 0, 0.6);
}

/* 远景：暗红矮星 */
.pg-planet-c {
  width: 34px;
  height: 34px;
  right: 13%;
  top: 13%;
  background:
    radial-gradient(circle at 38% 34%, #ffbe7a 0%, #a85c1e 46%, #3d1c06 100%);
  box-shadow: inset -4px -3px 10px rgba(0, 0, 0, 0.55);
  opacity: 0.85;
}

/* ---------- 黄金黑洞 ---------- */

.pg-blackhole {
  position: absolute;
  top: 48%;
  left: 73%;
  width: 330px;
  height: 330px;
  margin: -165px 0 0 -165px;
  transform-style: preserve-3d;
  transform: rotateZ(-8deg);
}

/* 外层辉光 */
.bh-glow {
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 196, 81, 0.3) 0%, rgba(224, 135, 42, 0.12) 42%, transparent 68%);
  animation: bh-breathe 6s ease-in-out infinite;
}

/* 吸积盘：近乎侧视的金色圆环 */
.bh-disk {
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  transform: rotateX(78deg);
  background: conic-gradient(
    from 0deg,
    rgba(245, 196, 81, 0.15) 0deg,
    var(--pg-gold-hi) 42deg,
    var(--pg-gold) 96deg,
    var(--pg-amber) 168deg,
    rgba(245, 196, 81, 0.2) 228deg,
    var(--pg-gold) 300deg,
    rgba(245, 196, 81, 0.15) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 38%, #000 47%, #000 92%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 38%, #000 47%, #000 92%, transparent 100%);
  filter: blur(0.7px) saturate(1.2) brightness(1.12);
  animation: bh-spin 14s linear infinite;
}

/* 透镜光晕：绕到上方的那道弧 */
.bh-lens {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: conic-gradient(
    from 188deg,
    transparent 0deg,
    var(--pg-gold-hi) 30deg,
    #fff6dd 62deg,
    var(--pg-gold) 96deg,
    transparent 142deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 88%, #000 100%);
  mask: radial-gradient(closest-side, transparent 84%, #000 88%, #000 100%);
  filter: blur(1.4px);
  opacity: 0.98;
  animation: bh-lens-breathe 6s ease-in-out infinite alternate;
}

/* 事件视界 */
.bh-core {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, #000 62%, #050207 100%);
  box-shadow:
    0 0 0 1.5px rgba(255, 234, 180, 0.92),
    0 0 12px 2px rgba(245, 196, 81, 0.85),
    0 0 46px 10px rgba(224, 135, 42, 0.34),
    inset 0 0 30px rgba(0, 0, 0, 1);
}

@keyframes bh-spin {
  from { transform: rotateX(78deg) rotate(0deg); }
  to   { transform: rotateX(78deg) rotate(360deg); }
}

@keyframes bh-breathe {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* 透镜弧始终绕顶，只轻微呼吸；整圈旋转会让它落到黑洞侧面或底部。 */
.bh-lens { transform: rotate(80deg); }
@keyframes bh-lens-breathe {
  from { transform: rotate(80deg) scale(1); }
  to   { transform: rotate(80deg) scale(1.015); }
}

/* ---------- 滚动视差：CSS 原生时间线，零 JS ---------- */

/* 注意：.portal-hero 自身 overflow:hidden，会成为滚动容器。若直接用 view()，
 * 时间线会绑定到这个永不滚动的容器，进度被冻结。因此在 hero 上声明具名
 * view-timeline（相对文档滚动条测量），再由内部元素引用。 */
@supports (animation-timeline: view()) {
  .portal-hero {
    view-timeline-name: --pg-hero;
    view-timeline-axis: block;
  }
  .pg-planet,
  .pg-stars,
  .pg-blackhole {
    animation-timeline: --pg-hero;
    animation-range: cover 0% cover 100%;
    animation-duration: auto;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: 1;
  }
  .pg-planet-a { animation-name: pg-par-near; }
  .pg-planet-b { animation-name: pg-par-mid; }
  .pg-planet-c { animation-name: pg-par-far; }
  .pg-stars    { animation-name: pg-par-stars; }
  .pg-stars-2  { animation-name: pg-par-stars2; }
  .pg-blackhole { animation-name: pg-par-hole; }
}

@keyframes pg-par-near  { from { transform: translate3d(0, 130px, 0); } to { transform: translate3d(0, -190px, 0); } }
@keyframes pg-par-mid   { from { transform: translate3d(0, 70px, 0) scale(1); } to { transform: translate3d(0, -120px, 0) scale(1.06); } }
@keyframes pg-par-far   { from { transform: translate3d(0, 34px, 0); } to { transform: translate3d(0, -58px, 0); } }
@keyframes pg-par-stars { from { transform: translate3d(0, 26px, 0); } to { transform: translate3d(0, -52px, 0); } }
@keyframes pg-par-stars2{ from { transform: translate3d(0, 12px, 0); } to { transform: translate3d(0, -26px, 0); } }
@keyframes pg-par-hole  { from { transform: rotateZ(-8deg) translate3d(0, 46px, 0); } to { transform: rotateZ(-8deg) translate3d(0, -72px, 0); } }

/* 不支持滚动时间线时的降级：缓慢漂浮，避免画面全静 */
@supports not (animation-timeline: view()) {
  .pg-planet-a { animation: pg-float-a 17s ease-in-out infinite alternate; }
  .pg-planet-b { animation: pg-float-b 13s ease-in-out infinite alternate; }
  .pg-planet-c { animation: pg-float-c 21s ease-in-out infinite alternate; }
  @keyframes pg-float-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(10px, -26px, 0); } }
  @keyframes pg-float-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-12px, 18px, 0); } }
  @keyframes pg-float-c { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(8px, 14px, 0); } }
}

/* ---------- 文案层 ---------- */

.portal-copy { position: relative; z-index: 1; max-width: 52%; }

.portal-eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pg-gold);
}

.portal-copy h2 {
  margin: 0 0 16px;
  font-size: 40px;
  line-height: 1.26;
  color: #fff;
  text-shadow: 0 0 38px rgba(245, 196, 81, 0.3);
}

.portal-lede { margin: 0 0 28px; font-size: 14px; line-height: 1.85; color: var(--pg-muted); }

.portal-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.portal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  border: 1px solid var(--pg-gold);
  background: linear-gradient(180deg, var(--pg-gold-hi), var(--pg-gold));
  color: #2a1a02;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.portal-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(245, 196, 81, 0.38); }

.portal-btn.ghost {
  background: transparent;
  color: var(--pg-text);
  border-color: rgba(245, 196, 81, 0.45);
}
.portal-btn.ghost:hover { background: rgba(245, 196, 81, 0.1); box-shadow: none; }

.portal-btn:focus-visible,
.portal-hero a:focus-visible { outline: 2px solid var(--pg-gold-hi); outline-offset: 3px; }

.portal-btn .icon { width: 16px; height: 16px; }

/* 滚动提示 */
.portal-scrollcue {
  position: absolute;
  left: 56px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(188, 171, 141, 0.75);
}

.portal-scrollcue::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(to right, var(--pg-gold), transparent);
  animation: pg-cue 2.4s ease-in-out infinite;
}

@keyframes pg-cue {
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  50%      { opacity: 1;    transform: translateX(7px); }
}

/* ---------- 响应式（对齐 site.css 既有断点） ---------- */

@media (max-width: 1150px) {
  .portal-hero { padding: 48px 40px; min-height: 84vh; }
  .portal-copy { max-width: 60%; }
  .portal-copy h2 { font-size: 34px; }
  .pg-blackhole { width: 270px; height: 270px; margin: -135px 0 0 -135px; left: 76%; }
  .pg-planet-a { width: 108px; height: 108px; }
  .portal-scrollcue { left: 40px; }
}

@media (max-width: 920px) {
  .portal-copy { max-width: 70%; }
  .pg-blackhole { width: 230px; height: 230px; margin: -115px 0 0 -115px; left: 77%; }
  .pg-planet-b { opacity: 0.7; }
}

@media (max-width: 760px) {
  .portal-hero { padding: 36px 24px; min-height: 76vh; border-radius: 16px; }
  .portal-copy { max-width: 100%; }
  .portal-copy h2 { font-size: 28px; }
  .pg-blackhole { width: 190px; height: 190px; margin: -95px 0 0 -95px; left: 82%; top: 20%; opacity: 0.6; }
  .pg-planet-a { width: 84px; height: 84px; left: 4%; top: 72%; opacity: 0.75; }
  .pg-planet-b { display: none; }
  .pg-planet-c { right: 48%; top: 10%; }
  .portal-scrollcue { left: 24px; }
}

@media (max-width: 360px) {
  .portal-copy h2 { font-size: 24px; }
  .portal-actions { flex-direction: column; align-items: stretch; }
  .portal-btn { justify-content: center; }
}

/* ---------- 降低动态效果：保留构图，停止一切运动 ---------- */

@media (prefers-reduced-motion: reduce) {
  .bh-disk, .bh-lens, .bh-glow,
  .pg-planet, .pg-stars,
  .pg-blackhole,
  .portal-scrollcue::before { animation: none !important; }
  .bh-disk { transform: rotateX(78deg) rotate(28deg); }
  .bh-lens { transform: rotate(80deg); }
  .portal-btn { transition: none; }
  .portal-btn:hover { transform: none; }
}

/* ==========================================================================
 * 快捷入口：与 hero 合为一个连续暗色区块，消除中间接缝
 *
 * 本文件仅在首页条件加载，故这里直接使用 .quick-links 选择器不会影响其他页面，
 * 无需额外作用域类。覆盖顺序依赖 site.css 先加载；nth-child 图标底色的
 * 特异性较高，需用同样的选择器覆盖。
 * ========================================================================== */

.portal-hero {
  margin-bottom: 0;
  border-radius: 20px 20px 0 0;
  border-bottom: 0;
}

.quick-links {
  margin-bottom: 26px;
  padding: 22px 26px 30px;
  border: 1px solid rgba(245, 196, 81, 0.18);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, #050308 0%, #07050c 60%, #0a0710 100%);
  box-shadow: 0 26px 60px rgba(8, 5, 14, 0.34);
}

.quick-links a {
  border-color: rgba(245, 196, 81, 0.2);
  background: rgba(255, 244, 222, 0.045);
  color: #f7f0e2;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.quick-links a:hover {
  border-color: rgba(245, 196, 81, 0.55);
  background: rgba(245, 196, 81, 0.1);
  transform: translateY(-2px);
}

.quick-links a:focus-visible {
  outline: 2px solid #ffeab4;
  outline-offset: 3px;
}

/* 图标底座：统一为金色系，逐个覆盖 site.css 的分色规则 */
.quick-links a > .icon:first-child,
.quick-links a:nth-child(2) > .icon:first-child,
.quick-links a:nth-child(3) > .icon:first-child {
  background: rgba(245, 196, 81, 0.12);
  border-color: rgba(245, 196, 81, 0.3);
  color: #f5c451;
}

.quick-links small { color: #bcab8d; }
.quick-links a > .icon:last-child { color: rgba(245, 196, 81, 0.6); }

@media (max-width: 760px) {
  .quick-links { padding: 18px 16px 24px; border-radius: 0 0 16px 16px; }
  .portal-hero { border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .quick-links a { transition: none; }
  .quick-links a:hover { transform: none; }
}