@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/manrope-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --portfolio-progress-a: #22d3ee;
  --portfolio-progress-b: #6366f1;
  --portfolio-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--portfolio-font) !important;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font-family: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--portfolio-font);
  font-weight: 750;
  text-wrap: balance;
}
p, li, figcaption { text-wrap: pretty; }

.portfolio-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 9999;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--portfolio-progress-a), var(--portfolio-progress-b));
  box-shadow: 0 0 18px color-mix(in srgb, var(--portfolio-progress-a) 52%, transparent);
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--portfolio-progress-a) 68%, white);
  outline-offset: 3px;
}

::selection {
  color: #fff;
  background: color-mix(in srgb, var(--portfolio-progress-b) 82%, #111827);
}

html[lang="vi"] [data-l="en"],
html[lang="en"] [data-l="vi"] { display: none !important; }

[data-portfolio-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}

[data-portfolio-reveal].portfolio-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-portfolio-reveal] { opacity: 1; transform: none; }
}