/* ------------------------------------------------------------------
   Design tokens. Tailwind maps these in each page's @theme block,
   so `bg-bg`, `text-ink`, `border-line` etc. follow the active theme.
   ------------------------------------------------------------------ */
:root {
  --bg: #f5f3ee;
  --surface: #ffffff;
  --surface-2: #ebe8e1;
  --ink: #121211;
  --muted: #5d5b56;
  --line: rgba(18, 18, 17, 0.1);
  --accent: #ff5b24;
  --accent-ink: #c43d0e;
  --accent-soft: rgba(255, 91, 36, 0.12);
  --code-bg: #121211;
  color-scheme: light;
}

.dark {
  --bg: #0b0b0c;
  --surface: #141416;
  --surface-2: #1d1d20;
  --ink: #f2f0ea;
  --muted: #9b9890;
  --line: rgba(255, 255, 255, 0.08);
  --accent: #ff6a33;
  --accent-ink: #ff8f63;
  --accent-soft: rgba(255, 106, 51, 0.14);
  --code-bg: #18181b;
  color-scheme: dark;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease, color .4s ease;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Subtle film grain over everything */
.grain::before {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: .035;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark .grain::before, .dark.grain::before { opacity: .06; }

/* Soft glow blobs behind hero sections */
.glow {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  pointer-events: none;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: .18;
}
.dark .glow { opacity: .22; }

/* Dotted grid backdrop */
.dot-grid {
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Header: open at the top, a floating frosted bar once scrolled */
.header-bar {
  border: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled .header-bar {
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-color: var(--line);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .22);
}
.site-header:has([aria-expanded="true"]) .header-bar {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.nav-link[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line);
}

/* Mobile menu */
.mobile-menu { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu a { transform: translateY(16px); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.mobile-menu.is-open a { transform: none; opacity: 1; }
.mobile-menu.is-open li:nth-child(2) a { transition-delay: .05s; }
.mobile-menu.is-open li:nth-child(3) a { transition-delay: .1s; }
.mobile-menu.is-open li:nth-child(4) a { transition-delay: .15s; }
.mobile-menu.is-open li:nth-child(5) a { transition-delay: .2s; }

.burger span { transition: transform .3s ease, opacity .3s ease; }
[aria-expanded="true"] .burger span:first-child { transform: translateY(3.25px) rotate(45deg); }
[aria-expanded="true"] .burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Theme toggle icon swap */
.icon-sun { display: none; }
.dark .icon-sun { display: block; }
.dark .icon-moon { display: none; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* Arched portrait frame (echoes the arch in the photo) */
.arch { border-radius: 999px 999px 28px 28px; }

/* Infinite marquee */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { animation: marquee 90s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Pulsing status dot */
.pulse-dot { position: relative; }
.pulse-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: inherit; animation: pulse 2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.8); opacity: 0; } }

/* Floating cards */
.float-slow { animation: float 7s ease-in-out infinite; }
.float-slower { animation: float 9s ease-in-out infinite reverse; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* Code card syntax colours */
.code { font-variant-ligatures: none; }
.code .k { color: #ff8f63; }   /* keyword */
.code .f { color: #7dd3fc; }   /* function */
.code .s { color: #bef264; }   /* string */
.code .a { color: #c4b5fd; }   /* attribute */
.code .c { color: #71717a; }   /* comment */
.code .v { color: #fde68a; }   /* variable */
.caret { display: inline-block; width: .55em; height: 1.1em; vertical-align: -0.2em; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Hover lift for cards */
.lift { transition: opacity .9s ease, transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .3s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -24px rgba(0,0,0,.25); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* Arrow nudge on hover */
.group:hover .nudge { transform: translateX(4px); }
.nudge { transition: transform .3s ease; }
.group:hover .nudge-up { transform: translate(3px, -3px); }
.nudge-up { transition: transform .3s ease; }

/* Underline link */
.u-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s ease; }
.u-link:hover { background-size: 100% 1px; }

/* Step-sequencer (music hobby art) */
.seq-cell { transition: background-color .15s ease, transform .15s ease; }
.seq-cell.on { background: var(--accent); }
.seq-cell.hit { transform: scale(1.12); filter: brightness(1.25); }
.seq-col.playhead .seq-cell:not(.on) { background: rgba(255, 255, 255, .28); }

/* Equaliser bars */
.eq span { animation: eq 1.2s ease-in-out infinite; transform-origin: bottom; }
.eq span:nth-child(2) { animation-delay: -.3s; }
.eq span:nth-child(3) { animation-delay: -.6s; }
.eq span:nth-child(4) { animation-delay: -.9s; }
.eq span:nth-child(5) { animation-delay: -.45s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* Timeline rail */
.rail { background: linear-gradient(to bottom, transparent, var(--line) 6%, var(--line) 94%, transparent); }

/* Form fields */
.field {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .95rem 1.1rem;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field::placeholder { color: var(--muted); opacity: .7; }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* Article prose */
.prose-lite p { margin-top: 1.25em; line-height: 1.8; color: var(--muted); }
.prose-lite p:first-child { margin-top: 0; }
.prose-lite strong { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  /* The tools track is a slow, gentle drift, so it keeps moving (even slower) */
  .marquee-track { animation: marquee 140s linear infinite !important; }
}