/* Electric Ink interactions. Motion is added by interactions.js and removed for reduced motion. */

/* Nav underline */
@media (min-width:821px){
.primary-nav a{position:relative}
.primary-nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.primary-nav a:hover:after,.primary-nav a[aria-current="page"]:after{transform:scaleX(1)}
}

/* Cursor spotlight on the background grid */
.ak-spotlight{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(212,255,92,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(212,255,92,.3) 1px,transparent 1px);background-size:102px 102px;-webkit-mask-image:radial-gradient(240px circle at var(--sx,-999px) var(--sy,-999px),#000,transparent 72%);mask-image:radial-gradient(240px circle at var(--sx,-999px) var(--sy,-999px),#000,transparent 72%);opacity:0;transition:opacity .4s ease}
.ak-spotlight.is-on{opacity:1}

/* Hero letter rise and underline */
.ak-split .ak-word{display:inline-block;white-space:nowrap}
.ak-split .ak-ch{display:inline-block;opacity:0;transform:translateY(.55em);transition:transform .65s var(--ease-smooth),opacity .65s ease;transition-delay:calc(var(--i) * 16ms)}
.ak-split.is-in .ak-ch{opacity:1;transform:none}
.ak-split .ak-underline{position:relative;display:inline-block}
.ak-split .ak-underline:after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:.07em;background:var(--mint);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-smooth) var(--ud,1s)}
.ak-split.is-in .ak-underline:after{transform:scaleX(1)}

/* Performance score badge */
.ak-score{position:absolute;left:-18px;bottom:22px;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(18,20,28,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ak-score svg{width:60px;height:60px;flex:none}
.ak-score b{display:block;color:var(--muted);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ak-score span{color:var(--text);font-size:.85rem}
@media (max-width:820px){.ak-score{position:relative;left:auto;bottom:auto;width:max-content;margin:4px auto 0}}

/* Platform colour coding */
.project-card.webflow .project-card-top span:first-child,.project-card.webflow .card-meta span:first-child{color:var(--violet)}
.project-card.wordpress .card-meta span:first-child,.project-card.woocommerce .card-meta span:first-child{color:var(--mint)}

/* 3D tilt and sheen */
@media (hover:hover) and (pointer:fine){
.card.ak-tilt{transition:transform .18s ease-out,border-color .3s ease,background .3s ease;will-change:transform}
.ak-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 70%);opacity:0;transition:opacity .25s ease}
.card.ak-tilt:hover .ak-sheen{opacity:1}
}

/* Timeline draws as you scroll */
.timeline.ak-tl{position:relative}
.ak-tl-fill{position:absolute;left:-1px;top:0;width:2px;height:100%;background:var(--mint);transform:scaleY(var(--p,0));transform-origin:top}
.timeline.ak-tl article{transition:opacity .5s ease}
.timeline.ak-tl article:not(.is-lit){opacity:.38}
.timeline.ak-tl article:before{transition:background .3s ease,box-shadow .3s ease}
.timeline.ak-tl article:not(.is-lit):before{background:var(--line);box-shadow:none}

/* Reading progress on blog posts */
.ak-progress{position:fixed;left:0;top:0;z-index:300;width:100%;height:3px;background:var(--mint);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
.admin-bar .ak-progress{top:32px}
@media (max-width:782px){.admin-bar .ak-progress{top:46px}}

/* Quick search */
.ak-search-btn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--muted);font:inherit;font-size:.78rem;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.ak-search-btn:hover,.ak-search-btn:focus-visible{border-color:var(--mint);color:var(--text)}
.ak-search-btn svg{width:16px;height:16px}
.ak-search-btn kbd,.ak-palette kbd{padding:1px 6px;border:1px solid var(--line);border-radius:3px;color:var(--text);font:600 .68rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.site-header.is-open .ak-search-btn{display:none}
@media (max-width:820px){
.ak-search-btn{order:2;width:40px;height:40px;margin-left:auto;padding:0;justify-content:center}
.ak-search-btn kbd{display:none}
.site-header:not(.is-open) .menu-toggle{order:3;margin-left:10px}
}
.ak-palette{width:min(560px,calc(100% - 32px));max-height:min(520px,80vh);margin:12vh auto auto;padding:0;border:1px solid #3a3f55;border-radius:10px;background:var(--surface);color:var(--text);box-shadow:0 30px 90px rgba(0,0,0,.55)}
.ak-palette::backdrop{background:rgba(6,7,10,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ak-palette[open]{animation:ak-pop .18s var(--ease-smooth)}
@keyframes ak-pop{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.ak-palette form{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ak-palette input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:1rem}
.ak-palette ul{max-height:380px;margin:0;padding:8px;overflow-y:auto;list-style:none}
.ak-palette li a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:6px;color:var(--muted);text-decoration:none}
.ak-palette li a.is-active,.ak-palette li a:hover{background:var(--surface-3);color:var(--text)}
.ak-palette li em{flex:none;color:var(--mint);font:normal .68rem ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}
.ak-palette .ak-empty{padding:16px 12px;color:var(--muted)}


/* Homepage hero: platforms orbiting the illustration */
.ak-orbit{position:absolute;inset:0;container-type:size;pointer-events:none}
.ak-orbit-ring{position:absolute;left:50%;top:50%;width:min(94cqw,94cqh);aspect-ratio:1;translate:-50% -50%;border:1px dashed rgba(212,255,92,.2);border-radius:50%;animation:ak-spin 40s linear infinite}
.ak-orbit-item{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(min(94cqw,94cqh) / -2)) rotate(calc(var(--a) * -1))}
.ak-orbit-chip{position:absolute;left:0;top:0;display:grid;place-items:center;width:58px;height:58px;translate:-50% -50%;border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:16px;background:rgba(18,20,28,.92);color:var(--c);box-shadow:0 0 0 6px rgba(10,11,16,.55),0 10px 30px color-mix(in srgb,var(--c) 22%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:ak-counter 40s linear infinite,ak-bob 4.5s ease-in-out var(--d) infinite}
.ak-orbit-chip svg{width:28px;height:28px}
.ak-orbit-chip b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero-visual:hover .ak-orbit-ring,.hero-visual:hover .ak-orbit-chip{animation-play-state:paused}
@keyframes ak-spin{to{rotate:360deg}}
@keyframes ak-counter{to{rotate:-360deg}}
@keyframes ak-bob{0%,100%{translate:-50% -50%}50%{translate:-50% calc(-50% - 7px)}}
@media (max-width:820px){.ak-orbit-chip{width:44px;height:44px;border-radius:12px}.ak-orbit-chip svg{width:21px;height:21px}}


/* Tools ticker: dark band with lime separators (Electric Ink) */
.ticker{background:var(--surface);color:var(--muted);border-block:1px solid var(--line)}
.ticker span{font-weight:600;letter-spacing:.06em}
.ticker span:after{color:var(--mint)}

/* Gentle mode: visitors with "reduce motion" on still get short, small, calm motion.
   html.ak-calm is added by interactions.js only in that case; without JavaScript the
   original still version applies. Continuous scrolling bands stay still. */
html.ak-calm .reveal{opacity:0;transform:none;transition:opacity .5s ease!important}
html.ak-calm .reveal.is-visible{opacity:1}
html.ak-calm .ak-split .ak-ch{transform:translateY(.22em);transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s ease!important;transition-delay:calc(var(--i) * 10ms)!important}
html.ak-calm .ak-split.is-in .ak-ch{transform:none}
html.ak-calm .ak-split .ak-underline:after{transition:transform .5s cubic-bezier(.16,1,.3,1) var(--ud,1s)!important}
html.ak-calm .ak-orbit-ring{animation:ak-spin 120s linear infinite!important}
html.ak-calm .ak-orbit-chip{animation:ak-counter 120s linear infinite!important}
html.ak-calm .ak-spotlight{transition:opacity .4s ease!important}
html.ak-calm .ak-sheen{transition:opacity .25s ease!important}
html.ak-calm .card.ak-tilt{transition:transform .2s ease-out,border-color .3s ease,background .3s ease!important}
html.ak-calm .button{transition:transform .25s ease,box-shadow .25s ease,background .3s ease!important}
html.ak-calm .primary-nav a:after{transition:transform .3s ease!important}
html.ak-calm .timeline.ak-tl article,html.ak-calm .timeline.ak-tl article:before{transition:opacity .4s ease,background .3s ease,box-shadow .3s ease!important}
html.ak-calm .ak-palette[open]{animation:ak-pop .15s ease!important}