/* =========================================================================
   Jayraj Patel — site stylesheet
   -------------------------------------------------------------------------
   Table of contents:
     1. Design tokens (theme variables — see js/core/theme.js)
     2. Reset & base typography
     3. Header / navigation
     4. Buttons, cards, layout utilities
     5. Marquee, route path, stats
     6. Background canvas, spotlight, custom cursor
     7. Intro loader
     8. Back-to-top button
     9. Page-exit transition
    10. Kukki — the cat (body, poses, toys, dock, speech)
    11. Birds & tree scene
    12. Forms
    13. Responsive / reduced-motion
   ========================================================================= */

/* ---------- 1. Design tokens -------------------------------------------- */
:root {
  /* Overwritten at runtime by js/core/theme.js — these are just the
     Midnight-theme defaults, so the page looks right before JS runs. */
  --bg: #0a0b12; --surface: #12141f; --surface2: #191c2a;
  --text: #ecebf5; --muted: #8b90a8;
  --accent: #7c6cff; --gold: #2dd4bf; --on: #ffffff;
  --ar: 124,108,255; --gr: 45,212,191; --tr: 236,235,245;
  --line: rgba(255,255,255,.09);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 2. Reset & base typography ---------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  transition: background .5s, color .5s;
}
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; margin: 0; letter-spacing: -.01em; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on); }

/* ---------- 3. Header / navigation -------------------------------------- */
header {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 5vw; padding-top: calc(18px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk', sans-serif; font-size: .95rem; font-weight: 600; text-decoration: none; color: var(--text); }
.mono-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--accent); color: #fff; font: 700 .72rem 'Space Grotesk', sans-serif; }

nav { position: relative; display: flex; gap: 26px; font-size: .82rem; color: var(--muted); }
nav a { text-decoration: none; transition: color .2s; }
nav a:hover { color: var(--text); }
nav a.current { color: var(--text); }
nav a.cta { color: var(--bg); background: var(--text); padding: 8px 16px; border-radius: 100px; font-weight: 500; }
nav a.cta:hover { background: var(--accent); color: #fff; }
.nav-indicator {
  position: absolute; bottom: -8px; left: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  opacity: 0; pointer-events: none;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), width .3s, opacity .3s;
}

.tools { display: flex; gap: 10px; align-items: center; position: relative; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; padding: 0;
  color: var(--text); transition: border-color .2s;
}
.icon-btn:hover { border-color: var(--accent); }
.palette-swatch-preview { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--gold)); }
#menu-toggle { display: none; gap: 4px; align-content: center; }
#menu-toggle span { display: block; width: 16px; height: 2px; background: var(--text); border-radius: 2px; }

#palette-popover {
  position: absolute; right: 0; top: 48px; width: 230px; padding: 10px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px);
  border: 1px solid var(--line); display: none; flex-direction: column; gap: 4px; z-index: 70;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
#palette-popover.open { display: flex; }
.popover-label { font-size: .7rem; color: var(--muted); padding: 6px 8px 8px; letter-spacing: .06em; }
.theme-swatch {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--text);
  font: 500 .85rem 'Space Grotesk', sans-serif; text-align: left;
}
.theme-swatch:hover { background: var(--surface2); }
.theme-swatch.on { border-color: var(--accent); background: rgba(var(--ar), .12); }
.theme-swatch span { width: 34px; height: 20px; border-radius: 6px; border: 1px solid var(--line); }

@media (max-width: 860px) {
  #menu-toggle { display: grid; }
  nav {
    display: none; position: fixed; top: calc(68px + env(safe-area-inset-top, 0px)); left: 5vw; right: 5vw;
    flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(14px);
    border: 1px solid var(--line); font-size: 1rem;
  }
  nav.open { display: flex; }
  nav a { padding: 10px 8px; }
  #palette-popover { right: -4px; }
}

/* ---------- 4. Buttons, cards, layout utilities ------------------------- */
main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 0 5vw; }
section { padding: 90px 0; }
.eyebrow { font-size: .75rem; color: var(--muted); letter-spacing: .04em; margin-bottom: 10px; font-family: 'Space Grotesk', sans-serif; }
.lede { color: var(--muted); font-size: 1.02rem; max-width: 56ch; line-height: 1.65; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 100px; font-size: .88rem; font-weight: 500; text-decoration: none; transition: transform .15s; border: 0; font-family: inherit; cursor: pointer; }
.btn-primary { background: var(--accent); color: var(--on); }
.btn-outline { border: 1px solid var(--line); color: var(--text); background: transparent; }
.btn:hover { transform: translateY(-2px); }

.card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; transition: transform .25s, background .25s; will-change: transform; }
.card:hover { background: var(--surface2); }
.card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.1), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.card:hover::after { opacity: 1; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
@media (max-width: 820px) { .hero-grid, .grid3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid2, .grid4 { grid-template-columns: 1fr 1fr; } }

.stat b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; color: var(--text); }
.stat span { font-size: .78rem; color: var(--muted); }

.tag { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); padding: 4px 10px; border-radius: 100px; display: inline-block; margin: 2px 4px 0 0; }

.role { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: baseline; }
.role h3 { font-size: 1.1rem; } .role .when { font: 500 .8rem 'Space Grotesk', sans-serif; color: var(--gold); }
.role p { grid-column: 1/-1; color: var(--muted); font-size: .9rem; line-height: 1.6; margin: 4px 0 8px; }
.role .tags { grid-column: 1/-1; }

.sgroup { display: grid; grid-template-columns: 150px 1fr; gap: 10px 20px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; }
.sgroup b { font: 500 .85rem 'Space Grotesk', sans-serif; color: var(--muted); }
@media (max-width: 620px) { .sgroup { grid-template-columns: 1fr; } }

.job { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); gap: 12px; flex-wrap: wrap; }
.job .role { font-weight: 500; } .job .loc { color: var(--muted); font-size: .85rem; }
.job .yr { font-family: 'Space Grotesk', sans-serif; color: var(--gold); font-size: .82rem; white-space: nowrap; }

.vgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
@media (max-width: 700px) { .vgrid { grid-template-columns: 1fr; } }
.vcard { padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; width: 100%; background: var(--surface); }
.vthumb { aspect-ratio: 16/9; position: relative; background: linear-gradient(135deg, rgba(var(--ar),.35), rgba(var(--gr),.25) 60%, var(--surface)); background-size: cover; background-position: center; display: grid; place-items: center; }
.vplay { width: 62px; height: 62px; border-radius: 50%; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; transition: transform .25s; }
.vcard:hover .vplay { transform: scale(1.12); background: var(--accent); }
.vplay::before { content: ''; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
.vmeta { padding: 18px 20px 22px; } .vmeta h3 { font-size: 1.1rem; margin-bottom: 6px; } .vmeta p { font-size: .85rem; color: var(--muted); }

#vmodal { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; padding: 4vw; backdrop-filter: blur(8px); }
#vmodal.open { display: flex; }
.vbox { width: min(1000px, 100%); }
.vbox .frame { aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; display: grid; place-items: center; color: #9aa; text-align: center; }
.vbox iframe, .vbox video { width: 100%; height: 100%; border: 0; }
.vinfo { color: #eee; margin-top: 16px; } .vinfo h3 { font-size: 1.3rem; margin-bottom: 6px; } .vinfo p { color: #a8adb8; font-size: .9rem; line-height: 1.6; }
#vclose { position: absolute; top: 18px; right: 22px; color: #fff; background: rgba(255,255,255,.12); border: 0; width: 42px; height: 42px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }

.topics { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); padding: 4px 10px; border-radius: 100px; background: transparent; cursor: pointer; }
.chip.on { background: var(--accent); color: var(--on); border-color: var(--accent); }

footer { position: relative; z-index: 1; border-top: 1px solid var(--line); padding: 26px 0 60px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: .82rem; }
footer a { text-decoration: none; } footer a:hover { color: var(--text); }

/* ---------- 5. Marquee, route path, stats -------------------------------- */
.marquee { overflow: hidden; white-space: nowrap; padding: 10px 0; margin: 0 -5vw; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: inline-flex; gap: 14px; padding-right: 14px; animation: marquee-scroll 45s linear infinite; }
.marquee.rev .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); font: 500 1rem 'Space Grotesk', sans-serif; color: var(--text); }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.marquee.rev .pill i { background: var(--gold); box-shadow: 0 0 12px var(--gold); }

.route-pin { height: 200vh; position: relative; }
.route-sticky { position: sticky; top: 16vh; }
#route-svg { width: 100%; overflow: visible; }
#route-track { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 2; stroke-dasharray: 4 8; }
#route-progress { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
#route-dot { fill: var(--gold); filter: drop-shadow(0 0 10px var(--gold)); }
.route-marker .badge { fill: var(--bg); stroke: var(--muted); stroke-width: 2; transition: fill .4s, stroke .4s; }
.route-marker .pulse { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; }
.route-marker text { fill: var(--muted); font-size: 17px; font-family: 'Space Grotesk', sans-serif; text-anchor: middle; transition: fill .4s; }
.route-marker.lit .badge { fill: var(--accent); stroke: var(--accent); }
.route-marker.lit text { fill: var(--text); }
.route-marker.lit .pulse { animation: route-pulse 1.8s ease-out infinite; }
@keyframes route-pulse { from { opacity: .9; r: 9; } to { opacity: 0; r: 34; } }
@media (max-width: 760px) { .route-marker text { font-size: 24px; } }

/* ---------- 6. Background canvas, spotlight, custom cursor -------------- */
#ambient-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#cursor-spotlight { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(700px circle at var(--mx,50%) var(--my,20%), rgba(var(--ar),.17), transparent 70%); }
#scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--gold)); z-index: 100; }
@media (hover: hover) and (pointer: fine) { body, a, button { cursor: none; } }
#cursor-dot, #cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; display: none; }
@media (hover: hover) and (pointer: fine) { #cursor-dot, #cursor-ring { display: block; } }
#cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--accent); }
#cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(255,255,255,.55); transition: width .25s, height .25s, margin .25s, background .25s, border-color .25s; }
#cursor-ring.hot { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: rgba(var(--ar),.16); border-color: var(--accent); }

#orb { display: block; width: 100%; max-width: 400px; aspect-ratio: 1; margin: 0 auto; }

/* ---------- 7. Intro loader ---------------------------------------------- */
#intro-loader {
  position: fixed; inset: 0; z-index: 10000; background: var(--bg); color: var(--text);
  font-family: 'Space Grotesk', sans-serif; overflow: hidden; display: grid; place-items: center;
  transition: transform 1.1s cubic-bezier(.76,0,.24,1) .3s, border-radius 1.1s cubic-bezier(.76,0,.24,1) .3s;
}
/* The cover is in the static HTML; only show it when JS is running, and
   hide it on a timer even if the loader script never loads. */
html:not(.js) #intro-loader { display: none; }
#intro-loader { animation: loader-failsafe 0s 7s forwards; }
@keyframes loader-failsafe { to { visibility: hidden; } }
#intro-loader.done { transform: translateY(-101%); border-radius: 0 0 50% 50% / 0 0 12vh 12vh; }
#loader-sphere { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .5s; }
#intro-loader.done #loader-sphere { opacity: 0; }
.loader-content { position: relative; margin-top: 34vh; text-align: center; transition: opacity .5s, filter .5s, transform .6s; }
#intro-loader.done .loader-content { opacity: 0; filter: blur(8px); transform: translateY(-14px); }
.loader-name { display: flex; justify-content: center; font-size: clamp(1.8rem, 6vw, 4.2rem); font-weight: 700; letter-spacing: .02em; }
.loader-name span { display: inline-block; opacity: 0; transform: translateY(18px); filter: blur(10px); animation: loader-letter-in 1.1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.25s + var(--n) * .07s); }
@keyframes loader-letter-in { to { opacity: 1; transform: none; filter: blur(0); } }
.loader-sub { margin-top: 10px; font: 500 .75rem 'JetBrains Mono', monospace; letter-spacing: .5em; color: var(--gold); opacity: 0; animation: loader-fade-in 1s ease 1.3s forwards; }
@keyframes loader-fade-in { to { opacity: 1; } }
.loader-footer { position: absolute; left: 5vw; right: 5vw; bottom: 5vh; display: flex; align-items: center; gap: 20px; font: 500 .8rem 'JetBrains Mono', monospace; color: var(--muted); transition: opacity .4s; }
#intro-loader.done .loader-footer { opacity: 0; }
.loader-bar { flex: 1; height: 1px; background: rgba(var(--tr),.14); overflow: hidden; }
.loader-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); transform-origin: left; transform: scaleX(0); }

/* ---------- 8. Back-to-top button ----------------------------------------- */
#back-to-top { position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--line); color: var(--text); display: grid; place-items: center; z-index: 40; opacity: 0; transform: translateY(12px) scale(.8); pointer-events: none; transition: opacity .3s, transform .3s; padding: 0; cursor: pointer; }
#back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
#back-to-top:hover { border-color: var(--accent); }
#back-to-top svg:first-child { position: relative; z-index: 1; }
.progress-ring { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
@media (max-width: 860px) { #back-to-top { right: 14px; bottom: 14px; } }

/* ---------- 9. Page-exit transition ---------------------------------------- */
body.page-leaving { animation: page-leave .5s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes page-leave { to { opacity: 0; filter: blur(6px); transform: scale(.985); } }
body.camera-shake { animation: camera-shake .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes camera-shake { 10%,90% { transform: translate3d(-1px,0,0); } 20%,80% { transform: translate3d(2px,0,0); } 30%,50%,70% { transform: translate3d(-4px,0,0); } 40%,60% { transform: translate3d(4px,0,0); } }

/* ---------- 10. Kukki — the cat -------------------------------------------- */
#kukki { position: fixed; left: 0; bottom: 0; width: 106px; height: 73px; z-index: 35; pointer-events: none; will-change: transform; }
#kukki::before { content: ''; position: absolute; left: -18%; right: -18%; bottom: -8px; height: 38px; background: radial-gradient(ellipse at 50% 100%, rgba(255,240,205,.26), transparent 70%); pointer-events: none; }
#kukki-body { display: block; pointer-events: auto; overflow: visible; transform-origin: 50% 100%; filter: drop-shadow(0 0 5px rgba(255,255,255,.28)) drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
#kukki-ground-shadow { position: fixed; bottom: -2px; left: 0; width: 90px; height: 10px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 70%); z-index: 34; pointer-events: none; }

#kukki .bob { animation: kukki-bob .5s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes kukki-bob { to { transform: translateY(-2px); } }
#kukki .leg { transform-box: fill-box; transform-origin: 50% 0; animation: kukki-step .32s ease-in-out infinite alternate; }
#kukki .leg-2, #kukki .leg-3 { animation-delay: -.32s; }
#kukki[data-state=chase] .leg { animation-duration: .18s; }
#kukki:not([data-state=walk]):not([data-state=chase]):not([data-state=carry]) .bob,
#kukki:not([data-state=walk]):not([data-state=chase]):not([data-state=carry]) .leg { animation: none; }
@keyframes kukki-step { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
#kukki .tail { transform-box: fill-box; transform-origin: 100% 100%; animation: kukki-wag 1.6s ease-in-out infinite alternate; }
#kukki[data-state=happy] .tail, #kukki[data-state=chase] .tail { animation-duration: .25s; }
@keyframes kukki-wag { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
#kukki .head { transform-box: view-box; transform-origin: 100px 48px; transform: rotate(var(--head-tilt, 0deg)); transition: transform .2s; }
#kukki .pupil { translate: var(--pupil-x, 0) var(--pupil-y, 0); }
#kukki .eyes { transform-box: fill-box; transform-origin: center; animation: kukki-blink 4.5s infinite; }
@keyframes kukki-blink { 0%,94%,100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
#kukki .ear { transform-box: fill-box; transform-origin: 50% 100%; animation: kukki-ear-twitch 6s infinite; }
#kukki .ear-2 { animation-delay: -3s; }
@keyframes kukki-ear-twitch { 0%,88%,100% { transform: none; } 91% { transform: rotate(-14deg); } 95% { transform: rotate(6deg); } }
#kukki .eyes-shut { opacity: 0; } #kukki .mouth { transform-box: fill-box; transform-origin: center; transform: scaleY(0); transition: transform .3s; }
#kukki[data-state=sleep] .eyes, #kukki[data-state=happy] .eyes, #kukki[data-state=yawn] .eyes { opacity: 0; }
#kukki[data-state=sleep] .eyes-shut, #kukki[data-state=happy] .eyes-shut, #kukki[data-state=yawn] .eyes-shut { opacity: 1; }
#kukki[data-state=yawn] .mouth { transform: scaleY(1); }
#kukki[data-state=yawn] .head { rotate: -14deg; }
#kukki[data-state=startle] .eyes { scale: 1.3; }
#kukki[data-state=startle] .tail { animation: none; scale: 1.4 1.4; }
#kukki[data-state=groom] .head { animation: kukki-lick .42s ease-in-out infinite alternate; }
@keyframes kukki-lick { from { translate: 0 0; } to { translate: -8px 14px; rotate: -24deg; } }
#kukki[data-state=stretch] #kukki-body { animation: kukki-stretch 2s ease-in-out; }
@keyframes kukki-stretch { 20%,75% { scale: 1.16 .86; } }
#kukki[data-state=stretch] .head { translate: 6px 8px; }
#kukki[data-state=sleep] .leg { opacity: 0; }
#kukki[data-state=sleep] .bob { transform: translateY(14px); }
#kukki[data-state=sleep] #kukki-body { animation: kukki-breathe 2.6s ease-in-out infinite; }
@keyframes kukki-breathe { 50% { scale: 1 1.035; } }
#kukki[data-state=sleep]::after { content: 'z z z'; position: absolute; right: -4px; top: -8px; font: 600 11px 'Space Grotesk', sans-serif; color: var(--muted); letter-spacing: .2em; animation: kukki-zzz 1.4s ease-in-out infinite alternate; }
@keyframes kukki-zzz { from { opacity: .2; } to { opacity: 1; } }
#kukki[data-state=happy] #kukki-body { animation: kukki-happy .45s ease-in-out infinite alternate; }
@keyframes kukki-happy { to { translate: 0 -3px; rotate: 2deg; } }
#kukki[data-state=pounce] #kukki-body { animation: kukki-pounce .75s ease-in-out; }
@keyframes kukki-pounce { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(0) scale(1.1,.78); } 65% { transform: translateY(var(--pounce-height,-52px)) scale(.96,1.08); } 100% { transform: translateY(0) scale(1); } }
#kukki[data-state=startle] #kukki-body { animation: kukki-startle .7s ease-out; }
@keyframes kukki-startle { 18% { translate: 0 -36px; scale: .94 1.1; } 100% { translate: 0 0; } }
#kukki.swat .leg-3 { animation: kukki-swat .3s ease-out; }
@keyframes kukki-swat { 40% { transform: rotate(-70deg); } }
#kukki.hop #kukki-body { animation: kukki-hop .55s ease-out; }
@keyframes kukki-hop { 45% { translate: 0 -46px; scale: .96 1.06; } }

#kukki[data-state=sit] .bob { transform: rotate(-13deg) translateY(5px); transform-origin: 20% 100%; }
#kukki[data-state=sit] .leg-1, #kukki[data-state=sit] .leg-2 { opacity: 0; }
#kukki[data-state=sit] .head { translate: 0 -4px; }
#kukki[data-state=sniff] .bob { transform: rotate(-8deg) translateY(2px); transform-origin: 20% 100%; }
#kukki[data-state=sniff] .head { animation: kukki-sniff .35s ease-in-out infinite alternate; }
@keyframes kukki-sniff { from { translate: 4px 4px; } to { translate: 8px 8px; } }
#kukki[data-state=eat] .head { animation: kukki-munch .28s ease-in-out infinite alternate; }
@keyframes kukki-munch { from { translate: 8px 16px; } to { translate: 10px 21px; } }
#kukki[data-state=eat] .tail { rotate: -20deg; }

/* Making biscuits — the classic front-paw kneading motion. */
#kukki[data-state=knead] .bob { transform: rotate(-9deg) translateY(4px); transform-origin: 22% 100%; }
#kukki[data-state=knead] .leg-1, #kukki[data-state=knead] .leg-2 { opacity: 0; }
#kukki[data-state=knead] .paws-knead ellipse { opacity: 1; animation: kukki-knead 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
#kukki[data-state=knead] .paws-knead ellipse:last-child { animation-delay: .5s; }
@keyframes kukki-knead { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-5px) scaleY(.7); } }

/* Watching / chattering at the birds — no hissing, just excited interest. */
#kukki[data-state=watch] .bob { transform: rotate(-11deg) translateY(4px); transform-origin: 20% 100%; }
#kukki[data-state=watch] .leg-1, #kukki[data-state=watch] .leg-2 { opacity: 0; }
#kukki[data-state=watch] .eyes { scale: 1.15; }
#kukki[data-state=watch] .tail { animation-duration: .8s; }
#kukki[data-state=chatter] .bob { transform: rotate(-11deg) translateY(4px); transform-origin: 20% 100%; }
#kukki[data-state=chatter] .leg-1, #kukki[data-state=chatter] .leg-2 { opacity: 0; }
#kukki[data-state=chatter] .mouth { animation: kukki-chatter .09s steps(2) infinite; }
@keyframes kukki-chatter { from { transform: scaleY(0); } to { transform: scaleY(1); } }
#kukki[data-state=chatter] .tail { animation-duration: .2s; }

/* Carrying a caught mouse proudly in her mouth. */
#kukki[data-state=carry] .head { translate: 2px 2px; }
#kukki[data-state=carry] #kukki-body { animation: kukki-proud-trot .5s ease-in-out infinite alternate; }
@keyframes kukki-proud-trot { to { translate: 0 -3px; } }

#kukki[data-state=freeze] * { animation-play-state: paused !important; }
#kukki[data-state=freeze] .eyes { scale: 1.35; }
#kukki[data-state=freeze] .ear { rotate: -12deg; }
#kukki[data-state=freeze] .tail { rotate: -2deg; scale: 1.5 1; }
#kukki-body.dread { animation: kukki-dread-shiver .12s ease-in-out infinite; }
@keyframes kukki-dread-shiver { 0%,100% { translate: 0 0; } 50% { translate: 1.5px 0; } }

#kukki[data-state=held] #kukki-body { rotate: var(--hold-rotate,-72deg); transform-origin: 78% 30%; }
#kukki[data-state=held] .leg, #kukki[data-state=fall] .leg { animation: kukki-dangle .45s ease-in-out infinite alternate; }
@keyframes kukki-dangle { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
#kukki[data-state=held] .eyes, #kukki[data-state=fall] .eyes { scale: 1.25; }
#kukki[data-state=held] .tail { animation-duration: .5s; }
#kukki.landed #kukki-body { animation: kukki-land-squash .3s ease-out; }
@keyframes kukki-land-squash { 0% { transform: scaleY(.75); } 100% { transform: scaleY(1); } }

#kukki-speech { position: absolute; left: 50%; top: -32px; transform: translateX(-50%) scale(.6); opacity: 0; background: var(--text); color: var(--bg); font: 500 12px Inter, sans-serif; padding: 5px 11px; border-radius: 100px; white-space: nowrap; transition: .25s; }
#kukki-speech.on { opacity: 1; transform: translateX(-50%) scale(1); }
.kukki-heart { position: fixed; bottom: 74px; z-index: 36; pointer-events: none; color: var(--accent); font-size: 16px; animation: kukki-heart-rise 1.3s ease-out forwards; }
@keyframes kukki-heart-rise { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-54px) scale(1.2); opacity: 0; } }

/* Toys */
#toy-ball { position: fixed; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a6b, #e0392c 55%, #8f1f16); box-shadow: 0 4px 10px rgba(0,0,0,.5); z-index: 34; pointer-events: none; display: none; }
#toy-ball::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); border-left-color: transparent; border-bottom-color: transparent; }
#toy-laser-dot { position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #ff2d2d; box-shadow: 0 0 10px 4px rgba(255,45,45,.65); z-index: 9998; pointer-events: none; display: none; }
#toy-bowl { position: fixed; bottom: 0; left: 0; width: 54px; height: 24px; border-radius: 0 0 30px 30px; background: linear-gradient(var(--surface2), var(--surface)); border: 1px solid var(--line); z-index: 33; display: none; }
#toy-bowl span { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-size: 20px; }
#toy-bowl.empty span { display: none; }
#toy-box { position: fixed; bottom: 0; left: 0; width: 84px; height: 56px; background: linear-gradient(#c19a6b, #a67c4e); border-radius: 4px; z-index: 36; display: none; box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
#toy-box::before { content: ''; position: absolute; left: 36px; top: 0; width: 12px; height: 100%; background: rgba(255,255,255,.18); }
#toy-box .ear-flick { position: absolute; top: -10px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid #14161c; opacity: 0; transition: opacity .2s; }
#toy-box .ear-flick:nth-child(1) { left: 22px; } #toy-box .ear-flick:nth-child(2) { right: 22px; }
#toy-box.occupied { animation: box-wobble .6s ease-in-out infinite; } #toy-box.occupied .ear-flick { opacity: 1; }
@keyframes box-wobble { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
#toy-bed { position: fixed; bottom: 0; left: 0; width: 150px; height: 30px; border-radius: 50px 50px 10px 10px; background: linear-gradient(rgba(var(--ar),.9), rgba(var(--ar),.6)); z-index: 33; display: none; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
#toy-bed::after { content: ''; position: absolute; inset: 4px 12px; border-radius: 30px; border: 1px dashed rgba(255,255,255,.4); }
#toy-mouse { position: fixed; bottom: 0; left: 0; font-size: 24px; line-height: 1; z-index: 34; display: none; pointer-events: none; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
#toy-mouse.caught { filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
#toy-cucumber { position: fixed; bottom: 0; left: 0; font-size: 30px; line-height: 1; z-index: 33; display: none; pointer-events: none; transition: opacity .35s; }

/* Toy dock */
#toy-caption { position: fixed; right: 70px; bottom: 110px; max-width: 220px; font-size: .78rem; color: var(--text); background: var(--surface2); border: 1px solid var(--line); padding: 8px 12px; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 60; }
#toy-caption.on { opacity: 1; }
#toy-dock { position: fixed; right: 14px; bottom: 96px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
#toy-dock-toggle { width: 46px; height: 46px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--line); font-size: 20px; padding: 0; transition: .2s; cursor: pointer; }
#toy-dock-toggle:hover, #toy-dock.open #toy-dock-toggle { border-color: var(--accent); transform: rotate(-12deg); }
#toy-dock-list { display: none; flex-direction: column; gap: 4px; max-height: 72vh; overflow: auto; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px; padding: 8px; }
#toy-dock.open #toy-dock-list { display: flex; }
#toy-dock-list button { width: 44px; height: 44px; border-radius: 12px; background: transparent; border: 1px solid transparent; font-size: 21px; padding: 0; cursor: pointer; }
#toy-dock-list button svg { display: block; margin: auto; }
#toy-dock-list button:hover { background: var(--surface2); }
#toy-dock-list button.on { background: rgba(var(--ar),.2); border-color: var(--accent); }

/* ---------- 11. Birds & tree scene ---------------------------------------- */
#bird-tree { position: fixed; top: 0; left: 0; z-index: 32; display: none; pointer-events: none; transition: transform .3s; }
.bird { position: fixed; top: 0; left: 0; z-index: 33; pointer-events: none; transform-origin: center; }
.bird .wing-l, .bird .wing-r { transform-box: fill-box; transform-origin: 50% 50%; animation: bird-flap .18s ease-in-out infinite alternate; }
.bird.perched .wing-l, .bird.perched .wing-r { animation: bird-flap-idle 3.4s ease-in-out infinite; }
@keyframes bird-flap { from { transform: scaleY(1); } to { transform: scaleY(.3) translateY(2px); } }
@keyframes bird-flap-idle { 0%,92%,100% { transform: none; } 95% { transform: scaleY(.5); } }

/* ---------- 12. Forms ------------------------------------------------------- */
.cform label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 14px; }
.cform input, .cform textarea { display: block; width: 100%; margin-top: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--text); font: 400 .95rem Inter, sans-serif; transition: border-color .2s; }
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--accent); }
.cform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .cform .row2 { grid-template-columns: 1fr; } }
#contact-status { font-size: .85rem; color: var(--muted); }

/* Subtle grain texture used once, on the About card, as a quiet visual
   accent — not a pattern repeated anywhere else on the site. */
.about-card { position: relative; overflow: hidden; }
.about-card::before {
  content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 13. Responsive / reduced-motion --------------------------------- */
h1.kinetic-headline, h1.hero-in { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; }
.kinetic-headline .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; }
.kinetic-headline .char { display: inline-block; transform: translateY(115%); transition: translate .25s, color .25s; }
html.js body.ready .kinetic-headline .char { animation: kinetic-letter-up 1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--c) * .02s + .45s); }
@keyframes kinetic-letter-up { to { transform: none; } }
html.js .hero-in { opacity: 0; transform: translateY(34px); }
html.js body.ready .hero-in { animation: hero-in-up .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i,0) * .13s + .5s); }
@keyframes hero-in-up { to { opacity: 1; transform: none; } }

html.js .reveal { opacity: 0; transform: translateY(46px) scale(.97); filter: blur(8px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s; }
html.js .reveal.in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* These start hidden and only become visible by animating, so with
     animations off they must be shown directly. */
  html.js .hero-in, .kinetic-headline .char { opacity: 1; transform: none; }
}


/* Globe (Photography page) */
.globe-wrap { position: relative; width: 100%; max-width: 620px; margin: 20px auto 0; }
#globe { display: block; width: 100%; aspect-ratio: 1; touch-action: pan-y; user-select: none; }
#globe-tooltip { position: absolute; left: 0; top: 0; pointer-events: none; background: var(--surface2); border: 1px solid var(--line); padding: 5px 11px; border-radius: 100px; font-size: .78rem; opacity: 0; transition: opacity .15s; white-space: nowrap; }
#globe-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }

/* Sunbeam nap — rare, unprompted contentment */
#toy-sunbeam {
  position: fixed; bottom: -10px; left: 0; width: 120px; height: 60px;
  border-radius: 50%; z-index: 33; display: none; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 221, 150, .55), rgba(255, 221, 150, .12) 60%, transparent 75%);
  animation: sunbeam-glow 3.5s ease-in-out infinite;
}
@keyframes sunbeam-glow { 50% { opacity: .7; transform: scale(1.06); } }
#kukki[data-state=sunbeam-nap] .leg { opacity: 0; }
#kukki[data-state=sunbeam-nap] .bob { transform: rotate(-14deg) translateY(6px); transform-origin: 22% 100%; }
#kukki[data-state=sunbeam-nap] .eyes { opacity: 0; }
#kukki[data-state=sunbeam-nap] .eyes-shut { opacity: 1; }
#kukki[data-state=sunbeam-nap] #kukki-body { animation: kukki-breathe 3.2s ease-in-out infinite; }
#kukki[data-state=sunbeam-nap]::after {
  content: '\2600'; position: absolute; right: -6px; top: -14px;
  font-size: 13px; color: #ffcf6b; animation: kukki-zzz 2s ease-in-out infinite alternate;
}