:root {
  --bg: #0C0D0F;
  --panel: #0b0e14;
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-border-hover: rgba(66, 95, 151, 0.32);
  --text-primary: #f2f4f8;
  --text-secondary: rgba(242, 244, 248, 0.66);
  --text-muted: rgba(242, 244, 248, 0.46);
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'DM Mono', monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg);
  overflow-x: hidden;
}

a,
a:active,
a:visited,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
}

.home-shell {
  position: relative;
  width: min(1260px, calc(100vw - 48px));
  margin: 84px auto 0;
  overflow: hidden;
}

.home-shell > * {
  position: relative;
  z-index: 1;
}

.scene-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.scene-lines__hello-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.home-hero {
  width: min(100%, 940px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
}

.home-hero__title {
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.home-hero__subtitle {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(242, 244, 248, 0.78);
}

.home-projects {
  margin-top: 86px;
  width: min(100%, 940px);
  margin-left: auto;
  margin-right: auto;
}

.work-cards {
  margin: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.work-card {
  --card-padding: 24px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --hover-scale: 1;
  --glow-x: 50%;
  --glow-y: 50%;
  --enter-delay: 0ms;
  --foil-angle: 128deg;
  --foil-glow: 138, 162, 245;
  --foil-a: 82, 118, 214;
  --foil-b: 105, 87, 184;
  --foil-c: 74, 124, 214;
  --foil-d: 74, 64, 150;
  --foil-line-a: 146, 168, 252;
  --foil-line-b: 112, 136, 230;
  --foil-line-c: 101, 89, 194;
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #111214;
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  transform: perspective(900px) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--hover-scale));
  transform-style: preserve-3d;
  transition: transform 0.17s ease-out, border-color 0.22s ease, box-shadow 0.24s ease;
  animation: home-card-enter 500ms cubic-bezier(0.22, 1.28, 0.34, 1) var(--enter-delay) both;
  will-change: transform;
}

.work-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(300px circle at var(--glow-x) var(--glow-y), rgba(var(--foil-glow), 0.09) 0%, rgba(var(--foil-a), 0.075) 26%, rgba(var(--foil-c), 0.055) 42%, rgba(var(--foil-c), 0) 74%),
    linear-gradient(calc(var(--foil-angle) - 8deg), rgba(var(--foil-a), 0) 4%, rgba(var(--foil-a), 0.15) 26%, rgba(var(--foil-b), 0.19) 44%, rgba(var(--foil-c), 0.13) 60%, rgba(var(--foil-a), 0) 84%),
    linear-gradient(calc(var(--foil-angle) + 18deg), rgba(var(--foil-d), 0.16) 8%, rgba(var(--foil-d), 0.05) 34%, rgba(var(--foil-d), 0) 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      var(--foil-angle),
      rgba(var(--foil-line-a), 0) 0 22px,
      rgba(var(--foil-line-a), 0.07) 22px 29px,
      rgba(var(--foil-line-b), 0.09) 29px 38px,
      rgba(var(--foil-line-c), 0.05) 38px 46px,
      rgba(var(--foil-line-a), 0) 46px 72px
    ),
    linear-gradient(calc(var(--foil-angle) - 22deg), rgba(var(--foil-a), 0.12) 0%, rgba(var(--foil-a), 0) 40%, rgba(var(--foil-b), 0.12) 64%, rgba(var(--foil-a), 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.work-card:hover,
.work-card:focus-visible {
  --lift: -6px;
  --hover-scale: 1.007;
  border-color: var(--panel-border-hover);
  background: #111214;
  box-shadow:
    0 14px 24px rgba(3, 7, 16, 0.46),
    0 28px 44px rgba(2, 5, 12, 0.56),
    0 40px 62px rgba(2, 4, 10, 0.42);
  outline: none;
}

.work-card:hover::before,
.work-card:focus-visible::before {
  opacity: 0.82;
}

.work-card:hover::after,
.work-card:focus-visible::after {
  opacity: 0.62;
}

.work-cards .work-card:nth-child(1) {
  --enter-delay: 40ms;
  --foil-glow: 124, 154, 240;
  --foil-a: 76, 118, 214;
  --foil-b: 150, 79, 143;
  --foil-c: 176, 96, 66;
  --foil-d: 84, 62, 150;
  --foil-line-a: 140, 165, 252;
  --foil-line-b: 172, 101, 176;
  --foil-line-c: 92, 122, 218;
}

.work-cards .work-card:nth-child(2) {
  --enter-delay: 150ms;
  --foil-glow: 120, 152, 236;
  --foil-a: 68, 118, 220;
  --foil-b: 88, 78, 172;
  --foil-c: 152, 116, 70;
  --foil-d: 64, 88, 160;
  --foil-line-a: 136, 168, 245;
  --foil-line-b: 94, 124, 221;
  --foil-line-c: 132, 99, 178;
}

.work-cards .work-card:nth-child(3) {
  --enter-delay: 270ms;
  --foil-glow: 126, 170, 238;
  --foil-a: 63, 132, 221;
  --foil-b: 89, 84, 182;
  --foil-c: 160, 118, 64;
  --foil-d: 64, 104, 172;
  --foil-line-a: 138, 176, 248;
  --foil-line-b: 96, 140, 224;
  --foil-line-c: 124, 94, 185;
}

.work-card > * {
  position: relative;
  z-index: 2;
}

.work-card__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #f3f5f8;
}

.work-card__description {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  font-style: normal;
  font-weight: 400;
  color: var(--text-secondary);
}

.work-card__media {
  margin-top: auto;
  margin-left: calc(-1 * var(--card-padding));
  margin-right: calc(-1 * var(--card-padding));
  width: calc(100% + (2 * var(--card-padding)));
  height: 224px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
}

.media-image {
  display: block;
  object-fit: contain;
  height: auto;
  max-height: 100%;
  transform: translateY(-2px);
  transition: transform 0.2s ease;
}

.media-image--memories {
  width: 80%;
  max-height: 220px;
}

.media-image--moments {
  width: 100%;
  max-height: 224px;
}

.media-image--stickers {
  width: 118%;
  max-height: 248px;
}

.work-card__media--stickers {
  margin-bottom: calc(-1 * var(--card-padding));
}

.built-grid {
  margin-top: 16px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.built-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  --hover-scale: 1;
  --glow-x: 50%;
  --glow-y: 50%;
  --enter-delay: 0ms;
  --foil-angle: 128deg;
  --foil-glow: 130, 160, 236;
  --foil-a: 82, 118, 214;
  --foil-b: 105, 87, 184;
  --foil-c: 74, 124, 214;
  --foil-d: 74, 64, 150;
  --foil-line-a: 146, 168, 252;
  --foil-line-b: 112, 136, 230;
  --foil-line-c: 101, 89, 194;
  width: 100%;
  min-height: 120px;
  position: relative;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #111214;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  isolation: isolate;
  transform: perspective(900px) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--hover-scale));
  transform-style: preserve-3d;
  transition: transform 0.17s ease-out, border-color 0.22s ease, box-shadow 0.24s ease;
  animation: home-card-enter 480ms cubic-bezier(0.22, 1.28, 0.34, 1) var(--enter-delay) both;
  will-change: transform;
}

.built-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(240px circle at var(--glow-x) var(--glow-y), rgba(var(--foil-glow), 0.08) 0%, rgba(var(--foil-a), 0.065) 26%, rgba(var(--foil-c), 0.045) 42%, rgba(var(--foil-c), 0) 74%),
    linear-gradient(calc(var(--foil-angle) - 8deg), rgba(var(--foil-a), 0) 6%, rgba(var(--foil-a), 0.12) 30%, rgba(var(--foil-b), 0.14) 48%, rgba(var(--foil-c), 0.1) 62%, rgba(var(--foil-a), 0) 86%),
    linear-gradient(calc(var(--foil-angle) + 18deg), rgba(var(--foil-d), 0.13) 10%, rgba(var(--foil-d), 0.04) 36%, rgba(var(--foil-d), 0) 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.built-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      var(--foil-angle),
      rgba(var(--foil-line-a), 0) 0 22px,
      rgba(var(--foil-line-a), 0.06) 22px 29px,
      rgba(var(--foil-line-b), 0.07) 29px 38px,
      rgba(var(--foil-line-c), 0.04) 38px 46px,
      rgba(var(--foil-line-a), 0) 46px 72px
    ),
    linear-gradient(calc(var(--foil-angle) - 22deg), rgba(var(--foil-a), 0.1) 0%, rgba(var(--foil-a), 0) 42%, rgba(var(--foil-b), 0.1) 66%, rgba(var(--foil-a), 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.built-card:hover,
.built-card:focus-visible {
  --lift: -5px;
  --hover-scale: 1.006;
  border-color: var(--panel-border-hover);
  background: #111214;
  box-shadow:
    0 12px 20px rgba(3, 7, 16, 0.42),
    0 24px 34px rgba(2, 5, 12, 0.5),
    0 34px 50px rgba(2, 4, 10, 0.36);
  outline: none;
}

.built-card:hover::before,
.built-card:focus-visible::before {
  opacity: 0.78;
}

.built-card:hover::after,
.built-card:focus-visible::after {
  opacity: 0.56;
}

.built-grid .built-card:nth-child(1) {
  --enter-delay: 180ms;
  --foil-glow: 126, 160, 238;
  --foil-a: 73, 121, 227;
  --foil-b: 99, 77, 188;
  --foil-c: 82, 108, 208;
  --foil-d: 71, 58, 150;
  --foil-line-a: 142, 170, 252;
  --foil-line-b: 103, 131, 226;
  --foil-line-c: 110, 88, 197;
}

.built-grid .built-card:nth-child(2) {
  --enter-delay: 300ms;
  --foil-glow: 134, 176, 246;
  --foil-a: 92, 145, 240;
  --foil-b: 81, 106, 205;
  --foil-c: 70, 129, 219;
  --foil-d: 66, 88, 165;
  --foil-line-a: 152, 188, 255;
  --foil-line-b: 114, 155, 238;
  --foil-line-c: 94, 126, 214;
}

.built-grid .built-card:nth-child(3) {
  --enter-delay: 430ms;
  --foil-glow: 138, 158, 240;
  --foil-a: 88, 121, 233;
  --foil-b: 117, 92, 214;
  --foil-c: 95, 118, 198;
  --foil-d: 92, 74, 176;
  --foil-line-a: 152, 176, 255;
  --foil-line-b: 124, 143, 233;
  --foil-line-c: 129, 103, 219;
}

.built-card > * {
  position: relative;
  z-index: 2;
}

.built-card__copy {
  min-width: 0;
}

.built-card__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #f3f5f8;
}

.built-card__url {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
}

.built-card__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  transition: transform 0.2s ease;
}

.home-links {
  margin-top: 40px;
  margin-bottom: 40px;
  width: min(100%, 940px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.home-links__item {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
  transition: color 0.18s ease;
}

.home-links__item:hover,
.home-links__item:focus-visible {
  color: #ffffff;
  outline: none;
}

@keyframes home-card-enter {
  0% {
    opacity: 0;
    translate: 0 34px;
    scale: 0.993;
  }
  100% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@media (max-width: 1300px) {
  .home-shell {
    width: calc(100vw - 48px);
    margin: 84px auto 0;
  }

  .scene-lines {
    inset: 82px -24px 22px -24px;
  }
}

@media (max-width: 1024px) {
  .scene-lines__hello-image {
    display: none;
  }
}

@media (max-width: 899px) and (min-width: 501px) {
  .home-projects {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 20px;
    align-items: start;
  }

  .work-cards,
  .built-grid {
    display: contents;
  }

  .work-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .work-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .work-card:nth-child(3) {
    grid-column: 1;
    grid-row: 2 / span 3;
  }

  .built-card:nth-child(1) {
    grid-column: 2;
    grid-row: 2;
  }

  .built-card:nth-child(2) {
    grid-column: 2;
    grid-row: 3;
  }

  .built-card:nth-child(3) {
    grid-column: 2;
    grid-row: 4;
  }
}

@media (max-width: 500px) {
  .scene-lines,
  .scene-lines__hello-image {
    display: none;
  }

  .home-shell {
    width: calc(100vw - 48px);
    margin: 120px auto 0;
  }

  .home-hero {
    width: 100%;
    padding-inline: 24px;
  }

  .home-hero__title {
    font-size: 30px;
  }

  .home-hero__subtitle {
    margin-top: 14px;
    font-size: 16px;
  }

  .home-projects {
    margin-top: 120px;
    width: 100%;
  }

  .work-cards {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 14px;
  }

  .work-card {
    height: 400px;
  }

  .built-grid {
    margin-top: 12px;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 12px;
  }

  .home-links {
    margin-top: 40px;
    width: 100%;
    padding-inline: 24px;
    gap: 32px;
  }
}

@media (min-width: 1024px) and (min-height: 760px) {
  html,
  body {
    height: 100%;
  }

  body {
    min-height: 100vh;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-card,
  .media-image,
  .built-card,
  .built-card__icon {
    transition: none;
    animation: none;
    translate: none;
    filter: none;
  }

  .work-card,
  .built-card {
    transform: none;
  }
}