/* ==========================================================================
   Yingdian Smart Control — brand launch (standalone intro)
   Night-sky direction: deep space, stars-as-nodes, luminous emblem.
   Palette sampled from the logo: lime #B4DA64 / pale green #E4EFD6 / sage #9FB0A3
   ========================================================================== */

/* ---------- design tokens ---------- */
:root{
  --bg:#050B08;
  --ink:#EDF3E6;
  --ink-2:#C3D1C1;
  --muted:#849789;
  --line:rgba(226,240,214,.14);
  --line-soft:rgba(226,240,214,.08);
  --lime:#B4DA64;
  --lime-hi:#D7F0A4;
  --leaf:#8FC06E;

  --sans:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Cascadia Mono","SF Mono","JetBrains Mono",ui-monospace,"Consolas","Menlo",monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:rgba(180,218,100,.35);color:#F4F9EC}
:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:4px}

.mono{
  font-family:var(--mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* ==========================================================================
   BOOT
   ========================================================================== */
.boot{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:radial-gradient(ellipse 68% 60% at 50% 44%,#0B1911 0%,#07110C 52%,#040907 100%);
  isolation:isolate;
}

/* ---- background layers ---- */
.boot__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.boot__bg::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 72% at 50% 44%,transparent 48%,rgba(0,0,0,.55) 100%);
}

.boot__halo{
  position:absolute;left:50%;top:50%;
  width:min(1000px,100vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(130,195,95,.21) 0%,rgba(80,150,95,.075) 38%,rgba(80,150,95,0) 70%);
  filter:blur(48px);
  opacity:0;
}
.boot__mesh{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;
  -webkit-mask-image:radial-gradient(circle at 50% 46%,transparent 0%,transparent 13%,#000 44%);
  mask-image:radial-gradient(circle at 50% 46%,transparent 0%,transparent 13%,#000 44%);
}
.boot__spot{
  position:absolute;left:50%;top:-26%;width:min(1200px,120vw);height:78%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(110,200,175,.12),rgba(110,200,175,0) 70%);
  opacity:.85;
}
.boot__grain{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:.07;
  mix-blend-mode:overlay;
}

/* ---- print-style frame ---- */
.boot__chrome{position:absolute;inset:0;z-index:1;pointer-events:none}
.crop{position:absolute;width:13px;height:13px;opacity:0}
.crop::before,.crop::after{content:"";position:absolute;background:rgba(226,240,214,.30)}
.crop::before{width:13px;height:1px}
.crop::after{width:1px;height:13px}
.crop--tl{left:24px;top:24px}
.crop--tr{right:24px;top:24px}
.crop--tr::before,.crop--br::before{right:0}
.crop--tr::after,.crop--br::after{right:0}
.crop--bl{left:24px;bottom:24px}
.crop--bl::before,.crop--br::before{bottom:0}
.crop--bl::after,.crop--br::after{bottom:0}
.crop--br{right:24px;bottom:24px}

.vert{
  position:absolute;top:50%;
  writing-mode:vertical-rl;
  font-family:var(--mono);
  font-size:8.5px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(226,240,214,.22);
  white-space:nowrap;
  opacity:0;
}
.vert--l{left:26px;transform:translateY(-50%) rotate(180deg)}
.vert--r{right:26px;transform:translateY(-50%)}

/* ---- header ---- */
.boot__top{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:32px clamp(24px,3.4vw,46px);
  opacity:0;
}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{height:24px;width:auto}
.brand__name{font-size:13px;font-weight:600;letter-spacing:.16em;color:var(--ink)}
.brand__rule{width:1px;height:11px;background:var(--line);margin:0 2px}
.brand__en{color:var(--muted);font-size:9px;letter-spacing:.28em}
.boot__meta{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:9px;letter-spacing:.24em}
.meta-rule{width:34px;height:1px;background:var(--line)}
.live-dot{
  width:5px;height:5px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(180,218,100,.45);
  animation:dotPulse 2.8s ease-out infinite;
}

/* ---- stage ---- */
.boot__stage{
  position:relative;z-index:2;
  display:grid;place-content:center;justify-items:center;
  gap:clamp(20px,2.6vh,34px);
  padding:0 24px;
}
.boot__scan{
  position:absolute;left:50%;top:50%;
  width:min(640px,74vw);height:1px;
  transform:translate(-50%,-50%) scaleX(0);
  background:linear-gradient(90deg,transparent,rgba(180,218,100,.35),#D7F0A4,rgba(180,218,100,.35),transparent);
  box-shadow:0 0 18px rgba(180,218,100,.45);
  opacity:0;
  pointer-events:none;
}
/* completion bloom */
.boot__stage::after{
  content:"";
  position:absolute;left:50%;top:50%;z-index:-1;
  width:min(720px,86vw);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%) scale(.82);
  background:radial-gradient(circle,rgba(170,220,110,.15),rgba(120,190,95,.05) 45%,transparent 70%);
  filter:blur(20px);
  opacity:0;pointer-events:none;
  transition:opacity .9s ease,transform 1.4s var(--ease);
}
.boot.is-ready .boot__stage::after{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
/* completion ring */
.boot__stage::before{
  content:"";
  position:absolute;left:50%;top:50%;z-index:-1;
  width:min(420px,52vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(190,226,120,.55);
  transform:translate(-50%,-50%) scale(.55);
  opacity:0;pointer-events:none;
}
.boot.is-done .boot__stage::before{animation:ringOut 1.8s var(--ease) both}

.arcs{
  position:absolute;left:50%;top:50%;
  width:min(800px,92vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.arcs__svg{width:100%;height:100%;overflow:visible;opacity:0}
.arcs__g,.arcs__dot{transform-box:view-box;transform-origin:50% 50%}
.arcs__g--a{animation:spin 120s linear infinite}
.arcs__g--b{animation:spin 80s linear infinite reverse}
.arcs__g--c{animation:spin 160s linear infinite}
.arcs__dot--a{animation:spin 26s linear infinite}
.arcs__dot--b{animation:spin 40s linear infinite reverse}
.arcs__dot--c{animation:spin 33s linear infinite reverse}

.boot__caption{
  display:flex;align-items:center;gap:16px;
  color:var(--muted);
  font-size:9px;letter-spacing:.3em;
  opacity:0;
}
.boot__rule{width:clamp(28px,4vw,58px);height:1px;background:linear-gradient(90deg,transparent,rgba(226,240,214,.26))}
.boot__rule:last-child{background:linear-gradient(90deg,rgba(226,240,214,.26),transparent)}

/* ---- logo lockup ---- */
.lockup-wrap{position:relative;display:block;will-change:transform}
.lockup-wrap::before{
  content:"";
  position:absolute;left:50%;top:50%;z-index:-1;
  width:138%;height:165%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(150,215,110,.18),transparent 62%);
  filter:blur(30px);
  pointer-events:none;
}
.lockup{
  position:relative;
  width:clamp(288px,36vw,620px);
  line-height:0;
  opacity:0;
  will-change:transform,filter,opacity;
}
.lockup__img{
  width:100%;height:auto;
  aspect-ratio:15033 / 10207;
  overflow:visible;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.45));
}

/* --- per-arc choreography -------------------------------------------------
   Every arc is its own <g> in the inlined SVG. Both layers rotate around the
   shared centre of the C ring (5384, 4896 in viewBox units):
   · .arc        → the one-off "assemble from a fanned-out state" rotation
   · .arc-spin   → the endless, desynchronised breathing after assembly     */
.lockup .arc-spin,
.lockup .arc{
  transform-box:view-box;
  transform-origin:5384px 4896px;
  will-change:transform;
}
.boot.run .arc{
  animation:arcIn 2.2s var(--ease-io) calc(.45s + var(--i) * 55ms) both;
}
.boot.run .arc-spin{
  animation:arcSwing calc(10s + var(--i) * 0.7s) ease-in-out 3.3s infinite;
}
@keyframes arcIn{
  0%{transform:rotate(var(--turn,0deg))}
  86%{transform:rotate(calc(var(--turn,0deg) * -0.05))}
  100%{transform:rotate(0deg)}
}
/* endless pendulum: each arc swings within ±(its own amplitude), at its own
   tempo. Starts and ends on 0°, so the loop seam is invisible and the mark
   stays legible — the C only opens/closes slightly, it never breaks apart. */
@keyframes arcSwing{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(var(--amp,4deg))}
  75%{transform:rotate(calc(var(--amp,4deg) * -1))}
  100%{transform:rotate(0deg)}
}

.boot__tagline{
  margin:0;
  color:rgba(190,226,120,.92);
  font-size:9.5px;
  letter-spacing:.4em;
  text-indent:.4em;
  opacity:0;
}

/* tagline + IoT stack, kept as one optical block */
.boot__signature{display:grid;gap:12px;justify-items:center}
.boot__stack{
  display:flex;align-items:center;gap:12px;
  font-size:9.5px;letter-spacing:.2em;color:rgba(226,240,214,.62);
  opacity:0;
}
.boot__stack-label{font-size:8.5px;letter-spacing:.24em;color:rgba(190,226,120,.85)}
.boot__stack i{width:14px;height:1px;background:rgba(226,240,214,.16);flex:0 0 auto}
.boot__stack span{white-space:nowrap}

/* ---- footer / progress ---- */
.boot__bottom{
  position:relative;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding:0 clamp(24px,3.4vw,46px) 34px;
  opacity:0;
}
.progress{width:min(540px,100%)}
.progress__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:13px}
.progress__status{
  font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--ink-2);
  transition:opacity .4s ease;
}
.progress__pct{
  display:flex;align-items:baseline;gap:2px;
  font-size:11px;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.progress__pct b{font-weight:500;min-width:2ch;text-align:right}
.progress__pct i{font-style:normal;font-size:8.5px;color:var(--muted)}
.progress__track{position:relative;height:1px;background:rgba(226,240,214,.16)}
.progress__bar{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,#5C8A45 0%,#8FC06E 45%,#B4DA64 78%,#D7F0A4 100%);
}
.progress__bar::after{
  content:"";position:absolute;right:-2.5px;top:50%;
  width:5px;height:5px;border-radius:50%;
  transform:translateY(-50%);
  background:var(--lime-hi);
  box-shadow:0 0 0 3px rgba(180,218,100,.14),0 0 18px 3px rgba(180,218,100,.55);
}
.progress__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:11px;
  color:var(--muted);
  font-size:8px;letter-spacing:.2em;
}
.progress__foot .mono{font-size:8px}

/* ---- footer actions ---- */
.boot__actions{position:relative;width:132px;height:34px;flex:0 0 auto}
.boot__actions > button{
  position:absolute;right:0;bottom:0;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 0;
  font-size:11px;letter-spacing:.16em;color:var(--ink-2);
  white-space:nowrap;
  transition:color .3s ease,opacity .45s ease,transform .45s var(--ease);
}
.boot__actions svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.boot__skip:hover{color:var(--ink)}
.boot__skip:hover svg{transform:translateX(4px)}
.boot__again{opacity:0;transform:translateY(6px);pointer-events:none}
.boot__again:hover{color:var(--ink)}
.boot__again:hover svg{transform:rotate(-90deg)}
.boot__actions button:disabled{pointer-events:none}
.boot.is-done .boot__skip{opacity:0;transform:translateY(-6px);pointer-events:none}
.boot.is-done .boot__again{opacity:1;transform:none;pointer-events:auto}

/* resets the completion glow instantly when replaying */
.boot.is-reset .boot__stage::after{transition:none;opacity:0;transform:translate(-50%,-50%) scale(.82)}
.boot.is-reset .boot__stage::before{animation:none;opacity:0}

/* ---- intro timeline ---- */
.boot.run .boot__top{animation:dropIn 1s var(--ease) .1s both}
.boot.run .boot__spot{animation:fadeIn 2.4s ease .2s both}
.boot.run .boot__halo{animation:haloIn 2.8s var(--ease) .1s both}
.boot.run .boot__scan{animation:scanOpen 1.5s var(--ease) .05s both}
.boot.run .boot__mesh{animation:fadeIn 2.6s ease .45s both}
.boot.run .boot__stack{animation:fadeUp 1s var(--ease) 1.25s both}
.boot.run .arcs__svg{animation:fadeIn 2s ease .35s both}
.boot.run .crop{animation:fadeIn 1.6s ease .5s both}
.boot.run .vert{animation:fadeIn 1.8s ease 1.1s both}
.boot.run .boot__caption{animation:fadeUp 1s var(--ease) .7s both}
.boot.run .lockup{animation:lockupIn 1.5s var(--ease) .35s both}
.boot.run .boot__tagline{animation:trackingIn 1.4s var(--ease) .9s both}
.boot.run .boot__bottom{animation:fadeUp 1.1s var(--ease) 1.05s both}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dropIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes haloIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  to{opacity:.95;transform:translate(-50%,-50%) scale(1)}
}
@keyframes lockupIn{
  0%{opacity:0;transform:translateY(16px) scale(1.055);filter:blur(12px)}
  38%{opacity:1}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes trackingIn{
  from{opacity:0;letter-spacing:.78em;filter:blur(5px)}
  to{opacity:1;letter-spacing:.4em;filter:blur(0)}
}
@keyframes scanOpen{
  0%{transform:translate(-50%,-50%) scaleX(0);opacity:0}
  28%{opacity:.95}
  58%{transform:translate(-50%,-50%) scaleX(1);opacity:.95}
  100%{transform:translate(-50%,-50%) scaleX(1);opacity:0}
}
@keyframes ringOut{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  16%{opacity:.75}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.15)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 0 rgba(180,218,100,.55)}
  70%{box-shadow:0 0 0 7px rgba(180,218,100,0)}
  100%{box-shadow:0 0 0 0 rgba(180,218,100,0)}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){
  .vert{display:none}
}
@media (max-width:760px){
  .boot__top{padding:22px 20px}
  .brand__en,.meta-rule,.boot__meta span:last-child{display:none}
  .boot__bottom{padding:0 20px 24px;flex-direction:column;align-items:flex-start;gap:18px}
  .progress{width:100%}
  .boot__actions{order:2;width:100%}
  .boot__actions > button{right:auto;left:0}
  .lockup{width:min(82vw,344px)}
  .arcs{width:min(560px,120vw)}
  .crop{display:none}
  .boot__stack{gap:8px;font-size:8px;letter-spacing:.16em}
  .boot__stack-label{font-size:7px;letter-spacing:.18em}
  .boot__stack i{width:8px}
  .progress__protocols{letter-spacing:.14em;font-size:7.5px}
}
@media (max-width:420px){
  .boot__tagline{font-size:8px;letter-spacing:.28em;text-indent:.28em}
  .boot__caption{font-size:8px;letter-spacing:.2em}
  .brand__name{font-size:12px}
  .boot__stack{gap:6px;font-size:7.5px}
  .boot__stack i{width:6px}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-delay:0ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
  }
}