/* R24の専用イントロと、R26/R28のヒーロー多層シーンを担当する。
 * foundation.cssの色と文字トークンを前提にする。 */

.intro {
  display: none;
}

.intro-pending .intro {
  background: transparent;
  display: block;
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: 1000;
}

.intro-gate {
  background:
    linear-gradient(90deg, rgba(205, 170, 104, 0.025), transparent 28%, rgba(113, 131, 154, 0.055) 68%, transparent),
    var(--black);
  left: 0;
  position: absolute;
  transition: transform 1.1s var(--ease);
  /* 全画面を覆う装飾板のため、ビューポート比で固定する。 */
  height: 50.5%;
  width: 100%;
  will-change: transform;
  z-index: 1;
}

.intro-gate--top {
  border-bottom: 1px solid rgba(205, 170, 104, 0.35);
  top: 0;
}

.intro-gate--bottom {
  border-top: 1px solid rgba(205, 170, 104, 0.35);
  bottom: 0;
}

.intro-atmosphere {
  background: radial-gradient(circle at 50% 50%, rgba(113, 131, 154, 0.16), rgba(7, 8, 11, 0.08) 38%, rgba(7, 8, 11, 0.5) 76%, rgba(7, 8, 11, 0.72));
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.36s ease;
  z-index: 2;
}

.intro-center {
  --intro-count-size: clamp(8rem, 25.3vmin, 17rem);
  --intro-dial-size: clamp(17rem, 46vmin, 31rem);

  left: 50%;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s var(--ease);
  z-index: 4;
}

.intro-counting .intro-center {
  opacity: 1;
}

.intro-kicker,
.intro-caption {
  color: var(--gold);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  line-height: 1.5;
  opacity: 0.84;
  transition: opacity 0.2s ease, transform 0.2s var(--ease);
  white-space: nowrap;
}

.intro-kicker {
  margin-bottom: clamp(1.2rem, 2vh, 1.8rem);
}

.intro-caption {
  margin-top: clamp(1.2rem, 2vh, 1.8rem);
}

.intro-dial {
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(113, 131, 154, 0.1), transparent 62%);
  display: inline-block;
  /* SVG盤を正円のまま短辺基準で可変させる装飾寸法。 */
  inline-size: var(--intro-dial-size);
  position: relative;
  transform: scaleX(1) scaleY(1);
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.24s var(--ease);
  vertical-align: middle;
  will-change: transform, opacity;
}

.intro-dial-geometry,
.intro-clock-wipe,
.intro-count,
.intro-dial-bloom {
  inset: 0;
  position: absolute;
}

.intro-dial-geometry {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  overflow: visible;
  z-index: 2;
}

.intro-ring,
.intro-crosshair {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.intro-ring--outer {
  stroke-opacity: 0.38;
}

.intro-ring--inner {
  stroke-opacity: 0.2;
}

.intro-crosshair {
  stroke-opacity: 0.17;
}

.intro-clock-wipe {
  /* 基準角0deg=針の先端が終端で12時に届く(旧-14degは11時半止まり) */
  background: conic-gradient(from 0deg, transparent 0deg, rgba(244, 239, 230, 0.025) 304deg, rgba(244, 239, 230, 0.16) 334deg, rgba(244, 239, 230, 0.68) 356deg, transparent 360deg);
  border-radius: 50%;
  inset: 5%;
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.96) 0 72%, rgba(0, 0, 0, 0.42) 88%, transparent 100%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.96) 0 72%, rgba(0, 0, 0, 0.42) 88%, transparent 100%);
  opacity: 0.88;
  transform: rotate(0deg);
  transform-origin: center;
  will-change: transform;
  z-index: 1;
}

.intro-counting .intro-clock-wipe {
  animation: intro-clock-cycle 0.64s linear 3 forwards;
}

.intro-count {
  align-items: center;
  color: var(--ivory);
  display: grid;
  filter: blur(0.045em);
  font-family: "Shippori Mincho Intro Numerals", "Shippori Mincho Sekaikan", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: var(--intro-count-size);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  justify-items: center;
  line-height: 0.9;
  z-index: 3;
}

.intro-count.is-changing {
  animation: intro-count-beat 0.38s var(--ease);
  filter: blur(0);
  transition: filter 0.22s ease;
}

.intro-dial-bloom {
  background: radial-gradient(circle, rgba(244, 239, 230, 0.34), rgba(205, 170, 104, 0.12) 34%, rgba(113, 131, 154, 0.05) 54%, transparent 72%);
  inset: -24%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.72);
  z-index: 0;
}

.intro-count.is-changing + .intro-dial-bloom {
  animation: intro-dial-bloom 0.46s var(--ease);
}

.intro-ignition {
  background: radial-gradient(ellipse at center, rgba(244, 239, 230, 0.94), rgba(205, 215, 229, 0.42) 20%, rgba(113, 131, 154, 0.14) 48%, transparent 72%);
  /* 中央の光線を上下へ点灯させる全画面装飾なので、vmax正方形で覆う。 */
  block-size: 100vmax;
  inline-size: 100vmax;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scaleX(0.04) scaleY(0.001);
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.24s var(--ease);
  will-change: transform, opacity;
  z-index: 3;
}

.intro-particles {
  display: none;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.2s ease;
  z-index: 3;
}

.intro-particles span {
  --intro-drift-x: 1rem;
  --intro-drift-y: -1.5rem;
  --intro-particle-size: 3px;
  --intro-particle-x: 50%;
  --intro-particle-y: 50%;

  animation: intro-particle-drift 3.8s ease-in-out infinite alternate;
  animation-play-state: paused;
  background: radial-gradient(circle, rgba(244, 239, 230, 0.9), rgba(205, 170, 104, 0.38) 38%, transparent 72%);
  /* 光塵は視認できる数pxの装飾粒として固定寸法が必要。 */
  block-size: var(--intro-particle-size);
  border-radius: 50%;
  inline-size: var(--intro-particle-size);
  left: var(--intro-particle-x);
  mix-blend-mode: screen;
  opacity: 0.2;
  position: absolute;
  top: var(--intro-particle-y);
  will-change: transform, opacity;
}

.intro-counting .intro-particles span {
  animation-play-state: running;
}

.intro-particles span:nth-child(1) { --intro-drift-x: 1.4rem; --intro-drift-y: -1.8rem; --intro-particle-size: 3px; --intro-particle-x: 29%; --intro-particle-y: 35%; animation-delay: -0.8s; animation-duration: 4.2s; }
.intro-particles span:nth-child(2) { --intro-drift-x: -1rem; --intro-drift-y: -2.1rem; --intro-particle-size: 4px; --intro-particle-x: 37%; --intro-particle-y: 66%; animation-delay: -2.4s; animation-duration: 5.1s; }
.intro-particles span:nth-child(3) { --intro-drift-x: 0.8rem; --intro-drift-y: -1.3rem; --intro-particle-size: 2px; --intro-particle-x: 44%; --intro-particle-y: 28%; animation-delay: -1.6s; animation-duration: 3.9s; }
.intro-particles span:nth-child(4) { --intro-drift-x: -1.3rem; --intro-drift-y: -1.7rem; --intro-particle-size: 3px; --intro-particle-x: 59%; --intro-particle-y: 73%; animation-delay: -3.1s; animation-duration: 4.7s; }
.intro-particles span:nth-child(5) { --intro-drift-x: 1.1rem; --intro-drift-y: -2rem; --intro-particle-size: 4px; --intro-particle-x: 66%; --intro-particle-y: 31%; animation-delay: -1.1s; animation-duration: 5.3s; }
.intro-particles span:nth-child(6) { --intro-drift-x: -0.7rem; --intro-drift-y: -1.5rem; --intro-particle-size: 2px; --intro-particle-x: 73%; --intro-particle-y: 61%; animation-delay: -2.7s; animation-duration: 4.4s; }

.intro-projecting .intro-kicker,
.intro-projecting .intro-caption {
  opacity: 0;
  transform: translateY(-0.35rem);
}

.intro-projecting .intro-dial {
  transform: scaleX(0.84) scaleY(0.008);
}

.intro-projecting .intro-clock-wipe,
.intro-projecting .intro-count,
.intro-projecting .intro-dial-bloom {
  opacity: 0;
}

.intro-projecting .intro-ignition {
  opacity: 0.96;
  transform: translate(-50%, -50%) scaleX(0.36) scaleY(0.001);
}

.intro-opening .intro-center {
  opacity: 0;
}

.intro-opening .intro-atmosphere,
.intro-opening .intro-particles {
  opacity: 0;
}

.intro-opening .intro-ignition {
  animation: intro-screen-ignite 1.1s var(--ease) forwards;
}

.intro-opening .intro-gate--top {
  transform: translateY(-101%);
}

.intro-opening .intro-gate--bottom {
  transform: translateY(101%);
}

.intro-fast .intro-gate {
  transition-duration: 0.42s;
}

.intro-fast .intro-clock-wipe {
  animation-duration: 0.42s;
  animation-iteration-count: 1;
}

.intro-fast .intro-count.is-changing,
.intro-fast .intro-count.is-changing + .intro-dial-bloom {
  animation-duration: 0.11s;
}

.intro-fast .intro-count.is-changing {
  transition-duration: 0.07s;
}

.intro-fast .intro-dial,
.intro-fast .intro-ignition {
  transition-duration: 0.11s;
}

.intro-fast.intro-opening .intro-ignition {
  animation-duration: 0.42s;
}

@keyframes intro-clock-cycle {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes intro-count-beat {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }

  58% {
    opacity: 1;
    transform: scale(1.06);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes intro-dial-bloom {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }

  42% {
    opacity: 0.86;
    transform: scale(1.04);
  }

  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

@keyframes intro-screen-ignite {
  0% {
    opacity: 0.96;
    transform: translate(-50%, -50%) scaleX(0.36) scaleY(0.001);
  }

  48% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scaleX(0.82) scaleY(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.08);
  }
}

@keyframes intro-particle-drift {
  from {
    opacity: 0.12;
    transform: translate3d(-50%, -50%, 0) scale(0.76);
  }

  to {
    opacity: 0.46;
    transform: translate3d(calc(-50% + var(--intro-drift-x)), calc(-50% + var(--intro-drift-y)), 0) scale(1.08);
  }
}

.hero {
  background: var(--black);
  color: var(--ivory);
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(13rem, 30vh, 21rem) clamp(8rem, 19vh, 14rem);
  position: relative;
}

.hero-scrim,
.hero-atmosphere,
.hero-screen-bloom,
.hero-rays,
.hero-moon-shimmer,
.hero-dust {
  inset: 0;
  position: absolute;
}

.hero-scrim {
  background:
    linear-gradient(90deg, rgba(7, 8, 11, 0.76) 0%, rgba(7, 8, 11, 0.5) 38%, rgba(7, 8, 11, 0.12) 70%, rgba(7, 8, 11, 0.28) 100%),
    linear-gradient(0deg, rgba(7, 8, 11, 0.82) 0%, rgba(7, 8, 11, 0.36) 40%, rgba(7, 8, 11, 0.08) 70%, rgba(7, 8, 11, 0.32) 100%),
    radial-gradient(ellipse at 52% 38%, transparent 18%, rgba(7, 8, 11, 0.06) 48%, rgba(7, 8, 11, 0.38) 100%);
  z-index: 1;
}

.hero-atmosphere {
  pointer-events: none;
  z-index: 2;
}

.hero-screen-bloom {
  animation: hero-screen-breathe 6.8s ease-in-out infinite;
  animation-play-state: paused;
  background: url("media/hero-screen-bloom.webp") 50% 15% / 100% 72% no-repeat;
  opacity: 0.84;
  transform: scale(1.015);
}

.hero-rays {
  animation: hero-rays-drift 9.2s ease-in-out infinite;
  animation-play-state: paused;
  background: url("media/hero-projection-rays.webp") center top / 100% 100% no-repeat;
  opacity: 0.52;
  transform: translate3d(-0.35%, 0, 0) scale(1.018);
}

.hero-moon-shimmer {
  animation: hero-moon-shimmer 5.6s ease-in-out -1.7s infinite;
  animation-play-state: paused;
  background: radial-gradient(circle, rgba(255, 251, 224, 0.82) 0, rgba(214, 225, 238, 0.34) 38%, transparent 72%);
  border-radius: 50%;
  inset: 10% auto auto 56%;
  mix-blend-mode: screen;
  opacity: 0.28;
  /* 月面だけを照らす小さな光スプライトとして正円寸法を固定する。 */
  height: clamp(5rem, 9vw, 8.5rem);
  transform: translate3d(-50%, 0, 0);
  width: clamp(5rem, 9vw, 8.5rem);
}

.hero-dust {
  overflow: hidden;
}

.hero-dust span {
  --dust-delay: 0s;
  --dust-drift: -2.4rem;
  --dust-duration: 9s;
  --dust-size: 4px;
  --dust-x: 50%;
  --dust-y: 50%;

  animation: hero-dust-float var(--dust-duration) ease-in-out var(--dust-delay) infinite;
  animation-play-state: paused;
  background: radial-gradient(circle, rgba(255, 252, 239, 0.96) 0 12%, rgba(223, 231, 240, 0.52) 38%, transparent 72%);
  border-radius: 50%;
  left: var(--dust-x);
  mix-blend-mode: screen;
  opacity: 0.24;
  position: absolute;
  top: var(--dust-y);
  /* 映写光に浮く塵は装飾粒として固定寸法が必要。 */
  height: var(--dust-size);
  width: var(--dust-size);
}

.hero.is-ambient .hero-screen-bloom,
.hero.is-ambient .hero-rays,
.hero.is-ambient .hero-moon-shimmer,
.hero.is-ambient .hero-dust span {
  animation-play-state: running;
}

.hero-dust span:nth-child(1) { --dust-delay: -1.4s; --dust-duration: 8.6s; --dust-size: 3px; --dust-x: 22%; --dust-y: 26%; }
.hero-dust span:nth-child(2) { --dust-delay: -5.2s; --dust-duration: 11s; --dust-size: 5px; --dust-x: 31%; --dust-y: 42%; }
.hero-dust span:nth-child(3) { --dust-delay: -2.8s; --dust-duration: 9.8s; --dust-size: 4px; --dust-x: 39%; --dust-y: 22%; }
.hero-dust span:nth-child(4) { --dust-delay: -7.1s; --dust-duration: 12.4s; --dust-size: 6px; --dust-x: 47%; --dust-y: 47%; }
.hero-dust span:nth-child(5) { --dust-delay: -3.6s; --dust-duration: 10.2s; --dust-size: 3px; --dust-x: 54%; --dust-y: 30%; }
.hero-dust span:nth-child(6) { --dust-delay: -8.3s; --dust-duration: 13s; --dust-size: 5px; --dust-x: 61%; --dust-y: 54%; }
.hero-dust span:nth-child(7) { --dust-delay: -4.4s; --dust-duration: 9.2s; --dust-size: 4px; --dust-x: 69%; --dust-y: 24%; }
.hero-dust span:nth-child(8) { --dust-delay: -6.7s; --dust-duration: 11.8s; --dust-size: 6px; --dust-x: 76%; --dust-y: 43%; }
.hero-dust span:nth-child(9) { --dust-delay: -2.1s; --dust-duration: 12.2s; --dust-size: 3px; --dust-x: 84%; --dust-y: 34%; }
.hero-dust span:nth-child(10) { --dust-delay: -9.2s; --dust-duration: 13.6s; --dust-size: 5px; --dust-x: 28%; --dust-y: 63%; }
.hero-dust span:nth-child(11) { --dust-delay: -4.9s; --dust-duration: 10.8s; --dust-size: 4px; --dust-x: 38%; --dust-y: 70%; }
.hero-dust span:nth-child(12) { --dust-delay: -1.7s; --dust-duration: 9.6s; --dust-size: 6px; --dust-x: 49%; --dust-y: 61%; }
.hero-dust span:nth-child(13) { --dust-delay: -7.8s; --dust-duration: 12.8s; --dust-size: 3px; --dust-x: 58%; --dust-y: 75%; }
.hero-dust span:nth-child(14) { --dust-delay: -5.7s; --dust-duration: 11.4s; --dust-size: 5px; --dust-x: 67%; --dust-y: 66%; }
.hero-dust span:nth-child(15) { --dust-delay: -3.2s; --dust-duration: 10.5s; --dust-size: 4px; --dust-x: 73%; --dust-y: 78%; }
.hero-dust span:nth-child(16) { --dust-delay: -8.8s; --dust-duration: 13.2s; --dust-size: 6px; --dust-x: 82%; --dust-y: 58%; }

@keyframes hero-dust-float {
  0%,
  100% {
    opacity: 0.08;
    transform: translate3d(0, 0, 0) scale(0.76);
  }

  42% {
    opacity: 0.48;
  }

  70% {
    opacity: 0.2;
    transform: translate3d(0.85rem, var(--dust-drift), 0) scale(1.08);
  }
}

@keyframes hero-screen-breathe {
  0%,
  100% {
    opacity: 0.76;
    transform: scale(1.012);
  }

  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}

@keyframes hero-rays-drift {
  0%,
  100% {
    opacity: 0.42;
    transform: translate3d(-0.6%, 0, 0) scale(1.018);
  }

  48% {
    opacity: 0.7;
    transform: translate3d(0.65%, -0.35%, 0) scale(1.035);
  }
}

@keyframes hero-moon-shimmer {
  0%,
  100% {
    opacity: 0.2;
    transform: translate3d(calc(-50% - 0.2rem), 0.12rem, 0) scale(0.94);
  }

  52% {
    opacity: 0.62;
    transform: translate3d(calc(-50% + 0.24rem), -0.18rem, 0) scale(1.12);
  }
}

.hero-inner {
  isolation: isolate;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.86s var(--ease), transform 0.86s var(--ease);
  z-index: 3;
}

/* 専用イントロ中だけコピー一式を伏せ、開帳の光と同じリズムで本編へ渡す。 */
.js.intro-pending .hero-inner {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 1rem, 0);
}

.hero-inner::before {
  background: linear-gradient(90deg, rgba(7, 8, 11, 0.78), rgba(7, 8, 11, 0.62) 52%, rgba(7, 8, 11, 0.32) 82%, transparent);
  content: "";
  inset: -2.5rem;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.hero-eyebrow {
  margin-bottom: 1.4rem;
}

.hero h1 {
  overflow-wrap: normal;
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.98),
    0 4px 12px rgba(0, 0, 0, 0.95),
    0 0 28px rgba(0, 0, 0, 0.94),
    1px 0 2px rgba(0, 0, 0, 0.9),
    -1px 0 2px rgba(0, 0, 0, 0.9);
  word-break: keep-all;
}

.hero h1 > span {
  display: inline-block;
  white-space: nowrap;
}

.hero-lead {
  font-size: clamp(1rem, 1.55vw, 1.15rem);
  margin-top: 1.8rem;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.98), 0 4px 12px rgba(0, 0, 0, 0.95), 0 0 22px rgba(0, 0, 0, 0.94);
}

.hero-eyebrow {
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.98), 0 0 16px rgba(0, 0, 0, 0.96);
}

.hero-caption {
  bottom: 2rem;
  font-size: 0.64rem;
  left: clamp(1.25rem, 4vw, 3rem);
  letter-spacing: 0.22em;
  position: absolute;
  z-index: 2;
}