用 GPT 5.6 Sol 在一个 Chat 里构建 Awwwards 级网站：完整教程

.hero-image {
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

.hero-revealer {
  animation: heroEnter 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

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

// 伪代码示意 — ScrollTimeline API 或 GSAP ScrollTrigger
const scrub = gsap.timeline({
  scrollTrigger: {
    trigger: '.hero',
    pin: true,
    start: 'top top',
    end: '+=150%',
    scrub: 1
  }
});
scrub.to('.hero-image', { y: -120, scale: 1.05 })
     .to('.hero-title', { x: 60, opacity: 0.8 }, 0)
     .to('.hero-bg', { y: -60 }, 0);

.lookbook-track {
  display: flex;
  width: 400vw; /* 4 cards, each 100vw */
  will-change: transform;
}

.lookbook-card {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
}

const track = document.querySelector('.lookbook-track');
const container = document.querySelector('.lookbook-container');

container.addEventListener('scroll', () => {
  const progress = container.scrollTop / (container.scrollHeight - container.clientHeight);
  track.style.transform = `translateX(-${progress * 75}vw)`; // 4 cards - 1 viewport
});

card.addEventListener('mouseleave', () => {
  layers.forEach(layer => {
    layer.style.transition = 'transform 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
    layer.style.transform = 'translate(0, 0)';
  });
});

card.addEventListener('mouseenter', () => {
  layers.forEach(layer => {
    layer.style.transition = 'none'; // 实时跟随鼠标，不需要过渡
  });
});

@media (prefers-reduced-motion: reduce) {
  .hero-image,
  .lookbook-card,
  .parallax-layer {
    transform: none !important;
    animation: none !important;
  }

  .lookbook-track {
    transform: none !important;
  }

  .scroll-indicator {
    display: none;
  }
}