/* Scroll composition. Content remains visible until the controller is ready. */
[data-scroll-scene] { --scene-progress: .5; --scene-shift: 0px; }
[data-parallax] { translate: 0 var(--parallax-y, 0px); }

/* Overscan leaves room for the image to travel inside its section. */
.section-background[data-parallax] {
  inset: -130px 0;
  width: 100%;
  height: calc(100% + 260px);
  max-width: none;
}
.project-backdrop[data-parallax],
.service-card > img[data-parallax],
.client-grid article > img[data-parallax],
.faq-intro > img[data-parallax] {
  position: absolute;
  inset: -90px 0;
  width: 100%;
  height: calc(100% + 180px);
  max-width: none;
  object-fit: cover;
}
.project-backdrop[data-parallax] { transition: scale 1.2s var(--ease); }
.project:hover .project-backdrop[data-parallax] { scale: 1.05; }
.work::before { translate: 0 var(--scene-shift); scale: 1.14; }
.services { position: relative; isolation: isolate; overflow: hidden; }
.services::before {
  content: '✳'; position: absolute; top: -130px; right: -70px;
  font: 300 clamp(350px, 55vw, 920px)/1 var(--f-jp);
  color: #c9c9b82e; z-index: -1; pointer-events: none;
  translate: 0 var(--scene-shift);
  rotate: calc(-24deg + var(--scene-progress) * 80deg);
}

/* A new material world for Our Attitude. */
.belief { background: #041919; min-height: 900px; }
.belief > .section-background { object-position: 35% center; }
.belief::before {
  background: linear-gradient(0deg, transparent 75%, #03161555),
    linear-gradient(90deg, #03161508 24%, #04171555 52%, #041515b5 100%);
}
.belief-copy { position: relative; z-index: 2; padding-top: 110px; padding-bottom: 95px; }
.belief-top, .belief-bottom { position: relative; z-index: 2; }
.belief-top > span {
  display: block;
  rotate: calc(var(--scene-progress) * 150deg);
}
.attitude-orbit {
  position: absolute; left: 7%; top: 18%; width: 33%; height: 62%;
  border: 1px solid #d0e3ce44; border-radius: 50%; pointer-events: none;
  rotate: calc(-25deg + var(--scene-progress) * 65deg);
  translate: 0 var(--scene-shift);
}
.attitude-orbit::before, .attitude-orbit::after {
  content: ''; position: absolute; width: 6px; height: 6px;
  background: #e2e8bc; border-radius: 50%;
}
.attitude-orbit::before { left: 13%; top: 13%; }
.attitude-orbit::after { right: 13%; bottom: 13%; width: 3px; height: 3px; }
.attitude-coordinate {
  position: absolute; left: var(--gutter); bottom: 20%;
  color: #e2ead1b5; font: 400 8px/2 var(--f-en); letter-spacing: .12em;
}
.attitude-coordinate::before {
  content: '+'; display: block; font: 300 45px/1 var(--f-en); margin-bottom: 16px;
}

/* Type travels across the page while the images move vertically. */
.perspective-ribbon {
  position: relative; margin: 90px calc(-1 * var(--gutter)) -25px;
  overflow: hidden; padding: 20px 0 30px; pointer-events: none;
}
.perspective-ribbon > div {
  display: flex; gap: .3em; width: max-content;
  font: 600 clamp(75px, 10vw, 190px)/1.1 var(--f-en);
  letter-spacing: -.055em; white-space: nowrap;
  translate: calc(-7% - var(--scene-progress) * 15%) 0;
}
.perspective-ribbon span:nth-child(2) { font-family: Georgia, serif; font-style: italic; font-weight: 400; }
.perspective-ribbon i { font: 400 .8em/1 var(--f-jp); color: var(--red); align-self: center; }
.contact-arrow { rotate: calc(-10deg + var(--scene-progress) * 20deg); }

/* Each heading rises a line at a time; smaller blocks follow in sequence. */
.reveal-line { display: block; overflow: clip; padding: .16em .035em .2em 0; margin: -.16em -.035em -.2em 0; }
.reveal-line > span { display: inline-block; }
.scroll-scenes-ready [data-scroll-reveal] {
  opacity: 0;
  transform: translate3d(0, 52px, 0);
  filter: blur(5px);
  transition: opacity .8s var(--ease), transform 1.15s var(--ease), filter .9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.scroll-scenes-ready [data-scroll-reveal].is-entered {
  opacity: 1; transform: none; filter: none;
}
.scroll-scenes-ready [data-scroll-reveal] .reveal-line > span {
  transform: translate3d(0, 125%, 0) rotate(2.5deg);
  transform-origin: left top;
  transition: transform 1.25s cubic-bezier(.18,.72,.14,1);
  transition-delay: calc(var(--reveal-delay, 0s) + .08s);
}
.scroll-scenes-ready [data-scroll-reveal] .reveal-line:nth-child(2) > span { transition-delay: calc(var(--reveal-delay, 0s) + .22s); }
.scroll-scenes-ready [data-scroll-reveal].is-entered .reveal-line > span { transform: none; }
.scroll-scenes-ready .reveal-sequence > p:not(.image-note),
.scroll-scenes-ready .reveal-sequence > .text-link {
  opacity: 0; translate: 0 28px;
  transition: opacity .9s var(--ease), translate 1.1s var(--ease);
  transition-delay: .3s;
}
.scroll-scenes-ready .reveal-sequence > p:nth-of-type(3) { transition-delay: .43s; }
.scroll-scenes-ready .reveal-sequence > .text-link { transition-delay: .53s; }
.scroll-scenes-ready .reveal-sequence.is-entered > p,
.scroll-scenes-ready .reveal-sequence.is-entered > .text-link { opacity: 1; translate: 0; }
.client-grid > :nth-child(2), .service-grid > :nth-child(2), .process-grid > :nth-child(2) { --reveal-delay: .1s; }
.client-grid > :nth-child(3), .service-grid > :nth-child(3), .process-grid > :nth-child(3) { --reveal-delay: .2s; }
.process-grid > :nth-child(4) { --reveal-delay: .3s; }
.scroll-scenes-ready .project[data-scroll-reveal] .project-image {
  clip-path: inset(8% 0 8% 0);
  transition: clip-path 1.2s var(--ease);
}
.scroll-scenes-ready .project[data-scroll-reveal].is-entered .project-image { clip-path: inset(0); }
.scroll-scenes-ready [data-scroll-reveal]:focus-within {
  opacity: 1; transform: none; filter: none; transition: none;
}

@media (max-width: 880px) {
  .belief { min-height: 820px; }
  .belief-copy { padding-top: 105px; }
  .attitude-orbit { left: 3%; width: 46%; height: 55%; }
}
@media (max-width: 700px) {
  .section-background[data-parallax] { inset: -85px 0; height: calc(100% + 170px); }
  .project-backdrop[data-parallax], .service-card > img[data-parallax],
  .client-grid article > img[data-parallax], .faq-intro > img[data-parallax] {
    inset: -65px 0; height: calc(100% + 130px);
  }
  .belief { min-height: 870px; }
  .belief > .section-background { object-position: 24% center; }
  .belief::before { background: linear-gradient(0deg, #031817f7 3%, #031817da 43%, #0418171a 94%); }
  .belief-copy { padding: 230px 0 44px; }
  .belief-copy h2 { font-size: clamp(32px, 8.4vw, 47px); }
  .attitude-orbit { left: 8%; top: 8%; width: 67%; height: 37%; }
  .attitude-coordinate { top: 24%; bottom: auto; font-size: 6px; }
  .attitude-coordinate::before { font-size: 28px; margin-bottom: 10px; }
  .perspective-ribbon { margin-top: 45px; margin-bottom: -15px; padding-bottom: 10px; }
  .perspective-ribbon > div { font-size: 21vw; }
  .scroll-scenes-ready [data-scroll-reveal] { transform: translate3d(0, 36px, 0); filter: blur(3px); }
  .scroll-scenes-ready [data-scroll-reveal].is-entered { transform: none; filter: none; }
  .client-grid > *, .service-grid > *, .process-grid > * { --reveal-delay: 0s; }
}

/* The existing MOTION control and OS preference apply to every new layer. */
.motion-paused [data-parallax], .motion-paused .perspective-ribbon > div,
.motion-paused .work::before, .motion-paused .services::before,
.motion-paused .attitude-orbit { translate: 0 0 !important; }
.motion-paused .belief-top > span, .motion-paused .services::before,
.motion-paused .attitude-orbit, .motion-paused .contact-arrow { rotate: none !important; }
.motion-paused [data-scroll-reveal], .motion-paused [data-scroll-reveal] .reveal-line > span,
.motion-paused .reveal-sequence > p, .motion-paused .reveal-sequence > .text-link {
  opacity: 1 !important; transform: none !important; translate: 0 !important; filter: none !important;
}
.motion-paused .project .project-image { clip-path: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-parallax], .perspective-ribbon > div, .work::before, .services::before,
  .attitude-orbit { translate: 0 0 !important; }
  .belief-top > span, .services::before, .attitude-orbit, .contact-arrow { rotate: none !important; }
  .scroll-scenes-ready [data-scroll-reveal], .scroll-scenes-ready [data-scroll-reveal] .reveal-line > span,
  .scroll-scenes-ready .reveal-sequence > p, .scroll-scenes-ready .reveal-sequence > .text-link {
    opacity: 1 !important; transform: none !important; translate: 0 !important; filter: none !important;
  }
  .project .project-image { clip-path: none !important; }
}