/* 開幕オーバーレイの絵と、reveal・かさなる章・帯の初期状態を担当する。
   components.cssの後、responsive.cssより前に読み込む。動かすのはtransformとopacityだけ。 */

/* ------------------------------------------------------------------ 開幕(R24) */
.intro-drops {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  transform: translate(-50%, -50%);
}

/* 落ちてにじむ色。輪郭を持たない点なので、ぼかしはグラデーションへ静的に焼く。 */
.intro-drop {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--drop) / .92) 0%, rgb(var(--drop) / .58) 46%, rgb(var(--drop) / 0) 78%);
  /* 落ちる色の粒。固有の大きさを持つ小物(例外2)。 */
  width: 54px;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.intro-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 16px;
  transform: translate(-50%, -50%);
  text-align: center;
}

.intro-mark-clip {
  display: block;
  overflow: hidden;
}

.intro-mark-name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 52px);
  letter-spacing: .5em;
  /* 字間ぶん右へ空くので、視覚中央へ戻す。 */
  text-indent: .5em;
  color: var(--color-text);
}

.intro-mark-sub {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(13px, 2vw, 16px);
  letter-spacing: .32em;
  text-indent: .32em;
  color: var(--hue-ink);
  opacity: 0;
}

/* 静的なclip-pathの円を持つ枠。毎フレーム動かすのは枠と内側のtransformだけ(ルール19)。 */
.intro-aperture {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: circle(6% at 50% 50%);
  visibility: hidden;
}

.intro-aperture-inner {
  position: absolute;
  inset: 0;
  display: block;
}

.intro-aperture-inner img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: 62% 50%;
  /* 開口の中に見せるヒーロー写真。内在サイズの制御(例外1)。 */
  width: 100%;
  height: 112%;
}

/* ------------------------------------------------------------------ reveal(R19) */
html.js.motion [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
}

html.js.motion [data-reveal-image] {
  opacity: 0;
}

html.js.motion .hero-scroll {
  opacity: 0;
}

/* ------------------------------------------------------------------ かさなる(R02) */
html.js.motion .flow-word {
  opacity: 0;
  transform: translateY(18px);
}

html.js.motion .flow-name,
html.js.motion .flow-note {
  opacity: 0;
}

/* JS無効では3つの語を重ねず、上から順に読める並びへ戻す。 */
html:not(.js) .flow-word {
  grid-area: auto;
}

/* JS無効では色の膜を出さない(スクロールで進む仕掛けが動かないため)。
   色名はHTMLへ6色ぶん書いてあり、JSが動くときだけ1色ずつへ置き換わる。 */
html:not(.js) .flow-veil {
  display: none;
}

html:not(.js) .flow-name {
  letter-spacing: .16em;
  text-indent: 0;
}

/* ------------------------------------------------------------------ 帯(R07) */
/* JS無効では複製側を隠し、1列だけを静止表示する。 */
html:not(.js) .marquee-group:not(:first-child),
html:not(.motion) .marquee-group:not(:first-child) {
  display: none;
}

/* ------------------------------------------------------------------ 色の粒(R33) */
html:not(.js) .palette-canvas,
html:not(.motion) .palette-canvas {
  display: none;
}

/* ------------------------------------------------------------------ ためす(R30) */
html:not(.js) .swatch-canvas,
html:not(.js) .swatch-surface {
  display: none;
}