/* ══════════════════════════════════════════════
   Echo 回响 · css/splash.css
   开屏动画 —— 复古 Mac 桌面 · 古早风文件夹 → 经典弹窗
   风格对齐 retro.css 设计系统:
     · 窗口灰 #E6E8EB / 内容白 #FFFFFF / 炭墨 #2B2B2E
     · 唯一彩色 = 石板蓝 #6E7F96(渐变 8496AC→667691)
   独立组件:自带配色,不读写全局主题变量,不影响其他页面。
   想关掉开屏:删掉 index.html 里对本文件和 js/splash.js
   的引用 + splash DOM 即可,其余功能不受影响。
   ══════════════════════════════════════════════ */

/* ── 全屏遮罩:复古桌面 ── */
.splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: Geneva, Verdana, "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: #2B2B2E;
  /* 经典 Mac 桌面 2x2 抖动格纹(石板蓝灰调) */
  background-color: #C7CEDA;
  background-image:
    linear-gradient(45deg, #DDE2EA 25%, transparent 25%, transparent 75%, #DDE2EA 75%),
    linear-gradient(45deg, #DDE2EA 25%, transparent 25%, transparent 75%, #DDE2EA 75%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  transition: opacity .38s ease;
}
.splash.leaving{ opacity: 0; pointer-events: none; }
.splash[hidden]{ display: none; }

body.splash-lock{ overflow: hidden !important; }

/* ── 顶部经典菜单栏 ── */
.splash-menubar{
  flex: none;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top);
  height: calc(30px + env(safe-area-inset-top));
  background: #F6F7F9;
  border-bottom: 1px solid #2B2B2E;
  font-size: 13px;
  letter-spacing: .02em;
}
.splash-apple{ font-size: 14px; line-height: 1; transform: translateY(-1px); }
.splash-menu-item{ white-space: nowrap; }
.splash-menu-item.strong{ font-weight: 700; }
.splash-clock{
  margin-left: auto;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ── 桌面:文件夹图标 ── */
.splash-desktop{
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 8vh;
}
.splash-icon{
  appearance: none;
  background: none;
  border: 0;
  padding: 10px 12px 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  animation: splash-bob 3.2s ease-in-out infinite;
}
.splash-icon-img{
  width: clamp(140px, 44vw, 210px);
  aspect-ratio: 1;
  background: url("../splash-folder.svg") center / contain no-repeat;
  filter: drop-shadow(0 10px 16px rgba(43,43,46,.22));
  transition: transform .18s ease;
}
.splash-icon:active .splash-icon-img,
.splash-icon.pressed .splash-icon-img{ transform: scale(.94); }
.splash-icon-label{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #2B2B2E;
  background: #F6F7F9;
  border: 1px solid transparent;
  padding: 1px 7px;
  max-width: 70vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 经典 Mac 选中态:反色 */
.splash-icon.selected .splash-icon-label{
  background: #2B2B2E;
  color: #F6F7F9;
}
.splash-hint{
  font-family: "Monaco", "Menlo", monospace;
  font-size: 12px;
  letter-spacing: .14em;
  color: #5B6C84;
  animation: splash-blink 1.5s steps(2, start) infinite;
}

/* ── 跳过(右下角,低存在感) ── */
.splash-skip{
  position: absolute;
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 8px;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(43,43,46,.42);
  cursor: pointer;
}
.splash-skip:active{ color: #2B2B2E; }

/* ── Finder 经典 zoom rects(打开窗口时的描边缩放框) ── */
.splash-zoomrect{
  position: fixed;
  z-index: 10001;
  border: 1.5px solid #2B2B2E;
  background: rgba(246,247,249,.18);
  pointer-events: none;
  box-sizing: border-box;
}

/* ── 经典 Mac 窗口 ── */
.splash-window{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10002;
  width: min(330px, 86vw);
  background: #FFFFFF;
  border: 1px solid #2B2B2E;
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(43,43,46,.28);
}
.splash-window[hidden]{ display: none; }
.splash-window.ghost{ visibility: hidden; }     /* 量尺寸用 */
.splash-window.pop{ animation: splash-pop .26s cubic-bezier(.22, 1.4, .36, 1); }

/* 标题栏:白色细条纹 + 居中标题镂空 */
.splash-titlebar{
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid #2B2B2E;
  border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(180deg, #FFFFFF 0 2px, #D8DBE0 2px 3px);
}
.splash-title{
  margin: 0 auto;
  padding: 0 8px;
  background: #FFFFFF;                          /* 把条纹镂空 */
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.splash-closebox,
.splash-zoombox{
  flex: none;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border: 1px solid #2B2B2E;
  box-sizing: border-box;
  cursor: pointer;
}
.splash-zoombox{ cursor: default; }
.splash-closebox:active{ background: #2B2B2E; }

/* 窗口内容 */
.splash-window-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 22px 20px;
  text-align: center;
}
.splash-mini-folder{
  width: 72px;
  aspect-ratio: 1;
  background: url("../splash-folder.svg") center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(43,43,46,.18));
}
.splash-welcome{
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .03em;
}
.splash-line{
  margin: 0;
  font-family: "Monaco", "Menlo", monospace;
  font-size: 11.5px;
  letter-spacing: .06em;
  line-height: 1.7;
  color: #5B6C84;
}
/* 默认按钮:经典双层描边(内 1px + 外圈加粗环) */
.splash-ok{
  appearance: none;
  margin-top: 8px;
  min-width: 96px;
  padding: 5px 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #2B2B2E;
  background: linear-gradient(180deg, #FFFFFF 0%, #EEEFF1 100%);
  border: 1px solid #2B2B2E;
  border-radius: 5px;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #2B2B2E;
  cursor: pointer;
}
.splash-ok:active{
  background: linear-gradient(180deg, #8496AC 0%, #6E7F96 100%);
  color: #FFFFFF;
}

/* ── 动效 ── */
@keyframes splash-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}
@keyframes splash-blink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: .15; }
}
@keyframes splash-pop{
  0%{ transform: translate(-50%, -50%) scale(.82); opacity: .4; }
  100%{ transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* 减少动态偏好:关掉浮动与闪烁,保留功能 */
@media (prefers-reduced-motion: reduce){
  .splash-icon{ animation: none; }
  .splash-hint{ animation: none; }
  .splash-window.pop{ animation: none; }
}