/* home.css: immersive homepage exhibition layout */
main {
  position: relative;
  overflow: clip;
}

.scroll-progress {
  position: fixed;
  top: 14vh;
  right: clamp(0.45rem, 2vw, 1.1rem);
  width: 2px;
  height: 58vh;
  background: rgba(20, 20, 20, 0.12);
  z-index: 60;
}

.scroll-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1d1d1d, #7b7b7b);
  transform-origin: top;
  transform: scaleY(var(--home-scroll-progress, 0));
  transition: transform 120ms linear;
}

.ambient-layer {
  position: fixed;
  inset: auto auto 8vh -10vw;
  width: 32vw;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
  opacity: 0.18;
}

.ambient-layer--one {
  background: radial-gradient(circle, rgba(100, 120, 255, 0.34), transparent 70%);
  transform: translateY(calc(var(--ambient-shift-one, 0px)));
}

.ambient-layer--two {
  inset: 20vh -8vw auto auto;
  width: 28vw;
  background: radial-gradient(circle, rgba(186, 166, 130, 0.36), transparent 70%);
  transform: translateY(calc(var(--ambient-shift-two, 0px)));
}

.home-intro {
  padding-top: calc(var(--space-8) + 4rem);
  min-height: 68svh;
  display: grid;
  align-content: center;
  gap: var(--space-4);
  transition: transform 200ms ease-out;
  will-change: transform;
}

.artist-name {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  max-width: 8ch;
}

.intro-note {
  max-width: 32ch;
}

.featured-works {
  display: grid;
  gap: var(--space-8);
}

.featured-item {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr;
  gap: clamp(1rem, 5vw, 5rem);
  align-items: center;
  --media-shift: 0px;
  --media-scale: 1;
  --meta-shift: 0px;
  --meta-opacity: 0.68;
}

.featured-item.is-reversed {
  grid-template-columns: 0.7fr 1.2fr;
}

.featured-item.is-reversed .featured-media {
  order: 2;
}

.featured-item.is-reversed .art-meta {
  order: 1;
}

.featured-media {
  overflow: clip;
  border-radius: var(--radius-lg);
  background: var(--surface);
  transform: translate3d(0, var(--media-shift), 0) scale(var(--media-scale));
  transition: transform 220ms ease-out, box-shadow var(--ease);
  will-change: transform;
}

.featured-media img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  transition: transform 900ms ease, filter 500ms ease;
}

.featured-item:hover .featured-media img {
  transform: scale(1.03);
}

.featured-item.is-in-view .featured-media {
  box-shadow: 0 30px 80px rgba(14, 14, 14, 0.11);
}

.featured-item .art-meta {
  opacity: var(--meta-opacity);
  transform: translate3d(0, var(--meta-shift), 0);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}

.home-cta {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}