/* NEO EARTH / SCROLL STORY — progressive, touch-first visual feedback.
   No scroll-snap for the page: native scrolling and accessibility come first. */
.neo-scroll-scene{position:relative;isolation:isolate}
.neo-scroll-scene .neo-scene-trace{
  position:absolute;
  pointer-events:none;
  top:0;
  left:clamp(22px,5.8vw,98px);
  right:clamp(22px,5.8vw,98px);
  height:2px;
  z-index:3;
  opacity:0.18;
  overflow:visible;
  transition:opacity .55s ease
}
.neo-scroll-scene .neo-scene-trace::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  transform-origin:left center;
  transform:scaleX(var(--neo-line-scale,0));
  background:linear-gradient(90deg,#278bd8 0%,#88e3ff 48%,rgba(127,214,248,0) 92%);
  box-shadow:0 0 16px rgba(55,166,224,.22);
  transition:transform .28s ease-out
}
.neo-scroll-scene.neo-section-active .neo-scene-trace{opacity:.95}
.intro.neo-scroll-scene .neo-scene-trace::before,
.company.neo-scroll-scene .neo-scene-trace::before{
  background:linear-gradient(90deg,#116392,#529ac1 44%,rgba(43,129,183,0) 96%);
  box-shadow:0 0 12px rgba(30,133,184,.14)
}

/* Scroll arrival: larger, calmer movement than the old almost invisible fade.
   The existing IntersectionObserver controls .is-visible; a dedicated observer
   in neo-scroll.js covers delayed iOS callback cases. */
@media(prefers-reduced-motion:no-preference){
  body.neo-scroll-ready .reveal{
    opacity:0;
    transform:translate3d(0,44px,0);
    transition-property:opacity,transform;
    transition-duration:.95s,1.05s;
    transition-timing-function:cubic-bezier(.2,.7,.2,1),cubic-bezier(.18,.74,.25,1);
    transition-delay:var(--neo-delay,0ms);
    backface-visibility:hidden
  }
  body.neo-scroll-ready .reveal.is-visible{
    opacity:1;
    transform:translate3d(0,0,0)
  }
  body.neo-scroll-ready .intro .intro-body>.reveal:nth-child(2){transition-delay:120ms}
  body.neo-scroll-ready .intro .intro-body>.reveal:nth-child(3){transition-delay:190ms}
  body.neo-scroll-ready .recruit-inner>.reveal:nth-child(2){transition-delay:85ms}
  body.neo-scroll-ready .recruit-inner>.reveal:nth-child(3){transition-delay:150ms}
  body.neo-scroll-ready .recruit-inner>.reveal:nth-child(4){transition-delay:200ms}
  body.neo-scroll-ready .recruit-inner>.reveal:nth-child(5){transition-delay:245ms}

  /* Strong enough to see when moving between chapters, but not a perpetual
     background animation that drains battery. */
  body.neo-scroll-ready .intro-watermark{
    transform:translate3d(0,var(--neo-scene-drift,0px),0);
    transition:transform .15s linear
  }
  body.neo-scroll-ready .strength-deco{
    transform:translate3d(0,var(--neo-scene-drift,0px),0);
    transition:transform .15s linear
  }
  body.neo-scroll-ready .company-art{
    transform:translate3d(0,var(--neo-scene-drift,0px),0);
    transition:transform .15s linear
  }
  body.neo-scroll-ready .recruit-image{
    transform:translate3d(0,var(--neo-scene-drift,0px),0) scale(1.055);
    transition:transform .15s linear
  }
  /* Keep the small lift on hover without interrupting the reveal animation. */
  @media(hover:hover) and (pointer:fine){
    body.neo-scroll-ready .service-card.reveal.is-visible:hover{
      transform:translate3d(0,-5px,0)
    }
  }
}

/* Readable, tactile feedback when swiping the actual mobile service row. */
@media(max-width:900px){
  .ref-service-scroll .ref-service{
    border-bottom:2px solid transparent;
    transition:background-color .32s,border-color .32s,box-shadow .32s
  }
  .ref-service-scroll .ref-service.neo-swipe-current{
    background:linear-gradient(180deg,rgba(46,165,228,.18),rgba(46,165,228,.035));
    border-bottom-color:#76dfff;
    box-shadow:inset 0 0 23px rgba(27,121,190,.11)
  }
  .ref-service-scroll .ref-service svg{
    transition:transform .38s cubic-bezier(.2,.7,.2,1),filter .38s
  }
  .ref-service-scroll .ref-service.neo-swipe-current svg{
    transform:translate3d(0,-4px,0);
    filter:drop-shadow(0 0 8px rgba(55,186,247,.4))
  }
  .ref-swipe-hint{transition:color .3s;color:#a7d6e9}
  body.neo-scroll-ready .reveal{transform:translate3d(0,35px,0)}
  body.neo-scroll-ready .intro-title.reveal,
  body.neo-scroll-ready .recruit-title.reveal{
    transform:translate3d(0,40px,0)
  }
  body.neo-scroll-ready .intro-title.reveal.is-visible,
  body.neo-scroll-ready .recruit-title.reveal.is-visible{
    transform:translate3d(0,0,0)
  }
}

/* The website must remain usable when motion is disabled. */
@media(prefers-reduced-motion:reduce){
  .neo-scroll-scene .neo-scene-trace{opacity:.5;transition:none}
  .neo-scroll-scene .neo-scene-trace::before{transform:scaleX(1);transition:none}
  .ref-service-scroll .ref-service,
  .ref-service-scroll .ref-service svg{transition:none!important;transform:none!important;filter:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* Visual audit finishing — keep the original layout and brand intact. */

/* On a light editorial section, muted blue-gray text must never wash out.
   The previous global override (#b7ccd9 on #f0f4f6) was unreadable. */
#vision .intro-copy-row p{color:#385267}
#vision .intro-copy-row p:first-child{color:#152f43;font-weight:600}
#vision .section-ident{color:#315d76}
#vision .tiny-label{color:#376e87}
#vision .intro-watermark{color:rgba(18,72,103,.03)}

/* Refine the night-to-day handoff so there is no oversized gray curtain. */
#vision{background:linear-gradient(180deg,#0a1726 0,#dae6ee 72px,#f0f4f6 150px,#f0f4f6 100%)}

/* The mobile hero already includes the authentic logo on the jacket;
   the handwritten neon duplicate competed with the primary CTA and text. */
@media(max-width:900px){
  .ref-mobile-graffiti{display:none!important}
  #vision{background:linear-gradient(180deg,#0a1726 0,#dae6ee 56px,#f0f4f6 116px,#f0f4f6 100%)}
  .ref-mobile-services{border-top-color:rgba(104,188,235,.25)}
  .ref-service-scroll .ref-service.neo-swipe-current{
    background:linear-gradient(180deg,rgba(46,151,208,.12),rgba(46,151,208,.018));
    border-bottom-color:#80d2f6;
    box-shadow:inset 0 0 19px rgba(25,102,172,.07)
  }
  #vision .intro-copy-row p{color:#385267;line-height:2.03}
}

/* Improved legibility for helper copy and section labels on dark surfaces. */
#business .section-top>p{color:#9abbd0}
#business .service-top{color:#aacce0}
#business .heading-aside{color:#b5cad8}
#recruit .recruit-copy{color:#d0e4f0}

/* The source logo includes very dark image pixels. A Screen blend lifts that
   whole rectangle against the scrolled header. Lighten keeps the exact logo
   pixels where brighter and allows the header's background to show through. */
.neo-header .neo-brand-image,
.site-footer .neo-footer-brand-image{
  mix-blend-mode:lighten;
  filter:none;
}

/* Brand pixels are now isolated accurately from the image background.
   No blending, replacement lettering, recoloring or rectangular image plate. */
.neo-header .neo-brand-image,
.site-footer .neo-footer-brand-image{
  mix-blend-mode:normal;
  filter:none;
}

/* Compact phones: complete the reveal promptly instead of leaving headings
   mid-fade after a normal swipe. Desktop timing stays cinematic. */
@media(max-width:480px) and (prefers-reduced-motion:no-preference){
  body.neo-scroll-ready .reveal{
    transition-duration:.64s,.72s;
  }
  body.neo-scroll-ready .intro .intro-body>.reveal:nth-child(2){transition-delay:45ms}
  body.neo-scroll-ready .intro .intro-body>.reveal:nth-child(3){transition-delay:80ms}
  body.neo-scroll-ready .recruit-inner>.reveal:nth-child(2){transition-delay:25ms}
  body.neo-scroll-ready .recruit-inner>.reveal:nth-child(3){transition-delay:45ms}
  body.neo-scroll-ready .recruit-inner>.reveal:nth-child(4){transition-delay:70ms}
  body.neo-scroll-ready .recruit-inner>.reveal:nth-child(5){transition-delay:90ms}
}
/* Do not display a 'swipe' affordance when there is no overflow. */
.ref-swipe-hint[hidden]{display:none!important}


/* ============================================================
   NEO EARTH — V4 EDITORIAL MOTION
   Quiet pointer, expressive native scrolling. No cursor followers,
   fake spotlight, looping hero sweep or interfering scroll locks.
   ============================================================ */

/* Remove effects that made pointer movement look artificial. */
.has-reference-hero .ref-desktop-art::after,
.service-card::after,
.button-primary::after,
.header-contact::after,
.business-cta-link::after{
  content:none!important;
  animation:none!important;
  display:none!important
}
.has-reference-hero .ref-full-image{
  will-change:auto;
  transition:transform .12s linear;
}
.has-reference-hero .ref-hit:hover{
  background:transparent;
  box-shadow:inset 0 -1px 0 rgba(158,208,237,.36);
}
.has-reference-hero .ref-hit:focus-visible{
  outline:2px solid #9bdcff;outline-offset:-3px;
}
.service-primary.neo-pointer-glow{
  background-image:linear-gradient(140deg,rgba(17,55,83,.5),rgba(8,23,39,.2))!important;
  border-color:rgba(133,197,233,.22)
}
.service-primary.neo-pointer-glow .service-symbol{
  color:inherit;text-shadow:none
}
.service-card:hover{
  box-shadow:0 14px 30px rgba(2,12,24,.18);
  border-color:rgba(147,205,234,.44)
}
.button-primary:hover,.header-contact:hover,.business-cta-link:hover{
  filter:brightness(1.055)
}

/* The photo does NOT follow the cursor. It only gains cinematic depth
   as the reader scrolls past it. The HTML hotspots remain in place. */
@media(prefers-reduced-motion:no-preference){
  body.neo-cinematic-ready .ref-full-image{
    transform:scale(var(--neo-photo-scale,1))
      translateY(var(--neo-photo-shift,0px));
    transform-origin:50% 42%;
  }
  body.neo-cinematic-ready .ref-mobile-backdrop{
    animation:none!important;
    transform:scale(var(--neo-mobile-photo-scale,1))
      translateY(var(--neo-mobile-photo-shift,0px));
    transform-origin:50% 47%;
    transition:transform .13s linear
  }
  body.neo-cinematic-ready .ref-hero::before{
    background:linear-gradient(180deg,transparent 21%,rgba(3,12,25,.26) 63%,rgba(3,11,22,.98) 99%);
    opacity:calc(var(--neo-scene-progress,0) * .94)
  }
}

/* Scroll-position markers: one per section, repeated naturally when moving
   down or back up, rather than a once-only fade. */
.neo-scroll-scene .neo-chapter-index{
  position:absolute;z-index:3;pointer-events:none;
  right:clamp(24px,6vw,98px);top:clamp(26px,3.6vw,56px);
  display:inline-flex;align-items:center;gap:13px;
  font:700 10px/1.3 'DM Sans','Noto Sans JP',sans-serif;
  letter-spacing:.25em;
  color:#9ec8dd;
  opacity:var(--neo-chapter-opacity,.06);
  transform:translate3d(0,var(--neo-chapter-offset,12px),0);
  transition:opacity .16s linear,transform .16s linear
}
.neo-chapter-index::before{
  content:"";width:22px;height:1px;flex-shrink:0;
  background:linear-gradient(90deg,#3ca6e2,#bcecff)
}
#vision .neo-chapter-index,#company .neo-chapter-index{color:#35607a}
#vision .neo-chapter-index::before,#company .neo-chapter-index::before{
  background:linear-gradient(90deg,#1c7fac,#5fb4d9)
}

/* Light travels across the chapter boundary in response to actual movement. */
.neo-scroll-scene .neo-scene-trace{
  height:2px;
  opacity:var(--neo-trace-opacity,.13);
  transition:opacity .14s linear
}
.neo-scroll-scene .neo-scene-trace::before{
  transform:scaleX(var(--neo-line-scale,0));
  box-shadow:0 0 12px rgba(67,157,212,.2);
  transition:transform .14s linear
}
body.neo-chapters-v4 .neo-scroll-scene.neo-section-active .neo-scene-trace{opacity:1}

/* Opening-to-hero handoff: once the real logo dissolves away, the preserved
   skyline image enters softly, not with a wipe or zooming mouse parallax. */
@media(prefers-reduced-motion:no-preference){
  body.neo-hero-arrived .ref-desktop-art{
    animation:neo-hero-arrival 1s cubic-bezier(.2,.65,.2,1) both
  }
  body.neo-hero-arrived .ref-mobile-content{
    animation:neo-hero-content-arrival .85s cubic-bezier(.18,.74,.25,1) both
  }
}
@keyframes neo-hero-arrival{
  from{opacity:.78;filter:brightness(.78)}
  to{opacity:1;filter:brightness(1)}
}
@keyframes neo-hero-content-arrival{
  from{opacity:.22;transform:translate3d(0,20px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@media(max-width:900px){
  .neo-scroll-scene .neo-chapter-index{
    top:22px;right:clamp(16px,5vw,32px);
    font-size:9px;letter-spacing:.19em;gap:8px;
  }
  .neo-chapter-index::before{width:13px}
  body.neo-cinematic-ready .ref-mobile-backdrop{animation:none!important}
}
@media(prefers-reduced-motion:reduce){
  .neo-scroll-scene .neo-chapter-index{
    opacity:.75;transform:none;transition:none
  }
  .neo-scroll-scene .neo-scene-trace,
  .neo-scroll-scene .neo-scene-trace::before{transition:none}
  .ref-full-image,.ref-mobile-backdrop{transform:none!important}
}

/* The opening dialog receives initial programmatic focus, never a bright
   focus ring. The actual SKIP button keeps its keyboard-visible outline. */
.neo-intro:focus,.neo-intro:focus-visible{outline:none!important}