:root {
  --bg: #070709;
  --text: #f4f3ef;
  --muted: #8d8b94;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --accent: #a88bff;
  --font-en: "Inter", system-ui, sans-serif;
  --font-fa: "Vazirmatn", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --hero-mx: 0px;
  --hero-my: 0px;

  --preview-x: 0px;
  --preview-y: 0px;
  --preview-rx: 0deg;
  --preview-ry: 0deg;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(168, 139, 255, .1),
      transparent 36%
    ),
    radial-gradient(
      circle at 85% 60%,
      rgba(81, 139, 255, .045),
      transparent 30%
    ),
    var(--bg);
  font-family: var(--font-en);
  cursor: none;
}

body.rtl {
  font-family: var(--font-fa);
}

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

button {
  font: inherit;
}

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

::selection {
  background: rgba(168, 139, 255, .9);
  color: #070709;
}

/* ==================================================
   BACKGROUND
================================================== */

.noise {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.ambient {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: -1;
  filter: blur(60px);
}

.ambient-a {
  width: 32vw;
  height: 32vw;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(168, 139, 255, .1);
  opacity: .34;
}

.ambient-b {
  width: 22vw;
  height: 22vw;
  right: -5vw;
  top: 55vh;
  background: rgba(88, 151, 255, .06);
  opacity: .35;
}

.grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .11;
  background-image:
    linear-gradient(
      to right,
      rgba(255,255,255,.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,.04) 1px,
      transparent 1px
    );
  background-size: 80px 80px;
  mask-image:
    radial-gradient(
      circle at 50% 35%,
      black,
      transparent 72%
    );
}

/* ==================================================
   NAV
================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;

  height: 82px;
  padding: 0 4vw;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background:
    linear-gradient(
      to bottom,
      rgba(7,7,9,.88),
      transparent
    );

  backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
}

.brand-mark {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 18px rgba(168,139,255,.7);
}

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  gap: 30px;

  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.nav-link {
  color: var(--muted);
  transition: color .3s ease;
}

.nav-link:hover {
  color: var(--text);
}

.lang-button {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);

  padding: 9px 13px;
  border-radius: 999px;

  cursor: none;

  font-size: 11px;
  letter-spacing: .08em;
}

.lang-divider {
  opacity: .3;
  margin: 0 4px;
}

.lang-alt {
  color: var(--muted);
}

/* ==================================================
   SHARED
================================================== */

.section {
  width: min(1220px, calc(100% - 8vw));
  margin: 0 auto;
}

.eyebrow {
  margin: 0 0 18px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.3;

  text-transform: uppercase;
  letter-spacing: .16em;
}

/* ==================================================
   HERO
================================================== */

.hero {
  position: relative;

  min-height: 100svh;

  padding-top: 17vh;
  padding-bottom: 110px;

  display: flex;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 8;
  width: min(900px, 100%);
}

.hero-title {
  margin: 0;

  font-size: clamp(58px, 8.6vw, 132px);
  line-height: .9;
  letter-spacing: -.065em;
  font-weight: 600;
}

.hero-line {
  display: block;
  width: fit-content;
  max-width: 100%;
}

.hero-line-accent {
  color: transparent;
  -webkit-text-stroke: 1px rgba(168,139,255,.62);
  text-shadow:
    0 0 45px rgba(168,139,255,.05);
}

.hero-sub {
  width: min(520px, 100%);
  margin: 35px 0 0;

  color: var(--muted);

  font-size: 15px;
  line-height: 1.85;
}

/* ==================================================
   DESKTOP CODE FRAGMENTS
================================================== */

.hero-fragments {
  position: absolute;

  width: min(470px, 43vw);
  height: min(470px, 43vw);

  right: 0;
  top: 50%;

  transform:
    translate(
      var(--hero-mx),
      calc(-50% + var(--hero-my))
    );

  transition:
    transform .6s var(--ease);

  pointer-events: none;
  z-index: 3;
}

.fragment-glow {
  position: absolute;
  inset: 15%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(168,139,255,.12),
      rgba(168,139,255,.035) 35%,
      transparent 72%
    );

  filter: blur(28px);
}

.fragment {
  position: absolute;

  width: 290px;
  min-height: 130px;

  padding: 18px 18px 16px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(25,24,34,.9),
      rgba(12,12,17,.76)
    );

  box-shadow:
    0 25px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.035);

  backdrop-filter: blur(12px);

  overflow: hidden;

  transition:
    border-color .35s ease,
    box-shadow .35s ease;
}

.fragment::before {
  content: "";

  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(168,139,255,.7),
      transparent
    );

  opacity: .7;
}

.fragment:hover {
  border-color:
    rgba(168,139,255,.26);

  box-shadow:
    0 30px 80px rgba(0,0,0,.46),
    0 0 45px rgba(168,139,255,.07);
}

.fragment-a {
  left: 4%;
  top: 13%;
  transform: rotate(-5deg);

  animation:
    fragmentFloatA
    7s
    ease-in-out
    infinite;
}

.fragment-b {
  right: 0;
  top: 38%;
  transform: rotate(4deg);

  animation:
    fragmentFloatB
    8s
    ease-in-out
    infinite;
}

.fragment-c {
  left: 12%;
  bottom: 5%;

  width: 250px;
  min-height: 112px;

  transform: rotate(3deg);

  animation:
    fragmentFloatC
    9s
    ease-in-out
    infinite;
}

@keyframes fragmentFloatA {
  0%,100% {
    transform:
      translate3d(0,0,0)
      rotate(-5deg);
  }

  50% {
    transform:
      translate3d(0,-9px,0)
      rotate(-3deg);
  }
}

@keyframes fragmentFloatB {
  0%,100% {
    transform:
      translate3d(0,0,0)
      rotate(4deg);
  }

  50% {
    transform:
      translate3d(-8px,8px,0)
      rotate(2deg);
  }
}

@keyframes fragmentFloatC {
  0%,100% {
    transform:
      translate3d(0,0,0)
      rotate(3deg);
  }

  50% {
    transform:
      translate3d(8px,-6px,0)
      rotate(5deg);
  }
}

.fragment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin-bottom: 14px;

  color: rgba(255,255,255,.42);

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fragment-dots {
  display: flex;
  gap: 5px;
}

.fragment-dots i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.22);
}

.fragment-code {
  margin: 0;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 11px;
  line-height: 1.7;

  color:
    rgba(244,243,239,.78);
}

.code-muted {
  color:
    rgba(255,255,255,.35);
}

.code-accent {
  color: #bba8ff;
}

.code-blue {
  color: #8fafef;
}

.code-green {
  color: #94c99d;
}

.fragment-label {
  display: inline-flex;

  margin-top: 12px;
  padding: 5px 8px;

  border:
    1px solid
    rgba(168,139,255,.16);

  border-radius: 999px;

  color:
    rgba(255,255,255,.45);

  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.fragment-cross {
  position: absolute;

  width: 1px;
  height: 100px;

  left: 50%;
  top: 5%;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(168,139,255,.16),
      transparent
    );

  opacity: .5;
  transform: rotate(14deg);
}

.fragment-cross::after {
  content: "";

  position: absolute;

  width: 80px;
  height: 1px;

  left: -40px;
  top: 42px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(168,139,255,.14),
      transparent
    );
}

/* Lightweight mobile-only hero */

.mobile-code-card {
  display: none;
}

/* ==================================================
   SCROLL
================================================== */

.scroll-cue {
  position: absolute;

  left: 0;
  bottom: 5.5vh;

  z-index: 10;

  display: flex;
  align-items: center;
  gap: 12px;

  color: var(--muted);

  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.scroll-line {
  width: 50px;
  height: 1px;

  position: relative;
  overflow: hidden;

  background:
    var(--line-strong);
}

.scroll-line::after {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 17px;
  height: 100%;

  background:
    var(--accent);

  animation:
    scan
    2s
    infinite
    var(--ease);
}

@keyframes scan {
  0% {
    transform: translateX(-20px);
  }

  60%,100% {
    transform: translateX(60px);
  }
}

/* ==================================================
   WORK
================================================== */

.work-section {
  padding:
    20vh 0 13vh;
}

.section-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    6vh;
}

.section-heading h2,
.about-section h2 {
  margin: 0;

  max-width:
    820px;

  font-size:
    clamp(40px,5vw,76px);

  line-height:
    1;

  letter-spacing:
    -.05em;

  font-weight:
    500;
}

.section-index {
  color:
    var(--muted);

  flex-shrink:
    0;

  font-size:
    10px;

  letter-spacing:
    .16em;
}

.project-stack {
  display:
    grid;

  gap:
    82px;
}

.project-card {
  padding-top:
    22px;

  border-top:
    1px solid
    var(--line);
}

.project-preview {
  position:
    relative;

  display:
    block;

  width:
    100%;

  aspect-ratio:
    16 / 8.5;

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    5px;

  background:
    #0b0b0f;

  transform:
    perspective(1200px)
    rotateX(var(--preview-rx))
    rotateY(var(--preview-ry))
    translate(
      var(--preview-x),
      var(--preview-y)
    );

  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease),
    border-color .35s ease;
}

.project-preview:hover {
  border-color:
    var(--line-strong);

  box-shadow:
    0 28px 75px rgba(0,0,0,.42),
    0 0 60px rgba(168,139,255,.08);
}

.project-preview-image {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transform:
    scale(1.001);

  transition:
    transform .7s var(--ease),
    filter .5s var(--ease);
}

.project-preview:hover
.project-preview-image {
  transform:
    scale(1.035);

  filter:
    saturate(1.04)
    contrast(1.03);
}

.window-bar {
  position:
    absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 4;

  height:
    35px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    0 14px;

  border-bottom:
    1px solid
    var(--line);

  background:
    rgba(7,7,9,.56);

  backdrop-filter:
    blur(8px);

  color:
    rgba(255,255,255,.36);

  font-size:
    9px;

  letter-spacing:
    .08em;
}

.window-dots {
  display:
    inline-flex;

  gap:
    6px;

  flex-shrink:
    0;
}

.window-dots i {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.2);
}

.window-url {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.project-count-badge {
  position:
    absolute;

  top:
    49px;

  right:
    16px;

  z-index:
    5;

  padding:
    7px 9px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:
    999px;

  background:
    rgba(7,7,9,.58);

  backdrop-filter:
    blur(8px);

  color:
    rgba(255,255,255,.7);

  font-size:
    9px;

  letter-spacing:
    .12em;
}

.project-info {
  display:
    grid;

  grid-template-columns:
    72px
    minmax(0,1fr)
    auto;

  gap:
    20px;

  align-items:
    start;

  padding-top:
    24px;
}

.project-number,
.project-kind {
  color:
    var(--muted);

  font-size:
    10px;

  text-transform:
    uppercase;

  letter-spacing:
    .13em;
}

.project-info h3 {
  margin:
    3px 0 10px;

  font-size:
    clamp(
      26px,
      3vw,
      40px
    );

  line-height:
    1;

  letter-spacing:
    -.04em;

  font-weight:
    500;
}

.project-description {
  max-width:
    620px;

  margin:
    0;

  color:
    var(--muted);

  font-size:
    14px;

  line-height:
    1.75;
}

.project-link {
  align-self:
    center;

  padding-bottom:
    5px;

  border-bottom:
    1px solid
    var(--line-strong);

  font-size:
    10px;

  text-transform:
    uppercase;

  letter-spacing:
    .13em;

  white-space:
    nowrap;
}

/* ==================================================
   ARCHIVE
================================================== */

.archive-section {
  padding:
    12vh 0 18vh;
}

.filters {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

  margin-bottom:
    25px;
}

.filter {
  padding:
    9px 15px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  background:
    transparent;

  color:
    var(--muted);

  cursor:
    none;

  font-size:
    10px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;
}

.filter.active,
.filter:hover {
  border-color:
    var(--line-strong);

  background:
    rgba(255,255,255,.045);

  color:
    var(--text);
}

.archive-grid {
  border-top:
    1px solid
    var(--line);
}

.archive-item {
  display:
    grid;

  grid-template-columns:
    72px
    minmax(0,1fr)
    220px
    25px;

  gap:
    20px;

  align-items:
    center;

  padding:
    20px 0;

  border-bottom:
    1px solid
    var(--line);

  transition:
    padding .4s var(--ease),
    background .35s ease;
}

.archive-item span,
.archive-item small {
  color:
    var(--muted);

  font-size:
    10px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;
}

.archive-item strong {
  font-size:
    21px;

  font-weight:
    500;
}

.archive-item em {
  color:
    var(--muted);

  font-style:
    normal;

  text-align:
    right;
}

.archive-item:hover {
  padding-left:
    16px;

  padding-right:
    16px;

  background:
    rgba(255,255,255,.025);
}

.archive-item.hidden {
  display:
    none;
}

/* ==================================================
   ABOUT
================================================== */

.about-section {
  padding:
    10vh 0 18vh;
}

.about-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    10vw;

  align-items:
    start;
}

.about-copy > p {
  margin:
    0 0 60px;

  font-size:
    clamp(
      24px,
      3vw,
      41px
    );

  line-height:
    1.18;

  letter-spacing:
    -.03em;
}

.about-meta {
  border-top:
    1px solid
    var(--line);
}

.about-meta div {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    15px 0;

  border-bottom:
    1px solid
    var(--line);

  font-size:
    12px;
}

.about-meta span {
  color:
    var(--muted);
}

.about-meta strong {
  font-weight:
    500;

  text-align:
    right;
}

/* ==================================================
   CONTACT
================================================== */

.connect-section {
  padding:
    10vh 0 8vh;
}

.connect-panel {
  padding:
    7vw 0;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}

.connect-title {
  max-width:
    900px;

  margin:
    0;

  font-size:
    clamp(
      42px,
      5.3vw,
      78px
    );

  line-height:
    1.04;

  letter-spacing:
    -.05em;

  font-weight:
    500;

  text-wrap:
    balance;
}

.contact-stack {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    18px;

  margin-top:
    46px;
}

.email,
.phone,
.github {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  width:
    fit-content;

  padding-bottom:
    6px;

  border-bottom:
    1px solid
    var(--line-strong);
}

.email {
  font-size:
    clamp(
      20px,
      2.6vw,
      36px
    );
}

.phone,
.github {
  font-size:
    15px;
}

.phone-arrow {
  color:
    var(--muted);
}

.github {
  color:
    var(--muted);

  transition:
    color .3s ease;
}

.github:hover {
  color:
    var(--text);
}

/* ==================================================
   FOOTER
================================================== */

.footer {
  width:
    min(
      1220px,
      calc(100% - 8vw)
    );

  margin:
    0 auto;

  padding:
    45px 0 60px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  color:
    var(--muted);

  font-size:
    10px;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;
}

/* ==================================================
   CURSOR
================================================== */

.cursor-dot,
.cursor-ring {
  position:
    fixed;

  pointer-events:
    none;

  z-index:
    100;

  transform:
    translate(-50%,-50%);
}

.cursor-dot {
  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--text);

  box-shadow:
    0 0 18px
    rgba(255,255,255,.5);

  opacity:
    0;
}

.cursor-ring {
  width:
    34px;

  height:
    34px;

  border:
    1px solid
    rgba(255,255,255,.32);

  border-radius:
    50%;

  opacity:
    0;
}

/* ==================================================
   PROGRESS
================================================== */

.page-progress {
  position:
    fixed;

  top:
    50%;

  right:
    12px;

  width:
    1px;

  height:
    120px;

  transform:
    translateY(-50%);

  background:
    rgba(255,255,255,.08);

  z-index:
    30;
}

.page-progress span {
  display:
    block;

  width:
    100%;

  height:
    0;

  background:
    var(--accent);

  box-shadow:
    0 0 12px
    rgba(168,139,255,.45);
}

/* ==================================================
   REVEAL
================================================== */

.reveal-item {
  opacity:
    0;

  transform:
    translateY(28px);

  transition:
    opacity .8s var(--ease),
    transform .8s var(--ease);
}

.reveal-item.is-visible {
  opacity:
    1;

  transform:
    none;
}

/* ==================================================
   RTL
================================================== */

body.rtl {
  direction:
    rtl;
}

body.rtl .nav-links {
  left:
    auto;

  right:
    50%;

  transform:
    translateX(50%);
}

body.rtl .scroll-cue {
  left:
    auto;

  right:
    0;
}

body.rtl .hero-copy,
body.rtl .hero-line,
body.rtl .section-heading,
body.rtl .about-section,
body.rtl .connect-section {
  text-align:
    right;
}

body.rtl .hero-fragments {
  left:
    0;

  right:
    auto;
}

body.rtl .about-meta strong {
  text-align:
    left;
}

body.rtl .archive-item em {
  text-align:
    left;
}

body.rtl .archive-item:hover {
  padding-right:
    16px;

  padding-left:
    16px;
}

body.rtl .project-link,
body.rtl .email,
body.rtl .phone,
body.rtl .github {
  direction:
    ltr;
}

body.rtl .fragment,
body.rtl .mobile-code-card {
  direction:
    ltr;

  text-align:
    left;
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {
  body {
    cursor:
      auto;
  }

  .cursor-dot,
  .cursor-ring {
    display:
      none;
  }

  .nav {
    height:
      70px;

    padding:
      0 5vw;

    backdrop-filter:
      blur(7px);
  }

  .nav-links {
    display:
      none;
  }

  .noise {
    opacity:
      .028;
  }

  .ambient {
    filter:
      blur(36px);

    opacity:
      .16;
  }

  .grid {
    opacity:
      .05;

    background-size:
      62px 62px;
  }

  .hero {
    min-height:
      100svh;

    padding-top:
      105px;

    padding-bottom:
      105px;
  }

  .hero-title {
    font-size:
      clamp(
        48px,
        13.8vw,
        92px
      );

    line-height:
      .95;
  }

  .hero-sub {
    width:
      min(
        440px,
        100%
      );

    font-size:
      14px;
  }

  /* Desktop fragments are hidden.
     The lighter mobile card appears instead. */

  .desktop-fragments {
    display:
      none;
  }

  .mobile-code-card {
    display:
      block;

    position:
      absolute;

    right:
      5%;

    bottom:
      15%;

    width:
      min(
        270px,
        58vw
      );

    padding:
      13px 14px;

    border:
      1px solid
      rgba(168,139,255,.14);

    border-radius:
      12px;

    background:
      rgba(17,16,23,.88);

    box-shadow:
      0 18px 40px
      rgba(0,0,0,.25);

    z-index:
      3;

    opacity:
      .58;
  }

  .mobile-code-top {
    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    margin-bottom:
      9px;

    color:
      rgba(255,255,255,.36);

    font-family:
      "SFMono-Regular",
      Consolas,
      monospace;

    font-size:
      7px;

    letter-spacing:
      .1em;
  }

  .mobile-code-dots {
    display:
      flex;

    gap:
      4px;
  }

  .mobile-code-dots i {
    width:
      4px;

    height:
      4px;

    border-radius:
      50%;

    background:
      rgba(255,255,255,.2);
  }

  .mobile-code {
    margin:
      0;

    font-family:
      "SFMono-Regular",
      Consolas,
      monospace;

    font-size:
      8px;

    line-height:
      1.7;

    color:
      rgba(244,243,239,.68);
  }

  .scroll-cue {
    bottom:
      36px;

    font-size:
      9px;
  }

  .project-info {
    grid-template-columns:
      44px
      minmax(0,1fr);
  }

  .project-link {
    grid-column:
      2;

    justify-self:
      start;
  }

  .about-grid {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }

  .footer {
    align-items:
      flex-start;
  }
}

/* ==================================================
   PHONE
================================================== */

@media (max-width: 600px) {
  html {
    scroll-behavior:
      auto;
  }

  .section {
    width:
      calc(100% - 10vw);
  }

  .noise,
  .grid,
  .ambient-b {
    display:
      none;
  }

  .ambient-a {
    width:
      70vw;

    height:
      70vw;

    top:
      4vh;

    filter:
      blur(55px);

    opacity:
      .11;
  }

  .nav {
    backdrop-filter:
      none;

    background:
      linear-gradient(
        to bottom,
        rgba(7,7,9,.92),
        rgba(7,7,9,0)
      );
  }

  .hero {
    min-height:
      100svh;

    padding-top:
      95px;

    padding-bottom:
      100px;
  }

  .hero-title {
    font-size:
      clamp(
        42px,
        13.5vw,
        74px
      );

    line-height:
      .97;

    letter-spacing:
      -.052em;
  }

  .hero-line-accent {
    width:
      fit-content;

    max-width:
      100%;

    white-space:
      nowrap;

    -webkit-text-stroke:
      .8px
      rgba(168,139,255,.58);
  }

  .hero-sub {
    width:
      100%;

    margin-top:
      26px;

    font-size:
      13px;

    line-height:
      1.85;
  }

  /* One static, lightweight hero card. */

  .mobile-code-card {
    right:
      -4%;

    bottom:
      17%;

    width:
      min(
        235px,
        64vw
      );

    padding:
      11px 12px;

    border-radius:
      10px;

    background:
      rgba(15,14,20,.92);

    box-shadow:
      0 14px 30px
      rgba(0,0,0,.2);

    opacity:
      .34;
  }

  .mobile-code-top {
    margin-bottom:
      7px;

    font-size:
      6px;
  }

  .mobile-code {
    font-size:
      7px;

    line-height:
      1.6;
  }

  .mobile-code-dots {
    gap:
      3px;
  }

  .mobile-code-dots i {
    width:
      4px;

    height:
      4px;
  }

  .scroll-cue {
    bottom:
      28px;

    font-size:
      8px;
  }

  .scroll-line {
    width:
      42px;
  }

  .work-section {
    padding-top:
      16vh;
  }

  .section-heading {
    display:
      block;
  }

  .section-heading h2,
  .about-section h2 {
    font-size:
      clamp(
        38px,
        10vw,
        58px
      );

    line-height:
      1.02;
  }

  .section-index {
    display:
      none;
  }

  .project-stack {
    gap:
      58px;
  }

  /* Disable all card transforms on touch. */

  .project-preview,
  .project-preview:hover {
    aspect-ratio:
      16 / 10;

    transform:
      none !important;

    transition:
      border-color .25s ease;
  }

  .project-preview:hover {
    box-shadow:
      none;
  }

  .project-preview-image,
  .project-preview:hover
  .project-preview-image {
    transform:
      none;

    filter:
      none;

    transition:
      none;
  }

  .window-bar {
    height:
      30px;

    padding:
      0 10px;

    backdrop-filter:
      none;

    background:
      rgba(7,7,9,.72);
  }

  .window-dots {
    gap:
      5px;
  }

  .window-dots i {
    width:
      5px;

    height:
      5px;
  }

  .window-url {
    font-size:
      8px;
  }

  .project-count-badge {
    top:
      40px;

    right:
      10px;

    padding:
      6px 8px;

    font-size:
      8px;

    backdrop-filter:
      none;

    background:
      rgba(7,7,9,.72);
  }

  .project-info {
    gap:
      12px;

    padding-top:
      18px;
  }

  .project-number,
  .project-kind {
    font-size:
      9px;
  }

  .project-info h3 {
    font-size:
      28px;
  }

  .project-description {
    font-size:
      13px;

    line-height:
      1.75;
  }

  .archive-section {
    padding:
      10vh 0 15vh;
  }

  .filter {
    padding:
      8px 12px;
  }

  .archive-item {
    grid-template-columns:
      42px
      minmax(0,1fr)
      20px;

    gap:
      10px;

    padding:
      17px 0;
  }

  .archive-item small {
    display:
      none;
  }

  .archive-item strong {
    min-width:
      0;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    font-size:
      17px;
  }

  .about-section {
    padding:
      8vh 0 14vh;
  }

  .about-copy > p {
    margin-bottom:
      45px;

    font-size:
      24px;

    line-height:
      1.24;
  }

  .about-meta div {
    align-items:
      flex-start;

    font-size:
      11px;
  }

  .about-meta strong {
    max-width:
      58%;
  }

  .connect-section {
    padding:
      8vh 0 6vh;
  }

  .connect-title {
    max-width:
      100%;

    font-size:
      clamp(
        38px,
        10.8vw,
        62px
      );

    line-height:
      1.08;

    letter-spacing:
      -.045em;
  }

  .contact-stack {
    margin-top:
      36px;
  }

  .email {
    font-size:
      clamp(
        18px,
        5vw,
        27px
      );
  }

  .phone,
  .github {
    font-size:
      14px;
  }

  .footer {
    width:
      calc(100% - 10vw);

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      12px;
  }

  body.rtl .mobile-code-card {
    right:
      auto;

    left:
      -4%;
  }
}

/* ==================================================
   SKELETON LOADER
================================================== */

#skeletonLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 0 4vw;
  overflow: hidden;

  background: var(--bg);

  transition:
    opacity .5s ease,
    visibility .5s ease;
}

#skeletonLoader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.skeleton-nav {
  width: 100%;
  max-width: 1220px;
  height: 82px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skeleton-block {
  border-radius: 6px;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .04) 25%,
    rgba(255, 255, 255, .09) 37%,
    rgba(255, 255, 255, .04) 63%
  );

  background-size: 400% 100%;

  animation: skeletonShimmer 1.6s ease infinite;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.skeleton-hero {
  width: 100%;
  max-width: 1220px;
  margin-top: 17vh;
}

.skeleton-line {
  height: clamp(50px, 8vw, 110px);
  width: min(560px, 70%);
  margin-bottom: 18px;
  border-radius: 10px;
}

.skeleton-sub {
  height: 16px;
  width: min(420px, 60%);
  margin-top: 30px;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .skeleton-nav {
    height: 70px;
  }

  .skeleton-hero {
    margin-top: 22vh;
  }

  .skeleton-line {
    height: clamp(40px, 12vw, 70px);
    width: min(320px, 85%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-block {
    animation: none;
  }
}

/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;
  }

  .reveal-item {
    opacity:
      1 !important;

    transform:
      none !important;
  }
}