/* ===== Base / Tokens ===== */
:root {
  --theme-color: #111316;
  --text-color: #f6f7f9;
  --muted: #b9c0cc;
  --accent-color: #ff3d2e;     /* fallback accent */
  --ring: color-mix(in oklab, var(--accent-color), white 25%);
  --glass: rgba(10,12,14,.55);
  --glass-strong: rgba(10,12,14,.72);
}

* { box-sizing: border-box }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--theme-color);
  color: var(--text-color);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ===== Backdrop ===== */
.bio-background{
  position: fixed; inset: 0; z-index: 0;
  background: var(--background-image, none) center/cover no-repeat;
  filter: brightness(.68) grayscale(.1);
  transform: translateZ(0);
}

/* ==== Frosted Glass Card ==== */
#tilt-container{
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  padding-top: 25px;

  /* tilt inputs (JS sets these) */
  --mx:.5; --my:.5;
  --tilt-max-x:15; /* deg */ 
  --tilt-max-y:15; /* deg */

  /* frosted base */

  border: 1.25px solid color-mix(in oklab, var(--accent-color), black 45%);
  border-radius: 20px;

  /* the actual frost */
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  box-shadow:
    0 12px 38px rgba(0,0,0,.45),
    0 0 0 1px color-mix(in oklab, var(--accent-color), black 65%) inset;
}

/* top-left edge highlight for glass */
#tilt-container::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  background:
    linear-gradient(160deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 35%) top left / 100% 100% no-repeat,
    linear-gradient( to bottom, rgba(255,255,255,.05), rgba(255,255,255,0) );
  mix-blend-mode: screen;
  opacity:.85;
}

/* fine noise so it feels like glass, not plastic */
#tilt-container::marker, /* keep linters calm */
#tilt-container ._ { display:none }
#tilt-container::selection { background: none }
#tilt-container::after{
  /* we already used ::after for the glow earlier — move glow to ::glow below */
  content: none;
}

/* keep your parallax glow but on a dedicated pseudo so it stacks above noise */
#tilt-container::glow{ content:"" } /* alias, no-op for validators */

/* real glow layer */
#tilt-container > .__glow,
#tilt-container::part(glow){ display:none } /* in case of web components */

#tilt-container::file-selector-button{ display:none } /* harmless */

#tilt-container:has(*)::shadow{ display:none } /* harmless */

/* parallax glow – same behavior as before */
#tilt-container::after{
  content:"";
  position:absolute; inset:-1px; pointer-events:none; border-radius: inherit;
  opacity:0; transition: opacity .2s ease;
  background:
    radial-gradient(
      650px 650px at calc(var(--mx) * 100%) calc(var(--my) * 100%),
      color-mix(in oklab, var(--accent-color, #ff3d2e), transparent 78%) 0%,
      transparent 60%
    );
}
#tilt-container:is(:hover,:focus-within)::after{ opacity:.9 }

/* tasteful lift on hover */
#tilt-container:is(:hover,:focus-within){
  box-shadow:
    0 18px 56px rgba(0,0,0,.55),
    0 0 0 1px var(--ring) inset;
  border-color: var(--ring);
  transform: perspective(1200px) translateY(-4px); /* rotation is handled by JS */
}



/* ===== Content ===== */
.main-content{
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px 24px;
  width: 100%;
}

.profile-main-card, .profile-card{
  width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center;
}

/* PFP — fixed the “too big” look, now clamped + ring */
.profile-pic{
  --pfp: clamp(96px, 20vw, 132px);
  width: var(--pfp); height: var(--pfp);
  border-radius: 999px;
  border: 3px solid color-mix(in oklab, var(--accent-color), white 10%);
  outline: 6px solid rgba(0,0,0,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.45),
              0 0 22px color-mix(in oklab, var(--accent-color), transparent 70%);
  margin-bottom: 12px; object-fit: cover;
}

/* ===== Username row ===== */
.bio-username-wrapper{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; max-width: 100%; min-width: 200px; overflow: hidden;
}
.bio-username{
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  font-size: clamp(26px, 4.6vw, 36px); line-height: 1.05; font-weight: 800;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 3px;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
#type-username{ white-space: nowrap }

.bio-caret{
  width: 2px; height: 1em; background: currentColor; opacity: .9;
  animation: blink-caret 1s steps(1) infinite;
}
@keyframes blink-caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.bio-badges{ display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0 }
.bio-badge{ width: 22px; height: 22px; display: inline-grid; place-items: center }
.bio-badge img, .bio-badge svg{
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent-color), transparent 60%));
}

/* ===== About line — no layout shift while typing ===== */
.bio-about{
  width: 100%; text-align: center; margin: 10px 0 16px;
  font-size: 1.05rem; font-weight: 600; color: var(--muted);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.bio-about[data-bio]::after{
  content: attr(data-bio); visibility: hidden; display: block; height: 0; pointer-events: none;
}

/* ===== Icon row ===== */
.icon-row{
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center;
}
.icon-btn{
  display: inline-grid; place-items: center;
  width: clamp(34px, 7.2vw, 48px); height: clamp(34px, 7.2vw, 48px);
  border-radius: 12px;
  background: transparent; text-decoration: none; outline: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.icon-btn:hover{ transform: translateY(-2px); background: rgba(255,255,255,.06) }
.icon-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,0,0,.5), 0 0 0 5px var(--ring);
}
.icon-btn svg{ width: 56%; height: 56%; filter: drop-shadow(0 0 10px rgba(0,0,0,.35)) }

/* ===== Buttons / Links ===== */
.links-section{ display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 20px 0 10px }

.bio-link-btn,
.discord-card{
  width: min(360px, 92vw); height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-weight: 800; letter-spacing: .02em; text-decoration: none;
  border: 1.75px solid color-mix(in oklab, var(--accent-color), black 35%);
  background: linear-gradient(180deg, var(--glass), var(--glass-strong));
  color: var(--text-color);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.bio-link-btn:hover,
.discord-card:hover{
  border-color: var(--ring);
  box-shadow: 0 14px 36px rgba(0,0,0,.45),
              0 0 22px color-mix(in oklab, var(--accent-color), transparent 70%);
  transform: translateY(-1.5px);
}
.bio-link-btn.outline{
  background: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: none;
}

/* ===== Discord pill ===== */
.discord-pfp{
  width: 36px; height: 36px; border-radius: 999px; flex: 0 0 auto;
  border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4)
}
.discord-info{ display: flex; align-items: center; gap: 10px; min-width: 0; width: 100% }
.discord-username, .discord-link{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .98rem; line-height: 1.1
}
.discord-username{ color: var(--accent-color); font-weight: 800 }
.discord-link{ color: #fff; text-decoration: underline }

/* ===== Cards / Glow ===== */
.card{ transition: transform .14s cubic-bezier(.32,.63,.23,.99); will-change: transform }
#main{
  position: relative; border-radius: 16px; overflow: clip; transform-style: preserve-3d;
  background: #0e1012; transition: box-shadow .3s ease;
}
#main::after{
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(650px circle at var(--glow-x,50%) var(--glow-y,50%),
              color-mix(in oklab, var(--accent-color), transparent 80%) 0%,
              transparent 60%);
  transition: opacity .25s ease;
}
#main:hover::after{ opacity: 1 }

/* ===== Mobile polish ===== */
@media (max-width: 800px){
  #tilt-container{ max-width: 94vw; border-radius: 20px }
  .profile-pic{ --pfp: clamp(88px, 22vw, 110px) }
  .bio-link-btn, .discord-card{ width: 96vw }
  .main-content{ padding: 28px 12px 18px }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important }
}
