/* Round-5 concept sketches: the sections every concept shares (papers, orbit, fears, decks, about, languages, pick a card, closing peek).
   Colors come from the page tokens: --glow and --bgc are "r,g,b" triples. Images get the concept grade through .g */
/* 4 who: papers + sticky Niro who changes sides */
#who{background:var(--bg);overflow:clip}
#who .head{text-align:center;padding:var(--sec) var(--gut) 0}
.flow{position:relative}
.who-wrap{position:absolute;inset:0;z-index:3;pointer-events:none}
.who-niro{position:sticky;top:26vh;height:74vh}
.who-niro img{position:absolute;bottom:0;height:100%;width:auto;max-width:none;left:50%;transition:transform .8s cubic-bezier(.3,.7,.2,1);transform:translateX(-50%)}
.who-niro.left img{transform:translateX(calc(-50% - 24vw)) scaleX(-1)}
.who-niro.right img{transform:translateX(calc(-50% + 24vw))}
.prow{min-height:96vh;display:flex;align-items:center;padding-inline:var(--gut)}
.prow [data-paper]{width:min(400px,80vw)}
.prow.r{justify-content:flex-start;padding-inline-start:12vw}
.prow.l{justify-content:flex-end;padding-inline-end:12vw}
@media (max-width:760px){
  .who-niro{top:54vh;height:46vh}
  .who-niro.left img{transform:translateX(calc(-50% - 26vw)) scaleX(-1)}
  .who-niro.right img{transform:translateX(calc(-50% + 26vw))}
  .prow{min-height:92vh;align-items:flex-start;padding-top:8vh}
  .prow.r,.prow.l{justify-content:center;padding-inline:var(--gut)}
}

/* 5 shows orbit */
#shows{--track:210vh;--track-s:160vh}
#shows .stage{background:radial-gradient(45% 50% at 50% 60%,rgba(var(--glow),.10),transparent 70%),var(--bg)}
#shows .head{position:absolute;inset-inline:0;top:clamp(64px,9vh,96px);text-align:center;z-index:70;padding-inline:var(--gut)}
.orb-niro{position:absolute;left:50%;bottom:0;height:80vh;width:auto;max-width:none;transform:translateX(-50%);z-index:50;pointer-events:none}
[data-orb].k img{width:clamp(96px,11vw,150px)}
[data-orb] .pcard{--w:clamp(118px,15vw,210px);cursor:pointer}
.showbar{position:absolute;inset-inline:0;bottom:22px;z-index:75;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding-inline:var(--gut);opacity:0;transition:opacity .4s}
.showbar.on{opacity:1}
.showbar button{min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:rgba(var(--bgc),.75);color:var(--ink);font:500 15px/1 var(--font-b);cursor:pointer;backdrop-filter:blur(6px)}
.sheetdlg{position:fixed;inset-inline:0;bottom:0;z-index:140;background:var(--bg2);border-top:1px solid var(--line);border-radius:22px 22px 0 0;padding:26px var(--gut) 40px;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.7,.2,1);max-width:720px;margin-inline:auto}
.sheetdlg.open{transform:none}
.sheetdlg h3{font:800 28px/1.15 var(--font-h)}
.sheetdlg .s{color:var(--muted);margin-top:6px}
.sheetdlg p{margin-top:12px}
.sheetdlg .x{position:absolute;top:14px;left:14px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:20px;cursor:pointer}

/* 7 fears */
#fears{background:var(--bg);overflow:hidden}
.fears{max-width:1080px;margin:var(--gap) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 60px}
.fear{padding:18px 0;border-bottom:1px solid var(--line)}
.fear .q{position:relative;display:inline-block;font:500 clamp(28px,3vw,38px)/1.15 var(--font-hand);color:#DAD5CB}
.fear .q::after{content:"";position:absolute;right:-4px;top:54%;height:3px;width:calc(var(--p,0)*108%);background:var(--accent);border-radius:3px;transform:rotate(-2deg)}
.fear .a{display:block;margin-top:6px;font:700 clamp(18px,1.8vw,21px)/1.4 var(--font-h)}
.fears-niro{position:absolute;left:-2vw;bottom:0;height:min(78vh,720px);width:auto;max-width:none;opacity:.95}
@media (max-width:860px){.fears{grid-template-columns:1fr}.fears-niro{position:relative;left:auto;height:52vh;margin:30px auto -1px}}

/* 8 reels deck */
#reels{background:var(--bg);overflow:hidden}
#reels .deck{--dw:min(320px,74vw);--da:9/16;margin-top:var(--gap)}
#reels .deck-card .back{background:#2a0b10}
.sound{display:block;margin-top:14px;text-align:center;color:var(--muted);font-size:14px}

/* 10 about: half face */
#about{background:var(--bg);overflow:hidden}
.about{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:90vh}
.half{position:relative;height:100%;min-height:90vh;overflow:hidden}
.half img{position:absolute;top:0;left:32%;width:170%;height:auto;max-width:none;transform:translateY(-26%)}
.about .txt{padding:var(--sec) var(--gut);text-align:start}
.about h2{font:800 clamp(36px,4.6vw,64px)/1.08 var(--font-h)}
.about del{position:relative;text-decoration:none;color:var(--muted);font-weight:300}
.about del::after{content:"";position:absolute;right:-4px;top:55%;height:4px;width:calc(var(--p,0)*112%);background:var(--accent);border-radius:3px}
.about ins{text-decoration:none;display:inline-block;opacity:calc(var(--p,0)*1.6 - .4)}
.about p{color:#CFCBC3;margin-top:18px;max-width:520px}
@media (max-width:860px){.about{grid-template-columns:1fr}.half{min-height:62vh}.half img{height:100%}.about .txt{padding-top:20px}}

/* 11 languages */
#langs{background:var(--bg2);border-block:1px solid var(--line)}
.lang .big{color:var(--ink)}
.lang .big.red{color:var(--accent)}

/* 12 pick a card */
#pick{background:var(--bg);overflow:hidden}
.pickstage{position:relative;height:600px;margin-top:var(--gap);overflow:hidden}
.pick-niro{position:absolute;left:50%;top:-381px;height:960px;width:auto;max-width:none;transform:translateX(-47%);z-index:1;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 150px),transparent calc(100% - 90px));mask-image:linear-gradient(to bottom,#000 calc(100% - 150px),transparent calc(100% - 90px))}
@media (max-width:700px){.pickstage{height:520px}.pick-niro{top:-331px;height:840px}}
#pick .deck{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:2;--dw:240px;--da:1/1}
@media (max-width:700px){#pick .deck{--dw:190px}}
#pick .deck-card .face{box-shadow:none;border-radius:0;overflow:visible}
#pick .deck-card .face img{object-fit:contain;filter:drop-shadow(0 16px 20px rgba(0,0,0,.55))}
#pick .deck-card .back{background:transparent;box-shadow:none}
#pick .deck-card .back img{object-fit:contain}
#pick .deck-ui{margin-top:22px;height:56px}

/* 15 closing */
#close{background:radial-gradient(60% 50% at 50% 100%,rgba(var(--glow),.1),transparent 70%),var(--bg);overflow:visible;padding-bottom:0}
.peek{position:relative;height:clamp(260px,34vh,360px);margin-top:var(--gap);overflow:hidden}
.peek{--ph:clamp(460px,62vh,640px)}
.peek img{position:absolute;left:50%;top:calc(30px - var(--ph)*.54);height:var(--ph);width:auto;max-width:none;transform:translateX(-47%)}