/* open — 「Open me.」 */
.sc-open { background: #efe5cf; }
.sc-open .op-paper {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 252, 240, .55), rgba(255, 252, 240, 0) 60%),
    repeating-linear-gradient(8deg, rgba(90, 70, 40, .028) 0 2px, rgba(0, 0, 0, 0) 2px 7px);
}
.sc-open .it { opacity: 1; }
.sc-open .op-root { opacity: 0; pointer-events: none; }
.sc-open .op-fl { opacity: 0; pointer-events: none; cursor: grab; }
.sc-open .op-fl img { transition: scale .25s cubic-bezier(.3, 1.8, .5, 1), rotate .25s; }
.sc-open .op-fl:hover img { scale: 1.22; rotate: -9deg; }
.sc-open .op-b img { animation: op-flap var(--d, .7s) ease-in-out infinite alternate; }
@keyframes op-flap { from { transform: scaleX(1); } to { transform: scaleX(.38); } }
.sc-open .op-disco img { animation: op-swing 2.6s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes op-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.sc-open .op-glint {
  position: absolute; width: 22%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(closest-side, #fff 0 12%, rgba(255, 255, 255, 0) 14%),
    linear-gradient(#fff, #fff) center / 100% 6% no-repeat, linear-gradient(#fff, #fff) center / 6% 100% no-repeat;
  animation: op-glint 1.4s ease-in-out infinite; opacity: 0;
}
.sc-open .op-glint.g1 { left: 14%; top: 40%; }
.sc-open .op-glint.g2 { left: 62%; top: 52%; animation-delay: .45s; width: 16%; }
.sc-open .op-glint.g3 { left: 40%; top: 74%; animation-delay: .9s; width: 13%; }
@keyframes op-glint { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

.sc-open .op-head { z-index: 2; }
.sc-open .op-head img.shake { animation: op-shake .5s linear; }
@keyframes op-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(-2.2%, 1%) rotate(-3deg); } 30% { transform: translate(2%, -1.4%) rotate(3deg); }
  45% { transform: translate(-1.6%, .8%) rotate(-2deg); } 60% { transform: translate(1.2%, 0) rotate(1.6deg); } 80% { transform: translate(-.6%, 0) rotate(-.6deg); }
}
.sc-open .op-poke { position: absolute; left: 14%; top: 30%; width: 72%; height: 56%; border-radius: 45%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sc-open .op-shout { z-index: 3; overflow: visible; pointer-events: none; }
.sc-open .op-conf { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-size: var(--u); }
.sc-open .op-conf i { position: absolute; left: 50%; top: 50%; margin: -.3em 0 0 -.8em; opacity: 0; will-change: transform; }
.sc-open .op-fl { z-index: 4; }
.sc-open .op-cap { z-index: 5; transform-origin: 52% 17.4%; pointer-events: none; }
.sc-open .op-cap img { position: absolute; left: 0; top: 0; }
.sc-open .op-cap img.c0 { position: relative; }
.sc-open .op-cap img.c1 { opacity: 0; }

.sc-open .op-title { z-index: 6; width: auto; transform-origin: 0 0; color: #231a14; font: italic 500 1em/.84 var(--f-serif); letter-spacing: -.03em; pointer-events: none; white-space: nowrap; }
.sc-open .op-title span { display: block; }
.sc-open .op-title span + span { margin-left: .06em; }
.sc-open .op-arrow { z-index: 6; overflow: visible; pointer-events: none; }

.sc-open .op-fig { z-index: 7; width: calc(54 * var(--u)); color: #231a14; opacity: 0; pointer-events: none; padding: calc(2 * var(--u)) calc(2.2 * var(--u)); background: #fbf7ec; box-shadow: 3px 4px 0 rgba(60, 40, 20, .2); rotate: -1.2deg; }
.sc-open .op-fig::before { content: ''; position: absolute; left: 38%; top: calc(-1.6 * var(--u)); width: calc(12 * var(--u)); height: calc(3.6 * var(--u)); background: rgba(239, 227, 166, .85); rotate: -4deg; }
.sc-open .op-fig b { display: block; font: 800 calc(max(11px, 2.2 * var(--u)))/1 var(--f-sans); letter-spacing: .32em; }
.sc-open .op-fig hr { border: 0; height: 2px; background: #231a14; width: calc(13 * var(--u)); margin: calc(1.2 * var(--u)) 0 calc(.9 * var(--u)); }
.sc-open .op-fig i { display: block; font: italic 500 calc(max(11.5px, 2.1 * var(--u)))/1.3 var(--f-serif); color: #5b4a3c; }
.sc-open .op-fig p {
  margin: calc(1.4 * var(--u)) 0 0;
  font: italic 500 calc(max(11px, 2 * var(--u)))/1.4 var(--f-serif); color: #3d3026;
}

/* つつくと吐き出す */
.sc-open .op-spit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 5; pointer-events: none; font-size: var(--u); }
.sc-open .op-spit > * { position: absolute; left: -3.5em; top: -3em; width: 7em; height: auto; animation: op-spit 1.5s cubic-bezier(.15, .7, .3, 1) both; }
.sc-open .op-spit > i { width: 2em; height: 1em; left: -1em; top: -.5em; }
@keyframes op-spit {
  0% { transform: translate(0, 0) scale(.2) rotate(0deg); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1em), calc(var(--dy) * 1em + 14em)) scale(1) rotate(var(--r)); opacity: 0; }
}

/* 上の世界との境目にまたがる */
.scene-open .op-ov { position: absolute; pointer-events: none; }
.scene-open .op-ov.o1 { width: clamp(70px, 9vw, 130px); left: 12%; top: -9vh; rotate: -18deg; animation: op-flap .8s ease-in-out infinite alternate; }
.scene-open .op-ov.o2 { width: clamp(56px, 7vw, 100px); right: 9%; top: -4vh; rotate: 24deg; animation: op-flap .6s ease-in-out infinite alternate; }
.scene-open .op-ov.o3 { width: clamp(90px, 11vw, 170px); right: 24%; top: -11vh; rotate: 162deg; }