:root {
  --black:      #080408;
  --deep:       #110810;
  --red:        #bf2a2b;
  --red-bright: #e63535;
  --red-glow:   rgba(191,42,43,0.4);
  --gold:       #c8923a;
  --gold-light: #e7b86a;
  --pink:       #d3718a;
  --pink-soft:  #e89fb3;
  --cream:      #f4e4e8;
  --text:       #f0dce4;
  --text-dim:   rgba(240,220,228,0.5);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; min-height:100%; }

body {
  background: var(--black);
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  overflow-x: hidden;
}

#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1);
}
#loader.hiding {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

.loader-gif-ring {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-gif-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--red), var(--gold), var(--pink), var(--red-bright), var(--gold-light), var(--red));
  animation: spinRing 3s linear infinite;
  filter: blur(8px);
  opacity: 0.8;
}
.loader-gif-ring::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--black);
  z-index: 1;
}

.loader-ph {
  position: relative;
  z-index: 2;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2b0d13, #080408);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.8rem;
}

.loader-label {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.65rem;
  letter-spacing: 0.38em;
  color: var(--gold-light);
  text-transform: uppercase;
  animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{opacity:0.35} 50%{opacity:1} }

.loader-dots { display:flex; gap:8px; }
.loader-dots span {
  width:5px; height:5px; border-radius:50%;
  animation: dotBounce 1.3s ease-in-out infinite;
}
.loader-dots span:nth-child(1) { background:var(--pink);  animation-delay:0s;   }
.loader-dots span:nth-child(2) { background:var(--red);   animation-delay:0.2s; }
.loader-dots span:nth-child(3) { background:var(--gold);  animation-delay:0.4s; }
@keyframes dotBounce {
  0%,100% { transform:translateY(0) scale(0.8); opacity:0.4; }
  50%     { transform:translateY(-6px) scale(1.2); opacity:1; }
}

@keyframes spinRing { to { transform:rotate(360deg); } }


body::before {
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 5%,  rgba(191,42,43,0.14)  0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 92% 88%, rgba(200,146,58,0.1)  0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 55% 45%, rgba(211,113,138,0.07) 0%, transparent 60%);
  pointer-events:none; z-index:0;
}
body::after {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0; opacity:0.5;
}
.particle {
  position:fixed; pointer-events:none; z-index:0;
  opacity:0; animation:particleFloat linear infinite; user-select:none;
}
@keyframes particleFloat {
  0%   { transform:translateY(0) rotate(0deg) scale(0.8); opacity:0;    }
  8%   { opacity:0.9; }
  88%  { opacity:0.25; }
  100% { transform:translateY(-108vh) rotate(540deg) scale(1.1); opacity:0; }
}


#page {
  position:relative; z-index:1;
  max-width:520px; margin:0 auto;
  padding:64px 24px 90px;
  display:flex; flex-direction:column; align-items:center;
}


.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.85s cubic-bezier(.22,1,.36,1), transform 0.85s cubic-bezier(.22,1,.36,1);
}
.slide-left {
  opacity:0; transform:translateX(-30px);
  transition:opacity 0.72s cubic-bezier(.22,1,.36,1), transform 0.72s cubic-bezier(.22,1,.36,1);
}
.slide-right {
  opacity:0; transform:translateX(30px);
  transition:opacity 0.72s cubic-bezier(.22,1,.36,1), transform 0.72s cubic-bezier(.22,1,.36,1);
}
.pop {
  opacity:0; transform:scale(0.65);
  transition:opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.34,1.56,.64,1);
}
.reveal.on, .slide-left.on, .slide-right.on { opacity:1; transform:translate(0); }
.pop.on { opacity:1; transform:scale(1); }

.d0  { transition-delay:0.05s; } .d1  { transition-delay:0.15s; } .d2  { transition-delay:0.25s; }
.d3  { transition-delay:0.35s; } .d4  { transition-delay:0.44s; } .d5  { transition-delay:0.52s; }
.d6  { transition-delay:0.58s; } .d7  { transition-delay:0.64s; } .d8  { transition-delay:0.70s; }
.d9  { transition-delay:0.76s; } .d10 { transition-delay:0.82s; } .d11 { transition-delay:0.88s; }
.d12 { transition-delay:0.94s; } .d13 { transition-delay:1.00s; } .d14 { transition-delay:1.06s; }
.d15 { transition-delay:1.14s; }


.profile-ring {
  position:relative; width:120px; height:120px;
}
.ring-spin {
  position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--red), var(--gold), var(--pink-soft), var(--red-bright), var(--gold-light), var(--red));
  animation:spinRing 7s linear infinite;
}
.ring-spin::after {
  content:''; position:absolute; inset:3px;
  border-radius:50%; background:var(--black);
}
.pfp, .pfp-ph {
  position:absolute; inset:0; border-radius:50%; z-index:2;
}
.pfp { object-fit:cover; width:100%; height:100%; }
.pfp-ph {
  background:radial-gradient(circle at 38% 35%, #2e0d14, #080408);
  display:flex; align-items:center; justify-content:center; font-size:2.8rem;
}
.profile-glow {
  position:absolute; bottom:-16px; left:50%; transform:translateX(-50%);
  width:90px; height:28px;
  background:radial-gradient(ellipse, rgba(191,42,43,0.35) 0%, transparent 70%);
  filter:blur(10px);
}

.handle {
  font-family:'Cinzel Decorative', serif;
  font-size:1.02rem; font-weight:400;
  color:var(--gold-light);
  letter-spacing:0.18em;
  margin-top:24px;
  text-shadow:0 0 24px rgba(232,184,106,0.45);
}
.ornament {
  font-size:0.72rem; color:var(--gold);
  letter-spacing:0.1em; margin:12px 0;
  text-align:center; opacity:0.75;
}

.bio {
  background:rgba(17,5,10,0.8);
  border:1px solid rgba(200,146,58,0.28);
  border-radius:16px;
  padding:18px 22px;
  font-size:0.8rem; line-height:1.9;
  color:rgba(240,220,228,0.72);
  text-align:center;
  backdrop-filter:blur(14px);
  max-width:420px; width:100%;
  position:relative;
  box-shadow:0 0 40px rgba(191,42,43,0.07), inset 0 1px 0 rgba(200,146,58,0.1);
}
.bio strong { color:var(--pink-soft); font-style:italic; }
.bio::before {
  content:'✦';
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-size:0.95rem; color:var(--gold);
  background:var(--black); padding:0 8px;
}
.bubbles {
  display:flex; gap:11px; margin-top:16px;
  flex-wrap:wrap; justify-content:center;
}
.bubble {
  display:flex; align-items:center; gap:7px;
  padding:9px 20px; border-radius:999px;
  text-decoration:none; font-size:0.78rem;
  letter-spacing:0.05em; border:1px solid;
  position:relative; overflow:hidden;
  transition:transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease, background 0.35s ease;
}
.bubble::before {
  content:'';
  position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
}
.bubble:hover { transform:translateY(-3px) scale(1.07); }
.bubble-discord {
  background:rgba(88,101,242,0.14); border-color:rgba(88,101,242,0.42); color:#aab0ff;
}
.bubble-discord:hover { background:rgba(88,101,242,0.26); box-shadow:0 8px 22px rgba(88,101,242,0.32); }
.bubble-kofi {
  background:rgba(255,80,80,0.12); border-color:rgba(255,80,80,0.38); color:#ffadad;
}
.bubble-kofi:hover { background:rgba(255,80,80,0.24); box-shadow:0 8px 22px rgba(255,80,80,0.28); }

.section-label {
  font-family:'Cinzel Decorative', serif;
  font-size:0.55rem; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--gold); margin:32px 0 14px;
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:420px;
}
.section-label::before, .section-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(to right, transparent, rgba(200,146,58,0.45), transparent);
}

.links { display:flex; flex-direction:column; gap:9px; width:100%; max-width:420px; }

.link-card {
  display:flex; align-items:center; gap:14px;
  padding:13px 20px;
  background:rgba(17,5,10,0.72);
  border:1px solid rgba(200,146,58,0.16);
  border-radius:13px;
  text-decoration:none; color:var(--text);
  backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
  transition:
    transform 0.35s cubic-bezier(.22,1,.36,1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
/* shimmer sweep */
.link-card::before {
  content:''; position:absolute;
  top:0; left:-100%; bottom:0; width:55%;
  background:linear-gradient(90deg, transparent, rgba(200,146,58,0.07), transparent);
  transition:left 0.55s ease; pointer-events:none;
}
.link-card:hover::before { left:160%; }
/* left accent bar */
.link-card::after {
  content:''; position:absolute;
  left:0; top:12%; bottom:12%; width:2px;
  background:linear-gradient(to bottom, var(--red), var(--gold));
  border-radius:2px;
  transform:scaleY(0);
  transition:transform 0.35s cubic-bezier(.22,1,.36,1);
  transform-origin:bottom;
}
.link-card:hover::after { transform:scaleY(1); }
.link-card:hover {
  transform:translateY(-3px) translateX(4px);
  border-color:rgba(200,146,58,0.42);
  box-shadow:0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,146,58,0.07);
}

.link-icon { font-size:1.15rem; flex-shrink:0; position:relative; z-index:1; }
.link-name {
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem; font-weight:500; letter-spacing:0.05em;
  color:var(--cream); position:relative; z-index:1;
}
.link-arrow {
  margin-left:auto; color:var(--gold);
  opacity:0; transform:translateX(-8px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  font-size:0.9rem; position:relative; z-index:1;
}
.link-card:hover .link-arrow { opacity:1; transform:translateX(0); }

.footer {
  margin-top:52px;
  font-size:0.63rem; color:var(--text-dim);
  letter-spacing:0.16em; text-align:center; opacity:0.55;
}