:root {
  --void:        #03040f;
  --deep:        #060820;
  --navy:        #0a0f2e;
  --nebula:      #0f1540;
  --blue:        #1a2a6c;
  --blue-mid:    #2545a8;
  --blue-glow:   rgba(37,69,168,0.4);
  --gold:        #c8923a;
  --gold-light:  #e7b86a;
  --gold-dim:    rgba(200,146,58,0.35);
  --pink:        #e4a8c4;
  --pink-soft:   #f0c8da;
  --pink-glow:   rgba(228,168,196,0.25);
  --star:        #d4e4ff;
  --text:        #e8d8f0;
  --text-dim:    rgba(232,216,240,0.5);
  --cream:       #f0e8ff;
}

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

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

/* ─── LOADER ─── */
#loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--void);
  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(--blue-mid), var(--gold), var(--pink), var(--blue), var(--gold-light), var(--blue-mid));
  animation: spinRing 3s linear infinite;
  filter: blur(8px); opacity: 0.85;
}
.loader-gif-ring::after {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%; background: var(--void); z-index: 1;
}

.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(--blue-mid);   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); } }

/* ─── CANVAS STARFIELD ─── */
#star-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* ─── AMBIENT GRADIENTS ─── */
body::before {
  content:''; position:fixed; inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 8%,  rgba(37,69,168,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 90% 88%, rgba(200,146,58,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 52% 50%, rgba(228,168,196,0.08) 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.04'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0; opacity:0.4;
}

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

/* ─── ANIMATIONS ─── */
.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 ─── */
.profile-ring { position:relative; width:160px; height:160px; }
.ring-spin {
  position:absolute; inset:-5px; border-radius:50%;
  background:conic-gradient(from 0deg, var(--blue-mid), var(--gold), var(--pink-soft), var(--blue), var(--gold-light), var(--blue-mid));
  animation:spinRing 7s linear infinite;
}
.ring-spin::after {
  content:''; position:absolute; inset:3px;
  border-radius:50%; background:var(--void);
}
.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%, #0d1840, #03040f);
  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(37,69,168,0.45) 0%, transparent 70%);
  filter:blur(10px);
}

/* ─── HEADER TEXT ─── */
.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.7; }

/* ─── BIO ─── */
.bio {
  background:rgba(10,15,46,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(232,216,240,0.75);
  text-align:center;
  backdrop-filter:blur(14px);
  max-width:520px; width:100%; position:relative;
  box-shadow:0 0 40px rgba(37,69,168,0.12), 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:-15px; left:50%; transform:translateX(-50%);
  font-size:0.95rem; color:var(--gold);
  background: transparent; padding:0 8px;
}

/* ─── BUBBLES ─── */
.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(228,168,196,0.1); border-color:rgba(228,168,196,0.35); color:var(--pink-soft); }
.bubble-kofi:hover { background:rgba(228,168,196,0.2); box-shadow:0 8px 22px rgba(228,168,196,0.2); }

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

/* ─── LINK GRID ─── */
.links-grid {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
  width:100%; max-width:860px;
}
@media (max-width:600px) {
  .links-grid { grid-template-columns:1fr; }
}

/* ─── LINK CARD ─── */
.link-card {
  display:flex; flex-direction:column;
  background:rgba(10,15,46,0.75);
  border:1px solid rgba(37,69,168,0.3);
  border-radius:14px;
  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;
}
.link-card::before {
  content:''; position:absolute;
  top:0; left:-100%; bottom:0; width:55%;
  background:linear-gradient(90deg, transparent, rgba(37,69,168,0.09), transparent);
  transition:left 0.55s ease; pointer-events:none;
}
.link-card:hover::before { left:160%; }
.link-card::after {
  content:''; position:absolute;
  left:0; top:10%; bottom:10%; width:2px;
  background:linear-gradient(to bottom, var(--blue-mid), var(--pink));
  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(-4px);
  border-color:rgba(200,146,58,0.4);
  box-shadow:0 14px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,146,58,0.08), 0 0 20px rgba(37,69,168,0.15);
}

/* embed preview area */
.link-preview {
  width:100%; height:190px;
  background:linear-gradient(135deg, rgba(6,8,32,0.9) 0%, rgba(15,21,64,0.8) 100%);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(37,69,168,0.2);
  position:relative; overflow:hidden; flex-shrink:0;
}
.link-preview-shimmer {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(37,69,168,0.14) 0%, transparent 70%);
}
.link-preview-domain {
  position:relative; z-index:1;
  font-family:'Cinzel Decorative', serif;
  font-size:1.05rem; letter-spacing:0.12em;
  color:rgba(212,228,255,0.18);
  text-align:center; padding:0 16px;
  user-select:none;
  transition: color 0.35s ease;
  word-break: break-all;
}
.link-card:hover .link-preview-domain {
  color:rgba(212,228,255,0.38);
}

/* hover image overlay */
.link-preview-hover {
  position:absolute; inset:0; z-index:3;
  background-image: url('hover_image.png');
  background-size: cover;
background-position: center 30%;    
  opacity:0;
  transition: opacity 0.4s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.link-card:hover .link-preview-hover { opacity:1; }

/* ─── MUSIC PLAYER ─── */
.music-player {
  display:flex; align-items:center; gap:12px;
  margin-top:14px;
  max-width:300px; width:100%;
}
.music-btn {
  background:none; border:none; cursor:pointer;
  padding:0; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--pink-soft);
  opacity:0.7;
  transition:opacity 0.2s ease, transform 0.25s cubic-bezier(.22,1,.36,1);
}
.music-btn:hover { opacity:1; transform:scale(1.15); }
.music-btn svg { width:14px; height:14px; }

.music-progress-wrap {
  flex:1; display:flex; flex-direction:column; gap:6px;
}
.music-title {
  font-family:'Cormorant Garamond', serif;
  font-size:0.72rem; letter-spacing:0.07em;
  color:var(--text-dim); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  opacity:0.65;
}
.music-bar-track {
  width:100%; height:1px;
  background:rgba(200,146,58,0.22);
  border-radius:999px;
  position:relative; cursor:pointer;
}
.music-bar-fill {
  position:absolute; left:0; top:0; bottom:0;
  border-radius:999px;
  background:var(--gold);
  width:0%;
  pointer-events:none;
}
/* the star scrubber dot */
.music-star {
  position:absolute;
  top:50%; left:0%;
  transform:translate(-50%, -50%);
  pointer-events:none;
  transition:left 0.25s linear;
}
.music-star svg {
  width:12px; height:12px;
  filter:drop-shadow(0 0 3px rgba(228,168,196,0.7));
}

/* card footer bar */
.link-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
}
.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-tag {
  font-size:0.62rem; color:var(--text-dim);
  letter-spacing:0.06em; margin-top:2px;
}
.link-arrow {
  color:var(--gold); opacity:0; transform:translateX(-8px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  font-size:0.9rem; flex-shrink:0;
}
.link-card:hover .link-arrow { opacity:1; transform:translateX(0); }

/* color-coded preview accents per platform */
.lc-janitor  .link-preview { background:linear-gradient(135deg,#0a0820,#180d30); }
.lc-chub     .link-preview { background:linear-gradient(135deg,#060e1a,#0d1f35); }
.lc-harpy    .link-preview { background:linear-gradient(135deg,#0d0815,#22102a); }
.lc-xoul     .link-preview { background:linear-gradient(135deg,#080f18,#0f2030); }
.lc-craveu   .link-preview { background:linear-gradient(135deg,#160812,#2a1020); }
.lc-sakura   .link-preview { background:linear-gradient(135deg,#160d14,#2e162a); }
.lc-saucepan .link-preview { background:linear-gradient(135deg,#0a1208,#18280f); }
.lc-clank    .link-preview { background:linear-gradient(135deg,#0d1010,#1a2828); }
.lc-pinterest .link-preview { background:linear-gradient(135deg,#1a080a,#2e0f14); }
.lc-civitai  .link-preview { background:linear-gradient(135deg,#080d18,#101d3a); }

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