/* Aura Tarot — hiệu ứng chuyển động & rút gọn chữ (file riêng, an toàn khi bỏ đi). Pair: js/tarot-fx.js */

/* ---------- Nền: quầng sáng trôi chậm ---------- */
.fx-orb{position:fixed;z-index:-1;width:46vmax;height:46vmax;border-radius:50%;pointer-events:none;filter:blur(70px);opacity:.28;will-change:transform}
.fx-orb.o1{left:-14vmax;top:-10vmax;background:radial-gradient(circle,rgba(139,92,246,.75),transparent 65%);animation:fxDriftA 32s ease-in-out infinite alternate}
.fx-orb.o2{right:-16vmax;bottom:-14vmax;background:radial-gradient(circle,rgba(212,175,55,.5),transparent 65%);animation:fxDriftB 38s ease-in-out infinite alternate}
@keyframes fxDriftA{to{transform:translate3d(14vmax,10vmax,0) scale(1.15)}}
@keyframes fxDriftB{to{transform:translate3d(-12vmax,-9vmax,0) scale(1.1)}}

/* ---------- Xuất hiện lần lượt khi cuộn tới ---------- */
.fx-reveal{opacity:0;transform:translateY(16px)}
.fx-reveal.fx-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:var(--fx-d,0ms)}

/* ---------- Thẻ chủ đề / kiểu trải bài / phương thức ---------- */
.topic-btn,.mode-card{will-change:transform}
.topic-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(139,92,246,.28)}
.topic-btn:active,.mode-card:active{transform:scale(.97)}
.topic-btn span{display:inline-block;transition:transform .3s}
.topic-btn:hover span{transform:scale(1.2) rotate(-6deg)}
.topic-btn.selected{animation:fxBreathe 3.6s ease-in-out infinite}
.topic-btn.selected span{animation:fxPop .5s cubic-bezier(.34,1.56,.64,1)}
.mode-card.selected{animation:fxBreatheGold 4s ease-in-out infinite}
.mode-card:hover{transform:translateY(-3px)}
@keyframes fxPop{0%{transform:scale(.5)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes fxBreathe{0%,100%{box-shadow:0 0 10px var(--primary-glow)}50%{box-shadow:0 0 16px var(--primary-glow)}}
@keyframes fxBreatheGold{0%,100%{box-shadow:0 0 10px var(--gold-glow)}50%{box-shadow:0 0 16px var(--gold-glow)}}

/* ---------- Mục 1: chủ đề dạng viên thuốc, xếp tự nhiên ---------- */
.topic-grid{display:flex!important;flex-wrap:wrap;justify-content:center;gap:10px}
.topic-btn{width:auto!important;flex:0 0 auto;white-space:nowrap;padding:9px 18px 9px 10px;border-radius:999px;gap:10px;text-align:left}
.topic-btn span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.07);font-size:18px;flex:0 0 auto}
.topic-btn.selected span{background:rgba(255,255,255,.18)}
.topic-btn.selected{background:linear-gradient(135deg,rgba(139,92,246,.55),rgba(109,40,217,.45));border-color:rgba(212,175,55,.6)}

/* ---------- Mục 2: kiểu trải bài — lưới đều, vùng xem trước nhất quán, trạng thái chọn tinh tế ---------- */
.spread-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:12px}
.spread-card{align-items:stretch;text-align:center;padding:12px 10px 14px;justify-content:flex-start;gap:10px;
 transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease}
.spread-card:hover{transform:none;border-color:rgba(212,175,55,.55);background:rgba(255,255,255,.04);box-shadow:none}
.spread-card:active{transform:none}
.spread-card:focus-visible{outline:2px solid #d4af37;outline-offset:2px}
.spread-card.selected{animation:none;border-color:#d4af37;background:linear-gradient(160deg,rgba(76,29,149,.38),rgba(30,27,75,.55));
 box-shadow:0 0 0 1px rgba(212,175,55,.4),0 4px 14px rgba(0,0,0,.35)}
.spread-card.selected::after{content:"✓";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:#d4af37;color:#1a1530;
 font:700 12px/20px inherit;font-family:inherit;text-align:center;pointer-events:none}
.spread-card .spread-desc{display:none}
.spread-card-header{flex-direction:column;align-items:center;gap:8px;margin:0}
.spread-card .spread-name{font-size:15px;line-height:1.3;margin:0;min-height:2.6em;display:flex;align-items:center;justify-content:center}
.spread-card .spread-badge{font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 10px;border:0;border-radius:999px;background:rgba(212,175,55,.12);color:#e6cf86}

/* Vùng xem trước: cùng chiều cao + cùng tỉ lệ lá bài cho cả 4 kiểu */
.fx-spread-mini{display:block;width:100%;height:116px;margin:0;padding:4px;box-sizing:border-box;border-radius:10px;
 background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.06);overflow:visible}
.fx-card{transform-box:fill-box;transform-origin:center;opacity:.78;transition:opacity .25s}
.fx-card-back{vector-effect:non-scaling-stroke;stroke:rgba(236,201,100,.95);stroke-width:1.2}
.fx-card.cross .fx-card-back{stroke:rgba(216,204,255,.95)}
.fx-card-frame{fill:none;stroke:rgba(236,201,100,.45);stroke-width:.5}
.fx-card-star{fill:#f3e6b3;opacity:.95}
.fx-card.cross .fx-card-star{fill:#fff}
.fx-halo{fill:rgba(167,139,250,.0);stroke:rgba(212,175,55,.0);stroke-width:.8;transform-box:fill-box;transform-origin:center}
.fx-spark{fill:#f3e6b3;opacity:0;transform-box:fill-box;transform-origin:center}
/* Chọn: các lá được "chia" ra từ giữa rồi lơ lửng nhẹ. Hover thẻ chưa chọn: chỉ lơ lửng. */
.spread-card.selected .fx-card{opacity:1;animation:fxDeal .65s cubic-bezier(.2,.9,.3,1.1) both,fxFloat 3.8s ease-in-out infinite alternate;
 animation-delay:calc(var(--i,0)*60ms),calc(.75s + var(--i,0)*140ms)}
.spread-card:not(.selected):hover .fx-card{opacity:.95;animation:fxFloat 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*90ms)}
/* Thẻ chưa chọn: trôi rất nhẹ liên tục (biên độ nhỏ, pha lệch từng thẻ) để cả hàng có sức sống; thẻ chọn vẫn nổi hơn nhờ chia bài + hào quang */
.spread-card:not(.selected) .fx-card{animation:fxIdle 5.5s ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*-.8s + var(--ph,0s))}
.spread-card:nth-child(2) .fx-card{--ph:-1.4s}
.spread-card:nth-child(3) .fx-card{--ph:-2.7s}
.spread-card:nth-child(4) .fx-card{--ph:-4.1s}
@keyframes fxIdle{from{transform:translateY(-.9px) rotate(-.6deg)}to{transform:translateY(.9px) rotate(.6deg)}}
.spread-card.selected .fx-spread-mini{filter:drop-shadow(0 0 3px rgba(212,175,55,.22))}
.spread-card.selected .fx-halo{stroke:rgba(212,175,55,.35);animation:fxHalo 3.4s ease-in-out infinite}
.spread-card.selected .fx-spark{animation:fxTwinkle 2.8s ease-in-out infinite}
@keyframes fxDeal{from{opacity:0;transform:translate(calc(var(--dx,0)*1px),calc(var(--dy,0)*1px)) rotate(-14deg) scale(.55)}to{opacity:1;transform:none}}
@keyframes fxFloat{from{transform:translateY(-1.6px) rotate(-1.2deg)}to{transform:translateY(1.6px) rotate(1.2deg)}}
@keyframes fxHalo{0%,100%{transform:scale(.9);opacity:.35}50%{transform:scale(1.08);opacity:1}}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.95;transform:scale(1)}}

/* Mô tả của lựa chọn hiện tại (một khung cố định chiều cao, không làm nhảy layout) */
.fx-spread-caption{margin:14px auto 0;max-width:620px;text-align:center;color:#d4cfee;font-size:14px;line-height:1.55;min-height:3.6em;
 display:flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;background:rgba(212,175,55,.05);border:1px solid rgba(212,175,55,.18);
 transition:opacity .22s ease}
.fx-spread-caption.swap{opacity:0}
.fx-spread-caption strong{color:#f3e6b3;font-weight:600}
@media(max-width:480px){.spread-card .spread-name{font-size:14px}}

/* ---------- Nút chính: ánh sáng quét + thở ---------- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
 background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-20deg);animation:fxSweep 4.8s ease-in-out infinite}
.btn-primary:disabled::after{animation:none;opacity:0}
#btn-start-ritual:not(:disabled){animation:fxBtnBreathe 3.2s ease-in-out infinite}
.btn-primary:hover{transform:translateY(-2px) scale(1.01)}
@keyframes fxSweep{0%,55%{left:-60%}100%{left:130%}}
@keyframes fxBtnBreathe{0%,100%{box-shadow:0 8px 24px rgba(139,92,246,.4)}50%{box-shadow:0 10px 36px rgba(139,92,246,.7),0 0 0 4px rgba(139,92,246,.12)}}

/* ---------- Gợi ý câu hỏi (chip) ---------- */
.fx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fx-chip{border:1px solid rgba(212,175,55,.4);background:rgba(212,175,55,.06);color:#f3e6b3;border-radius:999px;padding:8px 14px;min-height:36px;
 font:500 13px/1.3 inherit;font-family:inherit;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.fx-chip:hover{transform:translateY(-2px);background:rgba(212,175,55,.16);border-color:rgba(212,175,55,.8)}
.fx-chip:active{transform:scale(.96)}
.fx-chip:focus-visible,.fx-more-btn:focus-visible{outline:2px solid #d4af37;outline-offset:2px}
.fx-flash{animation:fxFlash .7s ease}
@keyframes fxFlash{0%{box-shadow:0 0 0 0 rgba(212,175,55,.8)}100%{box-shadow:0 0 0 12px rgba(212,175,55,0)}}

/* ---------- Mục không bắt buộc: gập lại ---------- */
.fx-more-btn{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:1px dashed rgba(167,139,250,.45);color:#d6ccff;
 border-radius:12px;padding:12px 16px;min-height:44px;font:500 14px/1.3 inherit;font-family:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.fx-more-btn:hover{background:rgba(139,92,246,.12);border-color:rgba(167,139,250,.8)}
.fx-more-btn .fx-chev{margin-left:auto;transition:transform .35s}
.fx-more-btn[aria-expanded="true"] .fx-chev{transform:rotate(180deg)}
.fx-more-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1)}
.fx-more-body.open{grid-template-rows:1fr}
.fx-more-inner{min-height:0;overflow:hidden;opacity:0;transition:opacity .4s ease .05s}
.fx-more-body.open .fx-more-inner{opacity:1}
.fx-more-inner>.form-group:first-child{margin-top:16px}

@media(max-width:640px){.fx-orb{filter:blur(35px);opacity:.22;animation-duration:45s!important}}
@media(prefers-reduced-motion:reduce){
 .fx-orb,.btn-primary::after,#btn-start-ritual,.topic-btn.selected,.mode-card.selected,.topic-btn.selected span,.fx-card,.fx-halo,.fx-spark{animation:none!important}.spread-card.selected .fx-spark{opacity:.8}
 .fx-reveal{opacity:1;transform:none}.fx-reveal.fx-in{transition:none}
 .fx-more-body,.fx-more-inner,.spread-card .spread-desc{transition:none}
}

/* ---------- Đọc được tốt hơn: placeholder, ghi chú riêng tư, lợi ích thẻ miễn phí ---------- */
.input-textarea::placeholder,.input-text::placeholder{color:rgba(200,196,230,.62);opacity:1}
.mode-privacy-note{font-size:12.5px!important;line-height:1.5;color:#b9b4d9!important}
.fx-benefits{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.fx-benefits li{font-size:13px;line-height:1.4;color:#a7e3d3}

/* === Nổi bật hơn cho hình bố cục (mục 2) === */
.fx-spread-mini{height:140px;padding:6px;border-radius:12px;border-color:rgba(167,139,250,.28);
 background:radial-gradient(ellipse at 50% 55%,rgba(139,92,246,.38),rgba(76,29,149,.14) 55%,rgba(10,8,25,.35) 100%);
 box-shadow:inset 0 0 18px rgba(139,92,246,.18);filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.fx-card{opacity:.94;filter:drop-shadow(0 0 2.5px rgba(236,201,100,.55))}
.fx-card-back{stroke:#f3d77a;stroke-width:1.5}
.fx-card.cross{filter:drop-shadow(0 0 3px rgba(190,170,255,.8))}
.fx-card.cross .fx-card-back{stroke:#e2d9ff}
.fx-card-frame{stroke:rgba(255,236,170,.7);stroke-width:.6}
.fx-card-star{filter:drop-shadow(0 0 1.5px #fff)}
.spread-card:not(.selected) .fx-spread-mini{filter:saturate(.9) drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.spread-card:hover .fx-spread-mini{border-color:rgba(212,175,55,.6)}
.spread-card.selected .fx-spread-mini{border-color:rgba(212,175,55,.85);
 background:radial-gradient(ellipse at 50% 55%,rgba(167,139,250,.55),rgba(91,33,182,.22) 55%,rgba(10,8,25,.3) 100%);
 filter:drop-shadow(0 0 10px rgba(212,175,55,.45)) drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.spread-card.selected .fx-card{filter:drop-shadow(0 0 4px rgba(255,226,140,.95))}
.spread-card.selected .fx-halo{stroke:rgba(255,226,140,.6);fill:rgba(167,139,250,.18)}

/* Gợn sóng hào quang bung từ tâm lá bài khi lật (một lần) */
.tarot-card-3d.flipped::before,.tarot-card-3d.flipped::after{content:"";position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  transform:translate(-50%,-50%) scale(.4);opacity:0;border:2px solid rgba(236,201,100,.85);box-shadow:0 0 28px 6px rgba(167,139,250,.55),inset 0 0 22px rgba(255,255,255,.35);
  animation:fxFlipRipple 1.1s cubic-bezier(.16,1,.3,1) .25s 1 both}
.tarot-card-3d.flipped::after{border-color:rgba(255,255,255,.7);box-shadow:0 0 22px 4px rgba(236,201,100,.45);animation-delay:.45s}
@keyframes fxFlipRipple{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@media (prefers-reduced-motion:reduce){.tarot-card-3d.flipped::before,.tarot-card-3d.flipped::after{animation:none;display:none}}

/* Nhắc mục 5–6 trước khi bắt đầu */
.fx-start-note{margin:0 0 12px;padding:10px 14px;border-radius:12px;border:1px solid rgba(212,175,55,.45);background:rgba(212,175,55,.08);color:#f3e6bd;font-size:.9rem;line-height:1.5;text-align:center}