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

/* @font-face {
  font-family: 'BebasNeue';
  src: url('../fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Fajalla';
  src: url('../fonts/FjallaOne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
} */

.useFajilla{
  font-family: 'Fajalla', sans-serif;
}

body {
  color: #fff !important;
  /* background: linear-gradient(-45deg, #121212, #505050,#121212,#505050,#121212); */
  background-size: 400% 400%;
  /* animation: gradientFlow 8s ease; */
  font-family: 'BebasNeue', sans-serif;
}

@keyframes gradientFlow {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 0%;
  }
}

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



.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter:blur(2px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1), inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter:blur(1px) drop-shadow(10px 4px 6px black) brightness(130%);
}

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

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

/* 通用层：绝对定位在舞台内，逐个做动画 */
.mondrian-layer {
  position: absolute;
  opacity: 0;
  animation: 1s ease-out forwards;
}


/* —— 几何布局（按你提供的构图比例） —— */
/* 红块（左上）——从上滑入 */
.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; }