/* Page-header motion ([ink_head_motion]): what every stage shares. Ported from the approved drafts (2026-10-28).
   Colours are the site variables (navy, navy-2, cream, orange); --deep has no variable. */
.ink-motion { --navy: var(--ink-light-text, #1E223D); --navy-2: var(--ink-card, #2A2F52); --cream: var(--ink-light-surface, #E6D5B7); --paper: var(--ink-paper, #F2EADB); --muted: var(--ink-muted, #ADB0C4); --orange: var(--ink-accent, #F36D44); --deep: #171A31; --ff: var(--ink-font-body, 'Commissioner'), 'Segoe UI', system-ui, sans-serif; color: var(--cream); font-size: 17px; line-height: 1.55; }
.ink-motion *, .ink-motion *::before, .ink-motion *::after { box-sizing: border-box; }
.ink-motion :where(h3, p) { margin: 0; }
.ink-motion img { display: block; max-width: 100%; }
.ink-motion .stage { position: relative; width: 100%; }
/* An illustration, not a control (Nek, 2026-10-29): nothing reacts to the pointer, a label says what it is,
   a faint dot grid drifts behind the stage and a soft band of light passes over each frame. */
.ink-motion { position: relative; isolation: isolate; pointer-events: none; user-select: none; -webkit-user-select: none; cursor: default; }
.ink-motion .im-label { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8E92AB; }
.ink-motion .im-label svg { width: 14px; height: 14px; color: var(--orange); flex: none; }
.ink-motion::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 22px; background: radial-gradient(rgba(230,213,183,.13) 1px, transparent 1.5px) 0 0 / 18px 18px; -webkit-mask: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent), linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent), linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-composite: intersect; animation: im-drift 9s linear infinite; }
@keyframes im-drift { to { background-position: 18px 18px; } }
.ink-motion :is(.scr, .shop, .app, .board, .card7, .cons, .brandb, .sgb, .agb) { position: relative; overflow: hidden; }
.ink-motion :is(.scr, .shop, .app, .board, .card7, .cons, .brandb, .sgb, .agb)::after { content: ""; position: absolute; inset: 0; z-index: 20; pointer-events: none; background: linear-gradient(transparent, rgba(230,213,183,.05), transparent) no-repeat 0 -140px / 100% 140px; animation: im-scan 8s linear infinite; }
.ink-motion .shop::after { background-image: linear-gradient(transparent, rgba(30,34,61,.045), transparent); }
@keyframes im-scan { to { background-position: 0 calc(100% + 140px); } }
.ink-motion .cap { display: flex; gap: 10px; align-items: baseline; margin-top: 18px; min-height: 26px; font-size: 15px; color: var(--muted); }
.ink-motion .cap b { color: var(--orange); font-weight: 700; font-variant-numeric: tabular-nums; }
.ink-motion .cap span { transition: opacity .35s; }
.ink-motion .ck { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--orange); flex: none; position: relative; }
.ink-motion .ck::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 8px; border: solid var(--orange); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ink-motion .pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(243,109,68,.6); animation: im-pulse 1.8s infinite; }
@keyframes im-pulse { 70% { box-shadow: 0 0 0 12px rgba(243,109,68,0); } 100% { box-shadow: 0 0 0 0 rgba(243,109,68,0); } }
.ink-motion .track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 28px; }
.ink-motion .ln { position: absolute; top: 7px; left: 10%; right: 10%; height: 2px; background: rgba(230,213,183,.14); }
.ink-motion .ln i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--orange), #F7925F); transition: width .9s cubic-bezier(.65,0,.35,1); }
.ink-motion .st { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; position: relative; }
.ink-motion .st .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--navy); border: 2px solid rgba(230,213,183,.3); transition: border-color .4s, background-color .4s, transform .4s; }
.ink-motion .st.done .dot { border-color: var(--orange); background: var(--orange); }
.ink-motion .st.now .dot { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(243,109,68,.18); }
.ink-motion .st .sn { font-size: 12px; font-weight: 700; color: #8E92AB; font-variant-numeric: tabular-nums; transition: color .4s; }
.ink-motion .st .sl { font-size: 13px; color: #8E92AB; line-height: 1.3; max-width: 13ch; transition: color .4s; }
.ink-motion .st.done .sn { color: var(--orange); }
.ink-motion .st.now .sl { color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
  .ink-motion .pulse, .ink-motion::before, .ink-motion :is(.scr, .shop, .app, .board, .card7, .cons, .brandb, .sgb, .agb)::after { animation: none; }
  .ink-motion * { transition-duration: 0s !important; transition-delay: 0s !important; }
}