/* イントロ、SVG罫線、reveal、装画環境演出の最終状態を定義する。 */
/* 毎フレーム動くCSSプロパティはtransformとopacityだけに限る。 */
.draw-stroke,
.hero__intro-line path {
  fill: none;
  stroke: var(--sepia);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.hero__intro-line path {
  stroke: var(--accent);
  stroke-width: 1.4;
}

.chapter-frame .draw-stroke {
  stroke-width: 0.8;
}

.seal .draw-stroke {
  stroke-width: 1.5;
}

[data-reveal],
[data-image-reveal-layer],
[data-image-reveal] picture,
[data-fragment-line],
[data-news-reveal] > * {
  opacity: 1;
  transform: none;
}

.hero-catch-char {
  display: inline-block;
}

html.js:not(.intro-complete) .hero__catch {
  opacity: 0;
  transform: translateY(12px);
}

.hero__window-light {
  opacity: 0.42;
}

.hero.is-ambient-active .hero__window-light {
  animation: hero-window-drift 16s var(--ease-drift) infinite;
}

.is-ambient-active .book-spread__depth {
  animation: illustration-depth 18s var(--ease-drift) infinite;
}

.is-ambient-active .aquarium-bubble {
  animation: aquarium-bubble-rise 10.8s var(--ease-drift) infinite;
}

.is-ambient-active .aquarium-bubble--two {
  animation-delay: -2.6s;
  animation-duration: 12.2s;
}

.is-ambient-active .aquarium-bubble--three {
  animation-delay: -5.1s;
  animation-duration: 11.6s;
}

.is-ambient-active .aquarium-bubble--four {
  animation-delay: -8s;
  animation-duration: 13.2s;
}

.is-ambient-active .moving-dust {
  animation: moving-dust-drift 13.6s var(--ease-drift) infinite;
}

.is-ambient-active .moving-dust--two {
  animation-delay: -4.4s;
  animation-duration: 14.8s;
}

.is-ambient-active .moving-dust--three {
  animation-delay: -9.1s;
  animation-duration: 15.6s;
}

.night-panorama.is-ambient-active .night-light {
  animation: night-breath 8.4s var(--ease-drift) infinite;
}

.night-panorama.is-ambient-active .night-star {
  animation: night-star-twinkle 5.8s var(--ease-drift) infinite;
}

.night-panorama.is-ambient-active .night-star--two {
  animation-delay: -2.1s;
  animation-duration: 7.1s;
}

.night-panorama.is-ambient-active .night-star--three {
  animation-delay: -4.2s;
  animation-duration: 6.6s;
}

.night-panorama.is-ambient-active .night-firefly {
  animation: night-firefly-drift 9.6s var(--ease-drift) infinite;
}

.profile-image.is-ambient-active .profile-light-band {
  animation: profile-light-breathe 9.8s var(--ease-drift) infinite;
}

.profile-image.is-ambient-active .profile-dust {
  animation: profile-dust-drift 8.8s var(--ease-drift) infinite;
}

.profile-image.is-ambient-active .profile-dust--two {
  animation-delay: -2.2s;
  animation-duration: 10.2s;
}

.profile-image.is-ambient-active .profile-dust--three {
  animation-delay: -5.4s;
  animation-duration: 9.4s;
}

.profile-image.is-ambient-active .profile-dust--four {
  animation-delay: -7.6s;
  animation-duration: 11.4s;
}


.book-opening-page__seal.is-stamped {
  opacity: 0.86;
  transform: scale(1) rotate(-2deg);
}

@keyframes aquarium-bubble-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(0, 12px, 0) scale(0.86);
  }

  18%, 72% {
    opacity: 0.34;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(2px, -46px, 0) scale(1);
  }
}

@keyframes moving-dust-drift {
  0%, 100% {
    opacity: 0.1;
    transform: translate3d(-5px, 4px, 0) scale(0.9);
  }

  48% {
    opacity: 0.3;
    transform: translate3d(6px, -7px, 0) scale(1);
  }
}

@keyframes night-breath {
  0%, 100% {
    opacity: 0.46;
    transform: translate(-50%, -50%) scale(0.98);
  }

  50% {
    opacity: 0.76;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes night-star-twinkle {
  0%, 100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.86);
  }

  48% {
    opacity: 0.76;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

@keyframes night-firefly-drift {
  0%, 100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) translate3d(-5px, 3px, 0) scale(0.88);
  }

  46% {
    opacity: 0.72;
    transform: translate(-50%, -50%) translate3d(7px, -8px, 0) scale(1.08);
  }

  72% {
    opacity: 0.38;
    transform: translate(-50%, -50%) translate3d(2px, -3px, 0) scale(0.96);
  }
}

@keyframes profile-light-breathe {
  0%, 100% {
    opacity: 0.58;
    transform: scale(0.99);
  }

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

@keyframes profile-dust-drift {
  0%, 100% {
    opacity: 0.16;
    transform: translate(-50%, -50%) translate3d(-2px, 3px, 0) scale(0.88);
  }

  52% {
    opacity: 0.7;
    transform: translate(-50%, -50%) translate3d(4px, -8px, 0) scale(1.08);
  }
}

@keyframes illustration-depth {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.026);
  }
}

@keyframes hero-window-drift {
  0%, 100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.54;
  }
}