/* カンプ共通の動き（taste-skill references/motion.md のトークン） */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1); --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms; --t-hover:180ms; --t-reveal:800ms; --t-open:1200ms;
}
html{scroll-behavior:auto}
body{overflow-x:hidden !important}

/* 読み込みの動き：[data-in] は順番に。--i で並びの番号 */
.js [data-in]{opacity:0;transform:translateY(24px)}
.js.ready [data-in]{opacity:1;transform:none;transition:opacity var(--t-reveal) var(--ease-expo) calc(var(--i,0)*80ms + 120ms),transform var(--t-reveal) var(--ease-expo) calc(var(--i,0)*80ms + 120ms)}
/* 行が下からせり上がる見出し：<span class="ln"><span>行</span></span> */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:inline-block}
.js .ln>span{transform:translateY(110%)}
.js.ready .ln>span{transform:none;transition:transform 640ms var(--ease-expo) calc(var(--l,0)*80ms + 40ms)}
/* 写真が端から開く */
.js [data-shutter]{clip-path:inset(0 0 100% 0)}
.js [data-shutter] img{transform:scale(1.12)}
.js.ready [data-shutter]{clip-path:inset(0 0 0 0);transition:clip-path 1100ms var(--ease-in-out) var(--sd,150ms)}
.js.ready [data-shutter] img{transform:none;transition:transform 1500ms var(--ease-soft) var(--sd,150ms)}
/* 置いた紙が落ち着く */
.js [data-settle]{opacity:0;transform:translateY(40px) rotate(var(--r0,0deg)) scale(1.04)}
.js.ready [data-settle]{opacity:1;transform:var(--rest,none);transition:opacity 700ms var(--ease-out) calc(var(--i,0)*120ms + 200ms),transform 1100ms var(--ease-expo) calc(var(--i,0)*120ms + 200ms)}

/* 動く写真：ゆっくり寄る */
[data-drift]{animation:drift 16s var(--ease-soft) infinite alternate;transform-origin:var(--o,50% 40%)}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.09) translate3d(-1.2%,-1%,0)}}
/* 写真の切り替え */
[data-xfade]{position:relative}
[data-xfade]>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1600ms var(--ease-in-out)}
[data-xfade]>img.on{opacity:1}
/* 録画中の点 */
.blink{animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
/* 押した・乗せた */
.btn,.press{transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease}
.btn:active,.press:active{transform:scale(.96)}
.lift{transition:transform 320ms var(--ease-out)}
.lift:hover{transform:translateY(-6px)}

@media (prefers-reduced-motion:reduce){
  .js [data-in],.js .ln>span,.js [data-shutter],.js [data-shutter] img,.js [data-settle]{opacity:1 !important;transform:none !important;clip-path:none !important}
  [data-drift],.blink{animation:none}
}

/* ── 2版：カーソル・磁石・映像の最初の絵 ── */
.cur,.cur-ring{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:50%;transform:translate3d(-100px,-100px,0)}
.cur{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--cur,#fff);mix-blend-mode:difference}
.cur-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border:1.5px solid var(--cur,#fff);mix-blend-mode:difference;display:grid;place-items:center;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background-color .25s ease,border-color .25s ease}
.cur-ring span{font:700 13px/1 var(--ft,inherit);color:#111;opacity:0;transition:opacity .2s ease;white-space:nowrap}
.cur-ring.big{width:88px;height:88px;margin:-44px 0 0 -44px;background:var(--cur-bg,#fff);border-color:transparent;mix-blend-mode:normal}
.cur-ring.big span{opacity:1}
@media (hover:none),(pointer:coarse){.cur,.cur-ring{display:none}}
html.has-cur,html.has-cur a,html.has-cur button{cursor:none}
/* 映像は最初の絵の上で始まる */
video{background:#111 center/cover no-repeat}
/* 速く送ると写真が少し傾く */
[data-skew]{transition:transform .5s var(--ease-out);will-change:transform}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* 録画中の時刻は飾り：字は ::after で出す */
[data-rec]::after{content:attr(data-t)}
/* 読み込み待ち（#ld の中の見た目は各サイト）。最初の描画から CSS だけで 0.45 秒後に現れる。スクリプトが外す */
#ld{position:fixed;inset:0;z-index:90;--p:0;opacity:0;visibility:hidden;animation:ldin .3s ease .45s forwards}
@keyframes ldin{to{opacity:1;visibility:visible}}
#ld.is-on{animation:none;opacity:1;visibility:visible}
#ld.is-out{animation:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility 0s linear .6s}
html.ld-on{overflow:hidden}
@media (scripting:none){#ld{display:none}}