/* shell/demo.css: the demo brand's look, for any part that shows it (today: make). Loaded for every page by build.mjs. */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;600&family=El+Messiri:wght@700&display=swap');

/* The demo brand براندك, sized by its container (cqw): the BK kit's CSS. Scoped to [data-part] so its weight matches
   the parts' own rules (the old asleep parts still carry their own scoped copy). */
[data-part] .bk { --bk-paper: #F4EFE6; --bk-ox: #7E2A36; --bk-oxp: #E8D5D2; --bk-ink: #241C18; --bk-mute: #8A8079; --bk-line: #E2D9CB; --bk-card: #FBF8F3; font-family: 'Alexandria', var(--f-ar); color: var(--bk-ink); line-height: 1.3; letter-spacing: 0; }
[data-part] .bk.sleep, [data-part] .sleep .bk, [data-part] .bk-page.sleep { --bk-paper: #232934; --bk-ox: #363D4A; --bk-oxp: #2B313C; --bk-ink: #3A4150; --bk-mute: #333A46; --bk-line: #2B313C; --bk-card: #272D38; }
[data-part] .bk .ox { color: var(--bk-ox); }
[data-part] .bk-mono { display: block; overflow: visible; }
[data-part] .bk-ring { fill: none; stroke: var(--bk-ox); stroke-width: 6.5; stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; }
[data-part] .bk-ba { fill: none; stroke: var(--bk-ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
[data-part] .bk-dot { fill: var(--bk-ox); }
[data-part] .bk-ad-hd .bk-ring, [data-part] .bk-s-hd .bk-ring { stroke-dasharray: none; stroke-width: 7; }
[data-part] .bk-ad-hd .bk-ba, [data-part] .bk-s-hd .bk-ba { stroke-dasharray: none; stroke-width: 11; }
[data-part] .bk .w { display: inline-block; }

/* the logo card */
[data-part] .bk-logo { position: absolute; inset: 0; background: var(--bk-paper); border-radius: 5cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
[data-part] .bk-mw { display: block; width: 37cqw; height: 37cqw; transform-origin: 50% 90%; }
[data-part] .bk-mw .bk-mono { width: 100%; height: 100%; }
[data-part] .bk-wm { font: 700 17cqw/1.15 'El Messiri', var(--f-ar); margin-top: 3cqw; color: var(--bk-ink); }
html[lang="en"] [data-part] .bk-wm { font-size: 14cqw; letter-spacing: -.01em; }
[data-part] .bk-tag { font: 400 5.4cqw/1.3 'Alexandria', var(--f-ar); color: var(--bk-mute); }
html[lang="en"] [data-part] .bk-tag { letter-spacing: .14em; text-transform: uppercase; font-size: 4.4cqw; margin-top: 1.2cqw; }

/* the ad: a square post that can stretch into a Reel */
[data-part] .bk-ad { position: absolute; inset: 0; background: var(--bk-paper); border-radius: 4.5cqw; padding: 11cqw 8.5cqw 0; display: flex; flex-direction: column; overflow: hidden; }
[data-part] .bk-bar { position: absolute; top: 4cqw; inset-inline: 7cqw; height: 1.3cqw; border-radius: 1cqw; background: var(--bk-oxp); overflow: hidden; }
[data-part] .bk-bar > i { display: block; height: 100%; background: var(--bk-ox); transform-origin: 100% 50%; transform: scaleX(.42); }
html[lang="en"] [data-part] .bk-bar > i { transform-origin: 0 50%; }
[data-part] .bk-ad-hd { display: flex; align-items: center; gap: 2.2cqw; font: 600 5.6cqw/1 'Alexandria', var(--f-ar); color: var(--bk-ink); }
[data-part] .bk-ad-hd .bk-mono { width: 8.5cqw; height: 8.5cqw; }
[data-part] .bk-ad-h { font: 700 15.5cqw/1.12 'El Messiri', var(--f-ar); margin-top: 5.5cqw; color: var(--bk-ink); }
[data-part] .bk-ad-h .ox { display: block; }
html[lang="en"] [data-part] .bk-ad-h { font-size: 12.5cqw; line-height: 1.02; letter-spacing: -.02em; }
[data-part] .bk-chart { position: relative; flex: 1; min-height: 12cqw; margin-top: 6cqw; display: flex; align-items: flex-end; gap: 3.2cqw; direction: ltr; }
[data-part] .bk-chart > i { flex: 1; height: var(--h); background: var(--bk-oxp); border-radius: 1.2cqw 1.2cqw 0 0; transform-origin: 50% 100%; }
[data-part] .bk-chart > i:last-of-type { background: var(--bk-ox); }
[data-part] .bk-chart svg { position: absolute; inset: 0 0 4cqw; width: 100%; height: calc(100% - 4cqw); overflow: visible; }
[data-part] .bk-chart polyline { fill: none; stroke: var(--bk-ox); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }

/* the phone and the site inside it */
[data-part] .bk-phone { position: absolute; inset: 0; background: #0A0D13; border-radius: 15cqw; padding: 3.2cqw; box-shadow: inset 0 0 0 .7cqw #2A303B; }
[data-part] .bk-screen { position: relative; height: 100%; border-radius: 12cqw; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior-x: none; background: #232934; outline-offset: -4px; }
[data-part] .bk-screen::-webkit-scrollbar { display: none; }
[data-part] .bk-notch { position: absolute; top: 6.4cqw; left: 50%; width: 29cqw; height: 8cqw; margin-left: -14.5cqw; border-radius: 9cqw; background: #0A0D13; z-index: 2; pointer-events: none; }
[data-part] .bk-page { position: relative; z-index: 1; color: var(--bk-ink); background: var(--bk-paper); padding: 19cqw 7.5cqw 12cqw; display: flex; flex-direction: column; gap: 4.6cqw; min-height: 100%; }
[data-part] .bk-page.sleep { position: absolute; inset: 0 0 auto; z-index: 0; pointer-events: none; }
[data-part] .bk-s-hd { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; margin: -19cqw -7.5cqw 0; padding: 19cqw 7.5cqw 4.4cqw; background: var(--bk-paper); border-bottom: .5cqw solid var(--bk-line); font: 600 5.8cqw/1 'Alexandria', var(--f-ar); }
[data-part] .bk-s-brand { display: flex; align-items: center; gap: 2.2cqw; }
[data-part] .bk-s-hd .bk-mono { width: 8.4cqw; height: 8.4cqw; }
[data-part] .bk-menu { width: 6.4cqw; height: 3.8cqw; border-block: .9cqw solid var(--bk-ink); }
[data-part] .bk-s-h { font: 700 12.5cqw/1.12 'El Messiri', var(--f-ar); margin-top: 3cqw; }
[data-part] .bk-s-h .ox { display: block; }
html[lang="en"] [data-part] .bk-s-h { font-size: 11cqw; line-height: 1.02; letter-spacing: -.02em; }
[data-part] .bk-s-sub { font: 400 4.6cqw/1.55 'Alexandria', var(--f-ar); color: var(--bk-mute); }
[data-part] .bk-s-card { position: relative; aspect-ratio: 4 / 3; border-radius: 5cqw; background: var(--bk-ox); overflow: hidden; }
[data-part] .bk-s-card svg { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-part] .bk-s-card polyline { fill: none; stroke: var(--bk-paper); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
[data-part] .bk-s-card > i { position: absolute; left: 87%; top: 16%; width: 5.5cqw; height: 5.5cqw; background: var(--bk-paper); transform: rotate(45deg); border-radius: .8cqw; }
[data-part] .bk-s-t { font: 600 5.2cqw/1.2 'Alexandria', var(--f-ar); margin-top: 4cqw; }
[data-part] .bk-s-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3.4cqw; }
[data-part] .bk-s-list li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4cqw; padding: 4.6cqw 5.2cqw; border-radius: 4.4cqw; background: var(--bk-card); box-shadow: 0 0 0 .5cqw var(--bk-line); }
[data-part] .bk-s-list .n { font: 700 8cqw/1 'El Messiri', var(--f-ar); color: var(--bk-ox); }
[data-part] .bk-s-list li > span { display: grid; gap: 1cqw; }
[data-part] .bk-s-list li > span > b { font: 600 5.4cqw/1.2 'Alexandria', var(--f-ar); }
[data-part] .bk-s-list .s { font: 400 3.9cqw/1.3 'Alexandria', var(--f-ar); color: var(--bk-mute); }
[data-part] .bk-s-q { font: 700 8.4cqw/1.25 'El Messiri', var(--f-ar); color: var(--bk-ink); padding: 5cqw 0 2cqw; }
html[lang="en"] [data-part] .bk-s-q { font-size: 7.4cqw; line-height: 1.1; letter-spacing: -.015em; }
[data-part] .bk-s-ft { font: 400 3.6cqw/1.3 'Alexandria', var(--f-ar); color: var(--bk-mute); text-align: center; padding-top: 6cqw; margin-top: 4cqw; border-top: .5cqw solid var(--bk-line); }
[data-part] .bk-btn { display: grid; place-items: center; height: 15.5cqw; margin-top: 5cqw; border-radius: 99px; background: var(--bk-ox); color: var(--bk-paper); font: 600 5.6cqw/1 'Alexandria', var(--f-ar); text-decoration: none; transition: transform .14s cubic-bezier(.3, 0, .5, 1); -webkit-tap-highlight-color: transparent; }
[data-part] .bk-btn > span { grid-area: 1 / 1; }
[data-part] .bk-btn-b { visibility: hidden; }
[data-part] .bk-btn.is-booked { background: var(--bk-oxp); color: var(--bk-ox); }
[data-part] .bk-btn.is-booked .bk-btn-a { visibility: hidden; }
[data-part] .bk-btn.is-booked .bk-btn-b { visibility: visible; animation: bk-land .42s cubic-bezier(.2, .9, .3, 1) both; }
[data-part] .bk-btn.is-press { transform: scale(1.04, .82); }
/* the empty button slot (asleep-b: the pixel becomes the button, so while it's alive the slot waits for it) */
[data-part].bk-live .bk-slot:not(.is-px):not(.is-booked):not(.is-plain) { background: none; color: transparent; box-shadow: inset 0 0 0 .6cqw var(--bk-line); outline: .5cqw dashed var(--bk-mute); outline-offset: -.5cqw; }
[data-part].bk-live .bk-slot:not(.is-px):not(.is-booked):not(.is-plain) > span { visibility: hidden; }
[data-part] .bk-slot.is-px { background: #13A497; color: var(--bk-paper); }
[data-part] .bk-slot.is-px .bk-btn-a { animation: bk-land .36s cubic-bezier(.2, .9, .3, 1) both; }
[data-part] .bk-slot.is-booked { background: var(--bk-oxp); color: var(--bk-ox); }
[data-part] .bk-slot.is-booked .bk-btn-a { visibility: hidden; }
[data-part] .bk-slot.is-booked .bk-btn-b { visibility: visible; animation: bk-land .42s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes bk-land { 0% { transform: translateY(-.5em) scaleY(1.2); opacity: 0; } 55% { transform: translateY(0) scale(1.08, .86); opacity: 1; } 100% { transform: none; } }

/* the Reel playing: words arrive by word, bars rise one after another, the line draws, the bar runs; it loops */
[data-part] .bk-ad.pre .bk-ad-h .w { opacity: 0; }
[data-part] .bk-ad.pre .bk-chart > i { transform: scaleY(0); }
[data-part] .bk-ad.pre .bk-chart svg { clip-path: inset(0 100% 0 0); }
[data-part] .bk-ad.pre .bk-bar > i { transform: scaleX(0); }
[data-part] .bk-ad.is-reel .bk-ad-h .w { animation: bk-land .5s cubic-bezier(.2, .9, .3, 1) both; }
[data-part] .bk-ad.is-reel .bk-ad-h .w:nth-of-type(1) { animation-delay: .04s; }
[data-part] .bk-ad.is-reel .ox .w:nth-of-type(1) { animation-delay: .16s; }
[data-part] .bk-ad.is-reel .ox .w:nth-of-type(2) { animation-delay: .26s; }
[data-part] .bk-ad.is-reel .ox .w:nth-of-type(3) { animation-delay: .36s; }
[data-part] .bk-ad.is-reel .bk-bar > i { animation: bk-run 6s linear .1s infinite both; }
[data-part] .bk-ad.is-reel .bk-chart > i { animation: bk-rise 6s cubic-bezier(.2, .9, .3, 1) both infinite; }
[data-part] .bk-ad.is-reel .bk-chart > i:nth-of-type(2) { animation-delay: .09s; }
[data-part] .bk-ad.is-reel .bk-chart > i:nth-of-type(3) { animation-delay: .18s; }
[data-part] .bk-ad.is-reel .bk-chart > i:nth-of-type(4) { animation-delay: .27s; }
[data-part] .bk-ad.is-reel .bk-chart > i:nth-of-type(5) { animation-delay: .38s; }
[data-part] .bk-ad.is-reel .bk-chart svg { animation: bk-draw 6s ease-in-out both infinite; }
@keyframes bk-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bk-rise { 0% { transform: scaleY(0); } 7% { transform: scaleY(1.07); } 10% { transform: scaleY(.98); } 12%, 100% { transform: scaleY(1); } }
@keyframes bk-draw { 0%, 10% { clip-path: inset(-10% 100% -10% 0); } 24%, 100% { clip-path: inset(-10% 0 -10% 0); } }
[data-part].is-off .bk-ad.is-reel *, [data-part].is-off .bk-ad.is-reel { animation-play-state: paused !important; }

/* the logo's monogram before its sting */
[data-part] .bk-logo.pre .bk-ring, [data-part] .bk-logo.pre .bk-ba { stroke-dashoffset: 100; }
[data-part] .bk-logo.pre .bk-dot-g { opacity: 0; }

/* the drawn layer: a screen-sized canvas that sticks while its part scrolls by */
[data-part] .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }