/* 宵灯こまり トップ専用（index.html だけが読み込む）。演出：イントロ（提灯と狐火）と、鳥居をくぐる没入。
   home.css の後に読む。画面幅ごとの指定は site-responsive.css の「トップ」の区切り。 */

/* Intro */
.intro {
  --intro-hole: 0px;
  display: none;
  position: fixed;
  z-index: 110;
  inset: 0;
  place-items: center;
  overflow: hidden;
  color: var(--paper);
  background: transparent;
  transition:
    opacity 0.65s var(--ease),
    visibility 0.65s;
}

.intro-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgb(26 14 20 / 0.65), var(--night) 56%),
    var(--night);
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0 var(--intro-hole),
    rgb(0 0 0 / 0.28) calc(var(--intro-hole) + 1.4rem),
    #000 calc(var(--intro-hole) + 2.8rem)
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 0 var(--intro-hole),
    rgb(0 0 0 / 0.28) calc(var(--intro-hole) + 1.4rem),
    #000 calc(var(--intro-hole) + 2.8rem)
  );
}

html.js:not(.intro-complete) .intro {
  display: grid;
}

html.intro-complete .intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 再訪時は全ページ共通の鳥居遷移を使い、ホーム専用イントロを出さない。 */
html.js.intro-quick .intro { display: none; }
html .home-page .page-loader { display: none; }
html.intro-quick .home-page .page-loader { display: block; }

.intro-lantern {
  position: relative;
  inline-size: clamp(6rem, 12vw, 9rem);
  aspect-ratio: 3 / 4;
  border: 1px solid rgb(255 178 94 / 0.35);
  border-radius: 44% 44% 37% 37% / 12% 12% 18% 18%;
  background:
    repeating-linear-gradient(0deg, transparent 0 0.7rem, rgb(26 14 20 / 0.23) 0.72rem 0.78rem),
    radial-gradient(circle at 50% 58%, rgb(255 246 232 / 0.95), var(--lantern) 20%, rgb(232 68 58 / 0.76) 62%, rgb(26 14 20 / 0.72));
  box-shadow: 0 0 12px var(--lantern), 0 0 28px var(--lantern);
  opacity: 0.18;
  transform: scale(0.86);
}

.intro-lantern::before,
.intro-lantern::after {
  position: absolute;
  inset-inline: 18%;
  block-size: 0.55rem;
  border-radius: 999px;
  content: "";
  background: #2b1518;
  box-shadow: 0 0 0 1px rgb(245 195 75 / 0.25);
}

.intro-lantern::before {
  inset-block-start: -0.35rem;
}

.intro-lantern::after {
  inset-block-end: -0.35rem;
}

.intro-wisp {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1.8rem;
  aspect-ratio: 1;
  border-radius: 50% 50% 48% 52% / 62% 58% 42% 38%;
  background: radial-gradient(circle at 46% 54%, var(--paper), var(--kitsunebi) 35%, rgb(143 216 255 / 0.05) 72%);
  box-shadow: 0 0 12px var(--kitsunebi), 0 0 28px var(--kitsunebi);
  opacity: 0;
  mix-blend-mode: screen;
}

.intro-wisp::after {
  position: absolute;
  inset-inline-start: 38%;
  inset-block-start: -90%;
  inline-size: 42%;
  block-size: 125%;
  border-radius: 80% 20% 50% 50%;
  content: "";
  background: linear-gradient(to top, var(--kitsunebi), transparent);
  filter: blur(2px);
  transform: rotate(14deg);
}

.intro-bloom {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgb(255 246 232 / 0.98) 0 5%,
    rgb(143 216 255 / 0.82) 16%,
    rgb(143 216 255 / 0.2) 46%,
    transparent 72%
  );
  box-shadow: 0 0 12px var(--kitsunebi), 0 0 28px var(--kitsunebi);
  mix-blend-mode: screen;
}

.intro-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-spark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0.32rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px currentColor, 0 0 28px currentColor;
  mix-blend-mode: screen;
}

.intro-copy {
  position: absolute;
  inset-block-end: 9%;
  margin: 0;
  color: rgb(255 246 232 / 0.5);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Dive */
.dive {
  position: relative;
  overflow: hidden;
  background: var(--night);
}

.dive-scene {
  position: relative;
  padding: var(--section-space) var(--gutter);
  contain: paint;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 74%, rgb(255 178 94 / 0.12), transparent 28%),
    linear-gradient(var(--dusk), var(--night));
}

html.motion .dive-scene {
  min-block-size: 100svh;
  padding: 0;
  overflow: hidden;
}

.dive-sky,
.dive-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dive-sky {
  z-index: -3;
  /* 石畳と奥の社を残し、鳥居の足元が参道につながる背景にする。 */
  background:
    linear-gradient(180deg, rgb(11 7 18 / .38), rgb(11 7 18 / .08) 48%, rgb(11 7 18 / .42)),
    url("kv-background.webp") center 58% / cover no-repeat;
  opacity: .22;
}

.dive-vignette {
  z-index: 5;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgb(11 7 18 / 0.62) 100%),
    linear-gradient(90deg, rgb(11 7 18 / 0.35), transparent 18% 82%, rgb(11 7 18 / 0.35));
}

.torii-field {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.torii-gate {
  position: absolute;
  inset-block-start: 12%;
  --gate-width: 80%;
  --gate-limit: 70svh;
  /* 縦長の透過鳥居を画面高に収める画像枠。比率は画像側で維持する。 */
  inset-inline-start: 50%;
  inline-size: min(var(--gate-width), var(--gate-limit));
  translate: -50% 0;
  transform-origin: center 74%;
  opacity: 0.62;
}

.torii-gate img {
  /* 透過鳥居の元の比率を保ち、柱と笠木を引き伸ばさない。 */
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}

html.motion .dive.is-active .torii-gate {
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* 静止版は同じ位置の鳥居を重ねず、最初の1枚で参道の入口を示す。
   動作版ではJSが同サイズの6枚を時間差で表示する。 */
.torii-gate:not(:first-child) { opacity: 0; }

.lantern-road {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.lantern-road i {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  inline-size: var(--s);
  aspect-ratio: 3 / 4;
  border-radius: 42% 42% 36% 36%;
  background: radial-gradient(
    ellipse at center,
    var(--paper) 0 7%,
    var(--lantern) 22%,
    rgb(255 178 94 / 0.48) 46%,
    transparent 76%
  );
  color: var(--lantern);
  opacity: var(--o);
}

.lantern-road i::after {
  position: absolute;
  inset: 14% 46%;
  content: "";
  background: rgb(26 14 20 / 0.28);
}

.torii-ruler {
  position: absolute;
  z-index: 7;
  inset-block: 12% 10%;
  inset-inline-start: 0;
  border-inline-start: 1px solid rgb(245 195 75 / 0.3);
  pointer-events: none;
}

.torii-ruler span {
  position: absolute;
  inset-block-start: var(--p);
  inset-inline-start: 0;
  display: block;
  padding-inline-start: 0.75rem;
  color: rgb(245 195 75 / 0.52);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  line-height: 1;
  transform: translateY(-50%);
}

.torii-ruler span::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  inline-size: 0.5rem;
  block-size: 1px;
  content: "";
  background: currentColor;
}

/* 固定ヘッダー（4.5rem）の下に出す */
.dive-counter {
  position: absolute;
  z-index: 8;
  inset-block-start: calc(4.5rem + clamp(1.4rem, 4vw, 3rem));
  inset-inline-end: var(--gutter);
  margin: 0;
  color: var(--paper);
  text-align: end;
}

.dive-counter small {
  display: block;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.17em;
  line-height: 1.5;
  text-transform: uppercase;
}

.dive-counter strong {
  display: block;
  margin-block-start: 0.2rem;
  font-family: var(--mono);
  font-size: clamp(2rem, 5vw, 4rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
  text-shadow: 0 0 12px var(--lantern), 0 0 28px var(--lantern);
}

.dive-counter em {
  margin-inline-start: 0.25em;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.1em;
}

.dive-phase-list {
  position: relative;
  z-index: 8;
  margin-block-start: 5rem;
}

html.motion .dive-phase-list {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-end: clamp(3rem, 8vh, 6.5rem);
  margin: 0;
}

.dive-phase {
  margin-block-start: 1rem;
  padding: 1.2rem 1.35rem;
  border-inline-start: 2px solid var(--gold);
  background: linear-gradient(90deg, rgb(11 7 18 / 0.92), rgb(11 7 18 / 0.64) 72%, transparent);
}

html.motion .dive-phase {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  inline-size: min(32rem, calc(100vw - var(--gutter) - var(--gutter)));
  margin: 0;
}

.dive-phase .phase-label {
  margin: 0 0 0.5rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.5;
}

.dive-phase p:last-child {
  margin: 0;
  font-family: var(--mincho);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-wrap: balance;
}

.dive-face {
  position: relative;
  z-index: 2;
  inline-size: min(100%, 42rem);
  margin: 3rem 0 0 auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgb(255 178 94 / 0.3);
  border-radius: 50% 50% 8% 8% / 35% 35% 8% 8%;
  box-shadow: 0 0 12px rgb(255 178 94 / 0.28), 0 0 28px rgb(255 178 94 / 0.18);
}

html.motion .dive-face {
  position: absolute;
  inset-inline-end: 5%;
  inset-block-end: -2%;
  inline-size: min(52vw, 48rem);
  margin: 0;
}

.dive-face img {
  block-size: 100%;
  object-fit: cover;
  object-position: 60% center;
}

.shrine-sign {
  position: absolute;
  z-index: 8;
  inset-inline-end: var(--gutter);
  inset-block-end: clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgb(245 195 75 / 0.52);
  color: var(--gold);
  background: rgb(11 7 18 / 0.76);
  font-family: var(--mincho);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.28em;
  line-height: 1.4;
  box-shadow: 0 0 12px currentColor, 0 0 28px rgb(245 195 75 / 0.25);
}