:root {
  --margin: clamp(1.25rem, 4vw, 2.0625rem);
  --top: clamp(5rem, 10vw, 7rem);
}

.close-btn {
  position: fixed;
  top: var(--margin);
  right: var(--margin);
  font-family: inherit;
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
  transition: color 0.2s ease;
  z-index: 20;
}

.close-btn:hover,
.close-btn:focus-visible {
  color: #fff;
}

.close-btn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: 4px;
}

.fade-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top);
  background: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  pointer-events: none;
  z-index: 10;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: fadeIn 0.8s ease both;
  }

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