/* R24開幕、章タイポ、R15写真開帳、R34環境光の動作状態を担当する。 */
/* 毎フレーム変化するのはtransformとopacityだけに限定する。 */

.theme-backdrop {
  transition: opacity 1.05s var(--ease-light);
}

[data-hero-line],
.chapter-char,
.contact-char {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
}

@keyframes button-shine-sweep {
  from {
    opacity: 0;
    transform: translate3d(-94%, 16%, 0) rotate(-9deg) scale(1.14, 0.68);
    animation-timing-function: cubic-bezier(.2, .72, .26, 1);
  }

  29% {
    opacity: 0.32;
    transform: translate3d(-14%, 2%, 0) rotate(-6deg) scale(1.08, 0.72);
    animation-timing-function: cubic-bezier(.32, 0, .3, 1);
  }

  39% {
    opacity: 0.4;
    transform: translate3d(3%, -2%, 0) rotate(-5deg) scale(1.05, 0.76);
    animation-timing-function: cubic-bezier(.18, .58, .3, 1);
  }

  52% {
    opacity: 0.24;
    transform: translate3d(24%, -7%, 0) rotate(-4deg) scale(1.03, 0.79);
    animation-timing-function: cubic-bezier(.2, .7, .28, 1);
  }

  to {
    opacity: 0;
    transform: translate3d(96%, -18%, 0) rotate(-2deg) scale(1, 0.84);
  }
}

@keyframes button-glow-pulse {
  from {
    opacity: 0;
    transform: translate3d(-8%, 8%, 0) rotate(-8deg) scale(0.74, 0.64);
    animation-timing-function: cubic-bezier(.2, .72, .26, 1);
  }

  31% {
    opacity: 0.28;
    transform: translate3d(5%, -2%, 0) rotate(-6deg) scale(0.96, 0.82);
    animation-timing-function: cubic-bezier(.32, 0, .3, 1);
  }

  41% {
    opacity: 0.32;
    transform: translate3d(10%, -5%, 0) rotate(-5deg) scale(1.02, 0.88);
    animation-timing-function: cubic-bezier(.18, .58, .3, 1);
  }

  58% {
    opacity: 0.18;
    transform: translate3d(15%, -8%, 0) rotate(-4deg) scale(1.07, 0.92);
    animation-timing-function: cubic-bezier(.2, .7, .28, 1);
  }

  to {
    opacity: 0;
    transform: translate3d(23%, -13%, 0) rotate(-3deg) scale(1.12, 0.98);
  }
}

@keyframes menu-card-shine-sweep {
  from {
    opacity: 0;
    transform: translate3d(-92%, 0, 0) scale(1.08);
  }

  28% {
    opacity: 0.48;
  }

  72% {
    opacity: 0.32;
  }

  to {
    opacity: 0;
    transform: translate3d(92%, 0, 0) scale(1.08);
  }
}

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

.ambient-light,
.hero-bokeh,
.chapter-sun-pool,
.chapter-leaf-shadow,
.chapter-night-bokeh,
.night-lamp-glow,
.darkroom-red-wash,
.gallery-light-pass,
.section-light-pass,
.contact-leaf-shadow,
.contact-bokeh-field i {
  transform: translate3d(0, 0, 0) scale(1.02);
  transform-origin: center;
}

.motion-ok .ambient-light.is-active {
  animation: komorebi-drift 15s var(--ease-light) infinite alternate;
}

.motion-ok .hero-bokeh.is-active {
  animation: bokeh-drift 10s ease-in-out infinite alternate;
}

.motion-ok .night-lamp-glow.is-active {
  animation: lamp-breathe 7.5s ease-in-out infinite alternate;
}

.motion-ok .darkroom-red-wash.is-active {
  animation: redlight-breathe 8s ease-in-out infinite alternate;
}

.photo-window img {
  transform-origin: center;
}

.photo-soft {
  transition: opacity 1.18s ease-in-out;
}

.motion-ok .chapter-lighting.is-active .chapter-sun-pool--one {
  animation: sun-pool-drift-one 11s ease-in-out infinite alternate;
}

.motion-ok .chapter-lighting.is-active .chapter-sun-pool--two {
  animation: sun-pool-drift-two 13s ease-in-out -4s infinite alternate;
}

.motion-ok .chapter-lighting.is-active .chapter-leaf-shadow {
  animation: leaf-shadow-sway 12s ease-in-out -3s infinite alternate;
}

.motion-ok .chapter-lighting.is-active .chapter-night-bokeh {
  animation: large-bokeh-breathe 10.5s ease-in-out -2s infinite alternate;
}

.motion-ok .chapter-gallery.is-active .gallery-light-pass {
  animation: gallery-light-cross 38s linear -8s infinite;
}

.motion-ok .section-light-pass.is-active {
  animation: furniture-light-cross 42s linear -11s infinite;
}

.motion-ok .section-light-pass--flow.is-active {
  animation-direction: reverse;
  animation-delay: -16s;
}

.motion-ok .contact-leaf-shadow.is-active {
  animation: contact-leaf-sway 19s ease-in-out -6s infinite alternate;
}

.motion-ok .contact-bokeh-field.is-active i {
  animation: contact-bokeh-drift-one 16s ease-in-out -4s infinite alternate;
}

.motion-ok .contact-bokeh-field.is-active i:nth-child(2) {
  animation: contact-bokeh-drift-two 20s ease-in-out -9s infinite alternate;
}

@keyframes komorebi-drift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) scale(1.06);
  }

  52% {
    transform: translate3d(1.2%, 0.8%, 0) scale(1.035);
  }

  100% {
    transform: translate3d(-0.4%, 1.4%, 0) scale(1.055);
  }
}

@keyframes bokeh-drift {
  0% {
    opacity: 0.34;
    transform: translate3d(-1.5%, 1%, 0) scale(1.03);
  }

  100% {
    opacity: 0.58;
    transform: translate3d(2%, -1.5%, 0) scale(1.08);
  }
}

@keyframes sun-pool-drift-one {
  0% {
    opacity: 0.3;
    transform: translate3d(-3.2%, 2.4%, 0) scale(1.01);
  }

  100% {
    opacity: 0.52;
    transform: translate3d(4.4%, -3.2%, 0) scale(1.085);
  }
}

@keyframes sun-pool-drift-two {
  0% {
    opacity: 0.24;
    transform: translate3d(3.8%, -3%, 0) scale(1.075);
  }

  100% {
    opacity: 0.44;
    transform: translate3d(-4.2%, 3.4%, 0) scale(1.01);
  }
}

@keyframes leaf-shadow-sway {
  0% {
    opacity: 0.18;
    transform: translate3d(-2.8%, -2%, 0) rotate(-0.6deg) scale(1.01);
  }

  100% {
    opacity: 0.33;
    transform: translate3d(3.6%, 2.6%, 0) rotate(0.7deg) scale(1.06);
  }
}

@keyframes large-bokeh-breathe {
  0% {
    opacity: 0.36;
    transform: translate3d(-3.2%, 2.6%, 0) scale(0.97);
  }

  100% {
    opacity: 0.62;
    transform: translate3d(4.2%, -3.2%, 0) scale(1.1);
  }
}

@keyframes gallery-light-cross {
  0%, 8% {
    opacity: 0;
    transform: translate3d(-150%, 0, 0) scale(1.04);
  }

  24% {
    opacity: 0.1;
  }

  58% {
    opacity: 0.16;
  }

  88%, 100% {
    opacity: 0;
    transform: translate3d(320%, -2%, 0) scale(1.12);
  }
}

@keyframes furniture-light-cross {
  0%, 9% {
    opacity: 0;
    transform: translate3d(-150%, 0, 0) scale(1.04);
  }

  26% {
    opacity: 0.13;
  }

  62% {
    opacity: 0.21;
  }

  90%, 100% {
    opacity: 0;
    transform: translate3d(330%, -1.5%, 0) scale(1.1);
  }
}

@keyframes lamp-breathe {
  0% {
    opacity: 0.44;
    transform: translate3d(-1.4%, 1.2%, 0) scale(0.94);
  }

  100% {
    opacity: 0.76;
    transform: translate3d(1.8%, -1.6%, 0) scale(1.1);
  }
}

@keyframes redlight-breathe {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }

  100% {
    opacity: 0.62;
    transform: scale(1.025);
  }
}

@keyframes contact-leaf-sway {
  0% {
    opacity: 0.08;
    transform: translate3d(-0.6%, 0, 0) rotate(-0.25deg) scale(1.01);
  }

  100% {
    opacity: 0.15;
    transform: translate3d(0.8%, -0.6%, 0) rotate(0.3deg) scale(1.035);
  }
}

@keyframes contact-bokeh-drift-one {
  0% {
    opacity: 0.24;
    transform: translate3d(-2%, 1.2%, 0) scale(0.98);
  }

  100% {
    opacity: 0.43;
    transform: translate3d(2.4%, -1.8%, 0) scale(1.06);
  }
}

@keyframes contact-bokeh-drift-two {
  0% {
    opacity: 0.18;
    transform: translate3d(2%, -1%, 0) rotate(180deg) scale(0.9);
  }

  100% {
    opacity: 0.36;
    transform: translate3d(-2.2%, 1.5%, 0) rotate(180deg) scale(0.98);
  }
}