/* "How it works" animated step cards (_step_scene.html).
   Real screenshot + overlay layer. Every animation is declared paused and only runs while the
   observer has put .is-playing on the card, so with no JS (or reduced motion) a card is just the
   plain screenshot. Only transform/opacity/clip-path are animated. Overlay positions are % of the
   screenshot (translate % = the full-size overlay); sizes use cqw so they scale with the card. */

.step-scene{ aspect-ratio:1600/907; display:block; position:relative; }
.step-scene .hiw-stage{ position:relative; width:100%; height:100%; container-type:inline-size; overflow:hidden; }
.step-scene .hiw-zoom{ position:absolute; inset:0; }
.step-scene .hiw-zoom img{ display:block; width:100%; height:100%; object-fit:cover; }
.step-scene .hiw-zoom img{ transition:opacity .35s ease; }
html.hiw-js .step-scene .hiw-zoom img:not(.is-loaded){ opacity:0; }
.step-scene .hiw-ov{ position:absolute; inset:0; pointer-events:none; font-family:'Source Sans 3',system-ui,sans-serif; font-size:8px; font-size:1.5cqw; }

.step-scene .hx{
  animation-duration:var(--hiw-d,9s);
  animation-delay:var(--hiw-delay,0s);
  animation-iteration-count:infinite;
  animation-fill-mode:both;
  animation-play-state:paused;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}
.step-scene.is-playing .hx{ animation-play-state:running; }

/* shared pieces */
.step-scene .hiw-cursor{ position:absolute; inset:0; opacity:0; }
.step-scene .hiw-arrow{ position:absolute; left:0; top:0; width:3.2cqw; height:4.4cqw; filter:drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.35)); }
.step-scene .hiw-ring{ position:absolute; left:-1.4cqw; top:-1.4cqw; width:2.8cqw; height:2.8cqw; border-radius:50%; border:.3cqw solid var(--accent,#1B5FA8); opacity:0; }
.step-scene .hiw-bar{ display:block; height:.7cqw; background:#e3e6ea; border-radius:1cqw; overflow:hidden; font-style:normal; }
.step-scene .hiw-bar i{ display:block; height:100%; width:100%; background:var(--accent,#1B5FA8); transform-origin:0 50%; transform:scaleX(0); border-radius:inherit; }

/* ───── 01 upload ───── */
.step-scene[data-hiw="upload"] .hiw-zoom{ transform-origin:82% 88%; animation-name:hiw-u-zoom; }
.hiw-drop{ position:absolute; left:6%; top:13%; width:88%; height:78%; border:.35cqw dashed var(--accent,#1B5FA8); border-radius:1.2cqw; background:rgba(27,95,168,.08); display:flex; align-items:flex-end; justify-content:center; padding-bottom:6cqw; box-sizing:border-box; opacity:0; animation-name:hiw-u-drop; }
.hiw-drop span{ font-weight:700; font-size:2.6cqw; color:var(--accent,#1B5FA8); background:#fff; padding:.8cqw 1.8cqw; border-radius:5cqw; box-shadow:0 .4cqw 1.6cqw rgba(0,0,0,.12); }
.hiw-drag{ transform-origin:0 0; animation-name:hiw-u-drag; }
.hiw-chip{ position:absolute; left:0; top:0; transform:translate(var(--dx,0),var(--dy,0)); display:flex; align-items:center; gap:.9cqw; width:19cqw; padding:1cqw 1.2cqw; background:#fff; border:1px solid #d9dce1; border-radius:.9cqw; box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.18); font-size:1.7cqw; font-weight:600; color:#1a1a1a; white-space:nowrap; }
.hiw-chip b{ background:#d93025; color:#fff; font-size:1.2cqw; padding:.4cqw .7cqw; border-radius:.5cqw; }
.hiw-toast{ position:absolute; right:3%; bottom:6%; width:31%; padding:1.4cqw; background:#fff; border:1px solid #d9dce1; border-radius:1cqw; box-shadow:0 .8cqw 2.4cqw rgba(0,0,0,.2); display:grid; gap:.9cqw; opacity:0; animation-name:hiw-u-toast; }
.hiw-toast-h{ position:relative; height:2.2cqw; font-weight:700; font-size:1.8cqw; color:#1a1a1a; }
.hiw-toast-h span{ position:absolute; left:0; top:0; white-space:nowrap; }
.hiw-toast-h .t-up{ animation-name:hiw-u-tup; }
.hiw-toast-h .t-done{ animation-name:hiw-u-tdone; color:#1e7b45; }
.hiw-toast-h .t-done i{ font-style:normal; margin-right:.6cqw; }
.hiw-toast-h .t-done i::before{ content:"\2713"; }
.hiw-toast .b1{ animation-name:hiw-u-b1; } .hiw-toast .b2{ animation-name:hiw-u-b2; } .hiw-toast .b3{ animation-name:hiw-u-b3; }

@keyframes hiw-u-zoom{ 0%,36%{transform:scale(1)} 46%,88%{transform:scale(1.45)} 97%,100%{transform:scale(1)} }
@keyframes hiw-u-drag{
  0%,6%{opacity:0;transform:translate(70%,-20%)}
  9%{opacity:1;transform:translate(70%,-20%)}
  28%,33%{opacity:1;transform:translate(40%,40%)}
  37%,100%{opacity:0;transform:translate(40%,41%) scale(.92)}
}
@keyframes hiw-u-drop{ 0%,14%{opacity:0} 20%,32%{opacity:1} 38%,100%{opacity:0} }
@keyframes hiw-u-toast{ 0%,38%{opacity:0;transform:translateY(14%)} 44%,90%{opacity:1;transform:none} 96%,100%{opacity:0;transform:none} }
@keyframes hiw-u-tup{ 0%,66%{opacity:1} 70%,100%{opacity:0} }
@keyframes hiw-u-tdone{ 0%,68%{opacity:0} 72%,100%{opacity:1} }
@keyframes hiw-u-b1{ 0%,44%{transform:scaleX(0)} 56%,100%{transform:scaleX(1)} }
@keyframes hiw-u-b2{ 0%,48%{transform:scaleX(0)} 62%,100%{transform:scaleX(1)} }
@keyframes hiw-u-b3{ 0%,52%{transform:scaleX(0)} 68%,100%{transform:scaleX(1)} }
.hiw-toast .hiw-bar i{ animation-timing-function:linear; }

/* ───── 02 select ───── */
.step-scene[data-hiw="select"] .hiw-zoom{ transform-origin:50% 65%; animation-name:hiw-s-zoom; }
.step-scene[data-hiw="select"] .hiw-cursor{ animation-name:hiw-s-cursor; }
.step-scene[data-hiw="select"] .hiw-ring{ animation-name:hiw-s-ring; }
.hiw-tick{ position:absolute; left:calc(27.85% - .75cqw); top:calc(51.6% - .75cqw); width:1.5cqw; height:1.5cqw; background:#4f63d6; border-radius:.25cqw; opacity:0; animation-name:hiw-s-tick; }
.hiw-tick svg{ display:block; width:100%; height:100%; }
.hiw-type{ position:absolute; left:15.4%; top:67.9%; width:69.2%; height:4.6%; background:#fff; display:flex; align-items:center; padding-left:1.1cqw; font-size:1.25cqw; color:#222; opacity:0; animation-name:hiw-s-cover; }
.hiw-type span{ white-space:nowrap; clip-path:inset(0 100% 0 0); animation-name:hiw-s-type; animation-timing-function:steps(38,end); }
.hiw-submit{ position:absolute; left:78.5%; top:79.6%; width:7.6%; height:4.4%; background:#4339b8; color:#fff; border-radius:.5cqw; display:flex; align-items:center; justify-content:center; gap:.45cqw; font-size:1.05cqw; font-weight:600; white-space:nowrap; overflow:hidden; padding:0 .5cqw; box-sizing:border-box; opacity:0; animation-name:hiw-s-submit; }
.hiw-submit u{ flex:none; width:.9cqw; height:.9cqw; border:.2cqw solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:hiw-spin .8s linear infinite; animation-play-state:paused; }
.step-scene.is-playing .hiw-submit u{ animation-play-state:running; }
@keyframes hiw-spin{ to{transform:rotate(360deg)} }

@keyframes hiw-s-zoom{ 0%{transform:scale(1)} 10%,88%{transform:scale(1.3)} 97%,100%{transform:scale(1)} }
@keyframes hiw-s-cursor{
  0%,6%{opacity:0;transform:translate(64%,24%)}
  9%{opacity:1;transform:translate(64%,24%)}
  24%,30%{opacity:1;transform:translate(28%,52.5%)}
  42%,60%{opacity:1;transform:translate(32%,70.5%)}
  74%,92%{opacity:1;transform:translate(82.5%,82.5%)}
  97%,100%{opacity:0;transform:translate(82.5%,82.5%)}
}
@keyframes hiw-s-ring{
  0%,24%{opacity:0;transform:scale(.3)} 26%{opacity:.9;transform:scale(.5)} 32%{opacity:0;transform:scale(1.6)}
  33%,41%{opacity:0;transform:scale(.3)} 43%{opacity:.9;transform:scale(.5)} 49%{opacity:0;transform:scale(1.6)}
  50%,73%{opacity:0;transform:scale(.3)} 75%{opacity:.9;transform:scale(.5)} 81%{opacity:0;transform:scale(1.6)}
  82%,100%{opacity:0;transform:scale(.3)}
}
@keyframes hiw-s-tick{ 0%,26%{opacity:0;transform:scale(.4)} 29%{opacity:1;transform:scale(1.25)} 32%,95%{opacity:1;transform:scale(1)} 98%,100%{opacity:0;transform:scale(1)} }
@keyframes hiw-s-cover{ 0%,43%{opacity:0} 44%,95%{opacity:1} 98%,100%{opacity:0} }
@keyframes hiw-s-type{ 0%,45%{clip-path:inset(0 100% 0 0)} 60%,95%{clip-path:inset(0 0 0 0)} 98%,100%{clip-path:inset(0 100% 0 0)} }
@keyframes hiw-s-submit{ 0%,76%{opacity:0;transform:scale(.96)} 78%,92%{opacity:1;transform:scale(1)} 97%,100%{opacity:0;transform:scale(1)} }

/* ───── 03 export ───── */
.step-scene[data-hiw="export"] .hiw-zoom{ transform-origin:78% 97%; animation-name:hiw-e-zoom; }
.step-scene[data-hiw="export"] .hiw-cursor{ animation-name:hiw-e-cursor; }
.step-scene[data-hiw="export"] .hiw-ring{ animation-name:hiw-e-ring; }
.hiw-scan{ position:absolute; left:18%; top:12%; width:64%; height:81%; overflow:hidden; opacity:0; animation-name:hiw-e-scan; }
.hiw-beam{ width:100%; height:100%; background:linear-gradient(90deg,transparent 80%,rgba(27,95,168,.22)); border-right:.3cqw solid var(--accent,#1B5FA8); transform:translateX(-100%); animation-name:hiw-e-beam; animation-timing-function:linear; }
.hiw-btnglow{ position:absolute; left:70.35%; top:95%; width:12.3%; height:4.1%; border-radius:.5cqw; box-shadow:0 0 0 .4cqw rgba(79,99,214,.55); opacity:0; animation-name:hiw-e-glow; }
.hiw-menu{ position:absolute; left:59.5%; bottom:6%; width:27.5%; background:#fff; border:1px solid #d9dce1; border-radius:1cqw; box-shadow:0 .8cqw 2.4cqw rgba(0,0,0,.22); overflow:hidden; opacity:0; animation-name:hiw-e-menu; }
.hiw-menu-h{ padding:.9cqw 1.3cqw; font-size:1.3cqw; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid #eceef1; }
.hiw-row{ position:relative; display:flex; align-items:center; gap:1cqw; padding:1cqw 1.3cqw 1.3cqw; font-size:1.55cqw; font-weight:600; color:#1a1a1a; white-space:nowrap; }
.hiw-row + .hiw-row{ border-top:1px solid #eceef1; }
.hiw-row b{ background:#d93025; color:#fff; font-size:1.1cqw; padding:.4cqw .6cqw; border-radius:.4cqw; }
.hiw-row b.xl{ background:#1e7b45; }
.hiw-st{ position:relative; margin-left:auto; width:1.8cqw; height:1.8cqw; }
.hiw-st i{ position:absolute; inset:0; font-style:normal; text-align:center; line-height:1.8cqw; font-weight:700; }
.hiw-st .dl{ color:#6b7280; } .hiw-st .ok{ color:#1e7b45; opacity:0; }
.hiw-row .hiw-bar{ position:absolute; left:1.3cqw; right:1.3cqw; bottom:.5cqw; height:.45cqw; }
.hiw-row .hiw-bar i{ background:#1e7b45; }
.hiw-menu .b1{ animation-name:hiw-e-b1; animation-timing-function:linear; } .hiw-menu .b2{ animation-name:hiw-e-b2; animation-timing-function:linear; }
.hiw-menu .r1-dl{ animation-name:hiw-e-r1dl; } .hiw-menu .r1-ok{ animation-name:hiw-e-r1ok; }
.hiw-menu .r2-dl{ animation-name:hiw-e-r2dl; } .hiw-menu .r2-ok{ animation-name:hiw-e-r2ok; }

@keyframes hiw-e-zoom{ 0%,24%{transform:scale(1)} 36%,88%{transform:scale(1.7)} 97%,100%{transform:scale(1)} }
@keyframes hiw-e-scan{ 0%{opacity:0} 2%,16%{opacity:1} 22%,100%{opacity:0} }
@keyframes hiw-e-beam{ 0%,2%{transform:translateX(-100%)} 18%,100%{transform:translateX(0)} }
@keyframes hiw-e-cursor{
  0%,18%{opacity:0;transform:translate(56%,62%)}
  21%{opacity:1;transform:translate(56%,62%)}
  36%,40%{opacity:1;transform:translate(73%,95.5%)}
  46%,54%{opacity:1;transform:translate(72%,84.7%)}
  60%,92%{opacity:1;transform:translate(72%,90.7%)}
  97%,100%{opacity:0;transform:translate(72%,90.7%)}
}
@keyframes hiw-e-ring{
  0%,36%{opacity:0;transform:scale(.3)} 38%{opacity:.9;transform:scale(.5)} 43%{opacity:0;transform:scale(1.6)}
  44%,46%{opacity:0;transform:scale(.3)} 47%{opacity:.9;transform:scale(.5)} 52%{opacity:0;transform:scale(1.6)}
  53%,60%{opacity:0;transform:scale(.3)} 61%{opacity:.9;transform:scale(.5)} 66%{opacity:0;transform:scale(1.6)}
  67%,100%{opacity:0;transform:scale(.3)}
}
@keyframes hiw-e-glow{ 0%,35%{opacity:0} 38%{opacity:1} 46%,100%{opacity:0} }
@keyframes hiw-e-menu{ 0%,39%{opacity:0;transform:translateY(8%)} 43%,92%{opacity:1;transform:none} 97%,100%{opacity:0;transform:none} }
@keyframes hiw-e-b1{ 0%,48%{transform:scaleX(0)} 56%,100%{transform:scaleX(1)} }
@keyframes hiw-e-b2{ 0%,62%{transform:scaleX(0)} 70%,100%{transform:scaleX(1)} }
@keyframes hiw-e-r1dl{ 0%,56%{opacity:1} 57%,100%{opacity:0} }
@keyframes hiw-e-r1ok{ 0%,56%{opacity:0} 58%,100%{opacity:1} }
@keyframes hiw-e-r2dl{ 0%,70%{opacity:1} 71%,100%{opacity:0} }
@keyframes hiw-e-r2ok{ 0%,70%{opacity:0} 72%,100%{opacity:1} }

@media (prefers-reduced-motion: reduce){
  .step-scene .hx, .hiw-submit u{ animation:none !important; }
  .step-scene .hiw-ov{ display:none; }
}