/* Giao diện hero UNIT-07: nền tối, robot phủ full màn, chữ overlay trái, telemetry phải
   Bố cục = 3 tầng chồng nhau: canvas (z0) · lớp phủ trang trí (z1) · UI chữ (z2+) */

/* --- Biến & reset --- */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#05070c;
  --fg:#f2f5ff;
  --dim:#79839e;
  --accent:#63f0ff;              /* xanh neon lấy từ vạch mắt robot */
  --accent-dim:rgba(99,240,255,.16);
  --line:rgba(255,255,255,.09);
  /* Bộ chữ tech: Chakra Petch (vát góc, chất kỹ thuật) cho thân,
     Orbitron cho số hiệu lớn, IBM Plex Mono cho telemetry/nhãn */
  --font:"Chakra Petch",-apple-system,"SF Pro Display",sans-serif;
  --display:"Orbitron","Chakra Petch",sans-serif;
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,monospace;
  /* Độ vát góc HUD sci-fi — dùng chung cho nút/panel để cả trang cùng một ngôn ngữ hình khối */
  --bevel:11px;      /* vát nút lớn */
  --bevel-sm:7px;    /* vát nút nhỏ, chip */
}
html,body{height:100%}
body{
  background:var(--bg);color:var(--fg);font-family:var(--font);
  overflow:hidden;cursor:crosshair;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

.hero{position:relative;width:100vw;height:100vh;overflow:hidden}

/* --- Tầng 0: canvas robot --- */
#canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  will-change:opacity;
  /* hiện dần sau khi nạp xong, tránh chớp đen */
  opacity:0;transform:scale(1.04);
  transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.16,1,.3,1);
}
body.ready #canvas{opacity:1;transform:scale(1)}

/* --- Tầng 1: lớp phủ trang trí (không chắn chuột) --- */
.layer{position:absolute;inset:0;pointer-events:none;z-index:1}

/* Tối bên trái cho chữ nổi + tối rìa quanh khung */
.vignette{
  background:
    linear-gradient(90deg,rgba(5,7,12,.94) 0%,rgba(5,7,12,.62) 30%,rgba(5,7,12,.05) 58%,transparent 70%),
    linear-gradient(0deg,rgba(5,7,12,.8) 0%,transparent 30%),
    radial-gradient(130% 95% at 50% 45%,transparent 42%,rgba(5,7,12,.88) 100%);
}
/* Hạt film: khử banding ở vùng chuyển tối, cho đỡ "nhựa" */
.grain{
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 4 bracket góc màn hình — khung ngắm HUD */
.brackets{z-index:3}
.brackets i{position:absolute;width:38px;height:38px;border:1px solid rgba(99,240,255,.32)}
.brackets i:nth-child(1){top:88px;left:clamp(22px,4vw,56px);border-right:0;border-bottom:0}
.brackets i:nth-child(2){top:88px;right:clamp(22px,4vw,56px);border-left:0;border-bottom:0}
.brackets i:nth-child(3){bottom:78px;left:clamp(22px,4vw,56px);border-right:0;border-top:0}
.brackets i:nth-child(4){bottom:78px;right:clamp(22px,4vw,56px);border-left:0;border-top:0}
body.ready .brackets{opacity:1}
.brackets{opacity:0;transition:opacity 1.2s ease 1.4s}

/* Vạch quét ngang rất mờ */
.scan{
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
  opacity:.5;
}

/* --- Thanh nav --- */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(22px,4vw,56px);
  opacity:0;transform:translateY(-12px);
  transition:opacity .9s ease .3s,transform .9s cubic-bezier(.16,1,.3,1) .3s;
}
body.ready .nav{opacity:1;transform:none}

.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.26em;font-weight:500}
.brand b{font-weight:300;color:var(--dim);margin-left:-4px}
/* chấm nhịp báo hệ thống sống */
.mark{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.nav-links{display:flex;gap:34px;font-size:12.5px;letter-spacing:.13em;font-weight:500;text-transform:uppercase;color:var(--dim)}
.nav-links a{position:relative;padding:4px 0;transition:color .25s}
.nav-links a:hover{color:var(--fg)}
/* gạch chân chạy từ trái khi hover */
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);
  transition:width .3s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover::after{width:100%}

/* Nút servo */
.snd{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  background:rgba(255,255,255,.06);border:0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--dim);padding:10px 16px;
  clip-path:polygon(var(--bevel-sm) 0, 100% 0, 100% calc(100% - var(--bevel-sm)),
                    calc(100% - var(--bevel-sm)) 100%, 0 100%, 0 var(--bevel-sm));
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  transition:border-color .3s,color .3s,background .3s;
}
.snd:hover{border-color:rgba(99,240,255,.5);color:var(--accent)}
.wave{display:flex;align-items:center;gap:2px;height:11px}
.wave i{width:2px;height:3px;background:currentColor;border-radius:2px;transition:height .2s}
body.sound-on .snd{color:var(--accent);border-color:rgba(99,240,255,.45);background:var(--accent-dim)}
body.sound-on .wave i{animation:eq .9s ease-in-out infinite}
body.sound-on .wave i:nth-child(2){animation-delay:.15s}
body.sound-on .wave i:nth-child(3){animation-delay:.3s}
body.sound-on .wave i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}

/* --- Nội dung chữ bên trái --- */
.content{
  position:absolute;left:clamp(22px,4.6vw,80px);top:50%;transform:translateY(-50%);
  max-width:min(44vw,520px);z-index:4;
}
/* Mỗi phần tử trồi lên lệch nhau cho có nhịp */
.content>*{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}
body.ready .content>*{opacity:1;transform:none}
body.ready .eyebrow{transition-delay:.45s}
body.ready h1{transition-delay:.58s}
body.ready .sub{transition-delay:.72s}
body.ready .cta{transition-delay:.86s}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--accent);
  padding:8px 15px;border:0;
  clip-path:polygon(var(--bevel-sm) 0, 100% 0, 100% calc(100% - var(--bevel-sm)),
                    calc(100% - var(--bevel-sm)) 100%, 0 100%, 0 var(--bevel-sm));
  background:rgba(99,240,255,.1);
}
.pip{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:blink 1.8s ease-in-out infinite}

h1{
  margin:22px 0 0;line-height:.86;font-family:var(--display);
  font-weight:900;letter-spacing:-.01em;
  font-size:clamp(60px,9.6vw,148px);
  display:flex;align-items:baseline;gap:.08em;
}
.l1{background:linear-gradient(180deg,#fff 30%,#9fb4c8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* UNIT đặc + 07 chỉ viền -> tạo tương phản thị giác */
/* số hiệu: Chakra Petch thay Orbitron — số 0 của Orbitron có gạch chéo, ở dạng viền rỗng
   trông thành ô vuông khó đọc */
.l2{
  font-family:var(--font);font-weight:700;color:transparent;
  -webkit-text-stroke:1.5px var(--accent);
  text-shadow:0 0 50px rgba(99,240,255,.5);
  letter-spacing:-.02em;
}
.sub{
  margin-top:24px;max-width:390px;
  font-size:clamp(14px,1.1vw,16px);line-height:1.72;color:var(--dim);font-weight:300;letter-spacing:.012em;
}

/* Nút */
.cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
/* Nút HUD: vát góc trên-trái và dưới-phải (chéo nhau) cho ra dáng bảng điều khiển.
   clip-path cắt cả nền lẫn viền, nên viền phải vẽ bằng lớp ::before đặt dưới (xem .btn.ghost). */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;
  clip-path:polygon(var(--bevel) 0, 100% 0, 100% calc(100% - var(--bevel)),
                    calc(100% - var(--bevel)) 100%, 0 100%, 0 var(--bevel));
  font-size:12.5px;letter-spacing:.14em;font-weight:600;text-transform:uppercase;white-space:nowrap;
  transition:transform .3s cubic-bezier(.16,1,.3,1),filter .3s,color .3s,background .3s;
}
.btn.primary{background:var(--accent);color:#02171d;font-weight:700;overflow:hidden}
/* vệt sáng quét ngang khi hover — chất máy móc quét tín hiệu */
.btn.primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn.primary:hover::after{transform:translateX(120%);transition:transform .7s cubic-bezier(.3,.8,.3,1)}
.btn.primary:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 26px rgba(99,240,255,.5))}
.arrow{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn.primary:hover .arrow{transform:translateX(5px)}

/* Nút viền: lớp ::before là "viền" (nền accent bị nền thân đè lên, chừa 1px mép) */
.btn.ghost{
  color:var(--fg);background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.btn.ghost::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.16);
  clip-path:inherit;
  transition:background .3s;
}
/* thân nút thu vào 1px để lộ viền ::before.
   Dùng backdrop-filter (không phải màu đặc) nên nút vẫn trong, thấy robot mờ phía sau */
.btn.ghost::after{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:rgba(10,14,22,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  clip-path:polygon(calc(var(--bevel) - 1px) 0, 100% 0, 100% calc(100% - var(--bevel) + 1px),
                    calc(100% - var(--bevel) + 1px) 100%, 0 100%, 0 calc(var(--bevel) - 1px));
}
.btn.ghost:hover{color:var(--accent);transform:translateY(-2px)}
/* dấu gạch nhỏ trước chữ, sáng lên khi hover */
.btn.ghost>span::before{
  content:"";display:inline-block;width:12px;height:1px;margin-right:11px;vertical-align:middle;
  background:currentColor;opacity:.45;transition:width .3s cubic-bezier(.16,1,.3,1),opacity .3s;
}
.btn.ghost:hover>span::before{width:20px;opacity:1}
.btn.ghost:hover::before{background:var(--accent)}

/* --- Bảng telemetry bên phải --- */
/* Panel telemetry: khối vát góc chéo, viền vẽ bằng ::before nằm dưới (clip-path cắt mất border) */
.telemetry{
  position:absolute;right:clamp(22px,4vw,56px);top:50%;transform:translateY(-50%);
  z-index:4;width:196px;--bv:16px;
  padding:18px 18px 16px;
  clip-path:polygon(var(--bv) 0, 100% 0, 100% calc(100% - var(--bv)),
                    calc(100% - var(--bv)) 100%, 0 100%, 0 var(--bv));
  background:rgba(8,11,18,.55);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  font-family:var(--mono);
  opacity:0;transition:opacity 1s ease 1s;
}
.telemetry::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(150deg,rgba(99,240,255,.5),rgba(255,255,255,.07) 45%);
  clip-path:inherit;
}
.telemetry::after{
  content:"";position:absolute;inset:1px;z-index:-1;background:#080b12;
  clip-path:polygon(calc(var(--bv) - 1px) 0, 100% 0, 100% calc(100% - var(--bv) + 1px),
                    calc(100% - var(--bv) + 1px) 100%, 0 100%, 0 calc(var(--bv) - 1px));
}
/* nhãn nhỏ trên đầu panel */
.telemetry .cap{
  display:flex;align-items:center;gap:7px;
  font-size:8.5px;letter-spacing:.24em;color:var(--accent);
  padding-bottom:11px;margin-bottom:4px;
  border-bottom:1px solid rgba(99,240,255,.18);
}
.telemetry .cap::before{content:"";width:14px;height:1px;background:var(--accent)}
body.ready .telemetry{opacity:1}
.telemetry .row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);
  font-size:9.5px;letter-spacing:.16em;color:var(--dim);
}
.telemetry .row:last-of-type{border-bottom:0}
.telemetry b{font-family:var(--display);color:var(--fg);font-weight:700;font-size:12px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
/* servo đang kêu thì số nhảy sang màu accent */
.telemetry b.live{color:var(--accent)}
/* Thanh trượt: chấm chạy theo góc xoay đầu */
.track{position:relative;height:2px;margin-top:14px;background:rgba(255,255,255,.1);border-radius:2px}
/* chấm chạy bằng transform (không đụng layout) -> mượt, xem updateHUD trong app.js */
.track i{
  position:absolute;top:50%;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);
  will-change:transform;
}

/* --- Gợi ý thao tác dưới đáy --- */
.hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--dim);
  opacity:0;transition:opacity 1s ease 1.2s;
}
body.ready .hint{opacity:1}
/* icon con trỏ lắc qua lại gợi ý thao tác */
.cursor-ico{
  width:15px;height:15px;border:1px solid currentColor;border-radius:50%;position:relative;
  animation:sway 2.6s ease-in-out infinite;
}
.cursor-ico::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent)}
@keyframes sway{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}

/* --- Màn hình nạp --- */
.loader{
  /* z70 = TRÊN màn boot (z60): thứ tự đúng là nạp (%) -> rồi mới tới màn chào */
  position:absolute;inset:0;z-index:70;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .8s ease,visibility .8s;
}
.loader.hide{opacity:0;visibility:hidden}
/* --- Loader: KHUNG ĐỨNG YÊN, chỉ có VỆT SÁNG CHẠY DỌC THEO VIỀN ---
   Cách làm: khung vát góc (clip-path) không hề xoay; bên trong đặt một lớp conic-gradient
   quay tròn, bị chính clip-path của khung cắt lại -> mắt chỉ thấy vệt sáng trượt quanh mép.
   ::after là tấm nền đen thu nhỏ 2px, che phần giữa nên chỉ còn lại đúng đường viền.
   (Bản cũ xoay NGUYÊN cái khung vát góc -> nhìn lắc lư rất khó chịu.) */
.ring{
  width:52px;height:52px;position:relative;overflow:hidden;
  background:rgba(99,240,255,.13);           /* viền nền mờ, luôn thấy được hình khung */
  filter:drop-shadow(0 0 7px rgba(99,240,255,.35));   /* vệt sáng hắt ra ngoài mép */
  clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.ring::before{
  content:"";position:absolute;inset:-50%;        /* to hơn khung để xoay không hở góc */
  background:conic-gradient(from 0deg,
    transparent 0deg, transparent 205deg,
    rgba(99,240,255,.30) 268deg, rgba(99,240,255,.85) 330deg, var(--accent) 350deg,
    rgba(99,240,255,.22) 358deg, transparent 360deg);
  animation:ringRun 1.8s linear infinite;
}
.ring::after{
  content:"";position:absolute;inset:2.5px;background:var(--bg);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
@keyframes ringRun{to{transform:rotate(360deg)}}
.loader .bar{width:190px;height:3px;background:rgba(255,255,255,.1);overflow:hidden;
  clip-path:polygon(2px 0,100% 0,calc(100% - 2px) 100%,0 100%)}
.loader .bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 12px var(--accent);transition:width .18s ease}
#status{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--dim)}

/* --- Màn hẹp: ẩn telemetry, chữ dồn xuống dưới --- */
@media (max-width:900px){
  .telemetry{display:none}
  .nav-links{display:none}
}
@media (max-width:760px){
  .content{left:24px;right:24px;max-width:none;top:auto;bottom:104px;transform:none}
  .vignette{background:linear-gradient(0deg,rgba(5,7,12,.96) 0%,rgba(5,7,12,.45) 42%,transparent 72%)}
  h1{font-size:clamp(58px,19vw,96px)}
  .hint{display:none}
}

/* ============================================================
   POLISH VISUAL — khí quyển & màn chào robot
   Thứ tự tầng: canvas robot (z0) < khói/tia (z1) < #fx hạt (z2)
                < UI chữ (z3+) < màn chào boot (z60)
   ============================================================ */

/* --- Tầng hạt: bụi + tàn lửa, do fx.js vẽ (xem file đó để hiểu luật hạt) --- */
#fx{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:2;
  opacity:0;transition:opacity 2.2s ease 1.1s;   /* hiện sau robot, cho vào chậm rãi */
}
body.ready #fx{opacity:1}

/* --- Khói thể tích: 2 đám mây gradient trôi chậm, lệch pha nhau ---
   Dùng blur lớn + mix-blend screen để khói ăn sáng vào nền, không thành vệt xám bẩn.
   KHÔNG tăng opacity quá .5: khói đậm sẽ nuốt mất chi tiết mặt robot. */
.fog{z-index:1;mix-blend-mode:screen;opacity:0;transition:opacity 2.4s ease .8s}
body.ready .fog{opacity:.72}
.fog::before,.fog::after{
  content:"";position:absolute;border-radius:50%;
  filter:blur(110px);will-change:transform;
}
.fog::before{
  width:52vw;height:38vh;left:-8vw;bottom:-10vh;
  background:radial-gradient(circle at 50% 50%,rgba(99,240,255,.17),rgba(99,240,255,.05) 45%,transparent 70%);
  animation:fogA 34s ease-in-out infinite alternate;
}
.fog::after{
  width:46vw;height:34vh;right:-10vw;top:-8vh;
  background:radial-gradient(circle at 50% 50%,rgba(126,150,255,.13),rgba(99,240,255,.04) 48%,transparent 72%);
  animation:fogB 46s ease-in-out infinite alternate;
}
@keyframes fogA{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(7vw,-4vh,0) scale(1.12)}
  100%{transform:translate3d(-3vw,3vh,0) scale(.96)}
}
@keyframes fogB{
  0%  {transform:translate3d(0,0,0) scale(1.05)}
  50% {transform:translate3d(-8vw,5vh,0) scale(.92)}
  100%{transform:translate3d(4vw,-3vh,0) scale(1.15)}
}

/* --- Tia sáng (god ray): 2 dải sáng chéo rất mờ, cho cảm giác có nguồn sáng ngoài khung --- */
.rays{z-index:1;opacity:0;transition:opacity 3s ease 1.4s;mix-blend-mode:screen}
body.ready .rays{opacity:.42}
.rays i{
  position:absolute;top:-30%;height:170%;width:18vw;
  background:linear-gradient(to bottom,transparent,rgba(160,220,255,.10) 30%,rgba(160,220,255,.05) 60%,transparent);
  filter:blur(46px);transform-origin:top center;
}
.rays i:nth-child(1){left:12%;transform:rotate(14deg);animation:rayB 17s ease-in-out infinite alternate}
.rays i:nth-child(2){left:58%;width:26vw;transform:rotate(-11deg);animation:rayB 23s ease-in-out infinite alternate-reverse}
@keyframes rayB{0%{opacity:.5}100%{opacity:1}}

/* ============================================================
   MÀN CHÀO BOOT — robot "khởi động" rồi lộ ra
   NGUYÊN TẮC: không bắt người xem đợi vô cớ. Nạp xong là vào thẳng phần đẹp,
   tổng màn chào chỉ ~1.7s và robot đã hiện ra ngay từ giây 0.35.
   Trình tự (mốc tính TỪ LÚC body.ready = nạp xong frame):
     0.35s vạch quét ngang chạy từ trên xuống = "wipe" lộ robot
     0.78s chớp sáng 1 nhịp (power-on)
     1.25s màn chào tan
     1.70s robot tự quét đầu trái→phải→giữa 1 lượt (app.js: startGreet)
   Lúc ĐANG NẠP thì boot chỉ là nền đen, .loader (z70) nằm trên lo thanh %.
   ============================================================ */
.boot{
  /* KHÔNG đặt background ở đây: nền đen phải nằm ở .wipe thì clip-path mới "kéo màn" lộ
     robot ra được. Trước đây để nền đen ở cha -> wipe chạy mà màn hình vẫn đen kịt. */
  position:absolute;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
/* Vạch quét: dải sáng mỏng chạy dọc màn, kèm phần dưới nó bị "cắt" lộ robot */
.boot .wipe{
  position:absolute;left:0;right:0;top:0;height:100%;
  background:var(--bg);
  /* clip-path chạy từ full xuống 0 -> phần bị bỏ đi chính là chỗ robot hiện ra */
  clip-path:inset(0 0 0 0);
}
.boot .line{
  position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 26px 4px rgba(99,240,255,.55);
}
/* ĐÃ BỎ khối .log (4 dòng "KHỞI ĐỘNG LÕI THỊ GIÁC…"):
   nạp xong rồi mà còn bắt người xem ngồi đọc chữ ~2s nữa là bắt đợi vô cớ.
   Giờ nạp xong là VÀO THẲNG phần đẹp: vạch quét lộ robot. */

/* Chớp sáng power-on phủ toàn màn */
.boot .flash{position:absolute;inset:0;background:var(--accent);opacity:0;mix-blend-mode:screen}

/* Chạy trình tự khi body.ready (frame đã nạp xong) */
body.ready .boot .wipe  {animation:wipeDown .95s cubic-bezier(.7,0,.3,1) .35s forwards}
body.ready .boot .line  {animation:lineDown .95s cubic-bezier(.7,0,.3,1) .35s forwards}
body.ready .boot .flash {animation:flash .45s ease .78s forwards}
body.ready .boot        {animation:bootOut .45s ease 1.25s forwards}
@keyframes wipeDown{to{clip-path:inset(100% 0 0 0)}}
@keyframes lineDown{0%{opacity:1;top:0}92%{opacity:1}100%{opacity:0;top:100%}}
@keyframes flash{0%{opacity:0}22%{opacity:.16}100%{opacity:0}}
@keyframes bootOut{to{opacity:0;visibility:hidden}}

/* Người dùng tắt hiệu ứng chuyển động -> bỏ hẳn màn chào, vào thẳng nội dung */
/* ?shot=1 (chụp nghiệm thu tự động): bỏ màn chào để công cụ chụp thấy ngay trạng thái cuối */
body.shot .boot{display:none}

@media (prefers-reduced-motion:reduce){
  .boot{display:none}
  .fog::before,.fog::after,.rays i{animation:none}
}

/* ?shot=1 — bỏ mọi độ trễ hiện dần để ảnh chụp ra ĐÚNG trạng thái cuối.
   Chỉ dùng cho công cụ nghiệm thu tự động, người dùng thật không bao giờ chạm vào. */
body.shot #canvas,body.shot #fx,body.shot .fog,body.shot .rays,
body.shot .content>*,body.shot .nav,body.shot .telemetry,body.shot .hint,body.shot .brackets{
  transition:none!important;animation-delay:0s!important;
  opacity:1!important;transform:none!important;
}
body.shot .rays{opacity:.55!important}
body.shot .loader{display:none!important}

/* --- Quầng sáng sau đầu robot + vòng HUD: tách robot khỏi nền, cho khối đầu "nổi" lên ---
   Vị trí bám theo chỗ đầu robot đứng (lệch phải ~62% ngang, ~34% dọc — khớp SHIFT_X của app.js).
   Cả hai đều nằm TRÊN canvas (z1) nhưng dùng screen blend nên chỉ cộng sáng, không che chi tiết. */
.halo{z-index:1;mix-blend-mode:screen;opacity:0;transition:opacity 2.6s ease 1.2s}
body.ready .halo{opacity:1}
.halo::before{      /* quầng sáng thở nhẹ sau gáy robot */
  content:"";position:absolute;left:62%;top:34%;width:46vw;height:46vw;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(99,240,255,.16) 0%,rgba(99,240,255,.05) 38%,transparent 66%);
  filter:blur(46px);animation:halo 7s ease-in-out infinite alternate;
}
@keyframes halo{0%{opacity:.6;transform:translate(-50%,-50%) scale(.94)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}

/* Vòng HUD mảnh quay chậm — gợi ý "hệ thống đang quét", đặt sau đầu robot */
.ring-hud{z-index:1;opacity:0;transition:opacity 2.6s ease 1.6s}
body.ready .ring-hud{opacity:.5}
.ring-hud i{
  position:absolute;left:62%;top:34%;border-radius:50%;
  transform:translate(-50%,-50%);border:1px solid rgba(99,240,255,.16);
}
.ring-hud i:nth-child(1){width:38vw;height:38vw;animation:spin 58s linear infinite;
  border-style:dashed;border-color:rgba(99,240,255,.13)}
.ring-hud i:nth-child(2){width:27vw;height:27vw;animation:spin 41s linear infinite reverse;
  border-color:rgba(99,240,255,.20);border-left-color:transparent;border-right-color:transparent}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}   /* chỉ dùng cho .ring-hud */

body.shot .halo,body.shot .ring-hud{opacity:1!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.halo::before,.ring-hud i{animation:none}}
@media (max-width:760px){.ring-hud{display:none}}

/* ?freeze=<giây> — ĐÓNG BĂNG màn chào ở một mốc để chụp kiểm (JS gắn animation-delay âm).
   Chỉ phục vụ nghiệm thu; không ảnh hưởng người dùng thật. */
body.freeze .boot *,body.freeze .boot{animation-play-state:paused!important}

/* --- Echo: hover tiêu đề -> bóng nhân bản (nét viền) DỘI XUỐNG DƯỚI chữ --- */
/* LƯU Ý kỹ thuật: .l1 tô chữ bằng background-clip:text, nghĩa là "chữ" chính là
   BACKGROUND của span. Vì vậy z-index:-1 KHÔNG dìm được echo xuống dưới chữ —
   nó vẫn vẽ đè lên. Cách xử lý: dịch echo xuống XA hơn chiều cao chữ và dùng
   mask cắt bỏ phần thân trên, nên chỉ còn phần đuôi ló ra BÊN DƯỚI tiêu đề. */
.title-echo{position:relative}
.title-echo .l1,.title-echo .l2{position:relative;display:inline-block}
.title-echo .l1::before,.title-echo .l1::after,
.title-echo .l2::before,.title-echo .l2::after{
  content:attr(data-t);
  position:absolute;left:0;top:0;
  /* ép về chữ rỗng ruột: huỷ mọi cách tô màu của bản gốc */
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:transparent;-webkit-text-stroke:1.3px var(--accent);
  /* .l2 gốc có text-shadow glow 50px, pseudo KẾ THỪA -> glow bị mask cắt thành vệt sáng. Tắt. */
  text-shadow:none;
  opacity:0;pointer-events:none;
  transform-origin:50% 0;
  /* chỉ chừa phần ĐUÔI dưới: thân trên bị cắt nên không chồng lên chữ gốc */
  -webkit-mask-image:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.55) 74%,#000 86%,rgba(0,0,0,.35) 100%);
          mask-image:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.55) 74%,#000 86%,rgba(0,0,0,.35) 100%);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),filter .5s;
  will-change:transform,opacity;
}
/* Bản dội gần: rõ hơn, nằm sát đáy chữ */
.title-echo:hover .l1::before,.title-echo:hover .l2::before,
.title-echo.force-echo .l1::before,.title-echo.force-echo .l2::before{
  opacity:.55;transform:translateY(.22em);
}
/* Bản dội xa: mờ hơn, xuống sâu hơn, trễ một nhịp -> ra chất "dội lại" */
.title-echo:hover .l1::after,.title-echo:hover .l2::after,
.title-echo.force-echo .l1::after,.title-echo.force-echo .l2::after{
  opacity:.24;transform:translateY(.34em);
  transition-delay:.08s;
}
/* Bản gốc chỉ sáng thêm chút — KHÔNG glitch, KHÔNG nhấp nháy */
.title-echo .l1,.title-echo .l2{transition:filter .45s ease}

@media (prefers-reduced-motion:reduce){
  .title-echo .l1::before,.title-echo .l1::after,
  .title-echo .l2::before,.title-echo .l2::after{transition:none}
}
/* Màn nhỏ: chữ đã to sẵn, echo dễ rối -> tắt */
@media (max-width:760px){
  .title-echo .l1::before,.title-echo .l1::after,
  .title-echo .l2::before,.title-echo .l2::after{display:none}
}