:root{--bg:#070b18;--fg:#f5f7ff;--muted:#a1aecb;--line:rgba(134,167,255,.22);--violet:#9655ff;--cyan:#36c7ff;--bar:0%}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:auto}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;overflow-x:hidden}button,a{font:inherit}a{color:inherit;text-decoration:none}.topbar{position:fixed;inset:0 0 auto;z-index:30;height:72px;padding:0 clamp(18px,4.5vw,84px);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#070b18df,#070b1800);gap:12px}.logo{width:205px;height:54px;background-image:url('assets/logo_reference.webp');background-size:260px auto;background-position:0 center;background-repeat:no-repeat;mix-blend-mode:screen;filter:brightness(1.5)}.nav{display:flex;align-items:center;gap:30px;color:#b5c4e0;font-size:12px}.nav a:hover{color:white}.cta{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:14px 25px;border-radius:50px;color:white;font-weight:700;font-size:13px;border:1px solid #69cbff66;background:linear-gradient(110deg,#5547ed,#1788f4,#16ccf6);box-shadow:0 0 24px #306be855;cursor:pointer}.cta.secondary{border:1px solid #8196d477;background:#121a31;box-shadow:none}.topbar .cta{padding:11px 20px}.hero{height:520vh;position:relative}.pin{height:100vh;min-height:590px;position:sticky;top:0;overflow:hidden;background:#070b18}.pin:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#070b18ed 0%,#070b18a0 25%,transparent 65%),linear-gradient(0deg,#070b18c9,transparent 25%,transparent 65%,#070b1850)}.scene{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;filter:saturate(.94)}.frame-outline{position:absolute;z-index:3;inset:clamp(95px,13vh,160px) 5vw 12vh 40vw;border:1px solid rgba(129,170,255,.4);border-radius:3px;box-shadow:0 0 80px rgba(74,83,255,.08),inset 0 0 90px rgba(65,112,255,.06);pointer-events:none;transition:opacity .3s}.frame-outline:before{content:'FRAME 001   ·   FrameGlitch';position:absolute;left:15px;top:12px;font-size:10px;letter-spacing:.26em;color:#cee1ff}.hero-copy{position:absolute;z-index:8;left:clamp(24px,8vw,150px);top:36%;max-width:520px;transform:translateY(-10%)}.eyebrow{font-size:11px;letter-spacing:.32em;color:#6fbdfb;font-weight:700}.hero h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(36px,5.5vw,82px);letter-spacing:.06em;line-height:1.28;margin:22px 0}.gradient{background:linear-gradient(100deg,#f7fbff,#6abaff,#c18aff);color:transparent;background-clip:text}.hero-desc{font-size:clamp(13px,1.25vw,17px);color:#c4d0e5;line-height:2;max-width:430px;min-height:4em}.stage-label{font-size:11px;color:#91b7e4;letter-spacing:.25em;margin-bottom:10px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.scroll-hint{position:absolute;z-index:9;bottom:34px;left:50%;transform:translateX(-50%);text-align:center;font-size:12px;letter-spacing:.22em;color:#a9b9d6}.scroll-hint .line{height:33px;width:1px;margin:12px auto 0;background:linear-gradient(#47b5ff,transparent)}.timeline{position:absolute;z-index:9;bottom:38px;left:7vw;right:7vw;height:2px;background:#ffffff25}.timeline:after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--bar);background:linear-gradient(90deg,#47ccff,#ab6fff);box-shadow:0 0 12px #6b91ff}.counter{position:absolute;z-index:10;right:6vw;bottom:57px;color:#aec1e5;font-size:12px;letter-spacing:.17em}.stage-pills{position:absolute;z-index:9;top:50%;right:3vw;display:flex;flex-direction:column;gap:13px;transform:translateY(-50%)}.stage-pills i{width:5px;height:5px;background:#ffffff70;border-radius:50%;transition:.2s}.stage-pills i.active{height:26px;border-radius:5px;background:#6fbcff;box-shadow:0 0 14px #6e7dff}.chapter{padding:110px clamp(22px,8vw,160px);border-top:1px solid #38568745;background:radial-gradient(ellipse at 68% 15%,#17295a73,transparent 52%),#070b18}.chapter h2{font-size:clamp(32px,4.5vw,64px);line-height:1.35;letter-spacing:.02em;margin:16px 0 22px}.chapter p{line-height:2;color:var(--muted);max-width:650px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:55px 0}.step{border:1px solid var(--line);background:linear-gradient(140deg,#121e38dd,#0c1225);border-radius:14px;padding:25px;min-height:215px}.step b{font-size:12px;color:#74c2fa;letter-spacing:.18em}.step h3{margin-top:38px;font-size:21px}.step p{font-size:13px;line-height:1.7}.flow{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.flow-art{display:grid;grid-template-columns:1fr 22px 1fr;align-items:center;gap:9px}.flow-art img{width:100%;border-radius:9px;border:1px solid #556db277;box-shadow:0 10px 42px #0008}.flow-arrow{color:#67c3ff}.closing{min-height:65vh;display:flex;align-items:center;background:radial-gradient(ellipse at 80% 0%,#2642a56a,transparent 56%),radial-gradient(ellipse at 20% 100%,#622aa15c,transparent 45%),#070b18}.closing h2{max-width:900px}.footer{padding:35px 7vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#9caecc;font-size:12px}.motion-toggle{position:fixed;z-index:60;bottom:16px;right:18px;border:1px solid #5873a2;background:#0e1930ee;color:#d4e6fa;padding:9px 13px;border-radius:12px;cursor:pointer;font-size:11px}.fade{transition:opacity .2s}.hidden{opacity:0;pointer-events:none}@media(max-width:800px){.topbar{height:60px}.logo{width:155px;background-size:200px auto}.nav a:not(.cta){display:none}.topbar .cta{padding:10px 13px;font-size:11px}.hero{height:390vh}.pin{min-height:500px}.scene{object-position:61% center}.pin:after{background:linear-gradient(0deg,#070b18 0%,#070b18ca 13%,#070b1860 40%,transparent 83%),linear-gradient(90deg,#070b1855,transparent)}.hero-copy{top:auto;bottom:13vh;left:7vw;right:7vw;max-width:100%;transform:none}.hero h1{font-size:clamp(35px,9vw,55px)}.hero-desc{font-size:13px}.hero-actions{margin-top:14px}.frame-outline{inset:90px 4vw 33vh 4vw}.stage-pills{right:4vw}.scroll-hint{display:none}.counter{bottom:55px}.steps{grid-template-columns:1fr 1fr}.flow{grid-template-columns:1fr}.chapter{padding:75px 7vw}.footer{gap:20px;flex-wrap:wrap}}@media(max-width:460px){.steps{grid-template-columns:1fr}.step{min-height:auto}.step h3{margin-top:15px}.hero h1{font-size:35px}.hero-copy{bottom:10vh}.hero-actions .cta{padding:11px 17px;font-size:12px}.frame-outline{bottom:40vh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@font-face{font-family:Jost;src:url('/static/fonts/Jost-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:FuturaHeavy;src:local('Futura Heavy'),local('Futura-Heavy'),local('Futura Hv');font-weight:700 900;font-display:swap}
.topbar .logo img{filter:none}
.hero-copy{max-width:620px}.hero h1{font-size:clamp(36px,4.8vw,76px)}.hero h1 .gradient{white-space:nowrap}
.logo{display:flex;align-items:center;background:none;mix-blend-mode:normal;filter:none;width:48px;height:48px;flex-shrink:0}.logo img{width:48px;height:48px;object-fit:contain;border-radius:11px}.film-stage{position:absolute;inset:0}.scene{display:block}.eyebrow,.stage-label,.counter,.step b,.quiet-frames figcaption{font-family:FuturaHeavy,Jost,sans-serif;font-weight:800}.hero-copy{pointer-events:none}.hero-actions{pointer-events:auto}.hero h1{font-weight:700}.timeline #filmProgress{display:none}.prototype-label{position:absolute;z-index:9;bottom:81px;right:6vw;font-size:10px;color:#b1bfda;letter-spacing:.12em}.skip{position:fixed;z-index:100;top:-100px;left:18px;padding:16px;background:#132240;color:white;border-radius:8px}.skip:focus{top:12px}a:focus-visible,button:focus-visible{outline:3px solid #7ad7ff;outline-offset:5px}.quiet-version{display:none}.quiet-version h1{font-family:'Yu Mincho',serif;font-size:clamp(34px,5vw,64px);line-height:1.4;margin:25px 0}.quiet-frames{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:35px 0}.quiet-frames figure{margin:0}.quiet-frames img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid #758bbb66;border-radius:10px}.quiet-frames figcaption{font-size:12px;color:#9fc7f3;margin:15px 0}.reduced .hero{display:none}.reduced .quiet-version{display:block}.motion-toggle{border-radius:30px}.hero-desc{min-height:4em}.hero .cta,.topbar .cta{background:linear-gradient(110deg,#8052ef,#5362eb,#20bde9)}
@media(max-width:800px){.logo,.logo img{width:40px;height:40px}.hero-copy{bottom:14vh}.hero-actions .cta{min-height:42px}.prototype-label{bottom:83px;font-size:9px}.quiet-frames{grid-template-columns:1fr}.motion-toggle{font-size:10px;padding:8px 11px}}
/* One frame around the image and copy; diffuse logo light into the backdrop. */
.frame-outline{left:5vw}
.topbar .logo{transform:translateY(9px)}
.topbar .logo img{filter:none}
@media(max-width:800px){.frame-outline{left:4vw;right:4vw}}
/* Closing scene continues the film, with a soft left field for readable copy. */
.counter,.prototype-label{display:none}
.closing{position:relative;isolation:isolate;overflow:hidden;min-height:78vh;background:#070b18}
.closing::before,.closing::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url('/static/scroll-film/closing-cinema.png');background-size:cover;background-position:70% center}
.closing::before{opacity:.9}
.closing::after{inset:-25px;filter:blur(20px);mask-image:linear-gradient(90deg,#000 0%,#000 27%,transparent 65%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 27%,transparent 65%)}
.closing>div{position:relative;max-width:850px;z-index:1}
.closing{box-shadow:inset 0 0 0 100vmax #070b1826}
.closing>div::before{content:"";position:absolute;z-index:-1;inset:-25vh -12vw;background:radial-gradient(ellipse at 30% 50%,#070b18ee 0%,#070b18b8 40%,transparent 72%);pointer-events:none}
@media(max-width:800px){.closing{min-height:72vh}.closing::before,.closing::after{background-position:62% center}.closing>div::before{background:radial-gradient(ellipse,#070b18df, #070b1880 65%,transparent)}}
.closing:has(.closing-video)::before,.closing:has(.closing-video)::after{background-image:url('/static/scroll-film/closing-video-tiles-poster.png')}
.closing .closing-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:-1;pointer-events:none;opacity:.95}
.closing:has(.closing-video)::after{z-index:0;background:none;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);filter:none}
.reduced .closing-video{visibility:hidden}
@media(prefers-reduced-motion:reduce){.closing-video{visibility:hidden}}
@media(max-width:800px){.closing .closing-video{object-position:62% center}}
/* Protect fixed navigation from high-contrast content scrolling underneath. */
.topbar{isolation:isolate;background:transparent;border:0;box-shadow:none}
.topbar::before{content:"";position:absolute;z-index:-1;inset:0 0 -90px;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.94) 22%,rgba(0,0,0,.8) 40%,rgba(0,0,0,.52) 58%,rgba(0,0,0,.24) 75%,rgba(0,0,0,.06) 90%,rgba(0,0,0,0) 100%)}
.topbar .nav{color:#e0e8f7}
#features{position:relative;isolation:isolate;background:#070b18 url('/static/scroll-film/features-world-emerging.png') right top/cover no-repeat}
#features::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(7,11,24,.56),rgba(7,11,24,.15) 50%,transparent 80%),linear-gradient(0deg,#070b18 0%,rgba(7,11,24,.2) 40%,transparent 80%)}
#features>p{max-width:740px;color:#d3def2}
#features .step{background:linear-gradient(145deg,rgba(17,28,51,.82),rgba(8,15,31,.88));backdrop-filter:blur(12px);border-color:rgba(132,177,255,.3)}
@media(max-width:800px){#features{background-position:60% top}#features::before{background:linear-gradient(90deg,#070b18bd,#070b1870),linear-gradient(0deg,#070b18,transparent)}}
.flow.storyboard-background{position:relative;isolation:isolate;display:flex;align-items:center;min-height:78vh;overflow:hidden;background:#070b18 url('/static/scroll-film/living-storyboard-panels-poster.png') center/cover no-repeat}
.storyboard-background .storyboard-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;pointer-events:none}
.storyboard-background::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#070b18f5 0%,#070b18dd 22%,#070b1866 48%,#070b1810 75%),linear-gradient(0deg,#070b1880,transparent 25%,transparent 80%,#070b1870)}
.storyboard-background>div{max-width:760px}.storyboard-background p{max-width:650px;color:#d3def2}
.reduced .storyboard-video{visibility:hidden}
@media(prefers-reduced-motion:reduce){.storyboard-video{visibility:hidden}}
@media(max-width:800px){.flow.storyboard-background{min-height:74vh;background-position:60% center}.storyboard-background .storyboard-video{object-position:60% center}.storyboard-background::before{background:linear-gradient(90deg,#070b18ef,#070b1890)}}
.hero[data-phase="05 / CINEMA"] .hero-copy{max-width:min(920px,88vw)}
.hero[data-phase="05 / CINEMA"] h1{font-size:clamp(54px,7.2vw,114px);font-weight:900}
.hero-desc{white-space:pre-line}
.motion-toggle{display:none!important}
.footer .footer-tagline{font-size:16px;font-weight:700;letter-spacing:.08em}
.hero .hero-copy,.hero[data-phase="05 / CINEMA"] .hero-copy{max-width:min(1100px,88vw)}
.hero h1,.hero[data-phase="05 / CINEMA"] h1{font-size:clamp(54px,7.2vw,114px);font-weight:900}
.step{position:relative;transition:transform .3s,border-color .3s,box-shadow .3s}
.step:hover{transform:translateY(-5px);border-color:#65bbff88;box-shadow:0 12px 35px #02071470,0 0 25px #3b8bff18}
.step-preview{height:60px;margin:20px 0 10px;color:#7bc8ff;filter:drop-shadow(0 0 7px #4d9bff40)}
.step-preview svg{height:100%;width:96px;overflow:visible}
.step-preview .draw-stroke{stroke-dasharray:120;stroke-dashoffset:0;animation:step-draw 4.8s ease-in-out infinite}
.step-preview .signal-dot{fill:#a4dcff;animation:step-signal 3.6s ease-in-out infinite}
.step-preview .compare-sweep{stroke:#b2a1ff;stroke-width:2.5;animation:step-compare 4s ease-in-out infinite}
.step-preview .export-progress{stroke:#a7cfff;stroke-width:3;stroke-dasharray:84;animation:step-export 4.8s ease-in-out infinite}
.step-preview svg *{animation-play-state:paused!important;animation-delay:calc(var(--step-index)*.35s)}
.steps.is-inview .step-preview svg *{animation-play-state:running!important}
@keyframes step-draw{0%,10%{stroke-dashoffset:120;opacity:.3}45%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.3}}
@keyframes step-signal{0%,100%{transform:translateX(-18px);opacity:.3}50%{transform:translateX(20px);opacity:1}}
@keyframes step-compare{0%,100%{transform:translateX(-28px)}50%{transform:translateX(28px)}}
@keyframes step-export{0%,10%{stroke-dashoffset:84}75%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:84}}
@media(max-width:600px){.hero h1,.hero[data-phase="05 / CINEMA"] h1{font-size:clamp(36px,11.7vw,54px)}.hero .hero-copy,.hero[data-phase="05 / CINEMA"] .hero-copy{max-width:88vw}.step-preview{margin-top:15px}}
@media(prefers-reduced-motion:reduce){.step-preview svg *{animation:none!important}.step{transition:none}}
/* Section entrances use CSS; observers only mark the visible blocks. */
.block-ready:not(.block-visible)>.block-part{opacity:0;transform:translateY(24px)}
.block-visible>.block-part{animation:block-arrive .8s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--block-delay,0ms)}
.step-enter{animation:card-arrive .7s cubic-bezier(.2,.75,.25,1) backwards;animation-delay:calc(var(--step-index)*110ms)}
@keyframes block-arrive{from{opacity:0;transform:translateY(24px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.block-ready:not(.block-visible)>.block-part{opacity:1;transform:none}.block-visible>.block-part,.step-enter{animation:none!important}}
/* Trace individual glyph contours, then reveal the original white/gradient fill. */
.outline-heading{position:relative}
.heading-copy{display:block}
.heading-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.heading-outline text{fill:none;stroke:#b6dfff;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;animation:glyph-trace .85s ease-out forwards;animation-delay:var(--glyph-delay);paint-order:stroke}
.outline-running .heading-copy{opacity:0;animation:heading-color .55s ease-out forwards;animation-delay:var(--heading-fill-delay)}
.outline-running .heading-outline{animation:heading-ink-away .55s ease-out forwards;animation-delay:var(--heading-fill-delay)}
.block-visible>h2.outline-heading{animation:none;opacity:1;transform:none;filter:none}
@keyframes glyph-trace{to{stroke-dashoffset:0}}
@keyframes heading-color{from{opacity:0}to{opacity:1}}
@keyframes heading-ink-away{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.heading-outline{display:none}.outline-running .heading-copy{animation:none;opacity:1}}
.heading-outline path{fill:none;stroke:#b6dfff;stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:glyph-trace .23s linear forwards;animation-delay:var(--glyph-delay)}
.heading-outline path{animation-duration:.36s;animation-timing-function:cubic-bezier(.3,.05,.3,1)}
.outline-running .heading-copy,.outline-running .heading-outline{animation-duration:1s;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
/* Scroll governs the whole heading: rapid continuous ink, longer soft fill. */
.outline-scroll .heading-copy,.outline-scroll .heading-outline,.outline-scroll .heading-outline path{animation:none!important;transition:none}
.block-visible>h2.outline-heading{animation:none!important;transform:none;filter:none}
.outline-scroll .heading-outline path{stroke-width:1.1}
@media(prefers-reduced-motion:reduce){.outline-scroll .heading-copy{opacity:1!important}.outline-scroll .heading-outline{display:none}}
.topbar::before{background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 22%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.3) 58%,rgba(0,0,0,.24) 75%,rgba(0,0,0,.06) 90%,transparent 100%),linear-gradient(90deg,#344454,#263544 16%,#172332 35%,#0c1422 62%,#070b18);mask-image:linear-gradient(180deg,#000 0%,#000 22%,rgba(0,0,0,.85) 40%,rgba(0,0,0,.55) 58%,rgba(0,0,0,.25) 75%,rgba(0,0,0,.06) 90%,transparent 100%)}
/* One set of glyph silhouettes supplies both outline and solid paint. */
.hero-copy .eyebrow,.hero-copy .stage-label{display:none}
.frame-outline::before{content:none}
.outline-heading{font-family:'Yu Gothic',Meiryo,sans-serif;font-weight:700;font-synthesis:none}
.heading-outline .glyph-fill{stroke:none!important;stroke-dasharray:none!important;animation:none!important;stroke-dashoffset:0;opacity:1}
.outline-scroll .heading-copy{opacity:0}
.heading-fill-shapes{opacity:0}