@font-face {
  font-family: 'Orbitron';
  src: url('/fonts/Orbitron-wght.ttf') format('truetype');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/GeistSans-wght.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Semantic lavender color system for the portfolio shell and WebGL-backed homepage. */
:root {
  color-scheme: light;
  --background: #f2e7f5;
  --background-secondary: #ede0f0;
  --surface: #f8f3f9;
  --surface-elevated: #fbf8fc;
  --text-primary: #21172f;
  --text-secondary: #4c3d59;
  --text-muted: #66576f;
  --border: rgba(70, 45, 134, 0.16);
  --border-strong: rgba(70, 45, 134, 0.34);
  --brand-primary: #462d86;
  --brand-secondary: #b793d2;
  --accent: #9169c1;
  --accent-subtle: #dfc8e4;
  --success: #286d23;
  --success-icon: #2e7c28;
  --green-accent: #82ac33;
  --success-subtle: #e5edd8;
  --interactive: #6f4aa3;
  --interactive-hover: #58368f;
  --focus-ring: #9169c1;
  --selection-bg: #e6b84a;
  --selection-text: #21172f;
  --hero-background: #2d1b52;
  --hero-particle: #dfc8e4;
  --hero-glow: rgba(145, 105, 193, 0.32);
  --font-display: 'Orbitron', 'Geist Sans', Arial, sans-serif;
  --font-ui: 'Geist Sans', Arial, sans-serif;
  --font-sans: var(--font-ui);
  --font-mono: var(--font-ui);
  --font-mono-2: var(--font-ui);
  --label: 33, 23, 47;
  --label-d: 76, 61, 89;
  --label-1: var(--text-primary);
  --label-2: var(--text-secondary);
  --label-3: var(--text-muted);
  --label-4: rgba(76, 61, 89, 0.58);
  --line: var(--border);
  --background-deep: 242, 231, 245;
  --background-1: var(--background);
  --background-elevated: var(--surface-elevated);
  --code-comment: var(--text-muted);
  --code-string: #286d23;
  --code-number: #66576f;
  --code-keyword: #462d86;
  --code-function: #6f4aa3;
  --code-tag: #58368f;
  --code-operator: var(--text-secondary);
}

html.dark {
  color-scheme: dark;
  --background: #120d20;
  --background-secondary: #1b1330;
  --surface: #24193c;
  --surface-elevated: #302049;
  --text-primary: #f2e7f5;
  --text-secondary: #dfc8e4;
  --text-muted: #b793d2;
  --border: rgba(223, 200, 228, 0.16);
  --border-strong: rgba(183, 147, 210, 0.38);
  --brand-primary: #b793d2;
  --brand-secondary: #9169c1;
  --accent: #9169c1;
  --accent-subtle: #302049;
  --success: #82ac33;
  --success-icon: #82ac33;
  --green-accent: #82ac33;
  --success-subtle: #23361f;
  --interactive: #b793d2;
  --interactive-hover: #dfc8e4;
  --focus-ring: #b793d2;
  --selection-bg: #e6b84a;
  --selection-text: #120d20;
  --hero-background: #120d20;
  --hero-particle: #dfc8e4;
  --hero-glow: rgba(183, 147, 210, 0.24);
  --label: 242, 231, 245;
  --label-d: 223, 200, 228;
  --label-1: var(--text-primary);
  --label-2: var(--text-secondary);
  --label-3: var(--text-muted);
  --label-4: rgba(223, 200, 228, 0.56);
  --line: var(--border);
  --background-deep: 18, 13, 32;
  --background-1: var(--background);
  --background-elevated: var(--surface-elevated);
  --code-comment: var(--text-muted);
  --code-string: #82ac33;
  --code-number: #dfc8e4;
  --code-keyword: #b793d2;
  --code-function: #dfc8e4;
  --code-tag: #9169c1;
  --code-operator: var(--text-secondary);
}

::selection { background: var(--selection-bg); color: var(--selection-text); }
html, body {
  background-color: var(--background);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-synthesis: none;
}

header {
  font-family: var(--font-ui) !important;
}

header > div:first-child {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
}

header > div:first-child > a {
  font-family: var(--font-ui) !important;
  font-weight: 700;
  letter-spacing: .01em;
}

.marzia-particle-hero > div:first-of-type {
  font-family: var(--font-ui) !important;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: 0;
}

.marzia-particle-hero > div:first-of-type > span:first-child {
  font-family: var(--font-ui) !important;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.marzia-particle-hero > div:nth-of-type(2) {
  font-family: var(--font-display) !important;
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 700;
  font-variation-settings: 'wght' 700 !important;
  line-height: .98;
  letter-spacing: -.015em;
}

[style*="font-family"] {
  font-family: var(--font-ui) !important;
}

#selected-work .bg-selection {
  font-family: var(--font-ui) !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .07em;
}

#selected-work article a > div:last-child {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
}

#selected-work article a > div:last-child > div {
  font-family: var(--font-ui) !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.marzia-particle-hero {
  position: relative;
  z-index: 40;
  isolation: isolate;
  overflow: hidden;
}

#marzia-particle-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.marzia-particle-hero > :not(#marzia-particle-field) {
  position: relative;
  z-index: 1;
}
[aria-label^="Sound playing"], [aria-label^="Sound paused"] { display: none !important; }

/* Replace the captured footer with Marzia's own closing statement and contact links. */
#contact {
  background: transparent !important;
  z-index: 40 !important;
  isolation: isolate;
  overflow: hidden;
}
#contact > div { display: none !important; }
#contact > .marzia-footer-content {
  display: grid !important;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: clamp(40px, 8vh, 96px);
  width: 100%;
  min-height: 100%;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.marzia-footer-copy {
  display: grid;
  gap: clamp(24px, 4vw, 52px);
  align-self: center;
  max-width: 1240px;
  position: relative;
  z-index: 2;
}
.marzia-footer-copy p {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text-primary);
  font-size: clamp(32px, 4.3vw, 72px);
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -.035em;
  max-width: 25ch;
}
.marzia-footer-copy p + p {
  color: var(--text-secondary);
  font-size: clamp(20px, 2.3vw, 38px);
  font-weight: 430;
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 43ch;
}
.marzia-footer-links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 4vw, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
  z-index: 2;
}
.marzia-footer-icons {
  position: absolute;
  inset: -64px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.marzia-footer-icon {
  position: absolute;
  top: -90px;
  left: var(--x);
  width: clamp(38px, 5vw, var(--size));
  height: auto;
  opacity: .78;
  filter: drop-shadow(0 10px 18px rgba(70, 45, 134, .16));
  will-change: transform;
  animation: marzia-footer-fall var(--duration) linear var(--delay) infinite;
}
@keyframes marzia-footer-fall {
  from { transform: translate3d(0, -12vh, 0) rotate(-18deg); }
  to { transform: translate3d(var(--drift), 125vh, 0) rotate(342deg); }
}
.marzia-footer-links a {
  color: var(--text-primary);
  text-decoration: none;
  text-underline-offset: 4px;
}
.marzia-footer-links a:hover {
  color: var(--interactive-hover);
  text-decoration: underline;
}

/* Remove the lower-left clock/copyright and lower-right globe. */
header > div:last-child > span:first-child,
header > div:last-child > span:nth-child(2),
header > div:last-child > div:last-child {
  display: none !important;
}

header > div:nth-of-type(2) > span:not([class*="lg:fixed"]),
header > div:nth-of-type(2) > div,
header [class*="shrink-0"] {
  display: none !important;
}
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

#selected-work article a > div:first-child {
  box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow 220ms ease;
}
#selected-work article a:hover > div:first-child,
#selected-work article a:focus-visible > div:first-child {
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 16px 42px rgba(70, 45, 134, 0.10);
}
#selected-work article a > div:last-child { color: var(--text-secondary); transition: color 200ms ease; }
#selected-work article a:hover > div:last-child,
#selected-work article a:focus-visible > div:last-child { color: var(--interactive-hover); }
#selected-work .bg-selection {
  background: var(--accent-subtle);
  color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--border);
}
#selected-work a[href="/qalin"] .bg-selection,
#selected-work a[href="/supportiq"] .bg-selection,
#selected-work a[href="/relay"] .bg-selection {
  background: #462d86;
  color: #f2e7f5;
  box-shadow: none;
}
html.dark #selected-work a[href="/qalin"] .bg-selection,
html.dark #selected-work a[href="/supportiq"] .bg-selection,
html.dark #selected-work a[href="/relay"] .bg-selection {
  background: #b793d2;
  color: #120d20;
}

.text-\[6svw\] { font-size: 6svw; }
@media (min-width: 1024px) { .lg\:text-\[5\.2svw\] { font-size: 5.2svw; } }
@media (min-width: 1280px) { .xl\:text-\[5\.2svw\] { font-size: 5.2svw; } }
@media (min-width: 1536px) { .\32xl\:text-\[4\.6svw\] { font-size: 4.6svw; } }
@media (max-width: 767px) {
  header > div:first-child { font-size: 13px; line-height: 1.4; letter-spacing: .055em; }
  .marzia-particle-hero > div:first-of-type {
    grid-row: 2;
    align-self: end;
    font-size: 16px;
    line-height: 1.5;
  }
  .marzia-particle-hero > div:first-of-type > span:first-child { font-size: 22px; line-height: 1.2; }
  .marzia-particle-hero > div:nth-of-type(2) {
    position: absolute;
    top: 54dvh;
    left: 1rem;
    right: 1rem;
    width: auto;
    font-size: clamp(22px, 5.8vw, 26px);
    line-height: 1.08;
    letter-spacing: -.01em;
  }
  #selected-work article a > div:last-child { font-size: 14px; line-height: 1.4; }
  #contact > .marzia-footer-content {
    gap: 38px;
  }
  .marzia-footer-copy {
    gap: 22px;
  }
  .marzia-footer-copy p {
    font-size: clamp(28px, 8.3vw, 38px);
    line-height: 1.1;
  }
  .marzia-footer-copy p + p {
    font-size: clamp(17px, 4.8vw, 21px);
    line-height: 1.35;
  }
  .marzia-footer-links {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: 18px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .marzia-footer-icon {
    top: var(--rest-y);
    animation: none;
    transform: translateX(-50%) rotate(-8deg);
    opacity: .5;
  }
}

/* Remove the original cursor, dark tunnel, and speed-line handoff. */
.marzia-cursor-handoff {
  display: none !important;
  height: 0 !important;
}

/* The robot becomes the cursor during its chest-portal transition. */
html.robot-transition-active .mix-blend-difference {
  display: none !important;
}

/* The shared WebGL canvas renders project imagery as well as its old icon field.
   Show it only over the project grid; the footer owns its separate icon layer. */
html:not(.project-canvas-active) [class~="fixed"][class~="-z-1"] {
  visibility: hidden !important;
}

@media (max-width: 1023px) {
  html.unfold-scroll-active [aria-label="Scroll to top"] {
    transform: translateY(-64px);
  }
}