/* holobiome.ai landing — icon motion.
   Three states per icon:
     idle   → always running, slow and quiet
     hover  → .card:is(:hover,:focus-within,.kb)  — a perturbation of the idle motion
     launch → .card.launch — a one-shot, ~550ms, right before navigation
   Reduced motion: idle loops stop, hover is minimal, launch is instant (handled in app.js). */

.ic { width: 100%; height: 100%; display: block; overflow: visible; }
.ic .ac  { stroke: var(--ac); }
.ic .acf { fill: var(--ac); stroke: none; }
.tb, .ic .tb { transform-box: fill-box; transform-origin: center; }   /* any node/dot that scales must scale in place — also outside .ic (background net, logos) */
.ic .vb  { transform-box: view-box; }

/* ---------- shared keyframes ---------- */
@keyframes kf-spin      { to { transform: rotate(360deg); } }
@keyframes kf-spin-rev  { to { transform: rotate(-360deg); } }
@keyframes kf-breathe   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes kf-pulse-o   { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes kf-twinkle   { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes kf-flow      { to { stroke-dashoffset: -48; } }
@keyframes kf-flow-fast { to { stroke-dashoffset: -96; } }
@keyframes kf-bob       { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes kf-sway      { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes kf-shake     { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
@keyframes kf-expand-fade { to { transform: scale(2); opacity: 0; } }
@keyframes kf-collapse  { to { transform: scale(0); opacity: 0; } }
@keyframes kf-flash     { 0% { opacity: 0; } 35% { opacity: .95; } 100% { opacity: 0; } }
@keyframes kf-pop       { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes kf-fade-out  { to { opacity: 0; } }
@keyframes kf-draw      { to { stroke-dashoffset: 0; } }
@keyframes kf-rise      { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes kf-drop      { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 80% { transform: translateY(18px); opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
@keyframes kf-sweep-y   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(46px); } }
@keyframes kf-sweep-y2  { 0%,100% { transform: translateY(-16px); } 50% { transform: translateY(16px); } }
@keyframes kf-fly-up    { to { transform: translateY(-26px) scale(.6); opacity: 0; } }
@keyframes kf-fly-right { to { transform: translateX(40px) rotate(6deg); opacity: 0; } }
@keyframes kf-glow      { 0%,100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 6px var(--ac)); } }

/* ---------- portal ---------- */
.ic-portal .ring { animation: kf-breathe 6s ease-in-out infinite; }
.ic-portal .r2   { animation: kf-breathe 6s ease-in-out infinite 1s, kf-spin 40s linear infinite; }
.ic-portal .r3   { animation-delay: 2s; }
.ic-portal .o1   { animation: kf-spin 14s linear infinite; }
.ic-portal .o2   { animation: kf-spin-rev 9s linear infinite; }
.ic-portal .o3   { animation: kf-spin 6s linear infinite; }
.ic-portal .core { animation: kf-pulse-o 3s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-portal .o1 { animation-duration: 3s; }
.card:is(:hover,:focus-within,.kb) .ic-portal .o2 { animation-duration: 2s; }
.card:is(:hover,:focus-within,.kb) .ic-portal .o3 { animation-duration: 1.2s; }
.card:is(:hover,:focus-within,.kb) .ic-portal .r2 { animation: kf-spin 4s linear infinite; }
.card:is(:hover,:focus-within,.kb) .ic-portal .ring { stroke-width: 3; }
.card.launch .ic-portal .ring  { animation: kf-expand-fade .55s ease-in forwards; }
.card.launch .ic-portal .orbit { animation: kf-collapse .45s ease-in forwards; }
.card.launch .ic-portal .core  { animation: kf-expand-fade .5s ease-out forwards; }
.card.launch .ic-portal .flash { animation: kf-flash .55s ease-out forwards; }

/* ---------- instructions ---------- */
@keyframes kf-chk { 0%,10% { stroke-dashoffset: 22; } 30%,80% { stroke-dashoffset: 0; } 95%,100% { stroke-dashoffset: 22; } }
.ic-instructions .chk { stroke-dasharray: 22; stroke-dashoffset: 22; animation: kf-chk 6s ease-in-out infinite; }
.ic-instructions .i2 .chk { animation-delay: .7s; }
.ic-instructions .i3 .chk { animation-delay: 1.4s; }
.ic-instructions .tube { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ic-instructions .cap  { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:is(:hover,:focus-within,.kb) .ic-instructions .tube { transform: rotate(-12deg); }
.card:is(:hover,:focus-within,.kb) .ic-instructions .cap  { transform: translateY(-4px); }
.card:is(:hover,:focus-within,.kb) .ic-instructions .chk  { animation-duration: 2.4s; }
.card.launch .ic-instructions .cap { animation: kf-fly-up .5s ease-in forwards; }
.card.launch .ic-instructions .chk { animation: none; stroke-dashoffset: 0; transition: stroke-dashoffset .3s; }
.card.launch .ic-instructions .liq { animation: kf-rise .5s ease-out forwards; }

/* ---------- qr ---------- */
@keyframes kf-qr-scan { 0% { transform: translateY(0); } 50% { transform: translateY(56px); } 100% { transform: translateY(0); } }
@keyframes kf-qr-flick { 0%,100% { opacity: 1; } 50% { opacity: .15; } }
.ic-qr .scan { animation: kf-qr-scan 4s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-qr .m { animation: kf-qr-flick .9s steps(2) infinite; animation-delay: calc(var(--i) * -.13s); }
.card:is(:hover,:focus-within,.kb) .ic-qr .scan { animation-duration: 1.2s; }
.card.launch .ic-qr .scan { animation: kf-fade-out .3s forwards; }
.card.launch .ic-qr .m, .card.launch .ic-qr .finders { animation: kf-fade-out .35s forwards; }
.card.launch .ic-qr .ok { animation: kf-pop .5s .1s cubic-bezier(.2,1.4,.4,1) forwards; }

/* ---------- h4 ---------- */
@keyframes kf-fill { 0%,8% { stroke-dashoffset: 32; } 30%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 32; } }
.ic-h4 .f { stroke-dasharray: 32; stroke-dashoffset: 32; animation: kf-fill 5s ease-in-out infinite; }
.ic-h4 .f2 { animation-delay: .5s; }
.ic-h4 .f3 { animation-delay: 1s; }
.ic-h4 .drop { animation: kf-bob 3s ease-in-out infinite; }
.ic-h4 .clip { transition: transform .3s; }
.card:is(:hover,:focus-within,.kb) .ic-h4 .clip { animation: kf-shake .6s ease-in-out; }
.card:is(:hover,:focus-within,.kb) .ic-h4 .f { animation-duration: 2s; }
.card:is(:hover,:focus-within,.kb) .ic-h4 .drop { animation-duration: 1s; }
.card.launch .ic-h4 .board { animation: kf-fly-up .55s ease-in forwards; }
.card.launch .ic-h4 .drop  { animation: kf-collapse .4s forwards; }

/* ---------- evident ---------- */
.ic-evident .env { animation: kf-bob 3.2s ease-in-out infinite; }
.ic-evident .face { animation: kf-pulse-o 4s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-evident .env { transform: translateY(-6px) rotate(-6deg); transition: transform .4s cubic-bezier(.2,.8,.2,1); animation: none; }
.card.launch .ic-evident .env { animation: kf-fly-up .5s ease-in forwards; }
.card.launch .ic-evident .box { animation: kf-fade-out .5s forwards; }

/* ---------- demo ---------- */
@keyframes kf-dash-rot { to { stroke-dashoffset: -60; } }
.ic-demo .ring  { animation: kf-spin 30s linear infinite; }
.ic-demo .ring2 { animation: kf-spin-rev 18s linear infinite; }
.ic-demo .play  { animation: kf-breathe 3s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-demo .ring  { animation-duration: 6s; }
.card:is(:hover,:focus-within,.kb) .ic-demo .ring2 { animation-duration: 4s; }
.card:is(:hover,:focus-within,.kb) .ic-demo .play  { animation: kf-breathe 1s ease-in-out infinite; }
.card.launch .ic-demo .play  { animation: kf-expand-fade .55s ease-in forwards; }
.card.launch .ic-demo .pulse { animation: kf-expand-fade .5s ease-out forwards; opacity: 1; }
.card.launch .ic-demo .ring, .card.launch .ic-demo .ring2 { animation: kf-fade-out .4s forwards; }

/* ---------- reports ---------- */
@keyframes kf-bar { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(var(--s, .6)); } }
.ic-reports .b { transform-box: fill-box; transform-origin: 50% 100%; animation: kf-bar 4s ease-in-out infinite; }
.ic-reports .b1 { --s: .55; }
.ic-reports .b2 { --s: .7; animation-delay: .6s; }
.ic-reports .b3 { --s: 1.6; animation-delay: 1.2s; }
.ic-reports .page { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.card:is(:hover,:focus-within,.kb) .ic-reports .p2 { transform: rotate(-6deg); }
.card:is(:hover,:focus-within,.kb) .ic-reports .p3 { transform: rotate(-13deg); }
.card:is(:hover,:focus-within,.kb) .ic-reports .b  { animation-duration: 1.4s; }
.card.launch .ic-reports .p1 { animation: kf-fly-up .5s ease-in forwards; }
.card.launch .ic-reports .p2, .card.launch .ic-reports .p3 { animation: kf-fade-out .5s forwards; }

/* ---------- s16 ---------- */
@keyframes kf-rung { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.12); } }
.ic-s16 .strand { animation: kf-flow 3s linear infinite; }
.ic-s16 .s2 { animation-direction: reverse; }
.ic-s16 .rg { animation: kf-rung 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.375s); }
.card:is(:hover,:focus-within,.kb) .ic-s16 .strand { animation-duration: .9s; }
.card:is(:hover,:focus-within,.kb) .ic-s16 .rg { animation-duration: .9s; animation-delay: calc(var(--i) * -.1125s); }
.card:is(:hover,:focus-within,.kb) .ic-s16 .lbl { fill: var(--ac); }
.card.launch .ic-s16 .s1 { transform: translateX(-16px); opacity: 0; transition: transform .5s ease-in, opacity .5s; }
.card.launch .ic-s16 .s2 { transform: translateX(16px); opacity: 0; transition: transform .5s ease-in, opacity .5s; }
.card.launch .ic-s16 .rg { animation: kf-collapse .3s forwards; }
.card.launch .ic-s16 .lbl { animation: kf-fade-out .3s forwards; }

/* ---------- bbt ---------- */
@keyframes kf-cell { 0%,100% { opacity: .22; transform: scale(1); } 50% { opacity: .95; transform: scale(1.06); } }
@keyframes kf-cell-out { to { transform: translate(calc(var(--dx) * 1.6), calc(var(--dy) * 1.6)) scale(.4); opacity: 0; } }
.ic-bbt .c { animation: kf-cell 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.24s); }
.ic-bbt .rowhl { transition: opacity .3s; }
.card:is(:hover,:focus-within,.kb) .ic-bbt .c { animation-duration: 1.2s; animation-delay: calc(var(--i) * -.08s); }
.card:is(:hover,:focus-within,.kb) .ic-bbt .rowhl { opacity: .9; animation: kf-pulse-o 1.2s ease-in-out infinite; }
.card.launch .ic-bbt .c { animation: kf-cell-out .5s ease-in forwards; }
.card.launch .ic-bbt .frame, .card.launch .ic-bbt .rowhl { animation: kf-expand-fade .55s ease-in forwards; }

/* ---------- holopetri ---------- */
@keyframes kf-colony { 0%,100% { transform: scale(.85); opacity: .7; } 50% { transform: scale(1.2); opacity: 1; } }
@keyframes kf-scatter { to { transform: translate(calc((var(--i) - 4) * 9px), calc((var(--i) - 4) * -7px)) scale(.3); opacity: 0; } }
.ic-holopetri .col { animation: kf-colony 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s); }
.ic-holopetri .bloom { opacity: 0; transform: scale(0); animation: none; transition: transform .45s cubic-bezier(.2,1.4,.4,1), opacity .3s; transition-delay: calc((var(--i) - 5) * .09s); }
.ic-holopetri .rim { animation: kf-spin 12s linear infinite; }
.card:is(:hover,:focus-within,.kb) .ic-holopetri .bloom { opacity: 1; transform: scale(1); }
.card:is(:hover,:focus-within,.kb) .ic-holopetri .col:not(.bloom) { animation-duration: 1.2s; }
.card:is(:hover,:focus-within,.kb) .ic-holopetri .rim { animation-duration: 3s; }
.card.launch .ic-holopetri .dish { animation: kf-fly-up .55s ease-in forwards; }
.card.launch .ic-holopetri .rim  { animation: kf-fade-out .3s forwards; }
.card.launch .ic-holopetri .col  { animation: kf-scatter .5s ease-in forwards; }

/* ---------- observatory ---------- */
.ic-observatory .st { animation: kf-twinkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.43s); }
.ic-observatory .slit { animation: kf-pulse-o 4s ease-in-out infinite; }
.ic-observatory .scope { animation: kf-sway 7s ease-in-out infinite; }
.ic-observatory .target { transition: transform .4s; }
.card:is(:hover,:focus-within,.kb) .ic-observatory .scope { animation: none; transform: rotate(-14deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:is(:hover,:focus-within,.kb) .ic-observatory .target { animation: none; opacity: 1; transform: scale(2.2); }
.card:is(:hover,:focus-within,.kb) .ic-observatory .st:not(.target) { animation-duration: 1s; }
.card.launch .ic-observatory .target { animation: kf-expand-fade .55s ease-in forwards; transform: scale(2.2); }
.card.launch .ic-observatory .dome, .card.launch .ic-observatory .scope { animation: kf-fade-out .45s forwards; }

/* ---------- registry ---------- */
.ic-registry .cr1 { animation: kf-spin 24s linear infinite; }
.ic-registry .cr2 { animation: kf-spin-rev 14s linear infinite; }
.ic-registry .b1  { animation: kf-pulse-o 2.4s ease-in-out infinite; }
.ic-registry .hair, .ic-registry .lock { transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.card:is(:hover,:focus-within,.kb) .ic-registry .cr1 { animation-duration: 5s; }
.card:is(:hover,:focus-within,.kb) .ic-registry .cr2 { animation-duration: 3s; }
.card:is(:hover,:focus-within,.kb) .ic-registry .lock { opacity: 1; animation: kf-breathe 1s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-registry .b2, .card:is(:hover,:focus-within,.kb) .ic-registry .b3 { opacity: .25; }
.card.launch .ic-registry .cr1, .card.launch .ic-registry .cr2 { animation: kf-collapse .5s ease-in forwards; }
.card.launch .ic-registry .lock { animation: kf-expand-fade .5s ease-out forwards; opacity: 1; }
.card.launch .ic-registry .b1 { animation: kf-flash .5s forwards; }

/* ---------- secretagent ---------- */
@keyframes kf-glint { 0%,55% { transform: translateX(-8px); opacity: 0; } 62% { opacity: .9; } 75% { transform: translateX(14px); opacity: .9; } 82%,100% { transform: translateX(16px); opacity: 0; } }
@keyframes kf-hat-tip { to { transform: translate(14px, -30px) rotate(22deg); opacity: 0; } }
.ic-secretagent .hat { animation: kf-bob 4s ease-in-out infinite; }
.ic-secretagent .glint { animation: kf-glint 5s ease-in-out infinite; }
.ic-secretagent .glasses { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ic-secretagent .mag { transform: scale(0); opacity: 0; transition: transform .45s cubic-bezier(.2,1.4,.4,1), opacity .3s; }
.card:is(:hover,:focus-within,.kb) .ic-secretagent .glasses { transform: translateY(4px); }
.card:is(:hover,:focus-within,.kb) .ic-secretagent .hat { animation-duration: 1.4s; }
.card:is(:hover,:focus-within,.kb) .ic-secretagent .glint { animation-duration: 1.4s; }
.card:is(:hover,:focus-within,.kb) .ic-secretagent .mag { transform: scale(1); opacity: 1; }
.card.launch .ic-secretagent .hat { animation: kf-hat-tip .55s ease-in forwards; }
.card.launch .ic-secretagent .glasses, .card.launch .ic-secretagent .collar { animation: kf-fade-out .4s forwards; }
.card.launch .ic-secretagent .mag { animation: kf-expand-fade .5s ease-out forwards; transform: scale(1); opacity: 1; }

/* ---------- culture ---------- */
.ic-culture .bb { animation: kf-rise 2.6s ease-in infinite; animation-delay: calc(var(--i) * -.85s); }
.ic-culture .bb.x { animation: none; opacity: 0; }
.ic-culture .flask { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:is(:hover,:focus-within,.kb) .ic-culture .bb { animation-duration: 1.1s; animation-delay: calc(var(--i) * -.3s); }
.card:is(:hover,:focus-within,.kb) .ic-culture .bb.x { animation: kf-rise 1.1s ease-in infinite; animation-delay: calc(var(--i) * -.3s); }
.card.launch .ic-culture .flask { transform: rotate(24deg); }
.card.launch .ic-culture .pour  { animation: kf-draw .45s .15s ease-out forwards; }
.card.launch .ic-culture .recipe { animation: kf-fade-out .4s forwards; }

/* ---------- media ---------- */
@keyframes kf-pip-x   { 0%,22% { transform: translateX(0); } 25%,47% { transform: translateX(16px); } 50%,72% { transform: translateX(32px); } 75%,97% { transform: translateX(48px); } 100% { transform: translateX(0); } }
@keyframes kf-drop-m  { 0%,40% { transform: translateY(0); opacity: 0; } 45% { opacity: 1; } 85% { transform: translateY(20px); opacity: 1; } 90%,100% { transform: translateY(22px); opacity: 0; } }
@keyframes kf-wellfill { 0%,22% { opacity: 0; } 24%,96% { opacity: .9; } 100% { opacity: 0; } }
.ic-media .pip  { animation: kf-pip-x 8s ease-in-out infinite; }
.ic-media .drop { animation: kf-drop-m 2s ease-in infinite; }
.ic-media .wf   { opacity: 0; animation: kf-wellfill 8s linear infinite; animation-delay: calc(var(--i) * 2s - 8s); }
.ic-media .w    { transition: stroke .3s, stroke-width .3s; }
.card:is(:hover,:focus-within,.kb) .ic-media .w { stroke: var(--ac); stroke-width: 3; animation: kf-breathe 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.35s); }
.card:is(:hover,:focus-within,.kb) .ic-media .pip { animation-duration: 3s; }
.card:is(:hover,:focus-within,.kb) .ic-media .drop { animation-duration: .75s; }
.card.launch .ic-media .pip  { animation: kf-fly-up .5s ease-in forwards; }
.card.launch .ic-media .wf   { animation: none; opacity: 1; }
.card.launch .ic-media .w    { animation: kf-expand-fade .5s ease-out forwards; }

/* ---------- evident-tools ---------- */
.ic-evident-tools .hand { animation: kf-spin 12s steps(60) infinite; }
.card:is(:hover,:focus-within,.kb) .ic-evident-tools .hand { animation: kf-spin 1s linear infinite; }
.card:is(:hover,:focus-within,.kb) .ic-evident-tools .btn { transform: translate(-2px, 2px); transition: transform .2s; }
.card.launch .ic-evident-tools .watch { animation: kf-shake .5s ease-in-out; }
.card.launch .ic-evident-tools .ring2 { animation: kf-expand-fade .55s ease-out forwards; opacity: 1; }

/* ---------- signup ---------- */
@keyframes kf-day { 0%,100% { opacity: .22; } 50% { opacity: .95; } }
.ic-signup .d { animation: kf-day 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.ic-signup .pen { opacity: 0; transform: translate(10px, 10px) rotate(6deg); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.card:is(:hover,:focus-within,.kb) .ic-signup .pen { opacity: 1; transform: translate(0, 0) rotate(0); }
.card:is(:hover,:focus-within,.kb) .ic-signup .d { animation-duration: 1.6s; animation-delay: calc(var(--i) * -.13s); }
.card.launch .ic-signup .d[style*="--i:5"] { fill: var(--ac); opacity: 1; animation: none; }
.card.launch .ic-signup .tick { animation: kf-draw .35s .1s ease-out forwards; }
.card.launch .ic-signup .pen  { transform: translate(-20px, -8px) rotate(-8deg); opacity: 1; transition: transform .45s cubic-bezier(.2,.8,.2,1); }

/* ---------- ont ---------- */
@keyframes kf-flip { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
.ic-ont .strand { animation: kf-flow 2.8s linear infinite; }
.ic-ont .pore   { animation: kf-breathe 2.8s ease-in-out infinite; }
.ic-ont .c1     { animation: kf-bob 3s ease-in-out infinite; }
.ic-ont .c2, .ic-ont .c3 { opacity: 0; transform: translateY(6px); transition: transform .4s, opacity .3s; }
.card:is(:hover,:focus-within,.kb) .ic-ont .strand { animation-duration: .8s; }
.card:is(:hover,:focus-within,.kb) .ic-ont .c1 { animation: kf-flip 1.4s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-ont .c2, .card:is(:hover,:focus-within,.kb) .ic-ont .c3 { opacity: 1; transform: translateY(0); }
.card.launch .ic-ont .coin { animation: kf-fly-up .5s ease-in forwards; opacity: 1; }
.card.launch .ic-ont .pore { animation: kf-expand-fade .55s ease-out forwards; }

/* ---------- cohagg ---------- */
@keyframes kf-drift { 0%,100% { transform: translate(0, 0); } 33% { transform: translate(calc(var(--i) * .4px - 3px), calc(var(--i) * -.3px + 2px)); } 66% { transform: translate(calc(var(--i) * -.3px + 2px), calc(var(--i) * .35px - 3px)); } }
.ic-cohagg .dt  { animation: kf-drift 7s ease-in-out infinite; animation-delay: calc(var(--i) * -.47s); }
.ic-cohagg .dtw { transition: transform .55s cubic-bezier(.18, 1.4, .3, 1); transition-delay: calc(var(--i) * 14ms); }
.ic-cohagg .ring { opacity: 0; transform: scale(.3); transition: transform .45s cubic-bezier(.2, 1.5, .4, 1), opacity .25s; }
.card:is(:hover,:focus-within,.kb) .ic-cohagg .dtw { transform: translate(var(--tx), var(--ty)) scale(1.2); }
.card:is(:hover,:focus-within,.kb) .ic-cohagg .dt  { animation-duration: 2.4s; }
.card:is(:hover,:focus-within,.kb) .ic-cohagg .ring { opacity: .75; transform: scale(1); transition-delay: calc(.32s + var(--i) * 60ms); animation: kf-spin 14s linear infinite; }
.card.launch .ic-cohagg .dtw { transform: translate(var(--cx), var(--cy)) scale(.45); transition: transform .4s ease-in; transition-delay: 0s; }
.card.launch .ic-cohagg .dt  { animation: none; }
.card.launch .ic-cohagg .ring { animation: kf-expand-fade .45s ease-out forwards; opacity: .75; transform: scale(1); }
.card.launch .ic-cohagg .burst { animation: kf-expand-fade .5s .2s ease-out forwards; opacity: 1; }

/* ---------- fia ---------- */
@keyframes kf-peak { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }
.ic-fia .pk { animation: kf-peak 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.ic-fia .mag { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.card:is(:hover,:focus-within,.kb) .ic-fia .mag { transform: translate(-16px, -6px); }
.card:is(:hover,:focus-within,.kb) .ic-fia .pk  { animation-duration: 1.1s; }
.card.launch .ic-fia .big { animation: none; transform: scaleY(1.35); transition: transform .4s cubic-bezier(.2,1.4,.4,1); }
.card.launch .ic-fia .pk:not(.big) { animation: none; transform: scaleY(.1); transition: transform .4s ease-in; }
.card.launch .ic-fia .mag { animation: kf-fade-out .4s forwards; }

/* ---------- photo ---------- */
.ic-photo .blades { animation: kf-spin 40s linear infinite; }
.ic-photo .bl, .ic-photo .ble { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ic-photo .iris { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.card:is(:hover,:focus-within,.kb) .ic-photo .blades { animation-duration: 8s; }
.card:is(:hover,:focus-within,.kb) .ic-photo .bl, .card:is(:hover,:focus-within,.kb) .ic-photo .ble { transform: translateY(-7px); }
.card:is(:hover,:focus-within,.kb) .ic-photo .iris { transform: scale(1.7); }
.card.launch .ic-photo .bl, .card.launch .ic-photo .ble { transform: translateY(9px); transition-duration: .25s; }
.card.launch .ic-photo .iris { transform: scale(.2); transition-duration: .25s; }
.card.launch .ic-photo .flash { animation: kf-flash .45s .2s ease-out forwards; }

/* ---------- tickets ---------- */
@keyframes kf-kanban { 0%,28% { transform: translateX(0); } 33%,61% { transform: translateX(14px); } 66%,94% { transform: translateX(28px); } 100% { transform: translateX(0); } }
.ic-tickets .kc  { animation: kf-kanban 6s cubic-bezier(.3,1.4,.4,1) infinite; }
.ic-tickets .kc2 { animation: kf-kanban 6s cubic-bezier(.3,1.4,.4,1) infinite -3s; }
.ic-tickets .half, .ic-tickets .perf { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.card:is(:hover,:focus-within,.kb) .ic-tickets .kc, .card:is(:hover,:focus-within,.kb) .ic-tickets .kc2 { animation-duration: 2s; }
.card:is(:hover,:focus-within,.kb) .ic-tickets .left, .card:is(:hover,:focus-within,.kb) .ic-tickets .right, .card:is(:hover,:focus-within,.kb) .ic-tickets .perf { transform: translateY(-3px) rotate(-3deg); }
.card.launch .ic-tickets .left  { transform: translate(-10px, 2px) rotate(-8deg); opacity: 0; transition: transform .5s ease-in, opacity .5s; }
.card.launch .ic-tickets .right { transform: translate(12px, -4px) rotate(10deg); opacity: 0; transition: transform .5s ease-in, opacity .5s; }
.card.launch .ic-tickets .perf  { animation: kf-fade-out .2s forwards; }

/* ---------- thursday ---------- */
@keyframes kf-deal { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 85% { transform: translate(var(--cx), 50px); opacity: 1; } 100% { transform: translate(var(--cx), 54px); opacity: 0; } }
.ic-thursday .dl { animation: kf-deal 4.5s ease-in infinite; animation-delay: calc(var(--i) * -1.5s); }
.ic-thursday .tag { animation: kf-bob 4s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-thursday .fun { animation: kf-sway 1.2s ease-in-out infinite; transform-origin: 50% 20%; }
.card:is(:hover,:focus-within,.kb) .ic-thursday .dl  { animation-duration: 1.6s; animation-delay: calc(var(--i) * -.53s); }
.card.launch .ic-thursday .dl   { animation: kf-fade-out .3s forwards; }
.card.launch .ic-thursday .star { animation: kf-pop .5s .1s cubic-bezier(.2,1.4,.4,1) forwards; }
.card.launch .ic-thursday .fun  { animation: kf-fade-out .5s forwards; }

/* ---------- compute ---------- */
.ic-compute .traces { animation: kf-flow 3s linear infinite; }
.ic-compute .core   { animation: kf-pulse-o 2.4s ease-in-out infinite; }
.ic-compute .die    { transition: filter .3s; }
.card:is(:hover,:focus-within,.kb) .ic-compute .traces { animation-duration: .7s; }
.card:is(:hover,:focus-within,.kb) .ic-compute .die    { filter: drop-shadow(0 0 6px var(--ac)); }
.card:is(:hover,:focus-within,.kb) .ic-compute .core   { animation-duration: .8s; }
.card.launch .ic-compute .boot { animation: kf-expand-fade .55s ease-out forwards; opacity: 1; }
.card.launch .ic-compute .core { animation: kf-flash .5s forwards; }
.card.launch .ic-compute .traces { animation: kf-flow-fast .5s linear infinite; }

/* ---------- assets ---------- */
@keyframes kf-ripple { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(1.18); } }
.ic-assets .beam { animation: kf-sweep-y2 3.2s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-assets .br   { animation: kf-ripple 1s ease-in-out infinite; animation-delay: calc(var(--i) * -.1s); }
.card:is(:hover,:focus-within,.kb) .ic-assets .beam { animation-duration: 1s; }
.card.launch .ic-assets .beam { animation: none; transform: scaleY(14); opacity: 0; transition: transform .35s, opacity .4s; transform-box: fill-box; transform-origin: center; }
.card.launch .ic-assets .bars { animation: kf-fade-out .3s forwards; }
.card.launch .ic-assets .ok   { animation: kf-pop .5s .15s cubic-bezier(.2,1.4,.4,1) forwards; }

/* ---------- kitome ---------- */
@keyframes kf-travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.ic-kitome .runner { display: none; }
@supports (offset-path: path('M0 0L1 1')) {
  .ic-kitome .runner { display: block; animation: kf-travel 6s ease-in-out infinite; }
}
.ic-kitome .lid { transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.ic-kitome .parcel { transition: transform .4s; }
.card:is(:hover,:focus-within,.kb) .ic-kitome .lid { transform: translateY(-7px); opacity: .9; }
.card:is(:hover,:focus-within,.kb) .ic-kitome .runner { animation-duration: 2s; }
.card.launch .ic-kitome .parcel { animation: kf-fly-right .55s ease-in forwards; }
.card.launch .ic-kitome .runner { animation-duration: .6s; }

/* ---------- xmap ---------- */
@keyframes kf-link { 0%,5% { stroke-dashoffset: 60; opacity: .3; } 25%,75% { stroke-dashoffset: 0; opacity: 1; } 95%,100% { stroke-dashoffset: 60; opacity: .3; } }
.ic-xmap .ln { stroke-dasharray: 60; animation: kf-link 5s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); }
.ic-xmap .crossed, .ic-xmap .straight { transition: opacity .4s; }
.ic-xmap .colR { transition: transform .4s; }
.card:is(:hover,:focus-within,.kb) .ic-xmap .crossed  { opacity: 0; }
.card:is(:hover,:focus-within,.kb) .ic-xmap .straight { opacity: 1; }
.card:is(:hover,:focus-within,.kb) .ic-xmap .colR     { transform: translateX(-3px); }
.card.launch .ic-xmap .straight { opacity: 1; animation: kf-pulse-o .3s ease-in-out 2; }
.card.launch .ic-xmap .crossed  { opacity: 0; }
.card.launch .ic-xmap .colL, .card.launch .ic-xmap .colR { animation: kf-expand-fade .55s ease-in forwards; transform-box: fill-box; transform-origin: center; }

/* ---------- scraper ---------- */
.ic-scraper .pp { animation: kf-drop 2.7s ease-in infinite; animation-delay: calc(var(--i) * -.9s); }
.ic-scraper .rw { animation: kf-pulse-o 2.7s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
.card:is(:hover,:focus-within,.kb) .ic-scraper .pp { animation-duration: 1s; animation-delay: calc(var(--i) * -.33s); }
.card:is(:hover,:focus-within,.kb) .ic-scraper .rw { animation-duration: 1s; animation-delay: calc(var(--i) * -.33s); }
.card:is(:hover,:focus-within,.kb) .ic-scraper .fun { animation: kf-breathe 1s ease-in-out infinite; }
.card.launch .ic-scraper .rw  { animation: none; transform: translateX(12px); opacity: 1; transition: transform .45s cubic-bezier(.2,1.4,.4,1); }
.card.launch .ic-scraper .fun, .card.launch .ic-scraper .pp { animation: kf-fade-out .4s forwards; }

/* ---------- contracts ---------- */
@keyframes kf-sign { 0%,10% { stroke-dashoffset: 44; } 45%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 44; } }
.ic-contracts .sig  { animation: kf-sign 6s ease-in-out infinite; }
.ic-contracts .seal { transform: scale(1.6); transition: transform .3s cubic-bezier(.2,1.4,.4,1), opacity .25s; }
.card:is(:hover,:focus-within,.kb) .ic-contracts .seal { opacity: 1; transform: scale(1); }
.card:is(:hover,:focus-within,.kb) .ic-contracts .sig  { animation-duration: 2s; }
.card.launch .ic-contracts .doc { transform: scaleY(.04); opacity: 0; transition: transform .5s ease-in, opacity .5s; }

/* ---------- corporate ---------- */
.ic-corporate .n { animation: kf-breathe 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.ic-corporate .e { animation: kf-pulse-o 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
.ic-corporate .net { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:is(:hover,:focus-within,.kb) .ic-corporate .net { transform: rotate(-4deg) scale(1.06); }
.card:is(:hover,:focus-within,.kb) .ic-corporate .e   { animation-duration: 1.2s; }
.card.launch .ic-corporate .pill { animation: kf-expand-fade .55s ease-in forwards; }
.card.launch .ic-corporate .net  { animation: kf-expand-fade .55s ease-in forwards; }

/* ---------- porewatch ---------- */
@keyframes kf-pw-scroll { to { transform: translateX(-64px); } }
@keyframes kf-pw-cell   { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes kf-pw-dilate { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes kf-pw-drop   { 0% { stroke-dashoffset: 8; opacity: 0; } 30% { opacity: .8; } 100% { stroke-dashoffset: -8; opacity: 0; } }
@keyframes kf-pw-out    { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.ic-porewatch .strand { animation: kf-flow 2.6s linear infinite; }
.ic-porewatch .pore   { animation: kf-breathe 3.2s ease-in-out infinite; }
.ic-porewatch .core   { animation: kf-pulse-o 1.6s ease-in-out infinite; }
.ic-porewatch .drop   { stroke-dasharray: 8; animation: kf-pw-drop 1.3s linear infinite; }
.ic-porewatch .scroll { transform-box: view-box; animation: kf-pw-scroll 5.2s linear infinite; }
.ic-porewatch .trace  { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ic-porewatch .ch     { animation: kf-pw-cell 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.55s); }
.ic-porewatch .sweep  { transition: opacity .3s; }
.card:is(:hover,:focus-within,.kb) .ic-porewatch .strand { animation-duration: .7s; }
.card:is(:hover,:focus-within,.kb) .ic-porewatch .pore   { animation: kf-pw-dilate 1.4s ease-in-out infinite; stroke-width: 3.4; filter: drop-shadow(0 0 4px var(--ac)); }
.ic-porewatch .pore { transition: filter .3s; }
.card:is(:hover,:focus-within,.kb) .ic-porewatch .core   { animation-duration: .7s; }
.card:is(:hover,:focus-within,.kb) .ic-porewatch .drop   { animation-duration: .45s; }
.card:is(:hover,:focus-within,.kb) .ic-porewatch .sweep  { opacity: .9; animation: kf-spin 1.6s linear infinite; }
.card:is(:hover,:focus-within,.kb) .ic-porewatch .scroll { animation-duration: 1.6s; }
.card:is(:hover,:focus-within,.kb) .ic-porewatch .trace  { transform: scaleY(1.35); }
.card:is(:hover,:focus-within,.kb) .ic-porewatch .ch     { animation-duration: .9s; animation-delay: calc(var(--i) * -.13s); }
.card.launch .ic-porewatch .pore, .card.launch .ic-porewatch .sweep { animation: kf-expand-fade .55s ease-in forwards; opacity: 1; }
.card.launch .ic-porewatch .core   { animation: kf-expand-fade .5s ease-out forwards; }
.card.launch .ic-porewatch .flash  { animation: kf-flash .55s ease-out forwards; }
.card.launch .ic-porewatch .strand, .card.launch .ic-porewatch .membrane, .card.launch .ic-porewatch .drop { animation: kf-fade-out .35s forwards; }
.card.launch .ic-porewatch .trace  { animation: kf-fly-right .5s ease-in forwards; transform: none; }
.card.launch .ic-porewatch .ch     { animation: kf-pw-out .5s ease-in forwards; }

/* ---------- holo4dash ----------
   idle   live dot pulses, a glint runs up the curve, donut turns slowly
   hover  the chart replays its draw (pen + pen-synced area wipe + data points popping as it passes),
          the donut twirls once and opens its arms, two more participants join
   launch the end point bursts and flashes, the arms fly apart, the chart floods up and away */
@keyframes kf-h4d-redraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes kf-h4d-pen    { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes kf-h4d-land   { 0%, 68% { opacity: 0; transform: scale(.6); } 72% { opacity: 1; } 84% { transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes kf-h4d-ring   { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(3.1); } }
@keyframes kf-h4d-glint  { 0% { stroke-dashoffset: 9; } 58%, 100% { stroke-dashoffset: -101; } }
@keyframes kf-h4d-ring-h { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.1); } }
@keyframes kf-h4d-burst  { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(8); } }
@keyframes kf-h4d-up     { to { opacity: 0; transform: translateY(-7px) scale(1.25); } }
@keyframes kf-h4d-flood  { to { opacity: 0; transform: scaleY(1.35); } }
@keyframes kf-h4d-wipe { 0% { transform: scaleX(0.0244); } 5% { transform: scaleX(0.0301); } 10% { transform: scaleX(0.0502); } 15% { transform: scaleX(0.0910); } 20% { transform: scaleX(0.1628); } 25% { transform: scaleX(0.2772); } 30% { transform: scaleX(0.4241); } 35% { transform: scaleX(0.5583); } 40% { transform: scaleX(0.6575); } 45% { transform: scaleX(0.7317); } 50% { transform: scaleX(0.7887); } 55% { transform: scaleX(0.8348); } 60% { transform: scaleX(0.8719); } 65% { transform: scaleX(0.9011); } 70% { transform: scaleX(0.9239); } 75% { transform: scaleX(0.9417); } 80% { transform: scaleX(0.9550); } 85% { transform: scaleX(0.9646); } 90% { transform: scaleX(0.9710); } 95% { transform: scaleX(0.9745); } 100% { transform: scaleX(0.9756); } }

/* idle */
.ic-holo4dash .gl     { opacity: .3; transition: opacity .4s; }
.ic-holo4dash .base   { opacity: .55; }
.ic-holo4dash .wipe   { transform-box: fill-box; transform-origin: 0 50%; }
.ic-holo4dash .chart  { transform-box: fill-box; transform-origin: 50% 100%; }
.ic-holo4dash .line   { stroke-dasharray: 100; stroke-dashoffset: 0; }
.ic-holo4dash .glint  { stroke: color-mix(in srgb, var(--ac) 45%, #5dffb6); stroke-width: 2.6; stroke-dasharray: 8 120; stroke-dashoffset: 8;
                        filter: drop-shadow(0 0 2.2px color-mix(in srgb, var(--ac) 70%, #5dffb6));
                        animation: kf-h4d-glint 5.6s cubic-bezier(.5,0,.3,1) infinite 1.2s; transition: opacity .25s; }
/* on dark grounds a near-white bead reads as light; on white a luminous mint bead does (a pale one reads as a gap) */
:root[data-theme="dark"] .ic-holo4dash .glint { stroke: color-mix(in srgb, var(--ac) 45%, #fff); filter: drop-shadow(0 0 1.6px var(--ac)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ic-holo4dash .glint { stroke: color-mix(in srgb, var(--ac) 45%, #fff); filter: drop-shadow(0 0 1.6px var(--ac)); } }
.ic-holo4dash .ring   { opacity: 0; vector-effect: non-scaling-stroke; stroke-width: 1.5; animation: kf-h4d-ring 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
.ic-holo4dash .burst  { vector-effect: non-scaling-stroke; stroke-width: 2; }
.ic-holo4dash .live   { stroke: var(--surface); stroke-width: 1.4; paint-order: stroke; }
.ic-holo4dash .pen    { opacity: 0; offset-rotate: 0deg; offset-distance: 100%; stroke: var(--surface); stroke-width: 1.4; paint-order: stroke; filter: drop-shadow(0 0 3px var(--ac)); }
.ic-holo4dash .pt     { fill: var(--surface); stroke: var(--ac); stroke-width: 1.5; opacity: 0; transform: scale(0); transition: transform .25s ease-in, opacity .2s; }
.ic-holo4dash .donut  { animation: kf-spin 48s linear infinite; }
.ic-holo4dash .twirl  { transform-box: view-box; transform-origin: 27px 27px; transition: transform .9s cubic-bezier(.3,0,.2,1); }
.ic-holo4dash .arc    { transition: transform .55s cubic-bezier(.2,1.45,.35,1), stroke-width .4s, opacity .4s; }
.ic-holo4dash .side   { transform-origin: 50% 100%; opacity: 0; transform: translateY(2px) scale(.3);
                        transition: transform .45s cubic-bezier(.2,1.5,.4,1), opacity .3s; }
.ic-holo4dash .sr     { transition-delay: .06s; }
.ic-holo4dash .me     { transition: transform .45s cubic-bezier(.2,1.5,.4,1); }

/* hover: replay the draw, open the arms, people join */
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .line  { animation: kf-h4d-redraw 1.05s cubic-bezier(.45,0,.15,1) both; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .wipe  { animation: kf-h4d-wipe 1.05s linear both; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .pen   { opacity: 1; animation: kf-h4d-pen 1.05s cubic-bezier(.45,0,.15,1) both, kf-fade-out .22s ease-in 1.12s forwards; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .live  { animation: kf-h4d-land 1.38s ease-out both; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .ring  { animation: kf-h4d-ring-h 1.15s cubic-bezier(.2,.6,.3,1) 1.1s infinite; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .pt    { opacity: 1; transform: scale(1); transition: transform .45s cubic-bezier(.2,1.6,.4,1) var(--t), opacity .15s var(--t); }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .glint { opacity: 0; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .gl    { opacity: .55; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .twirl { transform: rotate(360deg); transition: transform 1.4s cubic-bezier(.3,0,.15,1); }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .arc   { transform: translate(var(--ex), var(--ey)); stroke-width: 7.2; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .side  { opacity: .5; transform: none; transition-delay: .18s; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .sr    { transition-delay: .26s; }
.card:is(:hover,:focus-within,.kb) .ic-holo4dash .me    { transform: translateY(-1px) scale(1.06); }

/* launch: burst at the latest data point, arms fly apart, chart floods away */
.card.launch .ic-holo4dash .burst { animation: kf-h4d-burst .62s cubic-bezier(.15,.7,.3,1) forwards; }
.card.launch .ic-holo4dash .b2    { animation: kf-h4d-burst .6s cubic-bezier(.15,.7,.3,1) .11s forwards; }
.card.launch .ic-holo4dash .flash { animation: kf-flash .5s ease-out forwards; }
.card.launch .ic-holo4dash .live  { animation: kf-expand-fade .45s ease-out forwards; opacity: 1; }
.card.launch .ic-holo4dash .ring, .card.launch .ic-holo4dash .pen { animation: none; opacity: 0; }
.card.launch .ic-holo4dash .arc   { transform: translate(calc(var(--ex) * 4), calc(var(--ey) * 4)); opacity: 0; transition: transform .5s cubic-bezier(.4,0,.6,1), opacity .45s ease-in; }
.card.launch .ic-holo4dash .crowd { animation: kf-h4d-up .45s ease-in forwards; transform-box: fill-box; transform-origin: 50% 100%; }
.card.launch .ic-holo4dash .chart { animation: kf-h4d-flood .5s ease-in forwards; }
.card.launch .ic-holo4dash .line, .card.launch .ic-holo4dash .pts, .card.launch .ic-holo4dash .grid { animation: kf-fade-out .45s .05s ease-in forwards; }

/* ---------- attic ---------- */
@keyframes kf-cloud { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.ic-mcloud .cloud { animation: kf-cloud 8s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-mcloud .rain { opacity: 1; animation: kf-drop 1s linear infinite; }
.card.launch .ic-mcloud .cloud { animation: kf-expand-fade .55s ease-in forwards; }

.ic-appendix .app { animation: kf-pulse-o 3s ease-in-out infinite; }
.card:is(:hover,:focus-within,.kb) .ic-appendix .gut { animation: kf-shake .7s ease-in-out infinite; }
.card.launch .ic-appendix .pop { animation: kf-expand-fade .5s ease-out forwards; opacity: 1; }
.card.launch .ic-appendix .app { animation: kf-collapse .4s forwards; }

@keyframes kf-flicker { 0%,100% { opacity: 1; } 92% { opacity: 1; } 94% { opacity: .3; } 96% { opacity: 1; } 98% { opacity: .5; } }
.ic-assets-old .frame { animation: kf-flicker 6s linear infinite; }
.card:is(:hover,:focus-within,.kb) .ic-assets-old .frame { transform: rotate(-4deg); transition: transform .4s; }
.card.launch .ic-assets-old .frame { animation: kf-drop .5s ease-in forwards; }

.ic-tickets-rt .hand { animation: kf-spin 8s linear infinite; }
.card:is(:hover,:focus-within,.kb) .ic-tickets-rt .stub { animation: kf-shake .6s ease-in-out; }
.card.launch .ic-tickets-rt .stub { animation: kf-fade-out .5s forwards; }

.ic-dotcom .arrow { animation: kf-flow 2.4s linear infinite; }
.card:is(:hover,:focus-within,.kb) .ic-dotcom .arrow { animation-duration: .6s; }
.card:is(:hover,:focus-within,.kb) .ic-dotcom .ah { animation: kf-bob 1s ease-in-out infinite; }
.card.launch .ic-dotcom .ah, .card.launch .ic-dotcom .arrow { animation: kf-fade-out .4s forwards; }

.ic-generic .hex { animation: kf-spin 30s linear infinite; }
.card.launch .ic-generic .hex { animation: kf-expand-fade .5s ease-in forwards; }

/* Logo choreography mirrored from the study dashboard, at 80% of original speed. */
.hbmark.motion-paused *, .hbmark.motion-paused { animation-play-state: paused !important; }
@keyframes hb-kf-pop       { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hb-kf-fade-out  { to { opacity: 0; } }
@keyframes hb-kf-draw      { to { stroke-dashoffset: 0; opacity: 1; } }
/* ---------- the Holobiome mark (.hbmark wrapper around .hblogo-intro) ----------
   Base state (no .play/.outro): nothing drawn.
   .play  → intro, ~3.3 s × --spd, `forwards` so it holds:
            0.25s network traces outward from the centre node · 1.35s pill outline draws ·
            2.05s gradient wipes in left→right, lines turn white · 2.7s glow (+ wordmark on login)
   .outro → deactivate, ~2.2 s × --spd, `both` so each element holds the intro's end state until its turn:
            (wordmark sinks) · gradient un-wipes right→left revealing the ink network ·
            outline reappears and un-draws · network retracts inward, nodes pop out
   --spd scales every duration and delay (header uses .775). app.js swaps play → outro → play:
   every data-cycle seconds on the login page, and on hover of the header logo. */
@keyframes hb-kf-node       { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes hb-kf-edge       { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hb-kf-edge-so    { 0%,100% { stroke-opacity: .45; } 50% { stroke-opacity: 1; } }
@keyframes hb-kf-wipe       { to { transform: scaleX(1); } }
@keyframes hb-kf-unwipe     { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes hb-kf-undraw     { from { stroke-dashoffset: 0; opacity: 1; } to { stroke-dashoffset: var(--len); opacity: 0; } }
@keyframes hb-kf-unpop      { from { transform: scale(1); opacity: 1; } to { transform: scale(0); opacity: 0; } }
@keyframes hb-kf-outline-out{ 0% { opacity: 0; stroke-dashoffset: 0; } 30% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 1480; } }
@keyframes hb-kf-sink       { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(6px); } }
@keyframes hb-kf-mark-glow  { 0% { filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--pill-b) 40%, transparent)); }
                           40% { filter: drop-shadow(0 0 34px color-mix(in srgb, var(--pill-a) 95%, transparent)); }
                           100% { filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--pill-b) 40%, transparent)); } }
@keyframes hb-kf-rise-in    { to { opacity: 1; transform: translateY(0); } }

/* base */
.hbmark { --spd: 1.25; }
.hblogo-intro .trace { stroke: var(--net-ink); stroke-width: 5; }
.hblogo-intro .trace .e { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); opacity: 0; }
.hblogo-intro .trace .n { fill: var(--net-ink); transform: scale(0); opacity: 0; }
.hblogo-intro .outline { stroke: var(--net-ink); stroke-width: 5; stroke-dasharray: 1480; stroke-dashoffset: 1480; opacity: 0; }
.hblogo-intro .wipe { transform-box: view-box; transform-origin: -20px 0; transform: scaleX(0); }
.hblogo-intro .fill .net { stroke-width: 5; }
.hblogo-intro .fill .net .n { animation: hb-kf-node 5.25s ease-in-out infinite !important; animation-delay: calc(var(--i) * -.875s) !important; }
.hblogo-intro .fill .net .e { animation: hb-kf-edge 6.25s ease-in-out infinite !important; animation-delay: calc(var(--i) * -.5625s) !important; }
.login-logo .hbword .w1, .login-logo .hbword .w2 { transform-box: fill-box; }
.login-logo .hbword .w1, .login-logo .hbword .w2, .login-logo .sub { opacity: 0; transform: translateY(6px); }

/* intro */
.hbmark.play .hblogo-intro .trace .e { animation: hb-kf-draw calc(.5s * var(--spd)) ease-out forwards !important; animation-delay: calc((.25s + var(--d) * 1s) * var(--spd)) !important; }
.hbmark.play .hblogo-intro .trace .n { animation: hb-kf-pop calc(.5s * var(--spd)) cubic-bezier(.2,1.4,.4,1) forwards !important; animation-delay: calc((.25s + var(--nd) * 1s) * var(--spd)) !important; }
.hbmark.play .hblogo-intro .outline { animation: hb-kf-draw calc(.9s * var(--spd)) cubic-bezier(.4,0,.2,1) calc(1.35s * var(--spd)) forwards, hb-kf-fade-out calc(.4s * var(--spd)) calc(2.55s * var(--spd)) forwards !important; }
.hbmark.play .hblogo-intro .wipe { animation: hb-kf-wipe calc(.75s * var(--spd)) cubic-bezier(.45,0,.2,1) calc(2.05s * var(--spd)) forwards !important; }
.hbmark.play .mark, .logo .hbmark.play { animation: hb-kf-mark-glow calc(1.1s * var(--spd)) ease-out calc(2.7s * var(--spd)) both !important; }
.login-logo.play .hbword .w1, .login-logo.play .hbword .w2, .login-logo.play .sub { animation: hb-kf-rise-in calc(.6s * var(--spd)) cubic-bezier(.2,.8,.2,1) forwards !important; }
.login-logo.play .hbword .w1 { animation-delay: calc(2.6s * var(--spd)) !important; }
.login-logo.play .hbword .w2 { animation-delay: calc(2.8s * var(--spd)) !important; }
.login-logo.play .sub { animation-delay: calc(3s * var(--spd)) !important; }

/* outro */
.login-logo.outro .sub { animation: hb-kf-sink calc(.4s * var(--spd)) ease-in 0s both !important; }
.login-logo.outro .hbword .w2 { animation: hb-kf-sink calc(.45s * var(--spd)) ease-in calc(.08s * var(--spd)) both !important; }
.login-logo.outro .hbword .w1 { animation: hb-kf-sink calc(.45s * var(--spd)) ease-in calc(.22s * var(--spd)) both !important; }
.hbmark.outro .hblogo-intro .wipe { animation: hb-kf-unwipe calc(.65s * var(--spd)) cubic-bezier(.45,0,.2,1) calc(.35s * var(--spd)) both !important; }
.hbmark.outro .hblogo-intro .fill { animation: hb-kf-fade-out calc(.1s * var(--spd)) calc(.9s * var(--spd)) forwards !important; }
.hbmark.outro .hblogo-intro .outline { animation: hb-kf-outline-out calc(.9s * var(--spd)) cubic-bezier(.4,0,.2,1) calc(.5s * var(--spd)) both !important; }
.hbmark.outro .hblogo-intro .trace .e { animation: hb-kf-undraw calc(.4s * var(--spd)) ease-in both !important; animation-delay: calc((1.05s + (.7 - var(--d)) * 1s) * var(--spd)) !important; }
.hbmark.outro .hblogo-intro .trace .n { animation: hb-kf-unpop calc(.35s * var(--spd)) ease-in both !important; animation-delay: calc((1.15s + (.7 - var(--nd)) * 1s) * var(--spd)) !important; }
.hbmark.outro .mark, .logo .hbmark.outro { animation: hb-kf-mark-glow calc(1s * var(--spd)) ease-out calc(1.1s * var(--spd)) both !important; }

/* header instance: faster, and user-unit strokes thick enough to read at 58 px */
.logo .hbmark { --spd: .775; cursor: pointer; }
.logo .hblogo-intro .trace, .logo .hblogo-intro .outline, .logo .hblogo-intro .fill .net { stroke-width: 14; }
.logo .hblogo-intro .fill .net .n { animation-duration: 5s !important; }

/* ---------- ambient background network ---------- */
.bg .hbnet .n { animation: kf-node 9s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.bg .hbnet .e { animation: kf-edge-so 11s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }