.vela-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 125;
  height: 4px;
  pointer-events: none;
}

.vela-scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--olive2), var(--wood), var(--clay));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.vela-intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--olive2);
  color: var(--paper);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.vela-intro-lockup {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 2vw, 28px);
  line-height: .82;
  letter-spacing: -.06em;
}

.vela-intro-lockup strong {
  font-size: clamp(70px, 15vw, 210px);
  font-weight: 500;
}

.vela-intro-lockup i {
  color: var(--wood);
  font-size: clamp(28px, 5vw, 70px);
  font-style: normal;
}

.vela-intro-lockup span {
  font-size: clamp(14px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: .16em;
}

.vela-motion-ready .vela-intro-curtain {
  opacity: 1;
  visibility: visible;
  animation: vela-curtain-away 1.18s cubic-bezier(.77, 0, .18, 1) .14s both;
}

.vela-motion-ready .vela-intro-lockup {
  animation: vela-lockup-in .9s var(--ease) both;
}

.vela-motion-ready .header {
  transition: transform .72s var(--ease), background .3s ease, box-shadow .3s ease;
}

.vela-motion-ready:not(.vela-loaded) .header {
  transform: translateY(-110%);
}

.vela-motion-ready .header.is-scrolled {
  background: rgba(243, 239, 231, .95);
  box-shadow: 0 14px 42px rgba(32, 37, 30, .09);
}

.vela-motion-ready .hero {
  position: relative;
  isolation: isolate;
}

.vela-motion-ready .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  right: -14vw;
  top: 4vw;
  border: clamp(32px, 5vw, 72px) solid rgba(69, 80, 59, .08);
  border-radius: 50%;
  animation: vela-orbit 16s ease-in-out infinite alternate;
}

.hero-title-word {
  display: inline-block;
  margin-right: .18em;
  opacity: 0;
  transform: translateY(.75em) rotate(2deg);
  transition: opacity .7s ease, transform .9s var(--ease);
  transition-delay: calc(.46s + var(--vela-word-index, 0) * 42ms);
}

.vela-motion-ready.vela-loaded .hero-title-word {
  opacity: 1;
  transform: none;
}

.vela-motion-ready .hero-meta,
.vela-motion-ready .hero-side {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s ease, transform .85s var(--ease);
}

.vela-motion-ready.vela-loaded .hero-meta {
  opacity: 1;
  transform: none;
  transition-delay: .4s;
}

.vela-motion-ready.vela-loaded .hero-side {
  opacity: 1;
  transform: none;
  transition-delay: .76s;
}

.vela-motion-ready .hero-photo {
  opacity: 0;
  clip-path: inset(0 0 100% 0 round 28px);
  transform: translateY(54px) scale(.975);
  transition: opacity .7s ease, clip-path 1.25s cubic-bezier(.77, 0, .18, 1), transform 1.15s var(--ease);
}

.vela-motion-ready.vela-loaded .hero-photo {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 28px);
  transform: none;
  transition-delay: .68s;
}

.vela-motion-ready .hero-photo img,
.vela-motion-ready .image-asym img,
.vela-motion-ready .final-cta > img {
  transform: translate3d(0, var(--vela-media-y, 0px), 0) scale(1.055);
  transition: transform .18s linear;
  will-change: transform;
}

.vela-motion-ready .reveal {
  transform: translateY(54px);
  transition-duration: .9s;
  transition-timing-function: var(--ease);
  transition-delay: var(--vela-delay, 0ms);
}

.vela-motion-ready .reveal.vela-from-left {
  transform: translateX(-54px);
}

.vela-motion-ready .reveal.vela-from-right {
  transform: translateX(54px);
}

.vela-motion-ready .reveal.vela-scale-in {
  transform: translateY(35px) scale(.95);
}

.vela-motion-ready .reveal.visible {
  opacity: 1;
  transform: none;
}

.vela-motion-ready .chapter i {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s var(--ease) .18s;
}

.vela-motion-ready .chapter.visible i {
  transform: scaleX(1);
}

.vela-motion-ready .facts .fact,
.vela-motion-ready .journey-card,
.vela-motion-ready .method-step,
.vela-motion-ready .build-steps article,
.vela-motion-ready .faq-item {
  transition-property: opacity, transform, box-shadow, background-color, color;
}

.vela-motion-ready .journey-card,
.vela-motion-ready .method-step,
.vela-motion-ready .build-steps article,
.vela-motion-ready .fact,
.vela-motion-ready .faq-item,
.vela-motion-ready .cart-mock,
.vela-motion-ready .checkout-mock,
.vela-motion-ready .prod-col {
  will-change: transform;
}

.vela-motion-ready .journey-card:hover {
  z-index: 2;
  background: #2b3128;
  transform: translateY(-12px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .24);
}

.vela-motion-ready .image-asym figure,
.vela-motion-ready .product-frame,
.vela-motion-ready .store-preview {
  transition: transform .55s var(--ease), box-shadow .55s ease;
}

.vela-motion-ready .image-asym figure:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(32, 37, 30, .14);
}

.vela-motion-ready .image-asym figure:hover img {
  transform: translate3d(0, var(--vela-media-y, 0px), 0) scale(1.1);
}

.vela-motion-ready .store-preview {
  transform-style: preserve-3d;
}

.vela-motion-ready .store-preview.visible {
  box-shadow: 0 34px 86px rgba(33, 37, 29, .16);
}

.vela-motion-ready .preview-body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0 47%, rgba(255, 255, 255, .26) 50%, transparent 53% 100%);
  transform: translateY(-120%);
}

.vela-motion-ready .store-preview.visible .preview-body::after {
  animation: vela-preview-scan 2.2s var(--ease) .45s both;
}

.vela-motion-ready .product-frame {
  transform-style: preserve-3d;
}

.vela-motion-ready .product-frame .fake-panel {
  transform: translateZ(34px);
  transition: transform .5s var(--ease), box-shadow .5s ease;
}

.vela-motion-ready .product-frame:hover .fake-panel {
  transform: translateZ(52px) translateY(-7px);
  box-shadow: 0 24px 54px rgba(32, 37, 30, .18);
}

.vela-motion-ready .checkout-panels > div,
.vela-motion-ready .prod-grid > div,
.vela-motion-ready .build-steps > article {
  opacity: 0;
  transform: translateY(34px) scale(.975);
  transition: opacity .72s ease, transform .82s var(--ease), box-shadow .4s ease;
  transition-delay: calc(var(--vela-card-index, 0) * 90ms);
}

.vela-motion-ready .checkout-panels.visible > div,
.vela-motion-ready .prod-grid.visible > div,
.vela-motion-ready .build-steps > article.visible {
  opacity: 1;
  transform: none;
}

.vela-motion-ready .cart-mock:hover,
.vela-motion-ready .checkout-mock:hover,
.vela-motion-ready .prod-col:hover,
.vela-motion-ready .method-step:hover,
.vela-motion-ready .build-steps article:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 55px rgba(32, 37, 30, .13);
}

.vela-motion-ready .prod-bridge span {
  display: inline-block;
  animation: vela-bridge 1.9s ease-in-out infinite;
}

.vela-motion-ready .fake-swatches i {
  animation: vela-swatch 3.2s ease-in-out infinite;
  animation-delay: calc(var(--vela-card-index, 0) * 180ms);
}

.vela-motion-ready .final-cta::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 360px;
  height: 360px;
  right: -110px;
  bottom: -180px;
  border: 54px solid rgba(228, 215, 198, .28);
  border-radius: 50%;
  animation: vela-final-ring 10s ease-in-out infinite alternate;
}

.vela-motion-ready .btn,
.vela-motion-ready .demo-btn,
.vela-motion-ready .contact-submit {
  transition: transform .32s var(--ease), box-shadow .32s ease, background-color .25s ease;
}

.vela-motion-ready .btn:hover,
.vela-motion-ready .demo-btn:hover,
.vela-motion-ready .contact-submit:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(32, 37, 30, .2);
}

@keyframes vela-curtain-away {
  0%, 68% { transform: translateY(0); }
  100% { transform: translateY(-100%); visibility: hidden; }
}

@keyframes vela-lockup-in {
  0% { opacity: 0; transform: translateY(42px) scale(.94); }
  48%, 76% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-22px) scale(1.025); }
}

@keyframes vela-orbit {
  to { transform: translate(-70px, 46px) rotate(42deg) scale(1.12); }
}

@keyframes vela-preview-scan {
  from { transform: translateY(-120%); }
  to { transform: translateY(120%); }
}

@keyframes vela-bridge {
  0%, 100% { transform: translateX(-6px); opacity: .5; }
  50% { transform: translateX(7px); opacity: 1; }
}

@keyframes vela-swatch {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes vela-final-ring {
  to { transform: translate(-70px, -36px) rotate(35deg) scale(1.1); }
}

@media (max-width: 720px) {
  .vela-intro-lockup { flex-wrap: wrap; justify-content: center; }
  .vela-intro-lockup strong { width: 100%; text-align: center; }
  .vela-motion-ready .hero::before { width: 72vw; right: -36vw; top: 18vw; }
  .vela-motion-ready .final-cta::before { width: 250px; height: 250px; border-width: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .vela-scroll-progress,
  .vela-intro-curtain { display: none; }
  .vela-motion-ready .header,
  .vela-motion-ready .hero-meta,
  .vela-motion-ready .hero-side,
  .vela-motion-ready .hero-photo,
  .vela-motion-ready .hero-title-word,
  .vela-motion-ready .reveal,
  .vela-motion-ready .checkout-panels > div,
  .vela-motion-ready .prod-grid > div,
  .vela-motion-ready .build-steps > article {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .vela-motion-ready .hero-photo img,
  .vela-motion-ready .image-asym img,
  .vela-motion-ready .final-cta > img { transform: none; transition: none; }
  .vela-motion-ready *,
  .vela-motion-ready *::before,
  .vela-motion-ready *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}