/* ==========================================================
   結婚パーティー プロフィールブック TOPページ
   「ロサンジェルスバルコニー」バージョン

   会場の雰囲気（アメリカ西海岸の別荘・白大理石・グリーン・
   自然光）に合わせた、白×アイボリー×グリーンの
   上品でナチュラルなデザインです。
   ========================================================== */

/* ----------------------------------------------------------
   カラー設定（ここを変えると全体の色が変わります）
   ---------------------------------------------------------- */
:root {
  --white: #ffffff;
  --ivory: #fbfaf6;        /* 大理石のようなアイボリー */
  --stone: #f3efe6;        /* 明るいストーン色 */
  --sky: #e9f7fd;          /* 白に近い空色 */
  --sky-deep: #c3e9f8;     /* 水平線近くの空 */
  --ocean: #9ed8ec;        /* 穏やかな海 */
  --ocean-deep: #6cc2e0;   /* 少し深い海 */
  --foam: #f6fbfd;         /* 波の泡 */
  --sand: #f4ecda;         /* 白い砂浜 */
  --sand-deep: #ecdfc4;    /* 砂浜の影 */
  --green: #94b287;        /* 会場のグリーン */
  --green-deep: #6d8c62;   /* 深いグリーン */
  --gold: #cdb586;         /* 控えめなゴールド */
  --text: #46595c;         /* 落ち着いたグレーグリーンの文字色 */
  --text-soft: #75878a;    /* 薄めの文字色 */

  /* キャラクター（2人）用のポップな差し色 */
  --coral: #ff9d82;        /* コーラルピンク */
  --coral-deep: #f4805f;   /* 濃いめのコーラル */
  --aqua: #52c7d9;         /* 明るいアクア */
  --skin: #ffdcbc;         /* 肌の色 */
  --hair: #57493a;         /* 髪の色 */
}

/* ----------------------------------------------------------
   基本設定
   ---------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  /* 画面の高さいっぱいに表示（対応ブラウザでは100dvhを使用） */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  font-family: "Jost", "Noto Sans JP", sans-serif;
  color: var(--text);
  background: var(--ivory); /* 背景が読み込めない場合の保険 */
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================
   背景（空・海・砂浜）
   ★背景画像の変更箇所★
   写真を使う場合は、下の background を
     background: url("../images/top-bg.webp") center / cover no-repeat;
   に書き換えてください（グラデーションは保険として残してもOK）
   ========================================================== */
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #fdfdfc 0%,          /* 上：白に近い光 */
    var(--sky) 26%,      /* 明るい空 */
    var(--sky-deep) 54%, /* 水平線近くの空 */
    var(--ocean) 54.2%,  /* ここから海 */
    var(--ocean-deep) 78%,
    var(--sand) 78.2%,   /* ここから砂浜 */
    var(--sand-deep) 100%
  );
  user-select: none;
  -webkit-user-select: none;
}

/* ---- やわらかい自然光（太陽のにじみ） ---- */
.sun {
  position: absolute;
  top: -12%;
  right: -8%;
  width: 60vmin;
  height: 60vmin;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 253, 244, 0.95) 0%,
    rgba(255, 250, 235, 0.5) 40%,
    rgba(255, 250, 235, 0) 70%
  );
}

/* ---- 薄い雲 ---- */
.cloud {
  position: absolute;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  filter: blur(6px);
  animation: cloud-drift 60s linear infinite;
}

.cloud--1 {
  top: 16%;
  left: -30%;
  width: 34vw;
  max-width: 240px;
}

.cloud--2 {
  top: 26%;
  left: -50%;
  width: 26vw;
  max-width: 190px;
  animation-duration: 80s;
  animation-delay: -30s;
  opacity: 0.7;
}

@keyframes cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(160vw); }
}

/* ---- 水平線 ---- */
.horizon {
  position: absolute;
  top: 54%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

/* ---- 海面のきらめき ---- */
.glint {
  position: absolute;
  top: 55%;
  left: 10%;
  width: 80%;
  height: 14%;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.22) 0px,
    rgba(255, 255, 255, 0.22) 1px,
    rgba(255, 255, 255, 0) 3px,
    rgba(255, 255, 255, 0) 10px
  );
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 60% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 100% at 60% 0%, #000 30%, transparent 75%);
  animation: glint-shimmer 7s ease-in-out infinite;
}

@keyframes glint-shimmer {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ==========================================================
   波（3層）
   ★アニメーション速度の変更箇所★
   animation の秒数（26s / 18s / 12s）を変えると
   波の速さが変わります。数字が大きいほどゆっくりです。
   ========================================================== */
.wave {
  position: absolute;
  left: 0;
  width: calc(100% + 360px); /* 動かした分の余白領域 */
  will-change: transform;
}

/* 波の形：丸い山が連続するパターンをCSSだけで描いています
   ★波の高さの変更箇所★
   各レイヤーの「50px / 42px / 36px」を大きくすると波が高くなります */
.wave--back {
  top: 57%;
  height: 45%;
  background:
    radial-gradient(circle 95px at 50% 100%,
      rgba(255, 255, 255, 0.4) 0 93px, transparent 94px)
      0 0 / 180px 50px repeat-x,
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4))
      0 49px / 100% calc(100% - 49px) no-repeat;
  animation: wave-move 26s linear infinite;
}

.wave--mid {
  top: 64%;
  height: 38%;
  background:
    radial-gradient(circle 80px at 50% 100%,
      var(--foam) 0 78px, transparent 79px)
      0 0 / 150px 42px repeat-x,
    linear-gradient(var(--foam), var(--foam))
      0 41px / 100% calc(100% - 41px) no-repeat;
  opacity: 0.85;
  animation: wave-move 18s linear infinite reverse;
}

.wave--front {
  top: 70.5%;
  height: 32%;
  background:
    radial-gradient(circle 64px at 50% 100%,
      var(--white) 0 62px, transparent 63px)
      0 0 / 120px 36px repeat-x,
    linear-gradient(var(--white), var(--white))
      0 35px / 100% calc(100% - 35px) no-repeat;
  animation: wave-move 12s linear infinite;
}

/* パターンの幅（360px）ぶん動かして最初に戻る＝つなぎ目なくループ */
@keyframes wave-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-360px); }
}

/* ==========================================================
   2人がサーフボードに乗って海を渡るアニメーション
   （新郎：アロハシャツ／新婦：白いドレス＋髪に花。
     index.html と同じキャラクターです）
   ★アニメーション速度の変更箇所★
   surf-across の 26s を変えると横切る速さが変わります。
   ========================================================== */
.surfers {
  position: absolute;
  /* 奥の波の上（PRESS STARTボタンより上）を走るように配置 */
  top: calc(57% - 64px);
  left: 0;
  width: 120px;
  height: 72px;
  animation: surf-across 26s linear infinite;
  pointer-events: none;
}

/* 画面の左外から右外までゆっくり横切る */
@keyframes surf-across {
  from { transform: translateX(-35vw); }
  to   { transform: translateX(105vw); }
}

/* 波に合わせた上下の揺れと傾き */
.surfers__rider {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: surf-bob 1.9s ease-in-out infinite alternate;
}

@keyframes surf-bob {
  from { transform: translateY(2px)  rotate(-4deg); }
  to   { transform: translateY(-5px) rotate(4deg); }
}

/* 2人が乗るサーフボード */
.surfers__board {
  position: absolute;
  bottom: 6px;
  left: 8px;
  width: 104px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #ffd66e 90%);
  box-shadow:
    0 3px 6px rgba(2, 136, 173, 0.35),
    inset 0 -2px 0 rgba(255, 157, 118, 0.7);
}

/* 板の後ろの白いしぶき */
.surfers__spray {
  position: absolute;
  bottom: 2px;
  left: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    6px 4px 0 -2px rgba(255, 255, 255, 0.85),
    -3px 6px 0 -3px rgba(255, 255, 255, 0.75),
    9px -3px 0 -4px rgba(255, 255, 255, 0.6);
  animation: spray-pop 0.5s linear infinite alternate;
}

@keyframes spray-pop {
  from { transform: scale(0.85); }
  to   { transform: scale(1.2); }
}

/* ---- 人物（共通） ---- */
.surfer {
  position: absolute;
  bottom: 16px;
}

.surfer__head {
  display: block;
  position: relative;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--skin);
  margin-left: 2px;
}

.surfer__body {
  display: block;
  position: relative;
  margin-top: -2px;
}

/* 両腕（バランスを取るように広げる）
   ドレスのclip-pathの影響を受けないように .surfer 側に描く */
.surfer::before,
.surfer::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 4px;
  height: 13px;
  border-radius: 3px;
  background: var(--skin);
  z-index: 1;
}

.surfer::before {
  left: -5px;
  transform: rotate(38deg);
}

.surfer::after {
  right: -5px;
  transform: rotate(-42deg);
}

/* ---- 新郎 ---- */
.surfer--groom {
  left: 24px;
  transform: rotate(-4deg);
}

/* 髪 */
.surfer--groom .surfer__head::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -1px;
  width: 17px;
  height: 9px;
  border-radius: 9px 9px 4px 4px;
  background: #35281e;
}

/* アロハシャツ＋ネイビーの海パン */
.surfer--groom .surfer__body {
  width: 14px;
  height: 20px;
  border-radius: 7px 7px 5px 5px;
  background: linear-gradient(180deg, var(--coral) 0% 60%, #123a4d 60% 100%);
}

/* ---- 新婦 ---- */
.surfer--bride {
  left: 66px;
  transform: rotate(3deg);
}

/* 髪（茶色）＋耳もとの花 */
.surfer--bride .surfer__head::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -2px;
  width: 19px;
  height: 11px;
  border-radius: 10px 10px 6px 6px;
  background: #5b3a24;
}

.surfer--bride .surfer__head::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5a76;
}

/* 白いドレス */
.surfer--bride .surfer__body {
  width: 18px;
  height: 21px;
  background: var(--white);
  clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
}

/* ---- 白い砂浜 ---- */
.sand {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16%;
  background: linear-gradient(180deg, var(--white) 0%, var(--sand) 35%, var(--sand-deep) 100%);
}

/* ==========================================================
   砂浜で2人がゴルフをしているアニメーション
   新郎がスイング→ボールが転がる→カップイン→新婦が喜ぶ、
   を約7秒ごとに繰り返します。
   ★アニメーション速度の変更箇所★
   7s をすべて同じ値で変えるとテンポが変わります。
   ========================================================== */
.golf {
  position: absolute;
  bottom: 9%; /* ★ゴルフの2人の高さの変更箇所★（数字を大きくすると上に移動します） */
  left: 0;
  width: 100%;
  height: 64px;
  pointer-events: none;
}

/* ---- 2人の共通パーツ ---- */
.golfer {
  position: absolute;
  bottom: 0;
  width: 22px;
}

/* 足元の影 */
.golfer::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 26px;
  height: 5px;
  border-radius: 50%;
  background: rgba(76, 92, 90, 0.14);
  transform: translateX(-50%);
}

/* 顔（肌色）＋髪 */
.golfer__head {
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--skin);
  margin: 0 auto 1px;
}

.golfer__head::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 12px;
  height: 6px;
  border-radius: 6px 6px 2px 2px;
  background: var(--hair);
}

/* ---- 新郎（左側・スイングする） ---- */
.golfer--groom {
  left: 14%;
}

/* アクアのポロシャツ＋白いパンツ */
.golfer--groom .golfer__body {
  display: block;
  width: 13px;
  height: 24px;
  border-radius: 6px 6px 4px 4px;
  background: linear-gradient(180deg, var(--aqua) 0 58%, var(--white) 58% 100%);
  box-shadow: 0 1px 2px rgba(76, 92, 90, 0.2);
  margin: 0 auto;
}

/* ゴルフクラブ（手元を軸に回転してスイング） */
.golfer__club {
  position: absolute;
  top: 13px;
  left: 17px;
  width: 2px;
  height: 21px;
  border-radius: 2px;
  background: #8a7a58;
  transform-origin: 1px 2px;
  transform: rotate(28deg);
  animation: club-swing 7s ease-in-out infinite;
}

/* クラブの先（ヘッド） */
.golfer__club::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 1px;
  width: 6px;
  height: 3px;
  border-radius: 1px 3px 3px 1px;
  background: #8a7a58;
}

@keyframes club-swing {
  0%, 4%   { transform: rotate(28deg); }    /* 構え */
  9%       { transform: rotate(-140deg); }  /* バックスイング */
  12%      { transform: rotate(55deg); }    /* インパクト */
  16%      { transform: rotate(72deg); }    /* フォロースルー */
  30%, 100% { transform: rotate(28deg); }   /* 構えに戻る */
}

/* ---- ボール（新郎の前からカップまで転がる） ---- */
.golf__ball {
  position: absolute;
  bottom: 2px;
  left: calc(14% + 30px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 1px rgba(76, 92, 90, 0.3);
  animation: golf-ball 7s cubic-bezier(0.16, 0.6, 0.4, 1) infinite;
}

@keyframes golf-ball {
  0%, 12%  { transform: translate(0, 0); opacity: 1; }        /* インパクトまで待つ */
  16%      { transform: translate(calc((44vw - 34px) * 0.2), -7px); } /* ぴょんと跳ねて */
  20%      { transform: translate(calc((44vw - 34px) * 0.38), 0); }
  24%      { transform: translate(calc((44vw - 34px) * 0.52), -4px); }
  28%      { transform: translate(calc((44vw - 34px) * 0.66), 0); }
  40%      { transform: translate(calc(44vw - 34px), 0); opacity: 1; } /* カップまで転がる */
  44%, 90% { transform: translate(calc(44vw - 34px), 0); opacity: 0; } /* カップイン */
  96%, 100% { transform: translate(0, 0); opacity: 1; }        /* 元の位置に戻る */
}

/* ---- カップと旗 ---- */
.golf__hole {
  position: absolute;
  bottom: 1px;
  left: calc(58% - 4px);
  width: 10px;
  height: 3px;
  border-radius: 50%;
  background: rgba(76, 92, 90, 0.4);
}

.golf__flag {
  position: absolute;
  bottom: 2px;
  left: 58%;
  width: 2px;
  height: 32px;
  border-radius: 1px;
  background: #8a7a58;
}

/* 旗（コーラルの三角ペナント） */
.golf__flag::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 12px solid var(--coral-deep);
  animation: flag-wave 1.6s ease-in-out infinite alternate;
  transform-origin: left center;
}

@keyframes flag-wave {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.75); }
}

/* ---- 新婦（旗の横・カップインでジャンプして喜ぶ） ---- */
.golfer--bride {
  left: calc(58% + 18px);
  animation: bride-joy 7s ease-in-out infinite;
}

/* 白いワンピース */
.golfer--bride .golfer__body {
  display: block;
  width: 18px;
  height: 24px;
  border-radius: 45% 45% 62% 62% / 26% 26% 80% 80%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(76, 92, 90, 0.35);
  margin: 0 auto;
}

/* 耳もとの花（サーフィンの新婦とおそろい） */
.golfer--bride .golfer__head::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff5a76;
}

@keyframes bride-joy {
  0%, 44%, 62%, 100% { transform: translateY(0) rotate(0deg); }
  48% { transform: translateY(-9px) rotate(-4deg); }  /* カップインで大喜び */
  52% { transform: translateY(0) rotate(0deg); }
  56% { transform: translateY(-6px) rotate(4deg); }
  60% { transform: translateY(0) rotate(0deg); }
}


/* ==========================================================
   ヤシの葉（画面上部の左右）
   会場のグリーンをイメージした飾りです。
   ========================================================== */
.frond {
  position: absolute;
  top: -12px;
  width: 0;
  height: 0;
  animation: frond-sway 7s ease-in-out infinite alternate;
}

.frond--left {
  left: -8px;
  transform-origin: top left;
}

.frond--right {
  right: -8px;
  transform-origin: top right;
  transform: scaleX(-1); /* 左の葉を反転して使用 */
  animation-delay: -3.5s;
}

.frond__leaf {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(110px, 30vw, 210px);
  height: clamp(24px, 6.4vw, 46px);
  border-radius: 6% 100% 6% 100%;
  background: linear-gradient(120deg, var(--green) 20%, var(--green-deep) 100%);
  transform-origin: 4% 20%;
  opacity: 0.92;
}

.frond__leaf--1 { transform: rotate(18deg); }
.frond__leaf--2 { transform: rotate(38deg) scale(0.96); background: linear-gradient(120deg, #9cb391 10%, var(--green) 100%); }
.frond__leaf--3 { transform: rotate(58deg) scale(0.9); }
.frond__leaf--4 { transform: rotate(76deg) scale(0.82); background: linear-gradient(120deg, #9cb391 10%, var(--green) 100%); }
.frond__leaf--5 { transform: rotate(90deg) scale(0.72); }

@keyframes frond-sway {
  from { rotate: 0deg; }
  to   { rotate: 2.2deg; }
}

/* 右側の葉は scaleX(-1) と rotate を両立させるため個別に定義 */
.frond--right {
  animation-name: frond-sway-right;
}

@keyframes frond-sway-right {
  from { transform: scaleX(-1) rotate(0deg); }
  to   { transform: scaleX(-1) rotate(2.2deg); }
}

/* ==========================================================
   画面中央のコンテンツ
   ========================================================== */
.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px)
           24px
           calc(env(safe-area-inset-bottom, 0px) + 24px);
}

/* ---- WELCOME TO OUR WEDDING PARTY ---- */
.welcome {
  /* ★「WELCOME TO OUR WEDDING PARTY」の文字サイズの変更箇所★ */
  font-size: clamp(0.85rem, 3.4vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* letter-spacingで右にずれる分の調整 */
  color: var(--text-soft);
}

/* ---- 飾り線 ---- */
.ornament {
  margin: 18px 0 10px;
}

.ornament--bottom {
  margin: 10px 0 18px;
}

.ornament span {
  display: block;
  width: 54px;
  height: 1px;
  background: var(--gold);
}

/* ---- 新郎新婦の名前（1行で表示） ---- */
.names {
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-size: clamp(1.6rem, 7vw, 3.2rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--text);
  line-height: 1.15;
  white-space: nowrap; /* 折り返さずに1行で表示する */
}

/* 「&」だけ上品なイタリックのゴールドに */
.names .amp {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.72em;
  color: var(--gold);
  margin: 0 0.08em;
}

/* ---- キャッチコピー ---- */
.catchcopy {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 4.8vw, 1.5rem);
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--text-soft);
  margin-bottom: clamp(40px, 8.5vh, 68px);
}

/* ==========================================================
   PRESS START ボタン（サーフボード型）
   ★サーフボード画像の変更箇所★
   写真のサーフボードを使う場合は、.board の background を
     background: url("../images/surfboard.webp") center / contain no-repeat;
   に書き換え、border や box-shadow を消してください。
   ========================================================== */
.board-float {
  /* ふわふわ浮かぶ動きは中のボタンに付けています */
  /* ★ボタンの位置（高さ）の変更箇所★ 数字を大きくすると下がります */
  margin-top: clamp(18px, 4.5vh, 40px);
}

.board {
  display: inline-block;
  width: min(70vw, 320px);
  height: 76px;
  border: 1px solid rgba(197, 174, 130, 0.7); /* 細いゴールドの縁 */
  border-radius: 999px; /* サーフボードのように両端を丸く */
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 55%, var(--stone) 100%);
  box-shadow:
    0 14px 30px rgba(76, 92, 90, 0.18),
    inset 0 -3px 8px rgba(197, 174, 130, 0.14);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-size: clamp(0.9rem, 3.8vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--text);
  cursor: pointer;
  position: relative;
  animation: board-bob 3s ease-in-out infinite; /* ★浮かぶ速さの変更箇所 */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* サーフボード中央の細いライン（ストリンガー） */
.board::before,
.board::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 12%;
  height: 1px;
  background: var(--gold);
  opacity: 0.8;
}

.board::before { left: 9%; }
.board::after  { right: 9%; }

/* ふわふわ浮かぶ＋わずかに傾く */
@keyframes board-bob {
  0%, 100% { transform: translateY(0) rotate(-1.1deg); }
  50%      { transform: translateY(-6px) rotate(1.1deg); }
}

/* hoverで少し拡大（PC向け） */
@media (hover: hover) {
  .board:hover {
    transform: scale(1.04);
    box-shadow:
      0 18px 36px rgba(76, 92, 90, 0.22),
      inset 0 -3px 8px rgba(197, 174, 130, 0.14);
    animation-play-state: paused;
  }
}

/* タップ時に少し縮む（沈む） */
.board:active {
  transform: scale(0.95) translateY(2px);
  animation-play-state: paused;
}

/* キーボード操作時のフォーカス表示 */
.board:focus-visible {
  outline: 2px solid var(--green-deep);
  outline-offset: 4px;
}

.board:disabled {
  cursor: default;
}

/* ---- 操作案内 ---- */
.hint {
  margin-top: clamp(18px, 4.5vh, 36px);
  font-size: clamp(0.6rem, 2.6vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--text-soft);
  opacity: 0.85;
}

/* ---- JS無効時のリンク ---- */
.noscript-link {
  display: inline-block;
  margin-top: 16px;
  padding: 14px 32px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.2em;
}

/* ==========================================================
   初回表示アニメーション（下からふわっと表示）
   ========================================================== */
.rise {
  opacity: 0;
  animation: rise-in 0.7s ease-out forwards;
}

.welcome            { animation-delay: 0.1s; }
.ornament           { animation-delay: 0.25s; }
.names              { animation-delay: 0.35s; }
.ornament--bottom   { animation-delay: 0.5s; }
.catchcopy          { animation-delay: 0.55s; }
.board-float        { animation-delay: 0.75s; }
.hint               { animation-delay: 0.95s; }

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   ページ遷移演出（PRESS START押下後）
   js/main.js が body に .is-leaving を付けると始まります。
   全体で約1.8秒（js/main.js の LEAVE_DURATION と合わせています）
   ========================================================== */

/* ---- せり上がる波 ---- */
.wave-cover {
  position: fixed;
  inset: 0;
  z-index: 5;
  transform: translateY(calc(100% + 90px)); /* 波の山の分も含めて画面外に隠しておく */
  background: linear-gradient(180deg, var(--ocean) 0%, var(--ocean-deep) 100%);
  pointer-events: none;
}

/* 波の上端の丸い山 */
.wave-cover::before {
  content: "";
  position: absolute;
  top: -69px;
  left: 0;
  width: calc(100% + 400px);
  height: 70px;
  background:
    radial-gradient(circle 102px at 50% 100%,
      var(--ocean) 0 100px, transparent 101px)
      0 0 / 200px 70px repeat-x;
}

/* ---- 最後のアイボリーフェード ---- */
.white-out {
  position: fixed;
  inset: 0;
  z-index: 6;
  background: var(--ivory);
  opacity: 0;
  pointer-events: none;
}

/* ---- 演出の流れ ---- */

/* 1. 文字はそのまま静かに残す */
.is-leaving .content .rise {
  animation: none;
  opacity: 1;
}

/* 2. サーフボードが海（画面奥）へ進んで小さくなる */
.is-leaving .board-float {
  animation: board-ride 0.9s ease-in forwards;
}

@keyframes board-ride {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-24vh) scale(0.22);
  }
}

.is-leaving .board {
  animation: none;
}

/* 3. 波が画面全体にせり上がる */
.is-leaving .wave-cover {
  animation: cover-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s forwards;
}

@keyframes cover-up {
  to { transform: translateY(0); }
}

/* 4. アイボリーにフェードして profile.html へ */
.is-leaving .white-out {
  animation: white-in 0.5s ease 1.25s forwards;
}

@keyframes white-in {
  to { opacity: 1; }
}

/* ---- 「動きを減らす」設定のときの遷移（短いフェードのみ） ---- */
.is-leaving-simple .white-out {
  animation: white-in 0.4s ease forwards;
}

/* ==========================================================
   アクセシビリティ：動きを減らす設定に対応
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .wave,
  .cloud,
  .glint,
  .frond,
  .board,
  .surfers,
  .surfers__rider,
  .surfers__spray,
  .golfer__club,
  .golf__ball,
  .golf__flag::after,
  .golfer--bride {
    animation: none;
  }

  /* サーファーは海の中ほどで静止させる */
  .surfers {
    transform: translateX(34vw);
  }

  .rise {
    animation-duration: 0.3s;
    animation-delay: 0s;
    transform: none;
  }

  @keyframes rise-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ==========================================================
   画面サイズごとの調整
   ========================================================== */

/* 高さが低い端末（横向きや小さいスマホ）でも見切れないように */
@media (max-height: 640px) {
  .board {
    height: 64px;
  }

  .catchcopy {
    margin-bottom: 20px;
  }

  .frond__leaf {
    width: clamp(90px, 22vw, 150px);
    height: clamp(20px, 4.8vw, 34px);
  }
}

/* タブレット・PCでは余白と飾りを少しゆったりと */
@media (min-width: 768px) {
  .welcome {
    letter-spacing: 0.42em;
    text-indent: 0.42em;
  }

  .ornament span {
    width: 72px;
  }
}