/*
 * 封筒の見た目。表に宛名・切手・消印・親展、裏に封蝋とフタ、中に便箋の複製を重ねる。
 * 動きはenvelope-motion.cssにまとめる。
 */

.intro {
  --env-paper: #fbf9f4;
  --env-paper-shade: #efebe2;
  --env-lining: #1f2c3d;
  /* スクリプトが実寸から上書きする。測れない場合の既定値。 */
  --env-shift: 120px;
  --letter-left: 0px;
  --letter-top: 0px;
  --letter-w: 100%;
  --letter-h: 100%;
  --letter-x: 0px;
  --letter-inside-y: 0px;
  --letter-drawn-y: -120px;
  --letter-scale: 0.9;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  isolation: isolate;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  color: var(--ink);
  font-family: var(--serif);
}

.is-intro .intro {
  display: grid;
}

.intro[hidden] {
  display: none;
}

.intro__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 85% at 50% 38%, #f8f7f3 0%, #f0eee9 52%, #e6e4de 100%);
}

/* 封筒を置く枠。画面の高さに対して封筒が大きくなりすぎないよう、高さからも幅を決める。 */
.intro__area {
  --env-ratio: 1.3;
  --env-w: min(calc(100vw - 32px), 580px, calc((100vh - 24px) * 0.58 * var(--env-ratio)));
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}

@supports (container-type: size) {
  .intro__area {
    container-type: size;
    --env-w: min(calc(100cqw - 32px), 580px, calc((100cqh - 24px) * 0.58 * var(--env-ratio)));
  }
}

/* 演出を始めるまで封筒は出さない（書体の読み込みを待つ間）。 */
.intro:not([data-state='playing']) .intro__stage {
  visibility: hidden;
}

.intro__stage {
  position: relative;
  width: var(--env-w);
  height: calc(var(--env-w) / var(--env-ratio));
}

.intro__turn,
.intro__front,
.intro__back,
.intro__rear,
.intro__pocket,
.intro__letter-clip {
  position: absolute;
  inset: 0;
}

.intro__shadow {
  position: absolute;
  right: 3%;
  bottom: -10%;
  left: 3%;
  height: 28%;
  background: radial-gradient(closest-side, rgba(30, 28, 24, 0.22), rgba(30, 28, 24, 0.07) 60%, rgba(30, 28, 24, 0));
}

/* 表 */
.intro__front {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(180deg, var(--env-paper), var(--env-paper-shade));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(60, 48, 24, 0.05),
    0 2px 4px rgba(30, 28, 24, 0.06),
    0 16px 32px -14px rgba(30, 28, 24, 0.3);
}

/* 表を照らす光。着地の後に一度だけ横切る。 */
.intro__front::before {
  position: absolute;
  inset: -10% -50%;
  content: '';
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  pointer-events: none;
}

/* 裏返すときの陰 */
.intro__front::after,
.intro__back::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 3px;
  content: '';
  background: linear-gradient(90deg, rgba(30, 28, 24, 0.02), rgba(30, 28, 24, 0.22));
  opacity: 0;
  pointer-events: none;
}

.intro__back::after {
  background: linear-gradient(270deg, rgba(30, 28, 24, 0.02), rgba(30, 28, 24, 0.22));
}

.intro__stamp {
  --stamp-w: calc(var(--env-w) * 0.085 + 10px);
  position: absolute;
  top: 8%;
  right: 5.5%;
  width: var(--stamp-w);
  height: calc(var(--stamp-w) * 1.2);
  padding: 3px;
  background: radial-gradient(circle, rgba(255, 253, 248, 0) 1.25px, #fffdf8 1.55px) -2px -2px / 4px 4px;
  filter: drop-shadow(0 0.5px 0.6px rgba(30, 28, 24, 0.32));
  transform: rotate(1.5deg);
}

.intro__stamp > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.intro__postmark {
  position: absolute;
  top: calc(8% + var(--env-w) * 0.03);
  right: calc(5.5% + var(--env-w) * 0.045);
  width: calc(var(--env-w) * 0.2 + 12px);
  color: #3a3a3a;
  opacity: 0.35;
  transform: rotate(-8deg);
}

.intro__address {
  position: relative;
  padding: 0 0.6em 0.25em;
  border-bottom: 1px solid var(--gold-line);
  color: var(--ink);
  font-size: min(calc(var(--env-w) * 0.07), 34px);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.5;
  white-space: nowrap;
}

.intro__address span {
  margin-left: 0.7em;
}

.intro__confidential {
  position: absolute;
  bottom: 9%;
  left: 6%;
  padding: 0.12em 0.3em 0.12em 0.5em;
  border: 1.5px solid var(--hanko);
  border-radius: 2px;
  color: var(--hanko);
  font-size: calc(var(--env-w) * 0.03 + 5px);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.3;
}

/* 裏：内側、開いたフタ、便箋、袋、閉じたフタ、封蝋の順に重ねる。 */
.intro__lining,
.intro__flap-open > span {
  background: linear-gradient(180deg, rgba(8, 12, 18, 0.45) 0%, rgba(8, 12, 18, 0) 55%), var(--env-lining);
}

.intro__lining {
  position: absolute;
  inset: 0;
  border-radius: 3px;
}

.intro__flap-open {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 58%;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background: linear-gradient(0deg, var(--env-paper-shade), var(--env-paper));
  transform-origin: 50% 100%;
}

.intro__flap-open > span {
  position: absolute;
  inset: 0;
  clip-path: polygon(2.5% 100%, 50% 4%, 97.5% 100%);
  background: linear-gradient(0deg, rgba(8, 12, 18, 0.4), rgba(8, 12, 18, 0) 70%), var(--env-lining);
}

/* 便箋の複製を入れる層。封筒の下端より下は隠し、上へは引き出せるようにする。
   下端は袋の縁のにじみから文字が漏れないよう、少し内側で切る。 */
.intro__letter-clip {
  clip-path: inset(-300vh -300vw 4px -300vw);
}

.intro__letter {
  position: absolute;
  top: var(--letter-top);
  left: var(--letter-left);
  width: var(--letter-w);
  height: var(--letter-h);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--letter-shadow);
  transform-origin: 50% 0;
  visibility: hidden;
}

.intro__letter > .letter {
  width: 100%;
  margin: 0;
  box-shadow: none;
}

.intro__pocket-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 1.5px rgba(30, 28, 24, 0.2));
}

.intro__sender {
  position: absolute;
  right: 0;
  bottom: 9%;
  left: 0;
  padding-left: 0.4em;
  color: var(--gold);
  font-size: calc(var(--env-w) * 0.026 + 4px);
  letter-spacing: 0.4em;
  line-height: 1;
  text-align: center;
}

.intro__flap {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 58%;
  filter: drop-shadow(0 1.5px 2px rgba(30, 28, 24, 0.2));
  transform-origin: 50% 0;
}

.intro__flap > span {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #fdfcf8 0%, var(--env-paper) 55%, var(--env-paper-shade) 100%);
}

.intro__seal {
  --seal-size: clamp(42px, calc(var(--env-w) * 0.14), 68px);
  position: absolute;
  top: 58%;
  left: 50%;
  width: var(--seal-size);
  height: var(--seal-size);
  margin: calc(var(--seal-size) * -0.56) 0 0 calc(var(--seal-size) * -0.5);
  filter: drop-shadow(0 2px 2.5px rgba(60, 16, 10, 0.32));
}

/* 封蝋。表の紋と同じ蓮を浮き彫りのように置く。 */
.intro__seal-half {
  position: absolute;
  inset: 0;
  border-radius: 47% 53% 51% 49% / 52% 47% 53% 48%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36' fill='none' stroke='rgba(70,14,10,0.6)' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 3c6 7 7.5 16.5 0 26.5C24.5 19.5 26 10 32 3Z'/%3E%3Cpath d='M30.2 29.5c-8-2.6-13.4-9.8-13.9-18.2 6.4 1.4 11.3 5.7 13.8 11.6'/%3E%3Cpath d='M33.8 29.5c8-2.6 13.4-9.8 13.9-18.2-6.4 1.4-11.3 5.7-13.8 11.6'/%3E%3Cpath d='M29 30.6c-8.8 1.2-17.4-1.2-23.4-6.6 7-2 14.4-.9 20.4 3.4'/%3E%3Cpath d='M35 30.6c8.8 1.2 17.4-1.2 23.4-6.6-7-2-14.4-.9-20.4 3.4'/%3E%3C/svg%3E") center 52% / 58% auto no-repeat,
    radial-gradient(circle at 34% 30%, #cf6f5f 0%, #a63c30 40%, #8a3027 72%, #6f251d 100%);
  box-shadow: inset 0 -2px 3px rgba(40, 8, 4, 0.35), inset 0 2px 2px rgba(255, 220, 210, 0.25);
}

.intro__seal-half::before {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  box-shadow: inset 0 1px 1.5px rgba(40, 8, 4, 0.45), 0 1px 0 rgba(255, 214, 204, 0.28);
  content: '';
}

/* 割れる前に継ぎ目の線が出ないよう、左半分を割れ目の先まで描いて右半分の下に重ねる。 */
.intro__seal-half--left { clip-path: polygon(0 0, 57% 0, 50% 36%, 58% 60%, 51% 100%, 0 100%); }
.intro__seal-half--right { clip-path: polygon(54% 0, 100% 0, 100% 100%, 48% 100%, 55% 60%, 47% 36%); }

@media (min-width: 640px) {
  .intro__area { --env-ratio: 1.55; }
}