html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.welcome-page{
  /* 背景動画と Skip の包含ブロック。position を持たせないと、どちらも
     body（= 画面全体）基準になり、セーフエリアの計算が狂う */
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #ff3f1d;
  color: #fff;
  overflow: hidden;
}

/* 背景動画。素材は 1080x1920（9:16 の縦長）。
   **cover にしない。** cover は画面の縦横比に合わせて切り抜くので、
   横長の画面・低い画面では動画の下側（コピーが入っている）が見切れる。
   contain なら画面サイズに関係なく必ず全体が入る。
   余った帯は動画の**端の色**で埋める。**地色は再生中に変わる**（冒頭は赤、
   途中はサーモンピンク）ので固定値では途中から帯が浮く。実際の色は
   welcome_video_controller が1フレームずつ端のピクセルを読んで
   --wv-top / --wv-bottom に入れる。ここの値はその初期値兼フォールバック
   （＝冒頭フレームの実測 rgb(255,63,33)）。
   上下2色に分けているのは、帯が画面の上下に出るため。中央は動画が覆うので見えない。
   読み込みに失敗した環境では .welcome-page の #ff3f1d が見える（＝従来の赤い画面）。 */
.welcome-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 初期値は var() のフォールバックで持つ。**この要素に --wv-* を宣言しないこと** —
     宣言するとコントローラーが .welcome-page に入れた値（継承で降りてくる）を
     自分の宣言で上書きしてしまい、塗りが冒頭の赤のまま固まる（staging で踏んだ）。 */
  background: linear-gradient(to bottom,
    var(--wv-top, #ff3f21) 0 50%,
    var(--wv-bottom, #ff3f21) 50% 100%);
  z-index: 0;
  /* 動画は装飾なので、タップは必ず下の Skip / ページ側へ通す */
  pointer-events: none;
}

/* 「ようこそTastyへ」。**既定では出さない。**
   動画が同じ赤地に同じ趣旨のコピーを持っているので、出すと文字が重なって両方読めない。
   HTML から消さないのは、可視テキストが0行だと検索結果のスニペットが拾うものを
   失うため（→ test/integration/public_page_meta_test.rb）。
   動画が読めなかったときだけ .is-fallback で出す＝従来の赤い画面に戻る。 */
.welcome-center{
  /* 動画より前面に出す（z-index は position が無いと効かないので relative を持たせる） */
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
}

.welcome-page.is-fallback .welcome-center{
  opacity: 1;
  pointer-events: auto;
}

.welcome-title{
  font-size: 100px;
  margin: 0 0 8px;
  font-weight: 800;
}

.welcome-sub{
  font-size: 30px;
  margin: 30px;
  opacity: .85;
}

/* ===== Skip（右上） =====
   見た目は文字だけ（背景・枠線なし）。タップ領域は padding で 44px 以上を確保する
   （この要素自体が 44px あるので ::before で広げる必要はない）。
   右端は padding-right で 20px を作る。要素の右端は画面の端まで伸ばしてあるので、
   端ぎりぎりを親指で触っても外れない。
   color を明示するのは必須: <a> は未指定だと UA の -webkit-link（青／紫）に落ちるし、
   本番（AWS）はダーク配色を報告するのでシステムカラー依存は色が変わる。 */
.welcome-skip{
  position: absolute;
  /* iPhone のステータスバー・Dynamic Island を避ける。viewport-fit=cover は
     layouts/application の meta で入れてある（env() はそれが前提） */
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: 0;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 12px 20px;

  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  text-decoration: none;
  background: none;
  border: 0;
  /* 明るいフレームの上でも白文字が溶けないようにする。背景も枠線も足さない */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  -webkit-tap-highlight-color: transparent;
}

.welcome-skip:hover,
.welcome-skip:focus-visible{
  color: #fff;
  opacity: .75;
}

/* ===== スマホ対応 ===== */
@media (max-width: 600px) {
  .welcome-title {
    font-size: 40px;   /* 100px → 半分くらい */
  }

  .welcome-sub {
    font-size: 15px;   /* 30px → 小さめ */
  }
}