/* ヘッダーの高さ。components.css の .nav は
   padding 16px×2 ＋ ロゴ 28px ＋ 境界線 1px。 */
:root{--nav-h:61px}

/* トップページ（URL取得画面）専用のスタイル。
   トークンは tokens.css、ヘッダー・ボタン・フッターは components.css を使う。
   ログイン画面と同じ「左：夜空のビジュアル／右：白いフォーム」の2ペイン構成。 */

/* ============== 2ペインのレイアウト ============== */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:calc(100svh - var(--nav-h));
}
@media (max-width:900px){
  /* モバイルは縦積み。入力欄とCTAを初期表示に収めるため、空のペインは高さを抑える。 */
  .split{grid-template-columns:1fr;min-height:0}
}

/* ============== 左：夜空 ============== */
/* 背景は実写（天の川）。以前はCSSで星と月面を描いていたが、写真に置き換えたので撤去した。
   文字が乗る左下だけスクリムで落とし、可読性を確保する。 */
.sky{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;
  padding:var(--space-16) var(--space-12);
  color:var(--text-inverse);
  --sky-image:url("/concept/sky-night.webp");
  background:
    linear-gradient(100deg,rgba(4,6,14,.82) 0%,rgba(4,6,14,.55) 42%,rgba(4,6,14,.18) 72%,transparent 100%),
    linear-gradient(0deg,rgba(4,6,14,.55) 0%,transparent 45%),
    var(--sky-image) center/cover no-repeat,
    #05070F;
}
@media (max-width:900px){
  /* 縦積みでは幅375px前後にしかならないので、軽い方（960px幅・約72KB）を読む。
     スクリムも横方向から縦方向に変える（文字が下寄せになるため）。 */
  .sky{
    min-height:260px;padding:var(--space-10) var(--space-6);align-items:flex-end;
    --sky-image:url("/concept/sky-night-960.webp");
    background:
      linear-gradient(180deg,rgba(4,6,14,.30) 0%,rgba(4,6,14,.78) 78%),
      var(--sky-image) center/cover no-repeat,
      #05070F;
  }
}

/* 流れ星。長い間隔でたまに横切る。 */
.sky-shoot{
  position:absolute;top:18%;left:-10%;z-index:-1;
  width:140px;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9));
  filter:drop-shadow(0 0 4px rgba(190,215,255,.8));
  animation:shoot 14s var(--ease-out) infinite 6s;
}
@keyframes shoot{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(18deg)}
  2%{opacity:1}
  9%{opacity:0;transform:translate3d(70vw,26vh,0) rotate(18deg)}
  100%{opacity:0;transform:translate3d(70vw,26vh,0) rotate(18deg)}
}

.sky-copy{position:relative;max-width:460px}
.sky-eyebrow{
  font-size:var(--text-xs);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:rgba(214,228,255,.72);
}
.sky-title{
  margin-top:var(--space-5);
  font-size:var(--text-4xl);font-weight:var(--weight-bold);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);
  text-shadow:0 2px 24px rgba(5,7,15,.6);
}
.sky-title .g{color:var(--brand-300)}
.sky-note{
  margin-top:var(--space-5);max-width:34em;
  font-size:var(--text-md);line-height:var(--leading-normal);
  color:rgba(226,234,255,.74);
}
@media (max-width:900px){
  .sky-title{font-size:var(--text-3xl)}
  .sky-note{display:none}
  /* 2行に折り返るので字間を詰める */
  .sky-eyebrow{letter-spacing:var(--tracking-wider)}
}

/* イラストを差し込むための枠。画像が無いときは何も描かない。 */
.sky-figure{position:absolute;right:8%;bottom:0;width:min(240px,32%);z-index:-1}
.sky-figure img{width:100%;height:auto;display:block}

/* ============== 右：URL取得フォーム ============== */
.claim{
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-16) var(--space-8);
  background:var(--neutral-50);
}
@media (max-width:900px){
  .claim{padding:var(--space-12) var(--space-5)}
}
.claim-inner{width:100%;max-width:420px}
.claim-logo{height:26px;width:auto;display:block;margin:0 auto var(--space-10)}
/* 縦積みのときはヘッダーのロゴがすぐ上に来るので、重ねて出さない */
@media (max-width:900px){
  .claim-logo{display:none}
}

.claim-label{
  display:block;font-size:var(--text-sm);font-weight:var(--weight-semibold);
  color:var(--text);margin-bottom:var(--space-2);
}

/* 入力中のURLをそのまま見せる。lit.link と同じく「取れるURL」を主役にする。 */
.claim-preview{
  display:flex;align-items:baseline;justify-content:center;gap:1px;
  min-height:34px;margin-bottom:var(--space-4);
  font-family:var(--font-mono);font-size:var(--text-xl);
  color:var(--text-muted);white-space:nowrap;overflow:hidden;
}
.claim-preview .host{color:var(--text-secondary)}
.claim-preview .slug{color:var(--primary);font-weight:var(--weight-medium)}
.claim-preview .slug:empty::after{content:attr(data-ghost);color:var(--neutral-400)}
/* 1文字ずつ出現させる */
.claim-preview .slug span{display:inline-block;animation:pop var(--duration-normal) var(--ease-out) both}
.claim-preview .caret{
  display:inline-block;width:1px;height:1em;background:var(--primary);
  animation:blink 1.1s steps(1,end) infinite;
}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.9)}to{opacity:1;transform:none}}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.claim-field{
  display:flex;align-items:center;gap:var(--space-1);
  padding:14px var(--space-4);
  background:var(--neutral-0);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  transition:border-color var(--duration-normal) var(--ease-out),
             box-shadow var(--duration-normal) var(--ease-out);
}
.claim-field:focus-within{border-color:var(--neutral-900);box-shadow:0 0 0 3px rgba(26,26,26,.08)}
.claim-field.is-valid{border-color:var(--primary);box-shadow:var(--shadow-focus)}
.claim-field.shake{animation:shake 320ms var(--ease-out)}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(2px)}
}
.claim-prefix{
  font-family:var(--font-mono);font-size:var(--text-md);
  color:var(--text-muted);white-space:nowrap;
}
/* iOS が入力時に自動ズームするのを防ぐため 16px を下回らせない */
.claim-input{
  flex:1;min-width:0;font-family:var(--font-mono);font-size:16px;color:var(--text);
  border:0;outline:0;background:transparent;padding:0;
}
.claim-input::placeholder{color:var(--neutral-400)}
/* 検証を通ったときだけ出るチェック */
.claim-check{
  flex:none;width:18px;height:18px;border-radius:50%;
  background:var(--primary);color:#fff;
  display:grid;place-items:center;font-size:11px;line-height:1;
  opacity:0;transform:scale(.6);
  transition:var(--duration-normal) var(--ease-out);
}
.claim-field.is-valid .claim-check{opacity:1;transform:none}

.claim-error{margin-top:var(--space-2);font-size:var(--text-sm);color:#C0392B}
.claim-error[hidden]{display:none}

/* 黒地に緑の丸矢印。ログイン画面のボタンに合わせる。 */
.claim-submit{
  width:100%;margin-top:var(--space-5);padding:16px var(--space-6);
  border-radius:var(--radius-lg);background:var(--neutral-900);color:var(--text-inverse);
  font-size:var(--text-md);gap:var(--space-3);
}
.claim-submit:hover{background:#000}
.claim-submit .arrow{
  width:22px;height:22px;border-radius:50%;background:var(--primary);
  display:grid;place-items:center;font-size:12px;line-height:1;
  transition:transform var(--duration-normal) var(--ease-out);
}
.claim-submit:hover .arrow{transform:translateX(3px)}
.claim-submit.is-loading{pointer-events:none;opacity:.85}
.claim-submit.is-loading .arrow{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.claim-rule{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-muted);text-align:center}
.claim-sub{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);text-align:center}
.claim-sub a{color:var(--text);font-weight:var(--weight-semibold);text-decoration:underline}

/* ============== 応援する側の導線 ============== */
.supporter-band{
  border-top:1px solid var(--border);background:var(--bg);
  padding:var(--space-12) var(--space-5);text-align:center;
}
.supporter-title{font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.supporter-actions{
  margin-top:var(--space-5);display:flex;flex-wrap:wrap;
  gap:var(--space-3);justify-content:center;
}

/* ============== guide への導線 ============== */
.learn-more{padding:var(--space-10) var(--space-5);text-align:center;font-size:var(--text-sm)}
.learn-more a{color:var(--text-secondary);text-decoration:underline}
.learn-more a:hover{color:var(--text)}

/* 別ドメイン（guide）へのリンクであることを示す記号 */
.ext{margin-left:.25em;font-size:.85em}

@media (prefers-reduced-motion:reduce){
  .sky::before,.sky::after,.claim-preview .caret,
  .claim-preview .slug span,.claim-field.shake,.claim-submit.is-loading .arrow{animation:none}
}