/* style.css - shadcn-inspired modern remix */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Bebas+Neue&display=swap');

:root{
  --bg:#09090b;
  --bg-2:#0c0c10;
  --ink:#fafafa;
  --muted:#a1a1aa;
  --subtle:#71717a;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --ring:rgba(168,85,247,0.45);
  --accent1:#a855f7;
  --accent2:#60a5fa;
  --accent3:#8b5cf6;
  --glow:rgba(168,85,247,0.22);
  --glow-soft:rgba(168,85,247,0.14);
  --glass:rgba(24,24,27,0.55);
  --glass-strong:rgba(9,9,11,0.7);
  --fade-time:1.4s;
  --card-radius:20px;
  --bg-opacity:1;
}

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

/* hide OS cursor and use custom cursor element — PC only */
body:not(.touch-device) *{cursor:none !important;}
@media (hover: none), (pointer: coarse){
  *{cursor:auto !important;}
  #custom-cursor{display:none !important;}
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:'Geist','Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:"cv11","ss01","ss03";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  letter-spacing:-0.01em;
}

/* Lucide icon defaults */
.lucide{width:18px;height:18px;flex-shrink:0;color:currentColor;}

/* Background video (starts blurred) */
#bg-video{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;
  filter:brightness(.28) saturate(.9) blur(22px);
  transition:filter var(--fade-time) ease, transform var(--fade-time) ease, opacity .5s ease;
  transform:scale(1.02);
  opacity:var(--bg-opacity);
}
#bg-image{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;
  filter:brightness(.28) saturate(.9) blur(22px);
  opacity:0;transition:opacity .5s ease;
}
#bg-video.bg-fade,
#bg-image.bg-fade{opacity:0;}
#bg-video.bg-show,
#bg-image.bg-show{opacity:var(--bg-opacity);}

/* subtle slow zoom */
@keyframes slowZoom{0%{transform:scale(1.02)}100%{transform:scale(1.05)}}
#bg-video{animation:slowZoom 40s linear infinite;}

/* dim overlay with vignette */
#blur-overlay{
  position:fixed;inset:0;z-index:1;
  background:
    radial-gradient(ellipse at center, rgba(9,9,11,0.35) 0%, rgba(9,9,11,0.78) 100%),
    linear-gradient(180deg,rgba(9,9,11,0.6),rgba(9,9,11,0.4));
  transition:opacity var(--fade-time) ease;
}

/* grain overlay */
#grain{position:fixed;inset:-120px;z-index:2;pointer-events:none;opacity:.14;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.45'/></svg>");mix-blend-mode:overlay;}

/* Intro overlay */
#intro{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;pointer-events:auto;}
.enter-text{
  font-family:'Geist',system-ui;
  font-weight:600;
  letter-spacing:-0.04em;
  font-size:56px;
  color:var(--ink);
  text-shadow:0 0 28px rgba(168,85,247,0.25);
  min-height:60px;
}
.enter-text::after{
  content:"|";margin-left:6px;color:var(--accent1);font-weight:300;
  animation:cursorBlink .9s steps(1) infinite;
}

/* top-right view */
#top-right{position:fixed;right:18px;top:16px;z-index:50;display:flex;align-items:center;gap:12px;opacity:0;transition:opacity 1s ease;}
#top-right.fadein{opacity:1;}
#views{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;
  border-radius:9999px;
  background:var(--glass);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.4);
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  transition:border-color .2s ease, transform .2s ease;
}
#views:hover{border-color:var(--border-strong);}
#views .lucide{width:15px;height:15px;color:var(--muted);}
#view-count{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}

/* custom cursor */
#custom-cursor{position:fixed;width:30px;height:30px;pointer-events:none;z-index:999;transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 10px var(--glow-soft));opacity:0;transition:transform .12s ease, opacity .3s ease}
#custom-cursor.active{opacity:1;}
body.touch-device #custom-cursor{display:none;}

/* Main stage */
#stage{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;pointer-events:none;opacity:0;transition:opacity var(--fade-time) ease;perspective:1200px;}
#stage.fadein{opacity:1;}
#stage .profile-card{pointer-events:auto;}

.profile-card{
  width:min(560px,90vw);
  padding:32px 32px 28px;
  border-radius:var(--card-radius);
  background:linear-gradient(180deg,rgba(24,24,27,0.72),rgba(9,9,11,0.6));
  border:1px solid var(--border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 0 1px rgba(255,255,255,0.02),
    0 24px 60px rgba(0,0,0,0.55),
    0 0 80px rgba(168,85,247,0.06);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  text-align:center;
  transform-style:preserve-3d;
  will-change:transform;
  position:relative;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.profile-card::before{
  content:"";position:absolute;inset:0;border-radius:var(--card-radius);pointer-events:none;
  background:radial-gradient(600px circle at 50% -10%, rgba(168,85,247,0.12), transparent 60%);
  opacity:.9;
}
.profile-card:hover{
  border-color:var(--border-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(168,85,247,0.08),
    0 24px 60px rgba(0,0,0,0.55),
    0 0 100px rgba(168,85,247,0.1);
}

.profile-head{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;text-align:center;position:relative;}
.pfp-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.pfp-wrap::before{
  content:"";position:absolute;inset:-8px;border-radius:22px;
  border:1px solid rgba(168,85,247,0.18);
  box-shadow:0 0 24px rgba(168,85,247,0.18);
  animation:orbitPulse 4s ease-in-out infinite;
}
.pfp-wrap::after{
  content:"";position:absolute;inset:-16px;border-radius:26px;
  border:1px dashed rgba(168,85,247,0.1);
  animation:orbitSpin 28s linear infinite;
}
.status-dot{
  position:absolute;right:4px;bottom:4px;width:14px;height:14px;border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(9,9,11,0.9), 0 0 14px rgba(34,197,94,0.55);
}
.status-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:999px;
  background:rgba(34,197,94,0.45);
  animation:pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{0%{transform:scale(.8);opacity:.6}100%{transform:scale(1.8);opacity:0}}
.pfp{width:108px;border-radius:16px;filter:drop-shadow(0 8px 24px rgba(168,85,247,0.22));animation:pfpulse 4s ease-in-out infinite;pointer-events:auto;}
@keyframes pfpulse{0%,100%{transform:translateY(0) translateZ(20px)}50%{transform:translateY(-4px) translateZ(20px)}}
@keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes orbitPulse{0%,100%{opacity:.7}50%{opacity:1}}

.profile-meta{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:4px;}
.typing-line{
  font-family:'Geist',system-ui;
  font-weight:700;
  font-size:42px;
  letter-spacing:-0.035em;
  color:var(--ink);
  background:linear-gradient(180deg,#fafafa 0%,#a1a1aa 130%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.05;
}
.typing-sub{
  font-size:14px;
  color:var(--muted);
  text-transform:lowercase;
  letter-spacing:0;
  min-height:20px;
  font-weight:400;
}
.typing-line::after,
.typing-sub::after{
  content:"|";margin-left:4px;color:var(--accent1);
  -webkit-text-fill-color:var(--accent1);
  animation:cursorBlink .9s steps(1) infinite;
  font-weight:300;
}
@keyframes cursorBlink{0%,45%{opacity:1}55%,100%{opacity:0}}
.typing-line.glitch{filter:drop-shadow(0 0 8px rgba(168,85,247,0.4));}
.typing-sub.glitch{text-shadow:0 0 6px rgba(96,165,250,0.4);}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;justify-content:center}
.chip{
  font-size:11px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  padding:4px 10px;
  border-radius:9999px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color:var(--muted);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.chip:hover{background:rgba(255,255,255,0.06);border-color:var(--border-strong);color:var(--ink);}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent);margin:24px 0 18px;}

/* icons row */
.links{display:flex;gap:8px;margin-top:4px;justify-content:center;flex-wrap:wrap;pointer-events:auto}
.crypto{
  appearance:none;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  padding:10px;
  border-radius:14px;
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, box-shadow .2s ease;
  position:relative;
}
.crypto img{width:60%;height:auto;filter:contrast(1.05) saturate(1.1);transition:transform .2s ease;}
.crypto:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.06);
  border-color:rgba(168,85,247,0.4);
  box-shadow:0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(168,85,247,0.2), 0 0 30px rgba(168,85,247,0.15);
}
.crypto:hover img{transform:scale(1.08);}
.crypto:active{transform:translateY(-1px);}

/* copy toast */
#copy-toast{
  position:fixed;left:50%;bottom:90px;transform:translateX(-50%);
  background:var(--glass-strong);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:10px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  opacity:0;
  z-index:60;
  transition:opacity .25s ease;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* bottom player */
#player-bar{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;align-items:center;gap:18px;
  padding:10px 18px;
  border-radius:9999px;
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 40px rgba(0,0,0,0.5);
  z-index:60;opacity:0;
  transition:opacity .9s ease, border-color .2s ease;
}
#player-bar:hover{border-color:var(--border-strong);}
#player-bar.active{opacity:1}
.slider-block{display:flex;align-items:center;gap:10px;}
.slider-label{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);}
.slider-label .lucide{width:16px;height:16px;}

#vol,
#bg-opacity{
  -webkit-appearance:none;appearance:none;
  width:140px;height:4px;
  border-radius:9999px;
  background:rgba(255,255,255,0.1);
  outline:none;
  transition:background .2s ease;
}
#vol:hover,
#bg-opacity:hover{background:rgba(255,255,255,0.14);}
#vol::-webkit-slider-thumb,
#bg-opacity::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--ink);
  border:2px solid #09090b;
  box-shadow:0 0 0 1px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.5);
  transition:transform .15s ease, box-shadow .15s ease;
}
#vol::-webkit-slider-thumb:hover,
#bg-opacity::-webkit-slider-thumb:hover{
  transform:scale(1.15);
  box-shadow:0 0 0 1px rgba(168,85,247,0.5), 0 2px 8px rgba(168,85,247,0.4);
}
#vol::-moz-range-thumb,
#bg-opacity::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  border:2px solid #09090b;
  background:var(--ink);
  box-shadow:0 0 0 1px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.5);
}

/* responsive — tablets */
@media (max-width:720px){
  .profile-card{width:min(440px,92vw);padding:26px 22px 22px;border-radius:18px;}
  .typing-line{font-size:36px}
  .typing-sub{font-size:13px;}
  .pfp{width:96px;border-radius:14px;}
  #vol,#bg-opacity{width:120px}
  .crypto{width:54px;height:54px;border-radius:12px;padding:8px;}
  #player-bar{padding:9px 14px;gap:14px;}
  .enter-text{font-size:46px;}
  .chip{font-size:10.5px;padding:3px 9px;}
  .divider{margin:20px 0 16px;}
  #views{padding:6px 11px;font-size:12px;}
}

/* responsive — phones */
@media (max-width:480px){
  .profile-card{
    width:calc(100vw - 24px);
    padding:22px 18px 20px;
    border-radius:16px;
  }
  .profile-head{gap:10px;}
  .typing-line{font-size:30px;letter-spacing:-0.03em;}
  .typing-sub{font-size:12.5px;min-height:18px;}
  .pfp{width:84px;border-radius:12px;}
  .pfp-wrap::before{inset:-6px;border-radius:18px;}
  .pfp-wrap::after{inset:-12px;border-radius:22px;}
  .status-dot{width:12px;height:12px;right:2px;bottom:2px;}
  .chips{gap:5px;margin-top:10px;}
  .chip{font-size:10px;padding:3px 8px;}
  .divider{margin:18px 0 14px;}
  .links{gap:6px;}
  .crypto{width:48px;height:48px;border-radius:11px;padding:7px;}
  .crypto img{width:64%;}
  #player-bar{
    bottom:14px;
    padding:8px 12px;
    gap:10px;
    border-radius:9999px;
    width:auto;
    max-width:calc(100vw - 24px);
  }
  #vol,#bg-opacity{width:88px;height:4px;}
  .slider-block{gap:8px;}
  .slider-label .lucide{width:14px;height:14px;}
  #top-right{right:12px;top:12px;}
  #views{padding:5px 10px;font-size:11.5px;}
  #views .lucide{width:13px;height:13px;}
  .enter-text{font-size:38px;letter-spacing:-0.035em;}
  #copy-toast{bottom:74px;font-size:12px;padding:8px 14px;}
}

/* very small phones */
@media (max-width:360px){
  .typing-line{font-size:26px;}
  .pfp{width:74px;}
  .crypto{width:44px;height:44px;}
  #vol,#bg-opacity{width:72px;}
}