/* Cellestyrke – midlertidig landingsside («under oppbygging») */

@font-face { font-family: 'Fraunces'; src: url('fonter/fraunces-latin-full-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonter/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonter/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --bakgrunn: #F4F1EA;
  --tekst: #1C2420;
  --dempet: #5A645E;
  --aksent: #2F6B55;
  --linje: rgba(28, 36, 32, .12);
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --brod: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: only light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-family: var(--brod);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--bakgrunn);
  /* Svak lysflekk bak teksten */
  background-image: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(47, 107, 85, .09), transparent 70%);
}

.topp, .bunn, .innhold { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 700px) { .topp, .bunn, .innhold { padding-inline: 32px; } }

.topp { padding-block: 28px; }
.navn { font-family: var(--display); font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em; }

.innhold {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding-block: 48px 72px;
}

.etikett {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 1.75rem;
  padding: .45em 1em;
  font-size: .78rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--aksent);
  border: 1px solid var(--linje);
  border-radius: 99px;
  background: rgba(255, 255, 255, .5);
}
.prikk { width: .5em; height: .5em; border-radius: 50%; background: var(--aksent); animation: puls 2.4s ease-in-out infinite; }
@keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

h1 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  font-weight: 450;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 em { position: relative; font-style: normal; color: var(--aksent); white-space: nowrap; }

/* Håndtegnet strek under «på vei» som tegnes inn etter overskriften */
.strek { position: absolute; left: 0; bottom: -.12em; width: 100%; height: .18em; overflow: visible; }
.strek path {
  fill: none; stroke: var(--aksent); stroke-width: 3; stroke-linecap: round; opacity: .55;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: tegn 1.1s cubic-bezier(.65, 0, .35, 1) 1s forwards;
}
@keyframes tegn { to { stroke-dashoffset: 0; } }

/* Bakteppe: myke fargeskyer som glir sakte */
.bakteppe { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: drift 24s ease-in-out infinite alternate; }
.sky--1 { width: 42vmax; height: 42vmax; left: -10vmax; top: -12vmax; background: #CFE3D6; }
.sky--2 { width: 34vmax; height: 34vmax; right: -8vmax; bottom: -10vmax; background: #E8DCC2; animation-duration: 30s; animation-delay: -8s; }
.sky--3 { width: 22vmax; height: 22vmax; left: 55%; top: 18%; background: #D9E8DF; opacity: .4; animation-duration: 36s; animation-delay: -15s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(6vmax, 4vmax) scale(1.12); }
}

.ingress { max-width: 34rem; margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--dempet); text-wrap: pretty; }

.bunn {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding-block: 24px;
  border-top: 1px solid var(--linje);
  font-size: .875rem;
  color: var(--dempet);
}
.bunn p { margin: 0; }
.bunn a { color: var(--tekst); font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.bunn a:hover { color: var(--aksent); }
:focus-visible { outline: 3px solid var(--aksent); outline-offset: 3px; border-radius: 4px; }

/* Inntoning ovenfra og ned: toppen først, så innholdet, footeren til slutt */
.topp, .innhold > *, .bunn { animation: inn .8s cubic-bezier(.22, 1, .36, 1) both; }
.topp { animation-name: ned; }
.innhold > :nth-child(1) { animation-delay: .3s; }
.innhold > :nth-child(2) { animation-delay: .42s; }
.innhold > :nth-child(3) { animation-delay: .54s; }
.bunn { animation-delay: .75s; }
@keyframes inn { from { opacity: 0; transform: translateY(14px); } }
@keyframes ned { from { opacity: 0; transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  .innhold > *, .prikk, .topp, .bunn, .sky { animation: none; }
  .strek path { animation: none; stroke-dashoffset: 0; }
}