/* =========================================================
   landing.css  —  背景＆ランディング（ヒーロー）専用
   読み込み順（application.css）: tailwind -> landing -> drawer -> layout -> self
   ========================================================= */

/* =============== Base / 変数とリセット =============== */
@layer base {
  :root {
    /* ぼかし量と白ベール（控えめ：背景をはっきり見せる） */
    --hero-blur: 1px;
    --hero-fog:  .015;
    --hero-veil-alpha: .08;
    --hero-veil-w: 1100px;
    --hero-veil-h: 520px;

    /* 背景の焦点（被写体の置き位置） */
    --hero-focal-x: 50%;
    --hero-focal-y: 45%;

    /* Mint palette（共通） */
    --mint-500: #49d8b7; /* base */
    --mint-600: #2cc6a6; /* hover */
    --mint-700: #1da391; /* active */
    --mint-ring: rgba(73, 216, 183, 0.35);

    /* Login outline color（ログイン/Google 共通） */
    --login-outline: #2bb7a9;
  }

  @media (min-width: 768px) {
    :root { --hero-blur: 1px; --hero-fog: .02; }
  }

  /* 背景画像（最背面） */
  body.landing-root::before,
  body.hero-bg::before {
    content: "";
    position: fixed; inset: 0;
    z-index: -3;
    pointer-events: none;

    /* デフォルト画像。ページ側で --hero-bg / --hero-bg-mobile を上書き可能 */
    background-image: var(--hero-bg, url(https://www.fastycalm.win/assets/landing/hero.jpg));
    background-size: cover;
    background-position: var(--hero-focal-x) var(--hero-focal-y);
    background-repeat: no-repeat;

    /* PCではごく僅かに拡大して縁の切れを防止 */
    transform: scale(1.04);
    filter: contrast(1.03) brightness(1.02) saturate(0.96);
  }

  /* モバイル最適化：拡大オフ & 焦点/ベールを微調整 */
  @media (max-width: 640px) {
    :root {
      --hero-veil-w: 900px;
      --hero-veil-h: 440px;
      --hero-focal-y: 40%;
    }
    body.landing-root::before,
    body.hero-bg::before {
      background-image: var(--hero-bg-mobile, var(--hero-bg, url(https://www.fastycalm.win/assets/landing/hero.jpg)));
      transform: scale(1);
    }
  }

  /* 透ける薄膜＋ぼかし（画像の一つ前） */
  body.landing-root::after,
  body.hero-bg::after {
    content: "";
    position: fixed; inset: 0;
    z-index: -2;
    pointer-events: none;
    backdrop-filter: blur(var(--hero-blur));
    -webkit-backdrop-filter: blur(var(--hero-blur));
    background:
      radial-gradient(
        ellipse var(--hero-veil-w) var(--hero-veil-h) at 50% 45%,
        rgba(255,255,255,var(--hero-veil-alpha)) 0%,
        rgba(255,255,255,calc(var(--hero-veil-alpha) - .12)) 42%,
        rgba(255,255,255,0) 68%
      ),
      linear-gradient(
        to bottom,
        rgba(255,255,255,.14) 0%,
        rgba(255,255,255,.06) 30%,
        rgba(255,255,255,0)   60%
      ),
      rgba(255,255,255,var(--hero-fog));
  }

  /* 重なり順の安定化と余白リセット */
  header, main, footer { position: relative; z-index: 1; }
  html, body { margin: 0; padding: 0; }
  main { margin-top: 0 !important; padding-top: 0 !important; }
  main > :first-child { margin-top: 0 !important; }
}

/* =============== Landing Hero（トップの中身） =============== */
@layer components {
  /* ヒーロー全体（基本） */
  body.landing-root .hero {
    position: relative;
    display: flex;
    align-items: center;          /* 中央寄せ（デフォルト） */
    justify-content: center;
    min-height: 74svh;
    padding-block: clamp(16px, 4vh, 40px);
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  }
  /* --- Modifiers -------------------------------------------------- */

  /* 余白と縦サイズをややコンパクトに */
  body.landing-root .hero.hero--compact{
    min-height: 68svh;
    padding-block: clamp(12px, 3vh, 28px);
  }

  /* タイトル上寄せ：ヒーローの縦位置を上に、見出しを早めに表示 */
  body.landing-root .hero.hero--title-top{
    align-items: flex-start;                     /* 上寄せ */
    justify-content: center;
    padding-top: clamp(20px, 7vh, 56px);        /* 上の余白（≒ mt-5〜mt-16） */
  }
  body.landing-root .hero.hero--title-top .hero__title{
    margin-top: 0;                               /* 余計な空き防止 */
  }

  /* コンテンツ内側（縦フレックス＋可変ギャップ） */
  body.landing-root .hero__inner{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
    color: #111;

    display: flex;
    flex-direction: column;
    align-items: center;

    /* 全体の縦リズムを画面幅で可変化 */
    --stack-gap: clamp(10px, 2.2vw, 20px);
    gap: var(--stack-gap);
    text-align: center;
  }

  /* タイトル（Fasty は太字・白・影） */
  body.landing-root .hero__title{
    color: #fff;
    font-weight: 800;
    letter-spacing: .06em;
    font-size: clamp(2.6rem, 6vw, 4rem);
    text-shadow:
      0 10px 22px rgba(0,0,0,.35),
      0 0 1px rgba(255,255,255,.35);
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
    user-select: none;
    margin: 0 0 clamp(8px, 1.8vw, 14px);  /* ロゴ下の余白も可変 */
  }

  /* キャッチコピー：余白を少し詰める＆読みやすい影 */
  body.landing-root .hero__kicker{
    margin-top: 0;
    font-weight: 800;
    line-height: 1.6;
    font-size: clamp(1.15rem, 2.6vw, 1.6rem);
    text-shadow:
      0 1px 0 rgba(255,255,255,.85),
      0 0 10px rgba(255,255,255,.28);
  }

  /* ===== CTAとGoogleを“ひとまとめ”にして下寄せ ===== */
  body.landing-root .hero__actions{
    margin-top: auto;                           /* 空きを吸って下に着地 */
    padding-bottom: clamp(16px, 6vh, 56px);     /* 画面高に応じて自然な下余白 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 2vw, 16px);
  }

  /* CTA（2ボタン） */
  body.landing-root .hero__cta{
    margin-top: clamp(12px, 2.6vw, 22px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2.4vw, 20px);
    flex-wrap: wrap;
  }

  /* 2ボタン共通：内容幅にフィット */
  body.landing-root .hero__cta .btn-hero{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    min-width: auto;
    width: auto;
    white-space: nowrap;
    flex: 0 0 auto;

    padding-block: clamp(10px, 1.6vw, 14px);
    padding-inline: clamp(18px, 3vw, 28px);
    font-size: clamp(15px, 1.8vw, 20px);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;

    min-height: 44px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease,
                background-color .15s ease, color .15s ease, border-color .15s ease;
    max-width: 90vw;
  }
  body.landing-root .hero__cta .btn-hero:active{ transform: scale(.99); }

  /* 新規登録（塗り） */
  body.landing-root .hero__cta .btn-mint.btn-hero{
    background: var(--mint-500); color: #fff; border: 2px solid transparent;
    box-shadow: 0 12px 34px rgba(43,212,195,.38);
  }
  body.landing-root .hero__cta .btn-mint.btn-hero:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(43,212,195,.48);
  }

  /* ログイン（アウトライン） */
  body.landing-root .hero__cta .btn-hero--login{
    background: #fff; color: var(--login-outline); border: 2px solid var(--login-outline);
  }
  body.landing-root .hero__cta .btn-hero--login:hover{
    background: #f8fffd;
    box-shadow: 0 12px 28px rgba(43,212,195,.20);
    transform: translateY(-1px);
  }

  /* === Google でログイン（アウトライン：ログインと同じ見た目） === */
  body.landing-root .hero__oauth{
    margin-top: clamp(10px, 2vw, 16px);
    display: flex;
    justify-content: center;
  }
  body.landing-root .hero__oauth .btn-google{
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 9999px;
    background: #fff;
    color: var(--login-outline);
    border: 2px solid var(--login-outline);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: .02em;
    line-height: 1;
    box-shadow: 0 12px 28px rgba(43,212,195,.20);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  body.landing-root .hero__oauth .btn-google:hover{
    background: #f8fffd;
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(43,212,195,.24);
  }
  body.landing-root .hero__oauth .btn-google:active{
    transform: translateY(0);
    box-shadow: none;
  }
  body.landing-root .hero__oauth .btn-google .g-icon{ width: 20px; height: 20px; }
  body.landing-root .hero__oauth .btn-google .text{ font-size: 16px; }

  /* アニメ軽減設定 */
  @media (prefers-reduced-motion: reduce){
    body.landing-root .hero__cta .btn-hero,
    body.landing-root .hero__oauth .btn-google{ transition: none; }
    body.landing-root .hero__cta .btn-hero:hover{ transform: none; box-shadow: 0 0 0 rgba(0,0,0,0); }
    body.landing-root .hero__oauth .btn-google:hover{ transform: none; box-shadow: 0 0 0 rgba(0,0,0,0); }
  }
}
/* ====== MyPage：やさしいグラデ背景（下地を生かす半透明オーバーレイ） ====== */
@layer components {
  /* 背景の土台（高さは強制しない） */
  .mypage-bg{
    position: relative;
    background: transparent; /* ← body::before の画像を生かす */
  }

  /* “常に下まで満たしたい”画面だけこれを追加で付ける */
  .mypage-bg--full{ min-height: 100svh; }

  /* 今回のマイページは自然に詰めたいのでこちらを付ける */
  .mypage-bg--compact{
    /* 高さは強制しない。フッターと喧嘩しないよう下だけ少し余白 */
    padding-bottom: clamp(16px, 6vh, 40px);
  }

  /* 背景のやさしいベール */
  .mypage-bg::before{
    content:"";
    position: fixed; inset: 0;
    z-index: -1;                /* body::after(-2) より手前に出ない */
    pointer-events: none;
    background:
      radial-gradient(1100px 520px at 50% 0%,
        rgba(59,130,246,0.04) 0%,
        rgba(59,130,246,0.00) 62%),
      linear-gradient(180deg,
        rgba(250,250,250,0.40) 0%,
        rgba(247,245,242,0.22) 58%,
        rgba(244,241,237,0.18) 100%);
  }

  /* 中身の“縦リズム”を一元管理（画面幅で可変） */
  .mypage-stack{
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2.2vw, 18px);
  }

  /* ==== Mint button（汎用） =============================== */
  .btn-mint{
    background-color: var(--mint-500);
    color: #fff;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    transition: background-color .15s ease, transform .06s ease, box-shadow .15s ease;
  }
  .btn-mint:hover{ background-color: var(--mint-600); box-shadow: 0 8px 18px rgba(0,0,0,0.12); }
  .btn-mint:active{ background-color: var(--mint-700); transform: translateY(1px); }
  .btn-mint:disabled{ opacity: .6; cursor: not-allowed; }
  .btn-mint:focus-visible{ outline: 3px solid var(--mint-ring); outline-offset: 2px; }
}

/* ===== Devise: OAuth button (Google) =================== */

/* デフォは左寄せ */
.devise-oauth{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin-top:10px;
}

/* 任意で中央寄せにしたい時だけこのクラスを付与 */
.devise-oauth--center{
  display:flex;
  justify-content:center;
}

/* ---------- ボタン共通 ---------- */
.oauth-btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  border-radius:9999px;
  padding:.68rem 1.1rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  border:2px solid transparent;
  background:#fff;
  color:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
  transition:
    transform .12s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease;
}

/* ---------- ミントのアウトライン（ログインと統一） ---------- */
.oauth-btn--google{
  color:#2bb7a9;
  border-color:#2bb7a9;
  background:#fff;
}
.oauth-btn--google:hover{
  background:#f8fffd;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(43,212,195,.20);
}
.oauth-btn--google:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(43,212,195,.16);
}
.oauth-btn--google:focus-visible{
  outline:3px solid rgba(73,216,183,.35);
  outline-offset:2px;
}

/* ---------- 枠なし（ゴースト）版 ---------- */
.oauth-btn--google.oauth-btn--borderless{
  border-color:transparent;
  background:transparent;
  color:#2bb7a9;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
.oauth-btn--google.oauth-btn--borderless:hover{
  background:rgba(43,212,195,.06);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(43,212,195,.16);
}
.oauth-btn--google.oauth-btn--borderless:active{
  transform:none;
  box-shadow:0 6px 14px rgba(43,212,195,.12);
}

/* ---------- アイコン＆ラベル ---------- */
.oauth-btn__icon{ display:inline-flex; width:18px; height:18px; flex:0 0 18px; }
.oauth-btn__label{ font-size:15px; font-weight: 500; }

/* 無効時 */
.oauth-btn:disabled{
  opacity:.6; cursor:not-allowed; transform:none;
  box-shadow:0 0 0 rgba(0,0,0,0);
}

/* モーション軽減 */
@media (prefers-reduced-motion: reduce){
  .oauth-btn{ transition:none; }
  .oauth-btn:hover,
  .oauth-btn:active{ transform:none; box-shadow:0 10px 24px rgba(0,0,0,.05); }
}

/* スマホでは横幅フィット */
@media (max-width:420px){
  .devise-oauth{ padding-inline:0; }
  .oauth-btn{ width:100%; justify-content:center; }
}

/* 極小幅の保険（ヒーロー関連があれば維持） */
@media (max-width:380px){
  body.landing-root .hero__inner{ --stack-gap: 12px; }
  body.landing-root .hero__cta{ margin-top: 16px; }
  body.landing-root .hero__actions{ padding-bottom: 20px; }
}