/* ============================================================================
 * SoundCapsule Presentation — style.css
 * App真實色票 (spec §2). Serif headings (Georgia/Yu Mincho), JP gothic body.
 * ==========================================================================*/
:root{
  --bg1:#0F0D1A; --bg2:#1A1426;
  --txt:#F2EEE6; --mut:rgba(255,255,255,.55); --mut2:rgba(255,255,255,.34);
  --line:rgba(255,255,255,.12); --card:rgba(255,255,255,.05); --cardSel:rgba(255,255,255,.09);
  --relax:#73C78C; --sleep:#9973CC; --none:#80808C; --care:#E6A24D; --amb:#73BFD9;
  --jp:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#0F0D1A}
body{font-family:var(--ui);color:var(--txt);background:transparent;min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
/* fixed gradient layer — robust on long-scroll pages & mobile Safari */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg1),var(--bg2))}
.jp{font-family:var(--jp)}
.serif{font-family:var(--serif)}

/* lang bar */
.langbar{position:fixed;top:14px;right:16px;display:flex;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;z-index:200;background:rgba(15,13,26,.78);backdrop-filter:blur(8px)}
.langbar button{background:transparent;color:var(--mut);border:none;padding:7px 13px;font-size:12px;cursor:pointer;font-family:var(--jp)}
.langbar button.on{background:#fff;color:#16121f;font-weight:700}

/* scroll cue */
.scrollcue{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:var(--mut2);font-size:11px;
  z-index:150;font-family:var(--jp);animation:bob 2.2s ease-in-out infinite;letter-spacing:1px}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}

/* ============================ STAGE 1: scrollytelling ===================== */
.story{position:relative}
.story-graphic{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.04),transparent 62%)}
.story-steps{position:relative;margin-top:-100vh;z-index:10;pointer-events:none}
.step{min-height:100vh;display:flex;align-items:flex-end;justify-content:center;padding:0 24px 16vh}
.step .cap{max-width:620px;text-align:center;opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease;
  background:rgba(15,13,26,.34);backdrop-filter:blur(3px);border-radius:18px;padding:18px 22px}
.step.in .cap{opacity:1;transform:translateY(0)}
.step .big{font-family:var(--serif);font-size:clamp(22px,4.4vw,38px);line-height:1.4;letter-spacing:.5px}
.step .en{display:block;font-size:13px;color:var(--mut);margin-top:10px;letter-spacing:.5px}
.step .msg{margin-top:14px;font-family:var(--jp);font-size:15px;color:#E3C77E}
.step .hint{margin-top:12px;font-size:12px;color:var(--mut2);font-family:var(--jp)}

/* graphic visual modes */
.vmode{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .8s ease;pointer-events:none}
.vmode.on{opacity:1;pointer-events:auto}

/* ============================ ENCAPSULATE STAGE ========================== */
.enc-stage{position:relative;height:440px;display:flex;align-items:center;justify-content:center;perspective:1100px}
.enc-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:160px;height:320px;border-radius:50%;
  filter:blur(36px);opacity:0;pointer-events:none}
.enc-scene{position:relative;width:240px;height:320px}
.enc-photo{position:absolute;inset:0;border-radius:18px;overflow:hidden;background-size:cover;background-position:center;
  box-shadow:0 22px 48px rgba(0,0,0,.55);will-change:transform,opacity}
.enc-photo.breathe{animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.enc-vig{position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(15,13,26,.6))}
.enc-cap{position:absolute;left:16px;bottom:14px}
.enc-cap b{display:block;font-size:15px;font-family:var(--serif)}
.enc-cap span{font-size:12px;color:#E3C77E}
.enc-ball{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;margin:-9px 0 0 -9px;
  opacity:0;z-index:8;box-shadow:0 0 10px rgba(255,255,255,.25);will-change:transform,opacity}
.enc-capsule{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:96px;opacity:0;
  display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.enc-top{width:96px;height:116px;border-radius:48px 48px 6px 6px;position:relative;overflow:hidden;transform-origin:bottom center}
.enc-top::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 55%)}
.enc-ico{position:absolute;left:0;right:0;top:30px;text-align:center;font-size:20px;z-index:1}
.enc-hz{position:absolute;left:0;right:0;top:58px;text-align:center;font-size:10px;font-weight:700;color:#fff;z-index:1}
.enc-seam{width:96px;height:4px;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.6),rgba(255,255,255,.1))}
.enc-bot{width:96px;height:116px;border-radius:6px 6px 48px 48px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--amb),#4f93a8)}
.enc-bot::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 55%)}
.fly{animation:fly 1.6s cubic-bezier(.5,0,.4,1) forwards}
@keyframes fly{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-180%) scale(.5);opacity:.2}}

/* web player frame (scene 5) */
.wpframe{width:300px;max-width:88vw;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:22px;
  padding:20px 18px 22px;text-align:center;backdrop-filter:blur(6px)}
.wpframe .wpt{font-family:var(--serif);font-size:17px;line-height:1.4}
.wpframe .wps{font-size:12.5px;color:var(--mut);margin-top:8px;font-family:var(--jp)}
.wpframe .wpstage{height:300px;margin:6px 0}
.wpframe .enc-stage{height:300px}
.btn-open{margin-top:8px;background:#fff;color:#16121f;border:none;border-radius:24px;padding:11px 28px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:var(--jp)}

/* return (scene 6) two-up */
.return{display:flex;gap:26px;align-items:center}
.return .side{text-align:center}
.return .mini{width:78px;height:200px;border-radius:40px 40px 36px 36px;margin:0 auto 10px;position:relative;overflow:hidden;
  box-shadow:0 14px 24px rgba(0,0,0,.4)}
.return .mini::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 55%)}
.return .lbl{font-size:12px;color:var(--mut);font-family:var(--jp)}
.return .arrow{font-size:22px;color:var(--mut2)}

/* closing trio */
.trio{display:flex;gap:18px;align-items:flex-end}
.trio .mini{width:60px;height:150px;border-radius:32px 32px 28px 28px;position:relative;overflow:hidden;animation:floaty 2.8s ease-in-out infinite}
.trio .mini:nth-child(2){animation-delay:.4s}.trio .mini:nth-child(3){animation-delay:.8s}
.trio .mini::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 55%)}

/* ============================ TRANSITION ================================= */
.transition{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;
  background:#070610}
.transition p{font-family:var(--serif);font-size:clamp(20px,3.6vw,32px);line-height:1.5;max-width:680px;opacity:0;transform:translateY(20px);transition:.9s}
.transition.in p{opacity:1;transform:translateY(0)}
.transition .en{display:block;font-size:13px;color:var(--mut);margin-top:14px}

/* ============================ STAGE 2: 体験 ============================== */
.exp{max-width:980px;margin:0 auto;padding:64px 20px 80px}
.exp h2{font-family:var(--serif);font-size:clamp(22px,3.6vw,30px);text-align:center}
.exp .lead{text-align:center;color:#E3C77E;font-family:var(--jp);margin-top:10px;font-size:15px}
.tabs{display:flex;gap:10px;justify-content:center;margin:26px 0 6px}
.tab{background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:24px;padding:10px 22px;
  cursor:pointer;font-size:14px;font-family:var(--jp);transition:.15s}
.tab.on{background:#fff;color:#16121f;font-weight:700;border-color:#fff}

.stage{display:grid;grid-template-columns:210px 1fr;gap:26px;margin-top:24px;align-items:start}
@media(max-width:720px){.stage{grid-template-columns:1fr}}

/* capsule (mixer) */
.capwrap{display:flex;flex-direction:column;align-items:center;padding-top:14px;position:relative}
.capwrap .glow{position:absolute;top:24px;width:150px;height:300px;border-radius:50%;filter:blur(34px);opacity:0;transition:opacity .6s;pointer-events:none}
.capwrap .glow.on{opacity:.55;animation:gp 2s ease-in-out infinite}
@keyframes gp{0%,100%{filter:blur(28px)}50%{filter:blur(42px)}}
.capsule{position:relative;width:96px;display:flex;flex-direction:column;align-items:center;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.4));transition:transform .4s}
.capsule.play{animation:floaty 2.6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.top{width:96px;height:116px;border-radius:48px 48px 6px 6px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;position:relative;overflow:hidden}
.top::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 55%)}
.top .ico{font-size:24px;z-index:1}.top .hz{font-size:11px;font-weight:700;z-index:1;opacity:.92}
.top .plus{font-size:24px;color:rgba(255,255,255,.35);z-index:1}
.seam{width:96px;height:4px;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.6),rgba(255,255,255,.1))}
.bot{width:96px;height:116px;border-radius:6px 6px 48px 48px;position:relative;overflow:hidden}
.bot::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent 55%);z-index:3}
.balls{position:absolute;inset:0;z-index:2}
.ball{position:absolute;width:20px;height:20px;border-radius:50%;animation:bf 3.4s ease-in-out infinite}
@keyframes bf{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.botplus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;color:rgba(255,255,255,.3);z-index:2}
.capname{margin-top:16px;font-size:14px;text-align:center;min-height:20px;font-family:var(--jp)}
.capmeta{font-size:11px;color:var(--mut);margin-top:3px}
.drift{margin-top:10px;font-size:11px;color:var(--care);font-family:var(--jp);min-height:16px;text-align:center;opacity:0;transition:.3s}
.drift.on{opacity:1}

/* ingredients */
.col h3{font-size:12px;color:var(--mut);letter-spacing:1px;margin:14px 0 8px;font-family:var(--jp)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;cursor:pointer;font-size:13px;transition:.12s;user-select:none;font-family:var(--jp)}
.pill:hover{background:var(--cardSel)}.pill.sel{border-color:transparent}
.pill .sw{width:11px;height:11px;border-radius:50%;flex:none}
.hint{font-size:11px;color:var(--mut2);margin-top:7px;font-family:var(--jp)}
.placeRow{display:flex;flex-wrap:wrap;gap:8px}
.placeChip{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:pointer;width:104px;transition:.12s}
.placeChip:hover{transform:translateY(-2px)}.placeChip.sel{border-color:var(--amb)}
.placeChip img{width:100%;height:62px;object-fit:cover;display:block}
.placeChip b{display:block;font-size:12px;padding:6px 8px;font-family:var(--jp)}

.ctrls{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.play{background:#fff;color:#16121f;border:none;border-radius:30px;padding:13px 26px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--jp)}
.play:active{transform:translateY(1px)}
.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);border-radius:30px;padding:12px 20px;font-size:13px;cursor:pointer;font-family:var(--jp)}
.dur{font-size:12px;color:var(--mut);margin-left:auto;font-family:var(--jp)}
.engnote{font-size:11.5px;color:var(--mut2);margin-top:18px;font-family:var(--jp);line-height:1.6;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px}

/* presets */
.presets{margin-top:30px}
.presets h3{font-size:12px;color:var(--mut);letter-spacing:1px;margin-bottom:10px;font-family:var(--jp)}
.prow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.preset{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px;cursor:pointer;transition:.12s}
.preset:hover{background:var(--cardSel);transform:translateY(-2px)}
.preset .pi{font-size:18px}.preset b{display:block;font-size:14px;margin:6px 0 2px;font-family:var(--jp)}
.preset span{font-size:11px;color:var(--mut);font-family:var(--jp)}

/* gift sheet (modal) */
.sheet-bg{position:fixed;inset:0;background:rgba(7,6,16,.6);backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;z-index:300}
.sheet-bg.on{display:flex}
.sheet{background:#1A1426;border:1px solid var(--line);border-radius:22px 22px 0 0;width:100%;max-width:520px;padding:22px 20px 28px;
  animation:up .3s ease}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
.sheet h3{font-family:var(--serif);font-size:18px;margin-bottom:4px}
.rel{display:flex;gap:8px;margin:14px 0}
.rel button{flex:1;background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:10px;padding:9px;font-size:13px;cursor:pointer;font-family:var(--jp)}
.rel button.on{background:#fff;color:#16121f;font-weight:700}
.sheet textarea{width:100%;min-height:64px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--txt);
  padding:11px;font-size:14px;font-family:var(--jp);resize:none;margin-top:4px}
.quick{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.quick button{background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:16px;padding:7px 12px;font-size:12px;cursor:pointer;font-family:var(--jp)}
.quick button:hover{background:var(--cardSel)}
.sheet .send{width:100%;margin-top:16px;background:#fff;color:#16121f;border:none;border-radius:26px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--jp)}

/* link card (連結示意) */
.linkcard{display:none;margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.linkcard.on{display:block;animation:up .3s ease}
.linkcard b{font-family:var(--serif);font-size:16px}
.linkcard .url{margin-top:10px;font-size:12px;color:var(--amb);word-break:break-all;background:rgba(0,0,0,.25);border-radius:8px;padding:8px 10px;font-family:var(--ui)}
.linkcard .copy{margin-top:12px;background:transparent;border:1px solid var(--line);color:var(--txt);border-radius:20px;padding:8px 18px;font-size:12px;cursor:pointer;font-family:var(--jp)}
.linkcard .dim{font-size:11px;color:var(--mut2);margin-top:8px;font-family:var(--jp)}

/* sealwrap (体験 seal preview) */
#expSeal{display:none;margin-top:8px}
#expSeal.on{display:block}

/* ============================ OUTRO ===================================== */
.outro{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;gap:22px}
.outro .trio{margin-bottom:6px}
.outro p{font-family:var(--serif);font-size:clamp(18px,3vw,26px);line-height:1.5;max-width:620px}
.outro .tag{font-size:14px;color:var(--mut);font-family:var(--jp)}
.outro .brand{font-size:12px;color:var(--mut2);letter-spacing:1px;margin-top:8px}
footer{text-align:center;color:var(--mut2);font-size:11px;padding:24px;font-family:var(--jp)}