/* NAGAYAMA — motion direction, progressive enhancement over the static page. */
/* Original application photography, directed as one continuous sequence. */
.application-card:nth-child(2) img{object-position:64% 50%}
.application-card:nth-child(3) img{object-position:53% 48%}
.contact-section{position:relative;isolation:isolate;overflow:clip;min-height:440px;background:#101213}
.contact-media,.contact-shade{position:absolute;inset:0;pointer-events:none}
.contact-media{z-index:-2}
.contact-media img{width:100%;height:100%;object-fit:cover;object-position:50% 56%;filter:saturate(.25) contrast(1.08)}
.contact-shade{z-index:-1;background:linear-gradient(90deg,rgba(8,11,12,.91),rgba(8,11,12,.67) 42%,rgba(8,11,12,.26) 72%,rgba(8,11,12,.45)),linear-gradient(0deg,rgba(8,11,12,.65),transparent 55%)}
.contact-section .contact-copy,.contact-section .contact-link{position:relative}
.contact-section .contact-link{background:rgba(10,13,14,.32);padding:18px 20px;border:1px solid rgba(205,179,120,.38);backdrop-filter:blur(8px);transition:background .4s,border-color .4s}
.contact-section .contact-link:hover{background:rgba(10,13,14,.7);border-color:var(--gold)}
@media(max-width:800px){.contact-section{min-height:390px}.contact-section .contact-link{padding:14px}.contact-media img{object-position:62% 55%}}
@media(max-width:540px){.contact-section{min-height:420px;padding-block:52px!important}.contact-media img{object-position:64% 50%}.contact-shade{background:linear-gradient(90deg,rgba(8,11,12,.88),rgba(8,11,12,.48)),linear-gradient(0deg,rgba(8,11,12,.75),transparent 70%)}.contact-section .contact-link{margin-top:30px;max-width:330px}}
.motion-line{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em;perspective:900px}
.motion-line-inner{display:block;transform-origin:0 100%}
.motion-enhanced .reveal,.motion-enhanced .reveal.is-visible{opacity:1;transform:none;transition:none}
html.motion-enhanced.motion-on [data-entrance-waiting]{opacity:0}
.site-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(var(--page-progress,0));transform-origin:left;pointer-events:none}
.section-index{position:relative}
.section-index:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.35s cubic-bezier(.22,1,.36,1)}
.section-index.entrance-played:after{transform:scaleX(1)}
.about-cinematic .section-index:after{display:none}

/* The opening shot dissolves into the surface of a finished part. */
.opening.motion-intro{height:235svh}
.motion-intro .opening-image,.motion-intro .opening-detail,.motion-intro .opening-copy{will-change:transform,opacity}
.opening-detail-shade{background:linear-gradient(0deg,#101112,rgba(16,17,18,.78) 10%,transparent 34%),linear-gradient(90deg,rgba(11,13,14,.92),rgba(11,13,14,.58) 45%,rgba(11,13,14,.08))}
.motion-on .about-cinematic{--about-overlap:12svh;margin-top:calc(-1 * var(--about-overlap));padding-top:calc(88px + var(--about-overlap));-webkit-mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.18) calc(var(--about-overlap) * .3),rgba(0,0,0,.82) calc(var(--about-overlap) * .7),#000 var(--about-overlap));mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.18) calc(var(--about-overlap) * .3),rgba(0,0,0,.82) calc(var(--about-overlap) * .7),#000 var(--about-overlap))}
.about-media img{transform-origin:70% 52%;transform:scale(1.08) translate3d(4%,3%,0);will-change:transform}
.about-media{contain:paint;inset:-4% -2% -4% 0;mask-image:linear-gradient(180deg,transparent,#000 16%,#000 76%,transparent)}
.about-media img{object-position:68% 50%;filter:saturate(.42) brightness(.88) contrast(1.06)}
.about-shade{background:linear-gradient(180deg,#101112,rgba(16,17,18,.15) 25%,transparent 52%,rgba(16,17,18,.5) 80%,#101112),linear-gradient(90deg,#101112 3%,rgba(16,17,18,.82) 28%,rgba(16,17,18,.32) 49%,rgba(16,17,18,.04) 74%)}
.about-paths{z-index:2}

/* Product photos are one continuous camera surface, with accessible DOM copy. */
.product-heading{position:relative;padding-top:110px;padding-bottom:90px}
.product-heading:after{content:"";position:absolute;left:var(--pad);bottom:0;width:1px;height:48px;background:linear-gradient(transparent,var(--gold))}
.product-story.motion-ready{height:320svh}
.motion-ready .product-stage{isolation:isolate;min-height:0}
.product-canvas,.product-canvas-shade,.product-fallback{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.product-canvas{z-index:1;opacity:0;display:block}
.product-canvas-shade{z-index:2;opacity:0;background:linear-gradient(90deg,#0d1011 0%,rgba(13,16,17,.93) 22%,rgba(13,16,17,.56) 42%,rgba(13,16,17,.02) 73%),linear-gradient(0deg,rgba(13,16,17,.78),transparent 32%)}
.motion-ready .product-canvas-shade{opacity:1}
.webgl-ready .product-canvas{opacity:1}
.product-fallback{z-index:0;overflow:hidden;display:none;background:#151718}
.motion-ready .product-fallback{display:block}
.motion-ready.webgl-ready .product-fallback{display:none}
.fallback-layer{position:absolute;inset:0;overflow:hidden}
.fallback-layer:not(:first-child){clip-path:polygon(112% 0,100% 0,100% 100%,100% 100%)}
.fallback-layer img{position:absolute;left:12%;width:88%;height:100%;object-fit:cover;filter:grayscale(.77) contrast(1.055);will-change:transform}
.motion-ready .product-scenes{z-index:3}
.motion-ready .product-scene{background:transparent}
.motion-ready .scene-photo,.motion-ready .scene-overlay{visibility:hidden}
.motion-ready .scene-copy{padding:55px var(--pad) 125px;will-change:transform}
.motion-ready .scene-copy h3{font-size:clamp(36px,3.7vw,62px);line-height:1.65}
.motion-ready .scene-number{font-size:clamp(90px,9vw,150px);opacity:.38}
.motion-ready .product-pagination{z-index:8}
.product-pagination button:before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(var(--scene-progress,0));transform-origin:left}
.product-pagination button i{display:none}
.motion-ready .stage-hint{z-index:8}

/* A quiet band of light moves across the machine as the process list unfolds. */
.technology{overflow:clip}
.technology-photo{height:620px}
.technology-photo:before{content:"";position:absolute;inset:-30% -65%;z-index:1;background:linear-gradient(115deg,transparent 42%,rgba(213,226,229,.08) 48%,rgba(234,238,229,.16) 50%,rgba(213,226,229,.04) 55%,transparent 60%);mix-blend-mode:screen;pointer-events:none;transform:translateX(-25%)}
.process-list>a:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .75s cubic-bezier(.22,1,.36,1)}
.process-list h3,.process-no{transition:transform .65s cubic-bezier(.22,1,.36,1),color .45s}
.process-list>a.is-current:before{transform:scaleX(1)}
.process-list>a.is-current h3{transform:translateX(5px);color:#dfcca7}
.process-list>a.is-current .process-no{transform:translateX(4px)}
.process-list>a.is-current .process-arrow{color:var(--gold);transform:translate(3px,-3px)}

/* Vertical scrolling carries the desktop camera horizontally through three uses. */
.applications{padding-bottom:100px}
.application-reel{position:relative}
.application-reel.reel-pinned{height:260svh}
.reel-pinned .application-stage{position:sticky;top:74px;height:calc(100svh - 74px);overflow:hidden}
.reel-pinned .application-gallery{height:calc(100% - 78px);padding:35px var(--pad) 0;gap:3vw;overflow:visible;scroll-snap-type:none;will-change:transform}
.reel-pinned .application-card{flex:0 0 84vw;height:100%;aspect-ratio:auto;scroll-snap-align:none}
.application-card img{will-change:transform}
.reel-pinned .application-card img{transition:none}
.reel-pinned .application-card figcaption{left:5vw;right:5vw;bottom:45px;will-change:transform,opacity}
.reel-pinned .application-card strong{font-size:clamp(28px,3vw,48px)}
.reel-pinned .gallery-controls{margin:0;padding:15px var(--pad) 0;height:57px;position:relative}
.reel-pinned .gallery-controls button{width:38px;height:38px;font-size:21px}
.gallery-meter{display:block;width:100px;height:1px;background:rgba(255,255,255,.2);overflow:hidden}
.gallery-meter>span{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.gallery-count{min-width:75px}
.gallery-hint{margin-left:auto;margin-right:20px}
.application-reel:not(.reel-pinned) .gallery-meter{display:none}

/* Finish with a change of material, then a concise invitation. */
.specifications{view-timeline-name:--spec-panel;view-timeline-axis:block}
.spec-details dl>div{position:relative}
.spec-details dl>div:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#54574a;transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.spec-details dl>div.entrance-played:after{transform:scaleX(1)}
.news-list>a{transition:padding .35s,background .35s}
.news-list>a:hover{padding-left:14px;padding-right:14px;background:rgba(255,255,255,.025)}
.contact-section{view-timeline-name:--contact-panel;view-timeline-axis:block;background:radial-gradient(ellipse at 95% 100%,rgba(201,174,117,.075),transparent 65%),#141719}
.works-arrow,.contact-circle{will-change:transform}

@supports (animation-timeline:view()) and (animation-range:contain 0% contain 100%){
 @media(prefers-reduced-motion:no-preference){
  .native-film.motion-intro .hero-editorial,.native-film.motion-intro .hero-origin{animation-name:v5-film-title}
  .native-film.motion-intro .hero-media{animation-name:v5-film-camera}
  .native-film.motion-intro .opening-detail{animation-name:v5-film-dissolve}
  .native-film.motion-intro .opening-image{animation-name:v5-film-detail-camera}
  .native-film.motion-intro .opening-copy{animation-name:v5-film-copy}
  .native-film.motion-intro .film-bottom{animation:v10-film-controls auto linear both;animation-timeline:--opening-film;animation-range:contain 0% contain 100%}
 }
}
@supports (animation-timeline:view()) and (animation-range:entry 0% exit 100%){
 @media(prefers-reduced-motion:no-preference){
  .about-media img{animation-name:v11-about-camera;animation-range:entry 15% exit 75%}
  .technology-photo:before{animation:v5-machine-light auto linear both;animation-timeline:--machine-view;animation-range:entry 0% exit 100%}
  .specifications{animation:v5-spec-open auto linear both;animation-timeline:--spec-panel;animation-range:entry 0% entry 55%}
  .contact-section{animation:v5-contact-open auto linear both;animation-timeline:--contact-panel;animation-range:entry 0% entry 85%}
 }
}
@keyframes v5-film-title{0%,8%{opacity:1;transform:translateY(0)}42%,100%{opacity:0;transform:translateY(-55px)}}
@keyframes v5-film-camera{from{transform:scale(1)}to{transform:scale(1.14)}}
@keyframes v5-film-dissolve{0%,16%{opacity:0;clip-path:inset(16% 7%)}68%,100%{opacity:1;clip-path:inset(0)}}
@keyframes v5-film-detail-camera{from{transform:scale(1.18) translateX(1.5%)}to{transform:scale(1) translateX(0)}}
@keyframes v5-film-copy{0%,43%{opacity:0;transform:translateY(60px)}78%,100%{opacity:1;transform:translateY(0)}}
@keyframes v10-film-controls{0%,72%{opacity:1;visibility:visible}99%,100%{opacity:0;visibility:hidden}}
@keyframes v11-about-camera{from{transform:scale(1.08) translate3d(4%,3%,0)}to{transform:scale(1.44) translate3d(-6%,-7%,0)}}
@keyframes v11-about-camera-mobile{from{transform:scale(1.08) translate3d(3%,3%,0)}to{transform:scale(1.34) translate3d(-3%,-6%,0)}}
@keyframes v5-machine-light{from{transform:translateX(-25%)}to{transform:translateX(25%)}}
@keyframes v5-spec-open{from{clip-path:inset(0 7%);transform:translateY(70px)}to{clip-path:inset(0);transform:translateY(0)}}
@keyframes v5-contact-open{from{clip-path:inset(0 6%)}to{clip-path:inset(0)}}

@media(min-width:901px) and (max-height:760px){
 .motion-ready .scene-copy{padding-top:30px;padding-bottom:85px}
 .motion-ready .scene-category{margin-bottom:12px}
 .motion-ready .scene-copy h3{font-size:34px;line-height:1.5}
 .motion-ready .scene-name{font-size:17px;margin-top:14px}
 .motion-ready .scene-description{font-size:12px;line-height:1.8;margin-top:12px}
 .motion-ready .scene-copy .arrow-link{font-size:12px;margin-top:12px;padding-block:10px}
 .motion-ready .scene-number{font-size:90px;top:20px}
 .motion-ready .product-pagination{bottom:22px}
 .motion-ready .stage-hint{bottom:30px;font-size:8px}
 .technology-photo{height:510px}
}
@media(max-width:900px){
 .motion-on .about-cinematic{--about-overlap:7svh;padding-top:calc(70px + var(--about-overlap))}
 .product-heading{padding-top:75px;padding-bottom:65px}
 .technology-photo{height:420px}
 .applications{padding-bottom:70px}
}
@media(max-width:640px){
 .opening.motion-intro{height:210svh}
 .motion-on .about-cinematic{--about-overlap:8svh;padding-top:calc(52px + var(--about-overlap))}
 .opening-detail-shade{background:linear-gradient(0deg,#101112,rgba(16,17,18,.8) 12%,transparent 42%),linear-gradient(90deg,rgba(11,13,14,.85),rgba(11,13,14,.3))}
 .about-media{inset:0 -4% auto -4%;height:560px;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 66%,transparent)}
 .about-media img{object-position:78% 50%}
 .about-shade{background:linear-gradient(180deg,#101112,rgba(16,17,18,.08) 140px,rgba(16,17,18,.18) 260px,rgba(16,17,18,.88) 430px,#101112 560px),linear-gradient(90deg,rgba(16,17,18,.3),transparent)}
 .product-heading{padding-top:70px;padding-bottom:55px}
 .technology-photo{height:340px}
 .applications{padding-bottom:60px}
 .gallery-count{min-width:60px}
}
@supports (animation-timeline:view()) and (animation-range:entry 0% exit 100%){
 @media(max-width:640px) and (prefers-reduced-motion:no-preference){
  .about-media img{animation-name:v11-about-camera-mobile}
 }
}
@media(prefers-reduced-motion:reduce){
 html.motion-enhanced [data-entrance-waiting]{opacity:1}
 .motion-line-inner{transform:none!important;opacity:1!important;filter:none!important}
 .product-canvas,.product-canvas-shade{display:none}
 .specifications,.contact-section{clip-path:none!important;transform:none!important}
 .gallery-meter{display:none}
 .about-media img{transform:none!important}
 .section-index:after,.spec-details dl>div:after{transform:scaleX(1)}
}