@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Manrope:wght@400;500;700&display=swap");

:root {
  color-scheme: light;
  --html-bg: rgb(71, 46, 25);
  --body-bg: #ffffff;
  --surface-bg: linear-gradient(180deg, #ffffff 0%, #fffbf6 42%, #f8eddc 100%);
  --surface-before-bg:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 36%),
    radial-gradient(circle at 65% 20%, rgba(255, 211, 161, 0.12), transparent 20%);
  --surface-glow-1: rgba(255, 247, 236, 0.72);
  --surface-glow-2: rgba(232, 187, 121, 0.16);
  --surface-sheen-1: rgba(255, 255, 255, 0.08);
  --surface-sheen-2: rgba(255, 211, 161, 0.12);
  --hero-image: url("legacy/assets/images/tree3.png");
  --ink: #2f2721;
  --muted: #6d6875;
  --heading: #b5838d;
  --link: #967880;
  --link-hover: #b5838d;
  --link-border: rgba(150, 120, 128, 0.35);
  --link-border-hover: rgba(181, 131, 141, 0.55);
  --text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
  --toggle-bg: rgba(255, 255, 255, 0.76);
  --toggle-border: rgba(181, 131, 141, 0.18);
  --toggle-color: #967880;
  --toggle-hover-bg: rgba(255, 255, 255, 0.92);
  --toggle-hover-color: #b5838d;
  --toggle-shadow: 0 8px 20px rgba(71, 46, 25, 0.08);
  --ripple-bg:
    radial-gradient(circle, rgba(197, 127, 143, 0.28) 0%, rgba(197, 127, 143, 0.16) 35%, rgba(255, 255, 255, 0) 72%);
  --ripple-border: rgba(255, 255, 255, 0.7);
  --ripple-shadow: 0 0 0 1px rgba(197, 127, 143, 0.15), 0 0 24px rgba(255, 255, 255, 0.25);
  --content-band-width: min(80%, 1200px);
  --content-band-width-mobile: 90%;
  --content-band-gutter: clamp(0.85rem, 1.8vw, 1.5rem);
  --art-overlay-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.88) 100%);
  --art-overlay-glow:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 38%, rgba(255, 255, 255, 0) 72%);
  --art-overlay-ring: rgba(255, 255, 255, 0.75);
  --art-text: #3f3b45;
  --art-hover-shadow: 0 6px 14px rgba(71, 46, 25, 0.06);
  --programming-card-bg: rgba(255, 255, 255, 0.78);
  --programming-card-border: rgba(181, 131, 141, 0.12);
  --programming-card-shadow: 0 10px 22px rgba(71, 46, 25, 0.05);
  --programming-card-hover-bg: rgba(255, 255, 255, 0.9);
  --programming-card-hover-shadow: 0 16px 30px rgba(71, 46, 25, 0.08);
  --programming-filter-bg: rgba(255, 255, 255, 0.76);
  --programming-filter-border: rgba(181, 131, 141, 0.18);
  --programming-filter-color: #6d6875;
  --programming-filter-shadow: 0 6px 14px rgba(71, 46, 25, 0.05);
  --programming-filter-active-bg: rgba(255, 255, 255, 0.92);
  --programming-filter-active-color: #b5838d;
  --programming-filter-active-border: rgba(181, 131, 141, 0.35);
  --project-media-bg: linear-gradient(180deg, rgba(255, 251, 246, 0.9), rgba(255, 255, 255, 0.5));
  --chip-systems-color: #aa70be;
  --chip-systems-bg: rgba(170, 112, 190, 0.14);
  --chip-systems-border: rgba(170, 112, 190, 0.28);
  --chip-web-color: #ed7d3a;
  --chip-web-bg: rgba(237, 125, 58, 0.14);
  --chip-web-border: rgba(237, 125, 58, 0.28);
  --chip-art-color: #aa4465;
  --chip-art-bg: rgba(170, 68, 101, 0.14);
  --chip-art-border: rgba(170, 68, 101, 0.28);
  --chip-ai-color: #107e7d;
  --chip-ai-bg: rgba(16, 126, 125, 0.13);
  --chip-ai-border: rgba(16, 126, 125, 0.25);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --html-bg: #03040a;
  --body-bg:
    radial-gradient(circle at 50% 0%, rgba(24, 43, 85, 0.9) 0%, rgba(9, 13, 24, 0.98) 55%, #050814 100%);
  --surface-bg:
    radial-gradient(circle at 14% 18%, rgba(62, 200, 255, 0.14), transparent 20%),
    radial-gradient(circle at 82% 12%, rgba(255, 79, 168, 0.12), transparent 18%),
    linear-gradient(180deg, #0f1730 0%, #0a1120 42%, #050814 100%);
  --surface-before-bg:
    linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 36%),
    radial-gradient(circle at 65% 20%, rgba(255, 138, 61, 0.12), transparent 20%);
  --surface-glow-1: rgba(62, 200, 255, 0.14);
  --surface-glow-2: rgba(255, 79, 168, 0.12);
  --surface-sheen-1: rgba(255, 255, 255, 0.06);
  --surface-sheen-2: rgba(255, 205, 141, 0.08);
  --hero-image: url("assets/nightriver.png");
  --ink: #f5f0ff;
  --muted: #c5c1db;
  --heading: rgb(213, 168, 230); /* #ff8db9; */
  --link: rgb(125, 140, 245); /* #9fd8ff; */
  --link-hover: #ffd3ea;
  --link-border: rgba(159, 216, 255, 0.34);
  --link-border-hover: rgba(255, 141, 185, 0.5);
  --text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  --toggle-bg: rgba(10, 14, 26, 0.8);
  --toggle-border: rgba(158, 199, 255, 0.16);
  --toggle-color: #d9d8ef;
  --toggle-hover-bg: rgba(16, 23, 42, 0.94);
  --toggle-hover-color: #ff8db9;
  --toggle-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  --ripple-bg:
    radial-gradient(circle, rgba(255, 79, 168, 0.28) 0%, rgba(62, 200, 255, 0.16) 35%, rgba(255, 255, 255, 0) 72%);
  --ripple-border: rgba(255, 255, 255, 0.72);
  --ripple-shadow: 0 0 0 1px rgba(255, 79, 168, 0.15), 0 0 24px rgba(62, 200, 255, 0.2);
  --art-overlay-bg:
    linear-gradient(180deg, rgba(8, 12, 22, 0.5) 0%, rgba(8, 12, 22, 0.88) 100%);
  --art-overlay-glow:
    radial-gradient(circle, rgba(255, 79, 168, 0.28) 0%, rgba(62, 200, 255, 0.2) 38%, rgba(255, 255, 255, 0) 72%);
  --art-overlay-ring: rgba(158, 199, 255, 0.55);
  --art-text: #efeaff;
  --art-hover-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  --programming-card-bg: rgba(10, 15, 30, 0.78);
  --programming-card-border: rgba(158, 199, 255, 0.16);
  --programming-card-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  --programming-card-hover-bg: rgba(16, 23, 42, 0.92);
  --programming-card-hover-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
  --programming-filter-bg: rgba(10, 14, 26, 0.76);
  --programming-filter-border: rgba(158, 199, 255, 0.16);
  --programming-filter-color: #d7d7ea;
  --programming-filter-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  --programming-filter-active-bg: rgba(16, 23, 42, 0.94);
  --programming-filter-active-color: #ff8db9;
  --programming-filter-active-border: rgba(255, 141, 185, 0.28);
  --project-media-bg: linear-gradient(180deg, rgba(20, 28, 50, 0.9), rgba(7, 10, 18, 0.5));
  --chip-systems-color: #ccabff;
  --chip-systems-bg: rgba(170, 112, 190, 0.2);
  --chip-systems-border: rgba(204, 171, 255, 0.3);
  --chip-web-color: #ffc48a;
  --chip-web-bg: rgba(237, 125, 58, 0.18);
  --chip-web-border: rgba(255, 196, 138, 0.3);
  --chip-art-color: #ff8db9;
  --chip-art-bg: rgba(170, 68, 101, 0.18);
  --chip-art-border: rgba(255, 141, 185, 0.3);
  --chip-ai-color: #86ece8;
  --chip-ai-bg: rgba(16, 126, 125, 0.18);
  --chip-ai-border: rgba(134, 236, 232, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--html-bg);
  scroll-behavior: smooth;
}

body {
  background: var(--body-bg);
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  overflow-x: hidden;
}

h1,
h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
}

a {
  color: inherit;
}

main {
  position: relative;
  z-index: 1;
}

.site-surface {
  background: var(--surface-bg);
  position: relative;
  overflow: hidden;
}

body:not([class]) .site-surface {
  isolation: isolate;
}

body:not([class]) .site-surface > :not(.theme-ambient) {
  position: relative;
  z-index: 1;
}

.site-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--surface-before-bg);
  opacity: 0.9;
}

html[data-theme="dark"] body:not([class]) .site-surface::before {
  animation: darkSurfaceShift 24s ease-in-out infinite alternate;
  transform-origin: center;
}

.theme-toggle {
  position: fixed;
  top: clamp(0.8rem, 2vw, 1.2rem);
  right: clamp(0.8rem, 2vw, 1.2rem);
  z-index: 60;
  appearance: none;
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  background: var(--toggle-bg);
  color: var(--toggle-color);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.55rem 0.85rem;
  box-shadow: var(--toggle-shadow);
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  backdrop-filter: blur(8px);
}

.theme-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.theme-ambient[hidden] {
  display: none;
}

.theme-ambient__glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(12px);
  opacity: 0.34;
  animation: ambientGlowDrift 26s ease-in-out infinite alternate;
}

.theme-ambient__glow--1 {
  inset: 10% auto auto 6%;
  width: clamp(13rem, 24vw, 21rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--surface-glow-1) 0%, transparent 70%);
  animation-duration: 28s;
}

.theme-ambient__glow--2 {
  inset: auto 8% 12% auto;
  width: clamp(11rem, 20vw, 18rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--surface-glow-2) 0%, transparent 72%);
  animation-duration: 32s;
  animation-direction: alternate-reverse;
}

.theme-ambient__dot {
  position: absolute;
  border-radius: 999px;
  opacity: 0.82;
  filter: blur(0.15px);
  background: radial-gradient(circle, currentColor 0%, currentColor 28%, rgba(255, 255, 255, 0) 72%);
  box-shadow: 0 0 12px currentColor, 0 0 26px currentColor;
  animation:
    ambientDotDrift var(--ambient-duration, 24s) ease-in-out infinite alternate,
    ambientDotPulse calc(var(--ambient-duration, 24s) * 0.56) ease-in-out infinite;
  transform: translate3d(0, 0, 0);
}

.theme-ambient__dot--1 {
  left: 12%;
  top: 28%;
  width: 9px;
  height: 9px;
  color: rgba(255, 141, 185, 0.85);
  --ambient-duration: 29s;
  --ambient-dx: 14vw;
  --ambient-dy: -8vh;
}

.theme-ambient__dot--2 {
  left: 24%;
  top: 64%;
  width: 7px;
  height: 7px;
  color: rgba(159, 216, 255, 0.9);
  --ambient-duration: 34s;
  --ambient-dx: -11vw;
  --ambient-dy: 8vh;
}

.theme-ambient__dot--3 {
  left: 42%;
  top: 20%;
  width: 8px;
  height: 8px;
  color: rgba(255, 196, 138, 0.82);
  --ambient-duration: 26s;
  --ambient-dx: 11vw;
  --ambient-dy: 10vh;
}

.theme-ambient__dot--4 {
  left: 61%;
  top: 44%;
  width: 6px;
  height: 6px;
  color: rgba(134, 236, 232, 0.88);
  --ambient-duration: 31s;
  --ambient-dx: -12vw;
  --ambient-dy: -7vh;
}

.theme-ambient__dot--5 {
  left: 84%;
  top: 16%;
  width: 10px;
  height: 10px;
  color: rgba(204, 171, 255, 0.82);
  --ambient-duration: 36s;
  --ambient-dx: -9vw;
  --ambient-dy: 11vh;
}

.theme-ambient__dot--6 {
  left: 74%;
  top: 72%;
  width: 7px;
  height: 7px;
  color: rgba(255, 141, 185, 0.78);
  --ambient-duration: 27s;
  --ambient-dx: 10vw;
  --ambient-dy: -10vh;
}

.theme-ambient__dot--7 {
  left: 8%;
  top: 80%;
  width: 6px;
  height: 6px;
  color: rgba(255, 255, 255, 0.9);
  --ambient-duration: 33s;
  --ambient-dx: 7vw;
  --ambient-dy: -11vh;
}

.theme-ambient__dot--8 {
  left: 55%;
  top: 86%;
  width: 8px;
  height: 8px;
  color: rgba(255, 196, 138, 0.78);
  --ambient-duration: 35s;
  --ambient-dx: -9vw;
  --ambient-dy: -9vh;
}

.theme-ambient__dot--9 {
  left: 33%;
  top: 12%;
  width: 5px;
  height: 5px;
  color: rgba(255, 255, 255, 0.92);
  --ambient-duration: 30s;
  --ambient-dx: 9vw;
  --ambient-dy: 6vh;
}

.theme-ambient__dot--10 {
  left: 88%;
  top: 58%;
  width: 6px;
  height: 6px;
  color: rgba(134, 236, 232, 0.8);
  --ambient-duration: 37s;
  --ambient-dx: -7vw;
  --ambient-dy: 7vh;
}

html[data-theme="dark"] body:not([class]) .theme-ambient {
  display: block;
}

@keyframes ambientGlowDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(4vw, -2.5vh, 0) scale(1.12);
  }
}

@keyframes ambientDotDrift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--ambient-dx), var(--ambient-dy), 0);
  }
}

@keyframes ambientDotPulse {
  0%,
  100% {
    opacity: 0.48;
    filter: blur(0.2px) brightness(1);
  }

  50% {
    opacity: 0.96;
    filter: blur(0.45px) brightness(1.2);
  }
}

@keyframes darkSurfaceShift {
  0% {
    opacity: 0.82;
    transform: scale(1) translate3d(0, 0, 0);
    background-position: 0 0, 100% 0;
  }

  100% {
    opacity: 1;
    transform: scale(1.03) translate3d(-0.6%, 0.5%, 0);
    background-position: 12% 14%, 88% 10%;
  }
}

.theme-toggle:hover {
  transform: translateY(-1px);
  background: var(--toggle-hover-bg);
  color: var(--toggle-hover-color);
}

.theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.ripple {
  position: fixed;
  border-radius: 999px;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: var(--ripple-bg);
  border: 1px solid var(--ripple-border);
  box-shadow: var(--ripple-shadow);
  animation: ripplePop 700ms ease-out forwards;
  mix-blend-mode: normal;
  z-index: 50;
}

@keyframes ripplePop {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.25);
  }
}