/* MOJILUME. Motion Layer | progressive enhancement; no third-party libraries */
:root{--moji-ease:cubic-bezier(.19,1,.22,1)}
.moji-scroll-progress{position:fixed;top:0;left:0;z-index:101;width:100%;height:3px;pointer-events:none;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#856337,#e2c18e);will-change:transform}
.motion-ready .motion-reveal{opacity:0;transform:translate3d(0,35px,0);transition:opacity .92s ease,transform 1.05s var(--moji-ease)}
.motion-ready .motion-reveal.motion-in{opacity:1;transform:translate3d(0,0,0)}
.motion-ready .motion-reveal[data-delay="1"]{transition-delay:.09s}
.motion-ready .motion-reveal[data-delay="2"]{transition-delay:.18s}
.motion-ready .motion-reveal[data-delay="3"]{transition-delay:.27s}
.moji-tilt{--moji-rx:0deg;--moji-ry:0deg;transform:perspective(1200px) rotateX(var(--moji-rx)) rotateY(var(--moji-ry));transition:transform .48s var(--moji-ease);transform-style:preserve-3d}
.moji-tilt.moji-tilt-active{transition:transform .09s linear}
@media (hover:hover) and (pointer:fine){.portfolio-card{transition:transform .65s var(--moji-ease),box-shadow .65s ease}.portfolio-card:hover{transform:translateY(-9px);box-shadow:0 32px 65px #2220191b}.portfolio-card .portfolio-visual img{transition:transform 1.2s var(--moji-ease)}.portfolio-card:hover .portfolio-visual img{transform:scale(1.055)}}
.moji-motion{position:relative;isolation:isolate;background:#eeebe4;overflow:hidden;padding:110px 0 115px;color:#27231f}
.moji-motion::before{content:"";position:absolute;right:-17vw;top:-250px;width:640px;aspect-ratio:1;border:1px solid #c9b99d88;border-radius:50%;pointer-events:none}
.moji-motion-inner{width:min(1200px,calc(100% - 96px));margin:auto;position:relative;z-index:1}
.moji-motion-head{display:grid;grid-template-columns:1fr .76fr;align-items:end;gap:50px;margin-bottom:42px}
.moji-motion-kicker{font-size:11px;font-weight:650;letter-spacing:.22em;color:#937346;display:block;margin-bottom:19px}
.moji-motion h2{font-family:'Noto Serif JP', 'Yu Mincho',serif;font-size:clamp(30px,3.6vw,52px);font-weight:500;line-height:1.52;letter-spacing:-.055em;margin:0}
.moji-motion-head p{max-width:415px;font-size:13px;line-height:2.25;color:#686155;margin:0}
.moji-motion-widget{border:1px solid #c9bead;background:#25221f;padding:30px 35px 27px;box-shadow:0 35px 85px #2b241c30;color:#fff;--stage1:#453c31;--stage2:#81715a;--accent:#d3b995;}
.moji-motion-widget[data-scene="salon"]{--stage1:#382e2f;--stage2:#9b7a80;--accent:#e9c0c1}
.moji-motion-widget[data-scene="shop"]{--stage1:#2c3d37;--stage2:#719080;--accent:#d9dfc3}
.moji-motion-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:25px}
.moji-motion-toolbar>span{font:10px Georgia,serif;letter-spacing:.19em;color:#c7b89b}
.moji-motion-tabs{display:flex;flex-wrap:wrap;gap:7px}
.moji-motion-tabs button{padding:11px 17px;border:1px solid #776b5c;background:transparent;color:#d4caba;font-size:11px;line-height:1.2;letter-spacing:.05em;transition:background .3s,color .3s,border .3s,transform .3s}
.moji-motion-tabs button:hover{border-color:#dfc9a5;transform:translateY(-2px)}
.moji-motion-tabs button[aria-selected="true"]{background:#e7d7b8;border-color:#e7d7b8;color:#231f19;font-weight:650}
.moji-motion-stage{height:420px;background:radial-gradient(circle at 73% 24%,#ffffff1b,transparent 40%),linear-gradient(125deg,var(--stage1),var(--stage2));overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;perspective:1200px;transition:background .65s ease}
.moji-motion-stage::after{content:"";position:absolute;inset:20px;border:1px solid #ffffff33;pointer-events:none}
.moji-stage-ring{position:absolute;width:560px;height:560px;border:1px solid #ffffff35;border-radius:50%;left:calc(50% - 280px);top:calc(50% - 280px);pointer-events:none}
.moji-stage-ring::after{content:"";position:absolute;inset:54px;border:1px solid #ffffff26;border-radius:50%}
.moji-stage-label{position:absolute;left:42px;top:39px;font:10px Georgia,serif;letter-spacing:.21em;color:#fff9;z-index:2}
.moji-stage-number{position:absolute;right:42px;bottom:33px;color:#ffffff8c;font:13px Georgia,serif;letter-spacing:.14em;z-index:2}
.moji-stage-card{position:relative;width:min(62%,540px);height:305px;z-index:3;transform:rotateY(-12deg) rotateX(6deg);filter:drop-shadow(23px 26px 28px #16110b66);transition:transform .72s var(--moji-ease)}
.moji-motion-stage:hover .moji-stage-card{transform:rotateY(-3deg) rotateX(2deg) translateY(-6px)}
.moji-stage-browser{height:100%;background:#f8f4ec;border-radius:9px;overflow:hidden;color:#29251f;box-shadow:0 4px 15px #0003}
.moji-stage-browser-top{height:30px;background:#efebe4;display:flex;gap:5px;align-items:center;padding:0 14px;border-bottom:1px solid #ddd1be}
.moji-stage-browser-top i{width:6px;height:6px;border-radius:50%;background:#b5ab9f}
.moji-stage-browser-top span{margin:auto;font:9px Georgia,serif;letter-spacing:.21em;color:#8d806c;transform:translateX(-14px)}
.moji-stage-browser-body{height:calc(100% - 30px);padding:22px 27px;background:linear-gradient(118deg,#fbf8f3,#f1e8da);display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:center;transition:background .4s}
.moji-motion-widget[data-scene="salon"] .moji-stage-browser-body{background:linear-gradient(125deg,#faf2ef,#eddfda)}
.moji-motion-widget[data-scene="shop"] .moji-stage-browser-body{background:linear-gradient(125deg,#f6f7f0,#e4e9df)}
.moji-stage-micro{display:block;font:9px Georgia,serif;letter-spacing:.15em;color:#987e59}
.moji-stage-brand{font-family:Georgia,'Times New Roman',serif;font-size:clamp(25px,3.2vw,48px);line-height:1.17;letter-spacing:-.045em;display:block;margin:15px 0 12px;overflow-wrap:anywhere}
.moji-stage-line{height:4px;width:79%;background:#bdb4a4;border-radius:5px;margin-bottom:8px;opacity:.7}
.moji-stage-line.short{width:53%}
.moji-stage-pill{display:inline-flex;margin-top:13px;padding:7px 13px;background:#29231e;color:#f6eedf;font-size:9px;letter-spacing:.08em}
.moji-stage-art{height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 24%,#d8ad78 0%,transparent 33%),linear-gradient(140deg,#685443,#a1886b);transition:background .5s}
.moji-motion-widget[data-scene="salon"] .moji-stage-art{background:radial-gradient(circle at 29% 28%,#e9c2be 0%,transparent 37%),linear-gradient(130deg,#7a565b,#ab8b89)}
.moji-motion-widget[data-scene="shop"] .moji-stage-art{background:radial-gradient(circle at 27% 22%,#dce3d0 0%,transparent 33%),linear-gradient(130deg,#34564b,#91a58b)}
.moji-stage-art::before{content:"";position:absolute;width:70%;height:83%;border-radius:45% 45% 9% 9%;bottom:-13%;left:16%;background:linear-gradient(130deg,#f1dac0,#b48b61 40%,#7f5c44 75%);box-shadow:20px -18px 40px #ffffff32 inset;transform:rotate(-8deg);transition:all .6s var(--moji-ease)}
.moji-motion-widget[data-scene="salon"] .moji-stage-art::before{width:45%;height:106%;border-radius:48% 48% 38% 38%;left:25%;bottom:-20%;background:linear-gradient(100deg,#ebd0ca,#795c5d 40%,#3c2b30 80%);transform:rotate(8deg)}
.moji-motion-widget[data-scene="shop"] .moji-stage-art::before{width:56%;height:66%;left:23%;bottom:0;border-radius:9px 9px 1px 1px;background:linear-gradient(140deg,#dedfbc,#8c9e7e 45%,#3d5949 90%);transform:rotate(0deg)}
.moji-stage-art::after{content:"";position:absolute;inset:15px;border:1px solid #fffb;opacity:.7;pointer-events:none}
.moji-stage-phone{position:absolute;z-index:4;bottom:23px;right:15%;width:113px;height:206px;border:5px solid #232321;border-radius:22px;background:#fbf8f2;box-shadow:14px 15px 32px #0008;transform:translateX(105px) rotateZ(13deg) rotateY(-11deg);transition:transform .75s var(--moji-ease)}
.moji-motion-stage:hover .moji-stage-phone{transform:translateX(88px) translateY(-11px) rotateZ(8deg) rotateY(-6deg)}
.moji-stage-phone::before{content:"";position:absolute;top:6px;left:37px;width:33px;height:8px;background:#232321;border-radius:10px}
.moji-stage-phone-inner{margin:21px 6px 7px;height:calc(100% - 27px);display:flex;flex-direction:column;gap:7px}
.moji-stage-phone-banner{height:85px;background:linear-gradient(135deg,var(--stage2),var(--stage1));border-radius:2px}
.moji-stage-phone-row{height:5px;width:86%;background:#a5a096;border-radius:2px}
.moji-stage-phone-row:last-child{width:58%}
.moji-motion-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:23px}
.moji-motion-foot-text{min-width:0}
.moji-motion-caption{font-family:'Noto Serif JP',serif;font-size:18px;letter-spacing:.01em;line-height:1.65;margin:0 0 3px}
.moji-motion-description{color:#c8c0b4;font-size:11px;line-height:1.9;margin:0}
.moji-motion-demo-link{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid #91826c;color:#f5e5c9;font-size:11px;transition:background .3s,transform .3s}
.moji-motion-demo-link:hover{background:#ffffff13;transform:translateY(-2px)}
.moji-motion-disclaimer{font-size:11px;line-height:1.9;color:#777065;margin-top:22px}
@media(min-width:900px){.moji-motion-widget{border-radius:1px}.moji-motion-stage:hover .moji-stage-ring{transform:scale(1.025)}.moji-stage-ring{transition:transform 1.1s var(--moji-ease)}}
@media(max-width:760px){.moji-motion{padding:70px 0 76px}.moji-motion-inner{width:calc(100% - 38px)}.moji-motion-head{display:block;margin-bottom:27px}.moji-motion-head p{margin-top:19px}.moji-motion-widget{padding:17px 13px 18px}.moji-motion-toolbar{align-items:flex-start;gap:14px}.moji-motion-toolbar>span{font-size:9px}.moji-motion-tabs{width:100%}.moji-motion-tabs button{flex:1;padding:11px 8px;min-width:0}.moji-motion-stage{height:300px}.moji-stage-ring{transform:scale(.68)}.moji-stage-label{left:17px;top:18px;font-size:8px}.moji-stage-number{right:18px;bottom:15px}.moji-stage-card{width:78%;height:212px;transform:rotateY(-8deg) rotateX(4deg) translateX(-12px)}.moji-stage-browser-top{height:22px}.moji-stage-browser-body{height:calc(100% - 22px);padding:12px 14px;gap:8px}.moji-stage-brand{font-size:clamp(18px,5.5vw,30px);margin:8px 0}.moji-stage-micro{font-size:7px}.moji-stage-line{height:3px;margin-bottom:6px}.moji-stage-pill{font-size:7px;padding:5px 7px;margin-top:5px}.moji-stage-phone{transform:translateX(25px) rotateZ(11deg);right:0;bottom:15px;width:65px;height:126px;border-width:3px;border-radius:13px}.moji-stage-phone::before{width:21px;height:5px;left:17px;top:4px}.moji-stage-phone-inner{margin:14px 4px 4px;height:calc(100% - 18px);gap:5px}.moji-stage-phone-banner{height:50px}.moji-stage-phone-row{height:3px}.moji-motion-stage:hover .moji-stage-phone{transform:translateX(18px) translateY(-4px) rotateZ(7deg)}.moji-motion-foot{align-items:flex-start;flex-direction:column}.moji-motion-caption{font-size:16px}.moji-motion-demo-link{width:100%;justify-content:center}.moji-motion-disclaimer{margin-top:16px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.moji-scroll-progress{display:none}.motion-ready .motion-reveal{opacity:1!important;transform:none!important;transition:none!important}.moji-tilt,.moji-stage-card,.moji-stage-phone,.moji-stage-ring,.portfolio-card,.portfolio-card .portfolio-visual img{transform:none!important;transition:none!important}}

.moji-motion-peek{display:inline-flex;margin-top:22px;font-size:11px;font-weight:650;letter-spacing:.05em;color:#8b714b;border-bottom:1px solid #a88c61;padding-bottom:5px;transition:transform .25s} .moji-motion-peek:hover{transform:translateY(3px)} .moji-motion-peek--dark{color:#eed2a4;border-color:#b89c71;margin-top:23px}