/* =========================================================
   書籍版の装幀グラフィック（架空・色彩休暇）をページに重ねる
   素材：assets/ip/cover/（_tools/extract_cover_parts.py で書き出し）
   動き：assets/js/cover.js（スクロールで線を描く・マウスで視差・タップで反応）
   ========================================================= */
:root{--cv-red:#D9161C;--cv-red-deep:#B5141A;--cv-lime:#B7F01E;--cv-gray:#D6D5D0;--cv-ink:#111;--mx:0;--my:0}

/* ---- 共通：飾りの箱。外側＝位置と視差、内側＝ずっと続く動き ---- */
.cv{position:absolute;pointer-events:none;z-index:0;transform:translate3d(calc(var(--mx) * var(--d,0) * 1px),calc(var(--my) * var(--d,0) * 1px),0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cv svg,.cv img{display:block;width:100%;height:auto}
.cv-in{display:block}
.cv-tap{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.section > .wrap,.ip-novel,.ip-credits{position:relative;z-index:1}
.has-cv{position:relative;overflow:hidden}

/* スクロールで描く線（pathLength=1） */
svg[data-draw] .draw path{stroke-dasharray:1 2;stroke-dashoffset:1}

/* ずっと続く動き（画面に入っているときだけ） */
@keyframes cv-spin{to{transform:rotate(360deg)}}
@keyframes cv-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(8deg)}}
@keyframes cv-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes cv-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.75}}
@keyframes cv-pop{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.25) rotate(140deg)}70%{transform:scale(.92) rotate(330deg)}100%{transform:scale(1) rotate(360deg)}}
.cv-in,.cv-band svg g,.cv-band svg path,.cv-ropeway .cv-car{animation-play-state:paused}
.cv-on .cv-in,.cv-on.cv-band svg g,.cv-on.cv-band svg path,.cv-on .cv-car,.cv-on.cv-ropeway .cv-car{animation-play-state:running}
.cv-spin .cv-in{animation:cv-spin 40s linear infinite}
.cv-float .cv-in{animation:cv-float 6s ease-in-out infinite}
.cv-sway .cv-in{animation:cv-sway 9s ease-in-out infinite;transform-origin:50% 0}
.cv-pulse .cv-in{animation:cv-pulse 3.2s ease-in-out infinite}
.cv-tap.pop .cv-in{animation:cv-pop .9s cubic-bezier(.3,1.4,.5,1) 1}

/* ---- 表紙の帯（ヒーローの直後に入る1ブロック） ---- */
.cv-band{position:relative;overflow:hidden;background:var(--cv-gray);color:var(--cv-ink);border-top:1px solid rgba(0,0,0,.08)}
.cv-paper{position:relative;min-height:clamp(400px,58vh,560px)}
.cv-threads{position:absolute;inset:-4% -2%;width:104%;height:108%;pointer-events:none}
.cv-threads svg{width:100%;height:100%}
.cv-threads path{stroke:#9d9c97;stroke-width:.55}
.cv-band-in{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,4vw,56px);align-items:start;min-height:inherit;padding-top:clamp(28px,5vw,56px);padding-bottom:clamp(28px,5vw,56px)}
.cv-vtitle{margin:0;writing-mode:vertical-rl;font:500 clamp(15px,1.5vw,19px)/1 var(--serif);letter-spacing:1.6em;color:var(--cv-ink)}
.cv-meta{margin:0;writing-mode:vertical-rl;font:500 10.5px/1.6 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(17,17,17,.6);align-self:end}
.cv-stage{position:relative;justify-self:center;width:min(100%,440px);aspect-ratio:1/1.05}
.cv-stage > *{position:absolute}
.cv-obi{position:relative;z-index:2;padding:clamp(22px,3.4vw,40px) 0}
.cv-obi .wrap{display:grid;grid-template-columns:auto minmax(270px,1fr) auto;gap:clamp(16px,3vw,44px);align-items:end}
.cv-obi-copy{margin:0;white-space:nowrap;font:900 clamp(30px,calc((100vw - 2 * var(--gutter,20px)) / 6.8),84px)/1.04 var(--serif);letter-spacing:-.02em;color:#111}
.cv-obi-sub{margin:0 0 .5em;font:700 clamp(14px,1.5vw,18px)/1.6 var(--serif);color:#111}
.cv-obi-go{align-self:end;margin-bottom:.6em;padding:10px 16px;border:1.5px solid #111;border-radius:999px;font:500 12px/1 var(--mono);letter-spacing:.08em;color:#111;white-space:nowrap;transition:background .2s,color .2s}
.cv-obi-go:hover{background:#111;color:var(--cv-obi-bg)}
.cv-td .cv-obi{--cv-obi-bg:var(--cv-red);background:var(--cv-red)}
.cv-cr .cv-obi{--cv-obi-bg:var(--cv-lime);background:var(--cv-lime)}
.cv-credit{position:absolute;right:clamp(16px,3vw,28px);bottom:10px;margin:0;font:500 9.5px/1 var(--mono);letter-spacing:.14em;color:rgba(17,17,17,.5);z-index:2}

/* 架空：表紙の組（円・糸・菱形・山）を1枚のSVGで。グループごとに視差と動き */
.cv-front{inset:0;width:100%;height:100%}
.cv-front svg{width:100%;height:100%;overflow:visible}
.cv-front .circle{transform:translate(calc(var(--mx) * 7px),calc(var(--my) * 7px));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cv-front .circle path{fill:var(--cv-red);transform-box:fill-box;transform-origin:50% 50%;animation:cv-spin 48s linear infinite}
.cv-front .draw{transform:translate(calc(var(--mx) * -3px),calc(var(--my) * -3px));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cv-front .draw path{stroke:#1b1612;stroke-width:.7}
.cv-front .dias{transform:translate(calc(var(--mx) * 14px),calc(var(--my) * 14px));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cv-front .dias path{transform-box:fill-box;transform-origin:50% 50%;animation:cv-float 5s ease-in-out infinite}
.cv-front .dias path:nth-child(2){animation-delay:-2.4s;animation-duration:6.5s}
.cv-front .mount{transform:translate(calc(var(--mx) * -1.5px),0)}
.cv-front .circle,.cv-front .circle path{cursor:pointer;pointer-events:auto}
.cv-front.pop .circle path{animation:cv-pop .9s cubic-bezier(.3,1.4,.5,1) 1}

/* 色彩休暇：コラージュ＋輪の線＋黄緑のかけら＋コイン */
.cv-cr .cv-paper{background-color:#d3d2cd}
.cv-ring{left:-6%;top:-4%;width:96%;opacity:.9}
.cv-ring path{stroke:#1b1612;stroke-width:.7}
.cv-collage{left:4%;top:3%;width:92%;transform:translate(calc(var(--mx) * 8px),calc(var(--my) * 8px));transition:transform .8s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 18px 24px rgba(0,0,0,.18))}
.cv-stage .cv{z-index:4}
/* 色彩休暇：イラレデータの組（線・画・黄緑を同じ座標で重ねる） */
.cv-cr .cv-stage{width:min(100%,480px);aspect-ratio:271/311}
.cv-crart{inset:0}
.cv-crart > *{position:absolute;inset:0;width:100%;height:100%}
.cv-crart-lines{z-index:1}
.cv-crart-lines path{stroke:#231916;stroke-width:.8}
.cv-crart-img{z-index:2;object-fit:contain;transform:translate(calc(var(--mx) * 5px),calc(var(--my) * 5px));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cv-crart-lime{z-index:3;opacity:.82;overflow:visible}
.cv-crart-lime .dia{transform:translate(calc(var(--mx) * 12px),calc(var(--my) * 12px));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cv-crart-lime .dia path{transform-box:fill-box;transform-origin:50% 50%;animation:cv-spin 30s linear infinite}
.cv-crart-lime .leaves path{transform-box:fill-box;transform-origin:50% 100%;animation:cv-pulse 3.4s ease-in-out infinite}
.cv-crart-lime .leaves path:nth-child(even){animation-delay:-1.7s}

/* ---- ロープウェイ（架空の裏表紙。区切りとしてセクションの間に） ---- */
.cv-ropeway{position:relative;height:clamp(130px,16vw,200px);overflow:hidden;pointer-events:none}
.cv-wire{position:absolute;inset:0;width:100%;height:100%}
.cv-wire line{stroke:#1b1612;stroke-width:1.2;vector-effect:non-scaling-stroke}
.cv-car{position:absolute;width:clamp(72px,8vw,112px);left:0;top:0;transform:translate(-50%,-23.4%);animation:cv-ride 34s linear -15s infinite}
.cv-car svg{width:100%;height:auto;display:block}
.cv-car .dias path{fill:var(--cv-red)}
.cv-car .cabin{transform-box:fill-box;transform-origin:50% 0;animation:cv-sway 3.4s ease-in-out infinite}
@keyframes cv-ride{from{left:-6%;top:92.6%}to{left:106%;top:7.4%}}

/* ---- 各セクションに置く飾り（広い画面は余白に、狭い画面は角に小さく） ---- */
.cv-l{left:calc((100% - var(--max)) / 2 - var(--w) * var(--o,.8))}
.cv-r{right:calc((100% - var(--max)) / 2 - var(--w) * var(--o,.8))}
.cv{width:var(--w)}
.cv-circle svg path{fill:var(--cv-red)}
.cv-dia-td svg path{fill:#1b1612}
.cv-loop path{stroke:#1b1612;stroke-width:.8}
.cv-brush{opacity:.92}
.cv-coin{display:grid;justify-items:center}
.cv-coin .coin{width:100%;animation:cv-bob 2.6s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:inherit}
.cv-coin .shadow{width:46%;margin-top:4%;animation:cv-shadow 2.6s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:inherit}
@keyframes cv-bob{0%,100%{transform:translateY(-14%) rotate(-4deg)}50%{transform:translateY(4%) rotate(3deg)}}
@keyframes cv-shadow{0%,100%{transform:scaleX(.7);opacity:.55}50%{transform:scaleX(1);opacity:.95}}
.cv-coin .coin,.cv-coin .shadow{animation-play-state:paused}
.cv-on .cv-coin .coin,.cv-on .cv-coin .shadow,.cv-on.cv-coin .coin,.cv-on.cv-coin .shadow{animation-play-state:running}

@media (max-width:1100px){
  .cv-obi .wrap{grid-template-columns:1fr auto;align-items:end}
  .cv-obi-copy{grid-column:1/-1}
}
@media (max-width:1280px){
  .cv-l,.cv-r{--w:var(--w-s,110px) !important}
  .cv-l{left:-28px}.cv-r{right:-28px}
  .cv.cv-l,.cv.cv-r{top:var(--t-s,18px) !important}
  .cv-hide-s{display:none}
}
@media (max-width:760px){
  .cv-band-in{grid-template-columns:auto 1fr;padding-top:24px}
  .cv-meta{display:none}
  .cv-stage{width:100%}
  .cv-obi .wrap{grid-template-columns:1fr;gap:8px}
  .cv-obi-go{justify-self:start}
  .cv-l,.cv-r{--w:var(--w-xs,84px) !important}
  .cv.cv-l,.cv.cv-r{top:-46px !important}
}

/* ---- トップの書籍欄：表紙の周りに飾り ---- */
.book-art{position:relative;align-self:start}
#books{overflow-x:clip}
.book > div{position:relative;z-index:1}
.book-art .cv img{border:0}
.book-art > img{position:relative;z-index:1;display:block;width:100%}
.book-art .cv{z-index:0}
.book-art .cv.front{z-index:2}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  .cv,.cv *,.cv-band *,.cv-car{animation:none !important;transition:none !important}
  .cv-front .circle,.cv-front .draw,.cv-front .dias,.cv-collage{transform:none !important}
  .cv-car{left:62%;top:36%}
}