/* 첫 화면에서 상담자 고르기 (11-15 다시 짬, 움직임은 opening.js). 달, 고리, 정보 묻기 연출은 없앴다.
   시작하기 -> 첫 화면 글과 카드는 물러나고 루시안, 카산드라 두 장 -> 고르면 카드 위 초승달 문양이 밝아진 뒤 카드 낙하(question-card.js) */

/* 첫 화면 달: 아치 금색 원 자리에 달 한 장, 은은하게 숨 쉬는 빛 (opening.js placeMoon) */
.op-moon {position:absolute;left:0;top:0;width:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  filter:drop-shadow(0 0 6px rgba(244,227,180,.35));animation:op-moon 6s ease-in-out infinite}
.op-moon.on {opacity:1}
@keyframes op-moon {0%,100% {filter:drop-shadow(0 0 5px rgba(244,227,180,.3))} 50% {filter:drop-shadow(0 0 14px rgba(244,227,180,.55))}}

/* 시작하면 첫 화면 글, 카드, 버튼은 물러난다 (ARCANA 글씨는 남는다) */
body.op-on .hero-copy,body.op-on .hero-caption,body.op-on .scene-enter,body.op-on .hero-ground {opacity:0!important;pointer-events:none;transition:opacity .5s ease}
body.op-on .hero-rig {opacity:0;transform:translate3d(-50%,calc(-50% + 40px),0) scale(.9)!important;transition:opacity .6s ease,transform .8s cubic-bezier(.4,0,.2,1)}
body.op-on #intro {overflow:hidden}

/* 상담자 고르기: 왼쪽 루시안, 오른쪽 카산드라 */
.op-choose {position:absolute;z-index:6;left:0;top:0;width:0;height:0;opacity:0;pointer-events:none;transition:opacity .6s ease}
.op-choose.on {opacity:1;pointer-events:auto}
.op-choose h2 {position:absolute;left:50%;top:0;width:100vw;max-width:100%;transform:translate(-50%,-100%);margin:0;text-align:center;white-space:nowrap;
  font:400 var(--op-q,20px)/1.4 var(--display,serif);color:var(--txt,#ece6d9)}
.op-reader {position:absolute;top:0;padding:0;border:0;background:none;cursor:pointer;color:inherit;text-align:center;
  opacity:0;transform:translateY(14px) scale(.96);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .4s}
.op-choose.on .op-reader {opacity:1;transform:none}
.op-choose.on .op-reader.r {transition-delay:.12s}
.op-reader img {display:block;width:100%;border-radius:4%/2.6%;box-shadow:0 10px 30px #000a,0 0 0 1px #c9a96a33}
.op-reader:hover img,.op-reader:focus-visible img {box-shadow:0 10px 34px #000b,0 0 0 1px #e7cf98aa,0 0 26px #e7cf9840}
.op-reader:focus-visible {outline:0}
.op-reader b {display:block;margin-top:.75em;font:400 calc(var(--op-q,20px) * .95)/1.3 var(--display,serif);color:var(--txt,#ece6d9)}
.op-reader small {display:block;margin-top:.3em;font:max(11px,calc(var(--op-q,20px) * .6))/1.4 var(--serif,serif);color:#c9b48c;white-space:nowrap}
.op-choose.picked .op-reader:not(.pick) {opacity:.25;filter:saturate(.4)}
/* 고르면 카드 위 초승달 문양이 잠깐 밝아진다 */
.op-reader i.glow {position:absolute;left:50%;top:2.2%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(#fff4d0 0,#f1d58fcc 22%,#e7c37e44 48%,transparent 70%);opacity:0;mix-blend-mode:screen}
.op-reader.lit i.glow {animation:op-glow 1.1s ease-out 1}
@keyframes op-glow {0% {opacity:0;transform:translate(-50%,-50%) scale(.4)} 30% {opacity:1;transform:translate(-50%,-50%) scale(1.3)} 100% {opacity:0;transform:translate(-50%,-50%) scale(2.2)}}

@media (prefers-reduced-motion:reduce) {
  .op-choose,.op-reader,.op-moon {transition:none!important}
  .op-moon {animation:none}
}