/* ── Works / Catalog ── */
#catalog {
  background: var(--ink);
  padding: var(--section-pad) var(--gutter);
  position: relative;
}

.catalog-header {
  margin-bottom: clamp(48px, 6vw, 80px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.catalog-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(72px, 10vw, 160px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  color: var(--white);
}

.catalog-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--stone);
  max-width: 220px;
  line-height: 1.6;
  padding-bottom: 12px;
}

/* ── Drifting stage ── */
.works-stage {
  position: relative;
  height: clamp(560px, 65vw, 820px);
  perspective: 1600px;
}

/* Floater: absolute position + slow drift animation */
.work-float {
  position: absolute;
  width: clamp(180px, 22vw, 280px);
  will-change: transform;
  z-index: 1;
}

/* Positions for each widget (desktop) */
.work-float-1 { top: 2%;  left: 4%;  animation: drift-1 14s ease-in-out infinite; }
.work-float-2 { top: 8%;  right: 6%; animation: drift-2 16s ease-in-out infinite; }
.work-float-3 { bottom: 4%; left: 22%; animation: drift-3 18s ease-in-out infinite; }
.work-float-4 { bottom: 8%; right: 16%; animation: drift-4 15s ease-in-out infinite; }

/* Independent drift keyframes — different paths/phases */
@keyframes drift-1 {
  0%, 100% { transform: translate3d(0,  0,    0) rotate(-2deg); }
  33%      { transform: translate3d(18px, -22px, 0) rotate(0.5deg); }
  66%      { transform: translate3d(-10px, 14px, 0) rotate(-3deg); }
}
@keyframes drift-2 {
  0%, 100% { transform: translate3d(0,  0,    0) rotate(2.5deg); }
  40%      { transform: translate3d(-20px, 18px, 0) rotate(0deg); }
  75%      { transform: translate3d(10px, -16px, 0) rotate(3.5deg); }
}
@keyframes drift-3 {
  0%, 100% { transform: translate3d(0,  0,    0) rotate(-1deg); }
  30%      { transform: translate3d(22px, 12px, 0) rotate(-3deg); }
  70%      { transform: translate3d(-14px, -20px, 0) rotate(1.5deg); }
}
@keyframes drift-4 {
  0%, 100% { transform: translate3d(0,  0,    0) rotate(3deg); }
  35%      { transform: translate3d(-16px, -14px, 0) rotate(1deg); }
  72%      { transform: translate3d(12px, 18px, 0) rotate(4deg); }
}

/* ── Widget card ── */
.work {
  --reveal-y: 46px;
  --reveal-scale: 0.96;
  --scroll-lift: 0px;
  --hover-lift: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-delay: 220ms;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--milk);
  border-radius: 14px;
  padding: 12px;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  transform-style: preserve-3d;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 30px 60px -30px rgba(0,0,0,0.7),
    0 14px 28px -14px rgba(0,0,0,0.5);
  opacity: 0;
  filter: blur(16px) saturate(0.82);
  clip-path: inset(8% 0 14% 0 round 14px);
  transform:
    translate3d(0, calc(var(--reveal-y) + var(--scroll-lift) + var(--hover-lift)), 0)
    scale(var(--reveal-scale))
    rotateY(var(--tilt-x))
    rotateX(var(--tilt-y));
  transition:
    transform 0.7s var(--ease-spring),
    opacity 0.6s var(--ease-out),
    filter 0.85s var(--ease-out),
    clip-path 0.9s var(--ease-out),
    box-shadow 0.6s var(--ease-out),
    background 0.4s var(--ease-out);
  will-change: transform, opacity, filter;
}

.work.revealed {
  --reveal-y: 0px;
  --reveal-scale: 1;
  opacity: 1;
  filter: blur(0) saturate(1);
  clip-path: inset(0 0 0 0 round 14px);
}

@keyframes work-fallback-in {
  to { opacity: 1; filter: blur(0) saturate(1); clip-path: inset(0 0 0 0 round 14px); }
}
.work {
  animation: work-fallback-in 0.7s var(--ease-spring) 1.2s forwards;
}

/* Paper grain */
.work::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.05;
  pointer-events: none;
  border-radius: inherit;
}

.work::before {
  content: '';
  position: absolute;
  inset: -40% -70%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 34%, rgba(255,255,255,0.58) 50%, transparent 66%);
  opacity: 0;
  transform: translateX(-130%) skewX(-18deg);
}

.work.revealed::before {
  animation: shimmer-sweep 1.2s var(--ease-out) both;
  animation-delay: var(--shine-delay);
  opacity: 1;
}

/* Head */
.work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
  position: relative;
  z-index: 2;
}

.work-num {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.work-tag {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Photo frame */
.work-frame {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--cream);
  aspect-ratio: 4/5;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.06),
    inset 0 1px 3px rgba(0,0,0,0.08);
  z-index: 1;
}

.work-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.04) brightness(0.98);
  transition: filter 0.8s var(--ease-out), transform 1.1s var(--ease-out);
  will-change: filter, transform;
  transform: translate3d(0, var(--image-drift, 0px), 0) scale(1.02);
}

.work-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.18));
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}

/* Footer */
.work-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6px 4px;
  margin-top: 2px;
  border-top: 1px solid rgba(20,20,18,0.1);
  position: relative;
  z-index: 2;
}

.work-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform 0.5s var(--ease-spring), letter-spacing 0.5s var(--ease-out);
}

.work-arrow {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  transition: transform 0.5s var(--ease-spring);
  display: inline-block;
}

/* ── Hover ── */
@media (hover: hover) {
  .work-float:hover {
    animation-play-state: paused;
    z-index: 10;
  }

  .work:hover {
    --hover-lift: -8px;
    background: var(--white);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.9) inset,
      0 50px 80px -20px rgba(0,0,0,0.75),
      0 20px 40px -10px rgba(0,0,0,0.55);
  }

  .work:hover .work-frame img {
    filter: grayscale(0) contrast(1.05) brightness(1) saturate(1.12);
    transform: translate3d(0, var(--image-drift, 0px), 0) scale(1.07);
  }

  .work:hover .work-frame::after { opacity: 0.4; }

  .work:hover .work-label {
    transform: translateX(2px);
    letter-spacing: 0.28em;
  }

  .work:hover .work-arrow {
    transform: translateX(6px);
  }
}

/* ── Tablet ── */
@media (max-width: 900px) {
  .works-stage { height: clamp(720px, 110vw, 1100px); }
  .work-float { width: clamp(180px, 36vw, 260px); }
  .work-float-1 { top: 1%;  left: 3%;   }
  .work-float-2 { top: 6%;  right: 4%;  }
  .work-float-3 { bottom: 6%; left: 8%; }
  .work-float-4 { bottom: 2%; right: 6%; }
}

/* ── Mobile: stack normally, drop animations ── */
@media (max-width: 560px) {
  .works-stage {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
  }
  .work-float {
    position: relative;
    width: 86%;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    animation: none !important;
  }
  .work-float:nth-child(odd)  { align-self: flex-start; transform: rotate(-1.5deg); }
  .work-float:nth-child(even) { align-self: flex-end;   transform: rotate(1.5deg); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .work-float { animation: none !important; }
}