@charset "utf-8";

/* ねことガレリア
   色はすべて top.jpg(ドームのイラスト)から取っている。
   5つのリンクは、ドームのガラスの5色を1枚ずつ受け持つ。 */

:root {
  --paper: #f1f1ee;
  --paper-deep: #e7e8e2;
  --ink: #4a4a2a;
  --ink-soft: #77775a;
  --line: rgba(74, 74, 42, 0.62);

  --pink: #f2adbd;
  --peach: #f3bd84;
  --yellow: #e8e7a4;
  --mint: #b3e3ab;
  --sky: #86d0d8;
  --lilac: #cbc6ef;

  --gap: 12px;

  /* ヘッダーの余白とドームの大きさ。五線譜をドームの高さに合わせるために共有する */
  --pad: clamp(40px, 9vh, 88px);
  --dome: clamp(224px, 62vw, 340px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  /* 水彩紙のざらつき。ごく薄く */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .29 0 0 0 0 .16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: "Klee One", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
}

h1,
p,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- ヘッダー ---------- */

.hero {
  position: relative;
  padding: var(--pad) 20px 0;
  text-align: center;
}

.dome {
  position: relative;
  z-index: 1;
  width: var(--dome);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  /* 紙の縁を落として、円のまま置く */
  box-shadow:
    0 0 0 1px rgba(74, 74, 42, 0.12),
    0 18px 40px -14px rgba(74, 74, 42, 0.35);
}

h1 {
  margin-top: clamp(24px, 4.5vh, 40px);
  /* lit.link のタイトルと同じ Noto Sans JP Bold */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: clamp(1.5rem, 8vw, 2.9rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  /* 字間を空けた分、左右の見た目の中心がずれるのを戻す */
  padding-left: 0.12em;
  line-height: 1.3;
}

.members {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}

.members span {
  display: block;
}

.about {
  max-width: 26em;
  margin: 20px auto 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.about > span {
  display: block;
  text-wrap: balance;
}

/* 文節の途中で折り返さない */
.about i {
  display: inline-block;
  font-style: normal;
}

/* スマホでは「ユニットの」のあとで改行する */
.sp {
  display: none;
}

@media (max-width: 599px) {
  .sp {
    display: inline;
  }
}

.since {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* ---------- リンク(アーチ窓) ---------- */

.windows {
  width: 100%;
  max-width: 1000px;
  margin: clamp(36px, 7vh, 64px) auto 0;
  padding: 0 20px;
}

.windows ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--gap);
}

.windows li {
  flex: 0 0 calc((100% - var(--gap) * 2) / 3);
  max-width: 168px;
}

.pane {
  --tint: var(--pink);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 172px;
  padding: 0 4px 18px;
  text-align: center;
  border: 2px solid var(--line);
  border-radius: 50% 50% 14px 14px / 38% 38% 14px 14px;
  -webkit-tap-highlight-color: transparent;
}

/* ガラスの色。読み込み時に灯る */
.pane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    /* ドームの桟 */
    linear-gradient(rgba(74, 74, 42, 0.16), rgba(74, 74, 42, 0.16)) 0 46% / 100% 1.5px no-repeat,
    linear-gradient(rgba(74, 74, 42, 0.16), rgba(74, 74, 42, 0.16)) 50% 0 / 1.5px 100% no-repeat,
    /* 光が上から差す */
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.6), transparent 62%),
    var(--tint);
  opacity: 0.86;
  transition: opacity 0.25s ease, filter 0.3s ease;
}

/* 色が灯る動きを繰り返している間も効くよう、濃さは filter で変える */
.pane:hover::before,
.pane:focus-visible::before,
.pane.is-pressed::before {
  opacity: 1;
  filter: saturate(1.25) brightness(1.04);
}

.pane:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

.pane b {
  display: block;
  font-size: clamp(0.85rem, 4.2vw, 1.22rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.35;
  white-space: nowrap;
}

.pane small {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: clamp(0.68rem, 3.1vw, 0.8rem);
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}

.windows li:nth-child(1) .pane { --tint: var(--pink); }
.windows li:nth-child(2) .pane { --tint: var(--peach); height: 196px; }
.windows li:nth-child(3) .pane { --tint: var(--yellow); }
.windows li:nth-child(4) .pane { --tint: var(--mint); }
.windows li:nth-child(5) .pane { --tint: var(--sky); height: 196px; }
.windows li:nth-child(6) .pane { --tint: var(--lilac); }

/* 手描きらしく、窓の形を少しだけ揺らす */
.windows li:nth-child(2) .pane { border-radius: 52% 48% 14px 16px / 37% 39% 16px 14px; }
.windows li:nth-child(4) .pane { border-radius: 48% 52% 16px 14px / 39% 37% 14px 16px; }

/* ---------- ボタンの下ごしらえ: ガラスの層・音符・波紋 ---------- */

.windows li:nth-child(1) { --i: 0; }
.windows li:nth-child(2) { --i: 1; }
.windows li:nth-child(3) { --i: 2; }
.windows li:nth-child(4) { --i: 3; }
.windows li:nth-child(5) { --i: 4; }
.windows li:nth-child(6) { --i: 5; }

.pane {
  --glow: rgba(74, 74, 42, 0.38);
  /* ダブルタップ拡大の待ちをなくし、タップにすぐ反応させる */
  touch-action: manipulation;
}

@supports (color: color-mix(in srgb, red, blue)) {
  .pane {
    --glow: color-mix(in srgb, var(--tint) 55%, #4a4a2a);
  }
}

/* 窓の中身(光・光の走り・波紋)を、アーチの形で切り抜く層 */
.glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

/* 触れた位置に差す光 */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 28%), rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0) 58%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* ガラスの上を走る光の帯 */
.glass::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 38%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
  transform: translateX(-160%) skewX(-18deg);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 68%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

/* 触れると窓から昇る音符 */
.pane::after {
  content: "♪";
  position: absolute;
  left: 50%;
  top: 24%;
  z-index: 2;
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

.windows li:nth-child(2) .pane::after { content: "♫"; }
.windows li:nth-child(3) .pane::after { content: "♩"; }
.windows li:nth-child(4) .pane::after { content: "♬"; }
.windows li:nth-child(5) .pane::after { content: "♪"; }
.windows li:nth-child(6) .pane::after { content: "♫"; }

/* ---------- ボタンの動き ----------
   触れる・押す・見る、のそれぞれに窓が応える。
   動きを減らす設定の端末では、色が濃くなるだけにする。 */

@media (prefers-reduced-motion: no-preference) {
  /* 見えたとき: 窓が順番にせり上がり、色が灯る。
     JSが動くときは、画面に入った窓から(--d は入った順の遅れ)。動かないときは読み込み時に */
  .js .windows li:not(.in) {
    opacity: 0;
  }

  html:not(.js) .windows li,
  .windows li.in {
    animation: rise 0.9s cubic-bezier(0.22, 1.25, 0.36, 1) backwards;
    animation-delay: calc(var(--d, calc(var(--i) * 0.12s)) + 0.1s);
  }

  /* 5秒に1回、窓に順番に色が灯る動きを繰り返す。
     窓ごとの遅れは窓の番号だけで決め、見えるタイミングに左右されず全体で揃える */
  .pane::before {
    animation: glaze-loop 5s ease-in-out infinite backwards;
    animation-delay: calc(var(--i) * 0.2s + 0.3s);
  }

  /* 各窓から音符が昇り続ける */
  .pane::after {
    animation: note-loop 2.8s ease-out infinite;
    animation-delay: calc(var(--i) * 0.45s + 0.8s);
  }

  /* 待機中: 光が6枚のガラスを順に渡っていく */
  .glass::after {
    animation: catch 10s ease-in-out infinite;
    animation-delay: calc(3s + var(--i) * 0.55s);
  }

  .pane {
    box-shadow: 0 0 0 0 transparent;
    transform: perspective(700px) translateY(var(--ty, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  }

  .pane b,
  .pane small {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), letter-spacing 0.4s ease;
  }

  /* 触れる: 浮き上がり、色つきの影が落ち、光が差し、音符が昇る */
  .pane:focus-visible {
    --ty: -10px;
    --sc: 1.04;
    box-shadow: 0 26px 26px -18px var(--glow);
  }

  .pane:focus-visible .glass::before {
    opacity: 1;
  }

  .pane:focus-visible b {
    transform: translateY(-5px);
    letter-spacing: 0.06em;
  }

  .pane:focus-visible small {
    transform: translateY(-3px);
    letter-spacing: 0.06em;
  }

  .pane:focus-visible::after {
    animation: note-rise 1.2s ease-out;
  }

  @media (hover: hover) and (pointer: fine) {
    .pane:hover {
      --ty: -10px;
      --sc: 1.04;
      box-shadow: 0 26px 26px -18px var(--glow);
    }

    .pane:hover .glass::before {
      opacity: 1;
    }

    .pane:hover b {
      transform: translateY(-5px);
      letter-spacing: 0.06em;
    }

    .pane:hover small {
      transform: translateY(-3px);
      letter-spacing: 0.06em;
    }

    .pane:hover::after {
      animation: note-rise 1.2s ease-out;
    }

    /* カーソルを動かしている間は、傾きが素早く追いかける */
    .pane.is-tracking {
      transition: transform 0.12s ease-out, box-shadow 0.4s ease;
    }
  }

  /* 押す: ぎゅっと沈む */
  .pane:active {
    --ty: -2px;
    --sc: 0.95;
    box-shadow: 0 8px 12px -10px var(--glow);
    transition-duration: 0.12s;
  }

  /* 触れた瞬間(スマホのタップ): 指の位置へ傾き、光が差し、音符が昇る */
  .pane.is-pressed {
    --ty: -4px;
    --sc: 0.96;
    box-shadow: 0 14px 18px -12px var(--glow);
  }

  .pane.is-pressed .glass::before {
    opacity: 1;
  }

  .pane.note-on::after {
    animation: note-rise 1.2s ease-out;
  }

  /* 押した位置から広がる光の波紋 */
  .ripple {
    animation: ripple 0.75s ease-out forwards;
  }

  /* 押した位置から散る光の粒 */
  .spark {
    position: absolute;
    z-index: 3;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--glow);
    pointer-events: none;
    animation: spark 0.75s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(34px) scale(0.94); }
  }

  @keyframes note-loop {
    0% { opacity: 0; transform: translate(-50%, 14px) scale(0.5) rotate(-12deg); }
    18% { opacity: 0.85; }
    100% { opacity: 0; transform: translate(-10%, -84px) scale(1.15) rotate(14deg); }
  }

  @keyframes catch {
    0% { transform: translateX(-160%) skewX(-18deg); }
    16%, 100% { transform: translateX(330%) skewX(-18deg); }
  }

  @keyframes note-rise {
    0% { opacity: 0; transform: translate(-50%, 14px) scale(0.5) rotate(-12deg); }
    22% { opacity: 0.9; }
    100% { opacity: 0; transform: translate(-10%, -84px) scale(1.15) rotate(14deg); }
  }

  @keyframes ripple {
    to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  }

  @keyframes spark {
    from { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); }
  }
}

/* ---------- 「視差効果を減らす」がオンの端末 ----------
   位置が動く演出(せり上がり・浮き上がり・傾き・昇る音符・光の帯)はすべて止める。
   動かすのは、位置が変わらない透明度だけの変化に限る:
   色が灯る動き(5秒に1回)と、その場で浮かんで消える音符。 */

@keyframes glaze-loop {
  0% { opacity: 0; }
  24% { opacity: 0.86; }
  84% { opacity: 0.86; }
  96%, 100% { opacity: 0; }
}

@keyframes note-fade {
  0%, 100% { opacity: 0; }
  35%, 55% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .pane::before {
    animation: glaze-loop 5s ease-in-out infinite backwards;
    animation-delay: calc(var(--i) * 0.2s + 0.3s);
  }

  .pane::after {
    transform: translateX(-50%);
    animation: note-fade 2.8s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.45s + 0.8s);
  }
}

/* ---------- フッター ---------- */

.foot {
  margin-top: auto;
  padding: 56px 20px 28px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* ---------- 広い画面: 6枚を1列に、ドームの稜線のように中央を高く ---------- */

@media (min-width: 900px) {
  :root {
    --gap: 14px;
  }

  .windows li {
    flex: 0 0 calc((100% - var(--gap) * 5) / 6);
    max-width: 164px;
  }

  .pane {
    height: 214px;
    padding-bottom: 22px;
  }

  .windows li:nth-child(1) .pane,
  .windows li:nth-child(6) .pane { height: 214px; }
  .windows li:nth-child(2) .pane,
  .windows li:nth-child(5) .pane { height: 246px; }
  .windows li:nth-child(3) .pane,
  .windows li:nth-child(4) .pane { height: 280px; }

  .pane {
    padding-left: 8px;
    padding-right: 8px;
  }

  .pane b {
    font-size: 1.3rem;
  }

  .pane small {
    font-size: 0.86rem;
  }
}

/* ---------- 背景: 五線譜と鍵盤(ごく薄く) ----------
   ピアノで作る曲と、ギターを弾きながら歌うボーカルを、
   線のたゆむ五線譜(弦の揺れ)と、ページ下の鍵盤で表す。 */

.score {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  /* ドームの真ん中の高さに、五線(高さ48px)を通す */
  top: calc(var(--pad) + var(--dome) / 2 - 24px);
  height: 48px;
  pointer-events: none;
}

.score svg {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: -8px;
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.2;
  stroke-width: 1.2;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.score path {
  vector-effect: non-scaling-stroke;
}

/* 五線の上の音符。色はドームのガラスから */
.note {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 16px;
  height: 12px;
  margin: -6px 0 0 -8px;
}

.note::before {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1.5px solid rgba(74, 74, 42, 0.42);
  border-radius: 50%;
  background: var(--c);
  transform: rotate(-20deg);
}

.note::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 6px;
  width: 1.5px;
  height: 34px;
  background: rgba(74, 74, 42, 0.42);
}

/* 高い音は符尾を下へ */
.n4::after {
  top: 6px;
  bottom: auto;
  left: 0.5px;
}

.n1 { --x: 5.5%;  --y: 42px; --c: var(--pink); }
.n2 { --x: 11%;   --y: 30px; --c: var(--peach); }
.n3 { --x: 16%;   --y: 18px; --c: var(--yellow); }
.n4 { --x: 84%;   --y: 6px;  --c: var(--mint); }
.n5 { --x: 89%;   --y: 24px; --c: var(--sky); }
.n6 { --x: 94.5%; --y: 36px; --c: var(--lilac); }

@media (min-width: 900px) {
  .n1 { --x: 18%; }
  .n2 { --x: 23.5%; }
  .n3 { --x: 29%; }
  .n4 { --x: 71%; }
  .n5 { --x: 76.5%; }
  .n6 { --x: 82%; }
}

/* ページの底から、上に向かって消えていく鍵盤 */
.keys {
  flex: none;
  height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='64'%3E%3Cpath d='M.5 0V64M24.5 0V64M48.5 0V64M72.5 0V64M96.5 0V64M120.5 0V64M144.5 0V64' fill='none' stroke='%234a4a2a' stroke-opacity='.2'/%3E%3Cg fill='%234a4a2a' fill-opacity='.14'%3E%3Crect x='17' width='14' height='38' rx='2'/%3E%3Crect x='41' width='14' height='38' rx='2'/%3E%3Crect x='89' width='14' height='38' rx='2'/%3E%3Crect x='113' width='14' height='38' rx='2'/%3E%3Crect x='137' width='14' height='38' rx='2'/%3E%3C/g%3E%3C/svg%3E") repeat-x center bottom / 168px 64px;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent);
  mask-image: linear-gradient(to top, #000 30%, transparent);
  pointer-events: none;
}