/* ═══════════════════════════════════════════════════════════════
   v6 signature motion layer — Foothold Japan
   Builds on base.css / base-part2.css. Light-toned, transform/opacity
   + canvas only. Every hidden initial state is gated behind html.js so
   the page stays fully readable with JavaScript disabled, and everything
   collapses to a calm static state under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · hero canvas — dotted 3D globe, arcs converging on Japan ── */
.hero-globe{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  pointer-events:none;opacity:.95;
}
@media(max-width:1024px){.hero-globe{opacity:.75}}
@media(max-width:560px){.hero-globe{display:none}}   /* readability first on phones */
/* 演出2 · globe fades + settles in, slightly after the copy lands */
html.js .hero-globe{
  opacity:0;transform:scale(.955);transform-origin:72% 52%;
  animation:globeIn 1.2s cubic-bezier(.22,1,.36,1) .4s forwards;
}
@keyframes globeIn{to{opacity:.95;transform:none}}
@media(max-width:1024px){html.js .hero-globe{animation-name:globeInDim}}
@keyframes globeInDim{to{opacity:.75;transform:none}}

/* ── 2 · hero entrance choreography (≤1.6s, all CSS, html.js-gated) ── */
/* kicker rule sweeps left→right */
html.js .hero-label::after{
  transform:scaleX(0);transform-origin:left center;
  animation:lineGrow .6s cubic-bezier(.22,1,.36,1) .35s forwards;
}
@keyframes lineGrow{to{transform:scaleX(1)}}
/* H1 rises line-by-line behind a clip mask (develops v5's single wipe) */
h1.hl-head{max-width:15ch}
h1.hl-head .hl{display:block;overflow:hidden;padding-bottom:.04em}
h1.hl-head .hl-i{display:block}
html.js h1.hl-head{clip-path:none!important;transition:none!important}
html.js h1.hl-head .hl-i{
  transform:translateY(112%);
  transition:transform .85s cubic-bezier(.16,.84,.28,1);
}
html.js h1.hl-head.head-go .hl:nth-child(1) .hl-i{transition-delay:.12s}
html.js h1.hl-head.head-go .hl:nth-child(2) .hl-i{transition-delay:.21s}
html.js h1.hl-head.head-go .hl-i{transform:translateY(0)}
/* CTA card slides in from the right */
html.js .v6-cta{
  opacity:0;transform:translateX(30px);
  animation:ctaIn .8s cubic-bezier(.22,1,.36,1) .7s forwards;
}
@keyframes ctaIn{to{opacity:1;transform:none}}

/* ── header shrink + shadow on scroll ── */
.nav-in{transition:height .35s cubic-bezier(.22,1,.36,1)}
nav{transition:box-shadow .35s ease}
nav.scrolled .nav-in{height:52px}
nav.scrolled{box-shadow:0 10px 30px -22px rgba(20,20,20,.35)}
.hero-bg .glow{will-change:transform}

/* ── staggered child reveal (cards rise one after another) ── */
html.js .disc-grid .disc{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),
             background .25s,border-color .25s,box-shadow .25s;
}
html.js .disc-grid .disc.in{opacity:1;transform:none}
html.js .insights-grid .ins-card{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),
             border-color .3s,box-shadow .3s;
}
html.js .insights-grid .ins-card.in{opacity:1;transform:none}
html.js .tiers .tier{
  opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1);
}
html.js .tiers .tier.in{opacity:1;transform:none}

/* ── 5 · section-heading mask line (signature accent under every h2) ── */
.sec-head h2{position:relative}
html.js .sec-head h2::after{
  content:"";position:absolute;left:0;bottom:-.42em;height:2px;width:46px;
  background:var(--blue);transform:scaleX(0);transform-origin:left center;
  transition:transform .7s cubic-bezier(.22,1,.36,1) .3s;
}
html.js .sec-head.in h2::after{transform:scaleX(1)}
/* safety: headings whose .sec-head sits inside a revealed .sr wrapper
   (e.g. the contact block) still reveal fully — never left hidden */
html.js .sr.in .sec-head h2{clip-path:inset(0 0 0 0);transform:none;opacity:1}
html.js .sr.in .sec-head h2::after{transform:scaleX(1)}

/* ── 5 · marquee keyword band (decorative; between stats and services) ── */
.marquee{border-bottom:1px solid var(--hair);background:var(--bg);overflow:hidden}
.marquee-track{display:flex;width:max-content;will-change:transform;animation:mq 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;flex:none}
.mq-set span{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#b6b6b0;padding:11px 20px;white-space:nowrap}
.mq-set i{font-style:normal;color:var(--blue);opacity:.45}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── 5 · magnet CTA + hover polish ── */
.magnetic{will-change:transform;transition:transform .3s cubic-bezier(.22,1,.36,1),background .2s,box-shadow .2s}
.mini-link{transition:border-color .25s,transform .25s,box-shadow .25s}
.mini-link:hover{transform:translateY(-2px);box-shadow:0 14px 30px -22px rgba(15,71,228,.4)}
.alt-row{transition:background .18s,transform .2s}
.market .m-row{transition:background .25s}
.market .m-row:not(.me):hover{background:rgba(20,20,20,.02)}
/* link underline sweep (reinforces nav's language on text links) */
.work-tease,.ins-more a,.ins-foot a{position:relative}

/* ── 4 · stat odometer (digit strips) ── */
.odo-wrap{display:inline-flex;align-items:baseline}
.odo-col{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:baseline}
.odo-strip{display:flex;flex-direction:column;transform:translateY(0)}
.odo-strip.roll{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.odo-col b{display:block;height:1em;line-height:1;font-weight:inherit;font-style:normal;text-align:center}
.odo-sep{display:inline-block}

/* ── 3 · Approach scroll-progress rail + odometer (desktop signature) ──
   The rich Approach comparison keeps its native layout and scrolls normally;
   a slim fixed rail tracks progress through the section and steps an
   odometer 01 → 02 → 03. No content is hidden or restructured, so JS-off,
   mobile and reduced-motion all fall back to the plain stacked section. */
.appx-rail{
  position:fixed;left:clamp(14px,3vw,44px);top:0;height:100vh;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.appx-rail.on{opacity:1}
.appx-num{font-family:var(--mono);font-weight:600;font-size:16px;color:var(--blue);height:1em;line-height:1;overflow:hidden}
.appx-line{position:relative;width:2px;height:min(44vh,340px);background:var(--hair);border-radius:2px}
.appx-line i{position:absolute;inset:0;background:var(--blue);border-radius:2px;transform:scaleY(0);transform-origin:top center}
.appx-cap{writing-mode:vertical-rl;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-soft)}
@media(max-width:1080px){.appx-rail{display:none!important}}

/* ── no-JS safety: everything observers would reveal stays visible ── */
html:not(.js) .pcx-p,
html:not(.js) .pcx-solo-ic,
html:not(.js) .cmpx-m .ppl,
html:not(.js) .cmpx-m-card.b .solo-ic,
html:not(.js) .pcx-flow .fl-pt,
html:not(.js) .pcx-flow .fl-label{opacity:1!important;transform:none!important;transition:none!important}
html:not(.js) .pcx-flow .fl-shaft{transform:none!important;transition:none!important}
html:not(.js) .pcx-card.a .pcx-fill{width:100%}
html:not(.js) .pcx-card.b .pcx-fill.cost{width:40%}
html:not(.js) .pcx-card.b .pcx-fill.time{width:25%}
html:not(.js) .cmpx-m-card.a .cost-bar i.on{background:var(--red)}
html:not(.js) .cmpx-m-card.b .cost-bar i.on{background:var(--blue)}

/* ── reduced motion: static, fully visible, zero animation ── */
@media(prefers-reduced-motion:reduce){
  .hero-globe{opacity:.5}
  html.js .hero-globe{animation:none!important;opacity:.5;transform:none}
  html.js .hero-label::after{animation:none!important;transform:none}
  html.js h1.hl-head .hl-i{transform:none!important;transition:none!important}
  html.js .v6-cta{animation:none!important;opacity:1;transform:none}
  html.js .sec-head h2::after{transition:none!important;transform:scaleX(1)}
  .nav-in,nav{transition:none!important}
  nav.scrolled .nav-in{height:64px}
  .hero-bg .glow{transform:none!important}
  .marquee-track{animation:none!important;transform:none}
  html.js .disc-grid .disc,
  html.js .insights-grid .ins-card,
  html.js .tiers .tier{opacity:1!important;transform:none!important;transition:none!important}
  .magnetic,.mini-link,.alt-row{transition:none!important;transform:none!important}
  .appx-rail{display:none!important}
  .odo-strip{transition:none!important}
}

/* ── §1 Response · instant press feedback (2026-07-19 apple-design pass) ──
   Feedback used to live only on :hover — touch devices got no acknowledgment
   on tap until the page changed. This layer adds pointer-down (:active)
   response. Skin unchanged: feel only. Compositor-only (transform/opacity/
   background). Fully collapses under reduced-motion. ── */

/* primary buttons — crisp scale-down on press */
.btn:active,
.contact .btn:active,
.ghost:active,
.mini-link:active,
.tier .t-cta:active,
.qz-go:active,
.qz-prev:active,
.disc-modal-x:active{
  transform:scale(.97);
  transition:transform .1s cubic-bezier(.4,0,.2,1);
}
/* hero CTA keeps its hover-lift; settle it on press rather than a bare shrink */
.hero-cta .btn:active{transform:translateY(-1px) scale(.98);transition:transform .1s cubic-bezier(.4,0,.2,1)}

/* text links — dip opacity, don't shrink (scaling small text reads cheap) */
.nav-links a:active,
.lang a:not(.on):active,
.ins-foot a:active,
.ins-more a:active,
footer a:active{opacity:.55;transition:opacity .1s ease-out}

/* large tappable surfaces — soft settle / tint, never a hard shrink */
.disc:active,
.ins-card:active{transform:scale(.99);transition:transform .12s cubic-bezier(.4,0,.2,1)}
.alt-row:active,
.market .m-row:not(.me):active{background:var(--blue-tint)}

/* touch: no hover exists, so surface the hover-lift as an active state too */
@media(hover:none){
  .mini-link:active{transform:translateY(-1px) scale(.98)}
}

/* reduced-motion: keep the acknowledgment, drop the movement */
@media(prefers-reduced-motion:reduce){
  .btn:active,.hero-cta .btn:active,.contact .btn:active,.ghost:active,
  .mini-link:active,.tier .t-cta:active,.qz-go:active,.qz-prev:active,
  .disc:active,.ins-card:active,.disc-modal-x:active{transform:none!important}
  .btn:active,.hero-cta .btn:active,.contact .btn:active,.ghost:active{opacity:.85}
}