/* B3 略過提示與退場（負責：B3 agent）
   略過提示：手機 x115 y776 160×28（距底 40px）；電腦 x530 y740 220×28（距底 32px），水平置中
   退場：.boot.is-out 共 360ms（1300–1660ms）。畫面從中線「裂開」：上半片（視窗上半＋背景）往上推、
   下半片（開機紀錄、進度條、視窗下半、地板）往下推，App 從畫面中間露出。
   動畫名稱一律以 bootOut 開頭（截圖凍結靠這個前綴）。 */

/* ── 裂開進度：0 → 1，由 .boot 上的動畫驅動，子元素繼承後各自換算位移／裁切，全部同步 ── */
@property --bootK{syntax:"<number>";inherits:true;initial-value:0}
.boot{
  --bootK:0;
  /* 兩片各自要移開的距離＝半個畫面高 × 進度 */
  --bootD:calc(var(--bootK) * 50vh);
  --bootD:calc(var(--bootK) * 50dvh);
  /* 視窗內「中線」的位置（視窗頂端＝50% − 190px，所以中線在視窗內 190px；電腦 186px） */
  --bootSeamY:190px;
}
@media (min-width:768px){.boot{--bootSeamY:186px}}

/* ── 略過提示：只是提示文字，整個畫面都可點，所以不做成按鈕的樣子 ── */
.boot-skip{
  position:absolute;left:50%;z-index:6;
  width:160px;height:28px;margin:0 0 0 -80px;
  bottom:calc(40px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:center;
  font:400 14px/28px var(--pixel);letter-spacing:.14em;white-space:nowrap;
  color:var(--lcd-ink);
  text-shadow:0 1px 0 #000,0 0 8px rgba(43,246,255,.4);
  /* 半透明深色底帶：左右漸隱、沒有外框，只是把地板橫線壓下去，不像按鈕 */
  background:linear-gradient(90deg,transparent,rgba(2,10,14,.93) 14%,rgba(2,10,14,.93) 86%,transparent);
  pointer-events:none;user-select:none;-webkit-user-select:none;
  opacity:0;
  animation:bootSkipIn 500ms ease-out 420ms both;
}
/* 不閃的 LCD 提示符號 */
.boot-skip::before{content:"▸";margin-right:6px;color:var(--neon)}
@media (min-width:768px){
  /* 電腦版改成「點一下或按任意鍵略過」：隱藏原文字（font-size:0），由 ::after 補上完整文字 */
  .boot-skip{bottom:32px;width:220px;margin-left:-110px;font-size:0;letter-spacing:0}
  .boot-skip::before,.boot-skip::after{font-size:15px;letter-spacing:.14em}
  .boot-skip::after{content:"點一下或按任意鍵略過"}
}
@keyframes bootSkipIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

/* ── 中縫與裂口刃：平時隱藏。
   ::before＝退場一開始在中線閃起的全像箔光線；
   本體＝跟著裂口走的框：上框（青）貼著上半片下緣、下框（洋紅）貼著下半片上緣，
   框內正好是被裁掉的洞，所以只看得到兩條霓虹刃口與往外的光暈 ── */
.boot-seam{
  position:absolute;left:0;right:0;z-index:20;
  top:calc(50% - 50% * var(--bootK) - 3px);
  bottom:calc(50% - 50% * var(--bootK) - 3px);
  box-sizing:border-box;
  border-top:3px solid #3FF8FF;border-bottom:3px solid #FF4FD8;
  box-shadow:0 -4px 14px rgba(43,246,255,.85),0 4px 14px rgba(255,79,216,.85),
    inset 0 10px 12px -4px rgba(43,246,255,.55),inset 0 -10px 12px -4px rgba(255,79,216,.55);
  opacity:0;pointer-events:none;
}
/* 退場時洞內填實黑（只在遮罩的陰影帶看得到，作為快門投影） */
.boot.is-out .boot-seam{background:#000}
.boot-seam::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:2px;margin-top:-1px;
  background:var(--foil);background-size:200% 100%;
  box-shadow:0 0 2px #fff,0 0 8px var(--neon),0 0 18px var(--neon-2);
  opacity:0;transform-origin:50% 50%;
}

/* ── 退場：不再攔截游標與點擊 ── */
.boot.is-out{
  pointer-events:none;cursor:default;
  animation:bootOutSplit 360ms linear both;
  /* 從中線向外擴大的洞：用遮罩（不用 clip-path），讓裂口內緣留一段由 .6 漸到 0 的半透明帶；
     中縫層在洞裡是一塊實黑，乘上這段漸層就成了快門刃往內投在 App 上的陰影，App 因此退到「後面一層」。
     陰影帶寬＝min(14px, 洞高的一半)，剛開始裂時不會透出開機畫面 */
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0,#000 calc(50% - 50% * var(--bootK)),
    rgba(0,0,0,.62) calc(50% - 50% * var(--bootK)),
    transparent calc(50% - 50% * var(--bootK) + min(14px, 50% * var(--bootK))),
    transparent calc(50% + 50% * var(--bootK) - min(14px, 50% * var(--bootK))),
    rgba(0,0,0,.62) calc(50% + 50% * var(--bootK)),
    #000 calc(50% + 50% * var(--bootK)),#000 100%);
  mask-image:linear-gradient(to bottom,
    #000 0,#000 calc(50% - 50% * var(--bootK)),
    rgba(0,0,0,.62) calc(50% - 50% * var(--bootK)),
    transparent calc(50% - 50% * var(--bootK) + min(14px, 50% * var(--bootK))),
    transparent calc(50% + 50% * var(--bootK) - min(14px, 50% * var(--bootK))),
    rgba(0,0,0,.62) calc(50% + 50% * var(--bootK)),
    #000 calc(50% + 50% * var(--bootK)),#000 100%);
}
.boot.is-out .boot-seam{opacity:1}
.boot.is-out .boot-seam::before{animation:bootOutSeam 360ms linear both}
.boot.is-out .boot-skip{animation:bootOutSkip 80ms linear both}

/* 上半片：視窗整個跟著上片往上走，但只留中線以上（標題列、標誌、文字標）；
   中線以下由「下半片」接手：開機紀錄＋進度條往下 2D（抵掉視窗的 −D，淨移 +D），
   再用 ::after 補一塊同材質的視窗下半框一起往下走，蓋住原本留在原地的下半框 */
.boot.is-out .boot-win{
  translate:0 calc(var(--bootD) * -1);
  clip-path:polygon(
    -40px -40px,calc(100% + 40px) -40px,
    calc(100% + 40px) var(--bootSeamY),-40px var(--bootSeamY),
    -40px calc(var(--bootSeamY) + 2 * var(--bootD)),calc(100% + 40px) calc(var(--bootSeamY) + 2 * var(--bootD)),
    calc(100% + 40px) calc(100% + 2 * var(--bootD) + 40px),-40px calc(100% + 2 * var(--bootD) + 40px));
}
.boot.is-out .boot-win::after{
  content:"";position:absolute;z-index:-1;left:0;right:0;
  top:var(--bootSeamY);bottom:0;
  background:inherit;box-shadow:inherit;
  translate:0 calc(var(--bootD) * 2);pointer-events:none;
}
.boot.is-out .boot-log,
.boot.is-out .boot-bar{translate:0 calc(var(--bootD) * 2)}
/* 下半片的背景元素（地平線、地板）跟著往下推 */
.boot.is-out .boot-floor,
.boot.is-out .boot-horizon{translate:0 var(--bootD)}

/* 裂開：0–12% 先停住讓中縫閃一下；12–100% 兩片加速推開；最後 10% 整層淡出，保證結束時完全透明 */
@keyframes bootOutSplit{
  0%{--bootK:0;opacity:1;animation-timing-function:linear}
  12%{--bootK:0;animation-timing-function:cubic-bezier(.55,0,.35,1)}
  90%{opacity:1}
  100%{--bootK:1;opacity:0}
}
/* 中縫光線：從中間往左右拉開、閃一下，裂口一開就藏進洞裡 */
@keyframes bootOutSeam{
  0%{opacity:0;transform:scaleX(.1);background-position:0 0}
  10%{opacity:1;transform:scaleX(1) scaleY(1.6)}
  20%{opacity:0;transform:scaleX(1);background-position:60% 0}
  100%{opacity:0;transform:scaleX(1)}
}
/* 略過提示：退場一開始就淡掉 */
@keyframes bootOutSkip{
  from{opacity:1}
  to{opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .boot-skip{animation:none;opacity:1}
}