/* ========== Base ========== */
:root {
  --nav-h: 64px;                 /* tweak nav height */
  --bg: #0e0e10;                 /* page background */
  --text: #eaeaea;               /* body text color */
  --gold: #ffd700;               /* title gold */
  --ring: rgba(255,255,255,.08); /* nav border */
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* ========== Sticky Nav ========== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-h);
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  background: rgba(14,14,16,.7);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ring);
}
.topnav a {
  font-family: 'Iceland', sans-serif;
  text-decoration: none;
  color: #ddd;
  padding: .35rem .6rem;
  border-radius: .5rem;
}
.topnav a:hover, .topnav a:focus-visible {
  background: rgba(255,255,255,.08);
}

/* ========== Hero Title (pop from nav) ========== */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + 2.5rem); /* space for the title */
  padding-bottom: 2.5rem;
  text-align: center;
  /* Optional hero background image: 
     background: url("/resources/img/pb.png") center/cover no-repeat; */
}

/* The title animates UP from the nav area and settles above it */
.pop-title {
  font-family: 'Iceland', sans-serif;
  font-size: clamp(2.4rem, 6vw, 6rem);
  line-height: 1;
  margin: 0;
  color: var(--gold);
  text-shadow: 0 4px 12px rgba(0,0,0,.6);

  /* Start as if hidden behind the nav, then pop up */
  opacity: 0;
  transform: translateY(calc(-1 * var(--nav-h))) scale(.98);
  animation: popFromNav 900ms cubic-bezier(.2,.75,.15,1.1) forwards,
             settleGlow 2400ms ease-out 900ms both;
}

/* subtle underline that grows in after the pop (classy accent) */
.pop-title::after {
  content: "";
  display: block;
  height: 3px;
  width: 0%;
  margin: .6rem auto 0;
  background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
  border-radius: 999px;
  animation: underlineGrow 700ms ease-out 600ms forwards;
}

/* ========== Keyframes ========== */
@keyframes popFromNav {
  0%   { opacity: 0; transform: translateY(calc(-1 * var(--nav-h))) scale(.98); }
  60%  { opacity: 1; transform: translateY(-8px) scale(1.02); } /* overshoot */
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes underlineGrow {
  to { width: 54%; }
}

/* very subtle radiance after settling (no cheesy shimmer loop) */
@keyframes settleGlow {
  0%   { text-shadow: 0 4px 12px rgba(0,0,0,.6); }
  50%  { text-shadow: 0 6px 18px rgba(0,0,0,.7); }
  100% { text-shadow: 0 4px 12px rgba(0,0,0,.6); }
}

/* ========== Content container ========== */
.content {
  max-width: 1000px;
  margin: 2rem auto 4rem;
  padding: 0 1rem;
}

/* ========== Responsive tweaks ========== */
@media (max-width: 800px) {
  :root { --nav-h: 56px; }
  .pop-title::after { height: 2px; }
}

@media (max-width: 480px) {
  :root { --nav-h: 52px; }
  .hero { padding-top: calc(var(--nav-h) + 2rem); }
  .pop-title { font-size: clamp(2rem, 9vw, 3.2rem); }
  .pop-title::after { width: 60%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pop-title,
  .pop-title::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    width: 54%;
  }
}