/* ===========================
   Tobias Götz – One Page
   =========================== */

/* --- Base --- */
body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #0a0a0a;
  overflow-x: hidden;
  line-height: 1.625;
}

/* --- Gradient mesh background --- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(56, 60, 120, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 75%, rgba(40, 80, 110, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(80, 60, 120, 0.06) 0%, transparent 50%);
}

/* --- Subtle noise texture --- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* --- Ambient glow behind portrait --- */
.portrait-wrapper {
  position: relative;
}

.portrait-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 120, 220, 0.30) 0%, rgba(80, 100, 200, 0.14) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 6s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

.portrait-glow {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 50px rgba(100, 120, 220, 0.25)) drop-shadow(0 0 20px rgba(140, 160, 255, 0.10));
}

/* --- Decorative line --- */
.divider-line {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  margin: 0 auto;
  border-radius: 1px;
}

/* --- Heading glow --- */
h1, h2 {
  text-shadow: 0 0 20px rgba(140, 160, 255, 0.3), 0 0 50px rgba(100, 120, 220, 0.15), 0 0 80px rgba(100, 120, 220, 0.06);
}

/* --- Tags --- */
.tag {
  transition: all 0.25s ease;
}

.tag:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* --- Contact buttons --- */
.contact-btn {
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.03);
}

.contact-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

/* --- Fade-in animations --- */
.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.fade-in-delay-1 { animation-delay: 0.15s; }
.fade-in-delay-2 { animation-delay: 0.3s; }
.fade-in-delay-3 { animation-delay: 0.45s; }
.fade-in-delay-4 { animation-delay: 0.6s; }
.fade-in-delay-5 { animation-delay: 0.75s; }

/* --- Focus styles (WCAG 2.4.7 / 2.4.11) --- */
a:focus-visible,
.contact-btn:focus-visible {
  outline: 3px solid #8ca0ff;
  outline-offset: 3px;
  border-radius: 9999px;
}

/* --- Reduced motion (WCAG 2.3.3) --- */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    animation: none;
    opacity: 1;
  }

  .portrait-wrapper::before {
    animation: none;
  }

  .tag,
  .contact-btn {
    transition: none;
  }
}

/* --- Screenreader only --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- Footer divider glow --- */
footer {
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}