* { margin: 0; padding: 0; box-sizing: border-box;}:root { --Text-color: #f99ff9; --accent: #f99ff9; --accent-secondary: #c084fc; --box-bg: rgba(255, 255, 255, 0.07); --box-border: rgba(255, 255, 255, 0.15); --avatar-outline: rgba(249, 159, 249, 0.5); --avatar-glow1: rgba(249, 159, 249, 0.25); --avatar-glow2: rgba(249, 159, 249, 0.3); --footer-glow: rgba(249, 159, 249, 0.35); --button-gradient: linear-gradient(135deg, #f99ff9, #c084fc);}html,body { height: 100%; font-family: Arial, sans-serif; color: #fff; overflow: hidden;}video.bg-video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -2;}.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, .6)); backdrop-filter: blur(3px); z-index: -1;}.popup { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px) saturate(180%); border-radius: 2rem; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 12px 60px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.1); z-index: 999; animation: popIn 0.5s ease forwards;}.popup button { padding: 12px 28px; border-radius: 1.5rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-family: monospace; transition: all 0.3s ease;}.popup button::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgb(255 255 255 / 0.2), transparent 70%); animation: pulse 5s infinite; z-index: 0;}.popup button::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 25px rgb(249 159 249 / 0.4); z-index: -1; transition: box-shadow 0.3s ease;}.popup button:hover { transform: scale(1.05); box-shadow: 0 0 35px rgb(249 159 249 / 0.6);}.container { display: none; align-items: center; justify-content: center; height: 100vh; opacity: 0; transition: opacity 0.5s ease;}.container.show { display: flex; opacity: 1;}.box { position: relative; width: 90%; max-width: 400px; padding: 2rem; border-radius: 1rem; background: var(--box-bg); border: 1px solid var(--box-border); text-align: center; backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 6px 30px rgb(0 0 0 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 -1px 0 rgb(255 255 255 / 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;}.box:hover { transform: scale(1.015); box-shadow: 0 12px 40px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.1), inset 0 -1px 0 rgb(255 255 255 / 0.05);}.box::after { content: ""; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; z-index: 1; pointer-events: none; border-radius: 1rem;}.avatar { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at center, rgb(255 255 255 / 0.08), transparent 10%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background-clip: padding-box; border: 2px solid var(--avatar-outline); box-shadow: 0 0 12px var(--avatar-glow1), 0 0 24px var(--avatar-glow2) inset; position: relative; z-index: 1;}.avatar::after { content: ""; position: absolute; top: 50%; left: 50%; width: 300%; height: 300%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgb(255 255 255) 0%, rgb(255 192 255 / 0.9) 25%, rgb(249 159 249 / 0.6) 50%, transparent 20%); animation: sparklePulse 1.5s infinite ease-in-out; border-radius: 50%; z-index: -1; pointer-events: none; filter: blur(30px) brightness(2); opacity: 1;}.avatar::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; padding: 6px; background: linear-gradient(135deg, #f99ff9, rgb(255 255 255 / 0.4)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; background: conic-gradient(from 0deg, #f99ff9, #c084fc, #f99ff9); animation: spin 6s linear infinite; z-index: -1;}h1 { font-size: 1.8rem; font-weight: 700; position: relative; z-index: 2;}.highlight { color: var(--accent);}.typed-text { font-weight: 700; color: var(--accent); border-right: 2px solid var(--accent); padding-right: 5px; white-space: nowrap; overflow: hidden; display: inline-block; animation: blink 0.8s steps(1) infinite; line-height: 1; vertical-align: middle; transform: translateY(-0.5px);}.desc { margin-top: 1rem; font-size: 0.9rem; color: var(--Text-color); position: relative; z-index: 2;}.desc span { display: block; transform: scale(0); opacity: 0; animation: scaleIn 0.6s ease forwards; animation-play-state: paused;}.desc span:nth-child(1) { animation-delay: 0.2s;}.desc span:nth-child(2) { animation-delay: 0.7s;}.desc span:nth-child(3) { animation-delay: 1.2s;}.links { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; position: relative; z-index: 2;}.link-btn,.donate { display: flex; align-items: center; gap: 8px; background: var(--button-gradient); color: #fff; padding: 0.6rem 1.2rem; border-radius: 12px; font-family: monospace; text-decoration: none; position: relative; z-index: 1; overflow: hidden; box-shadow: 0 2px 6px rgb(249 159 249 / 0.2), 0 4px 12px rgb(249 159 249 / 0.3); backdrop-filter: blur(8px); transition: transform 0.2s ease, box-shadow 0.3s ease;}.link-btn::before,.donate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgb(255 255 255 / 0.15), transparent); opacity: 0; transition: opacity 0.3s ease; z-index: -1;}.link-btn:hover,.donate:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgb(249 159 249 / 0.3), 0 6px 20px rgb(249 159 249 / 0.4);}.link-btn:hover::before,.donate:hover::before { opacity: 1;}.donate { margin-top: 1.5rem; justify-content: center; padding-left: 0.5rem; display: flex;}.link-btn:hover,.donate:hover { background: linear-gradient(135deg, #f99ff9, #c084fc, #f99ff9); background-size: 200% 200%; animation: shimmer 2s infinite;}.footer { margin-top: 2rem; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 16px; gap: 0.5rem; position: relative; padding: 0.5rem 1rem; z-index: 2; background: radial-gradient(circle at top left, var(--footer-glow), rgb(255 255 255 / 0.15)); border: 1px solid #fff0; background-clip: padding-box; overflow: hidden;}.footer::before { content: ""; position: absolute; inset: -8px; border-radius: 20px; background: radial-gradient(circle at top left, rgb(249 159 249 / 0.35), rgb(255 255 255 / 0.15)); filter: blur(30px); z-index: -1; opacity: 0; transform: scale(1); transition: opacity 0.3s ease, transform 0.3s ease;}.footer:hover::before { animation: pulse 2s ease-in-out infinite; opacity: 1;}.footer img { width: 32px; height: 32px; border-radius: 50%;}.footer-text { text-align: left; line-height: 1.1; color: #000;}.wave { animation-name: wave-animation; animation-duration: 2.5s; animation-iteration-count: infinite; transform-origin: 70% 70%; display: inline-block;}.theme-btn { position: fixed; top: 1rem; left: 1rem; z-index: 1000; padding: 0.7rem 1.4rem; border: 1px solid rgb(255 255 255 / 0.15); border-radius: 1rem; font-family: monospace; font-size: 0.9rem; color: #fff; background: rgb(255 255 255 / 0.07); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 6px 30px rgb(0 0 0 / 0.25), inset 0 1px 0 rgb(255 255 255 / 0.1); cursor: pointer; transition: all 0.3s ease;}.theme-btn:hover { transform: scale(1.05); box-shadow: 0 12px 40px rgb(0 0 0 / 0.3);}.counter { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 1rem; font-family: monospace; font-size: 1rem; font-weight: 700; color: var(--accent); padding: 0.6rem 1.2rem; border-radius: 12px; background: var(--box-bg); border: 1px solid var(--box-border); box-shadow: 0 2px 6px rgb(249 159 249 / 0.2), 0 4px 12px rgb(249 159 249 / 0.3); backdrop-filter: blur(8px); transition: transform 0.2s ease, box-shadow 0.3s ease;}.counter:hover { transform: scale(1.05); box-shadow: 0 4px 10px rgb(249 159 249 / 0.3), 0 6px 20px rgb(249 159 249 / 0.4);}.counter i { font-size: 1.2rem; color: var(--accent);}.box,.links,.footer,.counter { opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease forwards;}.box { animation-delay: 0.2s;}.links { animation-delay: 0.4s;}.counter { animation-delay: 0.6s;}.footer { animation-delay: 0.8s;}@keyframes pulse { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20%, 20%); }}@keyframes scaleIn { to { transform: scale(1); opacity: 1; }}@keyframes blink { 0%, 100% { border-color: skyblue; } 50% { border-color: #fff0; }}@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; }}@keyframes sparklePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}@keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }}@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 0.8; }}@keyframes wave-animation { 0% { transform: rotate(0deg); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-8deg); } 30% { transform: rotate(14deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(10deg); } 60% { transform: rotate(0deg); } 100% { transform: rotate(0deg); }}@keyframes fadeUp { to { opacity: 1; transform: translateY(0); }}