/* ==========================================================================
   Saki Kumano — Portfolio Teaser
   ミニマル / タイポグラフィ主役 / モバイルファースト
   カラーは CSS変数で管理（JSから動的変更可能）
   ========================================================================== */

/* ---- Theme tokens ------------------------------------------------------ */
:root {
  --bg:#FFFFFF;
  --ink:#111111;       /* 見出し */
  --ink-2:#4a4a4a;     /* 肩書き */
  --ink-3:#8a8a8a;     /* サブテキスト */
  --line:#e6e6e6;      /* 区切り線・枠 */

  --serif:"Newsreader","Noto Sans JP",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
}

/* ---- Reset (最小限) ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }

/* 視覚的に非表示・支援技術には読み上げ */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 背景：淡いモノトーンのにじみ（装飾は最小限） */
body::before {
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(85% 80% at 100% 0%, rgba(0,0,0,.045), transparent 60%),
    radial-gradient(80% 80% at 15% 100%, rgba(0,0,0,.03), transparent 62%);
  filter:blur(40px);
}

/* ---- Layout ------------------------------------------------------------ */
.hero {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:56px 24px;
  width:100%;
  max-width:520px;
  margin-inline:auto;
}

/* ---- Identity ---------------------------------------------------------- */
.name {
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(40px, 10vw, 58px);
  line-height:1.05;
  letter-spacing:.005em;
}
.handle {
  margin:24px 0 0;
  font-size:15px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--ink-3);
}
.rule {
  width:36px; height:1px;
  margin:32px auto;
  border:0;
  background:var(--line);
}
.roles {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.roles span {
  font-size:16px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--ink-2);
}
.status {
  margin:28px 0 0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.status-dot {
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ink-3);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.25; } }
/* 名前末尾の点滅カーソル */
.caret {
  display:inline-block;
  width:.06em; height:.82em;
  margin-left:.1em;
  background:var(--ink);
  vertical-align:-.02em;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink { 0%,50% { opacity:1; } 50.01%,100% { opacity:0; } }

/* ---- Social (追加しやすい構造) ---------------------------------------- */
.social {
  list-style:none;
  margin:48px 0 0;
  padding:0;
  display:flex;
  gap:14px;
  justify-content:center;
}
.social a {
  position:relative;
  display:grid;
  place-items:center;
  width:40px; height:40px;
  border:1px solid var(--line);
  border-radius:50%;
  transition:border-color .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.social a:hover,
.social a:focus-visible {
  border-color:var(--ink);
  transform:translateY(-3px);
}
.social img { width:16px; height:16px; }

/* ホバー/フォーカスでサービス名をツールチップ表示 */
.social .tip {
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%) translateY(4px);
  font-size:11px;
  letter-spacing:.04em;
  color:#fff;
  background:var(--ink);
  padding:4px 9px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.social a:hover .tip,
.social a:focus-visible .tip {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ---- Entrance animation (グリッチ・フェードイン) ---------------------- */
.fade { animation:glitchin 1s ease both; }
.d1 { animation-delay:.05s; }
.d2 { animation-delay:.2s; }
.d3 { animation-delay:.35s; }
.d4 { animation-delay:.5s; }
.d5 { animation-delay:.75s; }
@keyframes glitchin {
  0%   { opacity:0; transform:translateX(-5px) skewX(6deg); filter:blur(2px); }
  15%  { opacity:1; transform:translateX(4px) skewX(-4deg); text-shadow:2px 0 rgba(255,0,80,.6), -2px 0 rgba(0,180,255,.6); }
  30%  { transform:translateX(-3px) skewX(3deg); text-shadow:-3px 0 rgba(255,0,80,.5), 3px 0 rgba(0,180,255,.5); }
  45%  { transform:translateX(2px) skewX(-1deg); text-shadow:1px 0 rgba(255,0,80,.4), -1px 0 rgba(0,180,255,.4); }
  60%  { transform:none; text-shadow:none; filter:blur(0); }
  100% { opacity:1; transform:none; text-shadow:none; }
}

/* ---- Accessibility ----------------------------------------------------- */
:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:4px;
  border-radius:3px;
}
@media (prefers-reduced-motion: reduce) {
  .fade { animation:none; opacity:1; }
  .social a { transition:none; }
  .caret { animation:none; }
  .status-dot { animation:none; }
}

/* ---- Desktop ----------------------------------------------------------- */
@media (min-width:768px) {
  .hero { padding:72px 24px; }
}