/* Motion Laboratory / reusable patterns from Website Factory. 10 original per-concept compositions. */
.motion-chapter{--mx:0px;--my:0px;--rx:0deg;--ry:0deg;position:relative;min-height:460px;overflow:hidden;isolation:isolate;background:#111}.motion-label,.motion-foot{height:52px;padding:0 clamp(23px,5vw,90px);display:flex;align-items:center;justify-content:space-between;gap:15px;position:relative;z-index:4;font:800 10px/1.3 "Segoe UI",Arial,sans-serif;letter-spacing:.15em}.motion-label{color:#9baea1;border-bottom:1px solid #ffffff30}.motion-foot{color:#9ca9a0;border-top:1px solid #ffffff27}.motion-label span{color:var(--accent)}.motion-chapter>div:nth-child(2){height:390px;position:relative;overflow:hidden}.motion-brutal{background:#121212;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column}.mb-signal{background:#ff4f32;color:#111;padding:11px 20px;font-size:14px;font-weight:900;letter-spacing:.15em;transform:rotate(-7deg) translate(-270px,17px)}.mb-main{font:900 clamp(90px,13vw,220px)/.9 "Arial Black","Segoe UI",sans-serif;letter-spacing:-.09em;white-space:nowrap;transform:translate3d(var(--mx),var(--my),0);transition:transform .45s cubic-bezier(.2,.8,.2,1);color:#fdf06e;text-shadow:9px 9px 0 #ff4f32}.mb-strip{position:absolute;bottom:0;left:-5%;width:110%;background:#fdf06e;color:#151515;font-size:12px;letter-spacing:.3em;padding:15px 0;transform:rotate(-3deg);text-align:center}.mb-stamp{position:absolute;right:3%;top:-20px;color:#ffffff0a;font-size:300px;font-weight:900}.motion-radar{background:radial-gradient(circle at 67% 50%,#0e6d4e55,#031d20 65%);display:grid;place-items:center}.radar-grid{position:absolute;inset:0;background-image:linear-gradient(#b6ffb70c 1px,transparent 1px),linear-gradient(90deg,#b6ffb70c 1px,transparent 1px);background-size:35px 35px}.radar-orbit{height:335px;width:335px;border:1px solid #66e5ae7d;border-radius:50%;position:absolute;right:15%;top:50%;transform:translateY(-50%);box-shadow:0 0 0 54px #6affad0e,0 0 0 105px #6affad09}.radar-orbit i{position:absolute;inset:15%;border:1px solid #6bffbd66;border-radius:50%}.radar-orbit i:nth-child(2){inset:30%}.radar-orbit i:nth-child(3){inset:45%;background:#6bffbd;box-shadow:0 0 30px #6bffbd}.radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#67ffb442,transparent 40%,transparent);animation:spinRadar 7s linear infinite}.radar-copy{position:absolute;left:8%;top:26%;display:flex;flex-direction:column;gap:16px;transform:translate3d(var(--mx),var(--my),0);transition:transform .5s}.radar-copy span,.radar-copy small{font-size:11px;letter-spacing:.15em;color:#8de9bc}.radar-copy strong{font-size:clamp(64px,8vw,135px);line-height:1;letter-spacing:-.09em;color:#e3fff1}.radar-copy strong em{color:#5effb5;font-style:normal}
.motion-editorial{background:#dfd5c0;color:#26271e;padding:25px 7%;font-family:Georgia,serif}.editorial-no{font:650 11px "Segoe UI";letter-spacing:.18em}.editorial-masthead{font-size:clamp(62px,8vw,126px);font-weight:400;letter-spacing:-.09em;line-height:.94;text-align:center;margin-top:35px;transition:letter-spacing .7s}.motion-editorial:hover .editorial-masthead{letter-spacing:-.04em}.editorial-masthead em{font-weight:400;color:#8c6047}.editorial-rule{height:1px;background:#24221f;margin-top:29px;transform-origin:left;animation:drawLine 3s ease-out both}.editorial-caption{display:flex;justify-content:space-between;gap:18px;font:700 10px "Segoe UI";letter-spacing:.1em;margin-top:19px}
.motion-jdm{background:linear-gradient(180deg,#290a54,#5b164e 58%,#10071b 58%);display:grid;place-items:center;perspective:700px}.sunset{position:absolute;width:280px;height:280px;border-radius:50%;background:repeating-linear-gradient(180deg,#ff8f74 0,#ff8f74 30px,#ff4da5 31px,#ff4da5 37px,#b61b71 39px,#b61b71 41px);box-shadow:0 0 90px #fb468b8c;top:36px;left:calc(50% - 140px);animation:jdmSun 9s ease-in-out infinite alternate}.jdm-floor{position:absolute;inset:57% -30% -30%;background-image:linear-gradient(#f848c16b 2px,transparent 2px),linear-gradient(90deg,#f848c16b 2px,transparent 2px);background-size:75px 75px;transform:rotateX(70deg);transform-origin:top}.jdm-type{position:relative;text-align:center;transform:translate3d(var(--mx),var(--my),0);transition:transform .5s}.jdm-type small{display:block;letter-spacing:.3em;font-size:11px;margin-bottom:10px}.jdm-type strong{font:italic 900 clamp(65px,9vw,140px)/.83 Impact,"Arial Narrow",sans-serif;letter-spacing:-.045em;color:#fff7e6;text-shadow:8px 8px 0 #ff2fa5,0 0 30px #fd288f}.jdm-japanese{position:absolute;bottom:14px;left:5%;font-size:13px;color:#ffb5da;letter-spacing:.14em}
.motion-swiss{background:#f2f1e9;color:#111;padding:24px 6%;font-family:Helvetica,Arial,sans-serif}.swiss-number{position:absolute;top:24px;right:6%;font-size:12px;font-weight:800}.swiss-grid{display:grid;grid-template-columns:1.4fr .6fr;align-items:end;height:100%}.swiss-grid strong{font-size:clamp(77px,11vw,164px);letter-spacing:-.09em;line-height:.81;font-weight:900;transition:transform .45s;transform:translateX(var(--mx))}.swiss-grid strong em{color:#e92e28;font-style:normal}.swiss-grid>div{border-top:3px solid #111;display:flex;flex-direction:column;gap:18px;padding:20px 0;font-size:17px;font-weight:750;letter-spacing:.08em}.swiss-cross{position:absolute;right:3%;top:5%;font-size:80px;color:#e92e28}
.motion-bento{background:#e6ebdf;padding:16px;display:grid;grid-template-columns:1.2fr 1fr .8fr;grid-template-rows:1fr 1fr;gap:13px}.bento-tile{background:#fff;border-radius:20px;display:flex;flex-direction:column;justify-content:space-between;padding:22px;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .3s;color:#18221c}.bento-tile:hover{transform:translateY(-7px) scale(1.015);filter:brightness(.97)}.bento-tile span{font-size:11px;letter-spacing:.1em;font-weight:850}.bento-tile strong{font-size:clamp(38px,6vw,86px);font-weight:900;letter-spacing:-.08em}.bt1{grid-row:span 2;background:#b8eb49}.bt1 strong{font-size:160px;line-height:1;text-align:right;animation:bentoArrow 5s infinite}.bt2{background:#d5dfc7}.bt3{grid-row:span 2;background:#17221f;color:white}.bt4{background:#dceadc}.bt4 strong{font-size:clamp(26px,3vw,45px)}.bento-lines{margin:auto 0;display:flex;gap:8px;align-items:flex-end;height:100px}.bento-lines i{width:13px;background:#b8eb49;height:65%;border-radius:3px;animation:lineBeat 2s alternate infinite}.bento-lines i:nth-child(2){height:95%;animation-delay:.35s}.bento-lines i:nth-child(3){height:35%;animation-delay:.7s}
.motion-organic{background:#f0e4d2;display:grid;place-items:center}.organic-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 53%,#dbf0cf,#e9ddcc 60%,#d6c8b7)}.organic-shape{position:absolute;width:310px;height:300px;background:radial-gradient(circle at 35% 30%,#e9ffb8,#7ea889 53%,#4d7857);border-radius:46% 54% 34% 66% / 60% 45% 55% 40%;filter:drop-shadow(30px 27px 35px #274a3044);animation:organicMorph 9s ease-in-out infinite alternate}.organic-shape.a{left:22%;top:6%;transform:rotate(-25deg)}.organic-shape.b{right:23%;bottom:-28%;width:220px;height:220px;background:radial-gradient(circle at 35% 30%,#fff7db,#bf9b7b 62%,#82614d);animation-delay:-4s}.organic-type{position:relative;text-align:center;font:500 clamp(60px,7.6vw,125px)/.96 Georgia,serif;letter-spacing:-.085em;color:#294b34;text-shadow:0 2px 12px #fff8}.organic-type em{font-style:italic;color:#61764e}.organic-type small{display:block;font:700 10px "Segoe UI";letter-spacing:.2em;margin-top:18px}
.motion-kinetic{background:#ff8353;color:#101015;display:grid;place-items:center}.kinetic-flag{position:absolute;left:4%;top:15px;border:1px solid #101015;padding:9px 15px;font-size:10px;letter-spacing:.16em}.kinetic-lines{display:flex;gap:12px;font:900 clamp(65px,11vw,160px)/.93 Impact,"Arial Narrow",sans-serif;letter-spacing:-.04em;transform:rotate(-4deg)}.kinetic-lines strong{display:inline-block;transition:transform .35s}.kinetic-lines strong:nth-child(2){-webkit-text-stroke:2px #101015;color:transparent;transform:translateY(13px)}.kinetic-lines strong:nth-child(3){color:#fff4de;transform:translateY(-15px)}.motion-kinetic:hover .kinetic-lines strong:nth-child(1){transform:translateY(-24px)}.motion-kinetic:hover .kinetic-lines strong:nth-child(3){transform:translateY(24px)}.kinetic-underline{position:absolute;bottom:54px;left:8%;right:8%;height:16px;background:#111;transform:skew(-15deg);animation:kineticSlide 3s ease-in-out infinite alternate}.kinetic-small{position:absolute;right:7%;bottom:22px;font-size:11px;letter-spacing:.2em}
.motion-data{background:#0a2324;color:#dbffef;padding:22px 5%;font-family:Consolas,"Segoe UI",sans-serif}.data-head{display:flex;justify-content:space-between;border-bottom:1px solid #5effb568;padding-bottom:14px;font-size:11px;letter-spacing:.15em}.data-panel{display:grid;grid-template-columns:1fr 1fr;height:275px;gap:7%}.data-visual{position:relative;display:grid;place-items:center}.data-ring{position:absolute;width:170px;height:170px;border:3px dashed #5effb5;border-radius:50%;animation:spinRadar 17s linear infinite}.data-ring.second{width:235px;height:235px;border-width:1px;border-style:solid;opacity:.6;animation-direction:reverse}.data-visual>span{font-size:70px;font-weight:900;color:#5effb5}.data-spec{display:flex;flex-direction:column;justify-content:center;gap:25px}.data-spec>div{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #4c8b705c;padding-bottom:12px;font-size:13px}.data-spec b{color:#5effb5}.data-bottom{font-size:11px;letter-spacing:.12em;border-top:1px solid #5effb55c;padding-top:15px}
.motion-retro{background:#d3c4a9;display:flex;align-items:center;justify-content:center;perspective:800px}.retro-card{position:absolute;width:clamp(230px,31vw,410px);height:260px;background:#eee7d8;border:9px solid #fcf8ed;box-shadow:9px 13px 22px #58473066;display:flex;flex-direction:column;justify-content:space-between;padding:23px;color:#38352e;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.retro-card span{font-size:11px;letter-spacing:.12em}.retro-card strong{font:400 clamp(30px,3.2vw,49px) Georgia,serif;letter-spacing:-.05em}.retro-card.one{transform:translateX(-250px) rotate(-15deg);z-index:1}.retro-card.two{transform:translateX(0) rotate(2deg);z-index:3;background:#f4dfb6}.retro-card.three{transform:translateX(250px) rotate(17deg);z-index:2;background:#d8dcc8}.motion-retro:hover .retro-card.one{transform:translateX(-340px) rotate(-25deg)}.motion-retro:hover .retro-card.three{transform:translateX(340px) rotate(25deg)}
/* cinematic entry, reveal, parallax, cursor-following spotlight */
.motion-chapter:not(.in-view) .motion-label,.motion-chapter:not(.in-view) .motion-foot{opacity:.75}.motion-chapter .motion-label,.motion-chapter .motion-foot{transition:opacity .5s}.motion-chapter.in-view .motion-label,.motion-chapter.in-view .motion-foot{opacity:1}
.reveal-target{opacity:1;transform:none}.js-motion .reveal-target{opacity:0;transform:translate3d(0,42px,0);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.2,.8,.2,1)}.js-motion .reveal-target.in-view{opacity:1;transform:translate3d(0,0,0)}.js-motion .hero-main>*{opacity:0;transform:translateY(28px);animation:heroEnter .8s cubic-bezier(.2,.8,.2,1) both}.js-motion .hero-main>*:nth-child(2){animation-delay:.12s}.js-motion .hero-main>*:nth-child(3){animation-delay:.24s}.js-motion .hero-main>*:nth-child(4){animation-delay:.36s}.js-motion .hero-main>*:nth-child(5){animation-delay:.44s}.js-motion .hero-media{animation:imageReveal 1.15s cubic-bezier(.2,.8,.2,1) both;animation-delay:.14s}.js-motion .hero-media img{transform:scale(1.1);animation:photoReveal 1.6s cubic-bezier(.2,.8,.2,1) both}.js-motion .hero-media:hover img{transform:scale(1.05)}.motion-chapter .cursor-glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle 230px at var(--cursor-x,50%) var(--cursor-y,50%),#ffffff25,transparent 75%);mix-blend-mode:screen;opacity:0;transition:opacity .3s}.motion-chapter:hover .cursor-glow{opacity:1}
@keyframes spinRadar{to{transform:rotate(360deg)}}@keyframes drawLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes heroEnter{to{opacity:1;transform:translateY(0)}}@keyframes imageReveal{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}@keyframes photoReveal{to{transform:scale(1)}}@keyframes jdmSun{to{transform:translateY(-23px) scale(1.09)}}@keyframes bentoArrow{50%{transform:translateX(20px)}}@keyframes lineBeat{to{height:30%}}@keyframes organicMorph{to{border-radius:63% 37% 64% 36% / 39% 62% 38% 61%;transform:rotate(35deg) scale(1.08)}}@keyframes kineticSlide{to{transform:translateX(35px) skew(-15deg)}}
@media(max-width:900px){.motion-chapter>div:nth-child(2){height:330px}.radar-orbit{right:5%;transform:translateY(-50%) scale(.8)}.radar-copy strong{font-size:75px}.swiss-grid strong{font-size:10vw}.kinetic-lines{font-size:10vw}.retro-card{width:240px;height:220px}.retro-card.one{transform:translateX(-130px) rotate(-15deg)}.retro-card.three{transform:translateX(130px) rotate(17deg)}}
@media(max-width:560px){.motion-label,.motion-foot{height:46px;padding:0 17px;font-size:8px}.motion-label span{white-space:nowrap}.motion-chapter>div:nth-child(2){height:260px}.mb-main{font-size:17vw;text-shadow:4px 4px 0 #ff4f32}.mb-signal{transform:rotate(-7deg) translate(-40px,5px);font-size:10px}.mb-strip{font-size:8px}.radar-orbit{right:-48%;top:50%;transform:translateY(-50%) scale(.6)}.radar-copy{left:7%;top:30%}.radar-copy strong{font-size:11vw}.radar-copy small,.radar-copy span{font-size:8px}.editorial-masthead{font-size:11vw;margin-top:38px}.editorial-caption{font-size:8px;flex-wrap:wrap}.motion-jdm .sunset{width:200px;height:200px;left:calc(50% - 100px)}.jdm-type strong{font-size:16vw}.swiss-grid strong{font-size:12vw}.swiss-cross{font-size:38px}.motion-bento{gap:7px;padding:10px}.bento-tile{padding:10px;border-radius:10px}.bento-tile strong{font-size:9vw}.bt1 strong{font-size:18vw}.bt4 strong{font-size:5vw}.bento-lines i{width:6px}.organic-type{font-size:11vw}.organic-shape{width:220px;height:220px;left:11%}.kinetic-lines{font-size:11.5vw;gap:5px}.kinetic-underline{height:9px}.data-panel{grid-template-columns:.7fr 1.3fr;height:190px;gap:5%}.data-visual .data-ring{width:90px;height:90px}.data-visual .data-ring.second{width:125px;height:125px}.data-visual>span{font-size:35px}.data-spec{gap:10px}.data-spec>div{font-size:9px}.retro-card{width:170px;height:170px;padding:10px;border-width:6px}.retro-card strong{font-size:22px}.retro-card span{font-size:8px}.retro-card.one{transform:translateX(-65px) rotate(-15deg)}.retro-card.three{transform:translateX(65px) rotate(17deg)}.motion-retro:hover .retro-card.one{transform:translateX(-75px) rotate(-17deg)}.motion-retro:hover .retro-card.three{transform:translateX(75px) rotate(17deg)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal-target,.js-motion .hero-main>*,.js-motion .hero-media{opacity:1!important;transform:none!important}.js-motion .hero-media img{transform:none!important}}

.site-scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:99;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* Optional WebGL mechanical abstraction — rendered only for two Factory 3D concepts. CSS rings remain as fallback. */
.motion-chapter .three-canvas{position:absolute;z-index:1;right:4%;top:5%;width:55%;height:88%;display:block;pointer-events:none;opacity:.92}
.motion-radar .radar-orbit{opacity:.38}
.motion-radar .radar-copy{z-index:3}
.motion-data .data-visual .three-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.87}
.motion-data .data-visual .data-ring{opacity:.25}
.motion-data .data-visual>span{z-index:2;mix-blend-mode:screen;opacity:.7}
@media(max-width:560px){.motion-chapter .three-canvas{width:90%;right:-27%;opacity:.65}.motion-data .data-visual .three-canvas{width:100%;right:0;opacity:.75}}