/* 起動: one measured opening sequence, using the original logo artwork. */
:root { --motion-ease:cubic-bezier(.45,0,.25,1); }
#main { position:relative; }
.hero-logo { animation:none; }
.hero h1 .hero-line { display:inline-block; color:inherit; }
.hero h1 .hero-line-action { color:var(--red); }
.eyebrow-accent { color:var(--red-surface); }
.motion-start .hero-line { animation:copy-start 1200ms var(--motion-ease) both; }
.motion-start .hero-line-action { animation-delay:300ms; }
.hero-logo.motion-logo { animation:logo-forward 1800ms var(--motion-ease) both; }
.motion-logo .logo-crop { animation:logo-unfold 1600ms var(--motion-ease) both; }
.hero-logo .logo-crop:after {
  content:''; position:absolute; inset:-15% -35%; pointer-events:none; opacity:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.08) 46%,rgba(255,255,255,.55) 50%,transparent 57%);
  transform:translateX(-65%);
}
.motion-logo .logo-crop:after { animation:fold-light 1600ms 400ms var(--motion-ease) both; }
@keyframes copy-start {
  from { transform:translate(-12px,9px); opacity:.45; }
  to { transform:translate(0,0); opacity:1; }
}
@keyframes logo-forward {
  from { transform:translate(-18px,10px); }
  to { transform:translate(0,0); }
}
@keyframes logo-unfold {
  from { clip-path:polygon(0 0,5% 0,0 100%,0 100%); }
  to { clip-path:polygon(0 0,115% 0,100% 100%,0 100%); }
}
@keyframes fold-light {
  0% { transform:translateX(-65%); opacity:0; }
  20% { opacity:1; }
  85% { opacity:1; }
  100% { transform:translateX(65%); opacity:0; }
}

/* 軌道: a folded route in the outer gutter, never over the text. */
.motion-route { position:absolute; top:0; left:0; width:100%; pointer-events:none; z-index:2; overflow:hidden; }
.motion-route[hidden] { display:none; }
.motion-route path { fill:none; stroke-linecap:square; stroke-linejoin:miter; }
.motion-route-halo { stroke:#fff; stroke-width:5; opacity:.65; }
.motion-route-trail { stroke:var(--red-surface); stroke-width:2; opacity:.17; }
.motion-route-progress { stroke:var(--red); stroke-width:2.5; transition:stroke-dashoffset 200ms ease-out; }
.motion-enter { animation:route-arrival 1000ms var(--motion-ease) both; }
@keyframes route-arrival {
  from { transform:translate(-12px,10px); opacity:.6; }
  to { transform:translate(0,0); opacity:1; }
}

/* 機動: the red surface sweeps forward while labels remain readable. */
:is(.nav-contact,.service-action,.contact .submit) {
  background-image:linear-gradient(var(--deep),var(--deep));
  background-repeat:no-repeat; background-size:0% 100%; background-position:left center;
  transition:background-size 350ms var(--motion-ease),color 250ms ease,transform 250ms var(--motion-ease),box-shadow 250ms ease;
}
/* Keep the same pacing for link arrows and smaller controls on this page. */
:is(.nav-contact,.service-action,.contact .submit,.text-link,.hero-bottom a) [aria-hidden] {
  transition:transform 250ms var(--motion-ease);
}
body :is(.menu-toggle,.back-top) {
  transition:transform 250ms var(--motion-ease),box-shadow 250ms ease,background-color 250ms ease,color 250ms ease;
}
body :is(.menu-toggle,.back-top):not(:disabled):not([aria-disabled="true"]):active { transition-duration:100ms; }
:is(.text-link,.hero-bottom a) { transition:color 250ms ease,border-color 250ms ease; }
.service-action { background-color:var(--red-surface); color:#fff; outline:1px solid #ffffffa6; outline-offset:-1px; }
:is(.nav-contact,.service-action,.contact .submit):not(:disabled):not([aria-disabled="true"]):is(:hover,:focus-visible,:active) {
  background-image:linear-gradient(var(--deep),var(--deep));
  background-repeat:no-repeat; background-position:left center;
}
:is(.nav-contact,.service-action,.contact .submit):not(:disabled):not([aria-disabled="true"]):focus-visible {
  background-size:100% 100%; color:#fff;
}
:is(.nav-contact,.service-action,.contact .submit):not(:disabled):not([aria-disabled="true"]):focus-visible [aria-hidden] { transform:translate(4px,-2px); }
.text-link:focus-visible [aria-hidden] { transform:translate(3px,-3px); }
.hero-detail .text-link:focus-visible [aria-hidden],.hero-bottom a:focus-visible [aria-hidden] { transform:translateY(4px); }
@media (hover:hover) and (pointer:fine) {
  :is(.nav-contact,.service-action,.contact .submit):not(:disabled):not([aria-disabled="true"]):hover {
    background-color:var(--red-surface); background-size:100% 100%; color:#fff;
    transform:translate(2px,-2px); box-shadow:0 5px 12px #22222618;
  }
  :is(.nav-contact,.service-action,.contact .submit):not(:disabled):not([aria-disabled="true"]):hover [aria-hidden] { transform:translate(4px,-2px); }
}
:is(.nav-contact,.service-action,.contact .submit):not(:disabled):not([aria-disabled="true"]):active {
  background-size:100% 100%; color:#fff; transform:translate(1px,1px); box-shadow:none; transition-duration:100ms;
}
:is(.nav-contact,.service-action,.contact .submit):is(:disabled,[aria-disabled="true"]) { background-size:0% 100%; }
@media (max-width:700px) {
  .motion-start .hero-line { animation-duration:1000ms; }
  .motion-start .hero-line-action { animation-delay:250ms; }
  .hero-logo.motion-logo { animation-duration:1500ms; }
  .motion-logo .logo-crop { animation-duration:1400ms; }
  .motion-logo .logo-crop:after { animation-duration:1300ms; animation-delay:300ms; }
  .motion-enter { animation-duration:800ms; }
  .motion-route-halo { stroke-width:4; }
  .motion-route-progress { stroke-width:2; }
}
@media (prefers-reduced-motion:reduce) {
  .motion-route,.hero-logo .logo-crop:after { display:none; }
  .hero-line,.hero-logo,.hero-logo .logo-crop,.motion-enter { animation:none!important; transform:none!important; clip-path:none!important; opacity:1!important; }
  :is(.nav-contact,.service-action,.contact .submit),.text-link [aria-hidden],.hero-bottom a [aria-hidden] { transition:none!important; transform:none!important; }
}