:root {
  --black: #040304;
  --violet: #5d596d;
  --muted: #757575;
  --page: #fff;
  --ink: #000;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--page); font-family: "Kode Mono", monospace; font-weight: 400; font-synthesis: none; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.intro-running { overflow: hidden; }
.intro-running .identity { position: fixed; z-index: 100; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); animation: identityIntro .7s cubic-bezier(.76, 0, .24, 1) 1.1s forwards; }
.intro-running .identity-dot { position: relative; z-index: 101; background: #0637ff; animation: introDot 1.8s ease-in-out both; will-change: transform, filter, opacity; }
.intro-running .portfolio-header nav,
.intro-running .portfolio-main,
.intro-running .portfolio-footer { visibility: hidden; opacity: 0; }
.intro-complete .portfolio-header nav { animation: contentIntro .55s cubic-bezier(.22, 1, .36, 1) both; }
.intro-complete .portfolio-main { animation: contentIntro .55s cubic-bezier(.22, 1, .36, 1) .06s both; }
.intro-complete .portfolio-footer { animation: contentIntro .55s cubic-bezier(.22, 1, .36, 1) .12s both; }

@keyframes identityIntro {
  from { top: 50%; transform: translate(-50%, -50%); }
  to { top: 40px; transform: translate(-50%, 0); }
}

@keyframes introDot {
  0%, 10% { opacity: 1; transform: scale(1); filter: blur(4px); }
  18% { transform: scale(.68); }
  27% { transform: scale(1.18); }
  36% { transform: scale(.74); }
  45% { transform: scale(1.2); }
  54% { transform: scale(.8); }
  64%, 76% { opacity: 1; transform: scale(1); filter: blur(4px); }
  94% { opacity: 1; transform: scale(180); filter: blur(7px); }
  100% { opacity: 0; transform: scale(220); filter: blur(11px); }
}

@keyframes contentIntro {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.portfolio-header { position: relative; height: 239px; padding-top: 40px; text-transform: uppercase; }
.identity { display: flex; width: max-content; align-items: center; gap: 16px; margin: 0 auto; font-size: 24px; letter-spacing: 1.92px; }
.identity img { width: 27px; height: 27px; margin: -8px; }
.identity-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: var(--violet); filter: blur(4px); transition: background-color .2s ease, transform .2s ease; }
.identity:hover .identity-dot, .identity:focus-visible .identity-dot, .identity:active .identity-dot { background: #0637ff; transform: scale(1.15); }
.portfolio-header nav { display: flex; justify-content: center; gap: 24px; margin-top: 28px; }
.portfolio-header nav a { display: flex; min-width: 144px; justify-content: center; padding: 0 36px; font-size: 16px; letter-spacing: 1.28px; white-space: nowrap; }
.portfolio-header nav a.active { color: #fff; background: linear-gradient(90deg, #fff, var(--violet) 55.288%, var(--black)); }
.portfolio-header nav a:hover, .portfolio-header nav a:focus-visible { color: #fff; background: linear-gradient(90deg, #fff, #0637ff 55.288%, var(--black)); outline: none; }

.portfolio-main { height: 575px; padding: 0 50px; }
.project-strip { display: grid; width: 1341px; grid-template-columns: repeat(4, 335px); margin: 0; border-top: 1px solid var(--ink); }
.work-card { position: relative; min-width: 0; text-transform: uppercase; }
.work-image { width: 336px; height: 355px; padding: 10px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transition: background-color .2s ease; }
.work-card:last-child .work-image { border-right: 0; }
.work-image img { display: block; width: 100%; height: 335px; border: 1px solid var(--ink); border-radius: 48px; object-fit: cover; transition: filter .25s ease, transform .25s ease; }
.work-image--rendered img { border: 0; }
.work-card:hover .work-image img, .work-card:focus-visible .work-image img { filter: grayscale(1); transform: scale(.985); }
.work-card:hover .work-image, .work-card:focus-visible .work-image { background: #0637ff; }
.work-meta { display: flex; height: 30px; align-items: center; gap: 16px; padding: 0 11px; color: var(--muted); font-size: 14px; letter-spacing: 1.12px; white-space: nowrap; }
.work-meta i { position: relative; width: 11px; height: 11px; flex: 0 0 11px; }
.work-meta i::before { position: absolute; top: -6px; left: -6px; width: 23px; height: 23px; background: url("assets/home-v2/meta-dot.svg") center/contain no-repeat; content: ""; }
.work-card h2 { width: 262px; margin: 0 0 0 11px; font-size: 16px; font-weight: 500; line-height: normal; letter-spacing: 1.28px; }
.work-card:not(:first-child)::after { position: absolute; top: 355px; left: 0; width: 1px; height: 100px; background: var(--ink); content: ""; }

.portfolio-footer { position: relative; height: 446px; overflow: hidden; background: linear-gradient(90deg, var(--black) 0%, #0637ff 52%, var(--black) 100%); color: #fff; text-transform: uppercase; }
.contact-block { position: absolute; top: 66px; left: 50%; display: flex; transform: translateX(-50%); flex-direction: column; align-items: center; gap: 14px; }
.contact-block h2 { width: 100%; margin: 0; color: rgb(211 211 216 / 68%); font-size: 48px; font-weight: 500; line-height: normal; letter-spacing: 3.84px; text-align: center; white-space: nowrap; }
.contact-links { display: flex; gap: 64px; font-size: 16px; letter-spacing: 1.28px; white-space: nowrap; }
.contact-links a { transition: color .2s ease; }
.contact-links a:hover, .contact-links a:focus-visible { color: #c8d5ff; outline: none; }
.theme-switch { position: absolute; bottom: 45px; left: 50%; border: 0; padding: 0; transform: translateX(-50%); color: rgb(211 211 216 / 62%); background: none; font: 400 16px "Kode Mono", monospace; letter-spacing: 1.28px; text-transform: uppercase; cursor: pointer; }
.theme-switch strong { color: rgb(255 255 255 / 78%); font-weight: 700; }

.dark-theme { --page: #040304; --ink: #fff; }
.dark-theme .portfolio-header nav a.active { color: #040304; background: linear-gradient(90deg, #040304, #8b879c 55.288%, #fff); }
.dark-theme .portfolio-header nav a:hover, .dark-theme .portfolio-header nav a:focus-visible { color: #fff; background: linear-gradient(90deg, #040304, #0637ff 55.288%, #fff); }
.dark-theme .work-meta { color: #aaa; }
.dark-theme .work-meta i, .dark-theme .identity img { filter: invert(1); }

@media (max-width: 760px) {
  @keyframes identityIntro {
    from { top: 50%; transform: translate(-50%, -50%); }
    to { top: 28px; transform: translate(-50%, 0); }
  }

  .portfolio-header { height: 250px; padding: 28px 20px 0; }
  .identity { gap: 9px; font-size: 14px; letter-spacing: .9px; white-space: nowrap; }
  .identity img { width: 17px; height: 17px; margin: -5px; }
  .identity-dot { width: 7px; height: 7px; flex-basis: 7px; filter: blur(3px); }
  .portfolio-header nav { gap: 2px; margin-top: 30px; }
  .portfolio-header nav a { min-width: auto; padding: 3px 14px; font-size: 12px; letter-spacing: .8px; }
  .portfolio-main { height: auto; padding: 0 20px 100px; }
  .project-strip { display: grid; width: 100%; grid-template-columns: 1fr; gap: 48px; border-top: 1px solid var(--ink); }
  .work-card { border-right: 0; border-bottom: 1px solid var(--ink); padding-bottom: 24px; }
  .work-card::after { display: none; }
  .work-image { width: 100%; height: auto; padding: 10px 0; border-bottom: 1px solid var(--ink); }
  .work-image img { width: 100%; height: min(84vw, 420px); }
  .work-meta { padding: 0; gap: 10px; overflow: hidden; font-size: 11px; letter-spacing: .7px; }
  .work-meta i { width: 8px; height: 8px; flex-basis: 8px; }
  .work-meta i::before { top: -4px; left: -4px; width: 16px; height: 16px; }
  .work-card h2 { width: 90%; margin-left: 0; font-size: 14px; }
  .portfolio-footer { height: 500px; }
  .contact-block { top: 72px; width: calc(100% - 40px); }
  .contact-block h2 { font-size: 28px; letter-spacing: 2px; white-space: normal; }
  .contact-links { flex-direction: column; align-items: center; gap: 24px; font-size: 12px; letter-spacing: .6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .work-image img { transition: none; }
  .intro-running .identity,
  .intro-running .identity-dot,
  .intro-complete .portfolio-header nav,
  .intro-complete .portfolio-main,
  .intro-complete .portfolio-footer { animation: none; }
}