/* taste-kit base: reset, type, surfaces and the CSS half of every js/ module.
   Load after tokens.css. Everything is prefixed k- so it can sit beside a project's own CSS. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--k-ground); color: var(--k-ink);
  font: var(--k-size-body)/1.55 var(--k-font-display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--k-accent); color: var(--k-ground); }
:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; border-radius: 2px; }

/* type */
.k-eyebrow { font: var(--k-size-micro)/1 var(--k-font-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--k-ink-3); }
.k-mono { font-family: var(--k-font-mono); }
.k-mega { font-size: var(--k-size-mega); font-weight: 800; line-height: .86; letter-spacing: -.045em; }
.k-h1 { font-size: var(--k-size-h1); font-weight: 800; line-height: .9; letter-spacing: -.04em; }
.k-h2 { font-size: var(--k-size-h2); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.k-lead { font-size: var(--k-size-lead); color: var(--k-ink-2); max-width: 38ch; }
/* outline type: fill sits over the stroke so variable-font overlaps don't show */
.k-wire-type { color: var(--k-ground); paint-order: stroke fill; -webkit-text-stroke: max(1.5px, .022em) var(--k-accent); }

/* links: a hairline that draws in from the left */
.k-link { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--k-dur-base) var(--k-ease-out), color var(--k-dur-fast); }
.k-link:hover, .k-link:focus-visible { background-size: 100% 1px; }

/* button: one accent CTA per screen */
.k-btn { --b: var(--k-accent); display: inline-flex; align-items: center; gap: .6em; padding: 14px 22px; border-radius: var(--k-radius-pill);
  background: var(--b); color: var(--k-ground); font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--k-dur-base) var(--k-ease-spring), box-shadow var(--k-dur-base); }
.k-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120px circle at var(--lx, 50%) var(--ly, 50%), var(--k-accent-hi), transparent 70%);
  opacity: 0; transition: opacity var(--k-dur-base); }
.k-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px var(--k-accent); }
.k-btn:hover::before { opacity: 1; }
.k-btn .k-arrow { transition: transform var(--k-dur-base) var(--k-ease-out); }
.k-btn:hover .k-arrow { transform: translateX(4px); }
.k-btn-ghost { --b: transparent; color: var(--k-ink); box-shadow: inset 0 0 0 1px var(--k-line-hi); }
.k-btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--k-accent); }

/* section rule: label then a hairline to the edge */
.k-rule { display: flex; align-items: center; gap: var(--k-space-4); }
.k-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--k-line-hi), var(--k-line) 40%, transparent); }

/* film grain: detail at every scale, never mud. Sits above everything, ignores the pointer. */
.k-grain { position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: k-grain 1s steps(6) infinite; }
@keyframes k-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* js/scroll.js: reveals. Hidden only once JS has marked the page, so no-JS shows everything. */
.k-js [data-reveal] { opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity var(--k-dur-reveal) var(--k-ease-out), transform var(--k-dur-reveal) var(--k-ease-out), filter var(--k-dur-slow) var(--k-ease-out);
  transition-delay: calc(var(--k-i, 0) * 90ms); }
.k-js [data-reveal="clip"] { transform: none; filter: none; clip-path: inset(0 0 100% 0); opacity: 1;
  transition: clip-path var(--k-dur-reveal) var(--k-ease-out); transition-delay: calc(var(--k-i, 0) * 90ms); }
.k-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* js/tilt.js: pointer-lit surface. --rx/--ry tilt, --lx/--ly light position, --lit 0..1 */
[data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: transform var(--k-dur-slow) var(--k-ease-out); will-change: transform; }
[data-tilt].is-tilting { transition: transform 80ms linear; }
.k-lit { position: relative; isolation: isolate; }
.k-lit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 0%), color-mix(in srgb, var(--k-accent-hi) 22%, transparent), transparent 60%);
  opacity: var(--lit, 0); transition: opacity var(--k-dur-slow); mix-blend-mode: screen; }
.k-lit::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; padding: 1px;
  background: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 0%), var(--k-accent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--lit, 0); transition: opacity var(--k-dur-slow); }

/* js/cursor.js: half-solid, half-wire ring */
.k-cursor-on, .k-cursor-on a, .k-cursor-on button, .k-cursor-on [data-cursor] { cursor: none; }
.k-cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  color: var(--k-accent); transition: width var(--k-dur-base) var(--k-ease-spring), height var(--k-dur-base) var(--k-ease-spring),
  margin var(--k-dur-base) var(--k-ease-spring), opacity var(--k-dur-base); opacity: 0; }
.k-cursor.is-on { opacity: 1; }
.k-cursor svg { width: 100%; height: 100%; overflow: visible; transition: transform var(--k-dur-slow) var(--k-ease-out); }
.k-cursor.is-hover { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.k-cursor.is-hover svg { transform: rotate(180deg); }
.k-cursor.is-down svg { transform: scale(.8); }
.k-cursor-cross.is-hover svg { transform: none; }
.k-cursor-cross .k-cursor-box { transform-origin: 20px 20px; transition: transform var(--k-dur-base) var(--k-ease-spring); }
.k-cursor-cross.is-hover .k-cursor-box { transform: scale(2.2); }
.k-cursor-cross ~ .k-cursor-dot { display: none; }
.k-cursor-cross .k-cursor-label { top: auto; bottom: -14px; transform: translate(-50%, 100%); color: var(--k-accent); }
.k-cursor-dot { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: var(--k-ink); opacity: 0; }
.k-cursor-dot.is-on { opacity: 1; }
.k-cursor-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 10px/1 var(--k-font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--k-ink); white-space: nowrap; opacity: 0; transition: opacity var(--k-dur-fast); }
.k-cursor.is-hover .k-cursor-label:not(:empty) { opacity: 1; }

/* js/sound.js: toggle */
.k-sound { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: var(--k-size-micro)/1 var(--k-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--k-ink-3); }
.k-sound:hover { color: var(--k-ink); }
.k-sound i { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; }
.k-sound i b { width: 2px; height: 3px; background: currentColor; transition: height var(--k-dur-base) var(--k-ease-out); }
.k-sound[aria-pressed="true"] { color: var(--k-accent); }
.k-sound[aria-pressed="true"] i b { animation: k-eq .9s ease-in-out infinite alternate; }
.k-sound[aria-pressed="true"] i b:nth-child(2) { animation-delay: -.3s; }
.k-sound[aria-pressed="true"] i b:nth-child(3) { animation-delay: -.6s; }
@keyframes k-eq { from { height: 2px; } to { height: 10px; } }

/* js/transitions.js: cross-page morphs (Chrome/Edge/Safari 18+; others just navigate) */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: var(--k-dur-slow); animation-timing-function: var(--k-ease-out); }
::view-transition-old(root) { animation: k-vt-out var(--k-dur-base) var(--k-ease-in-out) both; }
::view-transition-new(root) { animation: k-vt-in var(--k-dur-slow) var(--k-ease-out) both; }
@keyframes k-vt-out { to { opacity: 0; filter: blur(8px); transform: scale(.985); } }
@keyframes k-vt-in { from { opacity: 0; transform: translateY(24px); } }

/* gl.js: canvas fades in once the first frame is drawn */
.k-gl { opacity: 0; transition: opacity 1.4s var(--k-ease-out); }
.k-gl.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .k-grain { animation: none; }
  [data-tilt] { transform: none !important; }
  @view-transition { navigation: none; }
}