/* Layout: full-bleed 3D journey, then blackish-violet editorial sections on a 12-col feel with hairline data rows. */
:root{
 --bg:#0c0713;--bg-2:#1a0f28;--ink:#efe6ff;--ink-soft:#a597bd;--line:#efe6ff24;--accent:#a96bff;--accent-2:#d7a8ff;--sky:#1d1030;--on-sky:#fff;color-scheme:dark;
 --serif:'Instrument Serif',Georgia,'Times New Roman',serif;--sans:'Inter Tight','Noto Sans JP',system-ui,sans-serif;--mono:'IBM Plex Mono','Noto Sans JP',ui-monospace,monospace;--jp:'Noto Sans JP',system-ui,sans-serif;
 --gutter:max(16px,3.2vw);
}
body.light{--bg:#f4eefe;--bg-2:#e9def8;--ink:#2a1647;--ink-soft:#6f6286;--line:#2a164733;--accent:#8f3dff;--accent-2:#c48cff;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:85px}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em;line-height:.86}
em{font-family:var(--serif);font-style:italic;text-transform:none;font-weight:400}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.35}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.eyebrow{display:block}
.arrow{font-style:normal;font-family:var(--sans);font-size:.5em;vertical-align:.35em;margin:0 .15em}
.skip{position:fixed;top:-100px;left:10px;z-index:100;background:var(--bg);padding:12px}.skip:focus{top:10px}

/* glossy pill (the reference's signature button) */
.pill{display:inline-flex;align-items:center;gap:14px;border-radius:999px;padding:12px 22px 12px 26px;font:500 14px var(--sans);letter-spacing:-.01em;position:relative;overflow:hidden;isolation:isolate;will-change:transform}
.pill--glass{color:#3a1767;background:linear-gradient(100deg,#fbf8ff 0%,#eadbff 45%,#c9a2ff 100%);border:1px solid #a974ff;box-shadow:inset 0 1px 0 #fff,inset 0 -8px 18px #b98bff55,0 6px 22px #8f3dff26}
.pill--glass::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px 40px at var(--mx,30%) 0%,#fff,transparent 70%);opacity:.9;transition:opacity .4s}
.pill--glass::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(100deg,transparent 30%,#ffffffb0 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s}
.pill--glass:hover::after{transform:translateX(120%)}
.pill i{font-style:normal;font-size:17px;transition:transform .4s}.pill:hover i{transform:translate(3px,2px)}

/* header */
.header{position:fixed;top:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:1fr 2fr auto auto;align-items:center;gap:28px;padding:16px max(var(--gutter),env(safe-area-inset-right,0px)) 16px max(var(--gutter),env(safe-area-inset-left,0px));padding-top:calc(16px + env(safe-area-inset-top,0px));color:var(--on-sky);transition:color .4s,background .4s}
.header.solid{color:var(--ink);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px)}
.logo{font:400 30px var(--serif);letter-spacing:-.02em}.logo span{background:linear-gradient(90deg,#f0dcff,#c58bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.header__nav{display:flex;gap:30px}.header__nav a{position:relative}.header__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:right .4s}.header__nav a:hover::after{right:0}
.header__settings{display:flex;gap:7px;align-items:center;background:none;border:0}
.header__cta{padding:9px 16px 9px 20px;font-size:13px}
.settings{position:fixed;right:calc(var(--gutter) + 120px);top:68px;z-index:40;background:var(--bg);color:var(--ink);padding:18px 22px;border-radius:14px;box-shadow:0 18px 50px #28143740;min-width:240px}
.settings__title{margin:0 0 10px;color:var(--ink-soft)}
.settings label{display:flex;justify-content:space-between;gap:30px;padding:9px 0;font-size:14px;border-top:1px solid var(--line)}
.settings input{accent-color:var(--accent)}

/* 3D journey */
.journey{height:900vh}
.scene{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;color:var(--on-sky);background:var(--sky);isolation:isolate;perspective:1200px}
.landscape{position:absolute;inset:-7%;background:url('assets/landscape.jpg') center/cover;filter:saturate(1.9) hue-rotate(4deg)}
#webgl{position:absolute;inset:0;z-index:0}#webgl canvas{display:block;width:100%;height:100%}
.tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#32184515,transparent 40%,#2010302a)}
#particles{display:none}
.webgl-ready .landscape,.webgl-ready .float-card{display:none}
.float-card{position:absolute;left:calc(50% - 65px);top:23%;width:130px;height:220px;padding:9px;border:1px solid #e5c5ff;border-radius:9px;background:linear-gradient(145deg,#9752dccc,#321744ee);box-shadow:0 0 65px #b934ff88;transform:rotate(-13deg);animation:float 6s ease-in-out infinite}
.card-line{height:100%;border:1px solid #d4b7ed;display:flex;flex-direction:column;align-items:center;justify-content:space-around;font:10px Georgia;letter-spacing:3px}.moon{font:90px Georgia;color:#e8d2ff}
@keyframes float{50%{transform:translateY(-16px) rotate(-6deg)}}

.story{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;transform-origin:50% 55%;backface-visibility:hidden;will-change:transform,opacity;padding:0 var(--gutter)}
.story.active{opacity:1}
.story .s-title{text-shadow:0 2px 30px #2a164730}
.s-caps,.s-row{display:block;text-transform:uppercase}
.story .s-note{position:absolute;text-shadow:0 1px 10px #32174555;font-weight:500}
.tag{display:inline-block;background:var(--accent);color:#fff;border-radius:6px;padding:5px 8px 4px;font-size:10px}
.story .jp{position:absolute;right:4%;bottom:9%;writing-mode:vertical-rl;font:500 13px var(--jp);letter-spacing:.2em;margin:0}
.scroll-hint{position:absolute;z-index:3;left:var(--gutter);bottom:3.2%;font-size:9px}
.scroll-hint i{display:inline-block;font-style:normal;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}
.scene-index{position:absolute;z-index:3;right:calc(var(--gutter) + 70px);bottom:3.2%;font-size:10px}

/* hero / vibes / people share the reference's "lead word + caps block" bottom layout */
.s-hero .s-title,.s-vibes .s-title,.s-people .s-title{position:absolute;left:var(--gutter);right:var(--gutter);bottom:3%;display:grid;grid-template-columns:23.8vw 1fr;font-size:6.67vw;line-height:.82}
.s-lead{font-size:1.02em;align-self:start;transform:translateY(-78%);white-space:nowrap}
.s-lead .arrow{font-size:.4em;vertical-align:.25em}
.s-hero .s-note,.s-vibes .s-note,.s-people .s-note{left:var(--gutter);top:52%}
.s-vibes .tag,.s-people .tag{position:absolute;left:var(--gutter);top:calc(52% - 42px)}
.s-approach{padding-top:24vh}
.s-approach .s-title{font-size:6vw;line-height:.86;margin-top:22px}
.s-approach .s-title em{font-size:1.03em}
.s-approach .s-note{left:var(--gutter);top:calc(24vh + 30px + 18vw)}
.s-beauty{padding-left:58.5%;padding-top:31vh}
.s-beauty .s-title{font-size:5.2vw;line-height:.88;margin-top:22px;text-transform:uppercase}
.s-beauty .s-note{position:static;margin-top:34px}
.s-beauty .jp,.s-approach .jp{display:none}

/* what we offer */
.what{padding-block:150px 160px}
.what__grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.what__copy{display:grid;gap:40px;justify-items:start;max-width:620px}
.what__lead{font:400 clamp(22px,2.3vw,34px)/1.35 var(--jp);letter-spacing:-.01em;margin:0;text-wrap:pretty}
.what__arrow{font-size:.9em;margin-right:.8em;color:var(--accent)}
.what__en{display:block;margin-top:18px;font:400 .62em/1.4 var(--sans);color:var(--ink-soft)}
.what__list{height:min(560px,70vh);overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.arcana-roll{list-style:none;margin:0;padding:0;will-change:transform}
.arcana-roll li{display:grid;grid-template-columns:70px 1fr auto;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);transition:color .3s}
.arcana-roll li.is-center{color:var(--ink)}
.arcana-roll b{font:400 clamp(22px,2vw,30px) var(--sans);letter-spacing:-.02em;text-align:right}
.arcana-roll small{font:12px var(--jp);text-align:right;grid-column:3}
.arcana-roll .mono{font-size:10px}

/* decks — scattered grid */
.projects{padding-block:60px 120px}
.projects__title{display:grid;gap:30px;margin-bottom:100px}
.projects__title h2{display:grid;grid-template-columns:23.8vw 1fr auto 1fr;align-items:baseline;font-size:7.4vw;line-height:.9}
.projects__title h2>span:last-child{text-align:right}
.projects__title em{padding-left:0}
.projects__spark{font:16px var(--sans);color:var(--accent);animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25;transform:scale(.7) rotate(45deg)}}
.projects__title p{margin:0 0 0 23.8vw}
.decks{display:grid;grid-template-columns:repeat(12,1fr);gap:80px 2.6%;align-items:start}
.deck{min-width:0}
.deck--1{grid-column:1/4}.deck--2{grid-column:7/9;margin-top:180px}.deck--3{grid-column:10/13}
.deck--4{grid-column:4/6}.deck--5{grid-column:8/11;margin-top:20px}
.deck--6{grid-column:1/4}.deck--7{grid-column:6/9;margin-top:140px}.deck--8{grid-column:10/13}
.deck__link{display:grid;gap:10px}
.deck__asset{position:relative;display:block;aspect-ratio:.86;max-width:100%;border-radius:20px;overflow:hidden;background:var(--bg-2)}
.deck--2 .deck__asset,.deck--4 .deck__asset{aspect-ratio:.82}.deck--5 .deck__asset{aspect-ratio:.8}
.deck__asset img{width:100%;height:100%;object-fit:cover;display:block;transition:scale 1s cubic-bezier(.2,.8,.2,1);transform-origin:50% 50%}
.deck__link:hover img{scale:1.06}
.deck__asset canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.deck__overlay{position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink);font-size:18px;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.deck__link:hover .deck__overlay{transform:scale(1)}
.deck__scope{margin-top:6px;font-size:9px}.deck__scope i{font-style:normal;margin:0 .6em}
.deck__title{font:400 clamp(26px,2.2vw,34px)/1 var(--serif)}
.deck__jp{font:12px var(--jp);color:var(--ink-soft)}
.deck__text{font:12px/1.9 var(--jp);color:var(--ink-soft);margin:10px 0 0;max-width:36ch}
.projects__more{display:flex;justify-content:center;margin-top:90px}
.source-note{margin:60px 0 0;max-width:70ch;color:var(--ink-soft);text-transform:none;line-height:1.8;font-size:10px}

/* anatomy (the reference's awards table, applied to the 78 cards) */
.awards{padding-block:110px 140px}
.awards__head{display:grid;grid-template-columns:23.8vw 1fr auto;gap:20px;align-items:start;padding-bottom:30px}
.awards__head p{margin:0}.awards__total b{font-weight:500}
.anatomy-item{display:grid;grid-template-columns:23.8vw 1fr 1fr;gap:20px;border-top:1px solid var(--ink);padding:22px 0 30px}
.anatomy-item h3{font:400 clamp(26px,2.6vw,40px)/1 var(--serif);text-transform:uppercase;display:flex;gap:.4em;align-items:baseline}
.anatomy-item h3 small{font:11px var(--mono)}
.anatomy-item .jp-name{font:13px var(--jp);color:var(--ink-soft);margin:8px 0 0}
.spec{list-style:none;margin:0;padding:0;grid-column:3}
.spec li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:7px 0;font:14px var(--sans)}
.spec li::after{content:none}
.spec .dots{border-bottom:1px dashed var(--line);transform:translateY(-4px)}
.spec .x{font:11px var(--mono);font-variant-numeric:tabular-nums}
.anatomy-item .bar{grid-column:2;align-self:center;height:6px;border-radius:6px;background:var(--bg-2);overflow:hidden}
.anatomy-item .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));transform-origin:left;transform:scaleX(var(--v))}

/* footer */
.footer{padding-block:120px 0}
.footer__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.footer__cta{display:grid;gap:36px;justify-items:start}
.footer__title{font-size:6.67vw;line-height:.85}
.footer__title em{font-size:1.04em}
.footer__note{margin:0}
.footer__data{display:grid;grid-template-columns:1fr 1fr;gap:50px 30px;align-content:start;padding-top:120px}
.flabel{font:500 15px var(--sans);color:var(--ink-soft);margin:0 0 16px}.flabel i{font-style:normal}
.fgroup ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fgroup a span{opacity:.5;margin-right:.6em}.fgroup a:hover{color:var(--accent)}
.fgroup p.mono{margin:0;text-transform:none}
.copy{background:none;border:0;padding:0;text-align:left;word-break:break-all;border-bottom:1px solid var(--line)}
.copied{display:block;margin-top:8px;color:var(--accent)}
.footer__bar{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;border-top:1px solid var(--ink-soft);margin-top:160px;padding-block:22px;font:13px var(--sans);color:var(--ink-soft)}
.footer__bar a{color:var(--ink)}.footer__bar a i{font-style:normal}.footer__bar span:last-child{text-align:right}

/* reveal: last screen, draws one major arcana card */
.reveal{height:200vh;position:relative}
.reveal__sticky{position:sticky;top:0;height:100svh;overflow:hidden;color:#fff;display:grid;justify-items:center;align-content:center;gap:18px;text-align:center}
.reveal__bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0c0713 0%,#0c071380 30%,#0c0713b0 100%),url('assets/landscape.jpg') center 72%/cover;filter:brightness(.55) saturate(1.35) hue-rotate(-8deg);transform:scale(calc(1.25 - var(--p,0)*.25))}
.reveal__top{position:absolute;top:calc(84px + env(safe-area-inset-top,0px));left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;margin:0;font-weight:500}
.reveal__ring{position:relative;width:86px;height:86px;border-radius:50%;background:#ffffff14;border:0;color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px)}
.reveal__ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.reveal__ring circle{fill:none;stroke-width:1.5}.ring-bg{stroke:#ffffff70}.ring-fg{stroke:#fff;stroke-width:3!important;stroke-dasharray:302;stroke-dashoffset:calc(302 - 302*var(--p,0))}
.reveal__ring i{font-style:normal;font-size:20px}
.reveal__label{margin:0;font-weight:500}
.reveal__card{display:grid;gap:12px;justify-items:center;padding:0 16px}
.reveal__card p{margin:0}
.reveal__name{font-size:clamp(64px,10vw,150px);line-height:.9;text-transform:uppercase;text-wrap:balance;text-shadow:0 4px 40px #2a164760}
.reveal__jp{font:500 15px/1.7 var(--jp);max-width:32ch}
.reveal__card.is-new .reveal__name{animation:cardIn 1.1s cubic-bezier(.2,.8,.2,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) rotateX(50deg);filter:blur(10px)}}

/* floating orb */
.orb{position:fixed;z-index:25;right:calc(var(--gutter) + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,#e9d4ff 30%,#b07cff 58%,#6b2be0 100%);box-shadow:0 8px 30px #8f3dff70,inset -6px -8px 16px #5a1fbf88,inset 4px 6px 12px #ffffffaa;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.orb span{position:absolute;inset:6px;border-radius:50%;background:conic-gradient(from 0deg,transparent,#ffffff90,transparent 40%);animation:orbSpin 4s linear infinite;mix-blend-mode:screen}
.orb:hover{transform:scale(1.12)}
@keyframes orbSpin{to{transform:rotate(1turn)}}

.header.solid .logo span{background-image:linear-gradient(90deg,#b77bff,#7d2cff)}
/* reduced motion */
.reduced *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.float-card,.orb span,.projects__spark{animation:none}}

/* tablet */
@media(max-width:1000px){
 .header{grid-template-columns:auto 1fr auto;gap:18px}.header__nav{justify-content:center;gap:18px}.header__cta{display:none}
 .decks{grid-template-columns:1fr 1fr;gap:60px 4%}.deck[class*="deck--"]{grid-column:auto;margin-top:0}.deck:nth-child(even){margin-top:90px}
 .what__grid,.footer__grid{grid-template-columns:1fr}.footer__data{padding-top:20px}
}
/* phone */
@media(max-width:700px){
 :root{--gutter:16px}
 .mono{font-size:10px}
 .header{grid-template-columns:1fr auto;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px}
 .header__nav{display:none}.header__settings{font-size:0;gap:0}.header__settings svg{width:18px;height:18px}
 .logo{font-size:26px}
 .settings{right:16px;left:16px;top:64px}
 .journey{height:760vh}
 .scene{min-height:560px}
 .s-hero .s-title,.s-vibes .s-title,.s-people .s-title{grid-template-columns:1fr;font-size:12.6vw;bottom:15%;line-height:.88}
 .s-lead{transform:none;margin-bottom:.06em;font-size:1em}
 .s-hero .s-note,.s-vibes .s-note,.s-people .s-note{top:15%;left:16px;font-size:9px}
 .s-vibes .tag,.s-people .tag{top:calc(15% - 34px)}
 .s-approach,.s-beauty{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 16px max(64px,11vh)}
 .s-approach .s-title{font-size:11.5vw}.s-beauty .s-title{font-size:11.5vw}
 .s-approach .s-note{position:static;margin-top:22px;font-size:9px}
 .s-beauty .s-note{font-size:9px;margin-top:22px}
 .story .jp{bottom:auto;top:24%;right:16px;font-size:11px}
 .s-approach .jp,.s-beauty .jp{display:none}
 .what{padding-block:90px}
 .what__list{height:380px}
 .arcana-roll li{grid-template-columns:52px 1fr auto}
 .projects__title{margin-bottom:56px}
 .projects__title h2{grid-template-columns:1fr auto;font-size:15vw;row-gap:4px}
 .projects__title h2 em{grid-column:1;padding-left:18vw}
 .projects__title h2 .projects__spark{display:none}
 .projects__title h2>span:last-child{grid-column:1/-1;text-align:right}
 .projects__title p{margin-left:0}
 .decks{grid-template-columns:1fr;gap:56px}.deck:nth-child(even){margin-top:0}
 .deck:nth-child(even) .deck__link,.deck:nth-child(even) .deck__text{margin-left:18%}
 .awards__head{grid-template-columns:1fr;gap:16px}
 .anatomy-item{grid-template-columns:1fr;gap:14px}.spec,.anatomy-item .bar{grid-column:1}
 .footer{padding-block:80px 0}.footer__title{font-size:15vw}
 .footer__data{grid-template-columns:1fr 1fr;gap:36px 18px}
 .footer__bar{grid-template-columns:1fr;text-align:left;margin-top:80px;font-size:12px}.footer__bar span:last-child{text-align:left}
 .reveal__top{font-size:9px}
 .orb{width:42px;height:42px}
}

/* ---- flow5: masked line reveals ---- */
.ln{display:block;overflow:hidden;padding:0 .14em .12em;margin:0 -.14em -.12em;perspective:900px}
.ln-i{display:block;transform-origin:50% 100%;will-change:transform,opacity}
.s-lead .ln{overflow:visible}
.s-title{will-change:transform}
.story .s-title{text-shadow:none}
.story .s-title .ln-i{text-shadow:0 2px 26px #2a164738}

/* ---- custom cursor ---- */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cursor{position:fixed;inset:0;z-index:200;pointer-events:none}
.cursor.is-hidden{opacity:0}
.cursor__dot,.cursor__ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.cursor__dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;box-shadow:0 0 0 1px #2a164766,0 0 12px #ffd98a}
.cursor__ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #ffffffd9;box-shadow:0 0 0 1px #2a164726;display:grid;place-items:center;transition:background .35s,border-color .35s}
.cursor.has-label .cursor__ring{background:radial-gradient(circle,#fff6dd30,#f3d48a18 70%);border-color:#f3d48a}
.cursor__label{font:500 8px var(--mono);letter-spacing:.12em;color:#fff;text-shadow:0 0 6px #2a1647;opacity:0;transition:opacity .25s}
.cursor.has-label .cursor__label{opacity:1}
.cursor.has-label .cursor__dot{opacity:0}

/* ---- deck cards dressed as tarot cards ---- */
.deck__asset{transform-style:preserve-3d;will-change:transform;box-shadow:0 20px 50px -24px #2a164780}
.deck__frame{position:absolute;inset:10px;border:1px solid #f3d48ad0;border-radius:13px;pointer-events:none;box-shadow:inset 0 0 0 4px #2a164722,inset 0 0 0 5px #f3d48a55}
.deck__frame i{position:absolute;left:50%;top:-1px;transform:translate(-50%,-50%);font:italic 400 17px/1 var(--serif);color:#2a1647;background:linear-gradient(135deg,#fff6dd,#f3d48a);padding:5px 12px 4px;border-radius:0 0 10px 10px;transform:translate(-50%,0);border:1px solid #f3d48a}
.deck__foil{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;transition:opacity .5s;
 background:radial-gradient(circle at var(--hx,50%) var(--hy,50%),#ffffffa0 0,#ffffff00 38%),
 linear-gradient(115deg,#ff7ad900 20%,#ff7ad966 35%,#8fe3ff66 48%,#ffd98a66 60%,#c48cff00 75%);
 background-size:100% 100%,240% 240%;background-position:0 0,var(--hx,50%) var(--hy,50%)}
.deck__link:hover .deck__foil{opacity:.6}
.deck__overlay{background:linear-gradient(135deg,#fff6dd,#f3d48a);color:#2a1647}

/* ---- arcana roll ---- */
.arcana-roll li{transition:color .4s}
.arcana-roll li .mono{font-variant-numeric:tabular-nums}
.arcana-roll li.is-center b{font-family:var(--serif);font-style:italic;font-size:clamp(26px,2.4vw,36px)}

/* ---- anatomy bars grow in ---- */
.anatomy-item .bar span{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.anatomy-item.is-in .bar span{transform:scaleX(var(--v))}

/* ---- today's card ---- */
.reveal__sticky{gap:14px}
.tcard{background:none;border:0;padding:0;height:min(36vh,330px);aspect-ratio:3/5;perspective:1400px}
.tcard__inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.tcard img{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px #f3d48a80,0 30px 70px -20px #1d0f33cc,0 0 80px #c48cff55}
.tcard__face{transform:rotateY(180deg)}
.reveal__ring{width:64px;height:64px}
.reveal__name{font-size:clamp(40px,6vw,92px)}
.reveal__card{gap:8px}


@media(max-width:700px){
 .tcard{height:min(34vh,300px)}
 .deck__frame{inset:8px}
 .deck__frame i{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.deck__foil{display:none}}

/* ---- flow7: letters scrubbed by scroll, notes decoded ---- */
.story .w{display:inline-block;white-space:nowrap}
.story .ch{display:inline-block;transform:translate3d(0,112%,0);opacity:0;transform-origin:50% 100%;backface-visibility:hidden;will-change:transform,opacity}
.story .ln-i{will-change:auto;transform:none!important;opacity:1!important}
.story .dc{opacity:0}
.story .dc.scr{color:#f3d48a;text-shadow:0 0 8px #ffd98a99}
.story .tag .dc.scr{color:#fff6dd}
.story .jp{opacity:0}
.reduced .story .ch{transform:none;opacity:1}

/* Quiet ivory/lilac halo; transform-only movement on the existing ticker. */
.cursor__ring{border-color:#fff2d7a6;box-shadow:0 0 18px #e0b9ff24,inset 0 0 10px #fff0c912;background:radial-gradient(circle,#fff0c908,transparent 70%)}
.cursor__dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:#fff6df;box-shadow:0 0 9px #ffe7b9aa}

/* ---- flow8: decks scattered sparsely across a 12-column field ---- */
@media(min-width:1001px){
 .decks{grid-template-columns:repeat(12,1fr);column-gap:2.4%;row-gap:170px;align-items:start}
 .deck{margin-top:0}
 .deck--1{grid-column:1/span 3}
 .deck--2{grid-column:7/span 2;margin-top:260px}
 .deck--3{grid-column:10/-1;margin-top:40px}
 .deck--4{grid-column:4/span 2;margin-top:30px}
 .deck--5{grid-column:8/span 3;margin-top:230px}
 .deck--6{grid-column:1/span 3;margin-top:-40px}
 .deck--7{grid-column:6/span 2;margin-top:250px}
 .deck--8{grid-column:10/-1;margin-top:120px}
 .projects{padding-block:60px 200px}
}
.deck__link{gap:12px;will-change:transform}
.deck__title{font-size:clamp(26px,2.1vw,34px)}
.deck__jp{font-size:11px}
.deck__scope{font-size:9px;opacity:.85}

/* ---- flow9: blackish violet, fixed 3D layer, parlor ending, fluid light ---- */
#webgl{position:fixed;inset:0;z-index:0}
main{position:relative;z-index:1}
.webgl-ready .scene{background:transparent}
.what,.projects,.awards,.footer{position:relative;background:var(--bg)}
.footer{padding-bottom:40px}
.reveal{height:340vh;position:relative}
.reveal::before{content:"";position:absolute;inset:0 0 auto;height:70vh;background:linear-gradient(var(--bg),transparent);pointer-events:none}
.webgl-ready .reveal__bg,.webgl-ready .tcard{display:none}
.webgl-ready .reveal__sticky{grid-template-rows:auto 1fr auto;align-content:stretch;justify-items:center;padding-block:calc(110px + env(safe-area-inset-top,0px)) max(40px,6vh)}
.webgl-ready .reveal__ring{align-self:start}
.webgl-ready .reveal__label{align-self:start;margin-top:-6px}
.webgl-ready .reveal__card{align-self:end;text-shadow:0 2px 30px #0c0713}
.reveal__name{color:#fff3dc}
.fluid{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:6;mix-blend-mode:difference;opacity:0;transition:opacity .9s}
.fluid.is-on{opacity:1}
.cursor.is-invert .cursor__ring{border-color:#ffe2b0;box-shadow:0 0 22px #ffd98a55}
.deck-fling .deck{opacity:0}
.decks,.deck{position:relative}
.deck-ghost{position:absolute;object-fit:cover;border-radius:20px;pointer-events:none;mix-blend-mode:screen;z-index:3;will-change:transform,opacity}
.lw{display:inline-block;white-space:nowrap}
.lc{display:inline-block}
.dk-wait{opacity:0}
.dk.is-scr{color:var(--accent-2)}
.dk.is-off{opacity:0}
.deck__asset{box-shadow:0 30px 70px -30px #000,0 0 0 1px #f3d48a22}
.awards__head,.anatomy-item{position:relative;z-index:1}

/* ---- flow11: a longer walk through the parlor with chapters, moonlight over the decks ---- */
.reveal{height:1100vh}
.pchaps{position:absolute;inset:0;pointer-events:none;z-index:1}
.pchap{position:absolute;left:max(var(--gutter),env(safe-area-inset-left,0px));bottom:max(64px,11vh);width:min(680px,calc(100vw - 2 * var(--gutter)));display:grid;gap:16px;justify-items:start;text-align:left;visibility:hidden;--in:0;--out:0}
.pchap.is-live{visibility:visible}
.pchap__title{margin:0;font:400 clamp(46px,6.6vw,112px)/.86 var(--serif);text-transform:uppercase;color:#fff3dc;text-shadow:0 4px 40px #0c0713b0}
.pchap__title em{text-transform:none}
.pchap__title .s-row{display:block}
/* letters fade as they rise instead of passing a hard edge, so a stop mid-scroll never leaves them cut in half */
.pl{padding:.05em 0 .07em}
.pc{display:inline-block;will-change:transform,opacity;--a:clamp(0, var(--in) * 1.7 - var(--d), 1);--b:clamp(0, var(--out) * 1.7 - var(--d), 1);opacity:calc(var(--a) - var(--b));transform:translate3d(0,calc((1 - var(--a) - var(--b)) * 40%),0)}
.pchap .tag,.pchap__note,.pchap__jp{margin:0;opacity:calc(var(--in) - var(--out));transform:translate3d(0,calc((1 - var(--in)) * 24px - var(--out) * 24px),0)}
.pchap__note{font-size:11px;font-weight:500;color:#e9dcff;text-shadow:0 1px 14px #0c0713}
.pchap__jp{font:500 14px/1.8 var(--jp);color:#fff3dc;text-shadow:0 1px 14px #0c0713}
.webgl-ready .reveal__ring,.webgl-ready .reveal__label,.webgl-ready .reveal__card{opacity:var(--fin,1)}
@media(max-width:700px){.pchap{bottom:max(48px,9vh);gap:12px}.pchap__title{font-size:13vw}.pchap__note{font-size:9px}.pchap__jp{font-size:13px}}

/* ---- flow12: reference text details for the anatomy table and the footer ---- */
.awards__head{grid-template-columns:repeat(12,1fr);align-items:end;column-gap:20px}
.awards__title{grid-column:1/span 6;margin:0;font:400 clamp(48px,6.67vw,110px)/.84 var(--serif);text-transform:uppercase}
.awards__title em{text-transform:none}
.awards__head p.mono:not(.awards__total){grid-column:8/span 3;text-align:justify}
.awards__total{grid-column:11/span 2;justify-self:end;background:var(--accent);color:#fff;border-radius:6px;padding:6px 10px 5px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.tx .s-row{display:block}
.tx-wait .s-row,.tx-in:not(.tx-done) .s-row,.anatomy-item h3.tx-wait,.anatomy-item h3.tx-in:not(.tx-done){overflow:hidden;padding-bottom:.06em}
.tx-u{transition:translate 1.2s cubic-bezier(.16,1,.3,1),opacity .7s}
.tx-wait .tx-u{translate:0 110%;opacity:0}
.f-push{display:flex;align-items:flex-start;gap:.08em}
.f-push__icon{font-style:normal;font-family:var(--sans);font-size:.5em;line-height:1.5;display:inline-block}
.f-push__text{display:inline-block}
.anatomy-item{border-top:0;transition:opacity 1s}
.anatomy-item::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.anatomy-item.is-in::before{transform:scaleX(1)}
@media(hover:hover){.anatomy:hover .anatomy-item:not(:hover){opacity:.3}}
.scc{display:inline-block;min-width:.5ch}
.footer__bar a{position:relative}
.footer__bar a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.footer__bar a:hover::after{transform:scaleX(1);transform-origin:left}
.roll{display:block;height:1.25em;line-height:1.25em;overflow:hidden}
.roll b{display:block;font-weight:inherit;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.roll b+b{transform:translateY(10%)}
.pill:hover .roll b{transform:translateY(-110%)}
.pill:hover .roll b+b{transform:translateY(-100%)}
@media(max-width:700px){.awards__head{grid-template-columns:1fr}.awards__title,.awards__head p.mono:not(.awards__total),.awards__total{grid-column:1;justify-self:start}.awards__title{font-size:13vw}}
@media(prefers-reduced-motion:reduce){.tx-wait .tx-u{translate:none;opacity:1}}

/* ---- flow12: photo pop-ups during the orbit, a richer final card ---- */
.pops{position:absolute;inset:0;pointer-events:none;z-index:1}
.webgl-ready .reveal__name{background:linear-gradient(180deg,#fff7dc 0%,#f6d891 45%,#b98a3c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 26px #0c0713)}
.reveal__label{display:flex;align-items:center;gap:14px;color:#f6e7c4}
.reveal__label::before,.reveal__label::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,#f3d48a)}
.reveal__label::after{transform:scaleX(-1)}
.reveal__ring::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed #f3d48a88;animation:orbSpin 24s linear infinite}
.reveal__ring{box-shadow:0 0 40px #f3d48a33,inset 0 0 20px #f3d48a22}
@media(prefers-reduced-motion:reduce){.reveal__ring::before{animation:none}}

/* ---- 日本語版の書体: 見出しは しっぽり明朝 B1、本文と小さな文字は Zen 角ゴシック New ----
   和文は全角で幅が出るので見出しは英語版より小さく、行間は広め。palt で仮名を詰める。 */
.lang{opacity:.7}.lang:hover{opacity:1}
html[lang="ja"]{--min:'Shippori Mincho B1','Noto Serif JP',serif;--goth:'Zen Kaku Gothic New','Noto Sans JP',system-ui,sans-serif;--jp:var(--goth)}
html[lang="ja"] body{font-family:var(--goth);font-feature-settings:"palt" 1}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .deck__title{font-family:var(--min);font-weight:600;letter-spacing:.05em;font-feature-settings:"palt" 1}
html[lang="ja"] em{font-family:var(--min);font-style:normal;font-weight:500;color:#f1d9a0}
html[lang="ja"] .mono{font-family:var(--goth);font-weight:500;letter-spacing:.14em;line-height:1.75}
html[lang="ja"] .tag{letter-spacing:.2em;padding:5px 9px 4px}
html[lang="ja"] .header__nav{font-size:12px;letter-spacing:.16em}
html[lang="ja"] .header__nav .lang,html[lang="ja"] [lang="en"]{font-family:var(--sans);letter-spacing:.04em}
html[lang="ja"] .pill{font-family:var(--goth);font-weight:500;letter-spacing:.12em}
html[lang="ja"] .s-hero .s-title,html[lang="ja"] .s-vibes .s-title,html[lang="ja"] .s-people .s-title{font-size:4.5vw;line-height:1.16}
html[lang="ja"] .s-lead{font-size:.72em;transform:translateY(-12%);letter-spacing:.12em}
html[lang="ja"] .s-approach .s-title{font-size:4.3vw;line-height:1.16}
html[lang="ja"] .s-beauty .s-title{font-size:4.6vw;line-height:1.2}
html[lang="ja"] .story .s-note{line-height:1.9}
html[lang="ja"] .story .jp{font-family:var(--min);font-weight:500;letter-spacing:.32em;font-size:14px}
html[lang="ja"] .what__lead{font-family:var(--min);font-weight:500;line-height:1.75;letter-spacing:.05em}
html[lang="ja"] .projects__title h2{font-size:4.8vw;line-height:1.1}
html[lang="ja"] .awards__title{font-size:clamp(34px,4.4vw,72px);line-height:1.16}
html[lang="ja"] .anatomy-item h3{font-size:clamp(22px,2.1vw,32px);letter-spacing:.08em}
html[lang="ja"] .anatomy-item .jp-name{font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
html[lang="ja"] .spec li{font-family:var(--goth);letter-spacing:.06em}
html[lang="ja"] .footer__title{font-size:4.7vw;line-height:1.14}
html[lang="ja"] .f-push__icon{line-height:2}
html[lang="ja"] .flabel{font-family:var(--goth);letter-spacing:.14em}
html[lang="ja"] .fgroup a{letter-spacing:.12em}
html[lang="ja"] .deck__title{font-size:clamp(19px,1.6vw,25px)}
html[lang="ja"] .deck__jp{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0}
html[lang="ja"] .pchap__title{font-size:clamp(34px,4.5vw,74px);line-height:1.14}
html[lang="ja"] .pchap__jp{font:italic 400 17px var(--serif)}
html[lang="ja"] .reveal__name{font-family:var(--min);font-size:clamp(44px,5.4vw,88px);letter-spacing:.12em;line-height:1.1}
html[lang="ja"] .reveal__jp{font-family:var(--sans);letter-spacing:.04em}
html[lang="ja"] .reveal__label{letter-spacing:.4em}
@media(max-width:700px){
 html[lang="ja"] .s-hero .s-title,html[lang="ja"] .s-vibes .s-title,html[lang="ja"] .s-people .s-title{font-size:8.6vw}
 html[lang="ja"] .s-approach .s-title,html[lang="ja"] .s-beauty .s-title{font-size:8.4vw}
 html[lang="ja"] .projects__title h2{font-size:8vw}
 html[lang="ja"] .awards__title,html[lang="ja"] .footer__title{font-size:9.6vw}
 html[lang="ja"] .pchap__title{font-size:8.6vw}
}

/* ---- flow13: section 3 trades card sizes on scroll, color sweep, anatomy photos, bigger pop-ups ---- */
.sweep .lc{color:rgba(239,230,255,.16);transition:color .45s}
.sweep .lc.is-hot{color:#f3d48a}
.sweep .lc.is-lit{color:inherit}
.anatomy-img{position:relative;margin:18px 0 0;width:min(100%,280px);aspect-ratio:16/10;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px -20px #000,0 0 0 1px #f3d48a33}
.anatomy-img img{width:100%;height:100%;object-fit:cover;display:block}
.anatomy-img canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(max-width:700px){.anatomy-img{width:100%}}
@media(prefers-reduced-motion:reduce){.sweep .lc{color:inherit}}

/* ---- flow16: white light on the first screen, sliding tarot cards, bold parlor pop-ups ---- */
.hero-glow{position:fixed;left:-280px;top:-280px;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:4;background:radial-gradient(circle,rgba(255,255,255,.2) 0,rgba(255,255,255,.08) 26%,rgba(255,255,255,0) 64%);mix-blend-mode:screen;opacity:0;transition:opacity .8s;will-change:transform}
.hero-glow.is-on{opacity:1}
.what,.awards,.footer{overflow-x:clip}
.card-rail{display:flex;gap:min(1.6vw,16px);margin-top:30px;--dir:-1}
.card-rail img{width:clamp(76px,8.4vw,140px);height:auto;aspect-ratio:3/5;border-radius:9px;--sl:0;box-shadow:0 26px 50px -24px #000,0 0 34px #c48cff33;opacity:calc(.15 + var(--sl) * .85);
 transform:translate3d(calc((1 - var(--sl)) * var(--dir) * 70vw),calc((1 - var(--sl)) * 80px),0) rotate(calc((1 - var(--sl)) * var(--dir) * 38deg + var(--rot,0deg)));transition:translate .5s cubic-bezier(.16,1,.3,1)}
.card-rail img:nth-child(1){--rot:-7deg}.card-rail img:nth-child(2){--rot:-2deg;translate:0 -12px}.card-rail img:nth-child(3){--rot:4deg}.card-rail img:nth-child(4){--rot:9deg;translate:0 8px}
.card-rail img:hover{translate:0 -22px}
.pops{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.pop{position:absolute;top:14vh;width:min(var(--pw,57vw),900px);visibility:hidden;color:#fff3dc;--in:0;--out:0;--dir:1;opacity:calc(1 - var(--out));
 transform:translate3d(calc(var(--out) * var(--dir) * 8vw),calc(var(--out) * -10vh + (1 - var(--in)) * 6vh),0) rotate(calc(var(--dir) * -2.4deg + (1 - var(--in)) * var(--dir) * -4deg))}
.pop.is-live{visibility:visible;pointer-events:auto}
.pop--r{right:3vw;--dir:1}
.pop--l{left:3vw;top:22vh;--dir:-1}
.pop__win{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;box-shadow:0 50px 120px -40px #000,0 0 90px #c48cff33}
.pop--r .pop__win{clip-path:inset(0 0 0 calc((1 - var(--in)) * 100%))}
.pop--l .pop__win{clip-path:inset(0 calc((1 - var(--in)) * 100%) 0 0)}
.pop__img,.pop__ghost{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pop__img{transform:scale(calc(1.4 - var(--in) * .4)) translateX(calc((1 - var(--in)) * var(--dir) * 7%))}
.pop__ghost{mix-blend-mode:screen;opacity:calc((1 - var(--in)) * .9 + var(--out) * .9)}
.pop__ghost--a{filter:sepia(1) saturate(6) hue-rotate(-45deg) brightness(.9);transform:scale(calc(1.4 - var(--in) * .4)) translateX(calc((1 - var(--in) + var(--out)) * 5%))}
.pop__ghost--b{filter:sepia(1) saturate(6) hue-rotate(175deg) brightness(.9);transform:scale(calc(1.4 - var(--in) * .4)) translateX(calc((1 - var(--in) + var(--out)) * -5%))}
.pop__frame{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;border:1px solid #f3d48a;border-radius:4px;opacity:calc(var(--in) * .9);transform:translate(calc(var(--dir) * -22px * var(--in)),calc(22px * var(--in)))}
.pop__name{position:absolute;top:calc(100% * .56 - .5em);white-space:nowrap;font:400 clamp(48px,calc(var(--pw,57vw) * .18),180px)/1 var(--serif);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.2px #f3d48a;text-shadow:0 0 40px #0c071388;pointer-events:none;
 transform:translateX(calc((1 - var(--in)) * var(--dir) * 40vw - var(--out) * var(--dir) * 12vw))}
.pop--r .pop__name{right:58%}
.pop--l .pop__name{left:58%}
.pop__meta{display:flex;gap:14px;align-items:baseline;margin-top:14px;opacity:var(--in)}
.pop--r .pop__meta{justify-content:flex-end}
.pop__tag{font-size:10px;font-weight:500;color:#e9dcff}
.pop__jp{font:500 13px var(--jp);color:#fff3dc;letter-spacing:.08em}
@media(max-width:700px){.pop{width:min(92vw,calc(var(--pw,57vw) * 1.7))}.pop--r{right:4vw}.pop--l{left:4vw}.pop__name{font-size:calc(var(--pw,57vw) * .28)}.pop--r .pop__name{right:30%}.pop--l .pop__name{left:30%}.card-rail img{width:22vw}}
@media(prefers-reduced-motion:reduce){.card-rail img{transform:none;opacity:1}}

/* ---- flow17: the reading, footer glint and drifting words, footer recede ---- */
/* The card's name and reading stay hidden until the reading has drawn it, with or without 3D. */
.reveal__sticky .reveal__card{opacity:0;transition:opacity .8s}
.reveal__sticky.is-drawn .reveal__card{opacity:1}
.reveal__msg{margin:6px 0 0;max-width:30ch;font:500 15px/1.9 var(--jp);color:#f6ead0;text-wrap:pretty}
html[lang="ja"] .reveal__msg{font-family:var(--min);font-size:17px;letter-spacing:.06em}
.ritual{position:absolute;left:50%;bottom:max(70px,12vh);transform:translateX(-50%);width:min(90vw,720px);margin:0;text-align:center;font:400 clamp(18px,1.8vw,26px)/1.7 var(--serif);color:#fff3dc;text-shadow:0 2px 24px #0c0713;opacity:0;pointer-events:none}
html[lang="ja"] .ritual{font-family:var(--min);letter-spacing:.12em}
.ritual.is-in{animation:ritualIn 1.6s cubic-bezier(.16,1,.3,1) forwards}
@keyframes ritualIn{from{opacity:0;filter:blur(8px);letter-spacing:.4em}to{opacity:1;filter:blur(0)}}
.footer{transform-origin:50% 100%;overflow:clip}
.footer > .wrap{position:relative;z-index:1}
.webgl-ready .reveal__card{padding:22px 28px 8px;background:radial-gradient(closest-side,#0c0713d9 40%,#0c071300);border-radius:40px}
@media(max-width:700px){.webgl-ready .reveal__sticky.is-drawn .reveal__label{opacity:0}}

/* ---- flow20: footer letters fade in with the scroll (reference), reversed card label ---- */
@media(prefers-reduced-motion:reduce){.ritual.is-in{animation:none;opacity:1}}
.sweep-o .lc{opacity:.1;transition:opacity .45s,color .45s}
.sweep-o .lc.is-hot{opacity:1;color:#f3d48a}
.sweep-o .lc.is-lit{opacity:1}
@media(prefers-reduced-motion:reduce){.sweep-o .lc{opacity:1}}
.reveal__card.is-reversed .reveal__num{color:#ffb4c8}

/* ---- flow23: calm gallery, language switch, English page ---- */
.deck__foil{display:none}
.lang-switch{justify-self:end;font-size:11px;letter-spacing:.12em;padding:6px 11px 5px;border:1px solid currentColor;border-radius:999px;opacity:.8;transition:opacity .3s,background .3s}
.lang-switch:hover{opacity:1;background:#ffffff14}
.header{grid-template-columns:1fr 2fr auto auto auto}
@media(max-width:1000px){.header{grid-template-columns:auto 1fr auto auto}}
@media(max-width:700px){.header{grid-template-columns:1fr auto auto}}
html[lang="en"] .story .jp,html[lang="en"] .pchap__jp{display:none}

/* ---- flow24: a two-way language switch ---- */
.lang-switch{display:inline-flex;align-items:stretch;padding:0;border:1px solid currentColor;border-radius:999px;overflow:hidden;opacity:1}
.lang-switch > *{padding:6px 11px 5px;font-size:11px;letter-spacing:.12em;line-height:1.2}
.lang-switch b{font-weight:500;background:var(--ink);color:var(--bg)}
.lang-switch a{opacity:.7;transition:opacity .3s,background .3s}
.lang-switch a:hover{opacity:1;background:#ffffff1a}

/* ---- flow25: the liquid ripple on hovered deck photos is back (the cards stay still) ---- */
/* the liquid copy reaches past the frame so the push can spill out softly; it swaps in for the photo while it moves */
.deck__asset canvas.warp{inset:auto;left:-16%;top:-16%;width:132%;height:132%;opacity:0}
.deck__asset .warp.is-on{opacity:1}
.deck__asset.is-warping{overflow:visible;background:transparent}
.deck__asset.is-warping > img{opacity:0}

/* ---- flow26: buying links ---- */
.deck__buy{display:inline-flex;gap:6px;align-items:center;margin-top:12px;padding:7px 12px 6px;border:1px solid var(--line);border-radius:999px;font-size:10px;letter-spacing:.12em;color:var(--ink);transition:background .3s,border-color .3s}
.deck__buy:hover{background:#f3d48a22;border-color:#f3d48a}
.reveal__buy{margin-top:10px;pointer-events:auto}

/* ---- flow27: "78 cards, all in one box" swings harder between dark and bright ----
   unlit letters are only a faint outline, the moving front burns gold, lit letters glow white */
.awards__title.sweep .lc{color:transparent;-webkit-text-stroke:1px rgba(239,230,255,.2);transition:color .5s,text-shadow .5s,-webkit-text-stroke-color .5s}
.awards__title.sweep .lc.is-hot{color:#f3b85a;-webkit-text-stroke-color:transparent;text-shadow:0 0 16px rgba(255,176,70,.7),0 0 46px rgba(255,140,40,.35)}
.awards__title.sweep .lc.is-front{color:#fff3cf;text-shadow:0 0 10px #fff,0 0 28px rgba(255,214,120,.95),0 0 70px rgba(255,160,50,.6)}
.awards__title.sweep .lc.is-lit{color:#fff;-webkit-text-stroke-color:transparent;text-shadow:0 0 18px rgba(255,255,255,.28)}
@media(prefers-reduced-motion:reduce){.awards__title.sweep .lc{color:#fff;-webkit-text-stroke:0}}

/* ---- flow28: more letter motion in the footer ---- */
.footer__cta .eyebrow::before{content:"";display:inline-block;width:7px;height:7px;margin:0 .7em .1em 0;border-radius:50%;background:#ff6b8b;box-shadow:0 0 10px #ff6b8b;animation:fBlink 1.2s ease-in-out infinite}
@keyframes fBlink{50%{opacity:.15}}
.footer__title.is-done .lc{animation:fGlint 3.8s ease-in-out infinite;animation-delay:calc(var(--k,0) * .07s)}
@keyframes fGlint{0%,58%,100%{text-shadow:0 0 0 rgba(255,210,120,0);filter:brightness(1)}68%{text-shadow:0 0 14px #fff,0 0 38px rgba(255,200,90,.9);filter:brightness(1.7)}}
.footer__cta .pill--glass::after{animation:fShine 3.4s 1.2s ease-in-out infinite}
@keyframes fShine{0%{transform:translateX(-120%)}38%,100%{transform:translateX(120%)}}
.footer__cta .pill i{animation:fNudge 1.7s ease-in-out infinite}
@keyframes fNudge{0%,100%{transform:none}50%{transform:translate(3px,3px)}}
.flabel i,.footer__bar a i{display:inline-block;animation:fBob 1.6s ease-in-out infinite}
@keyframes fBob{0%,100%{transform:none}50%{transform:translateY(5px)}}
.f-st{opacity:0;transform:translateY(22px);transition:opacity .7s,transform 1s cubic-bezier(.16,1,.3,1)}
.f-st.is-in{opacity:1;transform:none}
.f-marquee{margin-top:110px;display:grid;gap:2px;overflow:hidden;pointer-events:none;user-select:none}
.f-marquee__row{white-space:nowrap;font:400 clamp(46px,7.4vw,128px)/1.08 var(--serif);text-transform:uppercase;will-change:transform}
.f-marquee__row span{display:inline-block;padding-right:.35em}
.f-marquee__row:not(.is-o){color:transparent;background:linear-gradient(90deg,#efe6ff 0%,#f3d48a 30%,#ffb4c8 55%,#efe6ff 80%) 0 0/900px 100% repeat-x;-webkit-background-clip:text;background-clip:text}
.f-marquee__row.is-o{color:transparent;-webkit-text-stroke:1px rgba(239,230,255,.42)}
html[lang="ja"] .f-marquee__row{font:600 clamp(36px,5.4vw,92px)/1.3 var(--min);letter-spacing:.04em}
.f-marquee + .footer__bar{margin-top:56px}
@media(max-width:700px){.f-marquee{margin-top:70px}.f-marquee__row{font-size:13vw}html[lang="ja"] .f-marquee__row{font-size:10vw}}
@media(prefers-reduced-motion:reduce){.footer__cta .eyebrow::before,.footer__title.is-done .lc,.footer__cta .pill--glass::after,.footer__cta .pill i,.flabel i,.footer__bar a i{animation:none}.f-st{opacity:1;transform:none}}

/* ---- flow28: Japanese mode in Japanese type; the 78-card title swings hard from dark to bright ---- */
html[lang="ja"] .pop__name{font-family:var(--min);font-weight:600;font-size:clamp(34px,calc(var(--pw,57vw) * .1),110px);letter-spacing:.06em}
html[lang="ja"] .roll b,html[lang="ja"] .arcana-roll b{font-family:var(--min);font-weight:600}
.awards__title{position:relative;isolation:isolate}
.awards__title::before{content:"";position:absolute;inset:-45% -25% -45% -15%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,196,96,.34),rgba(255,120,60,.12) 55%,transparent);opacity:calc(var(--sw,0) * var(--sw,0));transform:scale(calc(.6 + var(--sw,0) * .5));filter:blur(8px)}
.awards__title.sweep .lc{filter:blur(2px);opacity:.75;transition:color .5s,text-shadow .5s,-webkit-text-stroke-color .5s,filter .6s,opacity .6s}
.awards__title.sweep .lc.is-hot,.awards__title.sweep .lc.is-lit{filter:none;opacity:1}
.awards__title.sweep .lc.is-front{filter:brightness(1.35)}
.awards__title.is-done .lc{animation:aGlint 3.4s ease-in-out infinite;animation-delay:calc(var(--k,0) * .08s)}
@keyframes aGlint{0%,55%,100%{text-shadow:0 0 18px rgba(255,255,255,.28);filter:none}66%{text-shadow:0 0 12px #fff,0 0 36px rgba(255,200,90,.95),0 0 80px rgba(255,140,40,.5);filter:brightness(1.8)}}
.awards__title.is-done em .lc{color:#ffe2a0}
@media(prefers-reduced-motion:reduce){.awards__title.sweep .lc{filter:none;opacity:1}.awards__title.is-done .lc{animation:none}.awards__title::before{opacity:.6}}

/* ---- flow29: the row in focus in the 78-card table ---- */
@media(hover:hover){.anatomy:hover .anatomy-item:not(:hover){opacity:1}}
.anatomy-item{transition:opacity .7s}
.anatomy.has-focus .anatomy-item:not(.is-focus){opacity:.28}
.anatomy-img img{transition:filter .8s}
.anatomy.has-focus .anatomy-item:not(.is-focus) .anatomy-img img{filter:grayscale(.9) brightness(.5)}
.anatomy-item::after{content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:#fff3cf;box-shadow:0 0 14px 5px #f3d48acc;opacity:0;pointer-events:none}
.anatomy-item.is-focus::after{animation:aSpark 1.5s cubic-bezier(.4,0,.2,1) both}
@keyframes aSpark{0%{left:0;opacity:0}12%,85%{opacity:1}100%{left:calc(100% - 9px);opacity:0}}
.anatomy-item.is-focus::before{background:linear-gradient(90deg,#f3d48a,#c48cff 55%,var(--ink));box-shadow:0 0 12px #f3d48a66}
.anatomy-item h3 .lc{transition:color .5s}
.anatomy-item.is-focus h3 .lc{color:#ffe9b8;animation:aHop .9s cubic-bezier(.2,.9,.3,1.25);animation-delay:calc(var(--k,0) * .05s)}
@keyframes aHop{0%{transform:none}40%{transform:translateY(-.38em) scale(1.08);text-shadow:0 0 22px rgba(255,200,90,.95)}100%{transform:none}}
.anatomy-item.is-focus .jp-name{animation:aSlide .8s .12s cubic-bezier(.16,1,.3,1) both;color:#f3d48a}
@keyframes aSlide{from{opacity:0;transform:translateX(-16px);letter-spacing:.5em}}
.anatomy-img::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,236,190,.6) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none;mix-blend-mode:screen}
.anatomy-item.is-focus .anatomy-img::after{animation:aShine 1.3s .2s cubic-bezier(.3,.1,.2,1) both}
@keyframes aShine{to{transform:translateX(120%)}}
.anatomy-item.is-focus .anatomy-img img{animation:aKen 1.6s cubic-bezier(.16,1,.3,1) both}
@keyframes aKen{from{transform:scale(1.18);filter:brightness(1.7) saturate(1.4)}}
.anatomy-img{transition:box-shadow .6s}
.anatomy-item.is-focus .anatomy-img{box-shadow:0 26px 60px -24px #000,0 0 0 1px #f3d48a,0 0 44px rgba(243,212,138,.4)}
.anatomy-item.is-focus .bar span{animation:aBar 1.3s cubic-bezier(.16,1,.3,1) both;box-shadow:0 0 16px #c48cff}
@keyframes aBar{from{transform:scaleX(0)}to{transform:scaleX(var(--v))}}
.anatomy-item.is-focus .spec li{animation:aRow .8s cubic-bezier(.16,1,.3,1) both}
.anatomy-item.is-focus .spec li:nth-child(2){animation-delay:.1s}
@keyframes aRow{from{opacity:0;transform:translateX(28px)}}
.anatomy-item.is-focus .spec .dots{animation:aDots 1.1s .15s cubic-bezier(.16,1,.3,1) both;transform-origin:left}
@keyframes aDots{from{transform:translateY(-4px) scaleX(0)}to{transform:translateY(-4px) scaleX(1)}}
.anatomy-item.is-focus .spec .x{color:#f3d48a}
@media(prefers-reduced-motion:reduce){.anatomy-item.is-focus *,.anatomy-item.is-focus::after{animation:none!important}}

/* ---- flow29: footer letters in the Awwwards manner: they flip up out of a blur one by one,
   the title leans with the scroll speed, links slide an arrow in ---- */
.footer__title .s-row{perspective:700px}
.footer__title .tx-u{transition:translate 1.4s cubic-bezier(.16,1,.3,1),rotate 1.4s cubic-bezier(.16,1,.3,1),filter 1.2s cubic-bezier(.16,1,.3,1),opacity .9s;transform-origin:50% 100%}
.footer__title.tx-wait .tx-u{translate:0 90%;rotate:x -88deg;filter:blur(14px);opacity:0}
.footer__title{transform-origin:0 50%}
.fgroup a{position:relative;transition:padding-left .45s cubic-bezier(.16,1,.3,1),color .3s}
.fgroup a::before{content:"→";position:absolute;left:-10px;opacity:0;color:#f3d48a;transition:left .45s cubic-bezier(.16,1,.3,1),opacity .3s}
.fgroup a:hover{padding-left:18px;color:#f3d48a}
.fgroup a:hover::before{left:0;opacity:1}
@media(prefers-reduced-motion:reduce){.footer__title.tx-wait .tx-u{rotate:none;filter:none}}

/* ---- flow30: Japanese line breaks: break between phrases only, never before 、。 or inside a
   word, and keep the last line from holding a single character ---- */
.lp{display:inline-block;white-space:nowrap}
html[lang="ja"] body{word-break:auto-phrase;line-break:strict}
html[lang="ja"] :is(p,li,dd,figcaption,small){text-wrap:pretty}
html[lang="ja"] :is(.deck__title,.dp-quote,.pop__jp){text-wrap:balance}
:lang(ja){line-break:strict}

/* ---- flow31: each row of the 78-card table opens its own card page ---- */
.ana-img-link{display:block}
.ana-more{display:inline-flex;gap:8px;align-items:center;margin-top:14px;padding:8px 14px 7px;border:1px solid var(--line);border-radius:999px;font-size:11px;letter-spacing:.1em;transition:border-color .3s,color .3s,background .3s}
html[lang="ja"] .ana-more{font-family:var(--goth);font-weight:500}
.ana-more i{font-style:normal;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.ana-more:hover,.anatomy-item.is-focus .ana-more{border-color:#f3d48a;color:#f3d48a;background:#f3d48a14}
.ana-more:hover i{transform:translate(3px,-3px)}

/* ---- flow33: lighter motion. Loops run only on screen; the ink layer is off while idle; the
   footer darkens under a veil instead of a full-footer filter ---- */
.footer__title.is-done:not(.in-view) .lc,.awards__title.is-done:not(.in-view) .lc{animation:none}
.fluid.is-on{transition-duration:.15s}
.footer__veil{position:absolute;inset:0;z-index:20;background:#000;opacity:0;pointer-events:none}
.footer.is-receding{will-change:transform}
.footer.is-receding .footer__veil{will-change:opacity}
/* ---- flow34: the opening. The still fallback picture only shows when the 3D cannot run; until the
   3D is ready a soft night sky stands in (under the waiting screen, flow37), and the scene fades in over it. ---- */
body:not(.webgl-fallback) .landscape,body:not(.webgl-fallback) .float-card{display:none}
#webgl{background:radial-gradient(120% 90% at 50% 40%,#3a1e60 0%,#1d1030 50%,#0c0713 100%)}
#webgl canvas{opacity:0;transition:opacity 1.8s cubic-bezier(.3,0,.2,1)}
.scene-live #webgl canvas{opacity:1}

/* ---- flow35: today's card says upright or reversed, and shows both meanings ---- */
.reveal__card.is-reversed .reveal__num{color:inherit}
.reveal__pos{display:inline-block;margin-left:10px;padding:4px 12px 3px;border:1px solid #f3d48a;border-radius:999px;color:#f3d48a;font-weight:600;font-size:13px;letter-spacing:.14em;vertical-align:1px;background:#0c071399}
.reveal__card.is-reversed .reveal__pos{border-color:#ffb4c8;color:#ffb4c8}
.reveal__jp{display:grid;gap:4px;justify-items:center}
.reveal__jp span{opacity:.5;transition:opacity .4s}
.reveal__jp span.is-on{opacity:1}
.reveal__jp b{margin-right:.9em;font-size:.86em;font-weight:600;letter-spacing:.08em}
.reveal__jp .is-on b{color:#f3d48a}
.reveal__card.is-reversed .reveal__jp .is-on b{color:#ffb4c8}

/* ---- flow37: the waiting screen. The shop's eight decks shuffle over a candlelit reading table,
   gold dust drifts up, and the line underneath walks 0 The Fool to XXI The World. When the scene is
   ready the screen flares gold and dissolves into it (loader.js) ---- */
.loader{position:fixed;inset:0;z-index:60;display:grid;place-items:center;overflow:hidden;background:#0c0713;color:#efe6ff;transition:opacity .9s cubic-bezier(.4,0,.2,1) .3s,visibility 0s 1.2s}
.loader__bg{position:absolute;inset:-3%;background:#2a1838 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAQABgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDziIbV8xeT0PNSMG8swDBV2DFinzZ6dfSpjcxlEWKMRpsCsFJIYjuaX7SgXGzIpWvqzdJW3JF05l0zzwxJ3YlReSi9Ax9Bz1oqF5QQdmURh8wzwf8APpRUKEu5Ta2P/9k=) center 58%/cover;animation:ldPush 16s ease-in-out infinite alternate}
.loader__bg::before{content:'';position:absolute;inset:0;background:url(assets/loader/table.webp) center 58%/cover;filter:saturate(1.1)}
.loader__bg::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 50%,#0c071340 0%,#0c0713b8 70%,#0c0713f0 100%),linear-gradient(#0c0713d9,#0c071300 30%,#0c071300 62%,#0c0713f2)}
@keyframes ldPush{to{transform:scale(1.1) translate3d(0,-1.5%,0)}}
/* candlelight: a warm glow that breathes unevenly */
.loader__glow{position:absolute;inset:0;background:radial-gradient(40% 30% at 22% 34%,#ffb45a2e,#ffb45a00 70%),radial-gradient(34% 26% at 82% 40%,#ff9a4a26,#ff9a4a00 70%);animation:ldFlicker 3.2s steps(1) infinite;mix-blend-mode:screen}
@keyframes ldFlicker{0%{opacity:.9}12%{opacity:.6}20%{opacity:1}37%{opacity:.75}52%{opacity:.95}66%{opacity:.7}81%{opacity:1}92%{opacity:.8}}
.loader__dust{position:absolute;inset:-50% 0 0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,#f3d48acc,#0000),radial-gradient(1px 1px at 34% 62%,#fff3dcbb,#0000),radial-gradient(2px 2px at 58% 34%,#f3d48aaa,#0000),radial-gradient(1px 1px at 77% 81%,#fff3dccc,#0000),radial-gradient(1.5px 1.5px at 91% 9%,#f3d48a99,#0000),radial-gradient(1px 1px at 46% 92%,#d7a8ffaa,#0000);background-size:260px 340px;animation:ldDust 22s linear infinite;opacity:.8}
.loader__dust+.loader__dust{background-size:410px 520px;animation-duration:34s;opacity:.55}
@keyframes ldDust{to{transform:translate3d(0,-340px,0)}}
.loader__in{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));text-align:center}
.loader__brand{margin:0 0 18px;font:400 34px var(--serif);letter-spacing:-.02em;text-shadow:0 0 24px #0c0713}
.loader__brand span{background:linear-gradient(90deg,#f0dcff,#c58bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.loader__deck{--cw:clamp(118px,13vw,164px);position:relative;width:var(--cw);aspect-ratio:.6;margin:6px 0 30px;translate:-8% 0;transform-style:preserve-3d}
.loader__deck i{position:absolute;inset:0;border-radius:calc(var(--cw)*.07);overflow:hidden;transform-origin:50% 140%;background:#1a0f28 radial-gradient(circle,#f3d48a40 0 14%,#0000 15%);box-shadow:0 14px 34px #0009,0 2px 6px #0007;animation:ldShuffle 7.2s cubic-bezier(.45,0,.25,1) infinite}
.loader__deck img{display:block;width:100%;height:100%;object-fit:cover}
.loader__deck i::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #f3d48a80,inset 0 0 0 5px #0c071340,inset 0 0 0 6px #f3d48a55;background:linear-gradient(118deg,#fff0 38%,#ffffff1f 48%,#fff0 58%)}
@keyframes ldShuffle{0%,1.875%{transform:translate3d(0.0%,0.0%,0px) rotate(0.0deg)}5.6%{transform:translate3d(70%,-12%,4px) rotate(8deg)}5.631%{transform:translate3d(70%,-12%,-20px) rotate(8deg)}9.375%,14.375%{transform:translate3d(-7.7%,3.5%,-14px) rotate(-21.0deg)}21.875%,26.875%{transform:translate3d(-6.6%,3.0%,-12px) rotate(-18.0deg)}34.375%,39.375%{transform:translate3d(-5.5%,2.5%,-10px) rotate(-15.0deg)}46.875%,51.875%{transform:translate3d(-4.4%,2.0%,-8px) rotate(-12.0deg)}59.375%,64.375%{transform:translate3d(-3.3%,1.5%,-6px) rotate(-9.0deg)}71.875%,76.875%{transform:translate3d(-2.2%,1.0%,-4px) rotate(-6.0deg)}84.375%,89.375%{transform:translate3d(-1.1%,0.5%,-2px) rotate(-3.0deg)}96.875%,100%{transform:translate3d(0.0%,0.0%,0px) rotate(0.0deg)}}
.loader__deck i:nth-child(1){animation-delay:-0.0s;transform:translate3d(0.0%,0.0%,0px) rotate(0.0deg)}.loader__deck i:nth-child(2){animation-delay:-6.3s;transform:translate3d(-1.1%,0.5%,-2px) rotate(-3.0deg)}.loader__deck i:nth-child(3){animation-delay:-5.4s;transform:translate3d(-2.2%,1.0%,-4px) rotate(-6.0deg)}.loader__deck i:nth-child(4){animation-delay:-4.5s;transform:translate3d(-3.3%,1.5%,-6px) rotate(-9.0deg)}.loader__deck i:nth-child(5){animation-delay:-3.6s;transform:translate3d(-4.4%,2.0%,-8px) rotate(-12.0deg)}.loader__deck i:nth-child(6){animation-delay:-2.7s;transform:translate3d(-5.5%,2.5%,-10px) rotate(-15.0deg)}.loader__deck i:nth-child(7){animation-delay:-1.8s;transform:translate3d(-6.6%,3.0%,-12px) rotate(-18.0deg)}.loader__deck i:nth-child(8){animation-delay:-0.9s;transform:translate3d(-7.7%,3.5%,-14px) rotate(-21.0deg)}
.loader__msg{margin:0;min-height:1.5em;font:600 17px/1.5 'Shippori Mincho B1',var(--serif);letter-spacing:.12em;transition:opacity .38s,translate .38s;text-shadow:0 1px 12px #0c0713}
:lang(en) .loader__msg{font:italic 400 22px/1.4 var(--serif);letter-spacing:.01em}
.loader__msg.is-out{opacity:0;translate:0 6px}
.loader__bar{position:relative;width:min(240px,62vw);height:1px;background:#efe6ff2e}
.loader__bar i{position:absolute;inset:0;background:linear-gradient(90deg,#c58bff,#f3d48a);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 10px #f3d48aaa}
.loader__step{display:flex;gap:10px;align-items:baseline;margin:0;color:#efe6ffb3;font-size:12px;letter-spacing:.14em}
.loader__step b{min-width:3.2em;color:#f3d48a;font-weight:500;text-align:right}
.loader__step span{min-width:9em;text-align:left;font-family:'Shippori Mincho B1',var(--serif);text-transform:none;letter-spacing:.1em}
:lang(en) .loader__step span{font:italic 15px var(--serif);letter-spacing:.02em}
.loader__foot{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));margin:0;padding:0 16px;color:#efe6ff99;text-align:center}
/* the finish: a gold flare from the deck, the cards rise and blur away, then the whole screen fades */
.loader::after{content:'';position:absolute;left:50%;top:44%;width:90vmax;height:90vmax;margin:-45vmax;border-radius:50%;background:radial-gradient(#fff3dc 0%,#f3d48a66 18%,#c58bff22 40%,#0000 62%);opacity:0;scale:.15;pointer-events:none}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader.is-done::after{animation:ldFlare 1.2s cubic-bezier(.2,.7,.3,1)}
@keyframes ldFlare{0%{opacity:0;scale:.15}22%{opacity:.85}100%{opacity:0;scale:1.4}}
.loader__in{transition:scale 1.1s cubic-bezier(.3,0,.2,1),filter 1.1s,opacity .8s .2s}
.loader.is-done .loader__in{scale:1.12;filter:blur(6px);opacity:0}
@media (max-width:700px){.loader__deck{--cw:clamp(108px,30vw,140px);translate:0 0}.loader__brand{font-size:30px}.loader__msg{font-size:16px}}
@media (prefers-reduced-motion:reduce){.loader__bg,.loader__glow,.loader__dust,.loader__deck i{animation:none}.loader.is-done::after{animation:none}.loader__in{transition:opacity .4s}.loader.is-done .loader__in{scale:1;filter:none}}

/* ---- flow41: the block right after the 3D (#about, the 22 major arcana rolling by) is about half
   as long, over a tilted grid of the shop's own Rakuten videos in black and white, faded right down
   (tools/make_bg_video.py; ui.js plays it only while the block is on screen) ---- */
.what{overflow:hidden;padding-block:64px}
.what>.wrap{position:relative}
.vgrid{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg);pointer-events:none}
.vgrid video{position:absolute;left:50%;top:50%;width:140%;height:180%;object-fit:cover;translate:-50% -50%;rotate:-12deg;opacity:.11;mix-blend-mode:screen;animation:vgDrift 48s ease-in-out infinite alternate}
@keyframes vgDrift{to{transform:translate3d(-4%,5%,0)}}
.vgrid::after{content:'';position:absolute;inset:0;background:linear-gradient(var(--bg),#0000 22%,#0000 78%,var(--bg)),radial-gradient(130% 100% at 50% 50%,#0000 50%,var(--bg) 100%)}
body.light .vgrid video{mix-blend-mode:multiply;opacity:.06}
@media(prefers-reduced-motion:reduce){.vgrid video{animation:none}}
body.reduced .vgrid video{animation:none}
.what__copy{gap:24px}
.what__lead{font-size:clamp(20px,1.9vw,28px)}
.what__en{margin-top:10px}
.what__list{height:min(320px,46vh);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.arcana-roll li{padding:6px 0}
@media(max-width:1000px){.what__grid{gap:32px}.what__list{height:240px}}
@media(max-width:700px){.what{padding-block:48px}.what__lead{font-size:19px}.what__list{height:190px}}
/* light colors: the lit card group reads in purple, not in gold on the pale ground */
body.light .anatomy-item.is-focus h3 .lc,body.light .anatomy-item.is-focus .jp-name,body.light .anatomy-item.is-focus .ana-more{color:var(--accent)}
/* ---- flow42: moving between pages. The old page lifts away and the new one rises in, drawn by the
   browser itself (Chrome, Edge, Safari 18.2+; others just switch). Short, so a click never waits. ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes vtOut{to{opacity:0;transform:translate3d(0,-24px,0) scale(.985)}}
@keyframes vtIn{from{opacity:0;transform:translate3d(0,32px,0)}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
/* English pages: the lines that held Japanese names now hold English, so they take the English type */
html[lang="en"] .deck__jp{font:italic 15px var(--serif);letter-spacing:0}
html[lang="en"] .pop__jp{font:500 11px var(--mono);letter-spacing:.14em}
html[lang="en"] .anatomy-item .jp-name{font:13px var(--sans)}