/* Bare profilfargene. Lysere og mørkere toner lages med opacity, aldri en ny farge. */
@font-face { font-family: Inter; src: url(/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root { color-scheme: dark; --crimson: #F04460; --burgundy: #170D13; --ivory: #FFF0E4; }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; width: 100%; min-height: 100%; background: var(--burgundy); }

body {
  position: relative;
  font-family: Inter, sans-serif;
  color: var(--ivory);
}

.bakgrunn { position: fixed; inset: 0; overflow: hidden; }

.stjerner {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1px 1px at 60% 78%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 25% 85%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1px 1px at 45% 12%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 92%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1px 1px at 8% 62%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1px 1px at 35% 5%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 35%, var(--ivory) 100%, transparent 100%),
    radial-gradient(1px 1px at 18% 40%, var(--crimson) 100%, transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 76%, var(--crimson) 100%, transparent 100%);
  animation: blink 6s ease-in-out infinite;
}

@keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

/* Burgunder tåke med crimson kantlys. Bare bakgrunn, aldri over logoen. */
.taake {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--crimson), transparent);
  will-change: transform;
}
.t1 { width: 70vmax; height: 34vmax; top: -8%; left: -55%; opacity: .16; animation: drift 46s linear infinite; }
.t2 { width: 52vmax; height: 26vmax; top: 58%; left: -48%; opacity: .12; animation: drift 62s linear infinite -20s; }
.t3 { width: 84vmax; height: 40vmax; top: 24%; left: -70%; opacity: .08; animation: drift 80s linear infinite -48s; }

@keyframes drift { to { transform: translateX(190vw); } }

main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px 20px 72px;
  overflow: clip;
  text-align: center;
}

.scene { position: relative; width: min(720px, 100%); }

.logo { position: relative; display: block; width: 100%; height: auto; }

/* Pulsen som før kom fra kulen, går nå i ringer rundt logoen. De starter utenfor den, så logoen står flat og stille. */
.ringer { position: absolute; inset: 0; }
.ringer span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--crimson);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.04);
  animation: ring 6s ease-out infinite;
}
.ringer span:nth-child(2) { animation-delay: 2s; }
.ringer span:nth-child(3) { animation-delay: 4s; }

@keyframes ring {
  0% { transform: translate(-50%, -50%) scale(1.04); opacity: 0; }
  12% { opacity: .55; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

h1 {
  margin: 28px 0 0;
  font-size: clamp(1.15rem, 3.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ivory);
  background: linear-gradient(90deg, var(--ivory) 0%, var(--ivory) 40%, var(--crimson) 50%, var(--ivory) 60%, var(--ivory) 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sveip 7s linear infinite;
}

@keyframes sveip { from { background-position: 150% center; } to { background-position: -150% center; } }

.prikker { display: flex; gap: 10px; margin-top: 30px; }
.prikker span {
  width: 8px;
  height: 8px;
  background: var(--crimson);
  opacity: .35;
  animation: hopp 1.4s ease-in-out infinite;
}
.prikker span:nth-child(2) { animation-delay: .18s; }
.prikker span:nth-child(3) { animation-delay: .36s; }

@keyframes hopp { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-6px); opacity: 1; } }

footer {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory);
}

@media (prefers-reduced-motion: reduce) {
  .stjerner, .taake, .ringer span, h1, .prikker span { animation: none; }
  .stjerner { opacity: .6; }
  .t1 { left: -10%; }
  .t2 { left: 50%; }
  .t3 { left: 10%; }
  .ringer span { opacity: .3; transform: translate(-50%, -50%) scale(1.1); }
  .ringer span:nth-child(2) { opacity: .2; transform: translate(-50%, -50%) scale(1.5); }
  .ringer span:nth-child(3) { opacity: .1; transform: translate(-50%, -50%) scale(1.9); }
  .prikker span { opacity: .8; }
}

@media (max-height: 560px) {
  main { padding: 16px 20px 56px; }
  .scene { width: min(420px, 100%); }
  h1 { margin-top: 12px; }
}