:root {
  --paper: #f4ead4;
  --paper-deep: #ead9b7;
  --navy: #07384c;
  --red: #a41712;
  --green: #1e472d;
  --gold: #be8930;
  --ink: #132026;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: Impact, "Arial Narrow", "Arial", sans-serif;
}

.page {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 248, 228, 0.96) 0 14rem, rgba(244, 234, 212, 0.76) 27rem, transparent 46rem),
    linear-gradient(135deg, rgba(164, 23, 18, 0.1), transparent 32%),
    linear-gradient(215deg, rgba(7, 56, 76, 0.12), transparent 40%),
    var(--paper);
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(7, 56, 76, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 56, 76, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotate(-3deg) scale(1.1);
}

.page::after {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -4;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(19, 32, 38, 0.22) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 58%, rgba(19, 32, 38, 0.2) 0 1px, transparent 1.7px);
  background-size: 18px 18px, 29px 29px;
  animation: grain 9s steps(5, end) infinite;
}

.sky {
  position: absolute;
  inset: 0;
  z-index: -6;
  background:
    linear-gradient(100deg, transparent 0 44%, rgba(164, 23, 18, 0.12) 44% 47%, transparent 47%),
    linear-gradient(100deg, transparent 0 52%, rgba(7, 56, 76, 0.12) 52% 55%, transparent 55%);
  animation: poster-drift 18s ease-in-out infinite alternate;
}

.sun {
  position: absolute;
  right: clamp(2rem, 10vw, 9rem);
  top: clamp(2rem, 10vh, 6rem);
  z-index: -3;
  width: clamp(5rem, 11vw, 8.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 10px rgba(190, 137, 48, 0.13);
  opacity: 0.55;
  animation: sun-breathe 8s ease-in-out infinite;
}

.forest {
  position: absolute;
  right: -5vw;
  bottom: 14vh;
  left: -5vw;
  z-index: -2;
  height: 22vh;
  min-height: 120px;
  opacity: 0.16;
  background:
    conic-gradient(from 150deg at 50% 0%, transparent 0 24deg, var(--green) 25deg 50deg, transparent 51deg) 0 0 / 86px 120px repeat-x;
  clip-path: polygon(0 50%, 100% 22%, 100% 100%, 0% 100%);
  animation: forest-drift 22s ease-in-out infinite alternate;
}

.forest-front {
  bottom: 10vh;
  height: 18vh;
  min-height: 96px;
  opacity: 0.22;
  background:
    conic-gradient(from 150deg at 50% 0%, transparent 0 24deg, var(--green) 25deg 50deg, transparent 51deg) 18px 0 / 112px 140px repeat-x;
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}

.water {
  position: absolute;
  right: -10vw;
  bottom: -8vh;
  left: -10vw;
  z-index: -1;
  height: 34vh;
  min-height: 190px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(244, 234, 212, 0.82), transparent 52%),
    repeating-radial-gradient(ellipse at 50% -20%, transparent 0 28px, rgba(244, 234, 212, 0.68) 29px 34px, transparent 35px 70px),
    linear-gradient(180deg, rgba(7, 56, 76, 0.83), var(--navy));
  clip-path: polygon(0 26%, 100% 0, 100% 100%, 0% 100%);
  animation: water-move 9s ease-in-out infinite alternate;
}

.hero {
  display: grid;
  width: min(72vw, 560px);
  place-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.logo {
  display: block;
  width: min(64vw, 440px);
  max-height: 68vh;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 28px rgba(7, 56, 76, 0.22))
    drop-shadow(0 4px 0 rgba(244, 234, 212, 0.7));
  transform-origin: 50% 50%;
  animation: logo-pulse 4.8s ease-in-out infinite;
}

.status {
  margin: clamp(1rem, 2.8vh, 1.6rem) 0 0;
  padding: 0.55rem 1rem 0.48rem;
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--navy);
  color: var(--navy);
  font-size: clamp(0.9rem, 2.2vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

@keyframes logo-pulse {
  0%,
  100% {
    transform: scale(1);
    filter:
      drop-shadow(0 22px 28px rgba(7, 56, 76, 0.22))
      drop-shadow(0 4px 0 rgba(244, 234, 212, 0.7));
  }

  50% {
    transform: scale(1.045);
    filter:
      drop-shadow(0 30px 34px rgba(7, 56, 76, 0.3))
      drop-shadow(0 5px 0 rgba(244, 234, 212, 0.78));
  }
}

@keyframes water-move {
  from {
    transform: translate3d(-1.5%, 0, 0);
  }

  to {
    transform: translate3d(1.5%, -1.2%, 0);
  }
}

@keyframes forest-drift {
  from {
    transform: translate3d(-1%, 0, 0);
  }

  to {
    transform: translate3d(1%, -1%, 0);
  }
}

@keyframes poster-drift {
  from {
    transform: translate3d(-1%, -1%, 0) scale(1.02);
  }

  to {
    transform: translate3d(1%, 1%, 0) scale(1.04);
  }
}

@keyframes sun-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.08);
    opacity: 0.64;
  }
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1.5%, 1%);
  }

  50% {
    transform: translate(1%, -1.5%);
  }

  75% {
    transform: translate(1.5%, 1%);
  }
}

@media (max-width: 620px) {
  .hero {
    width: min(88vw, 420px);
  }

  .logo {
    width: min(82vw, 340px);
  }

  .status {
    letter-spacing: 0.08em;
  }
}

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