/* 生成物（tools/build.mjs）。手で編集しない。中身は vendor/zukan/ の図鑑 verbatim スニペットをそのまま連結したもの */
:root {
  --mp-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --mp-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --mp-dur-s: 0.25s; --mp-dur-m: 0.7s; --mp-dur-l: 1.1s;
  --mp-stagger: 0.06s; --mp-dist: 28px;
}

/* ==== zukan 1-4 (heading) ==== */
.mp-heading .mp-heading-inner.mp-on-1-4 {
  transform: translateY(110%);
  opacity: 0;
  transition: transform var(--mp-dur-l) var(--mp-ease), opacity var(--mp-dur-l) var(--mp-ease);
  will-change: transform, opacity;
}
.mp-heading .mp-heading-inner.mp-on-1-4.mp-in-1-4 {
  transform: translateY(0);
  opacity: 1;
}

/* ==== zukan 2-14 (hero) ==== */
/* 2-14: 位置はJSのgsap.quickToで直接駆動するため、専用の静的CSSは不要(初期状態=通常表示のまま) */
[data-mp="hero"] .mp-hero-title,
[data-mp="hero"] .mp-hero-sub,
[data-mp="hero"] .mp-hero-visual {
  will-change: transform;
}

/* ==== zukan 3-1 (hero) ==== */
/* 3-1: CSSのみ。8〜20秒の緩やかな拡大+微パン。1回再生でforwards固定(呼吸を止めた状態で留める) */
[data-mp="hero"] .mp-hero-visual.mp-on-3-1 {
  animation: mpKf3_1 var(--mp-dur-3-1, 11s) linear forwards;
  transform-origin: 60% 40%;
  will-change: transform;
}
@keyframes mpKf3_1 {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.12) translate(-2%, 0); }
}

/* ==== zukan 2-34 (bodyReveal) ==== */
[data-mp="about"] .mp-body-block.mp-on-2-34 .mp-fillchar {
  color: rgba(28, 26, 23, 0.22);
  transition: color var(--mp-dur-s) linear;
}
[data-mp="about"] .mp-body-block.mp-on-2-34 .mp-fillchar.mp-filled {
  color: #1c1a17;
}

/* ==== zukan 1-20 (stats) ==== */
[data-mp="stats"] .mp-stat-value.mp-on-1-20 {
  display: inline-flex;
  align-items: baseline;
}
[data-mp="stats"] .mp-on-1-20 .mp-odometer-digit {
  position: relative;
  display: inline-block;
  height: 1em;
  width: 0.62em;
  overflow: hidden;
  vertical-align: bottom;
}
[data-mp="stats"] .mp-on-1-20 .mp-odometer-strip {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform var(--mp-dur-l) var(--mp-ease);
}
[data-mp="stats"] .mp-on-1-20 .mp-odometer-strip span {
  height: 1em;
  line-height: 1;
  display: block;
  text-align: center;
}
[data-mp="stats"] .mp-on-1-20 .mp-odometer-suffix {
  margin-left: 0.05em;
}

/* ==== zukan 8-49 (stats) ==== */
[data-mp="stats"] .mp-stat-bar.mp-on-8-49 {
  transform: scaleX(0);
  transition: transform var(--mp-dur-l) var(--mp-ease);
}
[data-mp="stats"] .mp-stat-value.mp-on-8-49 {
  opacity: 0;
  transition: opacity var(--mp-dur-m) var(--mp-ease-soft);
}
[data-mp="stats"] .mp-stat-bar.mp-on-8-49.mp-play {
  transform: scaleX(1);
}
[data-mp="stats"] .mp-stat-value.mp-on-8-49.mp-play {
  opacity: 1;
}

/* ==== zukan 5-24 (cardList) ==== */
[data-mp="cards"] .mp-card.mp-on-5-24 {
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(var(--mp-dist));
  transition: opacity var(--mp-dur-m) var(--mp-ease), transform var(--mp-dur-m) var(--mp-ease);
}
[data-mp="cards"] .mp-card.mp-on-5-24.mp-in {
  opacity: 1;
  transform: translateY(0);
}
[data-mp="cards"] .mp-card.mp-on-5-24::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at var(--mp-gx, 50%) var(--mp-gy, 50%),
      rgba(255, 246, 222, 0.85),
      rgba(255, 246, 222, 0.18) 30%,
      transparent 58%
    ),
    linear-gradient(
      var(--mp-ga, 0deg),
      rgba(255, 140, 210, 0.32),
      rgba(140, 190, 255, 0.32) 40%,
      rgba(255, 220, 120, 0.32) 80%
    );
  opacity: 0;
  transition: opacity var(--mp-dur-s) var(--mp-ease-soft);
  pointer-events: none;
}
@media (hover) {
  [data-mp="cards"] .mp-card.mp-on-5-24:hover::after { opacity: 1; }
}

/* ==== zukan 2-6 (image) ==== */
[data-mp="image"] .mp-image-frame .mp-image-art {
  transition: filter var(--mp-dur-l) var(--mp-ease);
}
[data-mp="image"] .mp-image-frame.mp-on-2-6 .mp-image-art {
  filter: blur(calc((var(--mp-dist) / 28px) * 12px));
}
[data-mp="image"] .mp-image-frame.mp-on-2-6.mp-in .mp-image-art {
  filter: blur(0);
}

/* ==== zukan 3-37 (image) ==== */
[data-mp="image"] .mp-image-frame { overflow: hidden; }
[data-mp="image"] .mp-image-frame .mp-image-art {
  transform: scale(1.18);
  will-change: transform;
}

/* ==== zukan 4-25 (loader) ==== */
/* 4-25: stroke-dashoffset を pathLength -> 0 へ。JS未実行時は通常のロゴとして表示される(dasharray未設定のため) */
#mp-loader .mp-loader-logo.mp-on-4-25 path {
  animation: mpKf4_25 var(--mp-dur-4-25, 1.1s) var(--mp-ease) forwards;
}
@keyframes mpKf4_25 {
  to { stroke-dashoffset: 0; }
}

/* ==== zukan 5-4 (cta) ==== */
[data-mp="cta"] .mp-cta-btn.mp-on-5-4 {
  will-change: transform;
}

/* ==== zukan 6-20 (cta) ==== */
[data-mp="cta"] .mp-cta-btn {
  position: relative;
  overflow: hidden;
}
[data-mp="cta"] .mp-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  border-radius: 50%;
  background: rgba(247, 246, 243, 0.55);
  pointer-events: none;
  transform: scale(0);
  opacity: 0.9;
  animation: mpKf6_20 var(--mp-dur-l) var(--mp-ease-soft) forwards;
}
@keyframes mpKf6_20 {
  to {
    transform: scale(18);
    opacity: 0;
  }
}

/* ==== zukan 8-1 (cta) ==== */
@media (hover) {
  [data-mp="cta"] .mp-cta-btn { isolation: isolate; }
  [data-mp="cta"] .mp-cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f7f6f3;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--mp-dur-m) var(--mp-ease);
    z-index: 0;
  }
  [data-mp="cta"] .mp-cta-btn:hover::before,
  [data-mp="cta"] .mp-cta-btn:focus-visible::before {
    transform: scaleX(1);
  }
  [data-mp="cta"] .mp-cta-label {
    position: relative;
    z-index: 1;
    transition: color var(--mp-dur-m) var(--mp-ease);
  }
  [data-mp="cta"] .mp-cta-btn:hover .mp-cta-label,
  [data-mp="cta"] .mp-cta-btn:focus-visible .mp-cta-label {
    color: #1c1a17;
  }
}

/* ==== zukan 8-5 (cta) ==== */
[data-mp="cta"] .mp-cta-btn {
  transition: transform var(--mp-dur-m) cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover) {
  [data-mp="cta"] .mp-cta-btn:hover {
    transform: scale(1.06);
  }
}
[data-mp="cta"] .mp-cta-btn:active {
  transform: scale(0.9);
  transition-duration: var(--mp-dur-s);
}

/* ==== zukan 8-9 (cta) ==== */
@media (hover) {
  [data-mp="cta"] .mp-cta-btn {
    position: relative;
    overflow: hidden;
  }
  [data-mp="cta"] .mp-cta-btn::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -30%;
    width: 40%;
    height: 220%;
    background: linear-gradient(90deg, rgba(247, 246, 243, 0) 0%, rgba(247, 246, 243, 0.75) 50%, rgba(247, 246, 243, 0) 100%);
    transform: skewX(-20deg) translateX(-160%);
    pointer-events: none;
  }
  [data-mp="cta"] .mp-cta-btn:hover::after {
    animation: mpKf8_9 var(--mp-dur-l) var(--mp-ease-soft);
  }
}
@keyframes mpKf8_9 {
  from {
    transform: skewX(-20deg) translateX(-160%);
  }
  to {
    transform: skewX(-20deg) translateX(260%);
  }
}

/* ==== zukan 1-28 (footer) ==== */
[data-mp="footer"] .mp-footer-marquee.mp-on-1-28 {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: mpKf1_28 linear infinite;
  animation-duration: calc(var(--mp-dur-l) * 40);
}
[data-mp="footer"] .mp-footer-marquee.mp-on-1-28 .mp-marquee-seg {
  display: inline-flex;
  padding-right: 2.5em;
}
@keyframes mpKf1_28 {
  to {
    transform: translateX(-50%);
  }
}

/* ==== zukan 2-3 (footer) ==== */
[data-mp="footer"].mp-on-2-3 {
  opacity: 0;
  transform: translateY(calc(var(--mp-dist) * 0.4));
  transition: opacity var(--mp-dur-l) var(--mp-ease), transform var(--mp-dur-l) var(--mp-ease);
}
[data-mp="footer"].mp-on-2-3.mp-play {
  opacity: 1;
  transform: translateY(0);
}

/* ==== zukan 9-20 (footer) ==== */
[data-mp="footer"] .mp-footer-logo {
  position: relative;
  display: inline-block;
}
[data-mp="footer"] .mp-confetti-piece {
  position: fixed;
  width: 6px;
  height: 10px;
  top: 0;
  left: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: mpKf9_20 var(--mp-dur-l) var(--mp-ease) forwards;
}
@keyframes mpKf9_20 {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    opacity: 0;
  }
}

/* ==== zukan 9-35 (footer) ==== */
[data-mp="footer"] .mp-footer-widget {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
[data-mp="footer"] .mp-clock-canvas {
  display: block;
}
[data-mp="footer"] .mp-moon-label {
  font-variant-numeric: tabular-nums;
}