/* manga.css: Japanese manga x katana restyle. Loads LAST. Delete this file + manga.js (and the 3 tags in each page) to undo.
   Ink black page, washi-paper whites, white-on-ink accents, screentone dots, speed lines, slashed edges. */
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
html.mg{--sumi:#050505;--washi:#f4f4f2;--steel:#9a9a9a;--sh:#6f6f6f;
  --bg:#050505;--bg2:#0a0a0a;--ink:#f4f4f2;--muted:#a3abb3;--line:rgba(244,244,242,.22);--gb:rgba(244,244,242,.5);
  --head:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;--body:"Zen Kaku Gothic New","Inter",sans-serif;
  background:#050505!important}
.mg ::selection{background:#fff;color:#000}
.mg :focus-visible{outline:3px solid var(--washi);outline-offset:3px}
.mg body{font-weight:500}
.mg h1,.mg h2,.mg h3,.mg .logo,.mg .big,.mg .fact b,.mg .x-sc b,.mg summary,.mg .x-bl,.mg .stats b,.mg .mini b{font-weight:400;font-synthesis:none}
.mg h1{font-size:clamp(2.3rem,8vw,5rem);line-height:1.12;letter-spacing:0}
.mg h2{font-size:clamp(1.7rem,4.6vw,2.8rem);line-height:1.15;letter-spacing:0}
.mg h1 .mi,.mg h1 span,html.mg:not(.mjs) h1 span{background:none;-webkit-text-fill-color:currentColor;color:var(--washi);text-shadow:4px 4px 0 #555}
.mg .hero-in h1,.mg .hero-in .lede{text-shadow:none}
.mg .x-bl{font-size:clamp(1.9rem,7.4vw,4rem);line-height:1.15;max-width:18ch}
.mg .x-bl{color:#8d8d8d}.mg .x-bl em{color:#fff;text-shadow:3px 3px 0 #444}

/* page: ink, screentone corners, red pointer light, no bubbles or particles */
.mg #gl,.mg #bub,.mg #fxp,.mg #fxg,.mg #fxbar{display:none!important}
.mg body::before{content:"";position:fixed;inset:0;width:auto;height:auto;transform:none;z-index:0;pointer-events:none;
  background:radial-gradient(rgba(244,244,242,.1) 1px,transparent 1.7px) 0 0/7px 7px;
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 34%,transparent 66%,#000);mask-image:linear-gradient(135deg,#000,transparent 34%,transparent 66%,#000)}
.mg #spot{background:radial-gradient(420px circle at var(--x,50%) var(--y,25%),rgba(255,255,255,.08),transparent 70%)}
.mg #mprog{height:4px;background:linear-gradient(90deg,#444,#fff)}

/* focus lines behind the hero, big kanji / sound effects behind sections */
.mg .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background:repeating-conic-gradient(from 0deg at 50% 46%,#f4f4f2 0 .5deg,transparent .5deg 3.6deg);
  -webkit-mask-image:radial-gradient(circle at 50% 46%,transparent 22%,#000 78%);mask-image:radial-gradient(circle at 50% 46%,transparent 22%,#000 78%)}
.mg [data-sfx]{position:relative}
.mg [data-sfx]::before{content:attr(data-sfx);position:absolute;right:-1%;top:-.25em;z-index:-1;pointer-events:none;white-space:nowrap;
  font:400 clamp(6rem,26vw,15rem)/1 var(--head);color:transparent;-webkit-text-stroke:2px rgba(244,244,242,.2);transform:rotate(-7deg)}

/* meteors, as katana cuts falling across the page */
#mtr{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1;opacity:.55}
#mtr i{position:absolute;top:-18vh;left:calc(var(--x)*1vw);width:2px;height:16vmin;opacity:0;transform:rotate(35deg);
  background:linear-gradient(transparent,#f4f4f2);animation:mg-fall var(--t) linear var(--d) infinite}
@keyframes mg-fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(35deg)}12%{opacity:.9}100%{opacity:0;transform:translate3d(-80vh,115vh,0) rotate(35deg)}}

/* manga panels: hard ink border, screentone fill, red offset shadow */
.mg .svc,.mg .offer,.mg .work,.mg .cta,.mg .tl,.mg .slide-tl,.mg .cmp,.mg .x-sc,.mg .x-stage,.mg .fact,.mg .promise,.mg .stats-in,.mg .x-gl,.mg .reel .work.more,.mg .steps li,.mg details{
  background:radial-gradient(rgba(244,244,242,.09) 1px,transparent 1.6px) 0 0/6px 6px,#0a0a0a;
  -webkit-backdrop-filter:none;backdrop-filter:none;border:3px solid var(--washi);border-radius:0;box-shadow:6px 6px 0 var(--sh)}
.mg details,.mg .steps li{box-shadow:4px 4px 0 var(--sh)}
.mg .svc.pop,.mg .offer.pop,.mg .work.pop,.mg .cta.pop,.mg .x-sc.pop,.mg .svc:hover,.mg .offer:hover,.mg .work:hover,.mg .cta:hover,.mg .x-sc:hover,.mg .vfeed .work.live{
  border-color:var(--washi);box-shadow:10px 10px 0 #fff}
.mg #faq details{border-radius:0;padding:0 20px;border:3px solid var(--washi)}
.mg .x-gl{background:rgba(5,5,5,.85)}
.mg .stats{background:none}
.mg .fxs{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 65%);mix-blend-mode:screen}
.mg .badge,.mg .tag{color:var(--steel)}
.mg .cta{padding:48px 24px}

/* hanko seal labels */
.mg .pill{display:inline-block;border:0;border-radius:3px;background:var(--washi);color:var(--sumi);font:400 .8rem/1 var(--head);letter-spacing:.04em;text-transform:none;padding:8px 12px;transform:rotate(-2deg);box-shadow:none}
.mg section>h2::after{content:"";display:block;width:72px;height:6px;margin-top:12px;background:var(--washi);transform:skewX(-35deg)}
.mg .hero-in h2::after,.mg .intro h2::after{margin-inline:auto}

/* buttons: slanted blade ends, moving red rim (Aceternity moving border) */
.mg .btn,.mg .offer .btn,.mg .btn.go,.mg .btn.alt,.mg .menu-btn{position:relative;isolation:isolate;border:0;border-radius:0;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:var(--sumi);--bf:var(--washi);font:400 .95rem/1 var(--head);padding:15px 32px;text-decoration:none;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.mg .btn.alt,.mg .menu-btn{--bf:var(--sumi);color:var(--washi)}
.mg .btn.sm{padding:11px 22px;font-size:.82rem}
.mg .menu-btn{padding:13px 22px}
.mg .btn::before,.mg .menu-btn::before,.mg .btn::after,.mg .menu-btn::after{content:"";position:absolute;z-index:-1;clip-path:inherit}
.mg .btn::before,.mg .menu-btn::before{inset:0;background:conic-gradient(from var(--a),#4a4a4a 0 52%,#fff 78%,#4a4a4a);animation:mg-spin 3.2s linear infinite}
.mg .btn::after,.mg .menu-btn::after{inset:3px;background:var(--bf)}
.mg .menu-btn i{border-color:currentColor}
.mg .menu-btn i::after{background:currentColor}
.mg .btn:hover,.mg .offer .btn:hover,.mg .btn.go:hover{background:transparent;--bf:var(--sumi);color:var(--washi)}
.mg .btn.alt:hover,.mg .menu-btn:hover{background:transparent;--bf:var(--washi);color:var(--sumi)}
@keyframes mg-spin{to{--a:360deg}}
.mg .x{border:3px solid var(--washi);border-radius:0;background:var(--sumi)}
.mg .frm input,.mg .frm textarea,.mg .frm select{background:#000;border:3px solid var(--washi);border-radius:0}
.mg .frm input:focus,.mg .frm textarea:focus{border-color:#fff;box-shadow:4px 4px 0 var(--sh)}
.mg .pick button{border:3px solid var(--washi);border-radius:0;background:#000;font-family:var(--head)}
.mg .pick button:hover,.mg .pick button.on{background:var(--washi);color:var(--sumi)}

/* header, menu, logo */
.mg header.top.scrolled{background:rgba(5,5,5,.92);border-bottom:3px solid var(--washi);-webkit-backdrop-filter:none;backdrop-filter:none}
.mg .logo{font:400 1.05rem var(--head)}
.mg #panel{background:#050505;-webkit-backdrop-filter:none;backdrop-filter:none;border-left:6px solid var(--washi);box-shadow:80px 0 0 #050505}
.mg #panel nav a{font:400 1.45rem var(--head);border-bottom:3px solid var(--line)}
.mg #panel nav a:hover,.mg #panel nav a[aria-current="page"]{background:var(--washi);color:var(--sumi);border-bottom-color:var(--washi)}

/* marquee: a paper strip with the 斬 mark between words */
.mg .marq{background:var(--washi);border-block:3px solid var(--sumi);transform:rotate(-1.4deg);margin-inline:-4vw;padding-block:12px}
.mg .marq div{color:var(--sumi);font:400 1.35rem var(--head)}
.mg .marq i{font-size:0;margin-inline:20px}
.mg .marq i::after{content:"斬";font-size:1.35rem;color:#777}
.mg .film{border-block:3px solid var(--washi)}
.mg .film::before,.mg .film::after{background:repeating-linear-gradient(90deg,#f4f4f2 0 10px,transparent 10px 22px);opacity:.5}

/* work media: thumbnails and videos keep full colour */
.mg .film img{filter:none}
.mg .vfeed .work.live .badge::before{background:#fff}
.mg .play{background:var(--washi)}

/* raw vs cut: the divider is a blade, the handle a tsuba */
.mg .cmp .hd::before{width:4px;margin-left:-2px;background:linear-gradient(#fff,var(--steel) 50%,#fff);box-shadow:0 0 0 1px #000,0 0 20px 3px rgba(244,244,242,.5)}
.mg .cmp .hd b{border-radius:0;background:var(--washi);color:var(--sumi);animation:none;box-shadow:none;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.mg .cx-edge{background:linear-gradient(90deg,rgba(255,255,255,.5),transparent)}
.mg .lbl{border-radius:0;background:var(--sumi);border:2px solid var(--washi);font-family:var(--head)}
.mg .cx .cap span{--amber:var(--washi)}
.mg .cx.cx-in .cap.on span{color:var(--sumi)}

/* timeline words, stacks, footer, cursor */
.mg .c1,.mg .c4{background:var(--washi);color:var(--sumi)}.mg .c2{background:var(--steel);color:var(--sumi)}.mg .c3{background:#5a5a5a;color:var(--washi)}
.mg .sw{border:3px solid var(--sumi)}
.mg .ph{background:#fff;box-shadow:0 0 14px #fff}
.mg footer.ft{border-top:3px solid var(--washi)}
.mg .ft-col b{color:var(--steel)}
.mg .ft-soc a{border-radius:0;background:#000;border:3px solid var(--washi);-webkit-backdrop-filter:none;backdrop-filter:none}
.mg #cur{background:var(--washi);color:var(--sumi);border:3px solid var(--sumi);font-family:var(--head)}
.mg .lb-box{border:3px solid var(--washi);box-shadow:8px 8px 0 var(--sh)}
.mg .vnav button{border-radius:0;border:3px solid var(--washi);background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.mg .vnav .vdots i.on{background:var(--washi)}
.mg .bk-next{background:var(--washi);border:3px solid var(--sumi)}
.mg .skip{background:var(--washi);color:var(--sumi)}

/* katana intro: the screen is cut once per visit, the halves fall apart */
#kt{position:fixed;inset:0;width:100%;height:100%;z-index:199;pointer-events:none}
#ksl{position:fixed;inset:0;z-index:9999;pointer-events:none}
#ksl i{position:absolute;inset:0;display:grid;place-items:center;background:#050505}
#ksl .a{clip-path:polygon(0 0,100% 0,0 100%);animation:mg-a 1.2s cubic-bezier(.7,0,.2,1) 1.5s forwards}
#ksl .b{clip-path:polygon(100% 0,100% 100%,0 100%);animation:mg-b 1.2s cubic-bezier(.7,0,.2,1) 1.5s forwards}
#ksl span{font:400 clamp(2.2rem,10vw,6rem)/1 "Dela Gothic One",sans-serif;color:#f4f4f2;text-shadow:4px 4px 0 #555;animation:mg-t .8s ease .15s both}
#ksl .k{position:absolute;inset:0;filter:drop-shadow(0 0 6px #fff);animation:mg-f .5s linear 1.5s forwards}
#ksl .k div{position:absolute;inset:0;background:#fff;clip-path:polygon(calc(100% - 3px) 0,100% 0,calc(100% - 3px) 0,100% 0);animation:mg-s .4s cubic-bezier(.5,0,.1,1) 1.05s forwards}
@keyframes mg-a{to{transform:translate(-60%,-60%);opacity:0}}
@keyframes mg-b{to{transform:translate(60%,60%);opacity:0}}
@keyframes mg-t{from{opacity:0;letter-spacing:.3em}}
@keyframes mg-s{to{clip-path:polygon(calc(100% - 3px) 0,100% 0,3px 100%,0 100%)}}
@keyframes mg-f{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.mg .btn::before,.mg .menu-btn::before{animation:none}#mtr,#ksl,#kt{display:none}}
@media (max-width:640px){.mg .svc,.mg .offer,.mg .work,.mg .cta,.mg .cmp,.mg .x-sc,.mg .x-stage{box-shadow:4px 4px 0 var(--sh)}}

/* from the reel: one-word-at-a-time captions, each word cut in by a slash; cloud shader as ink-wash sky with screentone */
.mg .kc{display:flex;justify-content:center;margin:28px 0 0;min-height:3.4rem}
.mg .kc b{display:inline-block;background:var(--washi);color:var(--sumi);font:400 clamp(1.3rem,5vw,2.2rem)/1 var(--head);padding:.3em .65em;transform:rotate(-2deg);animation:kc-in .34s cubic-bezier(.7,0,.2,1) both}
@keyframes kc-in{from{clip-path:polygon(0 0,0 0,-14% 100%,-14% 100%)}to{clip-path:polygon(0 0,114% 0,100% 100%,-14% 100%)}}
.mg .x-stage .cs{position:absolute;inset:0;width:100%;height:100%;display:block}
.mg .x-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(#000 1.2px,transparent 1.9px) 0 0/6px 6px;opacity:.55;mix-blend-mode:multiply}
.mg .x-stage .x-gl{z-index:2}

/* performance: blur layers over the animated canvas were the main lag source; solid fills look the same in this theme */
html.mg *,html.mg *::before,html.mg *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.mg #panel{background:rgba(6,7,9,.95)}
html.mg header.top{background:rgba(5,5,5,.92)}
html.mg h1{--b:.15s}

/* no sideways gap: the tilted, full-bleed marquee is clipped on its own wrapper (clip does not break sticky) */
.marq-w{overflow-x:clip;overflow-y:visible;max-width:100%}
.mg [data-sfx]{overflow-x:clip}
/* small phones: keep logo + Theme + Menu on one line */
@media (max-width:430px){.mg .hdr-in{gap:6px}.mg .logo{font-size:.88rem;gap:6px}.mg .logo svg{width:24px;height:24px}.mg .hd-r{gap:6px}.mg .menu-btn{padding:10px 13px;font-size:.8rem}}
@media (max-width:340px){.mg .logo span{display:none}}