/* =========================================================
   ヒーロー：明るい・爽やかテイスト（採用版）
   方針：動画側で「明るい区間だけを往復再生」して明度を確保し、
         CSSの締めは “文字が乗る場所だけ” に最小限かける。
   締めの強さは実測で決定（WCAG AAを満たす最小限）:
     PC   見出し 3.5:1 / リード文 9.6:1   （基準 3.0 / 4.5）
     SP   見出し 8.0:1 / リード文 5.3:1   （基準 3.0 / 4.5）
   ========================================================= */

/* 1. 映像：明度は動画側で確保済みなので、彩度だけ僅かに上げて水と緑を澄ませる */
.vex-hero__video {
  filter: saturate(1.06) contrast(0.98);
}

.vex-hero {
  background: #eaf3fd;
}

/* 2. 締め（スマホ）：文章が横幅いっぱいに来るので、下辺から均一に立ち上げる */
.vex-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgba(8, 32, 60, 0.55) 0%,
    rgba(8, 32, 60, 0.34) 18%,
    rgba(8, 32, 60, 0.12) 34%,
    rgba(8, 32, 60, 0) 52%
  );
}

/* 3. 締め（PC）：文字は左下だけ。右側の空と水は明るいまま残して爽やかさを保つ */
@media (min-width: 768px) {
  .vex-hero::after {
    background:
      radial-gradient(
        120% 125% at 12% 100%,
        rgba(8, 32, 60, 0.48) 0%,
        rgba(8, 32, 60, 0.28) 38%,
        rgba(8, 32, 60, 0) 72%
      ),
      linear-gradient(
        0deg,
        rgba(8, 32, 60, 0.18) 0%,
        rgba(8, 32, 60, 0.04) 22%,
        rgba(8, 32, 60, 0) 42%
      );
  }
}

/* 4. ガラスUI：黒スモーク → 白フロスト */
.liquid-glass {
  background: rgba(255, 255, 255, 0.44);
  background-blend-mode: normal;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    0 2px 14px rgba(8, 32, 60, 0.1);
}
.liquid-glass::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.35) 30%,
    rgba(255, 255, 255, 0.15) 60%,
    rgba(255, 255, 255, 0.55) 100%
  );
}

/* 5. 白ガラス上の文字は濃紺に */
.vex-logo,
.vex-navlinks a {
  color: #0b2545;
}
.vex-navlinks a:hover {
  color: #1d4ed8;
}
.vex-btn-glass {
  color: #0b2545;
  border-color: rgba(11, 37, 69, 0.16);
}
.vex-btn-glass:hover {
  background: #fff;
  color: #0b2545;
}

/* 6. 文字：コントラストは締めで確保できているので、影は輪郭を締める程度に留める。
      （大きな影は白文字をぼやけさせ、爽やかさを削ぐ） */
.vex-h1 {
  text-shadow: 0 1px 12px rgba(6, 26, 48, 0.28);
}
.vex-sub {
  color: #f2f7fc;
  text-shadow: 0 1px 8px rgba(6, 26, 48, 0.4);
}