*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --black: #0a0a0a;
  --white: #f0f0f0;
  --grey: #888;
  --silver: #b0b0b0;
  --accent: #00A8E0;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hero */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.glitch-wrapper {
  position: relative;
  width: min(460px, 80vw);
}

.logo {
  width: 100%;
  height: auto;
  user-select: none;
  display: block;
}

/* Glitch effect on hover */

.glitch-wrapper::before,
.glitch-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0;
  pointer-events: none;
}

.glitch-wrapper:hover .logo {
  animation: glitch-base 600ms steps(5) 1;
}

.glitch-wrapper:hover::before {
  background: url('damagedev_v7.png') center / 100% auto no-repeat;
  opacity: 0.75;
  animation: glitch-layer 600ms steps(5) 1;
  mix-blend-mode: screen;
  filter: hue-rotate(180deg);
}

.glitch-wrapper:hover::after {
  background: url('damagedev_v7.png') center / 100% auto no-repeat;
  opacity: 0.75;
  animation: glitch-layer 600ms steps(5) 1 reverse;
  mix-blend-mode: screen;
  filter: hue-rotate(-60deg);
}

@keyframes glitch-base {
  0%   { transform: translate(0); }
  15%  { transform: translate(-3px, 1px); }
  30%  { transform: translate(2px, -1.5px); }
  45%  { transform: translate(-1.5px, -2px); }
  60%  { transform: translate(2.5px, 1.5px); }
  75%  { transform: translate(-1px, 2px); }
  90%  { transform: translate(1.5px, -1px); }
  100% { transform: translate(0); }
}

@keyframes glitch-layer {
  0%   { transform: translate(0); clip-path: inset(15% 0 65% 0); }
  15%  { transform: translate(5px, -2px); clip-path: inset(50% 0 10% 0); }
  30%  { transform: translate(-4px, 1px); clip-path: inset(5% 0 75% 0); }
  45%  { transform: translate(3px, 2px); clip-path: inset(65% 0 5% 0); }
  60%  { transform: translate(-5px, -1px); clip-path: inset(25% 0 45% 0); }
  75%  { transform: translate(4px, 1.5px); clip-path: inset(40% 0 20% 0); }
  90%  { transform: translate(-2px, -2px); clip-path: inset(70% 0 10% 0); }
  100% { transform: translate(0); clip-path: inset(0); }
}

.tagline {
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  letter-spacing: 0.35em;
  text-transform: lowercase;
  color: var(--silver);
}

/* Projects */

.projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 2rem;
  border: 1px solid #222;
  border-radius: 10px;
  text-decoration: none;
  color: var(--white);
  transition: border-color 0.2s, background 0.2s;
}

.project-card:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.03);
}

.project-name {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.project-desc {
  font-size: 0.8rem;
  color: var(--grey);
}

/* Footer */

footer {
  padding: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--grey);
}

footer a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

footer a:hover {
  color: var(--white);
}