:root {
  --bg: #141e18;

  --summer-green: rgba(82, 132, 72, 0.46);
  --summer-deep-green: rgba(34, 78, 48, 0.34);
  --summer-olive: rgba(132, 126, 78, 0.24);
  --summer-bronze: rgba(186, 108, 48, 0.3);
  --summer-bronze-soft: rgba(226, 178, 104, 0.17);
  --summer-gold: rgba(230, 178, 92, 0.12);
  --summer-haze: rgba(190, 168, 104, 0.11);
  --summer-light: rgba(198, 218, 204, 0.1);
  --summer-shadow: rgba(3, 7, 6, 0.56);
}

html,
body {
  background: var(--bg);
}

.background-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  isolation: isolate;
}

.background-layer::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  background: var(--bg);
  pointer-events: none;
}

.summer-hammock {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.43;
  filter:
    saturate(0.7)
    contrast(0.9)
    brightness(0.59)
    sepia(0.06)
    hue-rotate(-5deg);
}

.summer-color-field {
  position: absolute;
  inset: -10%;
  z-index: 1;
  background:
    radial-gradient(circle at 78% 84%, var(--summer-bronze), transparent 52%),
    radial-gradient(circle at 60% 70%, var(--summer-bronze-soft), transparent 56%),
    radial-gradient(circle at 48% 56%, var(--summer-gold), transparent 54%),
    radial-gradient(circle at 32% 48%, var(--summer-haze), transparent 52%),
    radial-gradient(circle at 18% 20%, var(--summer-green), transparent 58%),
    radial-gradient(circle at 42% 38%, var(--summer-deep-green), transparent 64%),
    radial-gradient(circle at 54% 44%, var(--summer-olive), transparent 62%),
    radial-gradient(circle at 74% 18%, var(--summer-light), transparent 50%),
    radial-gradient(circle at center, transparent 48%, var(--summer-shadow) 100%),
    linear-gradient(
      180deg,
      rgba(12, 28, 20, 0.6) 0%,
      rgba(29, 57, 34, 0.48) 34%,
      rgba(70, 70, 34, 0.42) 62%,
      rgba(72, 38, 20, 0.58) 100%
    );
  animation: summer-glow-drift 24s ease-in-out infinite alternate;
}

.film-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.25;
  mix-blend-mode: soft-light;
  filter:
    saturate(0.78)
    contrast(0.98)
    brightness(1.04)
    sepia(0.05)
    hue-rotate(-4deg);
}

.summer-haze-field {
  position: absolute;
  inset: -10%;
  z-index: 3;
  background:
    radial-gradient(ellipse at 10% 82%, rgba(2, 5, 4, 0.42), transparent 50%),
    radial-gradient(circle at 70% 76%, rgba(220, 140, 64, 0.1), transparent 50%),
    radial-gradient(circle at 44% 42%, rgba(242, 212, 142, 0.06), transparent 46%),
    radial-gradient(circle at 24% 18%, rgba(118, 176, 104, 0.045), transparent 46%),
    linear-gradient(
      180deg,
      rgba(2, 5, 4, 0.32) 0%,
      rgba(2, 5, 4, 0.04) 18%,
      transparent 44%,
      transparent 70%,
      rgba(7, 4, 2, 0.56) 100%
    );
  animation: summer-haze-breathe 16s ease-in-out infinite alternate;
}

.latest-page {
  position: relative;
  z-index: 4;
  background: transparent;
}

.latest-content {
  position: relative;
  z-index: 4;
}

@keyframes summer-glow-drift {
  0% {
    transform: translate3d(-1.25%, -0.75%, 0) scale(1);
    filter: brightness(0.97) saturate(0.98);
  }

  50% {
    transform: translate3d(0.85%, 1.1%, 0) scale(1.022);
    filter: brightness(1.06) saturate(1.08);
  }

  100% {
    transform: translate3d(1.6%, -0.45%, 0) scale(1.015);
    filter: brightness(1.01) saturate(1.04);
  }
}

@keyframes summer-haze-breathe {
  0% {
    opacity: 0.76;
    transform: translate3d(-0.65%, 0.6%, 0) scale(1);
  }

  100% {
    opacity: 1;
    transform: translate3d(0.9%, -0.6%, 0) scale(1.018);
  }
}

@media (max-width: 759px) {
  .summer-hammock {
    object-position: 37% 30%;
    opacity: 0.39;
    filter:
      saturate(0.68)
      contrast(0.88)
      brightness(0.56)
      sepia(0.05)
      hue-rotate(-4deg);
  }

  .summer-color-field {
    background:
      radial-gradient(circle at 78% 82%, rgba(186, 108, 48, 0.34), transparent 50%),
      radial-gradient(circle at 58% 68%, rgba(226, 178, 104, 0.18), transparent 54%),
      radial-gradient(circle at 46% 52%, rgba(230, 178, 92, 0.13), transparent 52%),
      radial-gradient(circle at 28% 44%, rgba(190, 168, 104, 0.11), transparent 50%),
      radial-gradient(circle at 14% 18%, rgba(82, 132, 72, 0.46), transparent 56%),
      radial-gradient(circle at 40% 36%, rgba(34, 78, 48, 0.34), transparent 62%),
      radial-gradient(circle at 54% 44%, rgba(132, 126, 78, 0.24), transparent 60%),
      radial-gradient(circle at 74% 16%, rgba(198, 218, 204, 0.09), transparent 48%),
      radial-gradient(ellipse at 6% 80%, rgba(2, 5, 4, 0.38), transparent 48%),
      radial-gradient(circle at center, transparent 44%, rgba(3, 7, 6, 0.62) 100%),
      linear-gradient(
        180deg,
        rgba(12, 28, 20, 0.58) 0%,
        rgba(29, 57, 34, 0.46) 34%,
        rgba(70, 70, 34, 0.42) 62%,
        rgba(72, 38, 20, 0.6) 100%
      );
  }

  .film-overlay {
    opacity: 0.27;
  }

  .summer-haze-field {
    background:
      radial-gradient(ellipse at 4% 78%, rgba(1, 4, 3, 0.48), transparent 50%),
      radial-gradient(circle at 70% 74%, rgba(220, 140, 64, 0.11), transparent 48%),
      radial-gradient(circle at 42% 40%, rgba(242, 212, 142, 0.055), transparent 44%),
      linear-gradient(
        180deg,
        rgba(2, 5, 4, 0.3) 0%,
        rgba(2, 5, 4, 0.04) 18%,
        transparent 42%,
        transparent 66%,
        rgba(7, 4, 2, 0.6) 100%
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  .summer-color-field,
  .summer-haze-field {
    animation: none;
  }

  .summer-hammock,
  .film-overlay {
    display: none;
  }
}