:root{
  --gold:#d9a75b;
  --gold-soft:#f0cf98;
  --teal:#4fa8a3;
  --coral:#e17a5b;
  --cream:#f4ecdd;
  --ink:#132321;

  --bg-0:#081415;
  --bg-1:#0c1c1f;
  --bg-2:#132a2c;
  --surface: rgba(244,236,221,0.055);
  --surface-strong: rgba(244,236,221,0.09);
  --border: rgba(217,167,91,0.28);
  --border-soft: rgba(244,236,221,0.12);
  --text: var(--cream);
  --text-dim: rgba(244,236,221,0.62);
  --text-faint: rgba(244,236,221,0.4);
  --accent: var(--gold);
  --shadow: 0 20px 50px -20px rgba(0,0,0,0.6);

  /* white linktree container */
  --card-bg: rgba(255,255,255,0.96);
  --card-text: #16211f;
  --card-text-dim: rgba(22,33,31,0.62);
  --card-text-faint: rgba(22,33,31,0.42);
  --card-surface: rgba(22,33,31,0.045);
  --card-surface-strong: rgba(22,33,31,0.075);
  --card-border: rgba(184,130,47,0.4);
  --card-border-soft: rgba(22,33,31,0.09);
  --card-gold: #b8822f;
  --card-teal: #2f8f89;
  --card-coral: #cf5e3b;
  --card-orange: #ee6c1c;
  --card-shadow: 0 30px 60px -24px rgba(8,20,21,0.45);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background: var(--bg-0); }

body{
  min-height:100vh;
  background:
    radial-gradient(60% 40% at 15% -5%, rgba(79,168,163,0.22), transparent 60%),
    radial-gradient(55% 35% at 100% 0%, rgba(217,167,91,0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
  color:var(--text);
  font-family: -apple-system, "Segoe UI", "Segoe UI Variable", system-ui, Roboto, sans-serif;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ---------- atmosphere ---------- */
.atmosphere{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  will-change: transform;
}
.blob.b1{ width:60vmax; height:60vmax; left:-25vmax; top:-30vmax;
  background: radial-gradient(circle at 40% 40%, rgba(79,168,163,0.35), transparent 70%);
  animation: drift1 26s ease-in-out infinite; }
.blob.b2{ width:55vmax; height:55vmax; right:-24vmax; top:5vmax;
  background: radial-gradient(circle at 60% 40%, rgba(217,167,91,0.3), transparent 70%);
  animation: drift2 32s ease-in-out infinite; }
.blob.b3{ width:50vmax; height:50vmax; left:10vmax; bottom:-28vmax;
  background: radial-gradient(circle at 50% 50%, rgba(225,122,91,0.22), transparent 70%);
  animation: drift3 30s ease-in-out infinite; }

@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(4vmax,3vmax) scale(1.08);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vmax,4vmax) scale(1.05);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(3vmax,-3vmax) scale(1.1);} }

/* ---------- background photos (fill in image URLs in assets/js/script.js) ---------- */
.bg-photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.6s ease;
}
.bg-photo.is-visible{ opacity:1; }
.bg-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,14,15,0.55) 0%, rgba(6,14,15,0.35) 40%, rgba(6,14,15,0.6) 100%);
  opacity:0; transition: opacity .8s ease;
}
.bg-overlay.is-active{ opacity:1; }

/* ---------- white linktree container ---------- */
.card{
  --text: var(--card-text);
  --text-dim: var(--card-text-dim);
  --text-faint: var(--card-text-faint);
  --surface: var(--card-surface);
  --surface-strong: var(--card-surface-strong);
  --border: var(--card-border);
  --border-soft: var(--card-border-soft);
  --gold: var(--card-gold);
  --teal: var(--card-teal);
  --coral: var(--card-coral);
  --accent: var(--card-gold);
  --shadow: 0 14px 30px -18px rgba(22,33,31,0.18);

  width:100%;
  display:flex; flex-direction:column; align-items:center;
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:28px;
  padding: 36px 22px 26px;
  box-shadow: var(--card-shadow);
  color: var(--text);
  /* forces its own GPU layer so the backdrop-filter + animated
     children paint correctly on first load instead of staying
     blank until a scroll/repaint kicks the compositor */
  transform: translateZ(0);
}

/* ---------- frosted scroll header ---------- */
.scroll-veil{
  position:fixed; top:0; left:0; right:0; height:min(34vh,260px);
  z-index:5; pointer-events:none;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  background: linear-gradient(180deg, var(--bg-0) 0%, transparent 100%);
  opacity:0;
  -webkit-mask-image: linear-gradient(180deg, black, transparent);
  mask-image: linear-gradient(180deg, black, transparent);
  transition: opacity .35s ease;
}

/* ---------- layout ---------- */
.wrap{
  position:relative; z-index:2;
  max-width:460px; margin:0 auto;
  padding: 48px 20px 64px;
  display:flex; flex-direction:column; align-items:center;
}

.logo{
  width: min(220px, 62%);
  height:auto;
  margin-bottom:20px;
  opacity:0; transform: scale(.92) translateY(10px);
  animation: pop .7s cubic-bezier(.2,.8,.2,1) .05s forwards;
  filter: drop-shadow(0 10px 22px rgba(238,108,28,0.25));
}

.chips{
  display:flex; gap:18px; margin: 6px 0 16px; align-items:flex-start;
}
.chip-img{
  height:64px; width:auto; object-fit:contain;
  opacity:0; filter: blur(10px); transform: translateY(6px);
  animation: blur-in .55s ease-out forwards;
}
.chip-img:nth-child(1){ animation-delay: .2s; }
.chip-img:nth-child(2){ animation-delay: .4s; }
.chip-img:nth-child(3){ animation-delay: .6s; }

@keyframes blur-in{
  to{ opacity:1; filter: blur(0); transform: translateY(0); }
}

.bio{
  text-align:center; margin:0 0 26px; max-width:360px;
  color:var(--text-dim); font-size:14.5px; line-height:1.65;
  opacity:0; transform: translateY(10px);
  animation: rise-in .6s cubic-bezier(.2,.8,.2,1) .28s forwards;
}
.bio span{ display:block; }
.bio .bio-title{ color:var(--accent); font-weight:700; font-size:17px; margin-bottom:6px; }

.links{
  width:100%; display:flex; flex-direction:column; gap:12px;
}
.linkcard{
  --i:0;
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border-radius:16px;
  text-decoration:none; color:#fff;
  background: var(--cat-color, var(--card-orange));
  border:1px solid color-mix(in srgb, var(--cat-color, var(--card-orange)) 70%, black 15%);
  box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--cat-color, var(--card-orange)) 65%, transparent), var(--shadow);
  overflow:hidden;
  opacity:0; transform: translateY(14px);
  animation: rise-in .6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(.38s + var(--i) * .06s);
  transition: box-shadow .3s ease, transform .2s cubic-bezier(.2,.8,.2,1), filter .08s ease;
  will-change: filter, opacity, transform;
}
.linkcard:active{ filter: brightness(0.97); }

.lc-icon{
  flex:0 0 auto; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.lc-icon svg{ width:28px; height:28px; }

.lc-text{ flex:1 1 auto; min-width:0; }
.lc-title{ font-size:21px; font-weight:600; letter-spacing:.01em; color:#fff; }
.lc-sub{ font-size:12px; color:rgba(255,255,255,0.8); margin-top:1px; }

.lc-arrow{ flex:0 0 auto; width:16px; height:16px; color:rgba(255,255,255,0.75); }

@keyframes rise-in{ to{ opacity:1; transform:none; } }
@keyframes pop{ to{ opacity:1; transform:scale(1) translateY(0); } }

/* elements that blur + fade out as they scroll toward the top edge */
.logo, .chips, .bio{
  will-change: filter, opacity, transform;
  transition: filter .05s linear;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .blob{ animation:none !important; }
}