*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  width:100%;
  min-height:100vh;
  background:#040404;
  overflow-x:hidden;
  font-family:"Share Tech Mono",monospace;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:0.45;

  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' 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");
}

.scanline{
  position:fixed;
  inset:0;

  background:
  linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0,0,0,0.2) 50%
  );

  background-size:100% 4px;

  pointer-events:none;

  z-index:9998;
  opacity:0.1;
}

#flash{
  position:fixed;
  inset:0;

  background:#fff;

  opacity:0;
  pointer-events:none;

  z-index:9000;
}

@keyframes whiteFlash{
  0%{opacity:0}
  20%{opacity:0.6}
  100%{opacity:0}
}

.flash-anim{
  animation:whiteFlash 0.1s ease-out forwards;
}

@keyframes textFlashAnim{

  0%{
    color:#2a2520;
    text-shadow:none;
  }

  20%{
    color:#fff;

    text-shadow:
      0 0 15px #fff,
      0 0 30px #fff;
  }

  100%{
    color:#2a2520;
    text-shadow:none;
  }
}

.text-flash{
  animation:textFlashAnim 0.1s ease-out forwards;
}

#loader{
  position:fixed;
  inset:0;

  background:#040404;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  z-index:500;

  transition:opacity 0.4s ease;
}

#loader.out{
  opacity:0;
  pointer-events:none;
}

#loaderName{
  font-family:"Bebas Neue",sans-serif;

  font-size:clamp(4rem,16vw,10rem);

  letter-spacing:0.18em;

  color:#2a2520;

  line-height:0.8;

  user-select:none;

  cursor:pointer;

  transition:color 0.2s ease;
}

#loaderName:hover{
  color:#888;
}

#skip{
  cursor:pointer;

  margin-top:20px;

  font-size:0.6rem;

  letter-spacing:0.3em;

  color:#222;

  text-transform:uppercase;

  transition:color 0.2s;
}

#skip:hover{
  color:#666;
}

#profile{
  opacity:0;
  pointer-events:none;

  transition:opacity 1s ease;

  min-height:100vh;

  display:flex;
  flex-direction:column;
  align-items:center;

  perspective:1000px;
}

#profile.show{
  opacity:1;
  pointer-events:all;
}

.banner{
  width:100%;
  height:160px;

  background:#040404;

  border-bottom:1px solid #0e0e0e;

  position:relative;
  overflow:hidden;
}

#bcanvas{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  filter:blur(3px) brightness(1.2);

  opacity:0.6;
}

.bover{
  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to bottom,
    transparent 40%,
    #040404 100%
  );
}

.card{
  width:100%;
  max-width:440px;

  padding:0 1.5rem 5rem;

  margin-top:-40px;

  position:relative;
  z-index:2;

  transition:transform 0.1s ease-out;
}

#profile .pfp-row,
#profile .uname,
#profile .handle,
#profile .bio,
#profile .div,
#profile .links,
#profile .foot{

  opacity:0;

  transform:translateY(15px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

#profile.show .pfp-row{
  transition-delay:0.1s;
  opacity:1;
  transform:translateY(0);
}

#profile.show .uname{
  transition-delay:0.2s;
  opacity:1;
  transform:translateY(0);
}

#profile.show .handle{
  transition-delay:0.3s;
  opacity:1;
  transform:translateY(0);
}

#profile.show .bio{
  transition-delay:0.4s;
  opacity:1;
  transform:translateY(0);
}

#profile.show .div{
  transition-delay:0.5s;
  opacity:1;
  transform:translateY(0);
}

#profile.show .links{
  transition-delay:0.6s;
  opacity:1;
  transform:translateY(0);
}

#profile.show .foot{
  transition-delay:0.7s;
  opacity:1;
  transform:translateY(0);
}

.pfp-row{
  display:flex;
  align-items:center;
  margin-bottom:1.4rem;
}

.pfp-outer{
  position:relative;
}

.pfp-ring{
  position:absolute;
  inset:-5px;

  border-radius:50%;
  border:1px solid #3a3020;

  animation:ringSpin 8s linear infinite;
}

@keyframes ringSpin{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}

.pfp-inner{
  position:absolute;
  inset:-2px;

  border-radius:50%;
  border:1px solid #0e0e0e;
}

.pfp{
  width:80px;
  height:80px;

  border-radius:50%;

  background:#0a0a0a;

  border:3px solid #040404;

  display:flex;
  align-items:center;
  justify-content:center;

  font-family:"Bebas Neue",sans-serif;

  font-size:1.8rem;

  letter-spacing:0.08em;

  color:#1e1e1e;

  background-size:cover;
  background-position:center;
}

.online-badge{
  position:absolute;

  right:-12px;
  bottom:4px;

  display:flex;
  align-items:center;
  gap:6px;

  padding:6px 10px;

  background:#080808;

  border:1px solid #111;

  border-radius:999px;

  font-size:0.45rem;

  letter-spacing:0.18em;

  color:#444;

  text-transform:uppercase;

  backdrop-filter:blur(10px);

  z-index:5;
}

.odot{
  width:4px;
  height:4px;

  border-radius:50%;

  background:#0e2a18;

  animation:bl 2.5s infinite;
}

@keyframes bl{
  0%,100%{opacity:1}
  50%{opacity:0.15}
}

.uname{
  font-family:"Bebas Neue",sans-serif;

  font-size:2.2rem;

  letter-spacing:0.1em;

  color:#9a9590;

  margin-bottom:2px;
}

.handle{
  font-size:0.55rem;

  letter-spacing:0.25em;

  color:#181818;

  text-transform:uppercase;

  margin-bottom:1.2rem;
}

.bio{
  margin-bottom:2rem;
}

.presence-card{

  display:flex;
  gap:14px;
  align-items:flex-start;

  border:1px solid #111;

  background:
  linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.005)
  );

  padding:14px;

  border-radius:12px;

  backdrop-filter:blur(10px);

  position:relative;

  overflow:hidden;
}

.presence-card::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:2px;
  height:100%;

  background:#3a3020;
}

.presence-icon{

  width:64px;
  height:64px;

  border-radius:10px;

  object-fit:cover;

  flex-shrink:0;

  border:1px solid #1a1a1a;
}

.presence-content{
  flex:1;
  min-width:0;
}

.presence-label{

  font-size:0.45rem;

  letter-spacing:0.25em;

  color:#666;

  margin-bottom:8px;

  text-transform:uppercase;
}

.presence-main{

  font-size:0.95rem;

  color:#d0cbc5;

  margin-bottom:4px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.presence-sub{

  font-size:0.58rem;

  color:#777;

  margin-bottom:10px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.spotify-bar{

  width:100%;
  height:4px;

  background:#111;

  border-radius:999px;

  overflow:hidden;

  margin-bottom:6px;
}

.spotify-fill{

  height:100%;

  background:#d0cbc5;

  border-radius:999px;
}

.spotify-times{

  display:flex;
  justify-content:space-between;

  font-size:0.48rem;

  color:#555;
}

.div{
  width:100%;
  height:1px;

  background:#0e0e0e;

  margin-bottom:1.4rem;
}

.links{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.lnk{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:1rem 1rem;

  background:
  linear-gradient(
    to right,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.005)
  );

  border:1px solid #151515;

  color:#777;

  text-decoration:none;

  font-size:0.62rem;

  letter-spacing:0.22em;

  text-transform:uppercase;

  transition:
    border-color 0.2s,
    color 0.2s,
    transform 0.2s;
}

.lnk:hover{
  border-color:#3a3020;
  color:#d0cbc5;
  transform:translateX(4px);
}

.arr{
  font-size:0.7rem;

  color:#555;

  transition:
    color 0.2s,
    transform 0.2s;

  display:inline-block;
}

.lnk:hover .arr{
  color:#d0cbc5;
  transform:translateX(3px);
}

.foot{
  padding-top:3rem;

  font-size:0.85rem;

  letter-spacing:0.25em;

  color:#ffffff;

  text-transform:uppercase;

  text-align:center;
}
:root {
  --eye-size: 20px;
}

.eye-anim {
  width: var(--eye-size);
  height: var(--eye-size);
  flex-shrink: 0;
  overflow: visible;
  color: #999999;
}

.eye-outline {
  stroke: currentColor;
  animation: eyeBlink 4s ease-in-out infinite;
  transform-origin: 12px 12px;
}

.eye-pupil {
  fill: currentColor;
  animation: pupilMove 4s ease-in-out infinite;
}

@keyframes eyeBlink {
  0%, 40%, 60%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.08); }
}

@keyframes pupilMove {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
}

.view-counter {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem 1rem;
  background: linear-gradient(to right, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  border: 1px solid #151515;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: #999999;
  text-transform: uppercase;
  width: 100%;
}

.view-counter span {
  color: #ffffff;
  font-family: "Share Tech Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}