/* Shared reveal and scroll motion */
.scroll-curtain-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  pointer-events: none;
  contain: layout paint;
}

.scroll-curtain-transition.is-active {
  display: block;
}

.scroll-curtain-transition__surface {
  --curtain-color: #000;
  --curtain-accent: transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--curtain-color);
  border-radius: 48% 48% 0 0 / 9% 9% 0 0;
  transform: translate3d(0, 108%, 0);
  transform-origin: center top;
  will-change: transform, border-radius, clip-path;
}

.scroll-curtain-transition--scan .scroll-curtain-transition__surface {
  background:
    linear-gradient(
      180deg,
      var(--curtain-color) 0%,
      var(--curtain-color) 82%,
      color-mix(in srgb, var(--curtain-accent) 64%, var(--curtain-color)) 100%
    );
}

.scroll-curtain-transition--paper .scroll-curtain-transition__surface {
  background: var(--curtain-color);
}

.scroll-curtain-transition.is-svg-driven .scroll-curtain-transition__surface {
  display: none;
}

.scroll-curtain-transition__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: center top;
  will-change: transform;
}

.scroll-curtain-transition__visual-path {
  fill: var(--curtain-color);
}

.scroll-curtain-transition--page-reveal {
  overflow: hidden;
  background: #030303;
}

.scroll-curtain-transition__page-preview {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #030303;
  pointer-events: none;
  transform-origin: 50% 44%;
  will-change: transform, opacity, clip-path;
  contain: paint;
}

.scroll-curtain-transition__page-preview--next {
  z-index: 2;
  clip-path: inset(100% 0 0 0);
}

.scroll-curtain-transition__page-preview--contact > .contact-section {
  background: #030303;
}

.scroll-curtain-transition__page-preview--contact .contact-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.68fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 6vw, 112px);
  min-height: 100svh;
  padding: clamp(52px, 8vh, 96px) clamp(30px, 7vw, 136px);
  border: 0;
  background: #030303;
}

.scroll-curtain-transition__page-preview--contact .contact-cell-label,
.scroll-curtain-transition__page-preview--contact .contact-cell-status,
.scroll-curtain-transition__page-preview--contact .contact-circular-text,
.scroll-curtain-transition__page-preview--contact .contact-form,
.scroll-curtain-transition__page-preview--contact .contact-social {
  display: none;
}

.scroll-curtain-transition__page-preview--contact .contact-cell-heading,
.scroll-curtain-transition__page-preview--contact .contact-cell-intro {
  grid-row: 1;
  min-height: 0;
  padding: 0;
  border: 0;
}

.scroll-curtain-transition__page-preview--contact .contact-cell-heading {
  grid-column: 1;
  justify-content: center;
  align-self: stretch;
  overflow: visible;
}

.scroll-curtain-transition__page-preview--contact .contact-cell-intro {
  grid-column: 2;
  justify-content: center;
  align-self: center;
  gap: clamp(22px, 3vh, 34px);
}

.scroll-curtain-transition__page-preview--contact .contact-cell-heading .section-kicker {
  margin-bottom: clamp(18px, 3vh, 34px);
}

.scroll-curtain-transition__page-preview--contact .contact-title {
  max-width: none;
  font-size: clamp(6.4rem, 17vw, 18rem);
  line-height: 0.86;
  letter-spacing: -0.08em;
  white-space: nowrap;
}

html[lang="zh-CN"] .scroll-curtain-transition__page-preview--contact .contact-title {
  max-width: none;
  font-size: clamp(6rem, 15vw, 16rem);
  letter-spacing: -0.12em;
}

.scroll-curtain-transition__page-preview--contact .contact-headline {
  max-width: 24ch;
  font-size: clamp(1.08rem, 1.36vw, 1.62rem);
  line-height: 1.78;
}

.scroll-curtain-transition__page-preview--contact .contact-collab {
  max-width: 42ch;
  font-size: clamp(0.72rem, 0.78vw, 0.84rem);
  line-height: 2;
}

.scroll-curtain-transition__page-preview--contact .contact-title,
.scroll-curtain-transition__page-preview--contact .contact-headline,
.scroll-curtain-transition__page-preview--contact .contact-collab {
  opacity: 0;
  transform: translateY(3.4rem);
  filter: blur(18px);
  transition:
    opacity 0.86s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.96s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.96s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.scroll-curtain-transition__page-preview--contact .contact-headline {
  transition-delay: 0.08s;
}

.scroll-curtain-transition__page-preview--contact .contact-collab {
  transition-delay: 0.16s;
}

.scroll-curtain-transition__page-preview--contact.is-copy-visible .contact-title,
.scroll-curtain-transition__page-preview--contact.is-copy-visible .contact-headline,
.scroll-curtain-transition__page-preview--contact.is-copy-visible .contact-collab {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.scroll-curtain-transition__page-preview > .contact-section,
.scroll-curtain-transition__page-preview > .works-section {
  margin: 0 !important;
  width: 100% !important;
  min-height: 100svh !important;
}

@media (max-width: 760px) {
  .scroll-curtain-transition__page-preview--contact .contact-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 34px;
    padding: 48px 22px;
  }

  .scroll-curtain-transition__page-preview--contact .contact-cell-heading,
  .scroll-curtain-transition__page-preview--contact .contact-cell-intro {
    grid-column: 1;
  }

  .scroll-curtain-transition__page-preview--contact .contact-cell-heading {
    grid-row: 1;
  }

  .scroll-curtain-transition__page-preview--contact .contact-cell-intro {
    grid-row: 2;
  }

  .scroll-curtain-transition__page-preview--contact .contact-title,
  html[lang="zh-CN"] .scroll-curtain-transition__page-preview--contact .contact-title {
    font-size: clamp(4.8rem, 22vw, 8.8rem);
  }
}

html.scroll-curtain-locking,
body.scroll-curtain-locking {
  overflow: hidden;
}

.scroll-curtain-transition__mask {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.scroll-curtain-transition__shape {
  visibility: hidden;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 640ms ease, transform 640ms ease;
}

.reveal-delay {
  transition-delay: 120ms;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Child element reveal — triggered by JS per section */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .services-section {
    min-height: auto;
  }

  .services-sticky {
    position: relative;
    min-height: auto;
    overflow: visible;
  }

}

/* Keep content sections fluid; the hero owns the cinematic scroll lock. */
.about-rows,
.services-section,
.works-section,
.contact-section,
.clients-section {
  scroll-snap-stop: normal;
}

/* Text and service motion layer. */
[data-reveal] {
  will-change: opacity, transform, filter;
}

/* Shared section scene motion: keeps each page feeling connected while scrolling. */
#about,
#works,
#contact,
.clients-section {
  --scene-active: 1;
  --scene-y: 0px;
  --scene-blur: 0px;
  --scene-scale: 1;
}

.works-list,
.contact-section .section-head,
.contact-form,
.contact-social,
.clients-content {
  transform: translate3d(0, var(--scene-y), 0) scale(var(--scene-scale));
  opacity: calc(0.72 + var(--scene-active) * 0.28);
  transform-origin: center;
  will-change: opacity, transform;
  transition:
    opacity 180ms linear,
    transform 520ms cubic-bezier(0.19, 1, 0.22, 1);
}

.works-list,
.contact-form,
.contact-social {
  transition-duration: 620ms;
}

#contact .contact-form {
  transform: translate3d(0, calc(var(--scene-y) + var(--contact-form-y)), 0) scale(var(--scene-scale));
  opacity: var(--contact-form-alpha);
}

#contact .contact-social {
  transform: translate3d(0, calc(var(--scene-y) + var(--contact-social-y)), 0) scale(var(--scene-scale));
  opacity: var(--contact-social-alpha);
}