/* STAREX — landing.css
 *
 * Inngangsverdenen. Mørk, elektrisk, levende.
 * Samme språk som det grønne neonkartet: dyp natt, grønn/cyan glød,
 * heksagrid. Landingssiden og hovedkartet skal føles som samme univers.
 *
 * Fargene er samlet som variabler øverst, slik at neonstandarden kan
 * justeres ETT sted og gjelde hele inngangen.
 */

:root {
  --natt:        #04080a;
  --natt-dyp:    #020507;
  --neon:        #3dff9e;   /* STAREX-grønn, som kartets rutelyss */
  --neon-svak:   rgba(61, 255, 158, 0.42);
  --cyan:        #5fd8ff;   /* rutelinjene i kartet */
  --cyan-svak:   rgba(95, 216, 255, 0.38);
  --gull:        #ffce7a;   /* bussens lys, varmt mot alt det kalde */
  --tekst:       #dff5ea;
  --tekst-dus:   #8fb3a8;
  --plate:       rgba(6, 14, 16, 0.82);
  --kant:        rgba(61, 255, 158, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--natt-dyp);
  color: var(--tekst);
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------- scenen */

#scene {
  position: relative;
  width: 100%;
  height: 100svh;
  height: 100vh;
  overflow: hidden;
  background: var(--natt-dyp);
  isolation: isolate;
}

/* Stående skjerm: plakaten fyller høyden og scenen dras vannrett.
   Alternativet — å presse en 3:2-plakat inn i 375 px bredde — gir
   11 px trykkflater på skiltene, og da er dørene i praksis borte. */
#scene.drabar {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#scene.drabar::-webkit-scrollbar { display: none; }
#scene.drabar #bildefyll,
#scene.drabar::after { position: fixed; }

#dralapp {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 8;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--plate);
  border: 1px solid var(--kant);
  backdrop-filter: blur(6px);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tekst);
  pointer-events: none;
  transition: opacity 400ms ease;
}
#dralapp[hidden] { display: none; }

/* Stians landingsbilde. VISES HELT (contain), slik at ingen av objektene
   — særlig ikke skiltene helt til høyre — blir klippet bort på mobil.
   Bak det ligger samme bilde uskarpt som fyll, så kantene ikke blir
   døde svarte striper. */
#bildefyll {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  filter: blur(34px) saturate(0.8) brightness(0.38);
  transition: opacity 900ms ease;
}
#bildefyll.lastet { opacity: 1; }

/* Boksen settes av JS, ikke av object-fit: da er det ETT sett tall som
   gjelder både kunsten og dørene, og de kan ikke gli fra hverandre. */
#bilde {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 900ms ease;
  max-width: none;
}
#bilde.lastet { opacity: 1; }

/* Plakaten har sin egen tittel. Da skal ikke vår ligge oppå den. */
#scene.har-bilde #tittel { display: none; }

/* Den tegnede scenen. Vises til bildet er på plass, og ligger som
   stemningslag under bildet når det er der. Samme koordinatrom. */
#tegnet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
#scene.har-bilde #tegnet { opacity: 0; pointer-events: none; }

/* Vignett + dybde for den TEGNEDE scenen, så teksten er lesbar.
   Når Stians plakat er på plass skal den vises slik den er — da
   dempes vignetten nesten helt bort. */
#scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(2, 5, 7, 0.55) 100%),
    linear-gradient(to bottom, rgba(2, 5, 7, 0.45) 0%, transparent 22%, transparent 62%, rgba(2, 5, 7, 0.72) 100%);
}
#scene.har-bilde::after { opacity: 0.16; }

/* ------------------------------------------------------------- hotspots */

#doerer {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* Når plakaten er der, flyttes dørene av JS til bildets faktiske
   rektangel, ikke til containeren. Da treffer de objektene i kunsten
   på alle skjermstørrelser. */
#scene.har-bilde .doer { position: absolute; }

.doer {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.doer:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 4px;
}

/* Merket som viser at her ER det noe. Diskret, men aldri usynlig —
   en dør ingen finner er ikke en dør. */
.doer .merke {
  position: absolute;
  inset: -6%;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
  pointer-events: none;
}
.doer[data-form="rund"] .merke { border-radius: 50%; inset: -10%; }
.doer[data-form="maane"] .merke { border-radius: 50%; }

.doer:hover .merke,
.doer:focus-visible .merke {
  border-color: var(--neon-svak);
  background: rgba(61, 255, 158, 0.07);
  box-shadow: 0 0 26px rgba(61, 255, 158, 0.22), inset 0 0 18px rgba(61, 255, 158, 0.10);
}

/* Pulsen: et rolig pust som sier «dette er levende», ikke et blink. */
.doer .puls {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 10px var(--neon), 0 0 22px var(--neon-svak);
  animation: pust 3.4s ease-in-out infinite;
  pointer-events: none;
}
.doer[data-form="skilt"] .puls { left: -14px; top: 50%; margin-top: -4px; }
.doer[data-form="rund"]  .puls { left: 50%; bottom: -14px; margin-left: -4px; }
.doer[data-form="maane"] .puls { display: none; }

.doer.stengt .puls { background: var(--tekst-dus); box-shadow: 0 0 8px rgba(143, 179, 168, 0.5); }
.doer.stengt:hover .merke { border-color: rgba(143, 179, 168, 0.5); background: rgba(143, 179, 168, 0.06); box-shadow: none; }

@keyframes pust {
  0%, 100% { opacity: 0.35; transform: scale(0.82); }
  50%      { opacity: 1;    transform: scale(1.12); }
}

/* Navnelappen. På bildet ligger navnet allerede i kunsten, så lappen
   vises bare ved hover/fokus. I den tegnede scenen står den alltid. */
.doer .lapp {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 6px 11px;
  border-radius: 8px;
  background: var(--plate);
  border: 1px solid var(--kant);
  backdrop-filter: blur(6px);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tekst);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.doer .lapp i {
  display: block;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11px;
  color: var(--tekst-dus);
  margin-top: 2px;
}
.doer:hover .lapp,
.doer:focus-visible .lapp { opacity: 1; transform: translateX(-50%) translateY(2px); }

/* Månen har ingen lapp og ingen puls. Den skal ikke røpe seg. */
.doer[data-form="maane"] .lapp { display: none; }
.doer[data-form="maane"] .merke { border-color: transparent !important; background: transparent !important; box-shadow: none !important; }
.doer[data-form="maane"]:hover .merke { border-color: rgba(95, 216, 255, 0.16) !important; }

/* ------------------------------------------------------------- tittelen */

#tittel {
  position: absolute;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
  z-index: 6;
  text-align: center;
  pointer-events: none;
  width: min(92%, 760px);
}
#tittel h1 {
  margin: 0;
  font-size: clamp(30px, 7.2vw, 74px);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #eafff6;
  text-shadow: 0 0 22px rgba(61, 255, 158, 0.34), 0 0 60px rgba(95, 216, 255, 0.20);
}
#tittel p {
  margin: 8px 0 0;
  font-size: clamp(11px, 2.1vw, 15px);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(95, 216, 255, 0.45);
}

/* -------------------------------------------------------------- panelet */

#panel {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 5, 7, 0.78);
  backdrop-filter: blur(7px);
}
#panel[hidden] { display: none !important; }

.kort {
  width: min(100%, 430px);
  background: linear-gradient(180deg, #081418 0%, #050c0f 100%);
  border: 1px solid var(--kant);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.7), 0 0 60px rgba(61, 255, 158, 0.07);
}
.kort .merkelapp {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 10px;
}
.kort h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #eafff6;
}
.kort p { margin: 0 0 16px; color: var(--tekst-dus); font-size: 14px; }
.kort p.naer { color: var(--tekst); }

.knapper { display: flex; gap: 10px; flex-wrap: wrap; }
.knapp {
  flex: 1 1 130px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--kant);
  background: rgba(61, 255, 158, 0.08);
  color: var(--tekst);
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.knapp:hover { background: rgba(61, 255, 158, 0.16); border-color: var(--neon-svak); }
.knapp.dus { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: var(--tekst-dus); }
.knapp.dus:hover { background: rgba(255, 255, 255, 0.09); }

/* kodeboksen */
#kodefelt {
  width: 100%;
  margin: 4px 0 14px;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--kant);
  background: #030809;
  color: var(--neon);
  font: 600 20px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.5em;
  text-align: center;
}
#kodefelt:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(61, 255, 158, 0.14); }
#kodefeil { color: #ff9a80; font-size: 13px; margin: -8px 0 12px; min-height: 18px; }

.fotnote {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 11.5px;
  line-height: 1.5;
  color: #6f8a82;
}

/* --------------------------------------------------------- kalibrering */

body.kalibrer .doer .merke {
  border-color: var(--cyan) !important;
  background: rgba(95, 216, 255, 0.12) !important;
}
body.kalibrer .doer .lapp { opacity: 1; }
body.kalibrer .doer { cursor: move; }

#kalibrator {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 50;
  max-width: min(94vw, 460px);
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--plate);
  border: 1px solid var(--cyan-svak);
  backdrop-filter: blur(8px);
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  color: var(--tekst);
}
#kalibrator h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
#kalibrator textarea {
  width: 100%;
  height: 120px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 7px;
  border: 1px solid var(--kant);
  background: #030809;
  color: var(--neon);
  font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace;
  resize: vertical;
}

/* --------------------------------------------------------------- mobil */

@media (max-width: 720px) {
  #tittel { top: 5%; }
  #tittel h1 { letter-spacing: 0.12em; }
  .doer .lapp { font-size: 11px; padding: 5px 9px; }
  /* Fingre er større enn en musepeker: hver dør får et større treffområde
     enn kunsten den ligger over, uten at merket vokser like mye.
     Sikrer minst ~44 px trykkflate selv der kunsten er liten. */
  .doer::before {
    content: "";
    position: absolute;
    inset: -14px;
    min-width: 44px;
    min-height: 44px;
  }
  #kalibrator { left: 8px; right: 8px; bottom: 8px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .doer .puls { animation: none; opacity: 0.8; }
  #bilde { transition: none; }
  .aurora { animation: none !important; }
}