/* ============================================================ CAPE CONTACT — CH12対話デモのオーバーレイ(cape_contact_demoから移植) ステージはCH12パネル内(z1, ガラス本文z2の下)。モーダル/対話UIはfixed ============================================================ */ /* ---- ステージ(遷移・対話背景・CAPEキャンバス) ---- */ .cape-stage{position:absolute;inset:0;z-index:1;overflow:hidden} /* object-position/scaleはサイトのループ(50%/1.1)に合わせ、レイヤー切替の構図ジャンプを殺す */ .stage-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%; opacity:0;pointer-events:none; transform:scale(1.1) translate(calc(var(--px,0)*-10px),calc(var(--py,0)*-6px)); transition:opacity .6s var(--ease),transform .9s var(--ease)} /* キャラ層(透過WebM)と口canvasは同一transformで完全追従。背景(-10/-6)より強い視差 */ .cape-char,canvas.cape{transform:scale(1.1) translate(calc(var(--px,0)*-24px),calc(var(--py,0)*-13px))} .cape-char{z-index:2} .cape-char.on{opacity:1} #vTalk{filter:blur(var(--bgblur,2px))} .stage-media.on{opacity:1;pointer-events:auto} video.stage-media.on{cursor:pointer} canvas.cape{z-index:3} #vTalk.on{z-index:2} #vTrans.on{z-index:4} #vTransBack.on{z-index:5} /* cape体験中はサイトのナビ/レールを消す(メニュー操作でのバグ防止) */ body.cape-mode .nav,body.cape-mode .rail{opacity:0!important;pointer-events:none!important;transition:opacity .5s var(--ease)} /* 戻るUI(対話中のみ表示) */ .cape-return{position:fixed;left:clamp(20px,4vw,44px);top:clamp(18px,3vh,32px);z-index:2960; font:600 10px/1 var(--f-en);letter-spacing:.3em;color:rgba(255,255,255,.9); padding:13px 22px;border-radius:999px;border:1px solid rgba(255,255,255,.35); background:rgba(10,12,18,.5);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2); opacity:0;transition:opacity .6s,border-color .3s;cursor:pointer} .cape-return.on{opacity:1} .cape-return:hover{border-color:rgba(255,255,255,.8)} /* キャラ気配ヒント(位置はcontact-loopの人物に合わせる) */ .cape-hint{position:absolute;left:31%;top:68%;z-index:12;width:64px;height:64px;transform:translate(-50%,-50%); opacity:0;transition:opacity 1s var(--ease);pointer-events:auto;cursor:pointer} .cape-hint.on{opacity:1} .cape-hint i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.7); animation:hintPulse 2.6s var(--ease) infinite} .cape-hint i:nth-child(2){animation-delay:1.3s} @keyframes hintPulse{0%{transform:scale(.35);opacity:0}30%{opacity:.9}100%{transform:scale(1.15);opacity:0}} /* CH12フォーム: 明るいループの上でも読めるようダークガラス化+ラベル濃度アップ */ #contact .form{background:rgba(10,12,18,.42);border-color:rgba(255,255,255,.24)} #contact .f-row label{color:rgba(244,242,236,.85)} #contact .form-note{color:rgba(244,242,236,.55)} #contact .c-info b{color:rgba(244,242,236,.7)} #contact .c-info div{color:rgba(244,242,236,.92)} /* 対話フェーズ: CH12ガラスの退場(transformはGSAP管理のためopacity/blurのみ) */ #contact .ch-body.away{opacity:0!important;filter:blur(6px);pointer-events:none} #contact .ch-body{transition:background .7s var(--ease),border-color .7s var(--ease), backdrop-filter .7s var(--ease),-webkit-backdrop-filter .7s var(--ease),opacity .7s var(--ease),filter .7s var(--ease)} /* ---- ベール(パスコード/送信) ---- */ /* display指定がhidden属性(UAのdisplay:none)を上書きしてしまうため明示的に殺す。 これを怠ると透明なfixed層が全ページのクリック/ホバーを食う */ .veil[hidden],.talk-ui[hidden],.skip-btn[hidden],.settings-pop[hidden]{display:none!important} .veil{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center; background:rgba(8,8,12,.55);backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1); opacity:0;transition:opacity .5s var(--ease)} .veil.on{opacity:1} .glass-card{position:relative;width:min(480px,calc(100vw - 40px));border-radius:26px;padding:clamp(26px,4vw,38px); color:#F4F2EC;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42); /* v5の--glass-shは紙用(inset白.85)でダークガラスだと上端に白線が出る。デモと同じダーク用影を明示 */ box-shadow:0 24px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.32); backdrop-filter:blur(26px) saturate(1.25);-webkit-backdrop-filter:blur(26px) saturate(1.25); transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .8s var(--ease)} .veil.on .glass-card{animation:cardIn .55s var(--ease)} @keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}} .pw-eyebrow{font:600 9.5px/1 var(--f-en);letter-spacing:.42em;opacity:.65} .pw-title{margin-top:14px;font:500 clamp(1.2rem,2.4vw,1.55rem)/1.6 var(--f-min)} .pw-cipher{font:500 clamp(.82rem,1.5vw,1rem)/1.9 var(--f-en);letter-spacing:.16em;overflow-wrap:anywhere; background:linear-gradient(92deg,var(--rose),var(--gold),var(--mint),var(--cyan),var(--violet)); -webkit-background-clip:text;background-clip:text;color:transparent;filter:saturate(.85) brightness(1.1)} .pw-note{margin-top:10px;font-size:.82rem;opacity:.7} .pw-row{margin-top:22px;display:flex;gap:10px} .pw-row input{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.3);border-radius:999px; padding:13px 20px;font:500 .95rem/1 var(--f-en);letter-spacing:.14em;color:#fff;text-transform:uppercase} .pw-row input:focus{outline:none;border-color:#fff} .pw-err{margin-top:12px;font-size:.78rem;color:var(--rose)} .pw-card.shake{animation:shake .45s} @keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}} .pw-close{position:absolute;top:14px;right:18px;font-size:1.1rem;opacity:.6;transition:opacity .3s;color:#F4F2EC} .pw-close:hover{opacity:1} /* ---- SKIP ---- */ .skip-btn{position:fixed;right:clamp(20px,4vw,44px);bottom:clamp(20px,5vh,44px);z-index:2900; font:600 10px/1 var(--f-en);letter-spacing:.3em;color:rgba(255,255,255,.85); padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); opacity:0;transition:opacity .6s} .skip-btn.on{opacity:1} /* ---- 対話UI ---- */ .talk-ui{position:fixed;z-index:2950;right:clamp(18px,3.4vw,56px);top:50%;transform:translateY(-50%) translateX(26px); width:clamp(340px,32vw,440px);max-height:min(78svh,720px);display:flex;flex-direction:column;color:#F4F2EC; border-radius:26px;background:rgba(10,12,18,.52);border:1px solid rgba(255,255,255,.28); box-shadow:0 24px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.32); backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2); opacity:0;transition:transform .8s var(--ease)} .talk-ui.on{opacity:1;animation:talkIn .8s var(--ease); transform:perspective(1100px) translateY(-50%) translateX(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(calc(var(--px,0)*10px),calc(var(--py,0)*6px))} @keyframes talkIn{from{opacity:0;transform:translateY(-50%) translateX(26px)}} .talk-head{padding:18px 22px 12px;border-bottom:1px solid rgba(255,255,255,.18)} .talk-id{display:flex;align-items:center;gap:10px} .cape-badge{font:600 8px/1 var(--f-en);letter-spacing:.3em;padding:6px 10px;border-radius:999px; background:linear-gradient(90deg,var(--violet),var(--cyan));color:var(--ink)} .talk-id b{font:500 1.02rem/1 var(--f-min);letter-spacing:.08em} .talk-mode{margin-left:auto;font:600 8.5px/1 var(--f-en);letter-spacing:.24em;opacity:.6; padding:5px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.3)} .talk-mode.live{color:var(--mint);border-color:var(--mint);opacity:1} .talk-sub{margin-top:9px;display:flex;justify-content:space-between;gap:10px;font-size:.72rem;opacity:.7} .talk-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .talk-user{font:500 9px/1.8 var(--f-en);letter-spacing:.2em;white-space:nowrap} .talk-log{flex:1;min-height:180px;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px; scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent} .msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:.84rem;line-height:1.75;animation:msgIn .45s var(--ease)} @keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .msg.cape{align-self:flex-start;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-bottom-left-radius:4px} .msg.user{align-self:flex-end;background:rgba(143,227,255,.2);border:1px solid rgba(143,227,255,.3);border-bottom-right-radius:4px} .msg.sys{align-self:center;font-size:.7rem;opacity:.55;background:none;border:none;padding:2px} .msg.typing{opacity:.75} /* 音量バー */ .talk-vol{display:flex;align-items:center;gap:10px;padding:10px 18px 0} .talk-vol svg{flex:none;opacity:.7} .talk-vol input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px; background:linear-gradient(90deg,var(--violet) var(--vol,100%),rgba(255,255,255,.15) var(--vol,100%));outline:none} .talk-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%; background:#F4F2EC;border:1px solid rgba(0,0,0,.2);cursor:pointer} .talk-vol input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#F4F2EC;border:none;cursor:pointer} .talk-meter{height:3px;margin:0 18px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden} .talk-meter i{display:block;height:100%;width:0%;border-radius:2px; background:linear-gradient(90deg,var(--violet),var(--cyan),var(--mint));transition:width .12s linear} .talk-controls{display:flex;align-items:center;gap:10px;padding:14px 18px} .mic-btn{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#F4F2EC; border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);transition:.3s;position:relative} .mic-btn:hover{background:rgba(255,255,255,.2)} .mic-btn.on{background:linear-gradient(135deg,var(--violet),var(--cyan));color:var(--ink);border-color:transparent} .mic-btn.on::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(143,227,255,.6); animation:hintPulse 1.8s var(--ease) infinite} .talk-controls input{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25); border-radius:999px;padding:12px 18px;font-size:.85rem;color:#fff} .talk-controls input:focus{outline:none;border-color:rgba(255,255,255,.6)} .talk-controls ::placeholder{color:rgba(244,242,236,.4)} .send-btn{flex:0 0 40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);color:#F4F2EC; font-size:1rem;display:grid;place-items:center;transition:.3s} .send-btn:hover{background:#F4F2EC;color:var(--ink)} /* v5のfooter要素セレクタ(紙色背景+境界線)が