/* ==========================================================================
   Syamil Fahmi — Portfolio
   Custom CSS on top of Tailwind CDN. Tailwind handles utility classes;
   this file defines design tokens (colors, fonts) and small custom
   utilities that aren't plain Tailwind utilities.
   ========================================================================== */

  @view-transition {
    navigation: auto;
  }

   :root {
  /* RGB channel values (space-separated) — required format so Tailwind's
     opacity modifiers like bg-background/50 can work correctly. */
  --color-background: 255 255 255;
  --color-foreground: 0 0 0;
  --color-card: 255 255 255;
  --color-secondary: 245 245 247;
  --color-muted-foreground: 10 10 10;
  --color-accent: 0 77 204;
  --color-accent-foreground: 251 251 254;
  --color-border: 230 230 234;
  --color-ink: 0 77 204;
  --color-ink-foreground: 245 245 247;

  --font-display: "Urbanist", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-behavior: smooth;
}

/* Display typography utility — used on headings throughout the site */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
}

/* Small uppercase label utility — nav links, buttons, eyebrow text */
.eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  display: inline-flex;
}

/* Gradient placeholder used when a project has no cover image yet */
.surface-gradient {
  background-image: linear-gradient(135deg, #2f49c9 0%, #3d5afe 45%, #7c93ff 100%);
  position: relative;
  overflow: hidden;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  width: max-content;
  will-change: transform;
}

.marquee-set {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}