/*
 * 封筒の動き。再生開始からの時刻（ms）で一本の流れにする。
 *   0-800      封筒が着地し、宛名が浮かぶ（光が900-1800で横切る）
 *   1900-2500  封筒を裏返しながら下げる（表1900-2200、裏2200-2500）
 *   2550-3160  封蝋が割れ、フタが持ち上がって開く
 *   3100-3900  便箋を引き出す
 *   3900-4700  封筒を下へ落とし、便箋を本文の位置と大きさへ広げる
 *   4700-5100  背景を本文の背景へ切り替えて終わる
 * 動かすのはtransform・opacity・clip-pathだけにする。
 */

.intro[data-state='playing'] .intro__bg {
  animation: intro-bg-out 400ms 4700ms ease-out both;
}

.intro[data-state='playing'] .intro__stage {
  animation: intro-land 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.intro[data-state='playing'] .intro__address,
.intro[data-state='playing'] .intro__confidential {
  animation: intro-ink 700ms 300ms ease-out both;
}

.intro[data-state='playing'] .intro__front::before {
  animation: intro-sheen 900ms 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.intro[data-state='playing'] .intro__turn {
  animation: intro-shift 600ms 1900ms cubic-bezier(0.45, 0, 0.25, 1) both;
}

.intro[data-state='playing'] .intro__shadow {
  animation:
    intro-shadow-turn 600ms 1900ms cubic-bezier(0.45, 0, 0.55, 1) both,
    intro-fade-out 300ms 3900ms ease-in both;
}

.intro[data-state='playing'] .intro__front {
  animation: intro-front-turn 300ms 1900ms cubic-bezier(0.55, 0, 0.9, 0.5) both;
}

.intro[data-state='playing'] .intro__front::after {
  animation: intro-shade-in 300ms 1900ms ease-in both;
}

.intro[data-state='playing'] .intro__back {
  animation: intro-back-turn 300ms 2200ms cubic-bezier(0.1, 0.5, 0.45, 1) both;
}

.intro[data-state='playing'] .intro__back::after {
  animation: intro-shade-out 300ms 2200ms ease-out both;
}

.intro[data-state='playing'] .intro__seal-half--left {
  animation: intro-seal-left 300ms 2550ms cubic-bezier(0.4, 0, 0.6, 1) both;
}

.intro[data-state='playing'] .intro__seal-half--right {
  animation: intro-seal-right 300ms 2550ms cubic-bezier(0.4, 0, 0.6, 1) both;
}

.intro[data-state='playing'] .intro__flap {
  animation: intro-flap-lift 250ms 2650ms cubic-bezier(0.5, 0, 0.9, 0.6) both;
}

.intro[data-state='playing'] .intro__flap-open {
  animation: intro-flap-open 260ms 2900ms cubic-bezier(0.15, 0.55, 0.4, 1) both;
}

/* 区間ごとの緩急はキーフレーム側で指定する。 */
/* 便箋はフタが開く直前まで出さない。 */
.intro[data-state='playing'] .intro__letter {
  animation:
    intro-letter 1600ms 3100ms linear both,
    intro-reveal 1ms 2650ms both;
}

/* 封筒の袋と同じ速さで下端の隠しを下げ、袋に隠れていた部分から便箋を見せる。 */
.intro[data-state='playing'] .intro__rear,
.intro[data-state='playing'] .intro__pocket {
  animation: intro-envelope-away 650ms 3900ms cubic-bezier(0.45, 0, 0.8, 0.5) both;
}

.intro[data-state='playing'] .intro__letter-clip {
  animation: intro-clip-release 650ms 3900ms cubic-bezier(0.45, 0, 0.8, 0.5) both;
}

@keyframes intro-bg-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes intro-land {
  0% { opacity: 0; transform: translateY(-36px) rotate(-3deg) scale(0.94); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes intro-ink {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes intro-sheen {
  0% { opacity: 0; transform: translateX(-45%); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(45%); }
}

@keyframes intro-shift {
  from { transform: translateY(0); }
  to { transform: translateY(var(--env-shift)); }
}

@keyframes intro-shadow-turn {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.3); }
}

@keyframes intro-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes intro-front-turn {
  0% { opacity: 1; transform: perspective(1400px) rotateY(0deg); }
  99.9% { opacity: 1; }
  100% { opacity: 0; transform: perspective(1400px) rotateY(90deg); }
}

@keyframes intro-back-turn {
  0% { opacity: 0; transform: perspective(1400px) rotateY(-90deg); }
  0.1% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes intro-shade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes intro-shade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes intro-seal-left {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  30% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.94); }
  100% { opacity: 0; transform: translate(-22%, 10%) rotate(-18deg) scale(0.94); }
}

@keyframes intro-seal-right {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  30% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.94); }
  100% { opacity: 0; transform: translate(22%, 10%) rotate(18deg) scale(0.94); }
}

@keyframes intro-flap-lift {
  0% { opacity: 1; transform: perspective(900px) rotateX(0deg); }
  99.9% { opacity: 1; }
  100% { opacity: 0; transform: perspective(900px) rotateX(90deg); }
}

@keyframes intro-flap-open {
  0% { opacity: 0; transform: perspective(900px) rotateX(-90deg); }
  0.1% { opacity: 1; }
  100% { opacity: 1; transform: perspective(900px) rotateX(0deg); }
}

@keyframes intro-letter {
  0% {
    transform: translate(var(--letter-x), var(--letter-inside-y)) scale(var(--letter-scale));
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
  }
  50% {
    transform: translate(var(--letter-x), var(--letter-drawn-y)) scale(var(--letter-scale));
    animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
  }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes intro-envelope-away {
  from { transform: translateY(0); }
  to { transform: translateY(110vh); }
}

@keyframes intro-reveal {
  from { visibility: hidden; }
  to { visibility: visible; }
}

@keyframes intro-clip-release {
  from { clip-path: inset(-300vh -300vw 4px -300vw); }
  to { clip-path: inset(-300vh -300vw -110vh -300vw); }
}