*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#060914}
  
#bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:#060914;
  overflow:hidden;
}

#bg video,
#bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#bg-upload{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:20;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.3);
  border-radius:12px;
  padding:8px 14px;
  color:rgba(255,255,255,.8);
  font-size:.8rem;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}

#bg-upload:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.5);
}

#bg-file{
  display:none;
}

#ui{
  position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px;pointer-events:none;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ── Profile ── */
.profile{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:20px;pointer-events:auto;
  animation:riseIn .9s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes riseIn{from{opacity:0;transform:translateY(-22px) scale(.92)}to{opacity:1;transform:none}}

.avatar-wrap{position:relative;width:96px;height:96px;margin-bottom:14px}

.avatar-wrap::before{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(from 0deg,
    #fff 0%,rgba(160,210,255,.9) 12%,
    rgba(200,140,255,.9) 28%,rgba(100,230,200,.85) 44%,
    rgba(255,190,100,.8) 58%,#fff 72%,
    rgba(150,200,255,.9) 88%,#fff 100%);
  animation:spinRing 4s linear infinite;
  -webkit-mask:radial-gradient(circle,transparent 40px,#000 42px);
  mask:radial-gradient(circle,transparent 40px,#000 42px);
}
.avatar-wrap::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask:radial-gradient(circle,transparent 42px,#000 44px);
  mask:radial-gradient(circle,transparent 42px,#000 44px);
}
@keyframes spinRing{to{transform:rotate(360deg)}}

.avatar-wrap img{
  width:96px;height:96px;border-radius:50%;object-fit:cover;
  position:relative;z-index:2;
  box-shadow:0 4px 22px rgba(0,0,0,.6);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.avatar-wrap:hover img{transform:scale(1.09) rotate(-2deg)}

.name{
  font-size:1.85rem;font-weight:600;letter-spacing:-.04em;
  color:rgba(255,255,255,.97);
  text-shadow:0 0 28px rgba(130,190,255,.55),0 2px 8px rgba(0,0,0,.6);
  margin-bottom:3px;
}
.tagline{
  font-size:.78rem;font-weight:400;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* ── Liquid Glass card ──
   Layered to mimic the actual Tahoe glass material:
   1. Refracted background (backdrop-filter)
   2. Gradient specular sheen
   3. Top-edge highlight bar
   4. Caustic inner blob
   5. Rim border with opacity
*/
.glass-card{
  width:100%;max-width:390px;
  pointer-events:auto;border-radius:26px;padding:18px;
  position:relative;overflow:hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.07) 30%,
      rgba(255,255,255,.04) 55%,
      rgba(255,255,255,.13) 100%
    );
  -webkit-backdrop-filter:blur(48px) saturate(210%) brightness(1.12);
  backdrop-filter:blur(48px) saturate(210%) brightness(1.12);

  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.75) inset,
    1px 0 0 rgba(255,255,255,.25) inset,
    0 -1px 0 rgba(0,0,0,.12) inset,
    -1px 0 0 rgba(255,255,255,.08) inset,
    0 24px 70px rgba(0,0,0,.6),
    0 6px 22px rgba(0,0,0,.35),
    0 0 90px rgba(90,150,255,.18);

  animation:cardRise .85s cubic-bezier(.34,1.56,.64,1) .08s both;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;
}
@keyframes cardRise{from{opacity:0;transform:translateY(26px) scale(.95)}to{opacity:1;transform:none}}

/* Caustic light blob */
.glass-card::before{
  content:'';position:absolute;
  top:-50%;left:0%;width:100%;height:90%;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,
    rgba(255,255,255,.16) 0%,
    rgba(180,220,255,.06) 40%,
    transparent 70%);
  pointer-events:none;
  animation:causticBlob 9s ease-in-out infinite alternate;
}
@keyframes causticBlob{
  0%{transform:translate(-8px,-4px) scaleX(1)}
  100%{transform:translate(8px,6px) scaleX(1.06)}
}

/* Top specular edge */
.glass-card::after{
  content:'';position:absolute;
  top:0;left:6%;right:6%;height:1.5px;
  background:linear-gradient(90deg,
    transparent,rgba(255,255,255,.85) 20%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.85) 80%,transparent);
  border-radius:50%;z-index:3;
}

.links{display:flex;flex-direction:column;gap:10px;position:relative;z-index:2}

/* ── Link pills ── */
.link{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:16px;
  text-decoration:none;color:rgba(255,255,255,.95);
  font-weight:500;font-size:.95rem;letter-spacing:-.01em;
  position:relative;overflow:hidden;cursor:pointer;
  will-change:transform;

  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.28) inset,
    0 -1px 0 rgba(0,0,0,.09) inset,
    0 4px 14px rgba(0,0,0,.22);

  transition:background .2s,border-color .2s,box-shadow .2s,
             transform .25s cubic-bezier(.34,1.56,.64,1);
  animation:pillIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.link:nth-child(1){animation-delay:.18s}
.link:nth-child(2){animation-delay:.25s}
.link:nth-child(3){animation-delay:.32s}
.link:nth-child(4){animation-delay:.39s}
.link:nth-child(5){animation-delay:.46s}
@keyframes pillIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* Shimmer sweep */
.link-shimmer{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,
    transparent 32%,rgba(255,255,255,.16) 50%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .55s ease;
}
.link:hover .link-shimmer{transform:translateX(130%)}

/* Pill top specular */
.link::after{
  content:'';position:absolute;
  top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
}

.link:hover{
  background:rgba(255,255,255,.17);
  border-color:rgba(255,255,255,.46);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.35) inset,
    0 8px 28px rgba(0,0,0,.32),
    0 0 35px rgba(150,200,255,.18);
  transform:translateY(-2px) scale(1.013);
}
.link:active{transform:scale(.97) translateY(0)!important;transition-duration:.1s}

/* Icon bubble */
.icon-bubble{
  width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.link:hover .icon-bubble{transform:scale(1.2) rotate(-6deg)}
.iyt{color:#ff4545}.itw{color:#bf94ff}.ipat{color:#ff6168}.ibsky{color:#7dc4ff}.ix{color:#ddd}

.link-label{flex:1;text-shadow:0 1px 5px rgba(0,0,0,.35)}
.link-chev{
  color:rgba(255,255,255,.28);font-size:.65rem;
  transition:transform .2s,color .2s;
}
.link:hover .link-chev{transform:translateX(3px);color:rgba(255,255,255,.7)}

/* ── Footer ── */
.footer{
  margin-top:14px;font-size:.72rem;
  color:rgba(255,255,255,.26);letter-spacing:.05em;
  pointer-events:auto;
  animation:riseIn .9s ease .55s both;
}

@media(max-height:660px){
  .profile{margin-bottom:12px}
  .avatar-wrap{width:72px;height:72px}
  .avatar-wrap img{width:72px;height:72px}
  .avatar-wrap::before{-webkit-mask:radial-gradient(circle,transparent 30px,#000 32px);mask:radial-gradient(circle,transparent 30px,#000 32px)}
  .avatar-wrap::after{-webkit-mask:radial-gradient(circle,transparent 32px,#000 34px);mask:radial-gradient(circle,transparent 32px,#000 34px)}
  .name{font-size:1.5rem}
  .glass-card{padding:12px}
  .links{gap:7px}
  .link{padding:10px 13px}
}

/* ══════════════════════════════════════
   LOADER
══════════════════════════════════════ */
body.loading #ui,
body.loading #bg-upload{
  visibility:hidden;
  pointer-events:none;
}
body.loading .profile,
body.loading .glass-card,
body.loading .link,
body.loading .footer{
  animation-play-state:paused;
  opacity:0;
}

#loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:#060914;
  transition:opacity .7s ease, visibility .7s ease;
}
#loader.done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ── Name text ── */
.ld-name{
  position:relative;
  font-family:"Bitcount Grid Double",sans-serif;
  font-size:clamp(2.5rem,11vw,7rem);
  font-weight:400;
  letter-spacing:-.04em;
  user-select:none;

  /* Base: dim frosted glass look — letters visible but muted */
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  background-image:linear-gradient(
    90deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.22) 100%
  );
}

/* The liquid-glass glow sweep — a pseudo-element that moves L→R
   clipped to the text shape via mix-blend-mode + isolation */
.ld-name::before{
  content: attr(data-text);
  position:absolute;
  inset:0;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  white-space:nowrap;

  /* The moving glow gradient */
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  background-image:linear-gradient(
    90deg,
    transparent           0%,
    transparent           var(--gp, -30%),
    rgba(180,220,255,.55) calc(var(--gp, -30%) + 8%),
    rgba(255,255,255,1)   calc(var(--gp, -30%) + 18%),
    rgba(220,180,255,.9)  calc(var(--gp, -30%) + 28%),
    rgba(120,230,210,.6)  calc(var(--gp, -30%) + 38%),
    transparent           calc(var(--gp, -30%) + 46%),
    transparent           100%
  );
  background-size:200% 100%;

  /* Glass specular: faint reflection layer beneath the glow */
  filter:drop-shadow(0 0 12px rgba(160,210,255,.7))
         drop-shadow(0 0 30px rgba(200,160,255,.4))
         drop-shadow(0 0 2px rgba(255,255,255,.9));
}

/* After the sweep: name stays revealed in full glass */
.ld-name.revealed{
  background-image:linear-gradient(
    90deg,
    rgba(255,255,255,.92) 0%,
    rgba(200,230,255,.95) 40%,
    rgba(220,190,255,.92) 70%,
    rgba(255,255,255,.90) 100%
  );
  text-shadow:0 0 40px rgba(140,200,255,.45), 0 2px 8px rgba(0,0,0,.5);
  transition: background-image 0s;
}
.ld-name.revealed::before{
  opacity:0;
  transition:opacity .4s ease;
}

/* Reveal curtain */
#curtain{
  position:fixed;inset:0;z-index:9998;
  background:#060914;
  transform-origin:top;
  transform:scaleY(1);
  transition:transform .75s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
#curtain.lifted{
  transform:scaleY(0);
}