/* Global font and small overrides (Helvetical/Helvetica as requested) */
:root {
  --bg: #0a0a0c;       /* dark off-black */
  --card: #0b1220;
  --text: #c084fc;     /* light purple for all text */
  --muted: #9aa4b2;
}

/* font-face / global font rules (existing) */
@font-face {
  font-family: "Verona-Serial-Medium";
  src: local("verona-serial-medium"), local("Verona Serial Medium"), local("VeronaSerial-Medium");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
html, body {
  font-family: "Verona-Serial-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  letter-spacing: -0.05rem; /* updated: basic text spacing */
}

/* Header title: bold + tightened spacing */
header h1 {
  font-weight: 700;
  letter-spacing: -0.15rem; /* restored to -0.15rem */
}

/* Small titles (gallery/resume) opacity handled in index.html via utility class */
/* Socials letter-spacing */
.socials li a {
  letter-spacing: -0.1rem;
  color: var(--text);
}

/* Links: inherit the purple text color; hover slightly brighter */
a {
  color: var(--text);
  text-decoration: none;
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}
a:hover, a:focus {
  color: #e9d7ff;
}

/* Project link glitch effect (keeps final 'tbd' shown after hover) */
.project-link {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: inherit;
  overflow: visible;
  font-size: 0.95rem;
  padding: 0.2rem 0.5rem;
}

/* base layers */
.project-link .orig,
.project-link .final,
.project-link .glitch::before,
.project-link .glitch::after {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

/* final result (hidden until animation end) */
.project-link .final {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
}

/* glitch pseudo layers */
.project-link .glitch {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.project-link .glitch::before,
.project-link .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: inherit;
  background: transparent;
  mix-blend-mode: screen;
}

/* hover triggers animation */
.project-link:hover .glitch {
  opacity: 1;
  animation: glitch-show 1.6s linear forwards;
}
.project-link:hover .glitch::before {
  animation: glitch-top 1.6s linear forwards;
}
.project-link:hover .glitch::after {
  animation: glitch-bottom 1.6s linear forwards;
}
.project-link:hover .orig {
  animation: orig-fade 1.6s linear forwards;
}
.project-link:hover .final {
  animation: final-show 1.6s linear forwards;
}

/* keyframes */
@keyframes glitch-top {
  0% { transform: translate(0,0); clip-path: inset(0 0 80% 0); opacity:1; }
  25% { transform: translate(-6px,-4px); clip-path: inset(0 0 40% 0); }
  50% { transform: translate(6px,-2px); clip-path: inset(0 0 30% 0); }
  75% { transform: translate(-3px,2px); clip-path: inset(0 0 60% 0); opacity:.7; }
  100% { transform: translate(0); clip-path: inset(0 0 100% 0); opacity:0; }
}

@keyframes glitch-bottom {
  0% { transform: translate(0,0); clip-path: inset(60% 0 0 0); opacity:1; }
  25% { transform: translate(6px,4px); clip-path: inset(30% 0 0 0); }
  50% { transform: translate(-6px,2px); clip-path: inset(20% 0 0 0); }
  75% { transform: translate(3px,-2px); clip-path: inset(50% 0 0 0); opacity:.7; }
  100% { transform: translate(0); clip-path: inset(100% 0 0 0); opacity:0; }
}

@keyframes orig-fade {
  0% { opacity:1; transform: none; }
  85% { opacity:0.2; transform: translateY(0); }
  100% { opacity:0; transform: translateY(-2px); }
}

@keyframes final-show {
  0% { opacity:0; transform: translateY(2px); }
  85% { opacity:0; }
  100% { opacity:1; transform: translateY(0); }
}

/* ensure minimal layout stability */
.project-link .orig,
.project-link .final { display:inline-block; min-width:1ch; }

/* Back button top-left (50% white) */
.back-btn {
  position: fixed;
  top: 1rem;
  left: 1rem;
  color: #ffffff;
  opacity: 0.5;
  text-decoration: none;
  font-size: 0.95rem;
  z-index: 60;
  transition: opacity .15s ease;
}
.back-btn:hover,
.back-btn:focus {
  opacity: 0.85;
}

/* Disable old CSS-based glitch animations and ensure centered behavior */
.project-link,
.project-link * {
  animation: none !important;
  transition: none !important;
}

/* hide previous .glitch/.final layers so JS controls the text */
.project-link .glitch,
.project-link .final {
  display: none !important;
}

/* ensure the visible element is centered and stable width */
.project-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
  user-select: none;
}

/* the element we overwrite during animation */
.project-link .orig {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  /* width will be set by JS to avoid layout shift */
  min-width: 0;
  box-sizing: content-box;
  vertical-align: middle;
}

/* project title link colours */
.project-title-link {
  text-decoration: none;
  transition: color .18s ease, opacity .12s ease;
}
.project-title-link.purple {
  color: var(--text); /* existing purple variable */
}
.project-title-link.purple:hover,
.project-title-link.purple:focus {
  color: #e9d7ff;
}
.project-title-link.white {
  color: #ffffff;
}
.project-title-link.white:hover,
.project-title-link.white:focus {
  color: #ffffffcc;
}
/* ensure number header remains non-clickable but interactive for glitch script */
.project-link { cursor: pointer; }