/* --- CYBERPUNK 2077 THEME --- */

/* --- VARIABLES --- */
:root {
  --primary-yellow: #fcee0a;
  --cyber-cyan: #00f0ff;
  --cyber-magenta: #ff00f0;
  --dark-background: #0a0a0a;
  --dark-blue: #0d003a;
}

/* --- GLOBAL RESET & BOX-SIZING --- */
*, *::before, *::after { box-sizing: border-box; }

/* --- BASE & BODY --- */
body {
  background-color: var(--dark-background);
  background-image: radial-gradient(circle at top left, var(--dark-blue), var(--dark-background) 40%);
  color: var(--primary-yellow);
  font-family: 'Orbitron', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  overflow-y: auto; /* Allow vertical scrolling if content overflows */
}

.container {
  text-align: center;
  width: 100%;
  max-width: 720px; /* a bit wider so long titles can breathe */
  padding: 0 20px; /* horizontal padding for all screen sizes */
  z-index: 2;
}

/* --- SCANLINES EFFECT --- */
.scanlines {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.4) 1px,
    rgba(0, 0, 0, 0) 2px
  );
  animation: scan 10s linear infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes scan {
  0% { background-position: 0 0; }
  100% { background-position: 0 100px; }
}

/* --- HEADER & TITLE --- */
.sub-header {
  color: var(--cyber-cyan);
  text-shadow: 0 0 5px var(--cyber-cyan);
  letter-spacing: 0.2em;
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  margin-top: -10px;
}

/*
  RESPONSIVE, NO-WRAP, AUTO-FIT TITLE
  - Uses clamp to scale with viewport
  - white-space: nowrap prevents stacking/wrapping
  - JS (script.js) will fine-tune the font-size so it fills the width without overflow
*/
.glitch {
  display: inline-block;
  white-space: nowrap;         /* <- prevents letters stacking onto next line */
  max-width: 100%;
  overflow: hidden;            /* hide any tiny overflow while JS adjusts size */
  font-size: clamp(28px, 10vw, 88px);
  font-weight: 700;
  position: relative;
  text-transform: uppercase;
  text-shadow: 0 0 5px var(--primary-yellow), 0 0 10px var(--primary-yellow);
  animation: glitch-main 5s infinite linear;
  letter-spacing: clamp(0.04em, 0.7vw, 0.12em); /* track opens up on large screens */
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  background: inherit;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--cyber-magenta);
  clip: rect(44px, 9999px, 56px, 0);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--cyber-cyan), 2px 2px var(--cyber-magenta);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(42px, 9999px, 44px, 0); }
  20% { clip: rect(12px, 9999px, 60px, 0); }
  40% { clip: rect(50px, 9999px, 102px, 0); }
  60% { clip: rect(90px, 9999px, 2px, 0); }
  80% { clip: rect(30px, 9999px, 92px, 0); }
  100% { clip: rect(54px, 9999px, 84px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(2px, 9999px, 98px, 0); }
  20% { clip: rect(78px, 9999px, 2px, 0); }
  40% { clip: rect(86px, 9999px, 40px, 0); }
  60% { clip: rect(36px, 9999px, 100px, 0); }
  80% { clip: rect(23px, 9999px, 5px, 0); }
  100% { clip: rect(47px, 9999px, 103px, 0); }
}

@keyframes glitch-main {
  0%, 100% { transform: skewX(0); }
  49.5% { transform: skewX(0); }
  50% { transform: skewX(2deg); }
  50.5% { transform: skewX(0); }
}

/* --- SOCIAL LINKS --- */
.social-links {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vh, 1.25rem);
  margin-top: clamp(2rem, 5vh, 2.5rem);
}

.social-button {
  color: #fff;
  text-decoration: none;
  font-size: clamp(1rem, 3vw, 1.2rem);
  padding: 0.75em 1.5em;
  position: relative;
  border: 2px solid;
  transition: transform 0.2s ease, filter 0.2s ease, background-color 0.3s ease;
  display: flex; align-items: center; justify-content: center; gap: 15px;
}

.social-button:active { transform: scale(0.98); filter: brightness(0.9); }

@media (hover: hover) {
  .social-button:hover { background-color: rgba(255, 255, 255, 0.1); }
}

.social-button.twitter {
  border-color: var(--cyber-cyan);
  box-shadow: 0 0 10px var(--cyber-cyan), inset 0 0 10px var(--cyber-cyan);
  text-shadow: 0 0 5px var(--cyber-cyan);
}

.social-button.instagram {
  border-color: var(--cyber-magenta);
  box-shadow: 0 0 10px var(--cyber-magenta), inset 0 0 10px var(--cyber-magenta);
  text-shadow: 0 0 5px var(--cyber-magenta);
}

.social-button.tiktok {
  border-color: var(--primary-yellow);
  box-shadow: 0 0 10px var(--primary-yellow), inset 0 0 10px var(--primary-yellow);
  text-shadow: 0 0 5px var(--primary-yellow);
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
  /* Disable heavy pseudo-element glitch animations on mobile for perf */
  .glitch::before, .glitch::after { content: none; animation: none; }
  .container { max-width: 92vw; }
}

/* --- DESKTOP XL --- */
@media (min-width: 1280px) {
  .container { max-width: 860px; }
}

/* --- MAIN DOMAIN (MINIMAL) --- */
.main-domain-minimal { margin-top: 1rem; }
.domain-link {
  color: var(--primary-yellow);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.08rem 0.18rem; /* tiny hit area */
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border: 1px solid rgba(255,255,255,0.03);
}
.domain-link:focus, .domain-link:hover {
  outline: none;
  box-shadow: 0 0 10px rgba(0,240,255,0.06);
  text-decoration: none;
}

/* Accessibility helper */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* --- FOOTER --- */
.site-footer {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
}
.footer-inner {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center; /* center the footer content */
  flex-direction: column; /* stack on small screens by default */
  max-width: 720px;
  margin: 0 auto;
  padding: 0.75rem 0;
  text-align: center;
}
.site-footer nav a {
  color: rgba(255,255,255,0.6);
  margin-left: 0.75rem;
  text-decoration: none;
}
.site-footer nav a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 520px) {
  .footer-inner { flex-direction: column; gap: 0.25rem; }
  .site-footer nav { display: flex; gap: 0.5rem; }
}