/* Works keeps the downloaded reference layout; these rules only apply the
   purple skin and complete the reference entrance when running locally. */
.works-page {
  background-color: var(--background);
}

.works-page .layout {
  opacity: 0 !important;
  background-color: var(--background);
  transition: opacity 700ms ease !important;
}

.works-page.is-loaded .layout {
  opacity: 1 !important;
}

/* Reference-style hero reveal: every character rotates in on its own beat. */
.works-page:not(.is-loaded) .hero-portrait-title .perspective > div {
  opacity: 0 !important;
  transform: translate3d(5vw, 20vh, -15vw) rotateY(90deg) !important;
}

.works-page.is-loaded .hero-portrait-title .perspective > div {
  animation: works-letter-in 1050ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--letter-delay, 0ms);
}

.hero-portrait-name:not(._02) .perspective:nth-child(1) > div { --letter-delay: 0ms; }
.hero-portrait-name:not(._02) .perspective:nth-child(2) > div { --letter-delay: 90ms; }
.hero-portrait-name:not(._02) .perspective:nth-child(3) > div { --letter-delay: 180ms; }
.hero-portrait-name:not(._02) .perspective:nth-child(4) > div { --letter-delay: 270ms; }
.hero-portrait-name:not(._02) .perspective:nth-child(5) > div { --letter-delay: 360ms; }
.hero-portrait-name:not(._02) .perspective:nth-child(6) > div { --letter-delay: 450ms; }

.hero-portrait-name._02 .perspective:nth-child(1) > div { --letter-delay: 500ms; }
.hero-portrait-name._02 .perspective:nth-child(2) > div { --letter-delay: 535ms; }
.hero-portrait-name._02 .perspective:nth-child(3) > div { --letter-delay: 570ms; }
.hero-portrait-name._02 .perspective:nth-child(4) > div { --letter-delay: 605ms; }
.hero-portrait-name._02 .perspective:nth-child(5) > div { --letter-delay: 640ms; }
.hero-portrait-name._02 .perspective:nth-child(6) > div { --letter-delay: 675ms; }
.hero-portrait-name._02 .perspective:nth-child(7) > div { --letter-delay: 710ms; }
.hero-portrait-name._02 .perspective:nth-child(8) > div { --letter-delay: 745ms; }
.hero-portrait-name._02 .perspective:nth-child(9) > div { --letter-delay: 780ms; }

.hero-portrait-surname .perspective:nth-child(1) > div { --letter-delay: 820ms; }
.hero-portrait-surname .perspective:nth-child(2) > div { --letter-delay: 910ms; }
.hero-portrait-surname .perspective:nth-child(3) > div { --letter-delay: 1000ms; }
.hero-portrait-surname .perspective:nth-child(4) > div { --letter-delay: 1090ms; }
.hero-portrait-surname .perspective:nth-child(5) > div { --letter-delay: 1180ms; }

@keyframes works-letter-in {
  from {
    opacity: 0;
    transform: translate3d(5vw, 20vh, -15vw) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg);
  }
}

.works-page .text-work-link {
  color: var(--grey-101);
}

.works-page .title-work-image-mask {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px !important;
  overflow: hidden;
}

.works-page .title-work-image-wrap,
.works-page .title-work-image {
  border-radius: 20px !important;
}

.works-page .title-work-image {
  width: 100%;
  height: auto;
  max-height: 100%;
  position: static;
  display: block;
  object-fit: contain !important;
  object-position: center;
  overflow: hidden;
}

/* A tight frame keeps all four Elysee corners rounded during interactions. */
.works-page .project-elysee .elysee-image-clip {
  width: auto;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1402 / 1122;
  border-radius: 20px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 20px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  flex: 0 0 auto;
}

.works-page .project-elysee .elysee-image-clip .title-work-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  max-height: none;
  position: static !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  transform: none !important;
}

.works-page .title-work-bg {
  background-color: rgba(155, 92, 255, .66);
}

.works-page .fotter,
.works-page .container-6.is-flip {
  background-color: var(--background);
}

.works-page .btn-parent.ab-btm.bg-yellow {
  border-color: var(--white);
  background-color: var(--white);
}

@media (pointer: coarse), (max-width: 767px) {
  html,
  body,
  body.works-page,
  .works-page .layout,
  .works-page .hero-portrait-section,
  .works-page .content-section.align-vertical-center,
  .works-page .cms,
  .works-page .text-work-grid,
  .works-page .collection-item-2,
  .works-page .text-work-link {
    background-color: #28153b !important;
  }
}