/* ============================================================
   Kaite メモ — ヒーロー（top-movie.mp4 の置き換え）
   ------------------------------------------------------------
   青 → 緑 → ペン → グレー → オレンジ → コピー → ロゴ の順に登場。
   タイミングは :root の4変数だけで調整できます。
   ============================================================ */
:root{
  --kv-stagger: 0.10s;   /* 次の素材までの間隔 */
  --kv-dur:     1.00s;   /* 1素材あたりの尺   */
  --kv-travel:  0.5;      /* 移動量の倍率     */
  --kv-fit:     1.00;     /* 1 = 全部入る / >1 は端を切る */
  --kv-ease:    cubic-bezier(.16,1,.3,1);
  --kv-header:  50px;    /* 実サイトのヘッダー高 */
  --kv-header-sp:  60px;   /* SPのヘッダー高（実測） */
  --kv-arw: 1200;          /* 版面の縦横比。SPで差し替える */
  --kv-arh: 848;
  --kv-sp-band: 172px;     /* SPでコピー＋ロゴに空ける高さ */
}

.kv{
  position: relative;
  height: calc(100dvh - var(--kv-header));
  min-height: 520px;
  background: #f0efea;
  overflow: hidden;
  container-type: size;
}

/* 1200x848 の版面を、はみ出さない最大サイズで中央に置く */
.kv__stage{
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  height: calc(min(100cqh, calc(100cqw * 848 / 1200)) * var(--kv-fit));
  aspect-ratio: var(--kv-arw) / var(--kv-arh);
  height: calc(
    min(100cqh, calc(100cqw * var(--kv-arh) / var(--kv-arw))) * var(--kv-fit)
  );
}

/* 位置決めはスロット、動きは中の img。役割を分けておくと transform が衝突しない */
.kv__slot{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  translate: -50% -50%;
}

.kv__art{
  display: block;
  width: 100%;
  height: auto;
  animation:
    kvFade calc(var(--kv-dur) * .55) linear   calc(var(--kv-stagger) * var(--beat)) both,
    kvDrop var(--kv-dur)             var(--kv-ease) calc(var(--kv-stagger) * var(--beat)) both;
}

@keyframes kvFade{
  from { opacity: 0 }
  to   { opacity: 1 }
}

@keyframes kvDrop{
  from{
    translate: calc(var(--dx) * var(--kv-travel)) calc(var(--dy) * var(--kv-travel));
    rotate:    calc(var(--rot) * var(--kv-travel));
    scale:     var(--sc);
  }
  to{
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }
}

/* ---- コピー ---- */
.kv__copy{
  position: absolute;
  left:74px;
  bottom:80px;
  z-index: 6;
  margin: 0;
  font-size: clamp(17px, 3.1cqw, 34px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .02em;
  color: #2b2b2b;
}
.kv__copy span{ display: block }

/* ---- ロゴ ---- */
.kv__logo{
  position: absolute;
  right: 74px;
  bottom:80px;
  z-index: 6;

}
.kv__logo svg,
.kv__logo img{ display: block; width: 100%; height: auto }

.kv__copy span,
.kv__logo{
  animation: kvRise calc(var(--kv-dur) * .95) var(--kv-ease)
             calc(var(--kv-stagger) * var(--beat)) both;
}

@keyframes kvRise{
  from { opacity: 0; translate: 0 .5em }
  to   { opacity: 1; translate: 0 0 }
}

/* ---- 省モーション設定を尊重する ---- */
@media (prefers-reduced-motion: reduce){
  .kv__art,
  .kv__copy span,
  .kv__logo{ animation: none }
}

/* ---- タブレット（現行サイト: max-width 1024px で height: 51vw）---- */
@media (max-width: 1024px){
  .kv{ height: 51vw; min-height: 0 }
  .kv__copy{ left: 44px; bottom: 40px; font-size: 26px }
  .kv__logo{ right: 44px; bottom: 40px; width: 180px }
}


/* ---- スマートフォン ---- */
@media (max-width: 700px){
  .kv{
    height: calc(100dvh - var(--kv-header-sp));
    min-height: 0;
  }
  /* 現行サイトの正方形に戻すなら、上を消してこれだけにする
     .kv{ height: 100vw; min-height: 0 } */
}

/* 中身は @container で切り替える。.kv 自身が container なので、
   プレビュー用に .kv を小さい枠に入れても同じ結果になる。 */
@container (max-width: 700px){

  /* 版面を縦長にして、下の帯（--kv-sp-band）より上に必ず収める。
     こうしておくと正方形に戻しても文字と重ならない。 */
  .kv__stage{
    --kv-arw: 100;
    --kv-arh: 130;
    top: calc((100cqh - var(--kv-sp-band)) / 2);
    height: calc(
      min(calc(100cqh - var(--kv-sp-band)), calc(100cqw * 130 / 100)) * var(--kv-fit)
    );
  }

  /* --x/--y/--w は kv.html にインラインで入っているので、
     ここでは left/top/width を直接上書きする（!important 不要）。
     順番は kv.html の記述順： グレー → 青 → 緑 → ペン → オレンジ */
  .kv__stage > :nth-child(1){ left: 34%; top: 55%; width: 60% }  /* グレー   */
  .kv__stage > :nth-child(2){ left: 19%; top: 13%; width: 26% }  /* 青       */
  .kv__stage > :nth-child(3){ left: 68%; top: 22%; width: 40% }  /* 緑       */
  .kv__stage > :nth-child(4){ left: 93%; top: 32%; width: 13% }  /* ペン     */
  .kv__stage > :nth-child(5){ left: 72%; top: 83%; width: 30% }  /* オレンジ */

  /* コピー：左揃えのまま、下から2段目 */
  .kv__copy{
    left: 0;
    right: 0;
    bottom: 180px;
    padding-inline: 24px;
    font-size: 24px;
    line-height: 1.5;
	  text-align: center;
  }

  /* ロゴ：中央揃え・下揃え。
     translate は kvRise が使うので、margin-inline:auto で中央に寄せる */
  .kv__logo{
    left: 0;
    right: 0;
    margin-inline: auto;
    bottom: 22px;
    width: 300px;
  }
}