/* ============================================================
   Who It's For — page-only surfaces and motion.
   Every hidden starting state sits under html.wf-motion, which
   js/who.js adds only when it can also reveal things, so the page
   reads fine with the script missing or reduced motion on.
   ============================================================ */

:root {
  --wf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wf-orange: #FE5D01;
}

/* ---------- Office cards: rise out of the hero ---------- */

.wf-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  background-color: #fff;
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
    0 34px 60px -34px rgba(15, 23, 42, 0.5);
  transition: transform 0.5s var(--wf-ease), box-shadow 0.5s var(--wf-ease),
    border-color 0.3s ease;
}

/* Orange bar that sweeps across the top edge on hover */
.wf-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background-color: var(--wf-orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s var(--wf-ease);
}

/* Soft orange light that follows the pointer (--mx/--my from who.js) */
.wf-spot {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    rgba(254, 93, 1, 0.1),
    transparent 62%
  );
  transition: opacity 0.4s ease;
}

.wf-rule {
  display: block;
  height: 1px;
  margin-top: 1.5rem;
  background: linear-gradient(90deg, var(--wf-orange), #FFD5A9 35%, #e2e8f0 70%);
  transform-origin: 0 50%;
}

@media (hover: hover) and (pointer: fine) {
  .wf-card:hover {
    transform: translateY(-6px);
    border-color: #FFD5A9;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
      0 44px 70px -34px rgba(15, 23, 42, 0.55);
  }

  .wf-card:hover::after {
    transform: none;
  }

  .wf-card:hover .wf-spot {
    opacity: 1;
  }
}

/* ---------- Field & bid table: dusk section ---------- */

.wf-dusk {
  background-color: #0b1120;
  background-image:
    radial-gradient(ellipse 70% 60% at 12% 112%, rgba(254, 93, 1, 0.2), transparent 68%),
    radial-gradient(ellipse 55% 50% at 92% -12%, rgba(148, 163, 184, 0.12), transparent 70%);
}

.wf-dusk .eyebrow {
  border-color: rgba(254, 93, 1, 0.35);
  background-color: rgba(254, 93, 1, 0.08);
  color: var(--wf-orange);
}

.wf-dusk ::selection {
  background-color: var(--wf-orange);
  color: #0f172a;
}

.wf-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.9));
  padding: 1.75rem;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.7s var(--wf-ease), border-color 0.3s ease;
}

@media (min-width: 640px) {
  .wf-panel {
    padding: 2.25rem;
  }
}

.wf-panel.is-tilting {
  transition: transform 0.15s linear, border-color 0.3s ease;
}

.wf-glare {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255, 255, 255, 0.07),
    transparent 55%
  );
  transition: opacity 0.4s ease;
}

/* Line drawing in the corner; pathLength="1" lets every stroke draw in
   with one dash value regardless of its real length. */
.wf-art {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: -1;
  width: 7.5rem;
  height: 7.5rem;
  color: rgba(254, 93, 1, 0.55);
}

.wf-art > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.wf-chip {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  color: #cbd5e1;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.wf-chip:hover {
  border-color: var(--wf-orange);
  background-color: rgba(254, 93, 1, 0.1);
  color: #fff;
}

.wf-chip:focus-visible {
  outline: 2px solid var(--wf-orange);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .wf-panel:hover {
    border-color: rgba(254, 93, 1, 0.45);
  }

  .wf-panel:hover .wf-glare {
    opacity: 1;
  }
}

/* ---------- From field log to final invoice: conveyor ---------- */

.wf-flow {
  overflow: hidden;
  padding: 0.75rem 0 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.wf-flow-track {
  display: flex;
  width: max-content;
  animation: wf-flow 64s linear infinite;
}

.wf-flow-group {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wf-step {
  position: relative;
  flex-shrink: 0;
  width: min(80vw, 22rem);
  margin-right: 4.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  background-color: #f8fafc;
  padding: 1.75rem;
  transition: transform 0.35s var(--wf-ease), border-color 0.3s ease,
    background-color 0.3s ease, box-shadow 0.35s var(--wf-ease);
}

/* Dashed pipe to the next step, with dashes that run toward it */
.wf-step::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 0.75rem);
  width: 3rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--wf-orange) 0 6px, transparent 6px 12px);
  background-size: 12px 2px;
  animation: wf-pipe 0.9s linear infinite;
}

.wf-step::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  left: calc(100% + 3.5rem);
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--wf-orange);
  border-right: 2px solid var(--wf-orange);
  transform: rotate(45deg);
}

.wf-step-icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid #FFD5A9;
  border-radius: 0.75rem;
  background-color: rgba(254, 93, 1, 0.06);
  color: #C24600;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.wf-step-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.wf-flow:hover .wf-flow-track,
.wf-flow:focus-within .wf-flow-track,
.wf-flow:hover .wf-step::after,
.wf-flow:focus-within .wf-step::after {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
  .wf-step:hover {
    transform: translateY(-4px);
    border-color: #FFD5A9;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 24px 44px -26px rgba(15, 23, 42, 0.4);
  }

  .wf-step:hover .wf-step-icon {
    border-color: var(--wf-orange);
    background-color: var(--wf-orange);
    color: #0f172a;
  }
}

@keyframes wf-flow {
  to {
    transform: translateX(-25%);
  }
}

@keyframes wf-pipe {
  to {
    background-position: 12px 0;
  }
}

/* ---------- Entrances (only with html.wf-motion) ---------- */

/* Office cards pop up in turn */
.wf-motion .wf-pop {
  opacity: 0;
  transform: translateY(64px) scale(0.94);
  transition: opacity 0.8s ease, transform 1.1s var(--wf-ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}

.wf-motion .wf-pop.in-view {
  opacity: 1;
  transform: none;
}

/* Field and bid panels slide in from opposite sides */
.wf-motion .wf-slide {
  opacity: 0;
  transform: translateX(-90px) rotate(-1.5deg);
  transition: opacity 0.9s ease, transform 1.2s var(--wf-ease);
}

.wf-motion .wf-slide[data-from="right"] {
  transform: translateX(90px) rotate(1.5deg);
  transition-delay: 120ms;
}

.wf-motion .wf-slide.in-view {
  opacity: 1;
  transform: none;
}

/* Contents fade in one line at a time once the card is in place */
.wf-motion .wf-stagger > :not(.wf-spot):not(.wf-glare):not(.wf-art) {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.8s var(--wf-ease);
  transition-delay: calc(350ms + var(--d, 0) * 90ms);
}

.wf-motion .wf-stagger li {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.6s ease, transform 0.7s var(--wf-ease);
  transition-delay: calc(650ms + var(--li, 0) * 110ms);
}

.wf-motion .in-view .wf-stagger > :not(.wf-spot):not(.wf-glare):not(.wf-art),
.wf-motion .in-view .wf-stagger li {
  opacity: 1;
  filter: none;
  transform: none;
}

.wf-motion .wf-rule {
  transform: scaleX(0);
}

.wf-motion .in-view .wf-rule {
  transform: none;
  transition: opacity 0.7s ease, transform 1s var(--wf-ease) 0.55s;
}

.wf-motion .wf-art > * {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s var(--wf-ease);
}

.wf-motion .in-view .wf-art > * {
  stroke-dashoffset: 0;
}

.wf-motion .in-view .wf-art > :nth-child(2) { transition-delay: 0.35s; }
.wf-motion .in-view .wf-art > :nth-child(3) { transition-delay: 0.7s; }
.wf-motion .in-view .wf-art > :nth-child(4) { transition-delay: 1.05s; }

/* Headings come in word by word, out of a blur */
.wf-w {
  display: inline-block;
}

.wf-motion .wf-words .wf-w {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.35em);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 1s var(--wf-ease);
  transition-delay: calc(var(--w, 0) * 80ms);
}

.wf-motion .wf-words.in-view .wf-w {
  opacity: 1;
  filter: none;
  transform: none;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .wf-card,
  .wf-card::after,
  .wf-panel,
  .wf-step {
    transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
  }

  .wf-card:hover,
  .wf-step:hover {
    transform: none;
  }

  .wf-card:hover::after {
    transform: scaleX(0);
  }

  .wf-panel {
    transform: none;
  }

  .wf-flow {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .wf-flow-track {
    width: auto;
    animation: none;
    justify-content: center;
    padding: 0 1rem;
  }

  .wf-flow-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
  }

  .wf-flow-group[aria-hidden="true"],
  .wf-step::after,
  .wf-step::before {
    display: none;
  }

  .wf-step {
    margin-right: 0;
  }
}