:root { --ink:#17201d; --paper:#fffef8; --muted:#5b625c; --orange:#f4771b; --line:rgba(23,32,29,.24); --gutter:clamp(1.25rem,4.2vw,4.6rem); --display:"Manrope",Arial,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--display); }
a,button { color:inherit; font:inherit; } a { text-decoration:none; } button { border:0; }
.topbar,.chapter-rail,.copy-layer,.corner-meta,.start-control,.scroll-hint,.light-wash { display:none !important; }
.factory { position:relative; min-height:100svh; background:var(--paper); }
.factory-stage { position:fixed; z-index:0; inset:0; overflow:hidden; background:#e6e5db; }
.scene-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 180ms linear; }
.scene-video.is-active { opacity:1; }
.light-wash { position:absolute; inset:0; pointer-events:none; background:rgba(255,254,248,.08); }
.topbar { position:fixed; z-index:5; top:0; right:0; left:0; display:flex; align-items:center; justify-content:space-between; padding:1.7rem var(--gutter); }
.brand { font-size:.8rem; font-weight:700; letter-spacing:.1em; }.brand span { color:var(--orange); }
.topbar-status,.topbar-contact { margin:0; font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; }
.topbar-status { display:flex; align-items:center; gap:.55rem; color:var(--muted); }.topbar-status i { width:.4rem; height:.4rem; border-radius:50%; background:var(--orange); box-shadow:0 0 12px var(--orange); animation:pulse 1.6s ease-in-out infinite; }
.topbar-contact { border-bottom:1px solid var(--line); padding-bottom:.28rem; transition:color 180ms ease,border-color 180ms ease; }.topbar-contact:hover,.topbar-contact:focus-visible { color:var(--orange); border-color:var(--orange); }
.chapter-rail { position:fixed; z-index:4; bottom:4.65rem; left:var(--gutter); display:flex; align-items:center; gap:.65rem; font-family:var(--mono); font-size:.58rem; }
.rail-number { width:1.25rem; color:var(--muted); }.rail-number:first-child { color:var(--ink); }.rail-track { position:relative; display:block; width:clamp(3rem,8vw,7rem); height:1px; background:var(--line); }.rail-track i { position:absolute; top:0; left:0; display:block; width:var(--progress,0%); height:1px; background:var(--orange); box-shadow:0 0 10px var(--orange); }
.copy-layer { position:fixed; z-index:3; top:31%; left:max(var(--gutter),calc((100vw - 1450px) / 2)); width:min(39rem,calc(100vw - var(--gutter) * 2)); height:22rem; pointer-events:none; }
.chapter { position:absolute; inset:0; opacity:0; transform:translateY(1.6rem); transition:opacity 420ms ease,transform 520ms cubic-bezier(.2,.8,.2,1); }.chapter.is-active { opacity:1; transform:translateY(0); }
.eyebrow { display:flex; align-items:center; gap:.7rem; margin:0 0 1.65rem; color:var(--muted); font-family:var(--mono); font-size:.61rem; letter-spacing:.1em; text-shadow:0 1px 12px rgba(255,255,255,.86); }.eyebrow span { width:2.4rem; height:1px; background:var(--orange); }
.chapter h1,.chapter h2 { max-width:13ch; margin:0; font-size:clamp(2.35rem,4.25vw,4.85rem); font-weight:600; letter-spacing:0; line-height:.98; text-shadow:0 1px 20px rgba(255,254,248,.96); }.chapter h1 { max-width:11ch; }
.chapter-copy { max-width:24rem; margin:1.65rem 0 0; color:#38413a; font-size:clamp(.78rem,1vw,.95rem); font-weight:500; line-height:1.75; text-shadow:0 1px 14px rgba(255,254,248,.92); }
.corner-meta { position:fixed; z-index:4; bottom:1.65rem; display:flex; gap:.85rem; color:var(--muted); font-family:var(--mono); font-size:.56rem; letter-spacing:.06em; text-shadow:0 1px 12px rgba(255,255,255,.9); }.corner-meta--left { left:var(--gutter); }.corner-meta--right { right:var(--gutter); }
.start-control { position:fixed; z-index:6; right:var(--gutter); bottom:4.5rem; display:inline-flex; align-items:center; gap:.72rem; padding:0; background:transparent; color:var(--ink); cursor:pointer; font-family:var(--mono); font-size:.59rem; letter-spacing:.08em; transition:opacity 260ms ease,color 180ms ease; }.start-control i { display:block; width:2.25rem; height:1px; background:var(--ink); transition:transform 180ms ease,background 180ms ease; }.start-control:hover,.start-control:focus-visible { color:var(--orange); }.start-control:hover i,.start-control:focus-visible i { background:var(--orange); transform:scaleX(1.25); transform-origin:left; }.start-control.is-hidden { opacity:0; pointer-events:none; }
.scroll-hint { position:fixed; z-index:4; right:var(--gutter); bottom:1.65rem; display:flex; align-items:center; gap:.65rem; color:var(--ink); font-family:var(--mono); font-size:.54rem; letter-spacing:.08em; text-shadow:0 1px 12px rgba(255,255,255,.9); transition:opacity 260ms ease; }.scroll-hint i { width:2.5rem; height:1px; background:var(--ink); animation:scan 1.8s ease-in-out infinite; }.scroll-hint.is-hidden { opacity:0; }.scroll-space { height:420svh; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.7); } } @keyframes scan { 50% { transform:scaleX(.45); transform-origin:left; opacity:.3; } }
@media (max-width:700px) { .topbar { padding-top:1.1rem; padding-bottom:1.1rem; }.topbar-status { display:none; }.chapter-rail { bottom:5.7rem; }.copy-layer { top:auto; bottom:23%; transform:none; width:min(31rem,calc(100vw - var(--gutter) * 2)); }.chapter h1,.chapter h2 { font-size:clamp(2.25rem,10vw,3.35rem); }.chapter-copy { max-width:19rem; margin-top:1.15rem; font-size:.78rem; line-height:1.6; }.eyebrow { margin-bottom:1.15rem; font-size:.54rem; }.corner-meta--right { display:none; }.start-control { right:auto; bottom:9.4rem; left:var(--gutter); }.scroll-hint { right:var(--gutter); bottom:1.65rem; }.scroll-space { height:430svh; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }