/* Draft 3 · Εφαρμογές: manual work becomes automatic */
.ink-motion .app { position: relative; height: 400px; border-radius: 12px; overflow: hidden; background: var(--navy-2); border: 1px solid rgba(230,213,183,.07); font-size: 12px; }
.ink-motion .zl { position: absolute; top: 16px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8E92AB; }
.ink-motion .it { position: absolute; z-index: 3; width: 98px; padding: 9px 10px; border-radius: 8px; background: #F6F1E7; color: var(--navy); display: grid; gap: 6px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.6); opacity: 0; transform: rotate(var(--r, 0deg)) scale(.9); transition: left .75s cubic-bezier(.5,0,.2,1), top .75s cubic-bezier(.5,0,.2,1), transform .75s, opacity .4s; }
.ink-motion .it.in { opacity: 1; transform: rotate(var(--r, 0deg)); }
.ink-motion .it.go { transform: scale(.25); opacity: 0; transition: left .75s cubic-bezier(.5,0,.2,1), top .75s cubic-bezier(.5,0,.2,1), transform .75s, opacity .3s .5s; }
.ink-motion .it b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; font-size: 10px; color: #fff; background: var(--c); margin-right: 6px; vertical-align: middle; }
.ink-motion .it span { font-weight: 600; }
.ink-motion .it i { height: 5px; border-radius: 3px; background: rgba(30,34,61,.18); }
.ink-motion .it i + i { width: 60%; }
.ink-motion .nd { position: absolute; left: 50%; z-index: 2; width: 128px; height: 42px; margin: -21px 0 0 -64px; border-radius: 10px; border: 1.5px solid rgba(230,213,183,.25); background: var(--navy); color: #8E92AB; display: grid; place-items: center; font-weight: 600; transition: border-color .4s, color .4s, box-shadow .4s; }
.ink-motion .nd.on { border-color: var(--orange); color: var(--cream); }
.ink-motion .cn { position: absolute; z-index: 1; background: rgba(230,213,183,.14); }
.ink-motion .cn i { position: absolute; inset: 0; background: var(--orange); transform-origin: 0 0; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.ink-motion .cn.v { left: 50%; width: 2px; margin-left: -1px; }
.ink-motion .cn.v i { transform: scaleY(0); }
.ink-motion .cn.h { height: 2px; margin-top: -1px; }
.ink-motion .cn.h i { transform: scaleX(0); }
.ink-motion .cn.on i { transform: none; }
.ink-motion .rep { position: absolute; z-index: 2; right: 4%; top: 18%; width: 27%; height: 66%; border-radius: 10px; padding: 12px; display: grid; gap: 8px; align-content: start; background: transparent; border: 1.5px dashed rgba(230,213,183,.25); color: #8E92AB; transition: background-color .5s, border-color .5s, color .5s; }
.ink-motion .rep.on { background: #F6F1E7; border-color: transparent; color: var(--navy); }
.ink-motion .rep .t { font-weight: 800; font-size: 13px; }
.ink-motion .rep .rr { display: flex; align-items: center; gap: 8px; font-size: 11px; opacity: 0; transition: opacity .35s; transition-delay: calc(var(--i) * .3s + .2s); }
.ink-motion .rep.on .rr { opacity: 1; }
.ink-motion .rep .bars { display: flex; align-items: end; gap: 6px; height: 64px; margin-top: 6px; }
.ink-motion .rep .bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--navy); height: 4%; transition: height .7s cubic-bezier(.3,1.2,.5,1); transition-delay: calc(var(--i) * .12s + .9s); }
.ink-motion .rep .bars i:last-child { background: var(--orange); }
.ink-motion .rep.on .bars i { height: var(--h); }
@media (max-width: 600px) {
  .ink-motion .app { height: 360px; }
  .ink-motion .it { width: 68px; padding: 6px 7px; font-size: 10px; gap: 4px; }
  .ink-motion .it b { width: 15px; height: 15px; margin-right: 4px; }
  .ink-motion .nd { width: 84px; margin-left: -42px; font-size: 11px; }
  .ink-motion .rep { width: 30%; right: 3%; padding: 9px; overflow: hidden; gap: 6px; }
  .ink-motion .rep .rr { font-size: 10px; gap: 5px; }
  .ink-motion .rep .rr .ck { width: 13px; height: 13px; }
  .ink-motion .rep .bars { height: 40px; }
}