@font-face {
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  /* サブセット版。ページに新しい日本語を足したら fonts/README.md の手順で作り直す */
  src: url("fonts/zen-maru-gothic-subset.woff2") format("woff2");
}

html {
  font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
  font-weight: 400;
}

body {
  margin: 0;
  min-height: 100dvh;
  /* 白寄りのパステルグラデーション（元の配色の色相を保ったまま明度を上げたもの） */
  background-color: hsl(0 0% 99%);
  background-image:
    radial-gradient(at 40% 20%, hsl(28 100% 90%) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsl(189 100% 88%) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsl(355 100% 95%) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsl(340 100% 92%) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsl(22 100% 91%) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsl(242 100% 92%) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsl(343 100% 92%) 0px, transparent 50%);
}

/* ---------- Layout ---------- */

/*
 * 左: イラスト（画面の高さに固定して追従）、右: 経歴。
 * イラストは縦長 (1254x1771) なので、横幅を「画面の高さ x 0.85」で頭打ちにして
 * 横長の大画面でも上下が切れすぎないようにする。
 */
.layout {
  --image-width: min(50vw, 100dvh * 0.85);
  display: grid;
  grid-template-columns: var(--image-width) 1fr;
  min-height: 100dvh;
}

.profile-image {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  clip-path: polygon(0px 0px, 70% 0px, 100% 70%, 85% 100%, 0px 100%);
  background-color: rgb(0 0 0 / 0.5);
  animation: imageld 1.5s cubic-bezier(0.87, 0, 0.13, 1) 0s forwards;

  & img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
  }
}

.profile-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;

  & p {
    margin: 8px 0 0;
  }
}

.links {
  display: flex;
  gap: 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;

  & a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
  }
}

/* ---------- 帯が走る見出し（h1 / h2 共通） ---------- */

.name,
.section-title {
  /* inline-block にして前後の要素と余白が相殺されないようにする */
  display: inline-block;
  margin: 0;
  font-size: 1.5rem;
}

.name {
  font-size: 2rem;
}

/*
 * 帯（背景）と文字色を、同じグラデーション・同じアニメーションで同時に左から塗り替える。
 * 文字側は background-clip: text で「帯の上は白、それ以外は濃い色」にする。
 * 余白（padding）を span 側に持たせて、背景と文字のグラデーションの位置を揃えている。
 */
.name > span,
.section-title > span {
  display: inline-block;
  padding: 0 8px;
  background-image:
    linear-gradient(to right, white 50%, #222 50%),
    linear-gradient(to right, #333 50%, transparent 50%);
  -webkit-background-clip: text, border-box; /* Safari 向け */
  background-clip: text, border-box;
  color: transparent;
  background-position-x: 100%;
  background-size: 200% 100%;
  /* 帯はブロックが出てきた少しあとに走らせる */
  animation: loading 1s cubic-bezier(0.87, 0, 0.13, 1) calc(var(--delay) + 0.2s) both;
}

.name > span {
  padding: 0 10px;
}

/* ---------- Panel ---------- */

.panel {
  padding: 48px clamp(24px, 5vw, 80px);
  color: #222;

  /* 1行の長さを読みやすい範囲に抑える（日本語の目安: 1行30〜40文字 ≒ 40em） */
  & > * {
    max-width: 40em;
  }
}

/*
 * 名前 → 各セクションの順に、少しずつ遅らせて下からフェードインさせる。
 * --delay はブロックごとの開始時刻で、中の見出しの帯もこれを基準に走る。
 */
.panel {
  --delay: 0s;
}

.profile-text,
.panel > section {
  animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay) both;
}

.profile-text { --delay: 0s; }
.panel > section:nth-of-type(1) { --delay: 0.4s; }
.panel > section:nth-of-type(2) { --delay: 0.55s; }
.panel > section:nth-of-type(3) { --delay: 0.7s; }
.panel > section:nth-of-type(4) { --delay: 0.85s; }
.panel > section:nth-of-type(5) { --delay: 1s; }
.panel > section:nth-of-type(6) { --delay: 1.15s; }

.section-title {
  margin: 24px 0 8px -4px;
}

.card {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.card-date {
  font-size: 1.2rem;
  white-space: nowrap;
}

.card-description {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-title {
  font-size: 1.1rem;
}

.card-body {
  color: #666;
  font-size: 1rem;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-underline-offset: 3px;

  &:hover {
    color: #666;
  }
}

/* ---------- 狭い画面: イラストと経歴を上下に積む ---------- */

@media (width < 1200px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .profile-image {
    position: relative;
    height: 70dvh;
    /* 縦積みでは斜めカットが不自然なので、同じ動きで最後は長方形に開き切る */
    clip-path: none;
    animation-name: imageld-stacked;
  }
}

/* ---------- スマホ ---------- */

@media (width < 768px) {
  .panel {
    padding: 32px 20px;
  }

  .card {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---------- Animations ---------- */

@keyframes fade-up {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes loading {
  from { background-position-x: 100%; }
  to { background-position-x: 0%; }
}

/* 0% は扇の上下の辺を重ねて面積ゼロ（=完全に隠れた状態）にし、そこから扇形に開く */
@keyframes imageld {
  0% { clip-path: polygon(0px 0px, 0% 70%, 100% 70%, 0% 70%, 0px 100%); }
  50% { clip-path: polygon(0px 0px, 0% 0px, 100% 70%, 0% 100%, 0px 100%); }
  100% { clip-path: polygon(0px 0px, 70% 0px, 100% 70%, 85% 100%, 0px 100%); }
}

/* 縦積み用: imageld と同じ動きで、最後だけ長方形に開き切る */
@keyframes imageld-stacked {
  0% { clip-path: polygon(0px 0px, 0% 70%, 100% 70%, 0% 70%, 0px 100%); }
  50% { clip-path: polygon(0px 0px, 0% 0px, 100% 70%, 0% 100%, 0px 100%); }
  100% { clip-path: polygon(0px 0px, 100% 0px, 100% 70%, 100% 100%, 0px 100%); }
}