/* Caster Tech Vietnam — the brand film and its UI scenes.
   Shared by film.html (standalone, render) and index-motion.html (hero film + service cards).
   Every motion is a CSS animation delayed by var(--s) (its scene's start) + var(--t); film.js pauses them all
   and drives currentTime from one clock, so a film can loop, seek to a chapter, or render frame by frame.
   Scene visuals are drawn at a fixed 1000 x 820 and scaled to fit wherever they are shown. */
:root {
  --orange: #F26522; --orange-deep: #D4511A; --orange-soft: #FFEADF; --yellow: #FCAF17; --yellow-soft: #FFF3D9;
  --ink: #141416; --ink-2: #3D3D40; --muted: #6E6E75; --line: #ECE7E1; --fill: #F5F2EE;
  --green: #1C9A60; --green-soft: #E2F4EA;
  --canvas: #FFFFFF;
  --display: "Inter Tight", "Inter", "Noto Sans JP", system-ui, sans-serif; --text: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1); --ease-in: cubic-bezier(.55, 0, .75, .2);
}

.film, .film *, .viz, .viz * { box-sizing: border-box; }

/* ---------- Motion vocabulary (transform, opacity and clip-path only) ---------- */
.a { animation-duration: var(--d, 800ms); animation-timing-function: var(--ease-out); animation-delay: calc(var(--s, 0ms) + var(--t, 0ms)); animation-fill-mode: both; }
.a-rise { animation-name: a-rise; }
.a-fade { animation-name: a-fade; animation-timing-function: var(--ease-io); }
.a-left { animation-name: a-left; }
.a-pop { animation-name: a-pop; animation-timing-function: var(--ease-back); }
.a-wipe { animation-name: a-wipe; animation-timing-function: var(--ease-io); }
@keyframes a-rise { from { opacity: 0; transform: translate3d(0, 36px, 0); } to { opacity: 1; transform: none; } }
@keyframes a-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes a-left { from { opacity: 0; transform: translate3d(-36px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes a-pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes a-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes a-up { from { transform: scaleY(0); } to { transform: none; } }
@keyframes a-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes a-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes a-run { 0% { offset-distance: 0%; opacity: 0; } 12%, 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes a-line { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes a-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes a-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -1.6px, 0); } }
@keyframes a-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.82); opacity: .7; } }

/* Headings rise line by line out of a mask. */
.ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.ln > span { display: inline-block; animation: a-line 1000ms var(--ease-out) calc(var(--s, 0ms) + var(--t, 0ms)) both; }

/* The logo's spark: a spinning top hovering over its shadow. It bobs; it is never rotated or restyled. */
.spark { display: block; overflow: visible; }
.spark .spark-top { transform-box: fill-box; animation: a-bob 2400ms ease-in-out infinite; }
.spark .spark-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: a-shadow 2400ms ease-in-out infinite; }

/* The logo lockup from logo.js: the flat logo, with the shuttle on its own layer so it can spin. */
.lockup { position: relative; display: block; }
.lockup-art { display: block; width: 100%; height: auto; overflow: visible; }
.lockup .c { fill: var(--orange); }
.lockup .c-line { fill: none; stroke: #fff; stroke-width: 20; stroke-linejoin: round; stroke-dasharray: 1 1; }
.lockup .shadow { fill: #E7E7E8; transform-box: fill-box; transform-origin: 50% 50%; }
.lockup .word { fill: #000; }
.lockup .w { transform-box: fill-box; transform-origin: 50% 100%; }
.lockup .shuttle { position: absolute; left: 11.7522%; top: 35.303%; width: 4.9987%; height: 27.727%; }
.lockup .shuttle-spin, .lockup .shuttle svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lockup .sh-top { fill: var(--yellow); }
.lockup .sh-low { fill: var(--orange); }
.lockup .band { transform: translateX(-2px); }
.lockup .band-light { fill: rgba(255, 255, 255, .6); }
.lockup .band-dark { fill: rgba(140, 40, 0, .3); }

.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ==========================================================
   The film: a full-bleed field with a 1920 x 1080 stage (1080 x 1920 on tall screens) scaled to fit.
   ========================================================== */
/* A clean white field, like the page: each scene sits on soft peach tiles with a dashed orbit and icon bubbles. */
.film { position: relative; overflow: hidden; isolation: isolate; background: var(--canvas); color: var(--ink); font-family: var(--text); -webkit-font-smoothing: antialiased; }
.film-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--fit, 1)); }
.film.is-portrait .film-stage { width: 1080px; height: 1920px; }

.scene { position: absolute; inset: 0; visibility: hidden; animation: scene-on 1ms step-end var(--s) both, scene-off 520ms var(--ease-in) calc(var(--e) - 520ms) forwards; }
@keyframes scene-on { from { visibility: hidden; } to { visibility: visible; } }
@keyframes scene-off { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -22px, 0); } }

/* Copy beside the visual (landscape) or above it (portrait). */
.copy { position: absolute; top: 50%; width: 620px; transform: translateY(-50%); }
.copy-left .copy { left: 130px; }
.copy-right .copy { left: 1170px; }
.copy .label { display: block; margin-bottom: 26px; color: var(--orange); font: 700 20px/1.3 var(--text); letter-spacing: .16em; text-transform: uppercase; }
.copy h2 { margin: 0; font: 700 80px/1.04 var(--display); letter-spacing: -.038em; }
.copy h2 .ln + .ln { color: var(--orange); }
.copy p { margin: 30px 0 0; max-width: 560px; color: var(--muted); font: 400 28px/1.55 var(--text); }
.slot { position: absolute; top: 118px; width: 1000px; height: 820px; }
.copy-left .slot { left: 790px; }
.copy-right .slot { left: 130px; }
.film.is-portrait .copy { left: 90px; right: 90px; top: 210px; width: auto; transform: none; }
.film.is-portrait .copy .label { font-size: 30px; margin-bottom: 30px; }
.film.is-portrait .copy h2 { font-size: 112px; }
.film.is-portrait .copy p { font-size: 40px; max-width: none; }
.film.is-portrait .slot { left: 40px; top: 860px; }

/* Each scene's setting (film.js withSetting): the logo's C in a soft tone behind the cards, a dashed orbit, and
   stations on it that light up with a tick as the shuttle (the logo's spark) brings the work to them. Stations pop
   and then float on the individual translate property, so the float never fights the pop. */
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx-front { z-index: 3; }
.fx-c { position: absolute; left: 190px; top: 30px; width: 640px; height: 754px; overflow: visible; fill: #FFF0E7;
  transform-origin: 50% 50%; animation: fx-c 1200ms var(--ease-out) var(--s, 0ms) both; }
@keyframes fx-c { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.fx-orbit { position: absolute; left: 0; top: 0; width: 1000px; height: 820px; overflow: visible; fill: none; }
.fx-orbit ellipse { stroke: rgba(242, 101, 34, .5); stroke-width: 2.2; stroke-dasharray: 4 12; stroke-linecap: round;
  animation: a-fade 900ms var(--ease-io) calc(var(--s, 0ms) + 250ms) both, fx-orbit 40s linear var(--s, 0ms) infinite; }
@keyframes fx-orbit { to { stroke-dashoffset: -320; } }
.fx-orbit .port, .fx-ship.port { visibility: hidden; }
.film.is-portrait .fx-orbit .port, .film.is-portrait .fx-ship.port { visibility: visible; }
.film.is-portrait .fx-orbit .land, .film.is-portrait .fx-ship.land { visibility: hidden; }

/* A station: white and grey until its step happens, then orange with a ring and a green tick. */
.fx-bub { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: #fff; color: #B3ACA5; box-shadow: 0 2px 4px rgba(70, 35, 10, .06), 0 22px 40px -18px rgba(120, 60, 20, .45);
  animation: a-pop 600ms var(--ease-back) calc(var(--s, 0ms) + var(--t)) both, fx-float 6s ease-in-out calc(var(--s, 0ms) + var(--t)) infinite,
    fx-on 420ms var(--ease-out) calc(var(--s, 0ms) + var(--on)) both; }
.fx-bub .ico { width: 32px; height: 32px; stroke-width: 2; }
.fx-bub .ico > * { stroke-dasharray: 1 1; animation: a-draw 800ms var(--ease-io) calc(var(--s, 0ms) + var(--t) + 120ms) both; }
.fx-bub::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--orange); opacity: 0; animation: fx-ring 900ms var(--ease-out) calc(var(--s, 0ms) + var(--on)) forwards; }
.fx-ok { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 0 0 4px #fff;
  animation: a-pop 420ms var(--ease-back) calc(var(--s, 0ms) + var(--on) + 200ms) both; }
.fx-ok .ico { width: 16px; height: 16px; stroke-width: 3.4; }
.fx-ok .ico > * { animation: none; stroke-dasharray: none; }
@keyframes fx-on { from { background: #fff; color: #B3ACA5; } to { background: var(--orange); color: #fff; box-shadow: 0 2px 4px rgba(70, 35, 10, .06), 0 20px 36px -14px rgba(242, 101, 34, .75); } }
@keyframes fx-ring { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes fx-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.film.is-portrait .fx-bub { left: var(--px); top: var(--py); }
.film.is-portrait .fx-bub.no-port { visibility: hidden; }

/* The shuttle: the logo's spark, out on the orbit between two stations, docked (hidden) inside one. */
.fx-ship { position: absolute; left: 0; top: 0; width: 46px; height: 48px; padding: 6px; border-radius: 50%; background: #fff; offset-rotate: 0deg;
  box-shadow: 0 10px 22px -10px rgba(242, 101, 34, .7); animation-duration: 4600ms; animation-timing-function: linear; animation-delay: var(--s, 0ms); animation-fill-mode: both; }
.fx-ship .spark { display: block; width: 100%; height: 100%; }

/* The opening title: the four services as stations around the words. */
.fx-open .fx-bub { z-index: 1; }
.intro-wrap, .end-wrap { position: relative; }

/* Intro and end card */
.intro, .end { display: grid; place-items: center; text-align: center; }
.intro-wrap, .end-wrap { display: flex; flex-direction: column; align-items: center; }
.intro-wrap { transform: translateY(-24px); }
.scene.end { animation: scene-on 1ms step-end var(--s) both, a-out 520ms var(--ease-in) calc(var(--e) - 520ms) forwards; }
.pill { display: inline-flex; align-items: center; gap: 14px; height: 64px; padding: 0 30px 0 22px; border-radius: 999px; background: rgba(255, 255, 255, .86);
  box-shadow: 0 1px 2px rgba(80, 40, 10, .06), 0 18px 40px -18px rgba(150, 70, 20, .3); font: 600 24px/1 var(--text); color: var(--ink-2); }
.pill .spark { width: 34px; height: 35px; }
.pill i { width: 5px; height: 5px; border-radius: 50%; background: #CFC8C0; }
.intro-title { margin: 46px 0 0; font: 700 150px/1.02 var(--display); letter-spacing: -.045em; }
.intro-title .ln + .ln { color: var(--orange); }
.intro-tag { margin: 34px 0 0; color: var(--muted); font: 400 32px/1.5 var(--text); }
.film.is-portrait .intro-title { font-size: 104px; }
.film.is-portrait .intro-tag { font-size: 38px; max-width: 860px; }
.film.is-portrait .pill { font-size: 30px; height: 76px; }
.end-logo { width: 760px; }
.film-logo svg { display: block; width: 100%; height: auto; }
/* End card logo: the C draws itself, the shuttle drops in spinning and comes to rest, the name rises. */
.end .c-line { animation: a-draw 1100ms var(--ease-io) calc(var(--s) + 100ms) both; }
.end .shuttle { animation: sh-drop 1000ms linear calc(var(--s) + 500ms) both; }
.end .shuttle-spin { animation: ctv-drop-spin 2300ms linear calc(var(--s) + 500ms) both; }
.end .band { animation: ctv-drop-band 2300ms linear calc(var(--s) + 500ms) both; }
.end .shadow { animation: shadow-in 900ms var(--ease-out) calc(var(--s) + 1000ms) both; }
.end .w { animation: w-rise 700ms var(--ease-out) calc(var(--s) + 1350ms + var(--i) * 28ms) both; }
.end .w.i-spark { transform-origin: 50% 50%; animation: i-twinkle 600ms var(--ease-back) calc(var(--s) + 2050ms) both; }
@keyframes sh-drop {
  0% { opacity: 0; transform: translate3d(0, -360%, 0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  20% { opacity: 1; }
  62% { transform: translate3d(0, 6%, 0); animation-timing-function: cubic-bezier(.25, 1, .5, 1); }
  100% { opacity: 1; transform: none; } }
@keyframes shadow-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes w-rise { from { opacity: 0; transform: translate3d(0, 45%, 0); } to { opacity: 1; transform: none; } }
@keyframes i-twinkle { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
.end-line { margin: 56px 0 0; font: 700 72px/1.06 var(--display); letter-spacing: -.035em; }
.end-line .ln + .ln { color: var(--orange); }
.end-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 44px; height: 72px; padding: 0 36px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 26px/1 var(--text); }
.film.is-portrait .end-logo { width: 860px; }
.film.is-portrait .end-line { font-size: 84px; }

/* Chrome: corner logo (standalone only), note, chapters */
.film-logo { position: absolute; left: 130px; top: 64px; width: 300px; animation: a-fade 500ms var(--ease-io) 3600ms both, a-out 400ms var(--ease-in) 21800ms forwards; }
.film.is-embed .film-logo { display: none; }
.film.is-portrait .film-logo { left: 90px; top: 90px; width: 380px; }
.film-note { position: absolute; left: 130px; bottom: 54px; color: #8F887F; font: 400 16px/1 var(--text); animation: a-fade 500ms var(--ease-io) 3600ms both, a-out 400ms var(--ease-in) 21800ms forwards; }
.film.is-portrait .film-note { left: 90px; bottom: 72px; font-size: 24px; }
.chapters { position: absolute; left: 50%; bottom: 44px; display: flex; gap: 28px; transform: translateX(-50%); animation: ch-out 400ms var(--ease-in) 21800ms forwards; }
@keyframes ch-out { to { opacity: 0; visibility: hidden; } }
.chapters button { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; width: 200px; padding: 10px 0; cursor: pointer; color: #A39C95; font: 600 17px/1 var(--text); letter-spacing: .02em; transition: color .3s; }
.chapters .ch b { color: inherit; font-weight: 700; margin-right: 8px; }
.chapters button.is-current, .chapters button:hover { color: var(--ink); }
.chapters button:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; border-radius: 4px; }
.chapters i { display: block; height: 3px; border-radius: 3px; background: rgba(20, 20, 22, .1); overflow: hidden; }
.chapters em { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; animation: a-grow var(--len) linear var(--s) both; }
.film.is-embed .chapters { bottom: 40px; }
.film.is-portrait .chapters { bottom: 150px; gap: 24px; }
.film.is-portrait .chapters button { width: 210px; font-size: 26px; }
.film.is-portrait .chapters .cn { display: none; }
.film.is-portrait .chapters .ch b { margin: 0; }
.film-toggle { all: unset; position: absolute; right: 130px; bottom: 40px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .8); box-shadow: 0 8px 20px -10px rgba(120, 60, 20, .35); font-size: 22px; }
.film.is-portrait .film-toggle { right: 90px; bottom: 52px; width: 72px; height: 72px; font-size: 30px; }
.film-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.film-toggle .ico-play { display: none; }
.film.is-paused .film-toggle .ico-play { display: block; }
.film.is-paused .film-toggle .ico-pause { display: none; }

/* ==========================================================
   Scene visuals (1000 x 820)
   ========================================================== */
.viz { position: relative; width: 1000px; height: 820px; color: var(--ink); font-family: var(--text); text-align: left; }
.viz .card { position: absolute; background: #fff; border-radius: 28px; box-shadow: 0 1px 2px rgba(70, 35, 10, .06), 0 26px 60px -26px rgba(130, 64, 20, .32); }
.viz .flow { position: absolute; inset: 0; width: 1000px; height: 820px; overflow: visible; fill: none; pointer-events: none; }
.viz .flow .dots { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 11; }
.viz .flow .reveal { stroke: #fff; stroke-width: 16; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: a-draw var(--d, 700ms) var(--ease-io) calc(var(--s, 0ms) + var(--t, 0ms)) both; }
.viz .runner { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(242, 101, 34, .2);
  offset-rotate: 0deg; animation: a-run var(--d, 700ms) var(--ease-io) calc(var(--s, 0ms) + var(--t, 0ms)) both; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.card-head b { font: 700 22px/1.2 var(--display); letter-spacing: -.01em; }
.card-head span { color: var(--muted); font: 500 15px/1 var(--text); }
.hd { display: flex; align-items: center; gap: 14px; }
.ic-tile { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--orange-soft); color: var(--orange); }
.ic-tile .ico { width: 22px; height: 22px; stroke-width: 2; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px; border-radius: 999px; background: var(--fill); color: var(--ink-2); font: 600 15px/1 var(--text); white-space: nowrap; }
.chip-orange { background: var(--orange-soft); color: var(--orange-deep); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.person { display: flex; align-items: center; gap: 14px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--orange-soft); color: var(--orange-deep); font: 700 19px/1 var(--display); }
.avatar.yellow { background: var(--yellow-soft); color: #A86A00; }
.person > div > b { display: block; font: 600 18px/1.3 var(--text); }
.person > div > span { display: block; color: var(--muted); font: 400 15px/1.3 var(--text); }
.check { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--fill); }
.check em { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #fff; font-size: 17px; animation: a-pop 520ms var(--ease-back) calc(var(--s, 0ms) + var(--t, 0ms)) both; }
.check.green em { background: var(--green); }

/* ---------- V1 · Full cycle: one-of-a-kind used items on every channel, never sold twice ---------- */
.v1-brief { left: 0; top: 40px; width: 380px; padding: 30px 30px 28px; }
.v1-quote { margin: 22px 0 26px; font: 600 31px/1.24 var(--display); letter-spacing: -.02em; }
.v1-brief .avatar { font-size: 15px; letter-spacing: .04em; }
.v1-plan { left: 0; top: 372px; width: 380px; padding: 28px 30px 22px; }
.v1-plan .card-head { margin-bottom: 10px; }
.plan-row { display: grid; grid-template-columns: 1fr auto 30px; align-items: center; gap: 10px 14px; padding: 12px 0; }
.plan-row b { font: 600 19px/1.2 var(--text); }
.plan-row span { color: var(--muted); font: 500 14px/1 var(--text); }
.plan-row .check { grid-column: 3; grid-row: 1 / 3; }
.plan-row .track { grid-column: 1 / 3; height: 6px; border-radius: 6px; background: var(--fill); overflow: hidden; }
.plan-row .track i { display: block; height: 100%; border-radius: inherit; background: var(--orange); transform-origin: 0 50%; animation: a-grow var(--d) var(--ease-io) calc(var(--s, 0ms) + var(--t)) both; }
/* The product: a browser window, wireframe first, then the finished screen wipes over it. */
.v1-app { position: absolute; left: 460px; top: 50px; width: 540px; height: 560px; border-radius: 22px; overflow: hidden; background: #fff;
  box-shadow: 0 2px 4px rgba(70, 35, 10, .06), 0 40px 80px -34px rgba(110, 50, 15, .42); }
.app-bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; background: #F4F1ED; }
.app-bar i { width: 11px; height: 11px; border-radius: 50%; background: #DDD6CF; }
.app-bar i.r { background: #FF5F57; }
.app-bar i.y { background: #FEBC2E; }
.app-bar i.g { background: #28C840; }
.app-bar span { flex: 1; height: 26px; margin-left: 12px; padding: 0 12px; border-radius: 8px; background: #fff; color: var(--muted); font: 500 13px/26px var(--text); }
.app-screen { position: relative; height: 516px; }
.app-screen > div { position: absolute; inset: 0; }
.v1-wire i { position: absolute; display: block; background: #ECE7E1; }
.v1-hifi { background: #fff; animation: a-wipe 900ms var(--ease-io) calc(var(--s, 0ms) + 1950ms) both; }
.app-side { position: absolute; left: 0; top: 0; bottom: 0; width: 60px; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; background: #FAF8F5; box-shadow: inset -1px 0 0 #EFEAE4; }
.app-side i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #B3ACA5; }
.app-side i.on { margin-bottom: 12px; background: var(--orange); color: #fff; box-shadow: 0 8px 16px -8px rgba(242, 101, 34, .8); }
.app-side .ico { width: 18px; height: 18px; stroke-width: 2; }
.app-main { position: absolute; left: 60px; right: 0; top: 0; bottom: 0; padding: 24px 24px 0; }
.app-head { display: flex; justify-content: space-between; align-items: flex-start; }
.app-head b { display: block; font: 700 24px/1 var(--display); letter-spacing: -.01em; }
.app-head div span { display: block; margin-top: 8px; color: var(--muted); font: 500 13px/1 var(--text); }
.app-head .chip { height: 30px; padding: 0 12px; font-size: 13px; }
.app-tabs { display: flex; gap: 8px; margin-top: 22px; }
.app-tabs span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--fill); color: var(--ink-2); font: 600 13px/1 var(--text); white-space: nowrap; }
.app-tabs b { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.app-tabs .on { background: var(--ink); color: #fff; }
.app-tabs .on b { color: rgba(255, 255, 255, .66); }
.app-table { margin-top: 18px; }
.app-tr { position: relative; display: grid; grid-template-columns: 1fr 40px 96px 66px; align-items: center; gap: 10px; height: 56px; border-bottom: 1px solid #F0EBE5; font: 500 14px/1.2 var(--text); white-space: nowrap; }
.app-th { height: 34px; color: var(--muted); font: 600 11px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.app-tr > span:first-child b { display: block; font: 600 14px/1.2 var(--text); }
.app-tr > span:first-child small { display: block; margin-top: 4px; color: var(--muted); font: 500 11px/1 var(--text); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
/* Condition rank, as used-goods shops grade items (S, A, AB, B, C). */
.rank { width: 30px; height: 24px; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px #E3DCD4; color: var(--ink-2); font: 700 12px/1 var(--text); }
.chs { display: flex; gap: 4px; }
.chn { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 10px/1 var(--text); font-style: normal; }
.chn.r { background: var(--orange); }
.chn.y { background: var(--yellow); color: var(--ink); }
.chn.s { background: #A39C95; }
/* Sold on one channel: the listing leaves the other three. */
.chn.off { animation: chn-off 320ms var(--ease-io) calc(var(--s, 0ms) + var(--t)) both; }
@keyframes chn-off { from { opacity: 1; transform: none; } to { opacity: .16; transform: scale(.8); } }
.st { position: relative; height: 24px; }
.st em { position: absolute; left: 0; top: 0; padding: 6px 10px; border-radius: 999px; background: var(--fill); color: var(--ink-2); font: 700 12px/1 var(--text); font-style: normal; }
.st .sold { background: var(--green-soft); color: var(--green); animation: a-pop 460ms var(--ease-back) calc(var(--s, 0ms) + 3050ms) both; }
.st.flip .listed { animation: a-out 200ms linear calc(var(--s, 0ms) + 3050ms) forwards; }
.app-toast { position: absolute; left: 84px; right: 24px; bottom: 14px; display: flex; align-items: center; gap: 10px; height: 42px; margin: 0; padding: 0 14px; border-radius: 12px; background: var(--ink); color: rgba(255, 255, 255, .78);
  font: 500 13px/1.2 var(--text); white-space: nowrap; animation: a-rise 600ms var(--ease-out) calc(var(--s, 0ms) + 3250ms) both; }
.app-toast b { color: #fff; font-weight: 600; }
.app-toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
/* The first sale arrives the moment the system goes live. */
.app-tr.fresh::before { content: ""; position: absolute; z-index: -1; inset: 4px -12px; border-radius: 12px; background: rgba(242, 101, 34, .1); opacity: 0;
  animation: v2-flash 1600ms var(--ease-out) calc(var(--s, 0ms) + 3000ms) both; }
.v1-live { position: absolute; right: 22px; top: 22px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px; border-radius: 999px; background: #fff;
  box-shadow: 0 16px 34px -14px rgba(20, 90, 50, .4); font: 700 17px/1 var(--text); white-space: nowrap; }
.v1-live .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); }
.v1-stat { left: 460px; top: 642px; width: 540px; height: 150px; padding: 24px 30px; display: flex; align-items: center; gap: 30px; }
.v1-stat small { display: block; color: var(--muted); font: 600 13px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.v1-stat b { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; font: 700 50px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.v1-stat b small { color: var(--muted); font: 600 18px/1 var(--display); letter-spacing: 0; text-transform: none; }
.v1-stat svg { flex: 1; height: 72px; overflow: visible; fill: none; }
.v1-stat svg path { stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; animation: a-draw 1000ms var(--ease-io) calc(var(--s, 0ms) + 3450ms) both; }

/* ---------- V2 · AI-powered (BPO): a mail-in buy-back application becomes an intake record ---------- */
.v2-doc { left: 0; top: 40px; width: 520px; padding: 24px 28px; overflow: hidden; background: #FDFCFA; }
.doc-top .chip .ico { width: 16px; height: 16px; stroke-width: 2; }
.doc-top { display: flex; justify-content: space-between; align-items: center; }
.doc-top time { color: var(--muted); font: 500 15px/1 var(--text); }
.doc-title { display: flex; align-items: baseline; gap: 16px; margin: 22px 0 0; font: 700 34px/1 var(--text); letter-spacing: .24em; }
.doc-title small { color: var(--muted); font: 500 16px/1 var(--text); letter-spacing: .02em; }
.doc-grid { display: grid; grid-template-columns: 96px 1fr; margin: 20px 0 0; border-top: 2px solid var(--ink); }
.doc-grid dt, .doc-grid dd { margin: 0; padding: 11px 0; border-bottom: 1px solid #E8E2DB; font: 400 21px/1.35 var(--text); color: var(--ink-2); }
.doc-grid dt { color: var(--muted); font-size: 16px; line-height: 28px; letter-spacing: .14em; }
.hl { position: relative; z-index: 0; white-space: nowrap; color: var(--ink); font-weight: 600; }
.hl::before { content: ""; position: absolute; z-index: -1; left: -4px; right: -4px; top: .1em; bottom: 0; border-radius: 7px; background: rgba(242, 101, 34, .17); transform-origin: 0 50%;
  animation: a-grow 420ms var(--ease-out) calc(var(--s, 0ms) + var(--t)) both; }
.v2-scan { position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(180deg, rgba(252, 175, 23, 0), rgba(252, 175, 23, .16)); pointer-events: none;
  animation: v2-scan 1100ms var(--ease-io) calc(var(--s, 0ms) + 600ms) both; }
.v2-scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, rgba(242, 101, 34, 0), var(--orange) 30%, var(--yellow) 50%, var(--orange) 70%, rgba(242, 101, 34, 0)); }
@keyframes v2-scan { 0% { opacity: 0; transform: translate3d(0, 110px, 0); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 330px, 0); } }
.v2-ai { position: absolute; left: 590px; top: 190px; width: 110px; height: 110px; border-radius: 30px; display: grid; place-items: center; background: #fff;
  box-shadow: 0 1px 2px rgba(70, 35, 10, .06), 0 24px 50px -20px rgba(242, 101, 34, .55); }
.v2-ai .spark { width: 54px; height: 56px; }
.v2-ai::before, .v2-ai::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(242, 101, 34, .45); opacity: 0;
  animation: a-ring 1000ms var(--ease-out) calc(var(--s, 0ms) + 1450ms) 2 backwards; }
.v2-ai::after { animation-delay: calc(var(--s, 0ms) + 1800ms); }
.v2-ai b { position: absolute; left: 100%; top: 50%; margin: -16px 0 0 10px; padding: 8px 12px; border-radius: 999px; background: #fff; color: var(--orange-deep);
  box-shadow: 0 10px 22px -12px rgba(70, 35, 10, .35); font: 700 16px/1 var(--text); letter-spacing: .12em; }
/* The steps beside the AI, joined by a dotted rail, light up one by one. */
.v2-rail { position: absolute; left: 819px; top: 132px; height: 136px; border-left: 2px dotted rgba(242, 101, 34, .55); animation: a-wipe 700ms var(--ease-io) calc(var(--s, 0ms) + 1500ms) both; }
.v2-step { position: absolute; left: 792px; display: flex; align-items: center; gap: 8px; animation: a-left 520ms var(--ease-out) calc(var(--s, 0ms) + var(--t)) both; }
.v2-step .ic-tile { width: 56px; height: 56px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(70, 35, 10, .06), 0 14px 30px -14px rgba(130, 64, 20, .4); }
.v2-step span { padding: 9px 11px; border-radius: 999px; background: #fff; box-shadow: 0 10px 22px -14px rgba(70, 35, 10, .35); font: 600 14px/1 var(--text); white-space: nowrap; }
.v2-order { left: 150px; top: 444px; width: 850px; padding: 28px 32px 26px; }
.v2-order .card-head b small { margin-left: 10px; color: var(--muted); font: 500 18px/1 var(--text); }
.v2-state { position: relative; width: 300px; height: 34px; }
.v2-state .chip { position: absolute; right: 0; top: 0; }
.v2-state .chip + .chip { animation: a-pop 520ms var(--ease-back) calc(var(--s, 0ms) + 2950ms) both; background: var(--green-soft); color: var(--green); }
.v2-state .chip:first-child { animation: a-out 200ms linear calc(var(--s, 0ms) + 2950ms) forwards; }
.v2-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-top: 20px; }
.v2-fields label { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--muted); font: 600 13px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.v2-fields label .ico { width: 17px; height: 17px; color: #A39C95; stroke-width: 2; }
.v2-field { position: relative; height: 58px; border-radius: 14px; background: var(--fill); overflow: hidden; }
.v2-field::before { content: ""; position: absolute; left: 18px; top: 22px; width: 46%; height: 14px; border-radius: 7px; background: #E6E1DB; animation: a-out 200ms linear calc(var(--s, 0ms) + var(--t)) forwards; }
.v2-field b { position: absolute; left: 18px; right: 70px; top: 0; font: 600 20px/58px var(--text); white-space: nowrap; animation: a-left 520ms var(--ease-out) calc(var(--s, 0ms) + var(--t)) both; }
.v2-field em { position: absolute; right: 12px; top: 15px; padding: 6px 8px; border-radius: 8px; background: var(--green-soft); color: var(--green); font: 700 13px/1 var(--text); font-style: normal;
  animation: a-pop 460ms var(--ease-back) calc(var(--s, 0ms) + var(--t) + 260ms) both; }
.v2-field::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--orange); opacity: 0; animation: v2-flash 900ms var(--ease-out) calc(var(--s, 0ms) + var(--t)) both; }
@keyframes v2-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.v2-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.v2-foot p { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); font: 500 17px/1 var(--text); }
.v2-foot p .spark { width: 22px; height: 23px; }
.v2-foot p b { font-variant-numeric: tabular-nums; }
.v2-btn { position: relative; width: 210px; height: 54px; }
.v2-btn span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; color: #fff; font: 600 18px/1 var(--text); }
.v2-btn span:first-child { background: var(--orange); animation: a-out 220ms linear calc(var(--s, 0ms) + 2950ms) forwards; }
.v2-btn span + span { background: var(--green); animation: a-pop 520ms var(--ease-back) calc(var(--s, 0ms) + 2950ms) both; }

/* ---------- V3 · MVP: three core features out of a long wish list ---------- */
/* The wish list sits above the MVP card so its rows stay visible while they fly across. */
.v3-backlog { left: 0; top: 30px; width: 470px; height: 760px; padding: 28px 30px; z-index: 2; }
.v3-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.v3-row { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 16px; border-radius: 12px; background: var(--fill);
  color: var(--ink-2); font: 600 17px/1 var(--text); white-space: nowrap; animation: a-left 460ms var(--ease-out) calc(var(--s, 0ms) + var(--t)) both; }
.v3-row .box { position: relative; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 2px #D9D2CB; }
.v3-row .box .ico { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; color: #fff; stroke-width: 3; opacity: 0; }
.v3-row.rest { animation: a-left 460ms var(--ease-out) calc(var(--s, 0ms) + var(--t)) both, v3-dim 600ms var(--ease-io) calc(var(--s, 0ms) + 2050ms) forwards; }
@keyframes v3-dim { to { opacity: .5; } }
/* A core idea is ticked and stays ticked; its copy flies into the MVP card and becomes the slot (film.js measures --dx/--dy). */
.v3-row.core { z-index: 2; }
.v3-row.core::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--orange-soft);
  opacity: 0; animation: a-fade 260ms linear calc(var(--s, 0ms) + var(--f) - 380ms) both; }
.v3-row.core > span { color: var(--ink); }
.v3-row.core .box { animation: v3-tick 240ms linear calc(var(--s, 0ms) + var(--f) - 380ms) both; }
.v3-row.core .box .ico { animation: a-pop 300ms var(--ease-back) calc(var(--s, 0ms) + var(--f) - 300ms) both; }
@keyframes v3-tick { from { background: #fff; box-shadow: inset 0 0 0 2px #D9D2CB; } to { background: var(--orange); box-shadow: inset 0 0 0 2px var(--orange); } }
.v3-ghost { position: absolute; inset: 0; display: flex; font-style: normal; align-items: center; gap: 14px; padding: 0 16px; border-radius: inherit; background: var(--orange-soft); color: var(--ink);
  box-shadow: 0 16px 30px -14px rgba(242, 101, 34, .65); opacity: 0; animation: v3-fly 960ms var(--ease-io) calc(var(--s, 0ms) + var(--f)) forwards; }
.v3-ghost .box { background: var(--orange); box-shadow: inset 0 0 0 2px var(--orange); }
.v3-ghost .box .ico { opacity: 1; }
@keyframes v3-fly { 0% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0); } 100% { opacity: 0; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0); } }
.v3-later { position: absolute; left: 30px; right: 30px; bottom: 28px; display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font: 500 17px/1.3 var(--text);
  animation: a-rise 600ms var(--ease-out) calc(var(--s, 0ms) + 2150ms) both; }
.v3-mvp { left: 530px; top: 30px; width: 470px; height: 410px; padding: 28px 30px; }
.v3-slots { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.v3-slot { position: relative; height: 66px; border-radius: 18px; border: 2px dashed #E3DCD4; }
/* Each slot fills in as its idea lands: 撮影 photo, 採寸 measuring, 原稿 copy. */
.v3-fill { position: absolute; inset: -2px; display: flex; align-items: center; gap: 14px; padding: 0 20px 0 10px; border-radius: inherit; background: var(--orange-soft);
  animation: a-fade 300ms var(--ease-io) calc(var(--s, 0ms) + var(--t)) both; }
.v3-fill b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: 0 8px 18px -8px rgba(242, 101, 34, .8); }
.v3-fill b .ico { width: 22px; height: 22px; stroke-width: 2; }
.v3-fill span { flex: 1; color: var(--ink); font: 700 19px/1 var(--text); }
.v3-fill em { color: var(--ink-2); font: 600 17px/1 var(--text); font-style: normal; letter-spacing: .1em; }
.v3-launch { position: absolute; left: 30px; right: 30px; bottom: 26px; display: flex; align-items: center; gap: 12px; font: 600 18px/1.2 var(--text); animation: a-rise 600ms var(--ease-out) calc(var(--s, 0ms) + 2350ms) both; }
.v3-launch .check { flex-shrink: 0; }
.v3-week { animation: a-pop 520ms var(--ease-back) calc(var(--s, 0ms) + 2350ms) both; }
.v3-feedback { left: 530px; top: 472px; width: 470px; height: 318px; padding: 26px 30px; animation: a-rise 800ms var(--ease-out) calc(var(--s, 0ms) + 2500ms) both; }
.v3-bars { position: relative; display: flex; align-items: flex-end; gap: 18px; height: 178px; margin-top: 26px; padding: 0 4px; }
.v3-bars i { position: relative; flex: 1; height: var(--h); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, rgba(242, 101, 34, .5), rgba(242, 101, 34, .14));
  transform-origin: 50% 100%; animation: a-up 700ms var(--ease-out) calc(var(--s, 0ms) + var(--t)) both; }
.v3-bars i:last-of-type { background: linear-gradient(180deg, var(--orange), rgba(242, 101, 34, .32)); }
.v3-bars i:last-of-type::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(242, 101, 34, .2); }
.v3-badge { position: absolute; right: 21%; top: 2px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(70, 35, 10, .06), 0 12px 26px -12px rgba(70, 35, 10, .35); font: 700 18px/1 var(--display); animation: a-pop 500ms var(--ease-back) calc(var(--s, 0ms) + 3200ms) both; }
.v3-badge .ico { width: 18px; height: 18px; color: var(--green); stroke-width: 2.4; }

/* ---------- V4 · Maintenance & optimization: a used-goods store tuned before its sale day ---------- */
.v4-dash { left: 0; top: 60px; width: 1000px; height: 690px; padding: 32px 34px; }
.v4-state { position: relative; width: 300px; height: 38px; }
.v4-state .chip { position: absolute; right: 0; top: 0; height: 38px; }
.v4-state .chip:first-child { background: var(--yellow-soft); color: #9A6100; animation: a-out 220ms linear calc(var(--s, 0ms) + 2900ms) forwards; }
.v4-state .chip + .chip { background: var(--green-soft); color: var(--green); animation: a-pop 520ms var(--ease-back) calc(var(--s, 0ms) + 2900ms) both; }
.v4-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
.v4-tile { padding: 20px 22px; border-radius: 20px; background: var(--fill); }
.v4-tile small { display: block; color: var(--muted); font: 600 13px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.v4-tile b { display: block; margin-top: 12px; font: 700 46px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-tile b small { display: inline; margin-left: 4px; font: 600 20px/1 var(--display); letter-spacing: 0; text-transform: none; color: var(--muted); }
.v4-tile em { display: inline-flex; margin-top: 12px; padding: 6px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); font: 700 13px/1 var(--text); font-style: normal;
  animation: a-pop 500ms var(--ease-back) calc(var(--s, 0ms) + var(--t)) both; }
.v4-tile em.hot { background: var(--orange-soft); color: var(--orange-deep); }
.v4-chart { position: relative; height: 290px; margin-top: 24px; }
.v4-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.v4-chart .grid { stroke: #EFEAE4; stroke-width: 1; }
.v4-chart .line { stroke: var(--orange); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; animation: a-draw 1900ms cubic-bezier(.45, 0, .55, 1) calc(var(--s, 0ms) + 450ms) both; }
.v4-chart .area { opacity: 0; animation: a-fade 700ms var(--ease-io) calc(var(--s, 0ms) + 1900ms) both; }
.v4-chart .mark { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0; animation: a-fade 400ms linear calc(var(--s, 0ms) + 1350ms) both; }
.v4-chart .mark.sale { stroke: var(--orange); animation-delay: calc(var(--s, 0ms) + 2150ms); }
.v4-flag { position: absolute; top: -6px; transform: translateX(-50%); padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; font: 600 13px/1 var(--text); white-space: nowrap; animation: a-pop 500ms var(--ease-back) calc(var(--s, 0ms) + 1400ms) both; }
.v4-flag.sale { background: var(--orange); animation-delay: calc(var(--s, 0ms) + 2200ms); }
.v4-axis { position: absolute; left: 0; right: 0; bottom: -26px; display: flex; justify-content: space-between; color: #A39C95; font: 500 13px/1 var(--text); }
.v4-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.v4-rows p { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 17px/1.25 var(--text); animation: a-rise 600ms var(--ease-out) calc(var(--s, 0ms) + var(--t)) both; }

/* ---------- Visuals outside the film: scaled to their box by --k ---------- */
.viz-fit { position: relative; width: 100%; aspect-ratio: 1000 / 820; }
.viz-fit > .viz { position: absolute; left: 0; top: 0; transform: scale(var(--k, .6)); transform-origin: 0 0; }