/* GSAPが起動した場合だけ使う初期状態と、静的マスクを担当する。
   JS無効時はこの初期非表示が適用されず、全内容を通常表示する。 */
html.motion [data-reveal] {
  will-change: transform, opacity;
}

.image-reveal {
  position: relative;
  overflow: hidden;
}

html.motion .image-reveal img {
  will-change: transform, opacity;
}

.hero-title-line .line,
.hero-title-line .char,
[data-heading-split] .char {
  display: inline-block;
}

.hero-title-line .line {
  overflow: hidden;
}

/* 開帳イントロ。円形の開口は静的なclip-pathを持つ内側ラッパーのtransformで開く。
   .intro-window は clip-path: circle(6%) を固定し、拡大率だけを毎フレーム書く。
   .intro-window-inner には拡大率の逆数を当て、町並みを原寸のまま見せる。 */
.intro-mark {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline: 0;
  color: var(--color-paper);
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 600;
  letter-spacing: .46em;
  text-align: center;
  opacity: 0;
  transform: translateY(-50%);
}

/* 墨だまりの見立て。箱は静的にclipし、中の文字を下から送るだけで染み上がりを作る(ルール19)。 */
.intro-mark-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.intro-mark-ink {
  display: inline-block;
  /* 上下に食い込む字面を切り落とさないための余白。clipの箱と一体で使う。 */
  padding-block: .12em;
}

/* 開帳の中心へ入る灯。半径はビューの短辺基準で、画面比率が変わっても中心に残る。 */
.intro-lamp {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  /* 光源スプライト。装飾のアイコン相当で、実寸がないと光にならない。 */
  inline-size: clamp(180px, 34vmin, 420px);
  aspect-ratio: 1;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%,
    rgb(255 249 238 / .96) 0 4%,
    rgb(232 168 96 / .72) 13%,
    rgb(232 168 96 / .24) 36%,
    rgb(232 168 96 / 0) 68%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
}

.intro-window {
  position: absolute;
  z-index: 3;
  inset: 0;
  clip-path: circle(6% at 50% 50%);
  transform-origin: 50% 50%;
  /* JSが開帳を始めるまで円窓を見せない(先に丸が一瞬見えるのを防ぐ。初回表示はintro.jsのautoAlpha) */
  opacity: 0;
  visibility: hidden;
}

.intro-window-inner {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}

/* 内在サイズを持つimgをラッパーへ合わせる指定。開口の中身をヒーローと同じ見え方にする。 */
.intro-window-inner img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.intro-window-scrim {
  position: absolute;
  inset: 0;
  background: rgb(20 43 70 / .42);
}

.intro-rim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    rgb(232 168 96 / 0) 0 6.2%,
    rgb(232 168 96 / .22) 7.6%,
    rgb(232 168 96 / .6) 8.5%);
}

html.js:not(.intro-skip) .intro-window,
html.js:not(.intro-skip) .intro-window-inner {
  will-change: transform;
}

/* 画像内光源。位置と拡大率はJSが画像座標%から画面座標へ換算して書く。 */
.lamp-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lamp-glow {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  /* 画像の灯りへ重ねる発光スプライト。アイコン相当の装飾で、実寸がないと光源にならない。 */
  inline-size: clamp(54px, 7vw, 104px);
  aspect-ratio: 1;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%,
    rgb(255 247 232 / .96) 0 7%,
    rgb(232 168 96 / .8) 17%,
    rgb(232 168 96 / .27) 42%,
    rgb(232 168 96 / 0) 72%);
  mix-blend-mode: screen;
}

.lamp-glow--card {
  /* 体験カードは正方形の小さな画角のため、路地の灯りに合う小径で持つ。 */
  inline-size: clamp(30px, 8vw, 62px);
}

/* 四季の光。4枚を重ねて、選ばれた季節だけを不透明にする。 */
.season-wash {
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity .85s var(--ease-asagi);
}

[data-season-wash="summer"] {
  opacity: 1;
}

[data-season-wash="spring"] {
  background: radial-gradient(ellipse 118% 92% at 36% 22%,
    rgb(255 238 242 / .52),
    rgb(255 238 242 / .14) 54%,
    rgb(255 238 242 / 0) 78%);
}

[data-season-wash="summer"] {
  background: linear-gradient(122deg,
    rgb(255 250 232 / .66) 0 15%,
    rgb(255 250 232 / .14) 33%,
    rgb(255 250 232 / 0) 52%);
}

[data-season-wash="autumn"] {
  background: linear-gradient(6deg,
    rgb(232 152 74 / .54) 0 26%,
    rgb(232 152 74 / .16) 52%,
    rgb(232 152 74 / 0) 72%);
}

[data-season-wash="winter"] {
  background: radial-gradient(ellipse 92% 124% at 28% 8%,
    rgb(212 232 250 / .6),
    rgb(212 232 250 / .16) 46%,
    rgb(212 232 250 / 0) 74%);
}

html[data-season="spring"] [data-season-wash="summer"],
html[data-season="autumn"] [data-season-wash="summer"],
html[data-season="winter"] [data-season-wash="summer"] {
  opacity: 0;
}

html[data-season="spring"] [data-season-wash="spring"],
html[data-season="autumn"] [data-season-wash="autumn"],
html[data-season="winter"] [data-season-wash="winter"] {
  opacity: 1;
}

html[data-season="summer"] .season-grain {
  mix-blend-mode: screen;
}

/* 夜が更ける演出。JSが動かない環境では、灯が入り終えた夜の絵を最初から見せる。 */
.nightfall-dusk {
  opacity: 1;
}

html.motion .nightfall-dusk,
html.motion .lamp-glow--night {
  will-change: opacity;
}

html.hands-scrub .hands-track {
  will-change: transform;
}