/* ============================================================
   動き（site.css の上に重ねる）。番号 E01〜 は website/review/動きの実験.md の一覧と対応する。
   地は白のまま。色は青 #1650b8・緑 #12a497 だけ。グラデーション（青→緑）は AO マークの中だけ（トンマナ.md）。
   E13（数字が回る）は本人の判断で外した（2026-10-07）。
   どの演出も <html class="motion">（JS が動き、動きを減らす設定でないとき）のときだけ効く。
   JS が動かない・動きを減らす設定のときは、本番（site.css）と同じ見た目で止まる。
   ============================================================ */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin-a{to{--a:360deg}}
.tr>i{font-style:normal}

/* ---------- E01 幕：今の白い幕に数字と細い線を足す。上へ抜ける。押すと飛ばせる ---------- */
.intro .pct,.intro .bar{display:none}
.motion .intro .pct{display:block;position:absolute;left:50%;bottom:clamp(40px,10vh,96px);transform:translateX(-50%);font-family:var(--latin);font-size:13px;letter-spacing:.3em;color:var(--ink-70);font-variant-numeric:tabular-nums}
.motion .intro .bar{display:block;position:absolute;left:50%;bottom:clamp(28px,8vh,80px);width:160px;height:1px;margin-left:-80px;background:var(--line);overflow:hidden}
.motion .intro .bar i{position:absolute;inset:0;background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.motion .intro.up{transform:none;clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}

/* ---------- E02 粒子でできた AO マーク（今の FV の薄い大きなマークの代わり。同じ位置・同じ薄さ） ---------- */
.pt{display:none}
.motion .pt{display:block;position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.motion.has-pt .fv-mark{visibility:hidden}

/* ---------- E03 オーロラ（青と緑だけ。白い地にうっすら色が差す程度） ---------- */
.motion .fv{isolation:isolate}
.aur{display:none}
.motion .aur{display:block;position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aur i{position:absolute;border-radius:50%;filter:blur(100px)}
.aur i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-22vw;background:#1650b8;opacity:.07}
.aur i:nth-child(2){width:40vw;height:40vw;right:-10vw;top:4vw;background:#12a497;opacity:.06}
.motion .aur i:nth-child(1){animation:drift1 18s ease-in-out infinite alternate}
.motion .aur i:nth-child(2){animation:drift2 22s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(14vw,10vw) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16vw,8vw) scale(.9)}}
/* スマホ幅では動かさない（大きなぼかしを動かし続けるのは重いため・本人 2026-10-07） */
@media (max-width:760px){.motion .aur i:nth-child(n){animation:none}.aur i{filter:blur(56px)}.aur i:nth-child(1){width:110vw;height:110vw;left:-50vw;top:-50vw}.aur i:nth-child(2){width:80vw;height:80vw;right:-40vw;top:40vh}}

/* ---------- E04 マウスの周りだけ見える方眼（触る端末では出さない） ---------- */
.grid{display:none}
@media (hover:hover) and (pointer:fine){
  .motion .grid{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;--mx:-999px;--my:-999px;background-image:linear-gradient(rgba(26,26,26,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,26,.07) 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask:radial-gradient(340px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.35) 45%,transparent 75%);mask:radial-gradient(340px circle at var(--mx) var(--my),#000 0%,rgba(0,0,0,.35) 45%,transparent 75%)}
}

/* ---------- E05 見出し：E12（「詳しい人が社内にいないだけです。」）と同じ出し方。まとまりごとに薄い字から濃くなり、最後に緑の下線が伸びる ---------- */
.fv h1 .w{display:inline}
.motion .fv h1 .w{opacity:.16;transition:opacity .5s}
.motion .fv h1 .w.lit{opacity:1}
.motion .fv h1 .ul{background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1.1s cubic-bezier(.7,0,.2,1)}
.motion .fv h1 .ul.lit{background-size:100% 100%}

/* ---------- E07 読み進めた量のバー（青の単色） ---------- */
.progress{display:none}
.motion .progress{display:block;position:fixed;left:0;top:0;right:0;height:2px;z-index:95;transform-origin:0 50%;transform:scaleX(0);background:var(--brand);pointer-events:none}

/* ---------- E08 隠れるヘッダー ---------- */
.motion .hd{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.motion .hd.hide{transform:translateY(-120%)}
.motion .hd:focus-within{transform:none}

/* ---------- E11a 光る縁（傾きなし。青。青い板の上では白） ---------- */
@media (hover:hover) and (pointer:fine){
  .motion .spot{position:relative;isolation:isolate;--sp:22,80,184}
  .motion .before.spot{--sp:255,255,255}
  .motion .spot::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(380px circle at var(--x,50%) var(--y,0%),rgba(var(--sp),.9),rgba(var(--sp),.35) 30%,transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s;pointer-events:none;z-index:2}
  .motion .spot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(460px circle at var(--x,50%) var(--y,0%),rgba(var(--sp),.06),transparent 50%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:-1}
  .motion .spot:hover::before,.motion .spot:hover::after{opacity:1}
}

/* ---------- E12 主張：読み進めた分だけ文字が濃くなり、最後に緑の下線が引かれる ---------- */
.motion .claim{opacity:1!important;transform:none!important;filter:none!important}
.motion .claim h2 .nb{opacity:.16;transition:opacity .5s}
.motion .claim h2 .nb.lit{opacity:1}
.motion .claim .l2 .hl{background-repeat:no-repeat;background-size:0% 100%;transition:opacity .5s,background-size 1.1s cubic-bezier(.7,0,.2,1)}
.motion .claim .l2 .hl.lit{background-size:100% 100%}

/* ---------- E14 縁を走る光（単色。白い板の上は青、色の区画の上は白） ---------- */
.beam>.bm{display:none}
.motion .beam{position:relative;--bc:255,255,255}
.motion .plan.beam{--bc:22,80,184}
.motion .beam>.bm{display:block;position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--a),transparent 0deg,transparent 290deg,rgba(var(--bc),.25) 320deg,rgba(var(--bc),.95) 350deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);z-index:3;animation:spin-a 6s linear infinite}

/* 回る光は画面の外では止める（.vis は JS が付ける） */
.motion .beam:not(.vis)>.bm{animation-play-state:paused}

/* ---------- E15 ぼかしから現れる・一覧は順に出る（今の現れ方を広げたもの） ---------- */
.motion .rv{filter:blur(8px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter 1s cubic-bezier(.2,.7,.2,1)}
.motion .rv.in{filter:none}
.motion .fv .rv{filter:none}
.motion .stg>*{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--si,0) * 90ms)}
.motion .stg.in>*{opacity:1;transform:none}
.motion .areas>.rv{transition-delay:calc(var(--si,0) * 90ms)}

/* ---------- E16 流れる帯（線の字と青の字を交互に。大きさは英字の大見出しに合わせた） ---------- */
.band{display:none}
.motion .band{display:block;position:relative;overflow:hidden;padding:clamp(24px,3.4vw,48px) 0;border-block:1px solid var(--line);background:#fff}
.band-in{display:flex;width:max-content;will-change:transform}
.band span{flex:none;padding-right:.6em;font-size:clamp(48px,7vw,104px);font-weight:700;line-height:1.1;letter-spacing:.02em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(26,26,26,.18)}
.band span:nth-child(even){color:var(--brand);-webkit-text-stroke:0}
@media (max-width:760px){.band span{font-size:44px}}

/* ---------- E17 ページの外へ移るときの幕（ページの中のリンクには効かせない） ---------- */
.wipe{display:none}
.motion .wipe{display:grid;position:fixed;inset:0;z-index:250;pointer-events:none;place-items:center;background:#fff;clip-path:inset(100% 0 0 0)}
.wipe img{width:min(28vw,160px);opacity:0;transform:scale(.85);transition:opacity .3s,transform .5s cubic-bezier(.2,.7,.2,1)}
.wipe::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--brand)}
.motion .wipe.cover{clip-path:inset(0 0 0 0);transition:clip-path .5s cubic-bezier(.7,0,.2,1)}
.wipe.cover img{opacity:1;transform:none}

/* E18（代表者の写真の動き）は外した。写真はほかの要素と同じ現れ方だけ（本人 2026-10-07） */

/* ---------- E19 事例の写真：下から開く。触ると少し寄る（青の膜は写真がくすむので外した・本人 2026-10-07） ---------- */
.motion .wc img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1),clip-path 1.2s cubic-bezier(.7,0,.2,1)}
.motion .works-grid:not(.in) .wc img{clip-path:inset(100% 0 0 0);transform:scale(1.25)}
@media (hover:hover) and (pointer:fine){
  .motion .wc figure .inds{z-index:2}
  .motion .wc:hover img{transform:scale(1.06)}
}

/* ---------- E20 よくある質問のなめらかな開閉（＋の丸も回る） ---------- */
.motion .faq .a{overflow:hidden}
.motion .faq .pm{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.motion .faq details[open] .pm{transform:rotate(180deg)}

/* ---------- E24 メニューの文字が転がる ---------- */
.motion .tr{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.6}
.motion .tr>i{display:block;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.motion .tr>i::after{content:attr(data-t);position:absolute;left:0;top:100%;white-space:nowrap}
@media (hover:hover){.motion a:hover>.tr>i{transform:translateY(-100%)}}

/* E23（FV が奥へ下がる）・E25（なめらかなスクロール）は JS だけ */

/* 念のため：動きを減らす設定では JS が .motion を付けないが、CSS でも止める */
@media (prefers-reduced-motion:reduce){
  .aur i,.beam>.bm{animation:none!important}
  .progress,.wipe,.pt,.band,.grid{display:none!important}
  .motion.has-pt .fv-mark{visibility:visible}
}
@media print{.fv h1 .ul{background-size:100% 100%!important}.progress,.wipe,.pt,.aur,.grid,.band{display:none!important}.motion.has-pt .fv-mark{visibility:visible}.fv h1 .w,.stg>*{opacity:1!important;filter:none!important;transform:none!important}}