/* 하트 일곱 개를 다 모은 순간 — 마법소녀 변신 문법 그대로.
   시간이 멈추고(어두워지고), 모은 하트가 떠올라 마법진을 돌고,
   빛기둥과 리본이 솟은 뒤, 섬광 속에서 소원권이 돌아 나온다.

   시간표(초): 0 암전 · 0.3 하트 부상 · 0.9 마법진 · 1.5 흡수
                1.75 빛기둥+리본 · 2.45 섬광 · 2.7 소원권 · 3.3 문구 · 4.3 퇴장 */

#ceremony {
  position: fixed;
  inset: 0;
  max-width: 430px;
  margin-inline: auto;
  z-index: 400;
  overflow: hidden;
  display: grid;
  /* 빛기둥·방사광은 화면보다 크다. minmax(0,1fr) 로 칸을 화면에 묶어 두지 않으면
     칸이 가장 큰 자식만큼 부풀어 모든 연출이 화면 밖으로 밀려난다. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  /* 밤빛 자두색 — 파스텔 빛이 밝게 읽히려면 바닥이 어두워야 한다 */
  background:
    radial-gradient(120% 78% at 50% 52%, #5A3568 0%, #38214A 42%, #241533 100%);
  animation: cmIn .42s ease both, cmOut .45s 4.3s ease both;
}
#ceremony > * { grid-area: 1 / 1; }

@keyframes cmIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmOut { to { opacity: 0; visibility: hidden; } }

/* ── 시간 정지: 뒤에서 도는 방사형 빛 ───── */

.cm-rays {
  width: 200vmax; height: 200vmax;
  /* 은은해야 한다. 굵고 진하면 파스텔 변신이 아니라 기합 넣는 장면이 된다. */
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 218, 240, .085) 0deg 3.2deg, transparent 3.2deg 16deg);
  filter: blur(2.5px);
  -webkit-mask: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 30%, transparent 56%);
          mask: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .5) 30%, transparent 56%);
  animation: cmSpin 26s linear infinite, cmFade .8s .15s ease both;
}
@keyframes cmSpin { to { transform: rotate(360deg); } }
@keyframes cmFade { from { opacity: 0; } to { opacity: 1; } }

/* ── 마법진 — 별과 달이 새겨진 두 겹, 서로 반대로 돈다 ── */

.cm-circle {
  width: 262px; height: 262px;
  filter: drop-shadow(0 0 12px rgba(255, 190, 226, .55));
  animation: cmCircleIn .7s .9s cubic-bezier(.2, 1.3, .4, 1) both,
             cmCircleOut .45s 1.85s ease-in both;
}
.cm-ring-a { transform-origin: 100px 100px; animation: cmSpin 9s linear infinite; }
.cm-ring-b { transform-origin: 100px 100px; animation: cmSpin 6s linear infinite reverse; }

@keyframes cmCircleIn {
  from { opacity: 0; transform: scale(.35) rotate(-40deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes cmCircleOut {
  to { opacity: 0; transform: scale(1.55); }
}

/* ── 모은 하트가 떠올라 궤도를 돈다 ─────── */

.cm-orbit {
  width: 0; height: 0;
  animation: cmOrbSpin 1.55s .3s cubic-bezier(.32, 0, .34, 1) both;
}
.cm-orbit-in {
  width: 0; height: 0; position: relative;
  animation: cmSuck .38s 1.5s cubic-bezier(.6, -.3, .8, .4) both;
}
@keyframes cmOrbSpin { from { transform: rotate(-70deg); } to { transform: rotate(215deg); } }
@keyframes cmSuck { to { transform: scale(.04); opacity: .2; } }

.cm-orbit i {
  position: absolute;
  left: -15px; top: -14px;
  width: 30px; height: 28px;
  transform: rotate(var(--a)) translateY(-88px) rotate(calc(-1 * var(--a)));
  animation: cmHeartUp .5s cubic-bezier(.2, 1.4, .4, 1) both;
  /* 어둠이 먼저 내려앉고 나서 하트가 올라와야 한다. 0 초에 같이 튀어나오면 급해 보인다. */
  animation-delay: calc(.3s + var(--d));
}
.cm-orbit svg { width: 100%; height: 100%; display: block; fill: url(#cmHeart);
  filter: drop-shadow(0 0 7px rgba(255, 150, 200, .9)); }

@keyframes cmHeartUp {
  from { opacity: 0; transform: rotate(var(--a)) translateY(-18px) rotate(calc(-1 * var(--a))) scale(.3); }
}

/* ── 빛기둥 ─────────────────────────────── */

.cm-pillar {
  width: 96px; height: 118vh;
  background: linear-gradient(to top,
    rgba(255, 179, 218, 0) 0%, rgba(255, 214, 238, .85) 18%,
    rgba(255, 255, 255, .95) 46%, rgba(201, 182, 255, .5) 76%, transparent 100%);
  filter: blur(9px);
  transform-origin: 50% 100%;
  animation: cmPillar 1.5s 1.75s cubic-bezier(.16, .9, .3, 1) both;
}
@keyframes cmPillar {
  0% { opacity: 0; transform: scaleY(0) scaleX(.3); }
  28% { opacity: 1; transform: scaleY(1) scaleX(1); }
  100% { opacity: 0; transform: scaleY(1) scaleX(2.1); }
}

/* ── 꽈배기 세 가닥이 갈라지며 감아 올라간다 ──
   상자에서 빛줄기가 부챗살처럼 갈라져 나오는 모양. 좌우 가닥은 조금 작고 흐리고
   조금 늦게 출발해서 가운데 가닥 뒤에 있는 것처럼 보인다. */

.cm-ribbons {
  position: relative;
  width: 230px; height: 108vh;
  filter: drop-shadow(0 0 8px rgba(255, 200, 232, .8));
  animation: cmRibbonOut .5s 2.55s ease-in both;
}
.cm-rb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform-origin: 50% 66%;   /* 빛이 갈라지는 점. 아래쪽이라 위로 갈수록 넓게 벌어진다 */
}
.cm-rb-c { --d: 1.78s; }
.cm-rb-l { --d: 1.90s; transform: rotate(-27deg) scale(.9); opacity: .58; }
.cm-rb-r { --d: 1.86s; transform: rotate(27deg) scale(.9); opacity: .58; }

.cm-rb path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: cmDraw 1.05s var(--d) cubic-bezier(.3, .7, .3, 1) both;
}
.cm-rb path:last-child { animation-delay: calc(var(--d) + .16s); }
@keyframes cmDraw { to { stroke-dashoffset: 0; } }
@keyframes cmRibbonOut { to { opacity: 0; transform: scale(1.3); } }

/* ── 섬광 ───────────────────────────────── */

.cm-flash {
  width: 100%; height: 100%;
  background: radial-gradient(closest-side, #FFFFFF 0%, #FFE9F5 42%, rgba(255, 233, 245, 0) 78%);
  animation: cmFlash .62s 2.42s ease-out both;
}
@keyframes cmFlash {
  0% { opacity: 0; transform: scale(.2); }
  22% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* ── 십자 반짝임 ────────────────────────── */

.cm-sparks { width: 320px; height: 400px; position: relative; }
.cm-sparks i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2);
  animation: cmSpark .95s var(--d) cubic-bezier(.2, 1, .3, 1) both;
}
.cm-sparks svg { width: 100%; height: 100%; display: block; fill: #FFF7FC;
  filter: drop-shadow(0 0 5px rgba(255, 182, 220, 1)); }
@keyframes cmSpark {
  0% { opacity: 0; transform: scale(0) rotate(-60deg); }
  35% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(.35) rotate(40deg); }
}

/* ── 소원권이 돌아 나온다 ───────────────── */

.cm-card {
  width: 100%;
  display: grid; place-items: center;
  perspective: 1100px;
  animation: cmCard 1s 2.62s cubic-bezier(.18, 1.05, .32, 1) both;
}
@keyframes cmCard {
  0% { opacity: 0; transform: rotateY(-105deg) scale(.7); }
  60% { opacity: 1; transform: rotateY(8deg) scale(1.04); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}

/* ── 문구 ───────────────────────────────── */

.cm-word {
  align-self: end;
  margin-bottom: calc(env(safe-area-inset-bottom) + 74px);
  font-size: 21px; font-weight: 800; letter-spacing: .01em;
  color: #FFF4FA;
  text-shadow: 0 0 18px rgba(255, 150, 205, .95), 0 2px 10px rgba(60, 30, 70, .6);
  animation: cmWord .7s 3.3s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes cmWord {
  from { opacity: 0; transform: translateY(14px) scale(.9); }
}

.cm-skip {
  align-self: end;
  margin-bottom: calc(env(safe-area-inset-bottom) + 30px);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  color: rgba(255, 233, 245, .5);
  animation: cmFade .5s 1.2s ease both;
}

/* 동작 줄이기 — 연출은 걷어내고 결과만 조용히 보여준다 */
@media (prefers-reduced-motion: reduce) {
  .cm-rays, .cm-circle, .cm-orbit, .cm-pillar, .cm-ribbons, .cm-sparks, .cm-flash { display: none; }
  #ceremony, .cm-card, .cm-word, .cm-skip { animation: none; }
}