/* Standalone feature migration for LAST_Version. */
:root{
  --runner-ink:rgba(12,30,60,.72);
  --runner-line:rgba(255,255,255,.24);
  --runner-line-soft:rgba(255,255,255,.14);
  --runner-shadow:0 28px 80px rgba(4,14,32,.34);
  --runner-heart:#ef4444;
}

body{
  --race-progress:0;
}

.nav-right{
  gap:14px;
}

.nav-km,
.nav-split{
  font-family:var(--fh);
  white-space:nowrap;
  user-select:none;
}

.nav-km{
  display:inline-flex;
  align-items:baseline;
  gap:3px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
  font-size:11px;
  letter-spacing:.08em;
  line-height:1;
}

.nav-km-now{
  color:var(--gold-mid);
  font-weight:900;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

.nav-km-unit{
  color:rgba(255,255,255,.46);
  font-size:9px;
  font-weight:800;
}

.nav-split{
  color:rgba(255,255,255,.48);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.nav-split b{
  color:var(--gold-mid);
  font-weight:900;
}

.hero-bib{
  position:absolute;
  top:116px;
  right:56px;
  z-index:3;
  text-align:right;
  font-family:var(--fh);
  opacity:0;
  transform:translateY(-12px);
  animation:runnerBibIn .85s cubic-bezier(.2,.8,.2,1) .45s forwards;
  pointer-events:none;
}

@keyframes runnerBibIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.hero-bib .b-n{
  color:#fff;
  font-size:46px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 12px 32px rgba(0,0,0,.35);
}

.hero-bib .b-u{
  margin-top:6px;
  color:rgba(255,255,255,.56);
  font-size:10px;
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.hero-bib .b-rank{
  margin-top:11px;
  color:var(--gold-mid);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}

.hero-bib .b-rank::before{
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 14px rgba(217,119,6,.7);
  vertical-align:middle;
}

.runner-telemetry{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:650;
  width:232px;
  padding:14px 15px 15px;
  border:1px solid var(--runner-line);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(12,30,60,.74),rgba(15,23,42,.64));
  color:rgba(255,255,255,.68);
  box-shadow:0 22px 60px rgba(4,14,32,.42);
  backdrop-filter:blur(16px) saturate(1.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.14);
  font-family:var(--fh);
  pointer-events:none;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .62s ease,transform .62s ease;
}

.runner-telemetry.show{
  opacity:1;
  transform:translateY(0);
}

.runner-telemetry .t-bib{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--runner-line-soft);
}

.runner-telemetry .t-bib .n{
  color:#fff;
  font-size:20px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.runner-telemetry .t-bib .u{
  color:rgba(255,255,255,.45);
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.runner-telemetry .t-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}

.runner-telemetry .t-k{
  color:rgba(255,255,255,.46);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  line-height:1.2;
  text-transform:uppercase;
}

.runner-telemetry .t-v{
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.runner-telemetry .t-v.amber{
  color:var(--gold-mid);
}

.runner-telemetry .t-heart-row{
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid var(--runner-line-soft);
}

.runner-telemetry .t-heart{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#fecaca;
}

.runner-telemetry .t-unit{
  color:rgba(255,255,255,.42);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.runner-heart{
  width:13px;
  height:13px;
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  background:var(--runner-heart);
  transform:rotate(-45deg);
  animation:runnerHeartbeat .82s ease-in-out infinite;
  filter:drop-shadow(0 0 9px rgba(239,68,68,.62));
}

.runner-heart::before,
.runner-heart::after{
  content:'';
  position:absolute;
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--runner-heart);
}

.runner-heart::before{
  top:-6.5px;
  left:0;
}

.runner-heart::after{
  top:0;
  left:6.5px;
}

@keyframes runnerHeartbeat{
  0%,100%{transform:rotate(-45deg) scale(.94)}
  14%{transform:rotate(-45deg) scale(1.22)}
  28%{transform:rotate(-45deg) scale(.98)}
  42%{transform:rotate(-45deg) scale(1.12)}
  60%{transform:rotate(-45deg) scale(.94)}
}

.runner-telemetry .t-progress{
  margin-top:11px;
  color:rgba(255,255,255,.42);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  text-align:right;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

.runner-telemetry .t-spark{
  display:block;
  width:100%;
  height:30px;
  margin-top:5px;
}

.runner-telemetry .t-spark path{
  fill:none;
  stroke:var(--gold-mid);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8;
  opacity:.92;
  filter:drop-shadow(0 0 8px rgba(217,119,6,.42));
}

.parallax-layer-section{
  --layer-content-y:0px;
  --layer-bg-y:0px;
}

#home.parallax-layer-section .hero-slideshow{
  transform:translate3d(0,var(--layer-bg-y),0) scale(1.05);
  transform-origin:center;
  will-change:transform;
}

#home.parallax-layer-section .hero-grid{
  transform:translate3d(0,var(--layer-content-y),0);
  will-change:transform;
}

#projects.parallax-layer-section,
#project-nf.parallax-layer-section,
#project-nvda.parallax-layer-section{
  isolation:isolate;
}

.parallax-layer-section .project-bg{
  inset:-8%;
  transform:translate3d(0,var(--layer-bg-y),0) scale(1.06);
  transform-origin:center;
  will-change:transform;
}

#projects.parallax-layer-section .project-bg{
  inset:-3%;
  transform:translate3d(0,var(--layer-bg-y),0) scale(1.015);
}

#project-nf.parallax-layer-section .project-bg,
#project-nvda.parallax-layer-section .project-bg{
  inset:-4%;
  transform:translate3d(0,var(--layer-bg-y),0) scale(1.025);
}

#projects{
  background:
    radial-gradient(circle at 82% 18%,rgba(217,119,6,.16),transparent 30%),
    linear-gradient(135deg,#08182f 0%,var(--navy) 48%,#0a1630 100%),
    #0c1e3c;
}

#projects .project-overlay{
  background:
    radial-gradient(ellipse 44% 58% at 28% 68%,rgba(12,30,60,.03) 0%,rgba(12,30,60,.10) 48%,rgba(12,30,60,.54) 86%,rgba(12,30,60,.78) 100%),
    radial-gradient(ellipse 36% 54% at 78% 36%,rgba(12,30,60,.04) 0%,rgba(12,30,60,.13) 44%,rgba(12,30,60,.58) 78%,rgba(12,30,60,.82) 100%),
    linear-gradient(90deg,rgba(12,30,60,.78) 0%,rgba(12,30,60,.62) 45%,rgba(12,30,60,.16) 68%,rgba(12,30,60,.32) 100%);
}

#projects .project-bg::before{
  content:'';
  position:absolute;
  inset:-8%;
  background:
    radial-gradient(circle at 22% 12%,rgba(255,255,255,.08),transparent 30%),
    radial-gradient(circle at 76% 32%,rgba(217,119,6,.18),transparent 28%),
    linear-gradient(135deg,#08182f 0%,#0d2448 52%,#071326 100%);
  opacity:.96;
  z-index:0;
  transform:scale(1.02);
}

#projects .project-bg::after{
  content:'';
  position:absolute;
  inset:-5%;
  z-index:1;
  background-image:url("../../images/projects/interview-app-bg.jpg");
  background-position:clamp(-28px,-2vw,-12px) calc(50% + clamp(110px,14vh,160px));
  background-repeat:no-repeat;
  background-size:clamp(980px,74vw,1280px) auto;
  filter:blur(.8px) brightness(1.42) saturate(1.32);
  opacity:1;
  transform:scale(1);
  -webkit-mask-image:radial-gradient(ellipse 64% 68% at 50% 52%,#000 0 48%,rgba(0,0,0,.76) 64%,rgba(0,0,0,.32) 82%,transparent 100%);
  mask-image:radial-gradient(ellipse 64% 68% at 50% 52%,#000 0 48%,rgba(0,0,0,.76) 64%,rgba(0,0,0,.32) 82%,transparent 100%);
}

#projects .project-bg-slide{
  --daimian-bg-w:clamp(600px,48vw,860px);
  background-image:none!important;
  background-color:transparent;
  background-repeat:no-repeat;
  background-size:0 0;
  background-position:center center;
  filter:none;
  overflow:visible;
  z-index:2;
  transform:none;
}

#projects .project-bg-slide.active{
  opacity:.96;
}

#projects .project-bg-slide::after,
#projects .project-bg-slide::before{
  content:'';
  position:absolute;
  right:clamp(18px,4vw,68px);
  top:calc(50% - clamp(96px,10vh,132px));
  width:var(--daimian-bg-w);
  aspect-ratio:1/1;
  background-image:url("../../images/projects/interview-ip.jpg");
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  pointer-events:none;
  transform:translateY(-48%);
}

#projects .project-bg-slide::after{
  filter:blur(18px) brightness(1.06) saturate(1.04);
  opacity:.28;
  transform:translateY(-48%) scale(1.018);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 56%,rgba(0,0,0,.64) 73%,transparent 92%);
  mask-image:radial-gradient(circle at 50% 50%,#000 0 56%,rgba(0,0,0,.64) 73%,transparent 92%);
}

#projects .project-bg-slide::before{
  z-index:1;
  opacity:.9;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 58%,rgba(0,0,0,.88) 70%,rgba(0,0,0,.32) 86%,transparent 100%);
  mask-image:radial-gradient(circle at 50% 50%,#000 0 58%,rgba(0,0,0,.88) 70%,rgba(0,0,0,.32) 86%,transparent 100%);
}

#projects .project-media{
  align-items:flex-end;
  justify-content:flex-start;
  padding-top:128px;
  padding-left:0;
  padding-right:48px;
}

#projects .project-samples{
  grid-template-columns:1fr;
  gap:12px;
  width:min(100%,430px);
  margin-top:0;
}

#projects .project-sample{
  min-height:96px;
}

#projects .project-samples.is-staggered .project-sample{
  --sample-x:24px;
}

#projects.parallax-layer-section > .wrap,
#project-nf.parallax-layer-section > .wrap,
#project-nvda.parallax-layer-section > .wrap{
  position:relative;
  z-index:1;
  transform:translate3d(0,var(--layer-content-y),0);
  will-change:transform;
}

@media(prefers-reduced-motion:reduce){
  .hero-bib,
  .runner-heart{
    animation:none;
  }

  .hero-bib{
    opacity:1;
    transform:none;
  }

  .parallax-layer-section .project-bg,
  #projects.parallax-layer-section > .wrap,
  #project-nf.parallax-layer-section > .wrap,
  #project-nvda.parallax-layer-section > .wrap,
  #home.parallax-layer-section .hero-slideshow,
  #home.parallax-layer-section .hero-grid{
    transform:none;
  }
}