/* Draft 1 · Websites: from wireframe to site. The page is abstract (shapes in the brand colours, no real site,
   Nek 2026-10-29); each block has a place per screen (.desk / .tab / .ph on .dev), so the layout reflows. */
.ink-motion .dbar { height: 30px; display: flex; align-items: center; gap: 6px; padding-inline: 12px; background: #11142A; border-bottom: 1px solid rgba(230,213,183,.06); flex: none; }
.ink-motion .dbar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(230,213,183,.22); flex: none; }
.ink-motion .s1 .box { height: 400px; display: grid; place-items: center; }
.ink-motion .dev { width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--deep); border: 1px solid rgba(230,213,183,.1); transition: width 1s cubic-bezier(.65,0,.35,1), border-radius 1s; }
.ink-motion .dev.tab { width: 52%; border-radius: 18px; }
.ink-motion .dev.ph { width: 31%; border-radius: 28px; }
.ink-motion .dev .url { margin-left: 10px; width: 34%; height: 14px; background: rgba(230,213,183,.06); border-radius: 6px; transition: opacity .4s; }
.ink-motion .dbar .pulse { width: 8px; height: 8px; margin-left: auto; opacity: 0; transition: opacity .4s; }
.ink-motion .s1.live .dev.desk .pulse { opacity: 1; }
.ink-motion .dev:not(.desk) .url, .ink-motion .dev:not(.desk) .dbar > i { opacity: 0; }
.ink-motion .dev.ph .dbar { position: relative; height: 22px; }
.ink-motion .dev.ph .dbar::after { content: ""; position: absolute; left: 33%; width: 34%; height: 9px; border-radius: 99px; background: #05060E; }
.ink-motion .scr { position: relative; flex: 1; overflow: hidden; }
.ink-motion .pg { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.65,0,.35,1); }
.ink-motion .dev.ph .pg { transform: translateY(-12%); transition: transform 1.6s cubic-bezier(.65,0,.35,1) 1.1s; }
/* going live: one light sweep over the page */
.ink-motion .scr::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, transparent 38%, rgba(230,213,183,.16) 50%, transparent 62%); transform: translateX(-100%); }
.ink-motion .s1.live .scr::before { transform: translateX(100%); transition: transform 1.3s cubic-bezier(.4,0,.2,1); }

/* the blocks: dashed outlines (structure), then colour (design), then detail (live) */
.ink-motion .b { position: absolute; border: 1.5px dashed rgba(230,213,183,.42); border-radius: 4px; opacity: 0; transform: scale(.96); transition: opacity .4s, transform .4s, background-color .8s, border-color .8s, left 1s cubic-bezier(.65,0,.35,1), top 1s cubic-bezier(.65,0,.35,1), width 1s cubic-bezier(.65,0,.35,1), height 1s cubic-bezier(.65,0,.35,1); }
.ink-motion .b.in { opacity: 1; transform: none; }
.ink-motion .s1.styled .b { border-color: transparent; border-style: solid; }
.ink-motion .s1.styled .b.t { background: rgba(230,213,183,.8); border-radius: 3px; }
.ink-motion .s1.styled .b.t.s { background: rgba(173,176,196,.45); }
.ink-motion .s1.styled .b.btn { background: var(--orange); border-radius: 5px; }
.ink-motion .s1.styled .b.lg { background: var(--cream); }
.ink-motion .s1.styled .b.img { background: linear-gradient(135deg, #3B4275, #262B4E); border-radius: 8px; }
.ink-motion .s1.styled .b.cd { background: var(--navy-2); border-radius: 8px; }
.ink-motion .s1.styled .dev:not(.desk) .b.nv { background: var(--cream); }
.ink-motion .dev:not(.desk) .b.cta { opacity: 0; transform: scale(.8); }

/* detail that appears when the page is live: a picture made of shapes, icons and lines in the cards */
.ink-motion .art { overflow: hidden; }
.ink-motion .art i, .ink-motion .cd i { position: absolute; display: block; opacity: 0; transition: opacity .6s, transform .9s cubic-bezier(.3,1.3,.5,1); }
.ink-motion .art .sun { right: 14%; top: 14%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); transform: translateY(30%) scale(.6); }
.ink-motion .art .hl { border-radius: 50%; transform: translateY(40%); }
.ink-motion .art .ha { left: -14%; bottom: -46%; width: 82%; height: 92%; background: var(--cream); opacity: 0; }
.ink-motion .art .hb { left: 34%; bottom: -58%; width: 92%; height: 100%; background: #4A5288; }
.ink-motion .s1.live .art i { opacity: 1; transform: none; }
.ink-motion .s1.live .art .ha { opacity: .9; transition-delay: .15s; }
.ink-motion .s1.live .art .hb { transition-delay: .3s; }
.ink-motion .s1.live .art .sun { transition-delay: .45s; animation: im-float 5s ease-in-out 1.4s infinite; }
@keyframes im-float { 50% { transform: translateY(-8%); } }
.ink-motion .cd .ic { left: 10%; top: 16%; height: 24%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); }
.ink-motion .cd .l { left: 10%; top: 56%; width: 64%; height: 9%; border-radius: 3px; background: rgba(230,213,183,.7); }
.ink-motion .cd .l.s { top: 72%; width: 42%; background: rgba(173,176,196,.4); }
.ink-motion .s1.live .cd i { opacity: 1; }
.ink-motion .s1.live .c2 i { transition-delay: .12s; }
.ink-motion .s1.live .c3 i { transition-delay: .24s; }
.ink-motion .s1.live .b.go { box-shadow: 0 0 0 0 rgba(243,109,68,.5); animation: im-glow 2.4s ease-out 1s infinite; }
@keyframes im-glow { 70% { box-shadow: 0 0 0 7px rgba(243,109,68,0); } 100% { box-shadow: 0 0 0 0 rgba(243,109,68,0); } }

/* where each block sits: left, top, width, height in % of the screen */
.ink-motion .lg { left: 5%; top: 6%; width: 13%; height: 5%; }
.ink-motion .n1 { left: 46%; top: 7.5%; width: 7%; height: 2.4%; }
.ink-motion .n2 { left: 56%; top: 7.5%; width: 7%; height: 2.4%; }
.ink-motion .n3 { left: 66%; top: 7.5%; width: 7%; height: 2.4%; }
.ink-motion .cta { left: 80%; top: 5%; width: 14%; height: 7%; }
.ink-motion .h1 { left: 5%; top: 22%; width: 40%; height: 6.5%; }
.ink-motion .h2 { left: 5%; top: 31%; width: 30%; height: 6.5%; }
.ink-motion .p1 { left: 5%; top: 42%; width: 36%; height: 2.6%; }
.ink-motion .p2 { left: 5%; top: 47%; width: 29%; height: 2.6%; }
.ink-motion .go { left: 5%; top: 56%; width: 16%; height: 7.5%; }
.ink-motion .art { left: 52%; top: 18%; width: 43%; height: 48%; }
.ink-motion .c1 { left: 5%; top: 73%; width: 28%; height: 21%; }
.ink-motion .c2 { left: 36%; top: 73%; width: 28%; height: 21%; }
.ink-motion .c3 { left: 67%; top: 73%; width: 28%; height: 21%; }
/* tablet: one column, the menu folds into three lines, two cards per row */
.ink-motion .tab .lg { left: 7%; top: 5%; width: 24%; height: 4.5%; }
.ink-motion .tab .n1 { left: 82%; top: 5.2%; width: 11%; height: 1.1%; }
.ink-motion .tab .n2 { left: 82%; top: 7.2%; width: 11%; height: 1.1%; }
.ink-motion .tab .n3 { left: 82%; top: 9.2%; width: 11%; height: 1.1%; }
.ink-motion .tab .cta { left: 70%; top: 5%; width: 23%; height: 6%; }
.ink-motion .tab .h1 { left: 7%; top: 16%; width: 78%; height: 5.5%; }
.ink-motion .tab .h2 { left: 7%; top: 23%; width: 58%; height: 5.5%; }
.ink-motion .tab .p1 { left: 7%; top: 31.5%; width: 86%; height: 2.2%; }
.ink-motion .tab .p2 { left: 7%; top: 35.5%; width: 70%; height: 2.2%; }
.ink-motion .tab .go { left: 7%; top: 41.5%; width: 34%; height: 6%; }
.ink-motion .tab .art { left: 7%; top: 51%; width: 86%; height: 25%; }
.ink-motion .tab .c1 { left: 7%; top: 79%; width: 41%; height: 18%; }
.ink-motion .tab .c2 { left: 52%; top: 79%; width: 41%; height: 18%; }
.ink-motion .tab .c3 { left: 7%; top: 100%; width: 86%; height: 18%; }
/* phone: everything stacked, the page scrolls to show the cards */
.ink-motion .ph .lg { left: 9%; top: 4%; width: 34%; height: 3.6%; }
.ink-motion .ph .n1 { left: 77%; top: 4.4%; width: 14%; height: .9%; }
.ink-motion .ph .n2 { left: 77%; top: 6%; width: 14%; height: .9%; }
.ink-motion .ph .n3 { left: 77%; top: 7.6%; width: 14%; height: .9%; }
.ink-motion .ph .cta { left: 60%; top: 4%; width: 31%; height: 4.5%; }
.ink-motion .ph .h1 { left: 9%; top: 13%; width: 82%; height: 4.2%; }
.ink-motion .ph .h2 { left: 9%; top: 18.5%; width: 62%; height: 4.2%; }
.ink-motion .ph .p1 { left: 9%; top: 25%; width: 82%; height: 1.7%; }
.ink-motion .ph .p2 { left: 9%; top: 28%; width: 66%; height: 1.7%; }
.ink-motion .ph .go { left: 9%; top: 33%; width: 48%; height: 5%; }
.ink-motion .ph .art { left: 9%; top: 42%; width: 82%; height: 22%; }
.ink-motion .ph .c1 { left: 9%; top: 68%; width: 82%; height: 12%; }
.ink-motion .ph .c2 { left: 9%; top: 82%; width: 82%; height: 12%; }
.ink-motion .ph .c3 { left: 9%; top: 96%; width: 82%; height: 12%; }
.ink-motion .ph .cd .ic { height: 30%; top: 20%; left: 7%; }
.ink-motion .ph .cd .l { left: 24%; top: 26%; width: 56%; height: 10%; }
.ink-motion .ph .cd .l.s { top: 52%; width: 36%; }
@media (max-width: 600px) {
  .ink-motion .s1 .box { height: 300px; }
  .ink-motion .dev.tab { width: 64%; }
  .ink-motion .dev.ph { width: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .ink-motion .s1 .sun, .ink-motion .s1 .b.go { animation: none !important; }
}