/* ============================================================
   根目录占位页（建设中）— Material Design 3
   颜色令牌复用 portfolio/assets/css/tokens.css，
   本文件只放这一页独有的版式。
   ============================================================ */

.building{
  min-height:100vh;
  display:grid;place-items:center;
  padding:clamp(40px,7vw,80px) 0;
}

.building__inner{
  max-width:520px;text-align:center;margin:0 auto;
}

/* 圆形图标 —— M3 primary container */
.building__badge{
  width:96px;height:96px;margin:0 auto 32px;
  border-radius:var(--md-sys-shape-corner-full);
  background:var(--md-sys-color-primary-container);
  color:var(--md-sys-color-on-primary-container);
  display:grid;place-items:center;
  position:relative;
}
.building__badge svg{width:44px;height:44px;fill:var(--md-sys-color-on-primary-container)}
/* 缓慢呼吸的光环，示意“进行中” */
.building__badge::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--md-sys-color-primary) 38%,transparent);
  animation:breathe 2.6s var(--md-sys-motion-easing-standard) infinite;
}
@keyframes breathe{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb,var(--md-sys-color-primary) 38%,transparent)}
  70% {box-shadow:0 0 0 18px color-mix(in srgb,var(--md-sys-color-primary) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--md-sys-color-primary) 0%,transparent)}
}

.building__title{
  font-size:clamp(30px,5vw,40px);
  line-height:1.3;font-weight:400;
  margin:0;
}

/* M3 linear progress（不确定进度） */
.building__progress{
  width:min(240px,60%);height:4px;margin:40px auto 0;
  border-radius:var(--md-sys-shape-corner-full);
  background:var(--md-sys-color-surface-container-highest);
  overflow:hidden;position:relative;
}
.building__progress::after{
  content:"";position:absolute;top:0;bottom:0;width:40%;
  border-radius:inherit;
  background:var(--md-sys-color-primary);
  animation:slide 1.9s var(--md-sys-motion-easing-standard) infinite;
}
@keyframes slide{
  0%  {left:-40%}
  100%{left:100%}
}

@media (max-width:720px){
  .building__badge{width:80px;height:80px;margin-bottom:26px}
  .building__badge svg{width:36px;height:36px}
}

@media (prefers-reduced-motion:reduce){
  .building__badge::after{animation:none}
  .building__progress::after{animation:none;left:30%}
}

@media print{
  .building__badge::after,.building__progress::after{animation:none}
}