/* B1 背景與開機光線（負責：B1 agent）— 版位依 docs/boot/FLOORPLAN.md
   時間軸（頁面載入起算）：
     0–120ms   CRT 白線從中心左右拉開（帶青白光暈）
     120–260ms 白線上下展開成一片閃白後淡掉
     160–450ms 背景由黑轉成 App 桌面（青色漸層＋抖色網點＋格點＋像素全像箔光斑）；
               全像格線地板閃兩下後淡淡浮出並流動；地平線出光縫點亮
     全程      細掃描線＋輕微暗角＋LCD 雜訊；220ms 起一道刷新光帶由上往下掃過一次；撐到 1300ms 退場
   動畫名稱一律 bootB1 開頭、fill-mode both，靠 animation-delay 排時間（截圖凍結以 currentTime 計，含 delay）。 */

/* ── 外框：黑底起始 ─────────────────────────────── */
.boot{position:fixed;inset:0;z-index:1000;overflow:hidden;background:#000;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.booting,html.booting body{overflow:hidden}

/* ── 背景層：黑 → App 的桌面（與 body 同一組青色漸層）為主體 ──
   疊三層 90 年代桌面語法：16px 淡格點（像桌面圖樣）、4px 抖色網點（::before，同 .desktop::before）、
   柔和的圓形全像箔光（::after，延續 App 桌面 .desktop::after 的箔圓，大徑向淡出）。 */
.boot-bg{position:absolute;inset:0;
  background:
    radial-gradient(circle at 1px 1px,rgba(124,255,233,.13) 1px,transparent 1.6px) 0 0/16px 16px,
    radial-gradient(120% 70% at 50% 0%,var(--desk) 0%,#06474A 45%,var(--desk-2) 100%);
  animation:bootB1Bg 290ms cubic-bezier(.3,0,.2,1) 160ms both}
.boot-bg::before{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:linear-gradient(45deg,rgba(0,0,0,.35) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.35) 75%),linear-gradient(45deg,rgba(0,0,0,.35) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.35) 75%);
  background-size:4px 4px;background-position:0 0,2px 2px}
/* 全像箔光：位置沿用 App 桌面（top 44%），只用大徑向遮罩淡出成一圈柔光，不切條紋，避免出現方形髒條紋區 */
.boot-bg::after{content:"";position:absolute;left:50%;top:44%;width:max(100vw,min(62vw,560px));max-width:560px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--foil);background-size:300% 100%;opacity:.2;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.15) 72%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.15) 72%,transparent 100%);
  animation:bootB1Foil 9s linear 160ms infinite both}
/* 由黑轉亮：先暗、略偏冷，再回到正常色 */
@keyframes bootB1Bg{
  0%{opacity:0;filter:brightness(.4) saturate(.6)}
  60%{opacity:1;filter:brightness(1.18) saturate(1.1)}
  100%{opacity:1;filter:none}}
@keyframes bootB1Foil{to{background-position:300% 0}}

/* ── 全像格線地板：手機 y548 高 296、電腦 y512 高 288 ──
   不是無限延伸的合成波平原，而是從桌面「投影」出來的一塊淡淡全像：
   兩側與遠端淡出、帶全像橫紋、整體透明度低。
   元素本身不做變形（量測框維持平面圖位置），格線畫在 ::before 上，父層 perspective-origin 設在地平線。 */
.boot-floor{position:absolute;left:0;right:0;bottom:0;height:35.1%;overflow:hidden;
  perspective:240px;perspective-origin:50% 0;
  /* 遮罩：遠端（上緣）淡出以消摩爾紋 × 兩側淡出成投影光池 × 全像橫紋 */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 7%,rgba(0,0,0,.7) 30%,#000 60%),radial-gradient(75% 140% at 50% 0%,#000 45%,transparent 100%),repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.5) 2px 4px);
  mask-image:linear-gradient(180deg,transparent 0%,transparent 7%,rgba(0,0,0,.7) 30%,#000 60%),radial-gradient(75% 140% at 50% 0%,#000 45%,transparent 100%),repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.5) 2px 4px);
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect;
  animation:bootB1Floor 360ms steps(1,end) 220ms both,bootB1FloorIn 360ms ease-out 220ms both}
.boot-floor::before{content:"";position:absolute;left:-120%;right:-120%;bottom:0;height:300%;
  transform-origin:50% 100%;transform:rotateX(76deg);
  /* 線條邊緣做柔化（實→半透明→透明），壓縮到 1px 以下時不會產生鋸齒摩爾紋 */
  background-image:
    linear-gradient(rgba(140,245,236,.78) 0,rgba(140,245,236,.78) 1px,rgba(140,245,236,.2) 2px,transparent 3px),
    linear-gradient(90deg,rgba(205,165,235,.3) 0,rgba(205,165,235,.3) 1px,transparent 2px);
  background-size:36px 36px;background-position:0 0,center 0;
  animation:bootB1Grid 1400ms linear 220ms infinite both}
/* 全像淡入：先閃兩下（像投影對焦），再穩定在中等亮度（細格、低飽和洋紅，不搶視窗） */
@keyframes bootB1Floor{
  0%{visibility:hidden}20%{visibility:visible}35%{visibility:hidden}45%{visibility:visible}100%{visibility:visible}}
@keyframes bootB1FloorIn{
  0%{opacity:0;clip-path:inset(0 0 100% 0)}
  100%{opacity:.85;clip-path:inset(0 0 0 0)}}
/* 地板流動：青色橫線朝觀者移動一格為一循環 */
@keyframes bootB1Grid{to{background-position:0 36px,center 0}}
/* 全像掃描光：600–1000ms 一道青白光帶從地平線往觀者掃過地板一次（越近越粗、越亮後淡出） */
.boot-floor::after{content:"";position:absolute;left:0;right:0;top:0;height:48px;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(124,255,233,.25) 35%,rgba(225,255,252,.9) 62%,rgba(255,79,216,.25) 80%,transparent 100%);
  transform-origin:50% 0;
  animation:bootB1Sweep 400ms cubic-bezier(.4,0,.75,.75) 600ms both}
@keyframes bootB1Sweep{
  0%{transform:translateY(-24px) scaleY(.25);opacity:0}
  12%{opacity:1}
  80%{opacity:1}
  100%{transform:translateY(300px) scaleY(1.8);opacity:0}}

/* ── 地平線光帶：手機 y546、電腦 y510（量測框 4px，可見的只是一條 1px 像素虛線） ──
   像投影機的出光縫：LCD 青、2px 間隔的像素點線，光暈很淡。 */
.boot-horizon{position:absolute;left:0;right:0;top:64.7%;height:4px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(190,255,246,.95) 0 6px,rgba(124,255,233,.25) 6px 8px) 0 50%/100% 2px no-repeat;
  filter:drop-shadow(0 0 3px rgba(43,246,255,1)) drop-shadow(0 0 12px rgba(43,246,255,.6));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  animation:bootB1Horizon 300ms cubic-bezier(.2,.8,.2,1) 220ms both,bootB1Slit 420ms ease-out 580ms both,bootB1Ready 220ms ease-out 1050ms both}
/* 出光縫上方極淡的光（投影往上溢出的一點青） */
.boot-horizon::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:36px;pointer-events:none;
  background:linear-gradient(0deg,rgba(43,246,255,.24),transparent);transform-origin:50% 100%;
  animation:bootB1ReadyGlow 260ms ease-out 1050ms both}
/* 地板上的全像反光：視窗投影在地板上的一片淡青色光池（帶橫紋），持續存在、緩慢呼吸，填補手機下半部 */
.boot-horizon::before{content:"";position:absolute;left:50%;top:4px;width:min(92vw,760px);height:min(230px,26vh);transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(124,255,233,.3),rgba(124,255,233,.1) 55%,transparent 100%);
  -webkit-mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.35) 2px 5px);mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.35) 2px 5px);
  animation:bootB1Pool 300ms ease-out 300ms both,bootB1Breath 900ms ease-in-out 600ms 2 alternate both}
@keyframes bootB1Pool{0%{opacity:0;transform:translateX(-50%) scaleY(.2)}100%{opacity:1;transform:translateX(-50%)}}
@keyframes bootB1Breath{0%{filter:none}100%{filter:brightness(1.5)}}
/* READY（1050ms）：出光縫與光暈同步閃一下霓虹（呼應標誌閃光），只閃一次 */
@keyframes bootB1Ready{
  0%{filter:drop-shadow(0 0 3px rgba(43,246,255,1)) drop-shadow(0 0 12px rgba(43,246,255,.6))}
  30%{filter:drop-shadow(0 0 3px rgba(43,246,255,1)) drop-shadow(0 0 10px rgba(43,246,255,1)) drop-shadow(0 0 22px rgba(255,79,216,.85))}
  100%{filter:drop-shadow(0 0 3px rgba(43,246,255,1)) drop-shadow(0 0 12px rgba(43,246,255,.6))}}
@keyframes bootB1ReadyGlow{
  0%{transform:none;filter:none}30%{transform:scaleY(2.6);filter:brightness(2.4)}100%{transform:none;filter:none}}
/* 光帶從中心向兩側點亮 */
/* 掃描光出發時，出光縫亮一下再回穩 */
@keyframes bootB1Slit{
  0%{background-size:100% 2px}25%{background-size:100% 4px}100%{background-size:100% 2px}}
@keyframes bootB1Horizon{
  0%{opacity:0;transform:scaleX(0)}
  100%{opacity:1;transform:none}}

/* ── 掃描線＋CRT 暗角＋LCD 雜訊＋一次刷新光帶（壓在背景最上層、視窗之下，不影響閱讀） ── */
.boot-scan{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 95% at 50% 50%,transparent 60%,rgba(0,0,0,.38) 100%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  animation:bootB1Flicker 1.2s steps(6,end) 200ms 1 both}
/* LCD 雜訊：青色像素噪點，2 倍放大成方塊，跳動 3 輪後停在最後一格 */
.boot-scan::before{content:"";position:absolute;inset:0;opacity:.09;image-rendering:pixelated;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .49 0 0 0 0 1 0 0 0 0 .91 0 0 0 2.2 -1.1'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/192px 192px;
  animation:bootB1Noise 480ms steps(4,end) 200ms 3 both}
@keyframes bootB1Noise{
  0%{background-position:0 0}25%{background-position:-64px 38px}50%{background-position:52px -90px}75%{background-position:-118px -24px}100%{background-position:0 0}}
/* 訊息碎片：像全像投影的像素對話框／訊息卡輪廓，在視窗上方（電腦版在兩側）淡淡漂浮、慢慢往上飄，
   呼應標誌「拾起訊息」。手機：視窗上方 5 個＋視窗下方地板上 2 個；電腦：視窗左右各 3–4 個、左右平衡。只是輪廓與色塊，沒有文字；透明度低、加全像橫紋，不干擾閱讀。
   （原本的刷新光帶拿掉，改由地板的全像掃描光負責動態） */
.boot-scan::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='44' viewBox='0 0 28 22' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 1.5h25v13h-15l-5 5v-5h-5z' fill='%237CFFE9' fill-opacity='.08' stroke='%237CFFE9' stroke-opacity='.8'/%3E%3Cpath d='M5 5h11v2H5zM5 9h16v2H5z' fill='%237CFFE9' fill-opacity='.6'/%3E%3C/svg%3E") 34px 92px/56px 44px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='36' viewBox='0 0 22 18' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 1.5h19v10h-4v4l-4-4h-11z' fill='%23FF4FD8' fill-opacity='.08' stroke='%23FF8BE6' stroke-opacity='.8'/%3E%3Cpath d='M5 5h3v3H5zM10 5h3v3h-3zM15 5h2v3h-2z' fill='%23FF8BE6' fill-opacity='.75'/%3E%3C/svg%3E") 296px 52px/44px 36px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='36' viewBox='0 0 24 18' shape-rendering='crispEdges'%3E%3Crect x='.5' y='.5' width='23' height='17' fill='%237CFFE9' fill-opacity='.06' stroke='%23C4B5FF' stroke-opacity='.85'/%3E%3Cpath d='M1 1h22v4H1z' fill='%23C4B5FF' fill-opacity='.55'/%3E%3Cpath d='M4 8h2v2H4zM8 8h10v2H8zM4 12h2v2H4zM8 12h7v2H8z' fill='%237CFFE9' fill-opacity='.6'/%3E%3C/svg%3E") 252px 160px/48px 36px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 12 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h2v2H0zM5 0h2v2H5zM10 0h2v2h-2z' fill='%237CFFE9' fill-opacity='.8'/%3E%3C/svg%3E") 120px 178px/24px 8px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='36' viewBox='0 0 22 18' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 1.5h19v10h-4v4l-4-4h-11z' fill='%23FF4FD8' fill-opacity='.08' stroke='%23FF8BE6' stroke-opacity='.8'/%3E%3Cpath d='M5 5h3v3H5zM10 5h3v3h-3zM15 5h2v3h-2z' fill='%23FF8BE6' fill-opacity='.75'/%3E%3C/svg%3E") 70px 30px/33px 27px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='36' viewBox='0 0 24 18' shape-rendering='crispEdges'%3E%3Crect x='.5' y='.5' width='23' height='17' fill='%237CFFE9' fill-opacity='.06' stroke='%23C4B5FF' stroke-opacity='.85'/%3E%3Cpath d='M1 1h22v4H1z' fill='%23C4B5FF' fill-opacity='.55'/%3E%3Cpath d='M4 8h2v2H4zM8 8h10v2H8zM4 12h2v2H4zM8 12h7v2H8z' fill='%237CFFE9' fill-opacity='.6'/%3E%3C/svg%3E") 28px 612px/40px 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='44' viewBox='0 0 28 22' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 1.5h25v13h-15l-5 5v-5h-5z' fill='%237CFFE9' fill-opacity='.08' stroke='%237CFFE9' stroke-opacity='.8'/%3E%3Cpath d='M5 5h11v2H5zM5 9h16v2H5z' fill='%237CFFE9' fill-opacity='.6'/%3E%3C/svg%3E") 306px 668px/48px 38px no-repeat;
  -webkit-mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.45) 2px 3px);mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.45) 2px 3px);
  animation:bootB1FragIn 360ms steps(3,end) 320ms both,bootB1FragUp 1100ms linear 320ms both}
@keyframes bootB1FragIn{0%{opacity:0}100%{opacity:.72}}
@keyframes bootB1FragUp{0%{transform:translateY(14px)}100%{transform:translateY(-22px)}}
/* 極輕微閃爍：透明度只在 .85–1 之間跳動，播一次即停 */
@keyframes bootB1Flicker{
  0%{opacity:.85}20%{opacity:1}40%{opacity:.92}60%{opacity:1}80%{opacity:.95}100%{opacity:1}}

/* ── CRT 開機光線：畫面垂直中線（手機 y421、電腦 y399，高 2px） ── */
.boot-crt{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.boot-line{display:block;width:100%;height:2px;background:#fff;
  box-shadow:0 0 4px 1px #fff,0 0 14px 3px rgba(43,246,255,.9),0 0 40px 8px rgba(43,246,255,.45);
  transform-origin:50% 50%;
  animation:bootB1Line 260ms linear 0ms both}
/* 0–120ms 左右拉開；120–180ms 維持亮線並交棒給閃白；之後淡掉 */
@keyframes bootB1Line{
  0%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.16,.9,.3,1)}
  46%{transform:scaleX(1);opacity:1}
  62%{transform:scaleX(1) scaleY(2.5);opacity:1}
  100%{transform:scaleX(1) scaleY(6);opacity:0}}
/* 中心亮點：白線出現前的一顆青白光點，0–100ms */
.boot-crt::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#fff;box-shadow:0 0 12px 4px rgba(43,246,255,.9),0 0 36px 12px rgba(43,246,255,.4);
  animation:bootB1Dot 120ms ease-out 0ms both}
@keyframes bootB1Dot{
  0%{opacity:1;transform:scale(.6)}
  50%{opacity:1;transform:scale(1.4,.5)}
  100%{opacity:0;transform:scale(3,.2)}}
/* 閃白：120–260ms 由中線上下展開成整片白光（邊緣帶青），再淡出露出青色桌面 */
.boot-crt::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(180deg,rgba(160,250,255,.0) 0%,rgba(200,252,255,.85) 30%,#fff 50%,rgba(200,252,255,.85) 70%,rgba(160,250,255,0) 100%);
  transform-origin:50% 50%;
  animation:bootB1Flash 140ms linear 120ms both}
@keyframes bootB1Flash{
  0%{transform:scaleY(.004);opacity:0}
  12%{transform:scaleY(.03);opacity:1;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  40%{transform:scaleY(1.15);opacity:.85;animation-timing-function:cubic-bezier(.2,.6,.3,1)}
  100%{transform:scaleY(1.4);opacity:0}}

/* ── 電腦版版位 ── */
@media (min-width:768px){
  .boot-floor{height:36%;perspective:280px}
  .boot-horizon{top:63.75%}
  .boot-scan::after{background-position:
    calc(50% - 430px) 232px,
    calc(50% + 390px) 178px,
    calc(50% - 320px) 392px,
    calc(50% - 250px) 476px,
    calc(50% - 520px) 140px,
    calc(50% + 490px) 318px,
    calc(50% + 310px) 430px;
    background-size:84px 66px,66px 54px,72px 54px,36px 12px,48px 39px,66px 50px,76px 60px}
}