.page:not(.page--hero) { background-image: var(--background-landscape), var(--background-pattern); background-repeat: no-repeat, repeat; background-size: var(--background-mountain-size), 420px 389px; background-position: var(--background-mountain-position), 28px 82px; }
.stage:has(#p1.is-active), #p1 { --background-pattern: url("assets/background-infrastructure.svg"); }
.stage:has(#p2.is-active), #p2 { --background-pattern: url("assets/background-journey.svg"); }
.stage:has(#p3.is-active), #p3 { --background-pattern: url("assets/background-holiday.svg"); }
.stage:has(#p4.is-active), #p4 { --background-pattern: url("assets/background-skills.svg"); }
.stage:has(#p5.is-active), #p5 { --background-pattern: url("assets/background-pipeline.svg"); }
.stage:has(#p6.is-active), #p6 { --background-pattern: url("assets/background-measurement.svg"); }
.stage:has(#p7.is-active), #p7 { --background-pattern: url("assets/background-workflow.svg"); }
.stage:has(#p8.is-active), #p8 { --background-pattern: url("assets/background-team.svg"); }
.stage:has(#company.is-active), #company { --background-pattern: url("assets/background-office.svg"); }
.stage:has(#requirements.is-active), #requirements { --background-pattern: url("assets/background-recruitment.svg"); }
.stage:has(#entry.is-active), #entry { --background-pattern: url("assets/background-application.svg"); }
.chapter--concept { --background-landscape: url("assets/background-route-map.svg"); --background-mountain-size: 190% auto; --background-mountain-position: 56% 108%; }
.chapter--holiday { --background-landscape: url("assets/background-mountains.svg"); --background-mountain-size: 235% auto; --background-mountain-position: 44% 101%; }
.chapter--scenery { --background-landscape: url("assets/background-pipeline-landscape.svg"); --background-mountain-size: 205% auto; --background-mountain-position: 73% 108%; }
.rail { background-image: url("assets/background-mountains.svg"), var(--background-pattern, url("assets/background-travel.svg")); background-repeat: no-repeat, repeat; background-size: auto 56dvh, 480px 444px; background-position: center 118%, 18px 30px; }
.rail-logo, .rail-side { position: relative; z-index: 1; }
.brand-stamp { display: block; padding: 5px 4px; background: var(--color-main); border-radius: var(--radius-s); }
.chapter-heading { flex-shrink: 0; display: grid; gap: var(--sp-1); font-family: var(--font-head); font-size: var(--fs-head); font-weight: 800; line-height: var(--lh-head); letter-spacing: 0.025em; }
.chapter-kicker { font-family: var(--font-en); font-size: var(--fs-ui); font-weight: 700; letter-spacing: 0.07em; line-height: 1.5; }
.chapter-title { text-wrap: pretty; }
.chapter-title::after { content: ""; display: block; width: 2.5em; height: 3px; margin-top: 0.3em; background: var(--color-accent); border-radius: var(--radius-pill); }
.txt { display: grid; gap: var(--sp-p); }
.chapter-close { font-weight: 700; }
.scene-slot { display: flex; flex-shrink: 0; align-items: center; justify-content: center; height: var(--scene-h); }
.scene { display: block; width: 100%; height: 100%; overflow: visible; color: var(--color-main); }
.draw { fill: none; stroke: currentColor; stroke-width: var(--line-art); stroke-linecap: round; stroke-linejoin: round; filter: url(#ink-rough); }
.ink-main { fill: var(--color-main); }
.ink-blue { fill: var(--color-ink-blue); }
.ink-mint { fill: var(--color-ink-mint); }
.ink-paper { fill: var(--color-base); }
.ink-hot { fill: var(--color-accent); }
.ink-pale { fill: var(--color-ink-pale); }
.scene-float { animation: scene-float var(--float-time) ease-in-out infinite alternate; animation-play-state: paused; transform-box: fill-box; transform-origin: center; }
.scene-float.is-moving { animation-play-state: running; }
@keyframes scene-float { to { translate: 0 -4px; rotate: 1deg; } }
.chapter--about .scene-slot, .chapter--concept .scene-slot { height: var(--scene-compact-h); }
.chapter--holiday { background: var(--color-pale); }
.chapter--holiday .chapter-close { padding-inline-start: 0.8em; border-inline-start: 3px solid var(--color-accent); }
.chapter--skills .txt { position: relative; padding: 1.1em; border: 2px solid var(--color-main); border-radius: 7px 11px 6px 10px; background: var(--color-base); }
.chapter--skills .txt::before { content: ""; position: absolute; top: -6px; left: 43%; width: 14%; height: 10px; border: 2px solid var(--color-main); border-radius: 3px; background: var(--color-wash); }
.chapter--scenery .scene-slot { border-block: 1px dashed var(--color-line); }
.work-slider { min-width: 0; flex-shrink: 0; }
.work-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.work-track::-webkit-scrollbar { display: none; }
.work-card { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-p); scroll-snap-align: start; scroll-snap-stop: always; }
.work-heading { font-family: var(--font-head); font-size: max(var(--fs-min), 1.12em); line-height: 1.5; font-weight: 800; }
.work-photo { flex-shrink: 0; width: 100%; height: clamp(160px, 30dvh, 288px); object-fit: cover; object-position: center top; background: var(--color-pale); border: 1px solid var(--color-line); border-radius: 5px 8px 4px 6px; }
.work-card .body { font-size: max(var(--fs-min), 0.93em); line-height: 1.65; }
.work-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 0.6em; font-size: var(--fs-ui); line-height: 1; }
.work-arrow { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-main); border-radius: 50%; color: var(--color-main); background: var(--color-base); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.work-arrow:disabled { border-color: var(--color-line); background: var(--color-pale); cursor: default; }
.chapter--flow .scene-slot { height: clamp(24px, 8dvh, 100px); }
.day-flow { display: grid; gap: var(--sp-p); }
.flow-step { position: relative; padding-inline-start: 2em; }
.flow-step::before { content: ""; position: absolute; top: 0.25em; left: 0; width: 1em; height: 1em; border: 2px solid var(--color-main); border-radius: 2px; rotate: -3deg; background: var(--color-wash); }
.flow-heading, .person-heading { font-family: var(--font-head); font-size: 1em; font-weight: 800; line-height: 1.5; }
.flow-step .body { font-size: max(var(--fs-min), 0.93em); }
.chapter--people { background: var(--color-pale); }
.person-note { padding: 0.8em 1em; border: 1px solid var(--color-main); border-radius: 4px 8px 5px 3px; background: var(--color-base); }
.person-heading { margin-bottom: var(--sp-1); }
.company-info { display: grid; gap: var(--sp-p); font-weight: var(--fw-body); }
.company-row { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: var(--sp-p); padding-block: 0.5em; border-bottom: 1px solid var(--color-line); }
.company-row dt { font-weight: 700; white-space: nowrap; }
.rail-brand { padding: 12px; border-radius: var(--radius-s); background: var(--color-main); }
.rail-journey { font-family: var(--font-head); font-size: clamp(18px, 2vw, 30px); line-height: 1.65; font-weight: 800; }
@media (max-height: 600px) {
  .chapter--flow .chapter-heading { font-size: 20px; }
  .chapter--flow .day-flow { gap: 0.4em; }
  .chapter--flow .flow-step { padding-inline-start: 1.65em; }
  .chapter--people .scene-slot { height: 58px; }
  .person-note { padding: 0.65em 0.8em; }
  .work-card .body { line-height: 1.5; }
  .work-photo { height: clamp(128px, 24dvh, 144px); }
}

@media (min-height: 900px) {
  .chapter--company .scene-slot { height: min(28dvh, 320px); }
}

.art-motion { animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: paused; transform-box: fill-box; transform-origin: center; }
.art-motion.is-moving { animation-play-state: running; }
.motion-drive { animation-name: art-drive; animation-duration: 5s; animation-timing-function: linear; }
.motion-sun { animation-name: art-sunrise; animation-duration: 7s; }
.motion-hike { animation-name: art-step; animation-duration: 1.6s; transform-origin: center bottom; }
.motion-inspect { animation-name: art-inspect; animation-duration: 3.6s; transform-box: view-box; transform-origin: 178px 69px; }
.motion-needle { animation-name: art-needle; animation-duration: 2.8s; transform-box: view-box; transform-origin: 185px 87px; }
.motion-readout { animation-name: art-reading; animation-duration: 2.8s; }
.motion-spark { animation-name: art-spark; animation-duration: 3.2s; opacity: 0; }
.motion-spark--late { animation-delay: 1.6s; }
.motion-current { animation-name: art-current; animation-duration: 3s; animation-timing-function: linear; }
.motion-wave-left { animation-name: art-wave-left; animation-duration: 3.2s; transform-box: view-box; transform-origin: 107px 67px; }
.motion-wave-right { animation-name: art-wave-right; animation-duration: 3.8s; transform-box: view-box; transform-origin: 250px 66px; }
.motion-pencil { animation-name: art-write; animation-duration: 2.6s; transform-origin: left bottom; }
.motion-check { animation-name: art-check; animation-duration: 4.2s; }
.motion-check--1 { animation-delay: 0s; }
.motion-check--2 { animation-delay: .35s; }
.motion-check--3 { animation-delay: .7s; }
@keyframes art-drive {
  0% { translate: -24px 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { translate: 24px 0; opacity: 0; }
}
@keyframes art-sunrise {
  0%, 100% { translate: 0 8px; opacity: .35; }
  25%, 75% { translate: 0 -5px; opacity: 1; }
  90% { translate: 0 -5px; opacity: 0; }
}
@keyframes art-step { 0%, 100% { translate: -1px 0; rotate: -.5deg; } 50% { translate: 2px -1.5px; rotate: .7deg; } }
@keyframes art-inspect { 0%, 100% { rotate: -3deg; } 45%, 65% { rotate: 5deg; } }
@keyframes art-needle { 0%, 100% { rotate: -12deg; } 45%, 65% { rotate: 10deg; } }
@keyframes art-reading { 0%, 100% { opacity: .45; } 45%, 65% { opacity: 1; } }
@keyframes art-spark { 0%, 25%, 72%, 100% { opacity: 0; scale: .7; } 42%, 55% { opacity: .85; scale: 1; } }
@keyframes art-current { from { stroke-dashoffset: 78; } to { stroke-dashoffset: 0; } }
@keyframes art-wave-left { 0%, 55%, 100% { rotate: 0deg; } 15%, 40% { rotate: -8deg; } 28% { rotate: 4deg; } }
@keyframes art-wave-right { 0%, 55%, 100% { rotate: 0deg; } 15%, 40% { rotate: 8deg; } 28% { rotate: -4deg; } }
@keyframes art-write { 0%, 100% { translate: 0 0; rotate: 0deg; } 35% { translate: -2px 1px; rotate: -3deg; } 65% { translate: 1px -2px; rotate: 2deg; } }
@keyframes art-check { 0%, 12% { opacity: .15; scale: .7; } 28%, 78% { opacity: 1; scale: 1; } 100% { opacity: .15; scale: .7; } }
@media (prefers-reduced-motion: reduce) {
  .art-motion { animation: none; translate: none; rotate: none; scale: none; opacity: 1; }
}

.flow-artwork { position: relative; }
.flow-checks { position: absolute; inset-block: 0; display: flex; align-items: center; justify-content: space-between; width: max(0px, calc(50% - clamp(24px, 7.5dvh, 94px))); pointer-events: none; }
.flow-checks--left { left: 0; }
.flow-checks--right { right: 0; }
.flow-check { flex: 0 0 auto; width: clamp(14px, 3.4dvh, 30px); height: clamp(14px, 3.4dvh, 30px); overflow: visible; }

.text-motion-ready .rv { opacity: 1; transform: none; transition: none; }
.text-motion-playing .chapter-title::after { transform-origin: left center; animation: text-underline 640ms cubic-bezier(.4,0,.2,1) 290ms both; }
.text-motion-playing .flow-step::after { content: ""; position: absolute; left: .37em; top: .4em; width: .3em; height: .55em; border-right: 2px solid var(--color-main); border-bottom: 2px solid var(--color-main); transform: rotate(45deg); animation: text-step-check 460ms cubic-bezier(.4,0,.2,1) var(--text-step-delay, 390ms) both; }
@keyframes text-underline { from { transform: scaleX(0); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
@keyframes text-step-check { from { clip-path: inset(100% 0 0 0); opacity: 0; } to { clip-path: inset(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .text-motion-playing .chapter-title::after, .text-motion-playing .flow-step::after { animation: none; }
}

.page:not(.page--hero):not(.text-motion-ready) .page__inner,
.page:not(.page--hero):not(.page--long):not(.is-active) .page__inner,
.page--long:not(.text-motion-entered) .page__inner { visibility: hidden; }
.text-motion-ready.page--long .req__row:not(.text-seen),
.text-motion-ready.page--long .field:not(.text-seen),
.text-motion-ready.page--long .form__submit:not(.text-seen) { opacity: 0; }

.is-navigating .draw { filter: none; }
.is-navigating .art-motion.is-moving, .is-navigating .scene-float.is-moving { animation-play-state: paused; }