/* ================= Sō motion layer (transform/opacity only where it matters) ================= */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.77,0,.18,1)}

/* ---- gate ---- */
.gate::before{content:none}
.gate-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.09;z-index:0;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 animation:grain .9s steps(6) infinite;will-change:transform}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(-2%,6%)}}
.gate-kanji{position:absolute;left:50%;top:50%;width:min(92vw,86vh);height:min(92vw,86vh);transform:translate(-50%,-50%);pointer-events:none;z-index:0;overflow:visible}
.gate-kanji text{font:300 900px var(--jp);fill:rgba(255,255,255,0);stroke:rgba(143,176,179,.32);stroke-width:2;stroke-dasharray:5200;stroke-dashoffset:5200;
 animation:draw 3.6s var(--ease) .2s forwards,fillin 2.4s ease 2.6s forwards}
.gate-kanji{animation:breathe 9s ease-in-out 3s infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill:rgba(255,255,255,.035);stroke:rgba(143,176,179,.14)}}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}
.gate-top,.gate-foot,.gate-card{z-index:2}
.gate-card{animation:none}
.gate-card>*,.gate-rows>div{opacity:0;transform:translateY(16px);animation:up .9s var(--ease) forwards}
.gate-card{opacity:0;transform:translateY(24px) scale(.985);animation:up 1.1s var(--ease) .15s forwards}
.gate-card>*:nth-child(1){animation-delay:.45s}.gate-card>*:nth-child(2){animation-delay:.55s}.gate-card>*:nth-child(3){animation-delay:.65s}
.gate-card>*:nth-child(4){animation-delay:.75s}.gate-card>*:nth-child(5){animation-delay:.85s}.gate-card>*:nth-child(6){animation-delay:.95s}
.gate-rows>div:nth-child(1){animation-delay:.9s}.gate-rows>div:nth-child(2){animation-delay:1s}.gate-rows>div:nth-child(3){animation-delay:1.1s}
.gate-top,.gate-foot{opacity:0;animation:fade 1.2s ease .9s forwards}
@keyframes up{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
.gate-form.shake{animation:shake .45s!important;opacity:1;transform:none}

/* unlock: content out -> 双 zoom-through -> curtain split */
.curtain{position:absolute;inset:0;z-index:5;pointer-events:none;visibility:hidden}
.curtain i{position:absolute;left:0;right:0;height:50.5%;background:#0a0a0a;will-change:transform}
.curtain .c-top{top:0}.curtain .c-bot{bottom:0}
.curtain .c-k{position:absolute;left:50%;top:50%;font:300 40vmin/1 var(--jp);color:#8fb0b3;transform:translate(-50%,-50%) scale(.6);opacity:0;will-change:transform,opacity}
.gate.unlocking{background:transparent;transition:none}
.gate.unlocking .curtain{visibility:visible}
.gate.unlocking .gate-card,.gate.unlocking .gate-top,.gate.unlocking .gate-foot,.gate.unlocking .gate-kanji,.gate.unlocking .gate-grain{animation:none;transition:opacity .45s ease,transform .6s var(--ease);opacity:0;transform:scale(.96)}
.gate.unlocking .gate-kanji{transform:translate(-50%,-50%) scale(1.3)}
.gate.unlocking .c-k{animation:zoomk 1.25s var(--ease-io) .2s forwards}
.gate.unlocking .c-top{animation:ctop 1s var(--ease-io) .95s forwards}
.gate.unlocking .c-bot{animation:cbot 1s var(--ease-io) .95s forwards}
@keyframes zoomk{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}35%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(14)}}
@keyframes ctop{to{transform:translateY(-101%)}}
@keyframes cbot{to{transform:translateY(101%)}}
.unlocked .gate.unlocking{opacity:1;visibility:visible}
.store-enter .hero h2 .ch{animation-delay:calc(.9s + var(--i)*45ms)!important}

/* ---- hero ---- */
.hero{overflow:hidden}
.hero-bg{will-change:transform;transform:scale(1.08)}
.split .ln{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.split .ch{display:inline-block;transform:translateY(105%);animation:chup 1.1s var(--ease) forwards;animation-delay:calc(.25s + var(--i)*45ms);will-change:transform}
@keyframes chup{to{transform:none}}
.hero-txt .mono,.hero-txt .pill,.hero-explore{opacity:0;transform:translateY(12px);animation:up 1s var(--ease) .8s forwards}
.hero-txt .pill{animation-delay:.95s}.hero-explore{animation-delay:1.1s}
.hero-bg span{animation:breathe2 10s ease-in-out infinite}
@keyframes breathe2{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-52%) scale(1.04)}}

/* ---- marquee ---- */
.marquee{overflow:hidden;background:var(--ink);color:#fff;border-top:1px solid #222;padding:14px 0;white-space:nowrap}
.mq-track{display:inline-flex;animation:mq 26s linear infinite;will-change:transform}
.mq-track span{font:500 clamp(18px,2.6vw,28px)/1 var(--sans);letter-spacing:-.03em;padding-right:.4em}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---- scroll reveals ---- */
[data-rv]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
[data-rv].in{opacity:1;transform:none}
.card-img{transform:translateZ(0)}
.card-img::after{content:"";position:absolute;inset:0;background:var(--ink);z-index:4;transform-origin:top;transform:scaleY(1);transition:transform 1.2s var(--ease-io);transition-delay:calc(var(--d,0s) + .1s);pointer-events:none}
.card.in .card-img::after{transform:scaleY(0)}
.card-img>picture,.card-img>img,.card-img .g-track{transition:transform 1.6s var(--ease)}
.card:not(.in) .card-img .g-track,.card:not(.in) .card-img>img{transform:scale(1.15)}

/* ---- card tilt (desktop) & press (touch) ---- */
@media (hover:hover) and (pointer:fine){
 .card{transition:transform .5s var(--ease)!important;transform-style:preserve-3d;will-change:transform}
 .card.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
}
@media (hover:none){.card-img:active{transform:scale(.975);transition:transform .15s}.pill:active{transform:scale(.94)}}

/* ---- menu ---- */
.menu-panel{transition:transform .7s var(--ease)}
.menu-scrim{transition:opacity .6s ease}
.menu.open .menu-cats a,.menu.open .menu-sub a,.menu.open .menu-lbl,.menu.open .menu-foot{animation:mup .8s var(--ease) both}
.menu-cats a{display:block;overflow:hidden}
.menu.open .menu-lbl{animation-delay:.12s}
.menu.open .menu-cats a:nth-child(1){animation-delay:.16s}.menu.open .menu-cats a:nth-child(2){animation-delay:.22s}.menu.open .menu-cats a:nth-child(3){animation-delay:.28s}
.menu.open .menu-sub a:nth-child(1){animation-delay:.34s}.menu.open .menu-sub a:nth-child(2){animation-delay:.38s}.menu.open .menu-sub a:nth-child(3){animation-delay:.42s}.menu.open .menu-sub a:nth-child(4){animation-delay:.46s}
.menu.open .menu-foot{animation-delay:.5s}
@keyframes mup{from{opacity:0;transform:translateY(28px)}}
.burger i{transition:transform .5s var(--ease)}
.burger:hover i:nth-child(1){transform:scaleX(.6);transform-origin:left}.burger:hover i:nth-child(3){transform:scaleX(.8);transform-origin:left}

/* ---- route transitions ---- */
main{transition:opacity .32s ease,transform .45s var(--ease)}
main.r-out{opacity:0;transform:translateY(14px)}
main.r-in{animation:rin .7s var(--ease)}
@keyframes rin{from{opacity:0;transform:translateY(-10px)}}
.shop h3{overflow:hidden}

/* ---- cursor (desktop) ---- */
.cur,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:200;border-radius:50%;mix-blend-mode:difference;will-change:transform;opacity:0;transition:opacity .3s}
.cur{width:6px;height:6px;margin:-3px;background:#fff}
.cur-ring{width:36px;height:36px;margin:-18px;border:1px solid #fff}
.cur-ring i{position:absolute;inset:-1px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .4s var(--ease)}
body.cur-on .cur,body.cur-on .cur-ring{opacity:1}
body.cur-hover .cur-ring i{transform:scale(1)}
@media (hover:hover) and (pointer:fine){body.cur-on,body.cur-on a,body.cur-on button{cursor:none}body.cur-on input{cursor:text}}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important;transition-delay:0s!important}
 .mq-track,.gate-grain,.gate-kanji,.hero-bg span{animation:none!important}
 .gate-kanji text{stroke-dashoffset:0;fill:rgba(255,255,255,.035)}
 [data-rv]{opacity:1;transform:none}.card-img::after{display:none}
 .cur,.cur-ring{display:none}
}

.gate.instant{transition:none!important}

/* ---- 3D exploded view ---- */
.explode{height:200vh;padding:0;position:relative;background:#060708;color:#eee;border:0}
.ex-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:78px var(--pad) 18px;
 background:radial-gradient(ellipse 70% 55% at 50% 48%,#1d2a2c 0%,#0b0f10 55%,#040505 100%)}
.ex-head{text-align:center;position:relative;z-index:3}.ex-head .mono{color:#7c8f91}
.ex-head h3{font:500 clamp(22px,3vw,34px)/1.1 var(--sans);letter-spacing:-.03em;margin:4px 0;color:#f2f2f2}
.ex-hint{color:#7c8f91}
.ex-stage{position:relative;flex:1;width:min(100%,780px);perspective:1000px;perspective-origin:50% 50%;margin-top:6px}
.ex-cam{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ex-layer{position:absolute;left:-50%;top:-50%;width:200%;height:200%;transform:scale(.5);will-change:transform,opacity;backface-visibility:hidden;pointer-events:none}
.ex-layer svg{width:100%;height:100%;overflow:visible;display:block}
.ex-layer .lbl{opacity:var(--p,0)}
.ex-layer .ld{stroke:#8fb0b3;stroke-width:1.2;fill:none;stroke-dasharray:80;stroke-dashoffset:calc(80 - 80*var(--p,0))}
.ex-layer .lt{font:500 17px var(--sans);fill:#f2f2f2}
.ex-layer .ls{font:400 12px var(--mono);fill:#8fa3a5;letter-spacing:.06em;text-transform:uppercase}
.ex-layer .patch{font:600 11px var(--sans);fill:#0b0b0b}
.ex-flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:4;background:radial-gradient(circle at 50% 50%,rgba(220,240,240,.9),rgba(143,176,179,.25) 35%,transparent 65%);mix-blend-mode:screen}
.ex-vig{position:absolute;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 50%,transparent 45%,#000 100%);opacity:var(--vig,.35)}
.ex-note{position:relative;z-index:6;text-align:center;color:#7c8f91;margin-top:4px}
body.view-cat .explode{display:none}
@media (prefers-reduced-motion:reduce){.explode{height:auto}.ex-pin{position:static;height:auto;min-height:100vh}.ex-stage{min-height:70vh}.ex-layer{filter:none!important}.ex-hint{display:none}}
.info-page:not([hidden]) h3,.info-page:not([hidden]) .lede,.info-page:not([hidden]) .info-dl>div,.info-page:not([hidden]) .tbl,.info-page:not([hidden]) h4{animation:up .8s var(--ease) both}
.info-page .info-dl>div:nth-child(2){animation-delay:.05s}.info-page .info-dl>div:nth-child(3){animation-delay:.1s}.info-page .info-dl>div:nth-child(4){animation-delay:.15s}.info-page .info-dl>div:nth-child(5){animation-delay:.2s}.info-page .info-dl>div:nth-child(6){animation-delay:.25s}