/* Line by Air product demo (demo.js). Shared by landing/ and site/; edit
   here, then scripts/sync_demo.sh. Sizes in container units so it scales
   as one piece. Sienna is reserved for the hero lot. Weights 400/500 only. */
.cin { --bone: #F4F0E8; --stone: #a39d91; --stone-dim: #7d786e; --sienna: #C26D4F; --ok: #8fd9ad;
  container-type: inline-size; margin: 0; width: 100%; color: var(--bone); text-align: left;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; transition: opacity .7s; }
.cin.out { opacity: 0; }
.c-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 1.6cqw; overflow: hidden; background: #111411;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(244,240,232,.07); }

/* Before the photo: the stage is the drop zone */
.c-drop { position: absolute; inset: 2.4cqw; border: 0.15cqw dashed rgba(244,240,232,.18); border-radius: 1.2cqw;
  display: grid; place-items: center; color: var(--stone-dim); font-size: 1.4cqw; letter-spacing: .02em; transition: opacity .5s, border-color .3s, color .3s; }
.c-stage.hot .c-drop { border-color: rgba(244,240,232,.6); color: var(--bone); }
.c-stage.has-photo .c-drop { opacity: 0; }

.c-scene { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .8s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.c-stage.has-photo .c-scene { opacity: 1; transform: none; }
.c-stage.final .c-scene { transform: scale(1.08); transition: transform 5s cubic-bezier(.25,.1,.25,1); }
.c-scan { position: absolute; top: 0; bottom: 0; width: 20%; left: -22%; opacity: 0; mix-blend-mode: screen; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244,240,232,0) 30%, rgba(244,240,232,.18) 85%, rgba(255,255,255,.5) 99%, transparent); }
.c-scan.run { animation: c-scan 1.2s cubic-bezier(.45,.05,.4,1) forwards; }
@keyframes c-scan { 0% { left: -22%; opacity: 1; } 90% { opacity: 1; } 100% { left: 102%; opacity: 0; } }

/* Opening title card */
.c-title { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 12cqw; text-align: center; pointer-events: none; z-index: 3; }
.c-title span { font-weight: 500; font-size: 3.7cqw; line-height: 1.08; letter-spacing: -0.03em; color: var(--bone); max-width: 18em;
  opacity: 0; transform: translateY(1cqw); transition: opacity .6s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.c-title.show span { opacity: 1; transform: none; }
.c-stage.titled .c-drop { opacity: 0; }

/* Lines */
.c-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c-fill { fill: rgba(194,109,79,.3); opacity: 0; transition: opacity 1s; }
.c-glow { fill: none; stroke: rgba(255,255,255,.65); stroke-width: 13; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke .8s, stroke-width .8s, opacity .8s; }
.c-edge { fill: none; stroke: #fff; stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .8s, stroke-width .8s; }
.c-glow.on, .c-edge.on { animation: c-trace 1.3s cubic-bezier(.55,.1,.3,1) forwards; }
.c-lines.static .c-glow, .c-lines.static .c-edge { stroke-dashoffset: 0; animation: none; }
@keyframes c-trace { to { stroke-dashoffset: 0; } }
.c-lines.c-hero .c-fill { opacity: 1; }
.c-lines.c-hero .c-edge { opacity: .7; }
.c-lines.c-hero .c-glow { opacity: .6; }
.c-lines.c-hero .c-edge.c-hero { opacity: 1; stroke-width: 6; }
.c-lines.c-hero .c-glow.c-hero { opacity: 1; stroke: rgba(226,140,104,1); stroke-width: 30; }
.c-stage.final .c-lines .c-glow.c-hero { stroke-width: 38; }

/* Parcel map */
.c-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.04); pointer-events: none;
  transition: opacity .5s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.c-map.show { opacity: 1; transform: none; }
.c-mnb { fill: none; stroke: rgba(244,240,232,.13); stroke-width: 2.5; }
.c-mlot { fill: rgba(244,240,232,.03); stroke: rgba(244,240,232,.5); stroke-width: 3; stroke-linejoin: round; transition: fill .25s, stroke .25s; }
.c-mlot.sel { fill: rgba(244,240,232,.22); stroke: #fff; stroke-width: 4; }

/* Photo info, top left */
.c-meta { position: absolute; left: 1.8cqw; top: 1.8cqw; display: flex; gap: 0.5cqw; align-items: center; font-size: 1.05cqw;
  opacity: 0; transform: translateY(-0.6cqw); transition: opacity .5s, transform .5s; }
.c-meta.show { opacity: 1; transform: none; }
.c-meta b, .c-meta span { background: rgba(14,17,14,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244,240,232,.1); border-radius: 99px; padding: 0.35cqw 0.85cqw; white-space: nowrap; }
.c-meta b { font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.c-meta i { display: inline-block; width: 0.55cqw; height: 0.55cqw; border-radius: 50%; background: var(--ok); margin-right: 0.45cqw; vertical-align: 0.05cqw; }

/* The one floating card */
.c-card { position: absolute; right: 1.8cqw; top: 1.8cqw; width: 23cqw; font-size: 1.15cqw;
  background: rgba(14,17,14,.72); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(244,240,232,.1); border-radius: 1.2cqw; padding: 1.3cqw;
  box-shadow: 0 2cqw 4cqw -1cqw rgba(0,0,0,.6); opacity: 0; transform: translateY(-0.8cqw); transition: opacity .45s, transform .45s; }
.c-card.show { opacity: 1; transform: none; }
.c-pane { display: none; }
.c-pane.on { display: block; animation: c-in .35s ease; }
@keyframes c-in { from { opacity: 0; } }
.c-card h4 { margin: 0 0 0.8cqw; font: 500 0.85cqw 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--stone-dim); }
.c-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4cqw; padding: 0.3cqw; background: rgba(244,240,232,.05); border-radius: 0.8cqw; }
.c-seg span { text-align: center; padding: 0.6cqw 0; border-radius: 0.6cqw; color: var(--stone); transition: background .2s, color .2s; }
.c-seg span.on { background: rgba(244,240,232,.14); color: var(--bone); }
.c-count { margin-top: 1cqw; display: none; }
.c-count.show { display: block; animation: c-in .3s ease; }
.c-found { color: var(--ok); font-size: 0.95cqw; margin-bottom: 0.25cqw; }
.c-num { color: var(--stone); }
.c-num b { color: var(--bone); font-weight: 500; font-size: 1.5cqw; margin-right: 0.15cqw; }
.c-btn { margin-top: 1cqw; text-align: center; padding: 0.8cqw; border-radius: 0.8cqw; background: var(--bone); color: #151815; font-weight: 500; position: relative; overflow: hidden; }
.c-pane[data-p="find"] .c-btn { display: none; }
.c-pane[data-p="find"] .c-btn.show { display: block; animation: c-in .3s ease; }
.c-btn span { position: relative; }
.c-export i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(21,24,21,.18); }
.c-export.run i { width: 100%; transition: width 1s linear; }
.c-status { color: var(--stone); }
.c-status.ok { color: var(--ok); }
.c-done { margin-top: 0.8cqw; color: var(--ok); font-size: 1.05cqw; display: none; }
.c-done.show { display: block; animation: c-in .3s ease; }
.c-done span { color: var(--stone); font-family: 'JetBrains Mono', monospace; font-size: 0.95cqw; margin-left: 0.3cqw; }
.cin .press { animation: c-press .25s ease; }
@keyframes c-press { 50% { transform: scale(.95); } }

.c-disc { position: absolute; left: 0; right: 0; bottom: 1.2cqw; text-align: center; font-size: 0.9cqw; color: rgba(244,240,232,.7);
  text-shadow: 0 1px 6px rgba(0,0,0,.8); opacity: 0; transition: opacity .6s; }
.c-stage.has-photo .c-disc { opacity: 1; }

.c-cursor { position: absolute; left: 0; top: 0; width: 1.9cqw; z-index: 5; pointer-events: none; filter: drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.5));
  transition: transform .8s cubic-bezier(.45,.05,.25,1), opacity .4s; }
.c-cursor.click { animation: c-click .22s ease; }
@keyframes c-click { 50% { width: 1.5cqw; } }
.c-drag { position: absolute; left: 0; top: 0; width: 13cqw; aspect-ratio: 4/3; border-radius: 0.6cqw; overflow: hidden; z-index: 4; pointer-events: none;
  border: 0.2cqw solid #fff; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,.6); opacity: 0; transition: transform .9s cubic-bezier(.45,.05,.25,1), opacity .3s; }
.c-drag img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Steps: quiet, neutral */
.c-steps { display: flex; justify-content: center; gap: 3.2cqw; margin: 2cqw 0 0; padding: 0; list-style: none; counter-reset: s; }
.c-steps li { counter-increment: s; font-size: max(12px, 1.05cqw); color: var(--stone-dim); transition: color .4s; display: flex; align-items: center; gap: 0.6em; }
.c-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  border: 1px solid rgba(244,240,232,.18); font-size: .85em; font-family: 'JetBrains Mono', monospace; transition: all .4s; }
.c-steps li.on, .c-steps li.done { color: var(--bone); }
.c-steps li.on::before { border-color: var(--bone); background: var(--bone); color: #151815; }
.c-steps li.done::before { border-color: rgba(244,240,232,.5); }

/* Phones: 4:3 crop, card docked along the bottom */
@container (max-width: 620px) {
  .c-stage { aspect-ratio: 4 / 3; border-radius: 3cqw; }
  .c-meta { font-size: 2.6cqw; left: 2.6cqw; top: 2.6cqw; gap: 1cqw; } .c-meta span:nth-child(2), .c-meta span:nth-child(3) { display: none; }
  .c-meta b, .c-meta span { padding: 0.8cqw 1.8cqw; } .c-meta i { width: 1.4cqw; height: 1.4cqw; margin-right: 1cqw; }
  .c-card { top: auto; bottom: 2.6cqw; left: 2.6cqw; right: 2.6cqw; width: auto; font-size: 3cqw; padding: 2.4cqw; border-radius: 2.6cqw; }
  .c-card h4 { display: none; }
  .c-seg { border-radius: 1.8cqw; padding: 0.7cqw; gap: 1cqw; } .c-seg span { padding: 1.4cqw 0; border-radius: 1.4cqw; }
  .c-count { margin-top: 1.6cqw; } .c-found { font-size: 2.5cqw; } .c-num b { font-size: 3.6cqw; }
  .c-btn { margin-top: 1.6cqw; padding: 1.8cqw; border-radius: 1.8cqw; }
  .c-done { font-size: 2.6cqw; margin-top: 1.4cqw; } .c-done span { font-size: 2.3cqw; }
  .c-disc { font-size: 2.2cqw; bottom: 2cqw; }
  .c-stage.has-photo .c-card.show ~ .c-disc { opacity: 0; }
  .c-drop { font-size: 3.4cqw; }
  .c-title { padding: 0 8cqw; } .c-title span { font-size: 7cqw; }
  .c-cursor { width: 4.4cqw; } .c-drag { width: 26cqw; }
  .c-steps { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 2.4cqw 6cqw; margin-top: 4cqw; } .c-steps li { font-size: max(12px, 3.2cqw); }
}
/* Reset between loops: no transitions, so the old frame never flashes */
.cin.c-snap, .cin.c-snap * { transition: none !important; animation: none !important; }
/* Debug seek (?at=): jump to end states */
.cin.seek *, .cin.seek { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .c-cursor, .c-drag { display: none; } }