:root {
  --elv-motion-total: 4600ms;
  --elv-motion-ink: #0b1020;
  --elv-motion-brand: #283a8f;
  --elv-motion-surface: #ffffff;
  --elv-motion-muted: #5d667a;
  --elv-motion-ease-converge: cubic-bezier(.45, .03, .25, 1);
  --elv-motion-ease-reveal: cubic-bezier(.4, 0, .16, 1);
  --elv-symbol-width: min(86vw, 92vh);
  --elv-aperture-offset: min(6.364vw, 6.808vh);
}

@property --elv-aperture-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --elv-light-radius {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --elv-aperture-near {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --elv-aperture-mid {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --elv-aperture-far {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.elv-motion-demo {
  min-height: 100svh;
  margin: 0;
  color: var(--elv-motion-ink);
  background: var(--elv-motion-surface);
  font-family: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.elv-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 0 clamp(28px, 6vw, 88px);
  background: #fff;
}

.elv-hero__header {
  position: relative;
  z-index: 1;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #edf0f5;
}

.elv-hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--elv-motion-ink);
  font-size: 1rem;
  font-weight: 720;
  letter-spacing: -.025em;
}

.elv-hero__brand-symbol { width: 35px; height: 35px; overflow: visible; }
.elv-hero__brand-symbol path { fill: var(--elv-motion-brand); }
.elv-hero__nav { display: flex; align-items: center; gap: clamp(18px, 2.8vw, 38px); color: #677086; font-size: .75rem; }
.elv-hero__nav strong { min-height: 38px; display: inline-flex; align-items: center; padding: 0 15px; border-radius: 7px; color: #fff; background: var(--elv-motion-brand); font-weight: 650; }

.elv-hero__content {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - 76px);
  display: grid;
  align-content: center;
  max-width: 900px;
  padding: clamp(52px, 9vh, 112px) 0;
}

.elv-hero__environment {
  position: absolute;
  z-index: 0;
  right: clamp(24px, 7vw, 120px);
  bottom: clamp(24px, 8vh, 96px);
  width: min(30vw, 420px);
  height: min(34vh, 320px);
  border: 1px solid #dfe3ec;
  border-radius: 20px;
  background: linear-gradient(#f1f3f7 1px, transparent 1px), linear-gradient(90deg, #f1f3f7 1px, transparent 1px), #f7f8fa;
  background-size: 34px 34px;
}

.elv-hero__eyebrow { margin: 0 0 22px; color: var(--elv-motion-brand); font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.elv-hero h1 { max-width: 13ch; margin: 0; font-size: clamp(3rem, 8vw, 7.5rem); font-weight: 560; letter-spacing: -.055em; line-height: .96; }
.elv-hero__subheadline p { max-width: 58ch; margin: 28px 0 0; color: var(--elv-motion-muted); font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.65; }
.elv-hero__actions { display: flex; gap: 12px; margin-top: 30px; }
.elv-hero__proof { margin-top: 34px; color: #7a8397; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.elv-hero__action { min-height: 46px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid #d7dceb; border-radius: 8px; color: var(--elv-motion-ink); background: #fff; font-size: .875rem; font-weight: 650; text-decoration: none; }
.elv-hero__action:first-child { color: #fff; background: var(--elv-motion-brand); border-color: var(--elv-motion-brand); }

.elv-intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: auto;
  animation: elv-input-handoff var(--elv-motion-total) steps(1, end) both;
}

.elv-intro__veil {
  --elv-aperture-radius: 0px;
  --elv-aperture-near: 0px;
  --elv-aperture-mid: 0px;
  --elv-aperture-far: 0px;
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #f7f8fb;
  -webkit-mask-image: radial-gradient(circle at calc(50% + var(--elv-aperture-offset)) 50%, transparent 0 var(--elv-aperture-radius), rgba(0, 0, 0, .08) calc(var(--elv-aperture-radius) + var(--elv-aperture-near)), rgba(0, 0, 0, .68) calc(var(--elv-aperture-radius) + var(--elv-aperture-mid)), #000 calc(var(--elv-aperture-radius) + var(--elv-aperture-far)));
  mask-image: radial-gradient(circle at calc(50% + var(--elv-aperture-offset)) 50%, transparent 0 var(--elv-aperture-radius), rgba(0, 0, 0, .08) calc(var(--elv-aperture-radius) + var(--elv-aperture-near)), rgba(0, 0, 0, .68) calc(var(--elv-aperture-radius) + var(--elv-aperture-mid)), #000 calc(var(--elv-aperture-radius) + var(--elv-aperture-far)));
  animation: elv-world-aperture var(--elv-motion-total) var(--elv-motion-ease-reveal) both;
}

.elv-intro__mark {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: var(--elv-symbol-width);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.elv-intro__mark svg { width: 100%; height: 100%; overflow: visible; }
.elv-intro__plane { fill: #283a8f; transform-box: fill-box; transform-origin: center; animation-duration: var(--elv-motion-total); animation-fill-mode: both; }
.elv-intro__plane--left { animation-name: elv-close-left; }
.elv-intro__plane--right { animation-name: elv-close-right; }
.elv-intro__mask-left,
.elv-intro__mask-right { transform-box: fill-box; animation: elv-mark-consume var(--elv-motion-total) var(--elv-motion-ease-reveal) both; }
.elv-intro__mask-left { transform-origin: left center; }
.elv-intro__mask-right { transform-origin: right center; }

.elv-intro__light {
  --elv-light-radius: 0px;
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle var(--elv-light-radius) at calc(50% + var(--elv-aperture-offset)) 50%, rgba(255, 255, 255, 1) 0, rgba(253, 254, 255, .92) 28%, rgba(247, 250, 255, .38) 68%, transparent 100%);
  mix-blend-mode: screen;
  animation: elv-quiet-light var(--elv-motion-total) var(--elv-motion-ease-reveal) both;
  pointer-events: none;
}

.elv-motion-complete .elv-intro { display: none; }

@keyframes elv-close-left {
  0%, 9.130% { transform: translateX(-48%); animation-timing-function: var(--elv-motion-ease-converge); }
  32.609%, 100% { transform: translateX(0); }
}

@keyframes elv-close-right {
  0%, 9.130% { transform: translateX(70%); animation-timing-function: var(--elv-motion-ease-converge); }
  32.609%, 100% { transform: translateX(0); }
}

@keyframes elv-quiet-light {
  0%, 23.478% { --elv-light-radius: 0px; opacity: 0; }
  32.609% { --elv-light-radius: 5vmin; opacity: .22; }
  40.217% { --elv-light-radius: 11vmin; opacity: .44; }
  45.652% { --elv-light-radius: 16vmin; opacity: .56; }
  52.174% { --elv-light-radius: 20vmin; opacity: .62; }
  59.130% { --elv-light-radius: 20vmin; opacity: .62; }
  67.391% { --elv-light-radius: 30vmax; opacity: .55; }
  76.087% { --elv-light-radius: 70vmax; opacity: .34; }
  87.826% { --elv-light-radius: 150vmax; opacity: .1; }
  91.304%, 100% { --elv-light-radius: 170vmax; opacity: 0; }
}

@keyframes elv-world-aperture {
  0%, 65.217% { --elv-aperture-radius: 0px; --elv-aperture-near: 0px; --elv-aperture-mid: 0px; --elv-aperture-far: 0px; }
  69.565% { --elv-aperture-radius: 18vmax; --elv-aperture-near: 26px; --elv-aperture-mid: 92px; --elv-aperture-far: 164px; }
  77.174% { --elv-aperture-radius: 30vmax; --elv-aperture-near: 26px; --elv-aperture-mid: 92px; --elv-aperture-far: 164px; }
  83.696% { --elv-aperture-radius: 54vmax; --elv-aperture-near: 26px; --elv-aperture-mid: 92px; --elv-aperture-far: 164px; }
  86.304% { --elv-aperture-radius: 84vmax; --elv-aperture-near: 26px; --elv-aperture-mid: 92px; --elv-aperture-far: 164px; }
  87.826%, 100% { --elv-aperture-radius: 170vmax; --elv-aperture-near: 26px; --elv-aperture-mid: 92px; --elv-aperture-far: 164px; }
}

@keyframes elv-mark-consume {
  0%, 63.043% { transform: scaleX(1); }
  68.478% { transform: scaleX(.92); }
  73.913% { transform: scaleX(.5); }
  79.348%, 100% { transform: scaleX(0); }
}

@keyframes elv-input-handoff {
  0%, 91.303% { pointer-events: auto; }
  91.304%, 100% { pointer-events: none; }
}

@media (max-aspect-ratio: 3 / 4) {
  :root { --elv-symbol-width: min(120vw, 82vh); --elv-aperture-offset: min(8.88vw, 6.068vh); }
}

@media (max-width: 700px) {
  .elv-hero { padding-inline: 22px; }
  .elv-hero__nav span { display: none; }
  .elv-hero__environment { right: -35%; width: 72vw; opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
  .elv-intro { display: none; }
}