/* =========================================================
   tarot-ritual.css
   🎴 AI 타로 리딩 "의식(Ritual)" 풀스크린 오버레이
   - 리딩 시작 애니메이션 → 로딩(AI 분석) → 결과 공개 클라이맥스
   - js/tarot-ritual.js 에서 생성/제어하는 마크업에 대응
   ========================================================= */

.tarot-ritual-overlay{
  position:fixed; inset:0; z-index:3000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:var(--bg-deep);
  opacity:0; animation:trOverlayIn .5s ease forwards;
}
.tarot-ritual-overlay.tr-leaving{ animation:trOverlayOut .4s ease forwards; }
@keyframes trOverlayIn{ from{opacity:0;} to{opacity:1;} }
@keyframes trOverlayOut{ from{opacity:1;} to{opacity:0;} }

/* ---------- 배경 (항상 살아있는 우주 배경) ---------- */
.tr-bg{
  position:absolute; inset:-10%; z-index:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(123,79,209,0.28), transparent 55%),
    radial-gradient(circle at 78% 75%, rgba(224,179,86,0.16), transparent 55%),
    linear-gradient(165deg, #05040f 0%, #0d0b26 45%, #221548 100%);
  animation:trBgBreathe 10s ease-in-out infinite;
}
@keyframes trBgBreathe{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.12); }
}
.tr-mist{
  position:absolute; inset:-15%; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 28% at 25% 100%, rgba(255,255,255,0.05), transparent 70%),
    radial-gradient(ellipse 50% 24% at 80% 92%, rgba(255,255,255,0.04), transparent 70%);
  animation:trMistDrift 14s ease-in-out infinite alternate;
}
@keyframes trMistDrift{ 0%{ transform:translateX(-3%) translateY(0); } 100%{ transform:translateX(3%) translateY(-2%); } }

.tr-stars{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.tr-stars i{ position:absolute; color:var(--gold-light); animation:trStarTwinkle 3s ease-in-out infinite; }
@keyframes trStarTwinkle{ 0%,100%{ opacity:0.25; transform:scale(0.8); } 50%{ opacity:1; transform:scale(1.25); } }

.tr-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.tr-particles span{
  position:absolute; bottom:-8%; display:block; border-radius:50%;
  background:var(--gold-light); opacity:0.65; box-shadow:0 0 8px currentColor;
  animation:trParticleRise linear infinite;
}
@keyframes trParticleRise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  12%{ opacity:0.8; }
  88%{ opacity:0.4; }
  100%{ transform:translateY(-112vh) translateX(var(--drift,10px)); opacity:0; }
}

/* ---------- 공용 스테이지 컨테이너 ---------- */
.tr-stage{
  position:relative; z-index:2; width:100%; max-width:420px; padding:0 24px;
  display:none; flex-direction:column; align-items:center; text-align:center;
}
.tr-stage.tr-active{ display:flex; }

.tr-topbar{
  position:absolute; top:18px; right:20px; z-index:5;
}
.tr-skip-btn{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  color:var(--text-muted); font-size:0.72rem; padding:7px 14px; border-radius:999px;
  cursor:pointer; font-family:var(--font-body);
}
.tr-skip-btn:hover{ background:rgba(255,255,255,0.14); }

/* =========================================================
   STAGE 1 — 리딩 시작 (카드 상승 + 마법진)
   ========================================================= */
.tr-magic-circle{
  position:relative; width:220px; height:220px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:26px;
}
.tr-magic-circle .tr-ring{ position:absolute; border-radius:50%; }
.tr-magic-circle .r1{ inset:0; border:1px solid rgba(224,179,86,0.4); animation:trSpin 9s linear infinite; }
.tr-magic-circle .r2{ inset:20px; border:1px dashed rgba(169,124,240,0.4); animation:trSpin 7s linear infinite reverse; }
.tr-magic-circle .r3{ inset:40px; border:1px solid rgba(224,179,86,0.25); animation:trSpin 5s linear infinite; }
@keyframes trSpin{ to{ transform:rotate(360deg); } }

.tr-rise-card{
  position:relative; width:118px; aspect-ratio:2/3; border-radius:10px;
  background:linear-gradient(155deg, var(--surface-2), var(--purple-deep));
  border:2px solid var(--gold);
  box-shadow:0 0 0 rgba(224,179,86,0);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(60px) scale(0.7) rotate(-6deg);
  animation:trCardRise 2.3s cubic-bezier(.2,.75,.25,1) forwards;
}
.tr-rise-card i{ font-size:2rem; color:var(--gold-light); filter:drop-shadow(0 0 14px rgba(224,179,86,0.7)); animation:trCorePulse 1.6s ease-in-out infinite; }
@keyframes trCardRise{
  0%{ opacity:0; transform:translateY(70px) scale(0.6) rotate(-8deg); box-shadow:0 0 0 rgba(224,179,86,0); }
  55%{ opacity:1; transform:translateY(-6px) scale(1.05) rotate(4deg); box-shadow:0 0 40px rgba(224,179,86,0.5); }
  80%{ transform:translateY(0) scale(0.98) rotate(-2deg); }
  100%{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); box-shadow:0 0 34px rgba(224,179,86,0.45); }
}
@keyframes trCorePulse{ 0%,100%{ transform:scale(0.9); opacity:0.85; } 50%{ transform:scale(1.15); opacity:1; } }

.tr-rise-label{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.05rem;
  color:var(--gold-light); opacity:0.9; letter-spacing:0.02em; margin-top:6px;
  animation:trFadePulse 2s ease-in-out infinite;
}
@keyframes trFadePulse{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }

/* =========================================================
   STAGE 2 — 로딩 (AI 분석 중, 살아있는 화면)
   ========================================================= */
.tr-loading-orb{
  position:relative; width:150px; height:150px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px;
}
.tr-loading-orb .tr-ring{ position:absolute; border-radius:50%; border:1.5px solid transparent; }
.tr-loading-orb .r1{ inset:0; border-top-color:var(--gold); border-right-color:rgba(224,179,86,0.25); animation:trSpin 2.2s linear infinite; }
.tr-loading-orb .r2{ inset:18px; border-bottom-color:var(--purple-light); border-left-color:rgba(169,124,240,0.25); animation:trSpin 1.6s linear infinite reverse; }
.tr-loading-orb .r3{ inset:36px; border:1px dashed rgba(224,179,86,0.4); animation:trSpin 4s linear infinite; }
.tr-loading-core{ font-size:1.9rem; color:var(--gold-light); animation:trHeartbeat 1.5s ease-in-out infinite; filter:drop-shadow(0 0 16px rgba(224,179,86,0.75)); }
@keyframes trHeartbeat{ 0%,100%{ transform:scale(0.88); opacity:0.8; } 45%{ transform:scale(1.18); opacity:1; } 60%{ transform:scale(1.02); } }

.tr-loading-msg{
  font-family:'Gowun Batang', serif; font-size:0.98rem; color:var(--text-main);
  min-height:2.6em; line-height:1.5; transition:opacity .25s ease; padding:0 8px;
}
.tr-loading-bar{
  width:220px; height:3px; border-radius:999px; background:rgba(255,255,255,0.08);
  margin-top:20px; overflow:hidden;
}
.tr-loading-bar span{
  display:block; height:100%; width:0%; background:var(--gradient-gold);
  transition:width .3s linear;
}
.tr-loading-hint{
  margin-top:16px; font-size:0.68rem; color:var(--text-faint); letter-spacing:0.14em; text-transform:uppercase;
  animation:trFadePulse 2.4s ease-in-out infinite;
}

/* =========================================================
   STAGE 3 — 결과 공개 (가장 화려한 순간)
   ========================================================= */
.tr-stage-reveal{ max-width:440px; }

.tr-flash{
  position:fixed; inset:0; z-index:10; pointer-events:none;
  background:radial-gradient(circle at 50% 42%, rgba(255,255,255,0.95), rgba(224,179,86,0.5) 40%, transparent 72%);
  opacity:0;
}
.tr-flash.tr-flash-go{ animation:trFlashPop .8s ease-out forwards; }
@keyframes trFlashPop{
  0%{ opacity:0; }
  25%{ opacity:1; }
  100%{ opacity:0; }
}

.tr-stage-reveal.tr-darken::before{
  content:''; position:fixed; inset:0; z-index:3; background:#000; opacity:0;
  animation:trDarkenIn .32s ease forwards;
  pointer-events:none;
}
@keyframes trDarkenIn{ from{ opacity:0; } to{ opacity:0.55; } }

.tr-converge{
  position:absolute; top:50%; left:50%; width:6px; height:6px; z-index:4;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, #fff, var(--gold-light) 40%, transparent 75%);
  opacity:0; pointer-events:none;
}
.tr-converge.tr-converge-go{ animation:trConvergeGrow .55s ease-out forwards; }
@keyframes trConvergeGrow{
  0%{ opacity:0; width:6px; height:6px; box-shadow:0 0 0 rgba(224,179,86,0); }
  60%{ opacity:1; width:60px; height:60px; box-shadow:0 0 60px rgba(224,179,86,0.8); }
  100%{ opacity:0; width:140px; height:140px; box-shadow:0 0 100px rgba(224,179,86,0.4); }
}

.tr-hero-card-wrap{
  position:relative; width:200px; margin:0 auto 22px; perspective:900px;
}
.tr-hero-halo{
  position:absolute; inset:-40px; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(224,179,86,0.35), transparent 70%);
  opacity:0; animation:trHaloPulse 3.2s ease-in-out infinite;
}
@keyframes trHaloPulse{ 0%,100%{ opacity:0.35; transform:scale(0.95); } 50%{ opacity:0.65; transform:scale(1.08); } }

.tr-hero-card{
  position:relative; width:200px; aspect-ratio:2/3; margin:0 auto;
  transform-style:preserve-3d; opacity:0;
  transform:scale(0.2) rotate(-25deg);
}
.tr-hero-card.tr-enter{ animation:trHeroEnter 0.9s cubic-bezier(.18,.8,.24,1.15) forwards; }
@keyframes trHeroEnter{
  0%{ opacity:0; transform:scale(0.15) rotate(-30deg); }
  55%{ opacity:1; transform:scale(1.12) rotate(6deg); }
  75%{ transform:scale(0.94) rotate(-3deg); }
  90%{ transform:scale(1.03) rotate(1deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}
.tr-hero-card.tr-flip .tr-hero-inner{ transform:rotateY(180deg); }
.tr-hero-inner{
  position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.3,.7,.3,1);
  transform-style:preserve-3d;
}
.tr-hero-face{
  position:absolute; inset:0; border-radius:10px; backface-visibility:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.55);
}
.tr-hero-back{
  background:linear-gradient(155deg, var(--surface-2), var(--purple-deep));
  border:2px solid var(--gold);
}
.tr-hero-back i{ font-size:2.4rem; color:var(--gold-light); filter:drop-shadow(0 0 16px rgba(224,179,86,0.7)); }
.tr-hero-front{
  background-size:cover; background-position:center;
  border:2px solid var(--gold);
  transform:rotateY(180deg);
  flex-direction:column; justify-content:flex-end;
}
.tr-hero-roman{
  width:100%; text-align:center; font-family:'Cinzel', serif; font-size:0.68rem;
  letter-spacing:0.24em; color:var(--gold); text-transform:uppercase;
  background:rgba(13,11,38,0.9); padding:7px 4px; backdrop-filter:blur(8px);
}

.tr-result-panel{ width:100%; margin-top:6px; }
.tr-step{
  opacity:0; transform:translateY(14px);
  margin-bottom:16px;
  padding:14px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(224,179,86,0.18);
  border-radius:14px;
  text-align:left;
}
.tr-step.tr-step-in{ animation:trStepIn .55s cubic-bezier(.2,.8,.25,1.1) forwards; }
@keyframes trStepIn{
  0%{ opacity:0; transform:translateY(18px) scale(0.96); }
  60%{ opacity:1; transform:translateY(-2px) scale(1.01); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.tr-step-head{
  display:flex; align-items:center; gap:8px; margin-bottom:6px;
  font-family:'Cinzel', serif; font-size:0.66rem; letter-spacing:0.16em;
  color:var(--gold); text-transform:uppercase;
}
.tr-step-head i{ font-size:0.85rem; }
.tr-step-body{
  font-family:'Gowun Batang', serif; font-size:0.9rem; line-height:1.65; color:var(--text-main);
}
.tr-step.tr-step-title .tr-step-body{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.3rem; color:var(--gold-light);
}
.tr-step.tr-step-closing{
  text-align:center; background:rgba(224,179,86,0.06); border-color:rgba(224,179,86,0.35);
}
.tr-step.tr-step-closing .tr-step-body{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.05rem; color:var(--gold-light);
}

.tr-done-btn{
  display:none; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:6px; padding:13px 20px;
  background:var(--gradient-gold); color:#241606; border:none; border-radius:999px;
  font-family:'Cinzel', serif; font-size:0.76rem; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; box-shadow:var(--shadow-gold-glow); cursor:pointer;
}
.tr-done-btn.tr-show{ display:flex; animation:trStepIn .5s ease forwards; }
.tr-done-btn:hover{ transform:translateY(-2px); }

@media (max-width:360px){
  .tr-hero-card-wrap, .tr-hero-card{ width:170px; }
  .tr-magic-circle{ width:180px; height:180px; }
  .tr-rise-card{ width:100px; }
}