:root{
  --accent:#ff8f02;
  --accent-soft:rgba(255,143,2,.42);
  --ink:#eef0f3;
  --ink-2:rgba(238,240,243,.56);
  --ink-3:rgba(238,240,243,.30);
  --hair:rgba(238,240,243,.10);
  --mark-w:clamp(300px,min(43vw,56vh),880px);
  --mark-h:calc(var(--mark-w) * .24691);
  --rule-y:calc(var(--mark-w) * .172113);
  --rule-t:calc(var(--mark-w) * .0087146);
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

html{font-size:clamp(13px,.95vw,23px)}

body{
  height:100vh;
  overflow:hidden;
  background:#050506;
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  cursor:default;
  -webkit-font-smoothing:antialiased;
}

.field,.glow,.sweep,.grain,.vignette{position:fixed;left:0;top:0;pointer-events:none}

.backdrop{
  position:fixed;left:0;top:0;width:100%;height:100%;
  pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(5,5,6,0) 46%,rgba(5,5,6,.55) 82%,rgba(5,5,6,.95) 100%),
    linear-gradient(90deg,#050506 0%,#050506 26%,rgba(5,5,6,.9) 39%,rgba(5,5,6,.55) 56%,rgba(5,5,6,.36) 76%,rgba(5,5,6,.34) 100%),
    url(../assets/backdrop.jpg);
  background-size:cover;
  background-position:center,center,center right;
  background-repeat:no-repeat;
  opacity:0;
  animation:fade 2.6s ease .3s forwards;
}

.field{width:100%;height:100%}

.glow{
  width:100%;height:100%;
  background:
    radial-gradient(58% 62% at 6% 96%,rgba(255,143,2,.13),transparent 66%),
    radial-gradient(70% 70% at 86% 4%,rgba(120,158,196,.09),transparent 70%);
}

.sweep{
  width:100%;height:100%;
  background:linear-gradient(104deg,transparent 42%,rgba(238,240,243,.035) 50%,transparent 58%);
  transform:translateX(-110%);
  animation:sweep 17s cubic-bezier(.6,0,.35,1) 3s infinite;
}

.grain{
  width:200%;height:200%;
  opacity:.42;
  animation:grain 1s steps(5) infinite;
}

.vignette{
  width:100%;height:100%;
  background:radial-gradient(120% 96% at 50% 44%,transparent 42%,rgba(0,0,0,.72) 100%);
}

.stage{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100vh;
  max-width:2100px;
  margin:0 auto;
  padding:3.4rem 5.6rem 3.2rem;
}

.base{opacity:0;animation:rise 1s cubic-bezier(.16,.84,.3,1) 1.45s forwards}

.headroom{flex:none;height:calc(8.2rem + 1px)}

.core{display:flex;flex-direction:column;gap:3.4rem}

.hero{position:relative;height:calc(var(--mark-h) + 4.4rem)}

.mark{position:relative;width:var(--mark-w);height:var(--mark-h)}
.mark-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.mark-svg path{
  fill:none;stroke:var(--accent);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 12px rgba(255,143,2,.35));
}
.mark-spine{animation:draw 1.5s cubic-bezier(.22,.75,.2,1) .25s forwards}
.mark-leg{animation:draw .5s cubic-bezier(.4,.1,.2,1) .62s forwards}

.wordmark{
  position:absolute;left:16.703%;top:5.882%;width:84.241%;
  clip-path:inset(0 100% 0 0);
  animation:reveal 1.1s cubic-bezier(.22,.75,.2,1) .95s forwards;
}
.beta{
  position:absolute;left:29.775%;top:77.059%;width:37.328%;
  opacity:0;
  animation:fade .9s ease 1.75s forwards;
}

.rail{
  position:absolute;
  left:var(--mark-w);right:0;
  top:calc(var(--rule-y) - var(--rule-t) / 2);
  height:var(--rule-t);
  opacity:0;
  animation:fade .6s ease 1.2s forwards;
}
.rail-track{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:rgba(238,240,243,.085);
  transform:scaleX(0);transform-origin:left center;
  animation:extend 1.1s cubic-bezier(.22,.75,.2,1) 1.25s forwards;
}
.rail-fill{
  position:absolute;left:0;top:0;width:0;height:100%;
  background:var(--accent);
  box-shadow:0 0 1.6rem rgba(255,143,2,.4);
}
.rail-head{
  position:absolute;left:0;top:50%;
  width:2px;height:1.35rem;margin-left:-1px;
  background:var(--accent);
  transform:translateY(-50%);
  box-shadow:0 0 1rem rgba(255,143,2,.85);
  opacity:0;
  transition:opacity .4s ease;
}
.rail-sweep{
  position:absolute;left:0;top:0;width:100%;height:100%;
  overflow:hidden;
  opacity:0;
}
.rail-sweep::after{
  content:'';position:absolute;top:0;left:0;width:32%;height:100%;
  background:linear-gradient(90deg,transparent,var(--accent-soft),transparent);
  animation:scan 2.6s cubic-bezier(.45,0,.55,1) infinite;
}

.ticks{position:absolute;left:0;right:0;top:calc(100% + .5rem);height:.36rem}
.ticks-row{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background-image:repeating-linear-gradient(90deg,rgba(238,240,243,.22) 0 1px,transparent 1px .95rem);
}
.ticks-lit{position:absolute;left:0;top:0;width:100%;height:100%;clip-path:inset(0 100% 0 0)}
.ticks-lit .ticks-row{background-image:repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px .95rem)}

.readout{
  position:absolute;right:0;top:var(--rule-y);
  display:flex;align-items:flex-start;
  transform:translateY(calc(-100% - .95rem));
  font-family:var(--mono);
  opacity:0;
  animation:riseReadout .9s cubic-bezier(.16,.84,.3,1) 1.6s forwards;
}
.readout-value{
  font-size:4.6rem;font-weight:200;line-height:.78;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.readout-unit{
  margin:.42rem 0 0 .45rem;
  font-size:.9rem;font-weight:400;letter-spacing:.18em;color:var(--ink-3);
}

.statusline{
  position:absolute;left:var(--mark-w);right:0;top:var(--rule-y);
  display:flex;align-items:baseline;justify-content:space-between;gap:1.3rem;
  transform:translateY(2.5rem);
  font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;
  opacity:0;
  animation:riseStatus .9s cubic-bezier(.16,.84,.3,1) 1.75s forwards;
}
.status{flex:none;color:var(--accent)}
.files{flex:none;color:var(--ink-2)}

.log{
  display:flex;flex-direction:column;justify-content:flex-end;gap:.42rem;
  width:min(50rem,58%);min-height:9.4rem;
  font-family:var(--mono);font-size:.68rem;font-weight:300;letter-spacing:.08em;
  opacity:0;animation:fade .8s ease 2.1s forwards;
}
.log-line{
  display:flex;gap:1.1rem;align-items:baseline;
  color:var(--ink-2);white-space:nowrap;
  animation:logIn .55s cubic-bezier(.16,.84,.3,1);
}
.log-line:nth-last-child(1){color:var(--ink)}
.log-line:nth-last-child(2){opacity:.72}
.log-line:nth-last-child(3){opacity:.5}
.log-line:nth-last-child(4){opacity:.32}
.log-line:nth-last-child(5){opacity:.18}
.log-line:nth-last-child(6){opacity:.09}
.log-time{flex:none;color:var(--ink-3);letter-spacing:.14em}
.log-text{overflow:hidden;text-overflow:ellipsis}
.log-line.is-key .log-text{color:var(--accent);letter-spacing:.2em}
.log-line.is-path .log-text{color:var(--ink-2);letter-spacing:.04em}

.base{
  display:flex;align-items:flex-end;
  min-height:8.6rem;
  padding-top:1.4rem;
  border-top:1px solid var(--hair);
}

.meta{display:flex;gap:2.8rem}
.meta-item{display:flex;flex-direction:column;gap:.5rem}
.meta-label{font-family:var(--mono);font-size:.6rem;font-weight:400;letter-spacing:.3em;color:var(--ink-3)}
.meta-value{font-size:1rem;font-weight:300;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

.rail.is-waiting .rail-sweep{opacity:1}
.rail.is-live .rail-head{opacity:1}

.is-complete .rail-fill{animation:surge 1.8s ease-out}
.is-complete .readout-value{color:var(--accent)}
.is-complete .mark-svg path{filter:drop-shadow(0 0 18px rgba(255,143,2,.6))}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes reveal{to{clip-path:inset(0 0 0 0)}}
@keyframes fade{to{opacity:1}}
@keyframes extend{to{transform:scaleX(1)}}
@keyframes rise{from{opacity:0;transform:translateY(.7rem)}to{opacity:1;transform:none}}
@keyframes riseReadout{from{opacity:0;transform:translateY(calc(-100% - .25rem))}to{opacity:1;transform:translateY(calc(-100% - .95rem))}}
@keyframes riseStatus{from{opacity:0;transform:translateY(3.2rem)}to{opacity:1;transform:translateY(2.5rem)}}
@keyframes sweep{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,-4%)}40%{transform:translate(-3%,-8%)}60%{transform:translate(-7%,-2%)}80%{transform:translate(-2%,-6%)}100%{transform:translate(0,0)}}
@keyframes logIn{from{opacity:0;transform:translateY(.45rem)}}
@keyframes scan{0%{transform:translateX(-40%)}100%{transform:translateX(320%)}}
@keyframes surge{0%{box-shadow:0 0 1.6rem rgba(255,143,2,.4)}30%{box-shadow:0 0 3.4rem rgba(255,143,2,.95)}100%{box-shadow:0 0 1.6rem rgba(255,143,2,.4)}}

@media (max-aspect-ratio:5/4){
  .stage{padding:2.8rem 3.6rem}
  .core{gap:2.4rem}
  .log{min-height:6.6rem;width:100%}
  .base{min-height:7.4rem}
  .readout-value{font-size:3.6rem}
}

@media (max-width:1100px){
  .statusline{gap:.9rem;font-size:.62rem}
  .meta{gap:1.8rem}
}