/* ═══════════════════════════════════════════════════════════ SHOP ITEM REVEAL CELEBRATION — hiệu ứng ăn mừng full màn hình khi mua vật phẩm vĩnh viễn (Pháp Tướng/Thần Khí/Thần Thú/Sí Bàng/Danh Hiệu/Khung). Tế Đàn cố định: Bệ Đá Yêu Ma (images/anh_du_an_ytt/tedan/huaban-2182058764.webp). Markup được js/shop-sfx.js tự inject vào cuối (lazy, 1 lần duy nhất). ═══════════════════════════════════════════════════════════ */ .shop-reveal-overlay { position: fixed; inset: 0; z-index: 999999; background: rgba(4, 3, 12, 0.95); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .shop-reveal-overlay.show { opacity: 1; pointer-events: auto; } /* ── Bầu khí quyển toàn màn hình: vignette + mây trôi + sấm sét ── */ .shop-reveal-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .shop-atmo-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 68% 62% at center 52%, transparent 35%, rgba(3, 2, 10, 0.65) 100%); } /* Mây "cumulus" thật: nhiều cụm tròn bán kính CỐ ĐỊNH theo px chồng lên nhau (KHÔNG dùng % cho bán kính radial-gradient — mặc định farthest-corner khiến hình tròn méo theo tỉ lệ khung, cắt phẳng ở mép trông như khối chữ nhật mờ, không giống mây). */ .shop-atmo-cloud-big { position: absolute; width: 480px; height: 180px; background: radial-gradient(circle 58px at 100px 130px, rgba(224, 231, 246, 0.62), rgba(224, 231, 246, 0.48) 60%, transparent 100%), radial-gradient(circle 74px at 190px 88px, rgba(224, 231, 246, 0.66), rgba(224, 231, 246, 0.52) 60%, transparent 100%), radial-gradient(circle 78px at 296px 84px, rgba(224, 231, 246, 0.66), rgba(224, 231, 246, 0.52) 60%, transparent 100%), radial-gradient(circle 60px at 386px 116px, rgba(224, 231, 246, 0.6), rgba(224, 231, 246, 0.46) 60%, transparent 100%), radial-gradient(circle 44px at 438px 132px, rgba(224, 231, 246, 0.54), rgba(224, 231, 246, 0.4) 60%, transparent 100%); filter: blur(3px); } .shop-atmo-cloud-small { position: absolute; width: 300px; height: 118px; background: radial-gradient(circle 38px at 62px 84px, rgba(224, 231, 246, 0.52), rgba(224, 231, 246, 0.4) 60%, transparent 100%), radial-gradient(circle 48px at 120px 56px, rgba(224, 231, 246, 0.57), rgba(224, 231, 246, 0.44) 60%, transparent 100%), radial-gradient(circle 50px at 188px 54px, rgba(224, 231, 246, 0.57), rgba(224, 231, 246, 0.44) 60%, transparent 100%), radial-gradient(circle 40px at 246px 78px, rgba(224, 231, 246, 0.52), rgba(224, 231, 246, 0.4) 60%, transparent 100%); filter: blur(2.5px); } .shop-atmo-cloud-1 { bottom: -5%; left: -6%; opacity: 0.62; animation: shopCloudDriftA 32s ease-in-out infinite; } .shop-atmo-cloud-2 { bottom: -9%; left: 56%; opacity: 0.56; animation: shopCloudDriftB 38s ease-in-out infinite; } .shop-atmo-cloud-3 { bottom: 5%; left: 30%; opacity: 0.42; animation: shopCloudDriftA 27s ease-in-out infinite reverse; } @keyframes shopCloudDriftA { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4vw); } } @keyframes shopCloudDriftB { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4.5vw); } } /* Sấm sét: 6 tia dài gần hết chiều cao màn hình, mỗi tia có nhánh rẽ như sét thật. animation-duration KHÔNG TRÙNG NHAU → độ lệch pha trôi dần theo thời gian, tự tạo hiệu ứng nhiều luồng chớp chồng lên nhau ngẫu nhiên (không cần JS random). */ .shop-atmo-lightning-flash { position: absolute; inset: 0; background: #dfe8ff; opacity: 0; mix-blend-mode: overlay; animation: shopLightningFlashSeq 3.2s ease-in-out infinite; } @keyframes shopLightningFlashSeq { 0%, 26%, 32%, 62%, 68%, 100% { opacity: 0; } 27% { opacity: 0.5; } 29% { opacity: 0.1; } 31% { opacity: 0.32; } 63% { opacity: 0.4; } 65% { opacity: 0.08; } 67% { opacity: 0.25; } } .shop-atmo-bolt { position: absolute; top: -2%; width: 170px; height: 96vh; opacity: 0; filter: drop-shadow(0 0 10px #bcd4ff) drop-shadow(0 0 22px #7fa8ff) drop-shadow(0 0 40px #5a7fe0); animation-name: shopBoltStrike; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .shop-atmo-bolt polyline { fill: none; stroke: #f2f6ff; stroke-linejoin: round; stroke-linecap: round; } .shop-atmo-bolt .bolt-main { stroke-width: 4; } .shop-atmo-bolt .bolt-branch { stroke-width: 2.2; opacity: 0.85; } .shop-atmo-bolt-1 { left: 0%; animation-duration: 2.8s; animation-delay: 0s; } .shop-atmo-bolt-2 { left: 17%; animation-duration: 3.4s; animation-delay: 0.4s; transform: scaleX(-1); } .shop-atmo-bolt-3 { left: 36%; animation-duration: 2.5s; animation-delay: 0.9s; } .shop-atmo-bolt-4 { left: 56%; animation-duration: 4.1s; animation-delay: 0.15s; transform: scaleX(-1); } .shop-atmo-bolt-5 { left: 75%; animation-duration: 3.1s; animation-delay: 1.3s; } .shop-atmo-bolt-6 { left: 91%; animation-duration: 3.7s; animation-delay: 0.6s; transform: scaleX(-1); } @keyframes shopBoltStrike { 0% { opacity: 0; } 2% { opacity: 1; } 5% { opacity: 0.2; } 8% { opacity: 0.9; } 11% { opacity: 0.15; } 15% { opacity: 0.7; } 19% { opacity: 0; } 100% { opacity: 0; } } /* ── Tế Đàn (Bệ Đá Yêu Ma) + vật phẩm nổi lên + chữ chúc mừng ── */ .shop-altar-stage { position: relative; width: min(600px, 85vw); aspect-ratio: 658 / 470; } .shop-altar-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* Phóng to 156% theo đúng số Founder đã chỉnh tay qua tools/shop_sfx_demo.html — ảnh to hơn khung .shop-altar-stage một chút, phần thừa tự mờ dần vào bầu khí quyển phía sau (không lộ viền hộp vì .shop-atmo-vignette/mây đã phủ toàn màn hình, không riêng khung này). */ transform: scale(1.56); transform-origin: center center; } .shop-altar-item-wrap { position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; } .shop-altar-item-img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: screen; filter: brightness(1.25) saturate(1.4) contrast(1.08); position: relative; animation: shopItemFloat 2.4s ease-in-out infinite, shopItemPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes shopItemFloat { 0%, 100% { margin-top: 0px; } 50% { margin-top: -10px; } } @keyframes shopItemPopIn { from { opacity: 0; margin-top: 40px; } to { opacity: 1; margin-top: 0px; } } .shop-reveal-text { position: absolute; top: calc(58% + 118px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 85vw; text-align: center; } .shop-reveal-badge { font-size: 0.95rem; font-weight: 700; color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.55); letter-spacing: 0.5px; } .shop-reveal-name { margin-top: 6px; font-size: 1.7rem; font-weight: 900; background: linear-gradient(135deg, #fff6d5, #ffd700, #ffb700); -webkit-background-clip: text; background-clip: text; color: transparent; }