@import url('../vendor/scrollcraft/scrollcraft.css') layer(scrollcraft);

:root {
  --sc-canvas: var(--white);
  --sc-surface: var(--mist);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--steel);
  --sc-accent: var(--blue);
  --sc-accent-ink: var(--white);
  --sc-font-display: var(--font);
  --sc-font-text: var(--font);
}
html { scroll-behavior: auto; scrollbar-width: auto; }
.hero__window { overflow: hidden; border-radius: var(--radius); }
.hero__window .hero__photo { border-radius: 0; }
.hero__window { box-shadow: 0 12px 28px rgb(0 0 0 / 12%); }

/* Progressive enhancement: content is visible unless the engine is running. */
html:not(.wfbs-motion) [data-sc-in],
html:not(.wfbs-motion) [data-sc-stagger] > * {
  opacity: 1; transform: none; transition: none;
}
.wfbs-motion [data-sc-in], .wfbs-motion [data-sc-stagger] > * {
  transition-duration: 480ms;
}
.wfbs-motion [data-sc-in]:focus-within { opacity: 1; transform: none; }
.steps li::after { overflow: hidden; }
.step-connection {
  position: absolute; left: 21px; top: 48px; bottom: 4px; width: 2px;
  background: var(--blue); transform-origin: top;
  transform: scaleY(var(--route-progress, 1)); z-index: 1;
  pointer-events: none;
}
.steps li:last-child .step-connection { display: none; }
.route-close-rule {
  display: block; height: 3px; width: 64px; margin-bottom: 24px;
  background: #9cc7f5; transform-origin: left;
}
@media (min-width: 860px) {
  .step-connection {
    left: 52px; right: 8px; top: 21px; bottom: auto; height: 2px; width: auto;
    transform-origin: left; transform: scaleX(var(--route-progress, 1));
  }
}
@media (max-width: 639px) {
  .wfbs-motion [data-sc-in]:not(.sc-in) { transform: translate3d(0,6px,0); }
}
html.wfbs-motion-off [data-sc-in], html.wfbs-motion-off [data-sc-stagger] > * {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
html.wfbs-motion-off .hero__photo,
html.wfbs-motion-off .step-connection,
html.wfbs-motion-off .route-close-rule { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-sc-in], [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__photo, .step-connection, .route-close-rule { transform: none !important; }
}