/* Self-contained vector walkthroughs: no remote fonts, media, or animation library. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.motion-section { padding-block:85px 20px; }
.film-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.workflow-film { --glow:#d5f99c; position:relative; min-width:0; overflow:hidden; color:#f2f8e9; background:#122d26; border:1px solid #385448; border-radius:20px; box-shadow:0 24px 50px -30px #173c3155; }
.tracing-film { background:#182e32; --glow:#d5f99c; }
.film-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:25px 28px 19px; }
.film-number,.film-preview { font-size:10px; letter-spacing:1.5px; font-weight:650; }
.film-number { color:#d5f99c; }
.film-preview { color:#bfd1c7; padding:6px 8px; border:1px solid #50665b; border-radius:4px; font-size:9px; }
.workflow-film h3 { font-size:29px; letter-spacing:-1px; padding-inline:28px; }
.film-intro { color:#b9cdc3; font-size:13px; padding:9px 28px 23px; }
.film-stage { height:320px; position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at center,#43624465,transparent 70%); }
.film-gridlines { position:absolute; inset:0; background-image:linear-gradient(#9dc6aa0b 1px,transparent 1px),linear-gradient(90deg,#9dc6aa0b 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(transparent,#000 20%,#000 85%,transparent); }
.film-map,.tracing-plan { position:absolute; inset:0; width:100%; height:100%; }
.film-map { opacity:0; transform:scale(1.2); transition:opacity .7s,transform 1.4s cubic-bezier(.2,.7,.2,1); }
.upload-visual { position:absolute; inset:0; display:grid; place-items:center; transition:opacity .45s,transform .7s; }
.upload-orbit { position:absolute; width:245px; height:245px; border:1px dashed #8ba77a66; border-radius:50%; }
.floating-plan { background:#f3f5e9; color:#294c3b; width:214px; padding:17px 16px 12px; border-radius:8px; transform:rotate(-7deg) translateY(-16px); box-shadow:12px 18px 0 -4px #789b6b25,0 25px 50px #0004; animation:plan-arrival 4.4s ease-in-out both; }
.floating-plan>span { font-size:9px; letter-spacing:1.7px; font-weight:700; }
.floating-plan svg:not(.icon) { width:100%; display:block; margin-block:12px; }
.floating-plan small { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #bfcdb7; padding-top:10px; font-size:10px; }
.floating-plan .icon { width:14px; height:14px; }
.upload-chip,.map-badge,.placement-badge,.trace-chip { position:absolute; display:flex; align-items:center; gap:10px; border:1px solid #64835e; border-radius:9px; background:#203e32; color:#e6f6d7; box-shadow:0 8px 30px #0003; font-size:12px; }
.upload-chip { bottom:37px; padding:13px 17px; }
.upload-dots { color:#d5f99c; letter-spacing:2px; animation:upload-pulse 1s ease-in-out infinite alternate; }
.address-visual { position:absolute; top:63px; left:10%; width:80%; opacity:0; transform:translateY(20px); transition:opacity .5s,transform .6s; }
.address-search { display:flex; gap:11px; align-items:center; background:#f4f7ec; color:#234335; border-radius:9px; padding:17px; font-size:15px; box-shadow:0 20px 45px #0003; }
.typing-caret { height:18px; border-right:2px solid #34523f; animation:upload-pulse .6s infinite alternate; }
.address-result { margin-top:7px; background:#e9f4d9; border:2px solid #b7e98c; color:#234335; border-radius:9px; padding:15px 12px; display:flex; gap:10px; align-items:center; }
.address-icon { padding:8px; border-radius:6px; background:#d4e8be; }
.address-result strong { display:block; font-size:13px; }
.address-result small { display:block; font-size:10px; margin-top:5px; }
.address-check { margin-left:auto; color:#2c6742; }
.film-cursor { position:absolute; color:#fff; font-size:35px; line-height:1; text-shadow:0 2px 5px #0008; }
.address-cursor { top:100px; right:22px; }
.film-pin,.placed-plan,.map-ripple { opacity:0; }
.film-pin { transform-origin:260px 178px; }
.map-badge { top:24px; left:24px; padding:10px 14px; opacity:0; }
.map-badge>span:last-child { color:#d5f99c; margin-left:10px; }
.placement-badge { bottom:34px; left:50%; width:max-content; max-width:90%; transform:translateX(-50%); padding:13px 17px; opacity:0; }
.placement-badge strong,.export-visual strong { display:block; font-size:13px; }
.placement-badge small,.export-visual small { display:block; font-size:11px; color:#c3d7c7; margin-top:5px; }
.stage-corner { position:absolute; bottom:10px; left:24px; font-size:9px; letter-spacing:1.5px; color:#a8bfb2; }
.placement-film:not([data-step="0"]) .upload-visual { opacity:0; transform:translateY(-35px) scale(.8); pointer-events:none; }
.placement-film:not([data-step="0"]) .film-map { opacity:.6; transform:scale(1); }
.placement-film[data-step="1"] .address-visual { opacity:1; transform:translateY(0); }
.placement-film[data-step="1"] .address-cursor { animation:address-select 4.4s ease both; }
.placement-film[data-step="2"] .film-map,.placement-film[data-step="3"] .film-map { opacity:1; }
.placement-film[data-step="2"] .film-pin { opacity:1; animation:pin-drop .85s cubic-bezier(.2,.8,.3,1.3) both; }
.placement-film[data-step="2"] .map-ripple { animation:map-pulse 2s ease-out infinite; transform-origin:260px 158px; }
.placement-film[data-step="2"] .map-badge { opacity:1; animation:badge-arrival .7s both; }
.placement-film[data-step="3"] .placed-plan { opacity:1; animation:badge-arrival 1s both; }
.placement-film[data-step="3"] .placement-badge { opacity:1; }
.trace-toolbar { position:absolute; top:13px; left:24px; right:24px; display:flex; justify-content:space-between; align-items:center; z-index:1; font-size:10px; letter-spacing:1.2px; color:#bfd3c8; }
.trace-toolbar>span:first-child { display:flex; align-items:center; gap:7px; }
.trace-toolbar .icon { width:15px; height:15px; }
.raster-lines { transition:opacity .6s; }
.vector-lines,.vector-nodes,.scan-beam,.edit-line,.old-vertex,.edit-cursor { opacity:0; }
.trace-chip { bottom:32px; left:50%; transform:translateX(-50%); width:max-content; max-width:95%; padding:10px 14px; opacity:0; }
.tracing-film[data-step="0"] .source-chip,.tracing-film[data-step="1"] .vector-chip,.tracing-film[data-step="2"] .edit-chip { opacity:1; }
.tracing-film:not([data-step="0"]) .raster-lines { opacity:.2; }
.tracing-film:not([data-step="0"]) .vector-lines,.tracing-film:not([data-step="0"]) .vector-nodes { opacity:1; }
.tracing-film[data-step="1"] .vector-lines path { stroke-dasharray:1; animation:vector-draw 3.5s ease both; }
.tracing-film[data-step="1"] .vector-nodes { animation:nodes-reveal 3.7s ease both; }
.tracing-film[data-step="1"] .scan-beam { animation:scan-sweep 3.5s ease-in-out both; }
.tracing-film[data-step="2"] .old-vertex { opacity:.55; }
.tracing-film[data-step="2"] .edit-line { opacity:1; }
.tracing-film[data-step="2"] .edit-line path { animation:vertex-line 3.5s ease both; }
.tracing-film[data-step="2"] .edit-line circle { animation:vertex-dot 3.5s ease both; }
.edit-cursor { top:46%; left:65%; z-index:2; }
.edit-cursor span { display:block; font-size:10px; padding:6px 9px; border-radius:4px; background:#d5f99c; color:#173c31; text-shadow:none; white-space:nowrap; }
.tracing-film[data-step="2"] .edit-cursor { opacity:1; animation:edit-pointer 3.5s ease both; }
.export-visual { position:absolute; left:8%; right:8%; top:104px; padding:21px; display:flex; gap:14px; align-items:center; background:#204435f5; border:1px solid #92b975; border-radius:12px; box-shadow:0 12px 60px #0006; opacity:0; transform:translateY(20px) scale(.95); }
.export-symbol { color:#d5f99c; font:28px monospace; }
.export-check { margin-left:auto; background:#d5f99c; color:#203c31; border-radius:50%; width:28px; height:28px; display:grid; place-items:center; flex-shrink:0; }
.tracing-film[data-step="3"] .export-visual { opacity:1; transform:none; transition:transform .6s,opacity .6s; }
.tracing-film[data-step="3"] .tracing-plan { opacity:.45; transition:opacity .6s; }
.film-caption { display:flex; align-items:flex-start; gap:15px; margin:13px 28px 20px; min-height:43px; }
.film-caption>span { color:#d5f99c; white-space:nowrap; font:11px/1.9 monospace; }
.film-caption p { color:#d2e0d6; font-size:12px; line-height:1.7; }
.film-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0 24px; gap:5px; }
.film-steps button { --progress:0; border:0; border-top:2px solid #4d655a; background:transparent; color:#bcd0c3; display:flex; justify-content:center; align-items:center; gap:6px; min-height:53px; padding:12px 3px; font-size:11px; position:relative; }
.film-steps button::before { content:""; position:absolute; top:-2px; left:0; height:2px; width:100%; background:#d5f99c; transform:scaleX(var(--progress)); transform-origin:left; }
.film-steps button[aria-pressed="true"] { color:#e1ffb9; background:#d5f99c0b; }
.film-steps .icon { width:15px; height:15px; }
.film-steps button:hover,.film-controls button:hover { color:#fff; background:#ffffff0c; }
.film-controls { display:flex; gap:15px; align-items:center; border-top:1px solid #40584c; margin:0 24px; padding:8px 0; }
.film-controls button { background:none; color:#c6d8cb; border:0; padding:10px 4px; min-height:44px; font-size:11px; text-align:left; }
.film-controls button:disabled { opacity:.5; cursor:default; }
.film-duration { margin-left:auto; color:#a8bfb2; font-size:9px; letter-spacing:1px; white-space:nowrap; }
.workflow-film :focus-visible { outline:2px solid #d5f99c; outline-offset:2px; }
.workflow-film[data-running="false"] *, .workflow-film[data-running="false"] *::before { animation-play-state:paused!important; }
.workflow-film:not([data-film-ready]) *, .workflow-film[data-static="true"] * { animation:none!important; }
.workflow-film[data-static="true"] .edit-line path { d:path("M298 124 350 124 420 124"); }
.workflow-film[data-static="true"] .edit-line circle { transform:translateY(-23px); }
.workflow-film[data-static="true"] .edit-cursor { transform:translateY(-23px); }
.motion-note { display:flex; align-items:flex-start; gap:8px; font-size:12px; line-height:1.75; max-width:950px; margin:23px auto 0; text-align:center; }
.motion-note .icon { width:16px; height:16px; margin-top:3px; }
@keyframes plan-arrival { 0% { opacity:0; transform:translate(25px,-35px) rotate(5deg) scale(.8); } 20%,80% { opacity:1; transform:translateY(-16px) rotate(-7deg); } 100% { transform:translateY(-21px) rotate(-5deg); } }
@keyframes upload-pulse { from { opacity:.4; } to { opacity:1; } }
@keyframes address-select { 0%,20% { transform:translate(40px,55px); opacity:0; } 45%,100% { transform:none; opacity:1; } 55% { transform:scale(.8); } }
@keyframes pin-drop { from { transform:translateY(-55px) scale(.7); opacity:0; } to { transform:none; opacity:1; } }
@keyframes map-pulse { from { transform:scale(.25); opacity:.8; } to { transform:scale(1.6); opacity:0; } }
@keyframes badge-arrival { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@keyframes vector-draw { 0%,8% { stroke-dashoffset:1; } 90%,100% { stroke-dashoffset:0; } }
@keyframes nodes-reveal { 0%,55% { opacity:0; } 100% { opacity:1; } }
@keyframes scan-sweep { 0% { opacity:0; transform:translateY(0); } 12%,85% { opacity:1; } 100% { opacity:0; transform:translateY(235px); } }
@keyframes vertex-line { 0%,20% { d:path("M298 124 350 147 420 124"); } 65%,100% { d:path("M298 124 350 124 420 124"); } }
@keyframes vertex-dot { 0%,20% { transform:translateY(0); } 65%,100% { transform:translateY(-23px); } }
@keyframes edit-pointer { 0%,20% { transform:translateY(0); } 65%,100% { transform:translateY(-23px); } }
@media(max-width:950px) { .film-grid { grid-template-columns:1fr; max-width:650px; margin:auto; } }
@media(max-width:650px) {
  .motion-section { padding-block:55px 10px; }
  .film-heading { padding:20px 18px 16px; }
  .workflow-film h3 { padding-inline:18px; font-size:25px; }
  .film-intro { padding-inline:18px; font-size:12px; }
  .film-stage { height:280px; }
  .film-caption { margin-inline:18px; min-height:41px; }
  .film-steps { padding-inline:14px; }
  .film-steps button { flex-direction:column; gap:7px; }
  .film-controls { margin-inline:14px; gap:8px; flex-wrap:wrap; }
  .film-duration { display:none; }
  .film-preview { font-size:8px; letter-spacing:1px; }
  .film-number { font-size:9px; }
  .address-visual { width:90%; left:5%; }
  .address-result { gap:6px; padding:12px 8px; }
  .address-icon { padding:5px; }
  .address-result small { font-size:9px; }
  .trace-toolbar { left:18px; right:18px; font-size:9px; }
  .trace-chip { font-size:10px; padding:10px; bottom:28px; }
  .export-visual { left:5%; right:5%; padding:16px 12px; gap:10px; }
  .export-visual strong { font-size:12px; }
  .export-symbol { font-size:23px; }
  .motion-note { text-align:left; }
}
@media(prefers-reduced-motion:reduce) {
  .workflow-film *, .workflow-film *::before { animation:none!important; transition:none!important; }
  .tracing-film[data-step="2"] .edit-line path { d:path("M298 124 350 124 420 124"); }
  .tracing-film[data-step="2"] .edit-line circle { transform:translateY(-23px); }
  .tracing-film[data-step="2"] .edit-cursor { transform:translateY(-23px); }
}