/* ─────────────────────────────────────────────────────────────
   Swarm build: the page is drawn live by a crowd of cursors.
   Original implementation for Akira's portfolio.
   ───────────────────────────────────────────────────────────── */

/* hidden until a cursor builds it */
.bp { opacity: 0 !important; animation: none !important; }
.bp * { animation-play-state: paused !important; }
.art .ink.bs { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.art .wash.bs { opacity: 0; }

/* reveal styles */
.b-in { animation: bIn .62s var(--ease-out, ease) both !important; }
.b-sweep { animation: bSweep .8s var(--ease-out, ease) both !important; }
.b-fade { animation: bFade .45s ease both !important; }
@keyframes bIn { from { opacity: .0; clip-path: inset(0 100% 100% 0 round 18px); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0 round 0); } }
@keyframes bSweep { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bFade { from { opacity: 0; } to { opacity: 1; } }

/* overlay layer in page coordinates */
#sw { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; z-index: 70; overflow: visible; contain: layout style; }
#sw * { box-sizing: border-box; }
.sw-agent { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity .5s; z-index: 5; }
.sw-agent svg { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(0 2px 3px rgba(26, 23, 20, .28)); }
.sw-agent .ic { display: none; }
.sw-agent[data-m="arrow"] .ic-arrow, .sw-agent[data-m="cross"] .ic-cross, .sw-agent[data-m="ibeam"] .ic-ibeam, .sw-agent[data-m="pen"] .ic-pen, .sw-agent[data-m="grab"] .ic-arrow { display: block; }
.sw-agent .ic-cross, .sw-agent .ic-ibeam { transform: translate(-12px, -12px); }
.sw-agent .ic-pen { transform: translate(-2px, -22px); }
.sw-name { position: absolute; left: 16px; top: 20px; padding: 3px 8px 4px; border-radius: 4px 999px 999px 999px; color: #fff; font: 600 11px/1.1 'Instrument Sans', system-ui, sans-serif; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(26, 23, 20, .45); transition: opacity .3s, transform .3s; }
.sw-agent.quiet .sw-name { opacity: 0; transform: scale(.8); }
.sw-agent.press svg { transform: scale(.86); transform-origin: 2px 2px; }
.sw-agent.gone { opacity: 0; }

.sw-rect { position: absolute; border: 1.5px solid var(--c, #E8622A); background: color-mix(in srgb, var(--c, #E8622A) 6%, transparent); border-radius: 2px; transition: opacity .45s; }
.sw-rect.hatch { background: repeating-linear-gradient(135deg, rgba(26, 23, 20, .06) 0 6px, rgba(26, 23, 20, .02) 6px 12px); }
.sw-rect.sel { background: transparent; border-width: 1px; }
.sw-rect.sel i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid var(--c); }
.sw-rect.sel i:nth-child(1) { left: -4px; top: -4px; } .sw-rect.sel i:nth-child(2) { right: -4px; top: -4px; }
.sw-rect.sel i:nth-child(3) { left: -4px; bottom: -4px; } .sw-rect.sel i:nth-child(4) { right: -4px; bottom: -4px; }
.sw-rect.out { opacity: 0; }
.sw-badge { position: absolute; padding: 2px 6px; border-radius: 4px; background: var(--c, #E8622A); color: #fff; font: 600 10.5px/1.3 'JetBrains Mono', monospace; white-space: nowrap; transition: opacity .3s; }
.sw-caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -0.12em; background: var(--c, #E8622A); animation: swBlink .9s steps(1) infinite; }
@keyframes swBlink { 50% { opacity: 0; } }

.sw-guide { position: absolute; top: 0; width: 0; border-left: 1px solid rgba(232, 98, 42, .75); transition: opacity .6s; }
.sw-guide.h { width: auto; height: 0; border-left: 0; border-top: 1px solid rgba(232, 98, 42, .75); }
.sw-guide .sw-badge { top: 8px; left: 6px; background: #E8622A; }
.sw-guide.out { opacity: 0; }
.sw-measure { position: absolute; height: 0; border-top: 1px solid #E8622A; transition: opacity .4s; }
.sw-measure::before, .sw-measure::after { content: ""; position: absolute; top: -5px; width: 1px; height: 9px; background: #E8622A; }
.sw-measure::before { left: 0; } .sw-measure::after { right: 0; }
.sw-measure .sw-badge { left: 50%; top: -22px; transform: translateX(-50%); background: #E8622A; }
.sw-measure.v { width: 0; border-top: 0; border-left: 1px solid #E8622A; }
.sw-measure.v::before, .sw-measure.v::after { left: -5px; width: 9px; height: 1px; top: auto; }
.sw-measure.v::before { top: 0; } .sw-measure.v::after { bottom: 0; }
.sw-measure.v .sw-badge { left: 8px; top: 50%; transform: translateY(-50%); }
.sw-ghost { position: absolute; opacity: .55; outline: 1.5px solid #E8622A; outline-offset: -1px; overflow: hidden; pointer-events: none; }
.sw-anchor { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #fff; border: 1.4px solid var(--c, #E8622A); transition: opacity .4s; }
.sw-band { position: absolute; height: 0; border-top: 1.5px solid var(--c, #E8622A); transform-origin: 0 0; transition: opacity .4s; }

/* intro: ink drop the swarm orbits */
.sw-core { position: fixed; left: 50%; top: 38%; width: 120px; height: 120px; margin: -60px 0 0 -60px; z-index: 69; pointer-events: none; display: grid; place-items: center; transition: opacity .8s, transform 1s cubic-bezier(.16, 1, .3, 1); }
.sw-core .seal { width: 76px; height: 76px; font-size: 46px; border-radius: 18px; animation: coreIn .9s cubic-bezier(.16, 1, .3, 1) both; }
.sw-core::before { content: ""; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(232, 98, 42, .16), transparent 65%); animation: corePulse 2s ease-in-out infinite; }
.sw-core.out { opacity: 0; transform: scale(.5); }
.sw-core > p { position: absolute; top: 116px; white-space: nowrap; font: 500 12px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6B6560; }
.sw-core.out .sw-choose { opacity: 0; pointer-events: none; }
.sw-choose { position: absolute; left: 50%; top: 172px; width: min(460px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: chooseIn .7s cubic-bezier(.16, 1, .3, 1) .9s both; transition: opacity .4s; }
.sw-q { margin: 0; font: 400 clamp(21px, 3vw, 27px)/1.25 'Newsreader', Georgia, serif; letter-spacing: -.015em; color: #1A1714; }
.sw-q em { font-style: italic; color: #E8622A; }
.sw-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sw-opts button { appearance: none; font: 500 15px/1 'Instrument Sans', system-ui, sans-serif; min-height: 46px; padding: 0 20px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(26, 23, 20, .22); background: #FDFCFA; color: #1A1714; transition: transform .25s, background .25s, border-color .25s, box-shadow .3s; -webkit-tap-highlight-color: transparent; }
.sw-opts button:hover { transform: translateY(-2px); border-color: #1A1714; }
.sw-opts button.primary { background: #1A1714; color: #FAF8F5; border-color: #1A1714; box-shadow: 0 12px 26px -14px rgba(26, 23, 20, .8); }
.sw-opts button.primary:hover { background: #2a2520; }
.sw-opts button.ghost { border-color: transparent; background: transparent; color: #6B6560; text-decoration: underline; text-underline-offset: 4px; }
.sw-auto { margin: 0; font: 500 11px/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #6B6560; }
.sw-auto b { color: #B4461A; }
.sw-core:has(.sw-choose) > p { display: none; }
@keyframes chooseIn { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 480px) {
  .sw-choose { top: 150px; }
  .sw-opts { flex-direction: column; width: 100%; max-width: 300px; }
  .sw-opts button { width: 100%; }
}
@keyframes coreIn { from { transform: scale(.2) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes corePulse { 50% { transform: scale(1.12); opacity: .7; } }

@media (max-width: 760px) { .sw-core { top: 30%; } }
html.menu-open #sw, html.menu-open .sw-bar { opacity: 0; pointer-events: none; }

/* toolbar · warm paper, plain words, hand-drawn icons */
.sw-bar { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 0); z-index: 2147483100; display: flex; align-items: center; gap: 2px; padding: 7px 7px 7px 10px; border-radius: 22px; background: rgba(253, 252, 250, .86); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); color: #1A1714; font: 500 14px/1 'Instrument Sans', system-ui, sans-serif; border: 1px solid rgba(26, 23, 20, .09); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 6px -2px rgba(26, 23, 20, .08), 0 22px 48px -20px rgba(74, 52, 30, .35); transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .5s; max-width: calc(100vw - 24px); user-select: none; -webkit-user-select: none; }
.sw-bar.hide { transform: translate(-50%, 160%); opacity: 0; pointer-events: none; }
.sw-bar::before { content: "Scroll down. They'll follow you."; position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px); padding: 9px 16px; border-radius: 999px; background: #FDFCFA; color: #4A4540; border: 1px solid rgba(26, 23, 20, .09); font: italic 400 16px/1 'Newsreader', Georgia, serif; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .4s, transform .5s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 12px 28px -16px rgba(74, 52, 30, .45); }
.sw-bar.nudge::before { opacity: 1; transform: translate(-50%, 0); animation: nudge 1.8s ease-in-out infinite; }

.sw-status { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 2px; white-space: nowrap; }
.sw-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #E8622A; color: #FAF8F5; font: 700 17px/1 'Noto Serif JP', 'Yu Mincho', serif; filter: url(#ink-rough); box-shadow: inset 0 0 0 1.5px rgba(250, 248, 245, .25); }
.sw-txt { display: flex; flex-direction: column; gap: 5px; }
.sw-line1 { font: 400 16px/1 'Newsreader', Georgia, serif; letter-spacing: -.01em; color: #1A1714; }
.sw-ink { width: 120px; height: 8px; overflow: visible; }
.sw-ink path { fill: none; stroke-linecap: round; stroke-width: 2; }
.sw-ink .bg { stroke: #EAE3DA; }
.sw-ink .fg { stroke: #E8622A; stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s cubic-bezier(.2, .7, .2, 1); filter: url(#ink-brush); }
.sw-pct { font: 500 12px/1 'JetBrains Mono', monospace; color: #6B6560; font-variant-numeric: tabular-nums; min-width: 34px; }
.sw-rule { width: 1px; height: 26px; background: rgba(26, 23, 20, .1); margin: 0 6px 0 2px; flex: none; }

.sw-bar button { appearance: none; display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; background: transparent; color: #4A4540; font: inherit; padding: 0 14px; height: 42px; border-radius: 14px; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s; -webkit-tap-highlight-color: transparent; }
.sw-bar button .ic { width: 18px; height: 18px; flex: none; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.sw-bar button:hover { background: #F2EDE7; color: #1A1714; }
.sw-bar button:hover .ic { transform: rotate(-8deg) scale(1.06); }
.sw-bar button:active { transform: scale(.97); }
.sw-bar button:focus-visible { outline: 2px solid #E8622A; outline-offset: 2px; }
.sw-bar button.on { background: rgba(232, 98, 42, .1); color: #B4461A; border-color: rgba(232, 98, 42, .22); }
.sw-bar .opt-skip { margin-left: 4px; color: #B4461A; border-color: rgba(180, 70, 26, .3); background: #FDFCFA; }
.sw-bar .opt-skip:hover { background: #E8622A; color: #FDFCFA; border-color: #E8622A; }
.sw-bar .opt-skip:hover .ic { transform: translateX(3px); }
.sw-bar button.icon-only { width: 42px; padding: 0; justify-content: center; }
.sw-bar .done-msg { font: 400 16px/1 'Newsreader', Georgia, serif; color: #1A1714; }
.sw-bar .done-msg em { font-style: italic; color: #E8622A; }
@media (max-width: 760px) {
  .sw-bar { padding: 6px 6px 6px 8px; border-radius: 20px; }
  .sw-status { padding-right: 8px; gap: 9px; }
  .sw-ink { width: 64px; }
  .sw-line1 { font-size: 14px; }
  .sw-bar .opt-tour .lbl, .sw-bar .opt-speed .lbl, .sw-bar .opt-sound .lbl { display: none; }
  .sw-bar button { padding: 0 11px; height: 40px; }
  .sw-bar .opt-skip { padding: 0 13px; }
  .sw-name { font-size: 10px; padding: 2px 6px 3px; }
}
.sw-bar .lbl-s { display: none; }
@media (max-width: 760px) { .sw-bar .opt-skip .lbl { display: none; } .sw-bar .opt-skip .lbl-s { display: inline; } }
@media (max-width: 520px) { .sw-pct { display: none; } .sw-ink { width: 54px; } }
@media (max-width: 400px) { .sw-bar .opt-speed { display: none; } .sw-line1 { font-size: 13px; } .sw-bar .done-msg { font-size: 14px; white-space: normal; } }

@keyframes nudge { 50% { transform: translate(-50%, -5px); } }
/* start card buttons: warm, not dark */
.sw-opts button.primary { background: #E8622A; color: #FFFDF9; border-color: #E8622A; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 28px -14px rgba(232, 98, 42, .7); }
.sw-opts button.primary:hover { background: #DB5620; border-color: #DB5620; }
.sw-opts button { border-radius: 16px; min-height: 50px; padding: 0 22px; border-color: rgba(26, 23, 20, .14); }

/* ── phones & touch: lighter cursors, full-width toolbar ── */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .sw-agent svg { filter: none; }
  .sw-agent .ic path:first-child { stroke-width: 1.8; }
  .sw-name { box-shadow: none; }
  .sw-ink .fg { filter: none; }
  .sw-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(253, 252, 250, .98); }
  .sw-rect { background: transparent; }
  .sw-rect.hatch { background: rgba(26, 23, 20, .04); }
}
@media (max-width: 760px) {
  .sw-bar { left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; max-width: none; gap: 6px; padding: 7px; border-radius: 20px; }
  .sw-bar.hide { transform: translateY(170%); }
  .sw-rule, .sw-bar .opt-speed, .sw-pct { display: none; }
  .sw-status { flex: 1 1 auto; min-width: 0; gap: 10px; padding: 0 2px 0 3px; }
  .sw-txt { min-width: 0; flex: 1 1 auto; gap: 6px; }
  .sw-line1 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .sw-ink { width: 100%; max-width: 120px; }
  .sw-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 19px; }
  .sw-bar button { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 14px; flex: none; background: #F6F2EC; color: #4A4540; }
  .sw-bar button .ic { width: 20px; height: 20px; }
  .sw-bar button.on { background: rgba(232, 98, 42, .12); }
  .sw-bar .opt-skip { width: auto; padding: 0 14px 0 15px; gap: 6px; margin-left: 0; background: #FDFCFA; }
  .sw-bar .opt-skip .lbl-s { font-size: 15px; }
  .sw-bar button.icon-only { width: 44px; }
  .sw-bar .done-msg { font-size: 15px; white-space: normal; line-height: 1.2; }
  .sw-bar::before { font-size: 15px; padding: 8px 14px; }
  .sw-choose { gap: 14px; }
}
@media (max-width: 360px) { .sw-line1 { font-size: 13.5px; } .sw-bar .opt-skip .ic { display: none; } }