/* Signed-out Sutra surfaces (marketing landing, auth, splash, 404) — their
   own font pairing and canvas color, unrelated to the app's slate/primary
   design tokens, so it's kept out of the Tailwind @layer cascade like
   bill.css/barcode_labels.css. Colors match the Sutra brand tokens declared
   in application.tailwind.css's @theme. */

.landing {
  background: #FAF8F5;
  color: #14120E;
  font-family: "Hanken Grotesk", "Anek Devanagari", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hero: a knot that travels the thread linking POS → order → stock → customer → report. */
@keyframes sutra-travel {
  0% { left: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.landing__traveller {
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #A3245A;
  box-shadow: 0 0 0 4px rgb(163 36 90 / .18);
  animation: sutra-travel 4.5s cubic-bezier(.2, 0, 0, 1) infinite;
}

/* Splash: the S-thread draws itself, then each knot ties on. */
@keyframes sutra-draw {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}

@keyframes sutra-knot {
  0%, 60% { transform: scale(0); }
  100% { transform: scale(1); }
}

@keyframes sutra-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@keyframes sutra-spin {
  to { transform: rotate(360deg); }
}

.logo--animated .logo__thread {
  stroke-dasharray: 120;
  animation: sutra-draw .9s cubic-bezier(.2, .8, .2, 1) both;
}

.logo--animated .logo__knot {
  transform-box: fill-box;
  transform-origin: center;
  animation: sutra-knot .6s cubic-bezier(.2, .8, .2, 1) both;
}

.logo--animated .logo__knot--end {
  animation-duration: 1.1s;
}

.splash__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: #DD84A4;
  animation: sutra-bar 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}

.splash__bar--done {
  width: 100%;
  animation: none;
}

.sutra-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgb(250 248 245 / .3);
  border-top-color: #FAF8F5;
  animation: sutra-spin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .landing__traveller,
  .logo--animated .logo__thread,
  .logo--animated .logo__knot,
  .splash__bar,
  .sutra-spinner {
    animation: none;
  }

  .landing__traveller {
    display: none;
  }
}

/* Diagonal-stripe stand-ins for product and merchant photography. */
.landing__placeholder {
  background: repeating-linear-gradient(135deg, #EDE8E0 0 7px, #E6E1D8 7px 14px);
}

.landing__placeholder--deep {
  background: repeating-linear-gradient(135deg, #E6E1D8 0 12px, #DDD6CA 12px 24px);
}

.landing__placeholder--photo {
  background: repeating-linear-gradient(135deg, #D2CBBF 0 12px, #C9C1B4 12px 24px);
}

/* A thread not yet travelled — dashed until the knot before it is reached. */
.landing__dashed-thread {
  background: repeating-linear-gradient(90deg, #D2CBBF 0 6px, transparent 6px 10px);
}

/* Sale-flow stepper — sale_flow_controller.js sets data-state="done|current|todo"
   on each step; kept as plain CSS since every part of a step restyles at once. */
.sale-flow__knot {
  background: #14120E;
  border: 2px solid #5F584C;
}

.sale-flow__line {
  background: repeating-linear-gradient(90deg, #474137 0 6px, transparent 6px 10px);
}

.sale-flow__number,
.sale-flow__title {
  color: #807869;
}

.sale-flow__step:is([data-state="done"], [data-state="current"]) .sale-flow__knot {
  background: #DD84A4;
  border-color: #DD84A4;
}

.sale-flow__step[data-state="done"] .sale-flow__line {
  background: #DD84A4;
}

.sale-flow__step[data-state="current"] .sale-flow__number {
  color: #DD84A4;
}

.sale-flow__step:is([data-state="done"], [data-state="current"]) .sale-flow__title {
  color: #FAF8F5;
}