:root {
  color-scheme: dark;
  --ink: #edf3f2;
  --muted: rgba(237, 243, 242, 0.62);
  --night: #060b0f;
  --line: rgba(237, 243, 242, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--night);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(90, 107, 129, 0.18), transparent 34%),
    linear-gradient(180deg, #081018 0%, #04070a 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
}

.site {
  min-height: calc(100vh - 74px);
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 32px);
}

.hero {
  position: relative;
  width: min(100%, 1180px);
  min-height: min(760px, calc(100vh - 130px));
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #070d12;
}

.image-stage,
.hero-image,
.plate,
.fog {
  position: absolute;
  inset: 0;
}

.image-stage {
  overflow: hidden;
}

.hero-image,
.plate {
  width: 100%;
  height: 100%;
  background-image: url("assets/heroeagle.png");
  background-size: cover;
  background-position: center;
}

.hero-image {
  object-fit: cover;
  filter: saturate(0.78) contrast(0.96) brightness(0.78);
  transform: scale(1.025);
  animation: driftImage 34s ease-in-out infinite alternate;
}

.plate {
  mix-blend-mode: screen;
  opacity: 0.13;
  filter: saturate(0.6) blur(0.2px);
  pointer-events: none;
}

.plate-one {
  clip-path: polygon(0 0, 42% 0, 29% 100%, 0 100%);
  transform: translateX(-1.4%);
  animation: plateLeft 26s ease-in-out infinite alternate;
}

.plate-two {
  clip-path: polygon(38% 0, 78% 0, 70% 100%, 28% 100%);
  opacity: 0.1;
  transform: translateY(1.2%);
  animation: plateCenter 31s ease-in-out infinite alternate;
}

.plate-three {
  clip-path: polygon(74% 0, 100% 0, 100% 100%, 68% 100%);
  background-position: 52% center;
  transform: translateX(1.1%);
  animation: plateRight 29s ease-in-out infinite alternate;
}

.image-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 7, 10, 0.1), rgba(4, 7, 10, 0.44) 68%, rgba(4, 7, 10, 0.88)),
    linear-gradient(90deg, rgba(4, 7, 10, 0.34), transparent 32%, transparent 66%, rgba(4, 7, 10, 0.28));
  pointer-events: none;
}

.fog {
  top: auto;
  height: 42%;
  opacity: 0.42;
  filter: blur(34px);
  pointer-events: none;
}

.fog-one {
  bottom: 38%;
  background: linear-gradient(90deg, transparent, rgba(212, 226, 231, 0.28), transparent);
  transform: translateX(-36%);
  animation: fogOne 38s ease-in-out infinite alternate;
}

.fog-two {
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(88, 116, 130, 0.26), transparent);
  transform: translateX(28%);
  animation: fogTwo 44s ease-in-out infinite alternate;
}

h1 {
  position: relative;
  z-index: 1;
  max-width: 11ch;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.1rem, 11vw, 8.5rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 24px 70px rgba(0, 0, 0, 0.64);
  animation: titleWake 1800ms ease-out both;
}

.site-footer {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px;
  color: var(--muted);
  font-size: 0.88rem;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  text-decoration-color: var(--line);
  text-underline-offset: 5px;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--ink);
  text-decoration-color: currentColor;
}

@keyframes driftImage {
  from {
    transform: scale(1.025) translate3d(-0.7%, -0.4%, 0);
  }

  to {
    transform: scale(1.055) translate3d(0.8%, 0.6%, 0);
  }
}

@keyframes plateLeft {
  to {
    transform: translateX(1.4%) scale(1.015);
  }
}

@keyframes plateCenter {
  to {
    transform: translateY(-1.1%) scale(1.012);
  }
}

@keyframes plateRight {
  to {
    transform: translateX(-1.2%) scale(1.018);
  }
}

@keyframes fogOne {
  to {
    transform: translateX(22%);
  }
}

@keyframes fogTwo {
  to {
    transform: translateX(-24%);
  }
}

@keyframes titleWake {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 720px) {
  .site {
    min-height: calc(100vh - 96px);
    padding: 10px;
  }

  .hero {
    min-height: calc(100vh - 116px);
  }

  .hero-image,
  .plate {
    background-position: center;
  }

  .site-footer {
    min-height: 96px;
    flex-direction: column;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}