/* ===================================================================
   動き。合同会社AiveDamの2ページ（トップ・制作）で共有する。

   考え方（skills/apple-design）
   ・押した「瞬間」に反応する。離した時ではない
   ・止まるのでなく、バネで落ち着く
   ・いつでも割り込める（長い演出を作らない）
   ・動きを止めている人には、一切動かさない
   紙と明朝の作りを壊さないよう、派手な視差は入れていない。
   =================================================================== */

:root{
  /* バネ。わずかに行き過ぎて戻る。止まる感じが出る */
  --bane:linear(
    0, 0.0033 0.8%, 0.0263 2.5%, 0.0929 5%, 0.4172 13.3%, 0.5411 16.9%,
    0.6456 20.6%, 0.7297 24.4%, 0.7968 28.3%, 0.8497 32.5%, 0.8905 36.9%,
    0.9218 41.7%, 0.9453 46.9%, 0.9627 52.6%, 0.9754 59.1%, 0.9846 66.6%,
    0.9909 75.6%, 0.9951 87.5%, 1
  );
  --sotto:cubic-bezier(.22,.61,.36,1);
  --sutto:cubic-bezier(.32,.94,.6,1);
}

/* ── 帯の下を走る線。今どこまで読んだかが分かる ───────────────── */
.susumi{position:fixed; left:0; top:0; right:0; height:2px; z-index:70; pointer-events:none}
.susumi span{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--green,#2f5d4a), var(--accent,#c9a24a));
  transform:scaleX(0); transform-origin:0 50%;
}

/* ── 帯。スクロールすると、わずかに締まる ───────────────────── */
header{transition:height .4s var(--sotto), box-shadow .4s var(--sotto), background .4s var(--sotto)}
header .bar{transition:height .4s var(--sotto)}
header.chijimu .bar{height:54px}
header.chijimu{box-shadow:0 1px 0 rgba(28,36,32,.06), 0 10px 30px rgba(28,36,32,.05)}
header .logo img{transition:height .4s var(--sotto)}
header.chijimu .logo img{height:21px}

/* ── 押した瞬間に沈む。離した時ではない ─────────────────────── */
.btn, .go, .soc, .mail, .card a.see{
  -webkit-tap-highlight-color:transparent;
  transition:background .22s var(--sotto), color .22s var(--sotto),
             border-color .22s var(--sotto), transform .34s var(--bane);
}
.btn:active, .go:active, .soc:active, .mail:active, .card a.see:active{
  transform:scale(.975); transition-duration:60ms; transition-timing-function:ease-out;
}
button:disabled:active{transform:none}

/* ── 見出し。行ごとに、下から立ち上がる ─────────────────────── */
/* ★逃げが足りないと切れる。圏点は字の上に出るので上を大きく取る
   （2026-09-22 「どちらも。」の下半分が消えた） */
.gyo{display:block; overflow:hidden; padding:.34em 0 .26em; margin:-.34em 0 -.26em}
.gyo > i{
  display:block; font-style:inherit; will-change:transform, opacity;
  transform:translateY(105%);
  opacity:0;
  transition:transform .72s var(--sutto), opacity .5s var(--sotto);
}
.gyo.in > i{transform:none; opacity:1}
/* 字間がわずかに落ち着く。止まったあとに「据わる」感じ */
.tsume{letter-spacing:-.055em; transition:letter-spacing 1.2s var(--sotto)}
.tsume.in{letter-spacing:-.03em}

/* ── ふつうの節。少し遠くから、バネで来る ───────────────────── */
.rise, .deru{
  opacity:0; transform:translateY(22px);
  transition:opacity .85s var(--sotto), transform .95s var(--sutto);
  will-change:transform, opacity;
}
.rise.in, .deru.in{opacity:1; transform:none}

/* ── 実績の画。スクロールでゆっくり動く（1枚ずつ向きを変える） ───── */
.shot{will-change:transform}
.shot img{transition:transform .7s var(--sotto)}
.shot:hover img{transform:scale(1.035)}

/* ── カードの上を、カーソルの光が追う ──────────────────────── */
.card, .mihon-box, .pt, .step, .shigoto-item{position:relative; isolation:isolate}
.card::before, .mihon-box::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity .45s var(--sotto);
  background:radial-gradient(22rem 22rem at var(--mx,50%) var(--my,50%),
    rgba(47,93,74,.075), rgba(47,93,74,0) 62%);
}
.card:hover::before, .mihon-box:hover::before{opacity:1}

/* ── 数字。出るときに、下から回り込む ───────────────────────── */
.metric b, .num b, .hero-shita div b{
  display:inline-block; will-change:transform;
  transition:transform .9s var(--sutto);
}

/* ── 頁をまたぐとき、白い点滅を出さない ────────────────────── */
@view-transition{ navigation:auto; }
::view-transition-old(root){animation:kieru .22s var(--sotto) both}
::view-transition-new(root){animation:deru .34s var(--sotto) both}
@keyframes kieru{to{opacity:0}}
@keyframes deru{from{opacity:0; transform:translateY(8px)}}

/* ── 止めている人には、何もしない ─────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .gyo > i{transform:none; opacity:1}
  .rise, .deru{opacity:1; transform:none}
  .susumi{display:none}
  @view-transition{ navigation:none; }
}