/*
 * cloud-curtain.css — 「云开见日」转场幕布
 * ------------------------------------------------------------------
 * 视觉层,由 cloud-curtain.js 驱动(点击即盖 → 跨页接力 → 就绪即揭)。
 *
 * 性能约定:幕布要在「世界启动、主线程被 shader 编译占满」时依然满帧,
 * 因此云朵一律只用 transform/opacity(走合成器),不加 blur/drop-shadow/
 * mix-blend-mode 这类逐帧离屏重绘的开销。景深改由大小与透明度表达。
 * ------------------------------------------------------------------
 */

/* 关闭浏览器原生跨文档转场。
   site-transition.css 里的 `@view-transition { navigation: auto }` 会让每次同源
   跳转都自动播一次原生转场:它把页面冻成静态快照播完再交还,期间云幕布是死的,
   表现为「快结束时闪一下、又退回云里、然后卡住」。云幕布现在就是转场本身,
   两套不能并行,这里显式关掉原生那层(本文件在 site-transition.css 之后加载,后者失效)。 */
@view-transition {
  navigation: none;
}

/* 带接力标记到达时,只给 html 准备目的页自己的底色。
   云的暖白只能属于最上层 veil；绝不能覆盖 body 的最终背景和渐变。
   否则 veil 变透明时会先露出暖黄底,动画结束删除标记时再瞬间闪回白色。 */
html[data-curtain-arriving][data-page='resume'] {
  background-color: #fbfaf6 !important;
}

html[data-curtain-arriving][data-page='world'] {
  background-color: #a8ced4 !important;
}

.cloud-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483000;         /* 幕布必须在最前:高于 HUD、快照层与旧云层 */
  pointer-events: none;
  /*
   * 不用时必须是 display:none,不能只用 visibility:hidden。
   *
   * visibility:hidden 会保留布局盒和**合成层**。这层幕布里有 14 朵 42vmax 见方
   * 的云、外加一片 104vmax 的光芒(还带 conic 渐变 + mask + mix-blend-mode),
   * 每一个都被 will-change 永久提升为独立合成层 —— 在 2000px 宽的屏幕上,
   * 光是这些层就常驻 200MB 以上的显存,而且转场早就结束了。
   *
   * 后果是页面真正需要的图块分不到内存:上下滚动简历时来不及光栅化,
   * 直接显示空白,停下来过一会儿才补上。display:none 会把这些层整个销毁。
   */
  display: none;
}

.cloud-curtain[data-active] {
  display: block;
}

/* 底景:云隙透光。兼作 100% 遮盖的实底 */
.cloud-curtain__veil {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    url("/transitions/clouds/backdrop.webp") center / cover no-repeat,
    radial-gradient(58% 58% at 50% 46%, #fff6e4 0%, #f3efe2 46%, #dce8ec 100%);
}

.cloud-curtain__puffs {
  position: absolute;
  inset: 0;
  z-index: 20;
}

.cloud-curtain__puff {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42vmax;
  height: 42vmax;
  margin: -21vmax 0 0 -21vmax;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 靠近光口的云被阳光染暖(不用 mix-blend-mode:混合模式会强制额外合成开销) */
.cloud-curtain__warm {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  pointer-events: none;
}

/* 放射光束,极慢旋转 */
.cloud-curtain__rays {
  position: absolute;
  z-index: 29;
  left: 50%;
  top: 46%;
  width: 104vmax;
  height: 104vmax;
  margin: -52vmax 0 0 -52vmax;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 238, 205, .30) 0deg 5deg, rgba(255, 238, 205, 0) 5deg 17deg);
  -webkit-mask-image: radial-gradient(circle, #000 6%, rgba(0, 0, 0, .55) 26%, transparent 56%);
  mask-image: radial-gradient(circle, #000 6%, rgba(0, 0, 0, .55) 26%, transparent 56%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 中心暖光晕,缓慢呼吸 */
.cloud-curtain__glow {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 46%;
  width: 70vmax;
  height: 70vmax;
  margin: -35vmax 0 0 -35vmax;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(255, 241, 214, .98) 0%, rgba(255, 228, 172, .62) 18%, rgba(255, 220, 160, 0) 54%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* 加载文案,落在光口里 */
.cloud-curtain__core {
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2.2vmin;
  opacity: 0;
  text-align: center;
}

.cloud-curtain__word {
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: clamp(13px, 2vmin, 19px);
  font-weight: 800;
  letter-spacing: .42em;
  text-indent: .42em;           /* 抵消末字后多出的字距,视觉居中 */
  color: #8a6b3e;
  text-shadow: 0 0 2.4vmin rgba(255, 246, 225, .95);
}

.cloud-curtain__bar {
  width: 17vmin;
  min-width: 120px;
  height: 2px;
  border-radius: 99px;
  background: rgba(160, 128, 80, .22);
  overflow: hidden;
}

.cloud-curtain__bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #f1a33c, #c8654b, transparent);
}

/* 旧的三块 CSS 云由本幕布取代,避免两套云叠加 */
.astro-world-transition-clouds {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cloud-curtain__rays,
  .cloud-curtain__glow {
    animation: none !important;
  }
}

/*
 * will-change 只在幕布激活期间挂上。
 *
 * 它是一句「我马上要动这个元素」的提示,不是永久属性 —— 常驻会让浏览器一直
 * 为这些元素保留合成层。这里的元素又特别大(42vmax 的云 ×14、104vmax 的光芒),
 * 常驻的代价是几百 MB 显存,而幕布一年到头有 99% 的时间是不可见的。
 */
.cloud-curtain[data-active] .cloud-curtain__puff,
.cloud-curtain[data-active] .cloud-curtain__rays,
.cloud-curtain[data-active] .cloud-curtain__glow,
.cloud-curtain[data-active] .cloud-curtain__veil {
  will-change: transform, opacity;
}