/* Design C · Showcase: a centered hero over the sculpture, then one panel per
   product in its own color, stacking over the previous one as the page
   scrolls, with the product on a laptop-sized and a phone-sized screen. */
#site .hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(820px, calc(100svh - var(--header-height)));
  padding-block: 48px 72px;
  text-align: center;
}
#site .hero::after {
  content: '';
  position: absolute;
  inset: 10% calc(50% - 50vw) auto;
  z-index: -2;
  height: 80%;
  background:
    radial-gradient(40% 50% at 30% 40%, #ff8b7a24, transparent 70%),
    radial-gradient(35% 45% at 70% 55%, #b6a0ff22, transparent 70%);
  filter: blur(20px);
  animation: aurora 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aurora {
  to {
    transform: translate3d(0, -6%, 0);
    opacity: 0.7;
  }
}
#site .hero-copy {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  justify-items: center;
  max-width: 920px;
}
#site .presence {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
#site .hero-copy::before {
  content: '';
  position: absolute;
  inset: -12% 0;
  z-index: -1;
  background: radial-gradient(closest-side, #0a0b12b3, transparent);
  pointer-events: none;
}
#site .hero-badge {
  padding: 6px 14px 6px 12px;
  border: 1px solid #ffffff1f;
  border-radius: 999px;
  background: #0a0b1299;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#site h1 {
  margin: 28px 0 24px;
  font-size: clamp(38px, 6.2cqw, 84px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.04;
  text-wrap: balance;
}
#site h1 span {
  background: linear-gradient(100deg, #ffb199 0%, var(--color-accent) 40%, #c9b6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#site .intro {
  max-width: 600px;
  font-size: 18px;
  line-height: 1.75;
  color: #c3c1d1;
  text-wrap: balance;
}
#site .hero-actions {
  justify-content: center;
  margin-top: 36px;
}

#site .projects {
  padding-block: 40px 96px;
}
#site .section-heading {
  display: grid;
  justify-items: center;
  margin-bottom: 48px;
  text-align: center;
}
#site .section-heading h2 {
  font-size: clamp(32px, 4.6cqw, 60px);
  font-weight: 600;
  letter-spacing: -0.05em;
}
#site .product-list {
  display: grid;
  gap: 32px;
}
#site .product {
  position: sticky;
  top: calc(var(--header-height) + 16px + var(--stack, 0) * 14px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(32px, 4.4cqw, 64px);
  min-height: min(600px, calc(100svh - var(--header-height) - 64px));
  padding: clamp(32px, 4.4cqw, 64px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--product-accent) 28%, transparent);
  border-radius: 36px;
  background:
    radial-gradient(
      90% 120% at 100% 0%,
      color-mix(in srgb, var(--product-accent) 30%, transparent),
      transparent 60%
    ),
    radial-gradient(
      60% 80% at 0% 100%,
      color-mix(in srgb, var(--product-accent) 12%, transparent),
      transparent 70%
    ),
    #100f18;
  box-shadow: 0 -24px 64px -24px #000d;
}
#site .product:nth-child(even) {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
#site .product:nth-child(even) .product-media {
  order: 2;
}
#site .product:nth-child(even) .product-media .product-phone {
  left: auto;
  right: -6%;
}
#site .product:nth-child(2) {
  --stack: 1;
}
#site .product:nth-child(3) {
  --stack: 2;
}
#site .product:nth-child(4) {
  --stack: 3;
}
#site .product-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
#site .product-name {
  font-size: clamp(34px, 4.6cqw, 60px);
  font-weight: 600;
  letter-spacing: -0.05em;
}
#site .product-text {
  font-size: 17px;
  color: #c3c1d1;
}
#site .product-tags li {
  border-color: color-mix(in srgb, var(--product-accent) 30%, transparent);
  background: #0a0b1266;
}
#site .product-link {
  margin-top: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--product-accent);
  color: #121018;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}
#site .product-link span:last-child {
  color: inherit;
}
#site .product:hover .product-link {
  box-shadow: 0 12px 32px -12px var(--product-accent);
}
#site .product-media {
  position: relative;
  padding-bottom: 6%;
}
#site .product-screen {
  width: 100%;
  border: 1px solid #ffffff24;
  border-top-width: 22px;
  border-radius: 14px;
  box-shadow: 0 40px 80px -24px #000e;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
#site .product-media::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff40;
  box-shadow:
    11px 0 #ffffff40,
    22px 0 #ffffff40;
}
#site .product-media .product-phone {
  display: block;
  position: absolute;
  bottom: 0;
  left: -6%;
  width: 24%;
  border: 6px solid #05060a;
  border-radius: 24px;
  box-shadow: 0 32px 64px -16px #000e;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
#site .product:hover .product-screen {
  transform: translateY(-6px);
}
#site .product:hover .product-phone {
  transform: translateY(-14px) rotate(-2deg);
}
@supports (animation-timeline: view()) {
  #site .product-media {
    animation: media-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
}
@keyframes media-rise {
  from {
    opacity: 0.2;
    transform: translateY(64px) scale(0.96);
  }
}

#site .experience {
  padding-block: 64px;
}
#site .work .project {
  padding: 28px;
  border: 1px solid #ffffff14;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff0a, #ffffff03);
}

#site .closing {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-block: 24px 80px;
  padding: clamp(56px, 8cqw, 112px) 24px;
  overflow: hidden;
  border-radius: 36px;
  text-align: center;
  background:
    radial-gradient(50% 80% at 20% 100%, #ff8b7a40, transparent 70%),
    radial-gradient(50% 80% at 80% 0%, #b6a0ff38, transparent 70%), #13111d;
}
#site .closing h2 {
  font-size: clamp(34px, 5.4cqw, 72px);
  font-weight: 600;
  letter-spacing: -0.05em;
}
#site .closing p {
  max-width: 480px;
  color: #c3c1d1;
}
#site .closing .button {
  margin-top: 12px;
  min-height: 54px;
  padding-inline: 28px;
  font-size: 16px;
}

@container (max-width: 900px) {
  #site .product {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 32px;
  }
  #site .product:nth-child(n) {
    grid-template-columns: 1fr;
  }
  #site .product:nth-child(n) .product-media {
    order: -1;
  }
  #site .product:nth-child(n) .product-media .product-phone {
    left: auto;
    right: 4%;
    width: 22%;
  }
}
@container (max-width: 650px) {
  #site .hero {
    min-height: 0;
    padding-block: 56px 48px;
  }
  #site .presence {
    inset: -10% 0;
  }
  #site h1 {
    font-size: clamp(36px, 10.5cqw, 52px);
  }
  #site .intro {
    font-size: 17px;
  }
  #site .hero-actions {
    width: 100%;
  }
  #site .hero-actions .button {
    flex: 1 1 auto;
  }
  #site .projects {
    padding-block: 24px 56px;
  }
  #site .section-heading {
    margin-bottom: 28px;
  }
  #site .product-list {
    gap: 20px;
  }
  #site .product {
    gap: 24px;
    padding: 20px 20px 28px;
    border-radius: 26px;
  }
  #site .product-screen {
    border-top-width: 16px;
    border-radius: 10px;
  }
  #site .product-media::before {
    top: 5px;
    left: 9px;
    width: 5px;
    height: 5px;
    box-shadow:
      9px 0 #ffffff40,
      18px 0 #ffffff40;
  }
  #site .product-media .product-phone {
    border-width: 4px;
    border-radius: 16px;
  }
  #site .product-link {
    align-self: stretch;
    justify-content: center;
  }
  #site .closing {
    margin-block: 8px 48px;
    border-radius: 26px;
  }
}