.works-section {
  --bone-opacity: .095;
  position: relative;
  min-height: 100svh;
  padding: 0;
  background: #d9d7d5;
  overflow: hidden;
}

.hone-rain {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hone-piece {
  position: absolute;
  opacity: 0;
}

.hone-piece--background {
  width: clamp(300px, var(--size), 780px);
  filter: grayscale(1);
  transform: translateY(-90px) rotate(var(--end-rotate));
}

.hone-rain.is-active .hone-piece--background {
  animation: hone-background-in .9s cubic-bezier(.22, 1, .36, 1) var(--delay) forwards;
}

.hone-piece--intro {
  top: -260px;
  width: var(--intro-size);
  filter: grayscale(1);
  transform: translateY(0) rotate(var(--start-rotate));
}

.hone-rain.is-active .hone-piece--intro {
  animation: hone-intro-fall .85s cubic-bezier(.22, .86, .3, 1) var(--delay) forwards;
}

.hone-rain.is-impact .hone-piece--intro {
  animation: hone-impact-scatter .7s cubic-bezier(.3, .02, .65, 1) forwards;
}

@keyframes hone-background-in {
  to {
    opacity: var(--bone-opacity);
    transform: translateY(0) rotate(var(--end-rotate));
  }
}

@keyframes hone-intro-fall {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(var(--start-rotate));
  }
  12% { opacity: var(--bone-opacity); }
  78% {
    opacity: var(--bone-opacity);
    transform: translateY(var(--fall-y)) rotate(var(--land-rotate));
  }
  100% {
    opacity: var(--bone-opacity);
    transform: translateY(var(--fall-y)) rotate(var(--land-rotate));
  }
}

@keyframes hone-impact-scatter {
  0% {
    opacity: var(--bone-opacity);
    transform: translateY(var(--fall-y)) rotate(var(--land-rotate));
  }
  30% { opacity: var(--bone-opacity); }
  100% {
    opacity: 0;
    transform: translate(var(--scatter-x), calc(var(--fall-y) + var(--scatter-y))) rotate(var(--scatter-rotate));
  }
}

.works-section .section-number {
  position: absolute;
  top: -5%;
  left: 1%;
  z-index: 2;
  margin: 0;
  color: rgba(248, 248, 244, .72);
  font-size: clamp(180px, 18vw, 310px);
  line-height: 1;
}

.works-title {
  position: absolute;
  top: 5%;
  left: 13%;
  z-index: 4;
  width: 3.5em;
  height: 1.25em;
  margin: 0;
  font-size: clamp(90px, 8vw, 145px) !important;
  line-height: 1;
}

.works-title span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  opacity: 0;
  transform: translate(var(--start-x), -260px) rotate(var(--rotate));
}

.works-section.is-active .works-title span {
  animation: works-letter-drop .75s cubic-bezier(.22, 1, .36, 1) calc(1000ms + var(--delay)) forwards;
}

@keyframes works-letter-drop {
  70% {
    opacity: 1;
    transform: translate(0, 10px) rotate(var(--settle-rotate));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--settle-rotate));
  }
}

/* The former bone-shaped single portfolio is retained in HTML only as a fallback. */
.work-portfolio {
  display: none !important;
}

.works-gallery {
  position: absolute;
  top: 31%;
  left: 50%;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(18px, 2.4vw, 42px);
  width: min(86vw, 1500px);
  transform: translateX(-50%);
}

.project-card {
  --card-rest: rotate(0deg);
  overflow: hidden;
  border: 1px solid rgba(70, 65, 59, .12);
  border-radius: 14px;
  background: rgba(250, 249, 246, .96);
  box-shadow: 0 16px 34px rgba(62, 58, 53, .12);
  opacity: 0;
  transform: translateY(-230px) var(--card-rest);
  transition: transform .35s ease, box-shadow .35s ease;
}

.project-card--left { --card-rest: rotate(-2.4deg); }
.project-card--center { --card-rest: translateY(-16px); }
.project-card--right { --card-rest: rotate(2.2deg); }

.works-section.is-active .project-card--left {
  animation: project-card-drop .8s cubic-bezier(.22, .86, .28, 1.08) 1200ms forwards;
}

.works-section.is-active .project-card--center {
  animation: project-card-drop .8s cubic-bezier(.22, .86, .28, 1.08) 1360ms forwards;
}

.works-section.is-active .project-card--right {
  animation: project-card-drop .8s cubic-bezier(.22, .86, .28, 1.08) 1520ms forwards;
}

@keyframes project-card-drop {
  0% {
    opacity: 0;
    transform: translateY(-230px) var(--card-rest);
  }
  72% {
    opacity: 1;
    transform: translateY(13px) var(--card-rest);
  }
  88% {
    opacity: 1;
    transform: translateY(-6px) var(--card-rest);
  }
  100% {
    opacity: 1;
    transform: var(--card-rest);
  }
}

.works-section.is-impact .works-gallery {
  animation: works-gallery-impact .32s ease-out;
}

@keyframes works-gallery-impact {
  0%, 100% { margin-top: 0; }
  40% { margin-top: 10px; }
  70% { margin-top: -4px; }
}

.works-section.is-settled .project-card {
  opacity: 1;
  animation: none;
  transform: var(--card-rest);
}

.project-card:hover {
  z-index: 2;
  transform: translateY(-22px) rotate(0);
  box-shadow: 0 24px 46px rgba(62, 58, 53, .18);
}

.works-section.is-settled .project-card:hover {
  transform: translateY(-22px) rotate(0);
}

.project-card__image {
  margin: clamp(12px, 1.15vw, 20px);
  margin-bottom: 0;
  overflow: hidden;
  border: 1px solid rgba(70, 65, 59, .14);
  border-radius: 10px;
  aspect-ratio: 16 / 10;
  background: #eceae5;
}

.project-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  transition: transform .5s ease;
}

.project-card__image--center img { object-position: center top; }
.project-card__image--right img { object-position: right top; }
.project-card:hover .project-card__image img { transform: scale(1.035); }

.project-card__body {
  padding: clamp(16px, 1.6vw, 28px);
}

.project-card__body h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 1.55vw, 29px);
  line-height: 1.2;
}

.project-card__body p {
  margin: 0 0 clamp(18px, 2vw, 32px);
  color: #5e5a55;
  font-size: clamp(12px, .9vw, 16px);
  line-height: 1.5;
}

.project-card__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(70, 65, 59, .18);
  color: #111;
  font-size: clamp(13px, .95vw, 16px);
  text-decoration: none;
}

.project-card__link span {
  font-size: 24px;
  transition: transform .25s ease;
}

.project-card__link:hover span { transform: translateX(5px); }

.works-controls {
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 38px;
  transform: translateX(-50%);
}

.works-dots {
  display: flex;
  gap: 10px;
}

.works-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(17, 17, 17, .3);
}

.works-dots span.is-current {
  background: #111;
  transform: scale(1.25);
}

.works-next {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(17, 17, 17, .14);
  border-radius: 50%;
  background: rgba(250, 249, 246, .92);
  color: #111;
  font-size: 22px;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}

.works-next:hover {
  background: #fff;
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .works-section { min-height: 820px; }
  .works-section .section-number { top: -1%; left: -2%; font-size: 190px; }
  .works-title { top: 4%; left: 11%; font-size: clamp(76px, 12vw, 108px) !important; }

  .works-gallery {
    top: 29%;
    left: 0;
    display: flex;
    gap: 22px;
    width: 100%;
    padding: 18px 9vw 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none;
  }

  .works-gallery::-webkit-scrollbar { display: none; }
  .project-card {
    flex: 0 0 min(72vw, 480px);
    scroll-snap-align: center;
    transform: none;
  }
  .project-card--center { transform: none; }
  .project-card:hover { transform: translateY(-8px); }
  .works-controls { bottom: 4%; }
}

@media (max-width: 600px) {
  .works-section { min-height: 720px; }
  .works-section .section-number { top: 0; font-size: 145px; }
  .works-title { top: 4%; left: 11%; font-size: 70px !important; }
  .works-gallery { top: 26%; padding-inline: 8vw; }
  .project-card { flex-basis: 84vw; }
  .project-card__body { padding: 16px; }
  .project-card__body h3 { font-size: 21px; }
  .project-card__body p { font-size: 12px; margin-bottom: 16px; }
  .works-controls { bottom: 3%; gap: 24px; }
  .works-next { width: 44px; height: 44px; }
}

@media (min-width: 901px) and (max-height: 700px) {
  .works-gallery { top: 30%; width: min(80vw, 1260px); }
  .project-card__image { aspect-ratio: 16 / 8.5; }
  .project-card__body { padding-block: 14px; }
  .project-card__body p { margin-bottom: 12px; }
  .works-controls { bottom: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .hone-piece--intro { display: none; }
  .hone-rain.is-active .hone-piece--background,
  .works-section.is-active .works-title span,
  .works-section.is-active .project-card,
  .works-section.is-impact .works-gallery {
    opacity: 1;
    animation: none;
  }
  .works-section.is-active .works-title span {
    transform: translate(0, 0) rotate(var(--settle-rotate));
  }
  .works-section.is-active .project-card {
    transform: var(--card-rest);
  }
}