:root{
  --bg: #0a0a0b;
  --bg2: #111114;
  --fg: #f2f2f4;
  --muted: #8a8a92;
  --line: rgba(255,255,255,.08);
  --glow: rgba(255,255,255,.35);
}
*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
body{
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  isolation:isolate;
}

/* ---------- layered background ---------- */
.bg-gradient{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(60% 50% at 50% 20%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, #0d0d10 0%, #0a0a0b 55%, #08080a 100%);
}
.bg-dots{
  position:fixed; inset:0; z-index:-3;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);
  opacity:.5;
}
.blob{
  position:fixed; z-index:-2;
  width:44vw; height:44vw;
  border-radius:50%;
  filter: blur(110px);
  opacity:.20;
  background: radial-gradient(circle, #ffffff 0%, transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
.blob.b2{
  right:-10vw; bottom:-10vw; left:auto; top:auto;
  width:38vw; height:38vw;
  opacity:.12;
  animation-duration: 32s;
  animation-delay: -6s;
}
.blob.b1{ left:-8vw; top:-6vw; }
@keyframes drift{
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(3vw,4vw) scale(1.08); }
  100% { transform: translate(-2vw,-3vw) scale(0.96); }
}

canvas#field{
  position:fixed; inset:0; z-index:-1;
  display:block;
}

.spotlight{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  background: radial-gradient(320px 320px at var(--x,50%) var(--y,40%), rgba(255,255,255,.06), transparent 70%);
  transition: opacity .3s ease;
}

/* ---------- watermark ---------- */
.watermark{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-55%);
  width:min(110vw, 1100px);
  z-index:-1;
  opacity:.012;
  filter: grayscale(1) contrast(1.1);
  pointer-events:none;
  user-select:none;
}
.watermark img{ width:100%; display:block; }

/* ---------- hero ---------- */
main{
  position:relative;
  z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 6vh 6vw;
  width:100%;
  max-width: 920px;
}

.title-row{
  --title-size: clamp(2.6rem, 9vw, 5.4rem);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(14px, 3vw, 28px);
}

.logo-mark{
  height: var(--title-size);
  width: auto;
  flex: none;
  display:block;
  opacity:0;
  animation: fadeUp .8s ease forwards;
  animation-delay:.05s;
}

h1.wordmark{
  font-family:'Orbitron', sans-serif;
  font-weight:900;
  font-size: var(--title-size);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
  line-height:1;
  background: linear-gradient(180deg, #ffffff 0%, #cfcfd4 55%, #8f8f96 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(255,255,255,.12);
  opacity:0;
  animation: fadeUp .8s ease forwards;
  animation-delay:.15s;
  text-align:center;
}

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- socials ---------- */
nav.socials{
  margin-top: 6vh;
  width:100%;
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 720px){
  nav.socials{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 380px){
  nav.socials{ grid-template-columns: 1fr; }
}

.card{
  --accent: #ffffff;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding: 24px 10px 6px;
  text-decoration:none;
  color: var(--fg);
  opacity:0;
  animation: fadeUp .7s ease forwards;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.card:nth-child(1){ animation-delay:.38s; }
.card:nth-child(2){ animation-delay:.46s; }
.card:nth-child(3){ animation-delay:.54s; }
.card:nth-child(4){ animation-delay:.62s; }
.card:nth-child(5){ animation-delay:.70s; }

/* top accent line, fading out toward each edge */
.card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  opacity:.3;
  transform: scaleY(1);
  transition: opacity .4s ease, filter .4s ease;
}
.card:hover, .card:focus-visible{
  transform: translateY(-4px);
}
.card:hover::before, .card:focus-visible::before{
  opacity:1;
  filter: drop-shadow(0 0 6px var(--accent));
}

/* soft colored blob glowing behind the icon on hover */
.card::after{
  content:"";
  position:absolute; top:37px; left:50%;
  width:64px; height:64px;
  transform: translate(-50%,-50%) scale(.5);
  border-radius:50%;
  background: radial-gradient(circle, var(--accent), transparent 70%);
  filter: blur(16px);
  opacity:0;
  z-index:0;
  pointer-events:none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.card:hover::after, .card:focus-visible::after{
  opacity:.55;
  transform: translate(-50%,-50%) scale(1);
}

.icon{
  width:26px; height:26px;
  color: var(--muted);
  position:relative;
  z-index:1;
  transition: color .35s ease, transform .35s ease;
}
.card:hover .icon, .card:focus-visible .icon{
  color: var(--accent);
  transform: scale(1.1);
}

.label{
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.1em;
  color: var(--muted);
  transition: color .35s ease;
}
.card:hover .label, .card:focus-visible .label{ color: var(--fg); }

.twitch   { --accent:#9146FF; }
.youtube  { --accent:#FF3B30; }
.tiktok   { --accent:#25F4EE; }
.facebook { --accent:#1877F2; }
.instagram{ --accent:#E1306C; }

footer{
  position:relative;
  z-index:1;
  width:100%;
  text-align:center;
  padding: 0 6vw 4vh;
  color: var(--muted);
  font-size:.75rem;
  letter-spacing:.08em;
  opacity:0;
  animation: fadeUpDim .8s ease forwards;
  animation-delay:.85s;
}

@keyframes fadeUpDim{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:.4; transform: translateY(0); }
}

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