/* Restrained scroll depth, refined for more legible movement, November 2026.
   Decorative motion only: no content is hidden, no scroll handlers or dependencies.
   Unsupported browsers and reduced-motion users keep the original static design.
   Frame-level named view timelines prevent overflow-clipped children from
   tracking their own (non-scrolling) clipping container. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (view-timeline-name: --preview) {
    /* The outer clipped section is the timeline subject; its nearest
       ancestor scroller is the document, unlike its clipped children. */
    body.design-preview .design-home-hero {
      view-timeline-name: --nakatomi-home-hero;
      view-timeline-axis: block;
    }

    body.design-preview .design-service .service-page-hero {
      view-timeline-name: --nakatomi-service-hero;
      view-timeline-axis: block;
    }

    body.design-preview .design-home .working-band {
      view-timeline-name: --nakatomi-working-photo;
      view-timeline-axis: block;
    }

    body.design-preview .design-home .profile-card {
      view-timeline-name: --nakatomi-profile-photo;
      view-timeline-axis: block;
    }

    /* Existing giant N, architectural rules and service ring move by
       different amounts while functional copy and actions remain still. */
    body.design-preview .design-home-hero .hero__brand-mark--oversized {
      animation: nakatomi-mark-depth linear both;
      animation-timeline: --nakatomi-home-hero;
      animation-range: cover 0% cover 100%;
    }

    body.design-preview .design-home-hero .hero__architecture-lines {
      animation: nakatomi-rule-depth linear both;
      animation-timeline: --nakatomi-home-hero;
      animation-range: cover 0% cover 100%;
    }

    body.design-preview .design-service .design-service-hero__glyph {
      animation: nakatomi-mark-depth linear both;
      animation-timeline: --nakatomi-service-hero;
      animation-range: cover 0% cover 100%;
    }

    body.design-preview .design-service .design-service-hero__ring {
      animation: nakatomi-ring-depth linear both;
      animation-timeline: --nakatomi-service-hero;
      animation-range: cover 0% cover 100%;
    }

    /* A measured photographic pull-back; the existing frames crop the edges. */
    body.design-preview .design-home .working-band__image img {
      animation: nakatomi-photo-depth linear both;
      animation-timeline: --nakatomi-working-photo;
      animation-range: cover 0% cover 100%;
    }

    body.design-preview .design-home .profile-card__visual--photo img {
      animation: nakatomi-photo-depth linear both;
      animation-timeline: --nakatomi-profile-photo;
      animation-range: cover 0% cover 100%;
    }

    /* Two deliberate editorial accents settle as they enter. Long-form copy stays static. */
    body.design-preview .design-home .editorial-signal__inner > span {
      animation: nakatomi-statement-arrive linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 50%;
    }

    body.design-preview .design-home .process-manifesto {
      animation: nakatomi-process-arrive linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 55%;
    }

    /* Key section titles arrive with the reader; ordinary paragraphs,
       article prose and formal notices remain fully stationary. */
    body.design-preview .design-home :is(
      .engagements__intro h2,
      .evidence__intro h2,
      .process__intro h2,
      .section-kicker h2,
      .industries__intro h2
    ),
    body.design-preview .secondary-page .service-detail__heading h2,
    body.design-preview .case-studies-page .case-studies__intro h2,
    body.design-preview .insights-page .insights-index__intro h2,
    body.design-preview .resources-public-page :is(
      .resources-heading h2,
      .insurance-resources h2,
      .company-verification h2
    ) {
      animation: nakatomi-section-title-arrive linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 48%;
    }

    /* Stand-out client principles are punctuation, not a blanket text reveal. */
    body.design-preview .design-service .service-editorial-signal__inner > strong,
    body.design-preview .case-studies-page .case-studies-signal__inner > strong {
      animation: nakatomi-statement-arrive linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 50%;
    }

    /* One signature path per service, driven by the same scroll timeline.
       The numeric readout measures the visible dot/ring geometry. */
    body.design-preview [data-orbit-variant="architecture"] .design-service-hero__orbit-arm {
      animation: nakatomi-orbit-architecture linear both;
      animation-timeline: --nakatomi-service-hero;
      animation-range: cover 42% cover 92%;
    }

    body.design-preview [data-orbit-variant="delivery"] .design-service-hero__orbit-arm {
      animation: nakatomi-orbit-delivery linear both;
      animation-timeline: --nakatomi-service-hero;
      animation-range: cover 36% cover 94%;
    }

    body.design-preview [data-orbit-variant="advisory"] .design-service-hero__orbit-arm {
      animation: nakatomi-orbit-advisory linear both;
      animation-timeline: --nakatomi-service-hero;
      animation-range: cover 30% cover 96%;
    }

    body.design-preview [data-orbit-variant="operational-improvement"] .design-service-hero__orbit-arm {
      animation: nakatomi-orbit-spiral linear both;
      animation-timeline: --nakatomi-service-hero;
      animation-range: cover 26% cover 98%;
    }

    /* Counter-scale the spiral's dot so it stays the same visible size as
       its orbit radius contracts toward the centre. */
    body.design-preview [data-orbit-variant="operational-improvement"] .design-service-hero__orbit-dot {
      animation: nakatomi-spiral-dot-size linear both;
      animation-timeline: --nakatomi-service-hero;
      animation-range: cover 26% cover 98%;
    }
  }
}


/* Home N motion on touch phones is tuned separately from the shared service
   glyph keyframes. Portrait gets 15% more travel without changing its timing. */
@media (prefers-reduced-motion: no-preference) and (orientation: portrait) and (max-width: 44rem) and (hover: none) and (pointer: coarse) {
  @supports (animation-timeline: view()) and (view-timeline-name: --preview) {
    body.design-preview .design-home-hero .hero__brand-mark--oversized {
      animation-name: nakatomi-mark-depth-portrait;
    }
  }
}

@keyframes nakatomi-mark-depth-portrait {
  from {
    translate: 0 2.507rem;
    scale: 1.01;
  }

  to {
    translate: 0 -2.507rem;
    scale: 1.156;
  }
}

/* On short, wide touch viewports the hero stacks above a shallow brand stage.
   Focus the N's travel into the visible interval, with 25% more travel than
   the previously reviewed landscape version. Desktop remains unchanged. */
@media (prefers-reduced-motion: no-preference) and (orientation: landscape) and (max-height: 36rem) and (max-width: 70rem) and (hover: none) and (pointer: coarse) {
  @supports (animation-timeline: view()) and (view-timeline-name: --preview) {
    body.design-preview .design-home-hero .hero__brand-mark--oversized {
      animation-name: nakatomi-mark-depth-landscape;
      animation-range: cover 45% cover 95%;
    }
  }
}

@keyframes nakatomi-mark-depth-landscape {
  from {
    translate: -1.875rem 5.5rem;
    scale: 1.015;
  }

  to {
    translate: 1.875rem -5.5rem;
    scale: 1.246;
  }
}

@keyframes nakatomi-mark-depth {
  from {
    translate: 0 2.18rem;
    scale: 1.01;
  }

  to {
    translate: 0 -2.18rem;
    scale: 1.137;
  }
}

@keyframes nakatomi-rule-depth {
  from {
    translate: 0 -1.15rem;
  }

  to {
    translate: 0 1.44rem;
  }
}

@keyframes nakatomi-ring-depth {
  from {
    scale: 0.93;
  }

  to {
    scale: 1.11;
  }
}

@keyframes nakatomi-photo-depth {
  from {
    scale: 1.15;
  }

  to {
    scale: 1;
  }
}

@keyframes nakatomi-statement-arrive {
  from {
    translate: 0 1.38rem;
    opacity: 0.8;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes nakatomi-process-arrive {
  from {
    translate: 0 1.61rem;
    opacity: 0.88;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

/* Every service has a deterministic static coordinate and marker position.
   The ring radius is 100 coordinate units, with positive Y pointing up. */
body.design-preview .design-service-hero__orbit-arm {
  position: absolute;
  inset: 0;
  transform-origin: center;
  rotate: 0deg;
  scale: 1;
}

body.design-preview [data-orbit-variant="advisory"] .design-service-hero__orbit-arm {
  /* The existing thin inner circle is inset 14% on each side. */
  scale: 0.72;
}

body.design-preview .design-service-hero__orbit-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.65rem;
  aspect-ratio: 1;
  border: 1px solid #deefff;
  border-radius: 50%;
  background: #83b8ed;
  transform: translate(-50%, -50%);
}

body.design-preview [data-orbit-variant="advisory"] .design-service-hero__orbit-dot {
  scale: 1.38889;
}

body.design-preview .design-service-hero__coordinates {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.035em;
  white-space: nowrap;
}

@media (max-width: 44rem) {
  body.design-preview .design-service-hero__coordinates {
    font-size: 0.65rem;
  }
}

@keyframes nakatomi-section-title-arrive {
  from {
    translate: 0 1.45rem;
    opacity: 0.84;
  }

  to {
    translate: 0 0;
    opacity: 1;
  }
}

@keyframes nakatomi-orbit-architecture {
  from { rotate: 0deg; }
  to { rotate: 130deg; }
}

@keyframes nakatomi-orbit-delivery {
  from { rotate: 0deg; }
  to { rotate: -175deg; }
}

@keyframes nakatomi-orbit-advisory {
  from { rotate: 0deg; }
  to { rotate: 285deg; }
}

@keyframes nakatomi-orbit-spiral {
  from { rotate: 0deg; scale: 1; }
  to { rotate: -570deg; scale: 0.28; }
}

@keyframes nakatomi-spiral-dot-size {
  0% { scale: 1; }
  25% { scale: 1.21951; }
  50% { scale: 1.5625; }
  75% { scale: 2.17391; }
  100% { scale: 3.57143; }
}