/* How it works hero: "the route", an original looping animation of the engagement flow.
   Agree the buyer -> build the list -> a considered request -> a real conversation -> booked.
   Scenes share one stage; a gold rail underneath tracks the whole journey. */
.hwf { --ink: var(--text-on-dark); --mute: rgba(241,236,227,.42); --line: rgba(230,196,92,.22);
  position: relative; width: 135%; max-width: min(680px, calc((100svh - 17rem) * 1.2)); justify-self: end; margin-right: -5%; color: var(--ink); font-family: var(--font-sans, var(--font-sans)); }
.hwf-stage { position: relative; width: 100%; aspect-ratio: 480 / 400;
  /* no box: a soft glow and grid that dissolve into the hero on every side */
  background: radial-gradient(ellipse 50% 48% at 50% 50%, rgba(230,196,92,.06), transparent 75%); }
.hwf-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(230,196,92,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(230,196,92,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 35%, transparent 100%); }
.hwf-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hwf-svg text { font-family: inherit; }

/* scene switching: a scene fades in when active; its parts reset only after it has faded out */
.sc { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.hwf[data-s="a"] .sc-a, .hwf[data-s="b"] .sc-b, .hwf[data-s="c"] .sc-c, .hwf[data-s="d"] .sc-d, .hwf[data-s="e"] .sc-e { opacity: 1; }
.sc * { transition-delay: .55s; transition-duration: 0s; }

/* A · agree the buyer: rings draw in, the brief pins itself around the target */
.a-ring { fill: none; stroke: var(--gold-soft); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 900; stroke-dashoffset: 900; }
.a-cross { stroke: var(--gold-soft); stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 300; stroke-dashoffset: 300; }
.a-core { fill: var(--gold); transform-box: fill-box; transform-origin: center; transform: scale(0); }
.a-chip { opacity: 0; transform: translateY(8px); transform-box: fill-box; }
.a-chip rect { fill: rgba(14,31,59,.92); stroke: var(--gold); stroke-opacity: .6; }
.a-chip text { fill: var(--ink); font-size: 12.5px; }
.hwf[data-s="a"] .a-ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1) calc(var(--d) * 1s); }
.hwf[data-s="a"] .a-cross { stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease .5s; }
.hwf[data-s="a"] .a-core { transform: scale(1); transition: transform .5s cubic-bezier(.3,1.6,.5,1) .35s; }
.hwf[data-s="a"] .a-chip { opacity: 1; transform: none; transition: opacity .45s ease calc(var(--d) * 1s), transform .6s cubic-bezier(.2,1,.3,1) calc(var(--d) * 1s); }
.a-core-pulse { fill: none; stroke: var(--gold); transform-box: fill-box; transform-origin: center; opacity: 0; }
.hwf[data-s="a"] .a-core-pulse { animation: hwfPulse 1.6s ease-out .9s infinite; }
@keyframes hwfPulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(4); } }

/* B · build the list: the market as a field of people, a scan sorts who fits */
.b-dot { fill: rgba(241,236,227,.28); }
.b-scan { fill: url(#hwfScan); transform: translateX(-60px); }
.hwf[data-s="b"] .b-scan { transform: translateX(500px); transition: transform 1.9s cubic-bezier(.45,0,.55,1) .3s; }
.hwf[data-s="b"] .b-dot { transition: fill .3s ease calc(var(--d) * 1s), opacity .3s ease calc(var(--d) * 1s); opacity: .45; }
.hwf[data-s="b"] .b-dot.fit { fill: var(--gold); opacity: 1; }
.b-count { fill: var(--ink); font-size: 13px; opacity: 0; }
.hwf[data-s="b"] .b-count { opacity: 1; transition: opacity .5s ease 2.2s; }

/* C · a considered request: threads go out from your profile, some come back accepted */
.c-dot { fill: rgba(241,236,227,.18); }
.c-dot.fit { fill: var(--gold); }
.c-line { stroke: var(--gold-soft); stroke-width: 1.1; stroke-opacity: .55; fill: none; stroke-dasharray: 400; stroke-dashoffset: 400; }
.hwf[data-s="c"] .c-line { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) calc(var(--d) * 1s); }
.c-ok { fill: none; stroke: var(--gold); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4); }
.hwf[data-s="c"] .c-ok { opacity: 1; transform: scale(1); transition: opacity .3s ease calc(var(--d) * 1s), transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--d) * 1s); }
.c-you circle { fill: var(--navy-deep); stroke: var(--gold); stroke-width: 1.6; }
.c-you text { fill: var(--gold-soft); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.c-count { fill: var(--ink); font-size: 13px; opacity: 0; }
.hwf[data-s="c"] .c-count { opacity: 1; transition: opacity .5s ease 2s; }

/* D · a real conversation */
.d-chat { position: absolute; inset: 6% 7%; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.d-head { margin-bottom: auto; flex: none; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--mute); }
.d-head b { color: var(--ink); font-weight: 600; display: block; font-size: 13.5px; }
.d-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, #2a4a7c, #142a4d); border: 1px solid var(--gold); flex: none; }
.d-msg { flex: none; max-width: 80%; padding: 7px 11px; border-radius: 14px; font-size: 12px; line-height: 1.35; opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom left; }
.d-them { align-self: flex-start; background: rgba(241,236,227,.1); color: var(--ink); border-bottom-left-radius: 4px; }
.d-me { align-self: flex-end; background: var(--paper); color: var(--navy); border-bottom-right-radius: 4px; transform-origin: bottom right; }
.d-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 13px; border-radius: 16px; background: rgba(241,236,227,.1); opacity: 0; height: 0; padding-block: 0; overflow: hidden; }
.d-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); animation: hwfDot 1s infinite; }
.d-typing i:nth-child(2) { animation-delay: .15s; } .d-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hwfDot { 50% { transform: translateY(-3px); background: var(--ink); } }
.hwf[data-s="d"] .d-msg { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--d) * 1s), transform .45s cubic-bezier(.2,1,.3,1) calc(var(--d) * 1s); }
.hwf[data-s="d"] .d-typing { animation: hwfTyping 1s ease calc(var(--d) * 1s) both; }
@keyframes hwfTyping { 0% { opacity: 0; height: 0; padding-block: 0; } 15%, 85% { opacity: 1; height: 26px; padding-block: 10px; } 100% { opacity: 0; height: 0; padding-block: 0; margin-top: -9px; } }

/* E · booked: the slot drops into a real week */
.e-cal { position: absolute; inset: 7% 8%; display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.e-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--mute); }
.e-top b { font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--ink); }
.e-grid { position: relative; display: grid; grid-template-columns: 34px repeat(5, 1fr); grid-template-rows: 20px repeat(4, 1fr); gap: 4px; }
.e-grid span { font-size: 10.5px; color: var(--mute); display: flex; align-items: center; justify-content: center; }
.e-grid span.t { justify-content: flex-start; }
.e-grid i { border: 1px solid rgba(241,236,227,.08); border-radius: 5px; background: rgba(241,236,227,.03); }
.e-grid i.busy { background: rgba(241,236,227,.1); }
.e-slot { grid-column: 5; grid-row: 3; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 5px; background: var(--gold); color: var(--navy-deep); padding: 2px; font-size: 10.5px; line-height: 1.15; font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,.35); opacity: 0; transform: translateY(-26px) scale(1.06); }
.e-slot span { display: none; }
.hwf[data-s="e"] .e-slot { opacity: 1; transform: none; transition: opacity .3s ease .7s, transform .6s cubic-bezier(.2,1.4,.4,1) .7s; }
.e-toast { position: absolute; right: 0; bottom: -2px; display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--paper); color: var(--navy);
  font-size: 12px; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(12px); }
.e-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2e9e5b; }
.hwf[data-s="e"] .e-toast { opacity: 1; transform: none; transition: opacity .4s ease 1.5s, transform .5s cubic-bezier(.2,1,.3,1) 1.5s; }

/* the rail: five stops, one gold thread running through the whole journey */
.hwf-rail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 18px; }
.hwf-rail::before, .hwf-rail::after { content: ""; position: absolute; top: 5px; left: 10%; right: 10%; height: 1px; background: var(--line); }
.hwf-rail::after { background: var(--gold); right: auto; width: calc(var(--rp, 0) * 80%); transition: width .25s linear; }
.hwf-rail li { list-style: none; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  font-size: 10.5px; letter-spacing: 0;  color: var(--mute); transition: color .4s ease; }
.hwf-rail li::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(230,196,92,.45); background: var(--navy); transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; }
.hwf-rail li.on { color: var(--gold-2); }
.hwf-rail li.on::before { background: var(--gold); border-color: var(--gold); }
.hwf-rail li.now::before { box-shadow: 0 0 0 5px rgba(201,162,39,.2); }
.hwf-rail { padding: 0; }

@media (max-width: 900px) { .hwf { justify-self: stretch; width: 100%; margin: 1.6rem auto 0; } }
@media (max-width: 480px) { .hwf-rail li { font-size: 9px; letter-spacing: .06em; } .d-msg { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .sc, .sc * { transition: none !important; animation: none !important; } }

.hwf-stage > .sc { position: absolute; inset: 0; }