:root {
  /* Typography & palette */
  --font-primary: 'Fira Mono', monospace;
  --color-text: hsl(0 0% 95%);

  /* Animated gradient colours */
  --g1: hsl(260 60% 45%);
  --g2: hsl(290 55% 40%);
  --g3: hsl(330 70% 55%);
  --g4: hsl(10 80% 60%);

  /* Glass tokens */
  --glass-bg: hsla(0 0% 0% / 0.25); /* dark matte */
  --glass-blur: 30px;
  --glass-border: hsla(0 0% 100% / 0.12);
  --glass-radius: 20px;
  --glass-shadow: 0 0 20px hsla(0 0% 0% / 0.35);

  /* Motion */
  --dur-long: 30s;
  --dur-med: 18s;
  --dur-short: 8s;
}

html,body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none; /* disable rubber-band on supported browsers */
  background: #000; /* fallback to avoid white gaps on iOS bounce */
}

body {
  font-family: var(--font-primary);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
        /* base noise */
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTYwJyBoZWlnaHQ9JzE2MCcgdmlld0JveD0nMCAwIDE2MCAxNjAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGZpbHRlciBpZD0nYic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAnIG51bU9jdGF2ZXM9JzInIGFtcGxpdHVkZT0nMSc+PC9mZVR1cmJ1bGVuY2U+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE2MCcgaGVpZ2h0PScxNjAnIGZpbHRlcj0ndXJsKCNiKScvPjwvc3ZnPg==") repeat,
    radial-gradient(circle at 80% 20%, hsla(0,0%,100%,0.08) 0%, transparent 60%),
    linear-gradient(115deg,var(--g1),var(--g2),var(--g3),var(--g4));
  background-size: 150px 150px, 250% 250%, 300% 300%;
  animation:
    noiseMove var(--dur-short) linear infinite,
    radialMove var(--dur-med) ease-in-out infinite alternate,
    gradientMove var(--dur-long) ease-in-out infinite alternate;
}

/* ------------ Animations ------------ */
@keyframes gradientMove {
  0%{background-position:0% 100%}
  50%{background-position:100% 0%}
  100%{background-position:0% 100%}
}
@keyframes radialMove{
  0%{background-position:20% 0%}
  100%{background-position:80% 100%}
}
@keyframes noiseMove{
  0%{background-position:0 0}
  100%{background-position:150px 150px}
}

/* ------------ Glass Utility ------------ */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

/* ------------ Layout helpers ------------ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  padding: calc(env(safe-area-inset-top) + 0.8rem) 1.5rem 0.8rem;
  border-radius: 0 0 var(--glass-radius) var(--glass-radius);
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left,.nav-right{display:flex;align-items:center;gap:2rem;}
.nav-left a{letter-spacing:2px;text-decoration:none;color:var(--color-text);opacity:0.7;transition:opacity .2s}
.nav-left a:hover,.nav-left a.active{opacity:1}

/* Responsive nav */
@media(max-width:600px){
  .nav-left{gap:1rem}
}

.content-wrapper{
  flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:2rem;margin-top:70px; /* header offset */
}

/* ------------ Social Icons ------------ */
.social-icon {
  color: var(--color-text);
  text-decoration: none;
  font-size: 1.5rem;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.social-icon:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ------------ Typewriter Text ------------ */
.typewriter, .typewriter2 {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  user-select: none;
  text-shadow: 0 0 15px hsla(0 0% 100% / 0.5);
}

.typewriter {
  font-size: clamp(2rem, 10vw, 8rem);
  font-weight: bold;
  letter-spacing: 0.07em;
  margin-bottom: 1rem;
  border-right: 3px solid var(--color-text);
  animation: blink 0.7s step-end infinite;
}

.typewriter2 {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  letter-spacing: 0.1em;
  border-right: 3px solid var(--color-text);
  animation: blink 0.7s step-end infinite;
}

.typing-complete {
  border-right: none;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* ------------ Extra Noise Layer ------------ */

/* ------------ Safe-area support for iOS notch/bottom bar ------------ */
html{
  background:
        /* base noise */
    url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTYwJyBoZWlnaHQ9JzE2MCcgdmlld0JveD0nMCAwIDE2MCAxNjAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PGZpbHRlciBpZD0nYic+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9JzAnIG51bU9jdGF2ZXM9JzInIGFtcGxpdHVkZT0nMSc+PC9mZVR1cmJ1bGVuY2U+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE2MCcgaGVpZ2h0PScxNjAnIGZpbHRlcj0ndXJsKCNiKScvPjwvc3ZnPg==") repeat,
    radial-gradient(circle at 80% 20%, hsla(0,0%,100%,0.08) 0%, transparent 60%),
    linear-gradient(115deg,var(--g1),var(--g2),var(--g3),var(--g4));
  background-size: 150px 150px, 250% 250%, 300% 300%;
  animation:
    noiseMove var(--dur-short) linear infinite,
    radialMove var(--dur-med) ease-in-out infinite alternate,
    gradientMove var(--dur-long) ease-in-out infinite alternate;
}

body{
  padding-bottom: env(safe-area-inset-bottom);
}

/* ------------ Extra Noise Layer ------------ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJyBvcGFjaXR5PScuMTUnPjxmaWx0ZXIgaWQ9J24nPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjcnIG51bU9jdGF2ZXM9JzInLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9InVybCgjbikiIC8+PC9zdmc+") repeat;
  background-size: 200px 200px;
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: -1;
}