/* 可选：全局滚动习惯 */
html { scroll-behavior: smooth; }

body{
  color:#fff !important
}

/* —— 基础色板 —— */
:root {
  --paper: #626262;
  --line: #111;
  --left_block:   #c43c3c;
  --right_block:  #0048ff;
  --bottom_block:#f3c84b;          /* ★ 新增：黄色 */
  --t: clamp(6px, 1.4vw, 16px); /* 线条粗细：随视口缩放 */
}

/* 前景内容天然在背景之上 */
.mondrian-bg { position: relative; }

/* 固定背景舞台：铺满视口，位于最底层，不接管事件 */
.mondrian-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--paper);
}

/* 通用层：绝对定位在舞台内，逐个做动画 */
.mondrian-layer {
  position: absolute;
  opacity: 0;
  animation: 1s ease-out forwards;
  will-change: translate, transform; /* ✅ 新增 translate，提升滚动时的合成性能 */
}


/* —— 几何布局（按你提供的构图比例） —— */
/* 红块（左上）——从上滑入 */
.mondrian-layer.red {
  top: 12%;
  left: 12%;
  width: 42%;
  height: 22%;
  background: var(--left_block);
  animation-name: slideFromTop;
  animation-delay: .15s;
}

/* 蓝块（右中）——从右滑入 */
.mondrian-layer.blue {
  top: 50%;
  left: 64%;
  width: 20%;
  height: 20%;
  background: var(--right_block);
  animation-name: slideFromRight;
  animation-delay: .35s;
}

/* 新增左侧黄色块（从左滑入） */
.mondrian-layer.yellow-left{
  top: 66%;
  left: 30%;
  width: 28%;
  height: 28%;
  background: var(--bottom_block);
  animation-name: slideFromLeft;   /* 复用已有关键帧 */
  animation-delay: 1.05s;          /* 时序：在蓝块与水平线后出现，可自行微调 */
  z-index: -3;
}

/* 竖黑线（从下） */
.mondrian-layer.vline {
  top: 0;
  left: 58%;
  width: var(--t);
  height: 100%;
  background: var(--line);
  animation-name: slideFromBottom;
  animation-delay: .55s;
}

/* 中部水平线 左段（从左） */
.mondrian-layer.hline-left {
  top: 38%;
  left: 12%;
  width: 46%;
  height: var(--t);
  background: var(--line);
  animation-name: slideFromLeft;
  animation-delay: .75s;
}

/* 中部水平线 右短段（从右） */
.mondrian-layer.hline-right {
  top: 38%;
  left: 58%;
  width: 23%;
  height: var(--t);
  background: var(--line);
  animation-name: slideFromRight;
  animation-delay: .95s;
}

/* 底部水平线（从左） */
.mondrian-layer.hline-bottom {
  bottom: 14%;
  left: 12%;
  width: 46%;
  height: var(--t);
  background: var(--line);
  animation-name: slideFromLeft;
  animation-delay: 1.15s;
}

/* —— 毛玻璃幕布：模糊 + 降亮度 —— */
.mondrian-veil {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(5px) brightness(0.5);
  -webkit-backdrop-filter: blur(5px) brightness(0.5);
  background: rgba(0,0,0,0.15);
}


/* —— 初始滑入关键帧 —— */
@keyframes slideFromTop   { from { transform: translateY(-100%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes slideFromBottom{ from { transform: translateY( 100%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes slideFromLeft  { from { transform: translateX(-100%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes slideFromRight { from { transform: translateX( 100%); opacity:0; } to { transform:none; opacity:1; } }

/* —— 无障碍：用户偏好减少动效时，禁用动画/视差 —— */
@media (prefers-reduced-motion: reduce) {
  .mondrian-layer { animation: none !important; transition: none !important; transform: none !important; }
  .mondrian-stage { transform: none !important; }
}

.mondrian-stage { z-index: -20; }