:root {
  --page-progress: 0;
  --motion-x: 0px;
  --motion-y: 0px;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 220ms;
  --motion-base: 640ms;
  --motion-slow: 9s;
}

body { overflow-x: clip; }

body::before {
  content: "";
  height: 3px;
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  background: linear-gradient(90deg, var(--lime), var(--blue));
  transform: scaleX(var(--page-progress));
  transform-origin: left center;
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  transition: min-height var(--motion-fast) ease, padding var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.site-header.is-scrolled {
  min-height: 76px;
  padding-block: 10px;
  background: rgba(244, 246, 242, .94);
  box-shadow: 0 14px 34px rgba(16, 24, 32, .09);
  backdrop-filter: blur(16px);
}

html.motion-ready .motion-reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity var(--motion-base) var(--motion-ease),
    translate var(--motion-base) var(--motion-ease);
  transition-delay: calc(var(--motion-order, 0) * 55ms);
}

html.motion-ready .motion-reveal--item {
  translate: 0 38px;
}

html.motion-ready .motion-reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
}

html.motion-ready .detail-product-links > a.motion-reveal {
  transition: opacity var(--motion-base) var(--motion-ease), translate var(--motion-base) var(--motion-ease),
    background-color 250ms ease, padding 350ms var(--motion-ease);
}

.motion-line {
  position: relative;
}

.motion-line::after {
  content: "";
  height: 2px;
  position: absolute;
  z-index: 5;
  top: -1px;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, var(--blue) 0 58%, var(--lime) 58% 100%);
  scale: 0 1;
  transform-origin: left center;
  transition: scale 900ms var(--motion-ease) 140ms;
  pointer-events: none;
}

.motion-line.is-revealed::after {
  scale: 1 1;
}

.system-map.motion-line::after { display: none; }

.motion-parallax {
  transform: translate3d(var(--motion-x), var(--motion-y), 0);
  transition: transform 500ms var(--motion-ease);
  will-change: transform;
}

.motion-ambient::before {
  animation: nl-grid-drift 18s linear infinite paused;
}

.is-motion-active .motion-ambient::before,
.is-motion-active.motion-ambient::before {
  animation-play-state: running;
}

.hero-art .plane,
.offer-layer,
.detail-shape,
.audience-overview-hero__art i,
.audience-hero__visual i,
.method-hero__word i,
.about-hero__visual i,
.about-origin__visual i,
.about-structure__map i,
.about-vision > div:last-child i,
.audience-cta > div:last-child i,
.institutional-cta__layers i,
.offer-cta__layer i,
.schedule-hero aside i,
.cta-plane {
  animation: nl-layer-float var(--motion-slow) var(--motion-ease) infinite alternate paused;
}

.is-motion-active .hero-art .plane,
.is-motion-active .offer-layer,
.is-motion-active .detail-shape,
.is-motion-active .audience-overview-hero__art i,
.is-motion-active .audience-hero__visual i,
.is-motion-active .method-hero__word i,
.is-motion-active .about-hero__visual i,
.is-motion-active .about-origin__visual i,
.is-motion-active .about-structure__map i,
.is-motion-active .about-vision > div:last-child i,
.is-motion-active .audience-cta > div:last-child i,
.is-motion-active .institutional-cta__layers i,
.is-motion-active .offer-cta__layer i,
.is-motion-active .schedule-hero aside i,
.is-motion-active .cta-plane {
  animation-play-state: running;
}

.hero-art .plane:nth-child(even),
.offer-layer:nth-child(even),
.detail-shape:nth-child(even),
.about-hero__visual i:nth-of-type(even),
.institutional-cta__layers i:nth-child(even) {
  animation-direction: alternate-reverse;
  animation-duration: 12s;
}

.system-map.is-revealed .map-line-top {
  transform-origin: left center;
  animation: nl-line-open 1s var(--motion-ease) both;
}

.system-map.is-revealed .map-node {
  scale: 0;
  animation: nl-node-open 480ms var(--motion-ease) calc(280ms + var(--motion-order, 0) * 70ms) forwards;
}

.symbol-signal i {
  transform-origin: bottom center;
  animation: nl-signal 2.8s var(--motion-ease) infinite alternate paused;
}

.is-motion-active .symbol-signal i {
  animation-play-state: running;
}

.symbol-signal i:nth-child(2) { animation-delay: -1.2s; }
.symbol-signal i:nth-child(3) { animation-delay: -.5s; }

.symbol-frame i:first-child {
  animation: nl-frame-swap-a 5.6s var(--motion-ease) infinite paused;
}

.symbol-frame i:last-child {
  animation: nl-frame-swap-b 5.6s var(--motion-ease) infinite paused;
}

.symbol-window i:first-child {
  z-index: 2;
  animation: nl-window-settle 5s var(--motion-ease) 250ms infinite both paused;
}

.is-motion-active .symbol-frame i,
.is-motion-active .symbol-window i:first-child {
  animation-play-state: running;
}

.method-hero__word span {
  transition: color 320ms ease, padding-left 480ms var(--motion-ease), letter-spacing 480ms var(--motion-ease);
}

html.motion-ready .method-hero__word.motion-reveal span {
  opacity: 0;
  translate: -24px 0;
  transition: opacity 520ms var(--motion-ease), translate 520ms var(--motion-ease),
    color 320ms ease, padding-left 480ms var(--motion-ease), letter-spacing 480ms var(--motion-ease);
}

html.motion-ready .method-hero__word.motion-reveal.is-revealed span {
  opacity: 1;
  translate: 0 0;
}

.method-hero__word span:nth-child(2) { transition-delay: 70ms; }
.method-hero__word span:nth-child(3) { transition-delay: 140ms; }
.method-hero__word span:nth-child(4) { transition-delay: 210ms; }
.method-hero__word span:nth-child(5) { transition-delay: 280ms; }

.method-hero__word:hover span,
.method-hero__word:focus-within span {
  letter-spacing: -.045em;
}

.method-hero__word:hover span:nth-child(odd) {
  padding-left: 9%;
  color: var(--lime);
}

.method-hero__word:hover span:nth-child(even) {
  padding-left: 19%;
  color: var(--paper);
}

.problem-grid article,
.system-map .lane,
.process-steps article,
.case-list article,
.detail-service-grid article,
.audience-choice-card,
.audience-services article,
.pillar-grid article,
.about-principle-list article,
.schedule-next li {
  transition: opacity var(--motion-base) var(--motion-ease), translate 320ms var(--motion-ease), background-color 320ms ease,
    color 320ms ease, box-shadow 320ms ease;
}

.faq-list details[open] {
  background: rgba(35, 87, 255, .035);
}

.faq-list details {
  transition: opacity var(--motion-base) var(--motion-ease), translate 320ms var(--motion-ease),
    background-color 260ms ease;
}

.case-navigation__item b,
.case-navigation__item span,
.automation-case__controls button span {
  transition: translate 280ms var(--motion-ease), color 220ms ease;
}

.case-navigation__item:hover b,
.case-navigation__item:focus-visible b,
.case-navigation__item.is-active b {
  translate: 5px 0;
}

.automation-case__controls button:hover span,
.automation-case__controls button:focus-visible span {
  translate: 4px 0;
}

@media (hover: hover) {
  .problem-grid article:hover,
  .system-map .lane:hover,
  .process-steps article:hover,
  .case-list article:hover,
  .detail-service-grid article:hover,
  .audience-services article:hover,
  .pillar-grid article:hover,
  .about-principle-list article:hover,
  .schedule-next li:hover {
    translate: 0 -5px;
  }

  .problem-grid article:hover { background: rgba(183, 212, 73, .06); }
  .process-steps article:hover,
  .case-list article:hover,
  .detail-service-grid article:hover,
  .pillar-grid article:hover,
  .about-principle-list article:hover { background: rgba(35, 87, 255, .045); }
  .schedule-next li:hover { background: rgba(244, 246, 242, .07); }
  .audience-choice-card:hover { translate: 0 -8px; box-shadow: 0 24px 70px rgba(0, 0, 0, .16); }

  .method-steps li:hover .method-step__layer i,
  .offer-front:hover .offer-front__symbol i {
    translate: 12px -8px;
  }
}

.method-steps li .method-step__layer i,
.offer-front .offer-front__symbol i {
  transition: translate 650ms var(--motion-ease);
}

.page-audience-b2b { --motion-base: 760ms; --motion-slow: 12s; }
.page-audience-commerce { --motion-base: 520ms; --motion-slow: 7s; }

.page-schedule .schedule-form-wrap:focus-within {
  box-shadow: 0 24px 70px rgba(16, 24, 32, .12);
  translate: 0 -4px;
}

.page-schedule .schedule-form-wrap {
  transition: box-shadow 350ms ease, translate 350ms var(--motion-ease);
}

@keyframes nl-grid-drift {
  to { background-position: 72px 72px; }
}

@keyframes nl-layer-float {
  0% { translate: 0 0; }
  45% { translate: 10px -8px; }
  100% { translate: -7px 11px; }
}

@keyframes nl-line-open {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@keyframes nl-node-open {
  from { scale: 0; }
  to { scale: 1; }
}

@keyframes nl-signal {
  from { scale: 1 .45; opacity: .55; }
  to { scale: 1 1; opacity: 1; }
}

@keyframes nl-frame-swap-a {
  0%, 15%, 100% { translate: 0 0; }
  38%, 68% { translate: 48px 37px; }
  86% { translate: -5px 4px; }
}

@keyframes nl-frame-swap-b {
  0%, 15%, 100% { translate: 0 0; }
  38%, 68% { translate: -48px -37px; }
  86% { translate: 5px -4px; }
}

@keyframes nl-window-settle {
  0%, 8% { left: 12%; top: 10%; }
  20% { left: 17%; top: 8%; }
  32% { left: 20%; top: 25%; }
  44% { left: 27%; top: 30%; }
  55%, 86% { left: 24%; top: 33%; }
  100% { left: 12%; top: 10%; }
}

@media (max-width: 760px) {
  html.motion-ready .motion-reveal,
  html.motion-ready .motion-reveal--item { translate: 0 18px; }
  .motion-parallax { transform: none; }
  .motion-line::after { transition-duration: 650ms; }
  .site-header.is-scrolled { min-height: 68px; padding-block: 8px; }
  .method-hero__word:hover span:nth-child(odd),
  .method-hero__word:hover span:nth-child(even) { padding-left: initial; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.motion-ready .motion-reveal,
  html.motion-ready .motion-reveal--item {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
  .motion-line::after { scale: 1 1; transition: none; }
  .motion-parallax { transform: none; transition: none; }
  html.motion-ready .method-hero__word.motion-reveal span {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
  .motion-ambient::before,
  .hero-art .plane,
  .offer-layer,
  .detail-shape,
  .audience-overview-hero__art i,
  .audience-hero__visual i,
  .method-hero__word i,
  .about-hero__visual i,
  .about-origin__visual i,
  .about-structure__map i,
  .about-vision > div:last-child i,
  .audience-cta > div:last-child i,
  .institutional-cta__layers i,
  .offer-cta__layer i,
  .schedule-hero aside i,
  .cta-plane,
  .symbol-signal i,
  .symbol-frame i,
  .symbol-window i:first-child { animation: none !important; }
  .problem-grid article,
  .system-map .lane,
  .process-steps article,
  .case-list article,
  .detail-service-grid article,
  .audience-choice-card,
  .audience-services article,
  .pillar-grid article,
  .about-principle-list article,
  .schedule-next li { transition: none; }
}