@import url('./theme.css');
@import url('./depth.css');
@import url('./surfaces.css');

.lt-background-module {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(70vw 55vw at 88% -8%, color-mix(in srgb, var(--lt-accent, #78d8aa) 16%, transparent), transparent 62%),
    radial-gradient(65vw 60vw at -8% 62%, color-mix(in srgb, var(--lt-accent-secondary, #d2b48c) 11%, transparent), transparent 66%),
    linear-gradient(180deg, var(--lt-bg-base, #0a0f0d), var(--lt-bg-surface, #101814));
}

.lt-background-module::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.lt-background-module::after {
  content: "";
  position: absolute;
  width: min(72vw, 980px);
  aspect-ratio: 1;
  right: -24vw;
  top: -24vw;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--lt-accent, #78d8aa) 20%, transparent);
  box-shadow: inset 0 0 110px color-mix(in srgb, var(--lt-accent, #78d8aa) 5%, transparent), 0 0 150px color-mix(in srgb, var(--lt-accent, #78d8aa) 4%, transparent);
}

header.header {
  top: max(18px, env(safe-area-inset-top)) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

header.header .brand,
header.header .nav a { text-shadow: 0 1px 18px rgba(0,0,0,.55); }
header.header .nav a { opacity: .82; transition: opacity .18s ease; }
header.header .nav a:hover,
header.header .nav a:focus-visible { opacity: 1; }

@media (max-width: 850px) {
  header.header { padding-left: 0 !important; padding-right: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-background-module,
  .lt-background-module::before,
  .lt-background-module::after { animation: none !important; }
  header.header .nav a { transition: none; }
}