/* Draft 11 · Brand & design: a mark that is built */
.ink-motion .brandb { position: relative; height: 400px; border-radius: 12px; background: var(--navy-2); border: 1px solid rgba(230,213,183,.07); overflow: hidden; }
.ink-motion .bv { position: absolute; inset: 0; padding: 26px; transition: opacity .5s, transform .5s; }
.ink-motion .bv.off { opacity: 0; transform: translateY(8px); pointer-events: none; }
.ink-motion .bv1 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.ink-motion .mark { display: grid; justify-items: center; gap: 12px; }
.ink-motion .mark svg { width: 100%; max-width: 230px; height: auto; overflow: visible; }
.ink-motion .mk-g line, .ink-motion .mk-g rect, .ink-motion .mk-g circle { fill: none; stroke: rgba(230,213,183,.3); stroke-width: 1; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.2s ease, opacity .6s; }
.ink-motion .brandb.g1 .mk-g line, .ink-motion .brandb.g1 .mk-g rect, .ink-motion .brandb.g1 .mk-g circle { stroke-dashoffset: 0; }
.ink-motion .brandb.g3 .mk-g { opacity: .25; }
.ink-motion .mk-ring { fill: none; stroke: var(--cream); stroke-width: 10; stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1); }
.ink-motion .brandb.g2 .mk-ring { stroke-dashoffset: 0; }
.ink-motion .mk-q { fill: var(--orange); opacity: 0; transform-box: fill-box; transform-origin: 0% 100%; transform: scale(.4); transition: opacity .5s, transform .6s cubic-bezier(.3,1.4,.5,1); }
.ink-motion .brandb.g3 .mk-q { opacity: 1; transform: none; }
.ink-motion .mk-d { fill: var(--cream); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: opacity .3s .2s, transform .4s .2s cubic-bezier(.3,1.6,.5,1); }
.ink-motion .brandb.g3 .mk-d { opacity: 1; transform: none; }
.ink-motion .kit { display: grid; gap: 18px; align-content: center; }
.ink-motion .kit .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8E92AB; opacity: 0; transition: opacity .4s; }
.ink-motion .brandb.g4 .kit .k { opacity: 1; }
.ink-motion .sw { display: flex; gap: 10px; }
.ink-motion .sw i { width: 42px; height: 42px; border-radius: 50%; background: var(--c); border: 1px solid rgba(230,213,183,.2); transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--i) * .15s); }
.ink-motion .brandb.g4 .sw i { transform: scale(1); }
.ink-motion .spec { display: flex; align-items: baseline; gap: 14px; opacity: 0; transform: translateY(6px); transition: opacity .5s .5s, transform .5s .5s; }
.ink-motion .brandb.g4 .spec { opacity: 1; transform: none; }
.ink-motion .spec b { font-size: 48px; font-weight: 800; line-height: 1; color: var(--cream); white-space: nowrap; }
.ink-motion .spec span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.ink-motion .bv2 { display: grid; grid-template-columns: 1.25fr .8fr .7fr; gap: 16px; align-items: center; }
.ink-motion .ap { border-radius: 8px; position: relative; display: grid; place-items: center; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; transition-delay: calc(var(--i) * .25s); box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); }
.ink-motion .bv2.on .ap { opacity: 1; transform: none; }
.ink-motion .ap svg { width: 46%; height: auto; }
.ink-motion .ap .cap-t { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font-size: 12px; color: #8E92AB; }
.ink-motion .ap-card { aspect-ratio: 1.75; background: var(--navy); border: 1px solid rgba(230,213,183,.18); }
.ink-motion .ap-bro { aspect-ratio: .72; background: #F2EADB; }
.ink-motion .ap-bro svg { width: 52%; margin-bottom: 40%; }
.ink-motion .ap-bro::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 14%; height: 18%; background: repeating-linear-gradient(rgba(30,34,61,.25) 0 3px, transparent 3px 9px); }
.ink-motion .ap-ph { aspect-ratio: .5; background: #11142A; border-radius: 16px; border: 1.5px solid rgba(230,213,183,.3); padding: 18% 9%; align-content: start; }
.ink-motion .ap-ph .post { width: 100%; aspect-ratio: 1; border-radius: 6px; background: #8FA38A; display: grid; place-items: center; }
.ink-motion .ap-ph .post svg { width: 58%; }
.ink-motion .guide { position: absolute; left: 50%; bottom: 20px; margin-left: -95px; width: 190px; padding: 14px; border-radius: 8px; background: #F2EADB; color: var(--navy); display: grid; gap: 7px; opacity: 0; transform: translateY(10px) rotate(3deg); transition: opacity .5s, transform .5s; box-shadow: 0 18px 30px -16px rgba(0,0,0,.7); }
.ink-motion .guide b { font-size: 12px; font-weight: 800; }
.ink-motion .guide i { height: 5px; border-radius: 3px; background: rgba(30,34,61,.22); }
.ink-motion .guide i:nth-child(3) { width: 70%; }
.ink-motion .guide i:nth-child(5) { width: 55%; }
.ink-motion .guide .sw2 { display: flex; gap: 4px; }
.ink-motion .guide .sw2 u { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.ink-motion .brandb.g6 .guide { opacity: 1; transform: rotate(-2deg); }
.ink-motion .brandb.g6 .bv2 { transform: translateY(-46px) scale(.84); }
.ink-motion .ap .cap-t { transition: opacity .3s; }
.ink-motion .brandb.g6 .ap .cap-t { opacity: 0; }
@media (max-width: 600px) {
  .ink-motion .brandb { height: 420px; }
  .ink-motion .bv { padding: 18px; }
  .ink-motion .bv1 { grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: center; }
  .ink-motion .mark svg { max-width: 150px; }
  .ink-motion .kit { gap: 10px; justify-items: center; }
  .ink-motion .sw i { width: 30px; height: 30px; }
  .ink-motion .spec b { font-size: 36px; }
  .ink-motion .bv2 { grid-template-columns: 1fr 1fr; align-content: center; gap: 30px 14px; }
  .ink-motion .ap-card { grid-column: 1 / -1; width: 70%; justify-self: center; }
  .ink-motion .ap-ph { width: 62%; justify-self: center; }
  .ink-motion .guide { width: 150px; margin-left: -75px; bottom: 12px; }
}