.cy-float{animation:cyFloat 6s ease-in-out infinite}
.cy-float2{animation:cyFloat 7s ease-in-out infinite reverse}
.cy-hop{animation:cyHop 2.4s cubic-bezier(.5,0,.5,1) infinite}
.cy-spin{animation:cySpin 14s linear infinite}
.cy-blink{animation:cyBlink 2.2s ease-in-out infinite}
.cy-track{display:flex;width:max-content;animation:cyMarquee 60s linear infinite}
@keyframes cyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes cyHop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}}
@keyframes cySpin{to{transform:rotate(360deg)}}
@keyframes cyBlink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes cyMarquee{to{transform:translateX(-50%)}}
.cy-wig{animation:cyWig 3.2s ease-in-out infinite}
@keyframes cyWig{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-6px)}}
.cy-sticker{display:inline-block;border-radius:999px;padding:7px 14px;font-size:13px;letter-spacing:.12em;box-shadow:0 2px 0 rgba(46,43,48,.14)}
@media (max-width:760px){.cy-sticker{font-size:11px;padding:5px 11px}}
.cy-mesh{position:absolute;inset:-10%;filter:blur(70px);pointer-events:none}
.cy-mesh span{position:absolute;border-radius:50%;opacity:.85}
.cy-m1{animation:cyM1 18s ease-in-out infinite}
.cy-m2{animation:cyM2 22s ease-in-out infinite}
.cy-m3{animation:cyM3 26s ease-in-out infinite}
.cy-m4{animation:cyM4 20s ease-in-out infinite}
.cy-m5{animation:cyM5 24s ease-in-out infinite}
@keyframes cyM1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(18vw,10vh) scale(1.2)}}
@keyframes cyM2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-16vw,14vh) scale(.9)}}
@keyframes cyM3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,-16vh) scale(1.25)}}
@keyframes cyM4{0%,100%{transform:translate(0,0) scale(1.15)}50%{transform:translate(-20vw,-8vh) scale(1)}}
@keyframes cyM5{0%,100%{transform:translate(0,0) scale(.9)}50%{transform:translate(8vw,12vh) scale(1.15)}}
.cy-rings{animation:cySpin 90s linear infinite}
.cy-rings2{animation:cySpin 140s linear infinite reverse}
.cy-gummy{position:relative;z-index:1;filter:drop-shadow(0 -1px 0 rgba(255,255,255,.55)) drop-shadow(0 1px 0 rgba(46,43,48,.08)) drop-shadow(0 6px 10px rgba(46,43,48,.09))}
.cy-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 22%,rgba(255,255,255,0) 40%,rgba(0,0,0,0) 72%,rgba(0,0,0,.12) 100%)}
.cy-glow{transition:translate 1.1s cubic-bezier(.22,1,.36,1)}
.cy-logo{position:relative;overflow:hidden;background:#2E2B30;isolation:isolate;-webkit-mask:url('/assets/img/logo-charcoal.png') center/contain no-repeat;mask:url('/assets/img/logo-charcoal.png') center/contain no-repeat}
.cy-glow{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85) 0%,rgba(255,255,255,.45) 20%,rgba(255,255,255,.16) 42%,rgba(255,255,255,0) 70%);filter:blur(3px);mix-blend-mode:screen}
.cy-fuyo1{animation:cyFuyo1 9s ease-in-out infinite,cyFirefly 2.8s ease-in-out infinite}
.cy-fuyo2{animation:cyFuyo2 12s ease-in-out infinite,cyFirefly 3.6s ease-in-out infinite}
.cy-fuyo3{animation:cyFuyo3 10s ease-in-out infinite,cyFirefly 3.2s ease-in-out infinite}
@keyframes cyFirefly{0%,100%{filter:blur(3px) brightness(1)}35%{filter:blur(3px) brightness(1.1)}55%{filter:blur(4px) brightness(.55)}70%{filter:blur(3px) brightness(1.1)}}
@keyframes cyFuyo1{0%,100%{transform:translate(0,0);opacity:.55}50%{transform:translate(60px,-18px);opacity:1}}
@keyframes cyFuyo2{0%,100%{transform:translate(0,0);opacity:.8}50%{transform:translate(-80px,16px);opacity:.4}}
@keyframes cyFuyo3{0%,100%{transform:translate(0,0) scale(1);opacity:.4}50%{transform:translate(30px,22px) scale(1.25);opacity:.95}}
/* ---- scroll motion ---- */
.cy-ch{display:inline-block}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.sr-hero{view-timeline-name:--hero}
.sr-up{animation:srUp linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
@keyframes srUp{from{opacity:0;translate:0 36px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.sr-msg{view-timeline-name:--msg}
.cy-ch{animation:srCh linear both;animation-timeline:--msg;animation-range:cover calc(18% + var(--i) * 1.2%) cover calc(24% + var(--i) * 1.2%)}
@keyframes srCh{from{opacity:0;translate:0 -10px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.sr-rings{animation:srRings linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
@keyframes srRings{to{rotate:30deg;opacity:.25}}
.sr-spread1{animation-name:cySpin,srSpread1;animation-duration:90s,1s;animation-timing-function:linear,linear;animation-iteration-count:infinite,1;animation-fill-mode:none,both;animation-timeline:auto,--hero;animation-range:normal,exit 0% exit 100%}
.sr-spread2{animation-name:cySpin,srSpread2;animation-duration:140s,1s;animation-timing-function:linear,linear;animation-iteration-count:infinite,1;animation-direction:reverse,normal;animation-fill-mode:none,both;animation-timeline:auto,--hero;animation-range:normal,exit 0% exit 100%}
@keyframes srSpread1{to{scale:1.45}}
@keyframes srSpread2{to{scale:2}}
.sr-out-tl{animation-name:cyFloat,srOutTL;animation-duration:6s,1s;animation-timing-function:ease-in-out,linear;animation-iteration-count:infinite,1;animation-fill-mode:none,both;animation-timeline:auto,--hero;animation-range:normal,exit 0% exit 100%}
.sr-out-br{animation-name:cyFloat,srOutBR;animation-duration:7s,1s;animation-timing-function:ease-in-out,linear;animation-iteration-count:infinite,1;animation-direction:reverse,normal;animation-fill-mode:none,both;animation-timeline:auto,--hero;animation-range:normal,exit 0% exit 100%}
@keyframes srOutTL{to{translate:-160px -180px;opacity:0}}
@keyframes srOutBR{to{translate:180px 200px;opacity:0}}
.sr-px1{animation:srPx1 linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
@keyframes srPx1{to{translate:0 -160px}}
.sr-px2{animation:srPx2 linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
@keyframes srPx2{to{translate:0 110px;opacity:.45}}
.sr-px3{animation:srPx3 linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
@keyframes srPx3{to{translate:0 -260px}}
.sr-heroout{animation:srHeroOut linear both;animation-timeline:--hero;animation-range:exit 0% exit 80%}
@keyframes srHeroOut{to{scale:.9;opacity:.2;filter:blur(5px)}}
.sr-line{border-bottom-color:transparent !important;position:relative}
.sr-line::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ln,#DCD8D4);transform-origin:left center;animation:srLine linear both;animation-timeline:view();animation-range:entry 20% entry 100%}
@keyframes srLine{from{scale:0 1}to{scale:1 1}}
.sr-sheet{position:relative;z-index:2;box-shadow:0 -24px 48px rgba(46,43,48,.05);animation:srSheet linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
@keyframes srSheet{from{translate:0 140px;border-radius:72px 72px 0 0}to{translate:0 0;border-radius:32px 32px 0 0}}
}
}
.cy-works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
@media (max-width:760px){.cy-works{grid-template-columns:minmax(0,1fr)}}
.cy-work img,.cy-work video{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.cy-work:hover img,.cy-work:hover video{transform:scale(1.04)}
.wk-stage{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:16/9;background:#DCD8D4}
.wk-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;scale:1.04;filter:blur(8px);transition:opacity .7s ease,scale .9s cubic-bezier(.22,1,.36,1),filter .7s ease}
.wk-layer.is-on{opacity:1;scale:1;filter:blur(0)}
.wk-caps{display:grid}
.wk-cap{grid-area:1/1;margin:0;opacity:0;translate:0 6px;transition:opacity .6s ease,translate .6s ease;font-size:12px;line-height:1.8;letter-spacing:.08em;color:#4A464C;text-align:center}
.wk-cap.is-on{opacity:1;translate:0 0}
.wk-arrow{position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:scale .3s cubic-bezier(.34,1.56,.64,1),background .3s}
.wk-arrow:hover{scale:1.08;background:rgba(255,255,255,.85)}
.wk-arrow:active{scale:.92}
.wk-prev{left:-22px}.wk-next{right:-22px}
.wk-arrow{box-shadow:0 6px 16px rgba(46,43,48,.12)}
@media (max-width:600px){.wk-prev{left:-10px}.wk-next{right:-10px}}
.wk-subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.wk-sub{display:flex;flex-direction:column;gap:10px;padding:0;border:0;background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:center}
.wk-sub .wk-stage{border-radius:16px}
.wk-sub:hover .wk-stage{box-shadow:0 8px 20px rgba(46,43,48,.10)}
.wk-sub:focus-visible{outline:2px solid #8E4C5A;outline-offset:4px;border-radius:16px}
.cy-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px}
.cy-nav{display:flex}
.cy-hdr{position:fixed;top:0;left:0;right:0;z-index:50;transition:transform .45s cubic-bezier(.22,1,.36,1),background-color .3s,padding .3s}
.cy-hdr.is-solid{background-color:rgba(236,234,231,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding-top:14px !important;padding-bottom:14px !important}
.cy-hdr.is-hidden{transform:translateY(-110%)}
.cy-fab{position:fixed;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:60;opacity:0;translate:0 24px;scale:.8;pointer-events:none;transition:opacity .4s,translate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1)}
.cy-fab.is-on{opacity:1;translate:0 0;scale:1;pointer-events:auto}
.cy-fab-x{position:absolute;right:-8px;top:-8px;z-index:2;width:22px;height:22px;padding:0;display:grid;place-items:center;border:1px solid #DCD8D4;border-radius:50%;background:#FFFFFF;cursor:pointer;box-shadow:0 2px 8px rgba(46,43,48,.12);transition:transform .25s}
.cy-fab-x::before{content:"";position:absolute;inset:-11px}
.cy-fab-x:hover{transform:scale(1.1)}
.cy-bubble{position:relative;display:inline-grid;place-items:center;min-height:56px;min-width:150px;box-sizing:border-box;padding:0 26px;border-radius:28px 28px 8px 28px;background:#2E2B30;color:#FFFFFF;text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.16em;box-shadow:0 10px 24px rgba(46,43,48,.18);transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s}
.cy-bubble::after{content:"";position:absolute;right:-7px;bottom:-1px;width:16px;height:16px;background:inherit;clip-path:polygon(0 0,100% 100%,0 100%);border-bottom-left-radius:4px}
.cy-bubble:hover{color:#FFFFFF;background:#8E4C5A;transform:translateY(-3px) rotate(-2deg)}
.cy-bubble > span{grid-area:1/1;transition:opacity .25s,translate .25s}
.cy-bubble .alt{opacity:0;translate:0 6px}
.cy-bubble:hover .def,.cy-bubble:focus-visible .def{opacity:0;translate:0 -6px}
.cy-bubble:hover .alt,.cy-bubble:focus-visible .alt{opacity:1;translate:0 0}
.cy-tate{writing-mode:vertical-rl;text-orientation:upright}
@media (max-width:760px){
.cy-row{grid-template-columns:minmax(0,1fr);gap:6px}
}
@media (prefers-reduced-motion:reduce){
.wk-layer,.wk-cap{transition:none}
.cy-fuyo1,.cy-fuyo2,.cy-fuyo3,.cy-leak1,.cy-leak2,.cy-bokeh,.cy-rings,.cy-rings2,.cy-m1,.cy-m2,.cy-m3,.cy-m4,.cy-m5,.cy-wig,.cy-float,.cy-float2,.cy-hop,.cy-spin,.cy-blink,.cy-track{animation:none}
}

@media (max-width:640px){.wk-pair{grid-template-columns:minmax(0,1fr)}}