/* NORTHVALL — no external fonts, images, libraries or services. */
:root {
  color-scheme: dark;
  --night: #060d10;
  --north: 41, 165, 143;
  --south: 29, 91, 113;
  --pointer-x: 0px;
  --pointer-y: 0px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--night); }
body { margin: 0; min-height: 100vh; min-height: 100svh; overflow-x: hidden; }

.atmosphere {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 47% 48%, #101e23 0, #091216 42%, var(--night) 80%);
}

.light {
  position: absolute;
  width: 95vmax;
  height: 65vmax;
  border-radius: 50%;
  will-change: transform;
}
.light--north {
  left: -44vmax;
  top: -34vmax;
  background: radial-gradient(ellipse, rgba(var(--north), .25) 0, rgba(var(--north), .07) 35%, transparent 65%);
  transform: translate(calc(var(--pointer-x) * -2), calc(var(--pointer-y) * -2)) rotate(-24deg);
}
.light--south {
  right: -40vmax;
  bottom: -38vmax;
  background: radial-gradient(ellipse, rgba(var(--south), .34) 0, rgba(var(--south), .1) 34%, transparent 66%);
  transform: translate(calc(var(--pointer-x) * 2), calc(var(--pointer-y) * 2)) rotate(-24deg);
}

.halo {
  position: absolute;
  width: 104vw;
  height: 56vw;
  min-width: 900px;
  min-height: 480px;
  left: 50%;
  top: 51%;
  border: 1px solid rgba(129, 193, 189, .07);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  box-shadow: 0 -18px 110px -54px rgba(98, 224, 197, .26), inset 0 0 100px rgba(81, 181, 172, .018);
}
.halo::before,
.halo::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(139, 201, 195, .025);
  border-radius: inherit;
}
.halo::after { inset: -32px; border-color: rgba(139, 201, 195, .022); }

#contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.grain {
  position: absolute;
  inset: 0;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 48%, transparent 32%, rgba(1, 6, 9, .57) 100%);
}

.stage {
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px max(28px, 8vw);
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}
.brand {
  width: min(100%, 1040px);
  display: flex;
  align-items: center;
  gap: 6.2%;
  margin: 0;
  transform: translate(var(--pointer-x), calc(var(--pointer-y) - 1.5vh));
  filter: drop-shadow(0 2px 20px rgba(185, 240, 229, .08));
}
.brand__symbol {
  flex: 0 0 24.05%;
  position: relative;
  animation: arrive-symbol 1.4s cubic-bezier(.2, .65, .25, 1) both;
}
.brand__wordmark {
  flex: 1;
  min-width: 0;
  animation: arrive-wordmark 1.6s cubic-bezier(.2, .65, .25, 1) both;
}
.brand img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

@keyframes arrive-symbol {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes arrive-wordmark {
  0%, 10% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
  .stage { padding: 38px 32px; }
  .brand { flex-direction: column; width: min(100%, 365px); gap: 38px; }
  .brand__symbol { flex: none; width: clamp(128px, 38vw, 165px); }
  .brand__wordmark { flex: none; width: 100%; }
  .halo { min-width: 700px; min-height: 370px; top: 52%; transform: translate(-50%, -50%) rotate(-55deg); }
  .light--north { top: -25vmax; left: -42vmax; }
  .light--south { bottom: -22vmax; right: -45vmax; }
}

@media (max-height: 420px) and (min-width: 621px) {
  .brand { width: min(76%, 680px); }
  .stage { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand__symbol, .brand__wordmark { animation: none; }
  .brand { transform: translateY(-1.5vh); }
  .light--north, .light--south { transform: rotate(-24deg); will-change: auto; }
}