/* =========================================================
   KARI — top.css（Topページだけの見た目）
   共通の色・フォント・サイズは style.css の :root で設定しています。
   ========================================================= */

/* ---------------------------------------------------------
   1. Topページ（1画面で完結）
   --------------------------------------------------------- */
.page-top {
  height: 100vh;
  overflow: hidden;
}
.top-visual {
  position: absolute;
  top: var(--page-top);
  left: var(--content-left);
}
.top-image {
  /* 高さは画面の80%。横幅が狭い画面ではナビにかからないよう抑えます */
  height: min(var(--top-image-height), 90vw);
  width: auto;
  aspect-ratio: var(--top-image-ratio);
  object-fit: cover;
  background: var(--color-image-placeholder);
}
.top-visual figcaption { margin-top: 0.35em; }


/* ---------------------------------------------------------
   2. 初期表示アニメーション
   白い画面から、すべての要素が同時に4秒かけて静かに現れます。
   （JavaScriptが無い環境では最初から表示されます）
   --------------------------------------------------------- */
.js .intro { opacity: 0; }

.js.intro-play .intro {
  animation: intro-fade var(--intro-duration) cubic-bezier(0.33, 0, 0.2, 1) both;
}

@keyframes intro-fade {
  from { opacity: 0; filter: blur(1.5px); }
  to   { opacity: 1; filter: blur(0); }
}


/* ---------------------------------------------------------
   3. 縦長のPC画面（幅761px以上で、横より縦が長い時）
   KARI → 活動領域 → メイン画像 → ナビゲーションの順に並べます
   --------------------------------------------------------- */
@media (min-width: 761px) and (max-aspect-ratio: 4 / 5) {
  .page-top {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 0 var(--page-padding) 56px;
  }
  .page-top .site-brand,
  .page-top .global-nav,
  .page-top .top-visual {
    position: static;
  }
  .page-top .site-brand {
    align-self: flex-start;
    margin-top: 48px;
  }
  .top-main { order: 2; margin-top: 40px; }
  .page-top .global-nav { order: 3; margin-top: 40px; }

  .top-image {
    width: 100%;
    max-width: 520px;
    height: auto;
  }
}

/* ---------------------------------------------------------
   4. スマートフォン（画面幅760px以下）
   KARI は左上（共通）、メイン画像は画面いっぱいに近い幅で、その下に copyright
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .page-top {
    --sp-top-image-top: 49.22vw;     /* メイン画像の上位置 */
    --sp-top-image-left: 5.44vw;     /* メイン画像の左右の余白 */
    --sp-top-bottom: 24vw;           /* copyright の下の余白 */
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: var(--sp-top-image-top) var(--sp-top-image-left) var(--sp-top-bottom);
  }
  .top-visual { position: static; }
  .top-image {
    width: 100%;
    height: auto;
  }
  .top-visual figcaption { margin-top: 1.4vw; }
  .page-top .copyright { font-size: 1.74vw; }
}

/* 動きを減らす設定がONの環境では、初期表示アニメーションを止めます */
@media (prefers-reduced-motion: reduce) {
  .js .intro { opacity: 1; }
  .js.intro-play .intro { animation: none; }
}