@import url("https://fonts.googleapis.com/css2?family=Bitcount+Grid+Double:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Agu+Display&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");

:root {
  color-scheme: light;
  --text: #1d1733;
  --muted: #61587d;
  --surface: rgba(255, 255, 255, 0.3);
  --surface-strong: rgba(255, 255, 255, 0.42);
  --surface-soft: rgba(120, 98, 201, 0.08);
  --border: rgba(126, 86, 255, 0.18);
  --border-strong: rgba(226, 84, 232, 0.22);
  --shadow: 0 24px 70px rgba(114, 86, 177, 0.12);
  --page-1: #fff7ff;
  --page-2: #eef4ff;
  --page-3: #fff0fb;
  --page-4: #f8f8ff;
  --orb-1: rgba(141, 123, 255, 0.2);
  --orb-2: rgba(66, 184, 255, 0.18);
  --orb-3: rgba(255, 105, 212, 0.15);
  --grid-line: rgba(113, 96, 154, 0.06);
  --brand-1: #8d7bff;
  --brand-2: #42b8ff;
  --brand-3: #ff69d4;
  --brand-4: #d83dff;
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --nav-height: 88px;
  --container: 1180px;
}

html.dark {
  color-scheme: dark;
  --text: #f7f5ff;
  --muted: #b8b7d8;
  --surface: rgba(14, 17, 40, 0.3);
  --surface-strong: rgba(17, 21, 48, 0.42);
  --surface-soft: rgba(255, 255, 255, 0.04);
  --border: rgba(181, 157, 255, 0.2);
  --border-strong: rgba(252, 110, 219, 0.24);
  --shadow: 0 24px 80px rgba(3, 5, 21, 0.42);
  --page-1: #060816;
  --page-2: #090d20;
  --page-3: #0b1130;
  --page-4: #060816;
  --orb-1: rgba(141, 123, 255, 0.28);
  --orb-2: rgba(66, 184, 255, 0.22);
  --orb-3: rgba(255, 105, 212, 0.18);
  --grid-line: rgba(255, 255, 255, 0.03);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.7;
  background:
    radial-gradient(circle at top left, var(--orb-1), transparent 28%),
    radial-gradient(circle at top right, var(--orb-2), transparent 32%),
    radial-gradient(circle at 50% 120%, var(--orb-3), transparent 30%),
    linear-gradient(
      145deg,
      var(--page-1) 0%,
      var(--page-2) 28%,
      var(--page-3) 58%,
      var(--page-4) 100%
    );
  transition:
    background-color 220ms ease,
    color 220ms ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at center, black 36%, transparent 90%);
  pointer-events: none;
  z-index: -3;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

section[id] {
  scroll-margin-top: calc(var(--nav-height) + 30px);
}

.noise,
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.noise {
  opacity: 0.1;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.8) 0.45px, transparent 0.45px),
    radial-gradient(rgba(255, 255, 255, 0.4) 0.45px, transparent 0.45px);
  background-position:
    0 0,
    18px 18px;
  background-size: 36px 36px;
  mix-blend-mode: soft-light;
  z-index: -2;
}

.ambient {
  z-index: -1;
  filter: blur(90px);
  opacity: 0.75;
}

.ambient-one {
  top: -18%;
  left: -12%;
  width: 30rem;
  height: 30rem;
  background: var(--orb-1);
  border-radius: 50%;
  animation: floatOne 14s ease-in-out infinite;
}

.ambient-two {
  top: 10%;
  right: -8%;
  width: 34rem;
  height: 34rem;
  background: var(--orb-2);
  border-radius: 50%;
  animation: floatTwo 18s ease-in-out infinite;
}

.ambient-three {
  bottom: -20%;
  left: 35%;
  width: 32rem;
  height: 32rem;
  background: var(--orb-3);
  border-radius: 50%;
  animation: floatThree 16s ease-in-out infinite;
}

.container {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.navbar {
  position: sticky;
  top: 2px;
  z-index: 100;
  padding-top: 16px;
}

.nav-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: var(--nav-height);
  padding: 16px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  transition:
    transform 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease;
}

.navbar.is-scrolled .nav-shell {
  transform: translateY(-4px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: block;
  width: 46px;
  min-width: 46px;
  height: 46px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  object-fit: fill;
  object-position: center top;
  box-shadow:
    0 0 0 2px rgba(141, 123, 255, 0.35),
    0 8px 24px rgba(141, 123, 255, 0.2);
  flex-shrink: 0;
  overflow: hidden;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-copy strong {
  font-size: 0.98rem;
  font-weight: 800;
}

.brand-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 600;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
  color: var(--text);
  background: linear-gradient(
    135deg,
    rgba(141, 123, 255, 0.18),
    rgba(255, 105, 212, 0.14)
  );
  transform: translateY(-1px);
}

.nav-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(126, 86, 255, 0.22);
  background: rgba(255, 255, 255, 0.7);
  padding: 4px;
  box-shadow: 0 2px 8px rgba(114, 86, 177, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  gap: 0;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.lang-switch:hover {
  border-color: rgba(141, 123, 255, 0.5);
  box-shadow:
    0 4px 16px rgba(141, 123, 255, 0.2),
    0 0 0 3px rgba(141, 123, 255, 0.08);
}

html.dark .lang-switch {
  border-color: rgba(181, 157, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

html.dark .lang-switch:hover {
  border-color: rgba(181, 157, 255, 0.45);
  box-shadow:
    0 4px 18px rgba(141, 123, 255, 0.25),
    0 0 0 3px rgba(141, 123, 255, 0.1);
}

/* Sliding pill indicator */
.lang-switch-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-3));
  box-shadow: 0 4px 14px rgba(141, 123, 255, 0.35);
  transition:
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 180ms ease,
    filter 180ms ease;
  pointer-events: none;
  z-index: 0;
}

.lang-switch:hover .lang-switch-pill {
  box-shadow: 0 6px 20px rgba(141, 123, 255, 0.5);
  filter: brightness(1.1);
}

.lang-switch:active .lang-switch-pill {
  filter: brightness(0.92) saturate(1.2);
  box-shadow: 0 2px 8px rgba(141, 123, 255, 0.35);
}

/* When EN is active, slide pill to the right */
.lang-switch[data-active="en"] .lang-switch-pill {
  transform: translateX(calc(100% + 0px));
}

.lang-btn {
  position: relative;
  z-index: 1;
  min-width: 42px;
  border: 0;
  border-radius: 999px;
  padding: 7px 12px;
  background: transparent;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    color 200ms ease,
    transform 150ms ease;
  user-select: none;
}

/* Inactive button hover — subtle text brighten */
.lang-btn:not(.is-active):hover {
  color: var(--brand-1);
}

html.dark .lang-btn:not(.is-active):hover {
  color: #fff;
}

/* Press scale on individual button */
.lang-btn:active {
  transform: scale(0.9);
}

html.dark .lang-btn {
  color: rgba(214, 213, 243, 0.6);
}

.lang-btn.is-active {
  color: #fff;
  background: transparent;
  box-shadow: none;
}

html.dark .lang-btn.is-active {
  color: #fff;
}

/* Theme icon: show sun in light mode, moon in dark mode */
.theme-icon {
  display: none;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

/* Light mode → show sun (when NOT dark) */
html:not(.dark) .theme-icon-sun {
  display: block;
  color: #f6a623;
}

html:not(.dark) .theme-icon-moon {
  display: none;
}

/* Dark mode → show moon */
html.dark .theme-icon-moon {
  display: block;
  color: var(--brand-2);
}

html.dark .theme-icon-sun {
  display: none;
}

.nav-toggle {
  display: none;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  border-radius: 999px;
  background: var(--text);
  transition:
    transform 180ms ease,
    opacity 180ms ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-main {
  position: relative;
  z-index: 2;
  padding-top: 22px;
  padding-bottom: 36px;
  will-change: transform, opacity;
}

.section {
  position: relative;
  z-index: 2;
  margin-bottom: 22px;
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.section::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    transparent 24%
  );
  pointer-events: none;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: auto;
  position: relative;
  overflow: hidden;
}

.hero-shell {
  width: min(100%, 1060px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 2rem;
}

.hero-avatar {
  width: clamp(96px, 10vw, 144px);
  height: clamp(96px, 10vw, 144px);
  flex: 0 0 auto;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 44px rgba(72, 54, 128, 0.18);
}

html.dark .hero-avatar {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 44px rgba(4, 6, 22, 0.38);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-greeting {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  margin-bottom: 12px;
  font-size: clamp(1rem, 2vw, 1.24rem);
  font-weight: 800;
  color: var(--brand-2);
}

.hero-title,
h1,
h2,
h3 {
  margin: 0;
  font-family: "Bitcount Grid Double", system-ui;
  letter-spacing: -0.02em;
}

.hero-title {
  font-size: clamp(2.2rem, 5vw, 4.25rem);
  line-height: 1.02;
  max-width: 100%;
}

.hero-description {
  max-width: 38ch;
  margin: 1.35rem auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.22rem);
}

.eyebrow {
  margin: 0;
  color: var(--brand-1);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-eyebrow {
  margin-top: 1rem;
}

/* Hero Roles with colored icons */
.hero-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin-top: 1rem;
  width: 100%;
}

.role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.role-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.role-game {
  color: #a78bfa;
}
.role-frontend {
  color: #38bdf8;
}
.role-data {
  color: #34d399;
}
.role-web3 {
  color: #fb923c;
}

.role-sep {
  color: var(--muted);
  font-size: 0.75rem;
  opacity: 0.4;
  user-select: none;
}

@media (max-width: 480px) {
  .role-sep {
    display: none;
  }

  .hero-roles {
    gap: 8px 12px;
  }

  .role {
    font-size: 0.78rem;
  }
}

.wave-emoji {
  display: inline-block;
  font-size: 1.7rem;
  transform-origin: 70% 70%;
  animation: wave 1.8s ease-in-out infinite;
}

.typed-word {
  position: relative;
  display: inline-block;
  min-width: 9ch;
  color: var(--typed-color, var(--brand-1));
  text-shadow: 0 0 22px rgba(141, 123, 255, 0.25);
  transition:
    color 220ms ease,
    text-shadow 220ms ease;
  white-space: nowrap;
  text-align: left;
}

.typed-word::after {
  content: "|";
  margin-left: 2px;
  animation: caret 850ms steps(1) infinite;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.42);
  animation: pulse 2.1s infinite;
}

.metric-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02)
    ),
    var(--surface);
  box-shadow: 0 20px 46px rgba(83, 61, 145, 0.1);
}

html.dark .metric-card {
  box-shadow: 0 20px 48px rgba(5, 8, 24, 0.24);
}

.metric-value {
  margin: 0;
  font-family: "Agu Display", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 1.8rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 0.94rem;
  font-weight: 700;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--brand-1),
    var(--brand-4),
    var(--brand-3)
  );
  box-shadow: 0 18px 34px rgba(141, 123, 255, 0.24);
}

.btn-secondary {
  border-color: var(--border);
  background: var(--surface-soft);
}

.hero-badge,
.section-badge,
.card-kicker,
.experience-period,
.project-type,
.timeline-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--brand-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Period color variants — must come after base rule */
.experience-period.period-game {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(167, 139, 250, 0.08);
}

.experience-period.period-frontend {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}

.experience-period.period-web3 {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(251, 146, 60, 0.08);
}

.experience-period.period-data {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
}

/* Project-type color variants */
.project-type.period-game {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(167, 139, 250, 0.08);
}

.project-type.period-frontend {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}

.project-type.period-web3 {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(251, 146, 60, 0.08);
}

.project-type.period-data {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.hero-metrics {
  width: 100%;
  margin-top: 1.8rem;
  margin-bottom: 0;
}

.metric-title {
  margin: 12px 0 6px;
  color: var(--brand-3);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-detail {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.metric-detail .stars {
  display: block;
  margin-bottom: 8px;
}

.stars {
  color: #ffd66e;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
}

.section-heading {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-bottom: 22px;
}

.section-heading h2 {
  margin-top: 14px;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.04;
}

.section-heading p,
.story-card p,
.experience-card p,
.project-card p,
.contact-card p {
  color: var(--muted);
}

.split-grid,
.experience-grid,
.projects-grid,
.contact-grid {
  display: grid;
  gap: 16px;
}

.split-grid {
  grid-template-columns: 1.05fr 0.95fr;
}

.glass-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.02)
    ),
    var(--surface);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.story-card,
.experience-card,
.contact-card {
  padding: 24px;
}

.story-card p + p {
  margin-top: 1rem;
}

.stack-block {
  margin-top: 1.75rem;
}

.stack-title {
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  color: var(--brand-2);
}

.stack-title.gradient-text {
  background: linear-gradient(
    135deg,
    var(--brand-1) 0%,
    var(--brand-3) 50%,
    var(--brand-2) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  margin-top: 1.25rem;
}

.stack-group h4 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.2;
}

.stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stack-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.94rem;
  font-weight: 600;
}

.stack-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Dark mode invert for monochrome icons (GitHub, Vercel, Notion) */
html.dark .stack-tags span img[style*="devicon-vercel-filter"],
html.dark .stack-tags span img[style*="devicon-github-filter"],
html.dark .stack-tags span img[style*="devicon-notion-filter"] {
  filter: invert(1);
}

/* Academic & Work Snapshot card — fit to content */
.story-card.snapshot-card {
  display: flex;
  flex-direction: column;
  height: fit-content;
  align-self: start;
}

.hero-tags,
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 0.88rem;
  font-weight: 600;
}

.pill-row span svg.stack-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.pill-row span img.stack-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  object-fit: contain;
}

.timeline {
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 18px;
  padding-left: 28px;
}

/* Vertical line — left aligned to dot center */
.timeline-line {
  position: absolute;
  top: 2px;
  left: 10px;
  bottom: 2px;
  width: 5px;
  border-radius: 999px;
  z-index: 0;
  overflow: hidden;
}

/* Animated gradient via scrolling background */
.timeline-line::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    #8d7bff,
    #42b8ff,
    #34d399,
    #fb923c,
    #ff69d4,
    #8d7bff
  );
  animation: timelineFlow 4s linear infinite;
}

@keyframes timelineFlow {
  0%   { transform: translateY(-66.66%); }
  100% { transform: translateY(0%); }
}

.timeline-item {
  position: relative;
  padding: 4px 0 0 24px;
  z-index: 2;
}

/* Dot — centered ON the vertical line */
.timeline-item::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -23px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--page-1);
  border: 2.5px solid var(--brand-1);
  box-shadow: 0 0 0 4px rgba(141, 123, 255, 0.18),
              0 0 10px rgba(141, 123, 255, 0.35);
  z-index: 3;
}

.timeline-item h3 {
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 1.1;
}

.experience-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.experience-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience-card h3 {
  font-size: 1.35rem;
  line-height: 1.08;
}

.projects-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card {
  overflow: hidden;
}

.project-visual {
  position: relative;
  min-height: 180px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-visual::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.02)
  );
  pointer-events: none;
}

.project-visual span,
.project-visual strong {
  position: relative;
  z-index: 1;
  color: #fff;
}

.project-visual span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.project-visual strong {
  font-family: "DM Serif Display", serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1;
}

.visual-one {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.12),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      rgba(141, 123, 255, 0.45),
      rgba(216, 61, 255, 0.38),
      rgba(255, 105, 212, 0.4)
    ),
    url("./assets/em-dark.png") center / cover no-repeat;
}

.visual-two {
  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.1),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      rgba(66, 184, 255, 0.42),
      rgba(141, 123, 255, 0.38),
      rgba(255, 105, 212, 0.35)
    ),
    url("./assets/portfolioredesign.png") center / cover no-repeat;
}

.visual-three {
  background:
    radial-gradient(
      circle at 25% 65%,
      rgba(255, 255, 255, 0.1),
      transparent 22%
    ),
    linear-gradient(
      135deg,
      rgba(216, 61, 255, 0.4),
      rgba(255, 105, 212, 0.36),
      rgba(66, 184, 255, 0.32)
    ),
    url("./assets/blockchaintrack.png") center / cover no-repeat;
}

.visual-four {
  background:
    radial-gradient(
      circle at 18% 22%,
      rgba(255, 255, 255, 0.1),
      transparent 26%
    ),
    linear-gradient(
      135deg,
      rgba(22, 163, 74, 0.4),
      rgba(59, 130, 246, 0.36),
      rgba(99, 102, 241, 0.36)
    ),
    url("./assets/salesperformance.png") center / cover no-repeat;
}

.project-body {
  padding: 22px 20px 20px;
}

.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-link {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.project-card h3 {
  margin-top: 16px;
  font-size: 1.3rem;
  line-height: 1.08;
}

.project-card p {
  margin: 12px 0 0;
}

.contact-grid {
  grid-template-columns: 1.1fr 0.9fr;
}

.contact-card h3 {
  margin-top: 10px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.08;
}

.mini-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.mini-contact-item {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.mini-contact-item span {
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini-contact-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini-contact-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.9;
  color: var(--brand-1);
}

.footer {
  padding: 0 0 26px;
}

.footer-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    opacity 720ms cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 720ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes floatOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(28px, 46px, 0);
  }
}

@keyframes floatTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-42px, 18px, 0);
  }
}

@keyframes floatThree {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(18px, -32px, 0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.42);
  }
  80% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes caret {
  0%,
  48% {
    opacity: 0.95;
  }
  52%,
  100% {
    opacity: 0.2;
  }
}

@keyframes wave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-7deg);
  }
  60% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-4deg);
  }
}

@media (max-width: 1100px) {
  .hero {
    min-height: auto;
  }

  .split-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .metrics-grid,
  .experience-grid,
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .nav-shell {
    padding: 14px 16px;
    border-radius: 28px;
  }

  .nav-toggle {
    display: inline-block;
  }

  .nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface-strong);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      visibility 180ms ease;
  }

  .nav-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-link {
    justify-content: flex-start;
    width: 100%;
    border-radius: 16px;
  }
}

@media (max-width: 860px) {
  .hero-heading {
    flex-direction: column;
    gap: 18px;
  }

  .stack-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    align-items: center;
  }

  .metrics-grid,
  .experience-grid,
  .projects-grid,
  .mini-contact {
    grid-template-columns: 1fr;
  }

  .hero-title {
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .nav-tools {
    gap: 8px;
  }

  .theme-toggle {
    padding-inline: 12px !important;
  }

  .project-meta,
  .footer-shell {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(var(--container), calc(100% - 18px));
  }

  .brand-copy {
    display: none;
  }

  .section,
  .metric-card {
    border-radius: 22px;
  }

  .section,
  .story-card,
  .experience-card,
  .project-body,
  .contact-card,
  .metric-card {
    padding: 18px;
  }

  .hero-title {
    font-size: clamp(1.95rem, 8vw, 3rem);
  }

  .hero-description,
  .section-heading p,
  .story-card p,
  .experience-card p,
  .project-card p,
  .contact-card p,
  .metric-detail {
    font-size: 0.94rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   DUST PARTICLE EFFECT — Full Page
   Adapted from csscrafter.com/css-particle-effects/
   Brand-colored: purple (#8d7bff), blue (#42b8ff), pink (#ff69d4)
   ============================================================ */

.dust-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* --- Layer 1: tiny 1px dots, purple tint, slow drift --- */
#dust-stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    117px 163px rgba(141, 123, 255, 0.7),
    488px 235px rgba(141, 123, 255, 0.5),
    744px 114px rgba(66, 184, 255, 0.6),
    947px 277px rgba(255, 105, 212, 0.5),
    192px 405px rgba(141, 123, 255, 0.4),
    656px 317px rgba(66, 184, 255, 0.6),
    820px 539px rgba(255, 105, 212, 0.5),
    353px 400px rgba(141, 123, 255, 0.6),
    870px 213px rgba(66, 184, 255, 0.4),
    550px 502px rgba(255, 105, 212, 0.7),
    255px 356px rgba(141, 123, 255, 0.5),
    88px 509px rgba(66, 184, 255, 0.4),
    450px 290px rgba(255, 105, 212, 0.6),
    929px 157px rgba(141, 123, 255, 0.5),
    390px 305px rgba(66, 184, 255, 0.7),
    771px 469px rgba(255, 105, 212, 0.4),
    141px 669px rgba(141, 123, 255, 0.6),
    432px 264px rgba(66, 184, 255, 0.5),
    563px 196px rgba(255, 105, 212, 0.4),
    918px 473px rgba(141, 123, 255, 0.7),
    45px 211px rgba(66, 184, 255, 0.5),
    231px 303px rgba(255, 105, 212, 0.6),
    637px 520px rgba(141, 123, 255, 0.4),
    970px 495px rgba(66, 184, 255, 0.5),
    812px 225px rgba(255, 105, 212, 0.7),
    167px 398px rgba(141, 123, 255, 0.5),
    535px 479px rgba(66, 184, 255, 0.4),
    837px 329px rgba(255, 105, 212, 0.6),
    145px 285px rgba(141, 123, 255, 0.7),
    677px 417px rgba(66, 184, 255, 0.5),
    317px 215px rgba(255, 105, 212, 0.4),
    785px 505px rgba(141, 123, 255, 0.6),
    787px 354px rgba(66, 184, 255, 0.5),
    302px 296px rgba(255, 105, 212, 0.7),
    712px 301px rgba(141, 123, 255, 0.4),
    583px 364px rgba(66, 184, 255, 0.6),
    336px 258px rgba(255, 105, 212, 0.5),
    979px 334px rgba(141, 123, 255, 0.6),
    406px 192px rgba(66, 184, 255, 0.4),
    204px 234px rgba(255, 105, 212, 0.7),
    845px 463px rgba(141, 123, 255, 0.5),
    445px 399px rgba(66, 184, 255, 0.6),
    386px 153px rgba(255, 105, 212, 0.4),
    571px 452px rgba(141, 123, 255, 0.7),
    766px 376px rgba(66, 184, 255, 0.5),
    885px 303px rgba(255, 105, 212, 0.6),
    751px 217px rgba(141, 123, 255, 0.4),
    111px 299px rgba(66, 184, 255, 0.7),
    846px 487px rgba(255, 105, 212, 0.5),
    167px 433px rgba(141, 123, 255, 0.6),
    288px 326px rgba(66, 184, 255, 0.4),
    638px 260px rgba(255, 105, 212, 0.7),
    470px 148px rgba(141, 123, 255, 0.5),
    213px 469px rgba(66, 184, 255, 0.6),
    967px 276px rgba(255, 105, 212, 0.4),
    726px 412px rgba(141, 123, 255, 0.7),
    822px 512px rgba(66, 184, 255, 0.5),
    545px 427px rgba(255, 105, 212, 0.6),
    811px 199px rgba(141, 123, 255, 0.4),
    912px 306px rgba(66, 184, 255, 0.7),
    602px 243px rgba(255, 105, 212, 0.5),
    654px 393px rgba(141, 123, 255, 0.6),
    930px 293px rgba(66, 184, 255, 0.4),
    258px 384px rgba(255, 105, 212, 0.7),
    489px 465px rgba(141, 123, 255, 0.5),
    824px 494px rgba(66, 184, 255, 0.6),
    506px 335px rgba(255, 105, 212, 0.4),
    127px 153px rgba(141, 123, 255, 0.7),
    310px 453px rgba(66, 184, 255, 0.5),
    530px 361px rgba(255, 105, 212, 0.6),
    864px 255px rgba(141, 123, 255, 0.4),
    610px 304px rgba(66, 184, 255, 0.7),
    335px 314px rgba(255, 105, 212, 0.5),
    756px 253px rgba(141, 123, 255, 0.6),
    196px 253px rgba(66, 184, 255, 0.4),
    361px 337px rgba(255, 105, 212, 0.7),
    834px 351px rgba(141, 123, 255, 0.5),
    436px 376px rgba(66, 184, 255, 0.6),
    894px 207px rgba(255, 105, 212, 0.4),
    141px 247px rgba(141, 123, 255, 0.7),
    319px 154px rgba(66, 184, 255, 0.5),
    737px 369px rgba(255, 105, 212, 0.6),
    872px 413px rgba(141, 123, 255, 0.4),
    733px 143px rgba(66, 184, 255, 0.7),
    350px 411px rgba(255, 105, 212, 0.5),
    789px 396px rgba(141, 123, 255, 0.6),
    139px 163px rgba(66, 184, 255, 0.4),
    584px 336px rgba(255, 105, 212, 0.7),
    912px 343px rgba(141, 123, 255, 0.5),
    298px 307px rgba(66, 184, 255, 0.6),
    750px 402px rgba(255, 105, 212, 0.4),
    429px 232px rgba(141, 123, 255, 0.7),
    391px 438px rgba(66, 184, 255, 0.5),
    225px 419px rgba(255, 105, 212, 0.6),
    865px 518px rgba(141, 123, 255, 0.4),
    203px 383px rgba(66, 184, 255, 0.7),
    455px 214px rgba(255, 105, 212, 0.5),
    623px 154px rgba(141, 123, 255, 0.6);
  animation: animDust 15s linear infinite;
}

#dust-stars::after {
  content: " ";
  position: absolute;
  top: 100vh;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    117px 163px rgba(141, 123, 255, 0.7),
    488px 235px rgba(141, 123, 255, 0.5),
    744px 114px rgba(66, 184, 255, 0.6),
    947px 277px rgba(255, 105, 212, 0.5),
    192px 405px rgba(141, 123, 255, 0.4),
    656px 317px rgba(66, 184, 255, 0.6),
    820px 539px rgba(255, 105, 212, 0.5),
    353px 400px rgba(141, 123, 255, 0.6),
    870px 213px rgba(66, 184, 255, 0.4),
    550px 502px rgba(255, 105, 212, 0.7),
    255px 356px rgba(141, 123, 255, 0.5),
    88px 509px rgba(66, 184, 255, 0.4),
    450px 290px rgba(255, 105, 212, 0.6),
    929px 157px rgba(141, 123, 255, 0.5),
    390px 305px rgba(66, 184, 255, 0.7),
    771px 469px rgba(255, 105, 212, 0.4),
    141px 669px rgba(141, 123, 255, 0.6),
    432px 264px rgba(66, 184, 255, 0.5),
    563px 196px rgba(255, 105, 212, 0.4),
    918px 473px rgba(141, 123, 255, 0.7),
    45px 211px rgba(66, 184, 255, 0.5),
    231px 303px rgba(255, 105, 212, 0.6),
    637px 520px rgba(141, 123, 255, 0.4),
    970px 495px rgba(66, 184, 255, 0.5),
    812px 225px rgba(255, 105, 212, 0.7),
    167px 398px rgba(141, 123, 255, 0.5),
    535px 479px rgba(66, 184, 255, 0.4),
    837px 329px rgba(255, 105, 212, 0.6),
    145px 285px rgba(141, 123, 255, 0.7),
    677px 417px rgba(66, 184, 255, 0.5);
}

/* --- Layer 2: medium 2px dots, varied colors, medium speed --- */
#dust-stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    117px 306px rgba(141, 123, 255, 0.6),
    278px 183px rgba(66, 184, 255, 0.7),
    479px 385px rgba(255, 105, 212, 0.5),
    645px 220px rgba(141, 123, 255, 0.7),
    822px 133px rgba(66, 184, 255, 0.5),
    387px 498px rgba(255, 105, 212, 0.6),
    153px 137px rgba(141, 123, 255, 0.4),
    584px 282px rgba(66, 184, 255, 0.7),
    776px 453px rgba(255, 105, 212, 0.5),
    326px 306px rgba(141, 123, 255, 0.6),
    760px 386px rgba(66, 184, 255, 0.4),
    953px 175px rgba(255, 105, 212, 0.7),
    472px 384px rgba(141, 123, 255, 0.5),
    285px 250px rgba(66, 184, 255, 0.6),
    116px 127px rgba(255, 105, 212, 0.4),
    931px 273px rgba(141, 123, 255, 0.7),
    736px 195px rgba(66, 184, 255, 0.5),
    838px 479px rgba(255, 105, 212, 0.6),
    138px 179px rgba(141, 123, 255, 0.4),
    665px 302px rgba(66, 184, 255, 0.7),
    341px 377px rgba(255, 105, 212, 0.5),
    404px 273px rgba(141, 123, 255, 0.6),
    100px 297px rgba(66, 184, 255, 0.4),
    557px 389px rgba(255, 105, 212, 0.7),
    844px 342px rgba(141, 123, 255, 0.5),
    954px 502px rgba(66, 184, 255, 0.6),
    192px 208px rgba(255, 105, 212, 0.4),
    740px 239px rgba(141, 123, 255, 0.7),
    360px 352px rgba(66, 184, 255, 0.5),
    889px 452px rgba(255, 105, 212, 0.6),
    659px 253px rgba(141, 123, 255, 0.4),
    162px 317px rgba(66, 184, 255, 0.7),
    475px 405px rgba(255, 105, 212, 0.5),
    543px 311px rgba(141, 123, 255, 0.6),
    659px 422px rgba(66, 184, 255, 0.4),
    818px 380px rgba(255, 105, 212, 0.7),
    218px 438px rgba(141, 123, 255, 0.5),
    824px 138px rgba(66, 184, 255, 0.6),
    260px 170px rgba(255, 105, 212, 0.4),
    675px 470px rgba(141, 123, 255, 0.7),
    341px 277px rgba(66, 184, 255, 0.5),
    404px 373px rgba(255, 105, 212, 0.6),
    226px 320px rgba(141, 123, 255, 0.4),
    844px 207px rgba(66, 184, 255, 0.7),
    175px 470px rgba(255, 105, 212, 0.5),
    435px 283px rgba(141, 123, 255, 0.6),
    37px 353px rgba(66, 184, 255, 0.4),
    759px 217px rgba(255, 105, 212, 0.7),
    921px 402px rgba(141, 123, 255, 0.5),
    549px 290px rgba(66, 184, 255, 0.6);
  animation: animDust 25s linear infinite;
}

#dust-stars2::after {
  content: " ";
  position: absolute;
  top: 100vh;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    117px 306px rgba(141, 123, 255, 0.6),
    278px 183px rgba(66, 184, 255, 0.7),
    479px 385px rgba(255, 105, 212, 0.5),
    645px 220px rgba(141, 123, 255, 0.7),
    822px 133px rgba(66, 184, 255, 0.5),
    387px 498px rgba(255, 105, 212, 0.6),
    153px 137px rgba(141, 123, 255, 0.4),
    584px 282px rgba(66, 184, 255, 0.7),
    776px 453px rgba(255, 105, 212, 0.5),
    326px 306px rgba(141, 123, 255, 0.6);
}

/* --- Layer 3: large 3px dots, rare, glowing feel --- */
#dust-stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    247px 106px rgba(141, 123, 255, 0.5),
    682px 284px rgba(66, 184, 255, 0.6),
    353px 475px rgba(255, 105, 212, 0.4),
    512px 201px rgba(141, 123, 255, 0.6),
    879px 406px rgba(66, 184, 255, 0.5),
    134px 332px rgba(255, 105, 212, 0.6),
    761px 181px rgba(141, 123, 255, 0.4),
    428px 452px rgba(66, 184, 255, 0.7),
    95px 255px rgba(255, 105, 212, 0.5),
    940px 338px rgba(141, 123, 255, 0.6),
    600px 121px rgba(66, 184, 255, 0.4),
    275px 403px rgba(255, 105, 212, 0.7),
    815px 295px rgba(141, 123, 255, 0.5),
    490px 359px rgba(66, 184, 255, 0.6),
    185px 168px rgba(255, 105, 212, 0.4),
    720px 430px rgba(141, 123, 255, 0.7),
    365px 242px rgba(66, 184, 255, 0.5),
    55px 488px rgba(255, 105, 212, 0.6),
    910px 189px rgba(141, 123, 255, 0.4),
    635px 377px rgba(66, 184, 255, 0.7);
  animation: animDust 35s linear infinite;
}

#dust-stars3::after {
  content: " ";
  position: absolute;
  top: 100vh;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    247px 106px rgba(141, 123, 255, 0.5),
    682px 284px rgba(66, 184, 255, 0.6),
    353px 475px rgba(255, 105, 212, 0.4),
    512px 201px rgba(141, 123, 255, 0.6),
    879px 406px rgba(66, 184, 255, 0.5),
    134px 332px rgba(255, 105, 212, 0.6);
}

/* Drift upward animation (dust floating up) */
@keyframes animDust {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-100vh);
  }
}

/* Light mode: slightly more transparent */
html:not(.dark) .dust-particles {
  opacity: 0.45;
}

/* Dark mode: full visibility */
html.dark .dust-particles {
  opacity: 0.75;
}

/* Reduce motion: disable for accessibility */
@media (prefers-reduced-motion: reduce) {
  #dust-stars,
  #dust-stars::after,
  #dust-stars2,
  #dust-stars2::after,
  #dust-stars3,
  #dust-stars3::after {
    animation: none;
  }
}

/* ============================================================
   FLUID UP BACKGROUND PARTICLE ANIMATION — Hero Section only
   Adapted from csscrafter.com/css-particle-effects/
   Brand-colored: purple (#8d7bff), blue (#42b8ff), pink (#ff69d4)
   ============================================================ */

.fluid-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Make hero section a stacking context */
/* Keep hero content above fluid particles */
.hero .hero-shell {
  position: relative;
  z-index: 2;
}

.light {
  position: absolute;
  opacity: 0;
  top: 110%;
  border-radius: 50%;
}

/* Each particle: different size, position, speed, color */
.lx1 {
  width: 18px;
  height: 18px;
  background: radial-gradient(
    circle,
    rgba(141, 123, 255, 0.9),
    transparent 70%
  );
  box-shadow: 0 0 18px 6px rgba(141, 123, 255, 0.5);
  animation: fluidUp 5s infinite linear;
  left: 12%;
}

.lx2 {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(66, 184, 255, 0.9), transparent 70%);
  box-shadow: 0 0 14px 5px rgba(66, 184, 255, 0.5);
  animation: fluidUp 8s infinite linear;
  left: 26%;
}

.lx3 {
  width: 6px;
  height: 6px;
  background: radial-gradient(
    circle,
    rgba(255, 105, 212, 0.9),
    transparent 70%
  );
  box-shadow: 0 0 10px 4px rgba(255, 105, 212, 0.45);
  animation: fluidUp 3.5s infinite linear;
  left: 40%;
}

.lx4 {
  width: 14px;
  height: 14px;
  background: radial-gradient(
    circle,
    rgba(141, 123, 255, 0.85),
    transparent 70%
  );
  box-shadow: 0 0 16px 5px rgba(141, 123, 255, 0.45);
  animation: fluidUp 6s infinite linear;
  left: 55%;
}

.lx5 {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, rgba(66, 184, 255, 0.8), transparent 70%);
  box-shadow: 0 0 22px 8px rgba(66, 184, 255, 0.4);
  animation: fluidUp 9s infinite linear;
  left: 68%;
}

.lx6 {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(216, 61, 255, 0.9), transparent 70%);
  box-shadow: 0 0 12px 4px rgba(216, 61, 255, 0.45);
  animation: fluidUp 4s infinite linear;
  left: 78%;
}

.lx7 {
  width: 26px;
  height: 26px;
  background: radial-gradient(
    circle,
    rgba(141, 123, 255, 0.75),
    transparent 70%
  );
  box-shadow: 0 0 28px 10px rgba(141, 123, 255, 0.35);
  animation: fluidUp 7s infinite linear;
  left: 88%;
}

.lx8 {
  width: 12px;
  height: 12px;
  background: radial-gradient(
    circle,
    rgba(255, 105, 212, 0.9),
    transparent 70%
  );
  box-shadow: 0 0 14px 5px rgba(255, 105, 212, 0.45);
  animation: fluidUp 5.5s infinite linear;
  left: 6%;
}

.lx9 {
  width: 16px;
  height: 16px;
  background: radial-gradient(
    circle,
    rgba(66, 184, 255, 0.85),
    transparent 70%
  );
  box-shadow: 0 0 18px 6px rgba(66, 184, 255, 0.4);
  animation: fluidUp 6.5s infinite linear;
  left: 48%;
}

@keyframes fluidUp {
  0% {
    top: 110%;
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  50% {
    opacity: 0.7;
  }
  85% {
    opacity: 0.85;
  }
  100% {
    top: -10%;
    opacity: 0;
  }
}

/* Stagger start times so they don't all rise together */
.lx10 {
  width: 20px;
  height: 20px;
  background: radial-gradient(
    circle,
    rgba(255, 105, 212, 0.85),
    transparent 70%
  );
  box-shadow: 0 0 20px 7px rgba(255, 105, 212, 0.4);
  animation: fluidUp 7.5s infinite linear;
  left: 3%;
}

.lx11 {
  width: 8px;
  height: 8px;
  background: radial-gradient(
    circle,
    rgba(141, 123, 255, 0.9),
    transparent 70%
  );
  box-shadow: 0 0 12px 4px rgba(141, 123, 255, 0.5);
  animation: fluidUp 4.5s infinite linear;
  left: 17%;
}

.lx12 {
  width: 14px;
  height: 14px;
  background: radial-gradient(
    circle,
    rgba(66, 184, 255, 0.85),
    transparent 70%
  );
  box-shadow: 0 0 16px 5px rgba(66, 184, 255, 0.45);
  animation: fluidUp 6s infinite linear;
  left: 32%;
}

.lx13 {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle, rgba(216, 61, 255, 0.8), transparent 70%);
  box-shadow: 0 0 24px 9px rgba(216, 61, 255, 0.35);
  animation: fluidUp 9.5s infinite linear;
  left: 44%;
}

.lx14 {
  width: 10px;
  height: 10px;
  background: radial-gradient(
    circle,
    rgba(141, 123, 255, 0.9),
    transparent 70%
  );
  box-shadow: 0 0 12px 4px rgba(141, 123, 255, 0.5);
  animation: fluidUp 3.8s infinite linear;
  left: 58%;
}

.lx15 {
  width: 16px;
  height: 16px;
  background: radial-gradient(
    circle,
    rgba(255, 105, 212, 0.85),
    transparent 70%
  );
  box-shadow: 0 0 18px 6px rgba(255, 105, 212, 0.4);
  animation: fluidUp 5.2s infinite linear;
  left: 71%;
}

.lx16 {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(66, 184, 255, 0.9), transparent 70%);
  box-shadow: 0 0 10px 3px rgba(66, 184, 255, 0.5);
  animation: fluidUp 4.2s infinite linear;
  left: 82%;
}

.lx17 {
  width: 20px;
  height: 20px;
  background: radial-gradient(
    circle,
    rgba(141, 123, 255, 0.8),
    transparent 70%
  );
  box-shadow: 0 0 22px 8px rgba(141, 123, 255, 0.4);
  animation: fluidUp 8s infinite linear;
  left: 91%;
}

.lx18 {
  width: 12px;
  height: 12px;
  background: radial-gradient(
    circle,
    rgba(216, 61, 255, 0.85),
    transparent 70%
  );
  box-shadow: 0 0 14px 5px rgba(216, 61, 255, 0.45);
  animation: fluidUp 5.8s infinite linear;
  left: 97%;
}

/* Stagger delays — all 18 particles */
.lx1 {
  animation-delay: 0s;
}
.lx2 {
  animation-delay: -2.5s;
}
.lx3 {
  animation-delay: -1s;
}
.lx4 {
  animation-delay: -4s;
}
.lx5 {
  animation-delay: -6s;
}
.lx6 {
  animation-delay: -1.8s;
}
.lx7 {
  animation-delay: -3.2s;
}
.lx8 {
  animation-delay: -5s;
}
.lx9 {
  animation-delay: -0.6s;
}
.lx10 {
  animation-delay: -7s;
}
.lx11 {
  animation-delay: -3.7s;
}
.lx12 {
  animation-delay: -1.4s;
}
.lx13 {
  animation-delay: -8.5s;
}
.lx14 {
  animation-delay: -2.1s;
}
.lx15 {
  animation-delay: -4.8s;
}
.lx16 {
  animation-delay: -0.3s;
}
.lx17 {
  animation-delay: -6.6s;
}
.lx18 {
  animation-delay: -9s;
}

/* Light mode: slightly dimmer */
html:not(.dark) .fluid-particles .light {
  opacity: 0;
  filter: saturate(1.2) brightness(0.85);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .light {
    animation: none !important;
  }
  .timeline-line::after {
    animation: none !important;
  }
}