/* WebKrown motion runtime — styles. Colours are never set here: patterns read the page's own
   tokens (--wkm-accent falls back to --accent). Start states apply only under html.wkm-on,
   which the head snippet sets and removes again if the runtime never arrives, so the page is
   always readable without script. */
@property --wkm-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* text */
/* a word's mask leaves room for the ink that overhangs its box (italic swashes, tight tracking,
   descenders) — a mask exactly the size of the box clips the glyphs */
.wkm-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.1em 0.16em; margin: 0 -0.1em -0.16em; }
.wkm-wi { display: inline-block; }
/* START STATES. On the first landing (html.wkm-on) every entrance waits hidden for its moment.
   Arriving from another page of the same site (html.wkm-nav) nothing is hidden at first paint —
   what is on screen is simply there (no blank page, no rebuild); only what sits below the fold is
   hidden (.wkm-pre, set by the runtime) until it scrolls in. */
html.wkm-on:not(.wkm-nav) [data-wkm~="word-rise"]:not(.wkm-in),
html.wkm-nav [data-wkm~="word-rise"].wkm-pre:not(.wkm-in) { visibility: hidden; }
html.wkm-on:not(.wkm-nav) [data-wkm~="word-rise"]:not(.wkm-in) .wkm-wi,
html.wkm-nav [data-wkm~="word-rise"].wkm-pre:not(.wkm-in) .wkm-wi { opacity: 0; transform: translateY(105%); }

/* entrances */
html.wkm-on:not(.wkm-nav) [data-wkm~="rise"]:not([data-wkm-children]):not(.wkm-in),
html.wkm-on:not(.wkm-nav) [data-wkm~="rise"][data-wkm-children]:not(.wkm-in) > *,
html.wkm-on:not(.wkm-nav) [data-wkm~="tilt-in"]:not([data-wkm-children]):not(.wkm-in),
html.wkm-on:not(.wkm-nav) [data-wkm~="tilt-in"][data-wkm-children]:not(.wkm-in) > *,
html.wkm-nav [data-wkm~="rise"]:not([data-wkm-children]).wkm-pre:not(.wkm-in),
html.wkm-nav [data-wkm~="rise"][data-wkm-children].wkm-pre:not(.wkm-in) > *,
html.wkm-nav [data-wkm~="tilt-in"]:not([data-wkm-children]).wkm-pre:not(.wkm-in),
html.wkm-nav [data-wkm~="tilt-in"][data-wkm-children].wkm-pre:not(.wkm-in) > * { opacity: 0; }
html.wkm-on:not(.wkm-nav) [data-wkm~="mask-reveal"]:not(.wkm-in),
html.wkm-nav [data-wkm~="mask-reveal"].wkm-pre:not(.wkm-in) { clip-path: inset(100% 0 0 0); }
[data-wkm~="tilt-in"] { perspective: 1200px; }

/* pinned horizontal story */
[data-wkm~="pin-horizontal"] { position: relative; }
[data-wkm~="pin-horizontal"] > .wkm-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
[data-wkm~="pin-horizontal"] .wkm-track { display: flex; flex-wrap: nowrap; will-change: transform; }
[data-wkm~="pin-horizontal"] .wkm-panel { flex: none; }
[data-wkm~="pin-horizontal"].wkm-flat { height: auto !important; }
[data-wkm~="pin-horizontal"].wkm-flat > .wkm-pin { position: relative; height: auto; }
[data-wkm~="pin-horizontal"].wkm-flat .wkm-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; scrollbar-width: none; }
[data-wkm~="pin-horizontal"].wkm-flat .wkm-panel { scroll-snap-align: center; }

/* spin badge */
.wkm-spin { position: relative; width: var(--wkm-spin-size, 132px); aspect-ratio: 1; display: grid; place-items: center; }
.wkm-spin svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: wkm-spin 24s linear infinite; overflow: visible; }
.wkm-spin text { font: 600 8.4px/1 var(--wkm-spin-font, inherit); letter-spacing: .26em; text-transform: uppercase; fill: currentColor; }
.wkm-spin-c { position: relative; display: grid; place-items: center; }
@keyframes wkm-spin { to { transform: rotate(360deg); } }

/* fill rise: a colour rises into a button from below on hover (--wkm-fill; text keeps on top) */
/* (no overflow: hidden — a beam's glow on the same button must be free to bloom past the edge;
   the colour is a circle clip growing from below, on a layer shaped by the button's own radius) */
.wkm-fill { position: relative; isolation: isolate; }
.wkm-fill::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--wkm-fill, var(--wkm-accent, var(--accent))); clip-path: circle(0% at 50% 130%); transition: clip-path 620ms cubic-bezier(0.22, 1, 0.36, 1); }
.wkm-fill:hover::after, .wkm-fill:focus-visible::after { clip-path: circle(140% at 50% 130%); }

/* price roll: odometer columns (clip-path keeps the baseline; tabular figures keep the width) */
[data-wkm~="price-roll"] { display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wkm-odo { position: relative; display: inline-block; clip-path: inset(0 -0.2em); }
.wkm-odo-z { visibility: hidden; }
.wkm-odo-strip { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; text-align: center; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.wkm-odo-sym { display: inline; }
.wkm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* letter roll on hover */
.wkm-roll { position: relative; display: inline-flex; overflow: hidden; vertical-align: top; }
.wkm-roll-a, .wkm-roll-b { display: inline-flex; }
.wkm-roll-b { position: absolute; left: 0; top: 0; }
.wkm-roll-a > span, .wkm-roll-b > span { display: inline-block; transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 18ms); }
.wkm-roll-b > span { transform: translateY(110%); }
:hover > .wkm-roll .wkm-roll-a > span, :focus-visible > .wkm-roll .wkm-roll-a > span { transform: translateY(-110%); }
:hover > .wkm-roll .wkm-roll-b > span, :focus-visible > .wkm-roll .wkm-roll-b > span { transform: translateY(0); }

/* tumble */
html.wkm-on:not(.wkm-nav) [data-wkm~="tumble"]:not(.wkm-in) > *,
html.wkm-nav [data-wkm~="tumble"].wkm-pre:not(.wkm-in) > * { opacity: 0; }

/* cursor pill */
.wkm-cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; padding: 12px 18px; border-radius: 999px; font: 600 13px/1 system-ui, sans-serif; white-space: nowrap;
  background: var(--wkm-cursor-bg, #fff); color: var(--wkm-cursor-fg, #07060f); opacity: 0; transition: opacity 200ms; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.wkm-cursor.is-on { opacity: 1; }

/* vertical marquee */
.wkm-marquee-v { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.wkm-marquee-v .wkm-marquee-track { flex-direction: column; width: auto; height: max-content; animation-name: wkm-marquee-v; }
@keyframes wkm-marquee-v { to { transform: translateY(calc(-50% - var(--wkm-gap, 24px) / 2)); } }

/* giant word, confetti */
/* each letter's box is widened by its overhang (padding, cancelled by margin) so background-clip:text
   paints the whole glyph — without it the tight tracking cuts the edges of W, o, K */
.wkm-gl { display: inline-block; padding: 0 0.09em; margin: 0 -0.09em; transition: color 240ms; }
.wkm-gl.is-accent { background: var(--wkm-giant-accent, var(--wkm-accent, var(--accent))); background-size: calc(var(--n, 1) * 100%) 100%; background-position: calc(var(--i, 0) / max(1, var(--n, 1) - 1) * 100%) 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-wkm~="celebrate"] { position: relative; }
.wkm-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* glide tabs */
[data-wkm~="glide-tabs"] { position: relative; isolation: isolate; }
.wkm-glide { position: absolute; top: 4px; bottom: 4px; left: 0; z-index: -1; border-radius: 999px; pointer-events: none; }

/* nav pill */
[data-wkm~="nav-pill"] { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), padding 320ms cubic-bezier(0.22, 1, 0.36, 1), max-width 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color 320ms; }
[data-wkm~="nav-pill"][data-wkm-hidden] { transform: translateY(-140%); }

/* marquee */
[data-wkm~="marquee"] { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wkm-marquee-track { display: flex; width: max-content; gap: var(--wkm-gap, 24px); animation: wkm-marquee var(--wkm-marquee-dur, 40s) linear infinite; }
.wkm-marquee-rev .wkm-marquee-track { animation-direction: reverse; }
[data-wkm~="marquee"]:hover .wkm-marquee-track { animation-play-state: paused; }
@keyframes wkm-marquee { to { transform: translateX(calc(-50% - var(--wkm-gap, 24px) / 2)); } }

/* aurora */
[data-wkm~="aurora"] { position: relative; isolation: isolate; overflow: hidden; }
.wkm-aurora-canvas { position: absolute; inset: -10%; width: 120%; height: 120%; z-index: -1; filter: blur(48px) saturate(1.2); pointer-events: none; animation: wkm-aurora-in 900ms ease-out both; }
/* the light is there from the first paint (a still glow in the page's own colours); the living
   canvas fades in over it — never a dark, empty hero that lights up late */
[data-wkm~="aurora"]::before { content: ""; position: absolute; inset: -10%; z-index: -2; pointer-events: none; filter: blur(40px);
  background: radial-gradient(42% 48% at 28% 42%, color-mix(in srgb, var(--krown-violet, var(--accent, #7c5cff)) 42%, transparent), transparent 72%),
    radial-gradient(38% 42% at 72% 38%, color-mix(in srgb, var(--rose, var(--accent, #e0457b)) 30%, transparent), transparent 72%),
    radial-gradient(40% 40% at 55% 78%, color-mix(in srgb, var(--crown-blue, var(--accent, #3d6bff)) 30%, transparent), transparent 72%); }
@keyframes wkm-aurora-in { from { opacity: 0; } }

/* spotlight: a card with .wkm-spot gets a cursor light on its face and its edge */
.wkm-spot { position: relative; isolation: isolate; }
.wkm-spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity 300ms; pointer-events: none;
  background: radial-gradient(420px circle at var(--wkm-mx, 50%) var(--wkm-my, 50%), color-mix(in srgb, var(--wkm-accent, var(--accent)) 16%, transparent), transparent 60%); }
.wkm-spot:hover::before { opacity: 1; }

/* beam: a comet of light running round an element's edge (runtime draws it as SVG — see edge.ts) */
.wkm-beam { position: relative; isolation: isolate; }
.wkm-beam-svg { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }

/* shimmer: a slow sheen across text (eyebrows, badges) */
.wkm-shimmer { background: linear-gradient(100deg, currentColor 40%, var(--wkm-shimmer, #fff) 50%, currentColor 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: wkm-shimmer 4.5s ease-in-out infinite; }
@keyframes wkm-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) {
  .wkm-marquee-track, .wkm-shimmer, .wkm-spin svg, .wkm-coin *, .wkm-chat-thread > * { animation: none !important; }
  .wkm-beam-svg rect:not(.wkm-beam-track) { display: none; }
  html.wkm-on [data-wkm]:not(.wkm-in) { visibility: visible; }
  html.wkm-on [data-wkm] .wkm-wi, html.wkm-on [data-wkm~="rise"], html.wkm-on [data-wkm~="rise"] > *, html.wkm-on [data-wkm~="tilt-in"], html.wkm-on [data-wkm~="tilt-in"] > * { opacity: 1 !important; transform: none !important; }
  html.wkm-on [data-wkm~="mask-reveal"] { clip-path: none !important; }
}

/* NEED-FIRST STORIES (patterns/needs.ts) — structure only; colours come from the page (--h, --strong, --on-strong) */
.wkm-fly { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 8px; border-radius: 999px;
  background: var(--wkm-fly-bg, var(--strong, #fff)); color: var(--wkm-fly-fg, var(--on-strong, #111)); font: 500 13.5px/1 system-ui, sans-serif; white-space: nowrap; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45); }
.wkm-fly i { width: 16px; height: 16px; border-radius: 99px 99px 99px 3px; background: var(--h, currentColor); }
html.wkm-on [data-wkm~="brief-plan"] [data-wkm-text] .ch:not(.on) { opacity: 0; }
[data-wkm~="brief-plan"] [data-wkm-wires] path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
[data-wkm~="streak"] [data-wkm-run] { stroke-dasharray: 120 2000; }

/* COIN — a minted seal (components: coin). Colours come from the page: --wkm-coin-face (the metal),
   --wkm-coin-ink (the words), --wkm-coin-rim-a/b/c (the rim). EDGE RULE: every circle here is drawn by
   border-radius (the rasteriser anti-aliases it) — never by a gradient or mask stop, which paints a
   staircase at 1× — and nothing is pushed along Z, so at rest the coin maps 1:1 to the screen. */
.wkm-coin { --s: var(--wkm-coin-size, 176px); position: relative; width: var(--s); aspect-ratio: 1; perspective: 900px; }
.wkm-coin-body { position: absolute; inset: 0; transform-style: preserve-3d; animation: wkm-coin-flip 10s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.wkm-coin-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: var(--wkm-coin-ink, rgba(255, 255, 255, .78)); }
.wkm-coin-back { transform: rotateY(180deg); }
/* the rim: a metal disc whose light travels round it; the reeded band and the face sit on it as smaller discs */
.wkm-coin-rim { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  background: conic-gradient(from var(--wkm-angle), var(--wkm-coin-rim-a, #6b5cff) 0deg, rgba(255, 255, 255, .95) 40deg, var(--wkm-coin-rim-b, #ff4d8d) 110deg, rgba(255, 255, 255, .3) 180deg, var(--wkm-coin-rim-c, #ffa048) 250deg, rgba(255, 255, 255, .9) 310deg, var(--wkm-coin-rim-a, #6b5cff) 360deg);
  animation: wkm-coin-light 6s linear infinite; }
.wkm-coin-reed { position: absolute; inset: 6.5%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--wkm-coin-face, #1b1830) 62%, #fff) 0deg, color-mix(in srgb, var(--wkm-coin-face, #1b1830) 90%, #000) 1.5deg, color-mix(in srgb, var(--wkm-coin-face, #1b1830) 62%, #fff) 3deg); } /* soft-edged teeth: a hard stripe aliases at 1x */
.wkm-coin-reed::after { content: ""; position: absolute; inset: 3.2%; border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--wkm-coin-face, #1b1830) 72%, #fff) 0%, var(--wkm-coin-face, #1b1830) 45%, color-mix(in srgb, var(--wkm-coin-face, #1b1830) 70%, #000) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), inset 0 -3px 8px rgba(0, 0, 0, .5); }
.wkm-coin-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: wkm-spin 40s linear infinite; }
.wkm-coin-ring text { font: 600 6.4px/1 var(--wkm-coin-font, ui-monospace, monospace); text-transform: uppercase; fill: currentColor; }
.wkm-coin-core { position: absolute; inset: 21%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--wkm-coin-face, #1b1830) 80%, #fff), color-mix(in srgb, var(--wkm-coin-face, #1b1830) 80%, #000) 90%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 14px rgba(0, 0, 0, .55), inset 0 1px 1px rgba(255, 255, 255, .3); }
.wkm-coin-core img, .wkm-coin-core svg { width: 70%; height: auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45)); }
.wkm-coin-shadow { position: absolute; left: 12%; right: 12%; bottom: -14%; height: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(4px); animation: wkm-coin-shadow 10s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes wkm-coin-flip { 0%, 42% { transform: rotateY(0deg); } 50%, 92% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes wkm-coin-shadow { 0%, 42%, 50%, 92%, 100% { transform: scaleX(1); opacity: 1; } 46%, 96% { transform: scaleX(.4); opacity: .5; } }
@keyframes wkm-coin-light { to { --wkm-angle: 360deg; } }

/* CHAT FAQ — questions on one side, a conversation on the other (components: chatFaq) */
.wkm-chat-thread { display: grid; gap: 12px; align-content: end; }
.wkm-chat-thread > * { animation: wkm-bubble 520ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes wkm-bubble { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.wkm-typing { display: inline-flex; gap: 4px; }
.wkm-typing i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: wkm-typing 1s ease-in-out infinite; }
.wkm-typing i:nth-child(2) { animation-delay: .15s; } .wkm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes wkm-typing { 50% { opacity: 1; transform: translateY(-3px); } }