/* Kupolen — scroll-scrub genom tio tjänster. Mörk duk, teal-glöd, DOM-text över canvasen. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --teal:#4fe3d4; --teal-dim:#2a8f86; --duk:#050a0c; --text:#e8f4f2; --dis:#8fb0ac;
}
html{scroll-behavior:auto}
body{background:var(--duk);color:var(--text);font-family:Supreme,system-ui,-apple-system,sans-serif;overflow-x:clip}

/* canvasen bär allt bildinnehåll — fast bakom texten */
#scen{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;background:var(--duk)}
.korn{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.topp{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:clamp(.9rem,2.4vw,1.6rem) clamp(1.2rem,3.5vw,2.6rem);mix-blend-mode:normal}
.marke{font-weight:800;letter-spacing:.34em;font-size:.85rem;color:var(--text)}
.topp-cta{color:var(--duk);background:var(--teal);text-decoration:none;font-weight:700;font-size:.78rem;
  letter-spacing:.06em;padding:.55em 1.1em;border-radius:99px}

main{position:relative;z-index:4}

/* stationer: full höjd + dwell — texten bor här */
.station{min-height:130vh;display:flex;align-items:center;padding:0 clamp(1.4rem,6vw,5rem);position:relative}
.station.hero,.station.slut{min-height:160vh}
.station .text{max-width:34rem;opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease}
.station.inne .text{opacity:1;transform:none}
.station .mitten{margin-inline:auto;text-align:center}
.station.slut .text{background:radial-gradient(ellipse 130% 100% at 50% 45%,rgba(5,10,12,.66) 0%,rgba(5,10,12,.35) 55%,transparent 75%);padding:3rem 2.5rem;border-radius:24px}

/* övergångar: höjden = scrub-utrymmet (längre = långsammare scrub) */
.overgang{height:260vh}

h1{font-family:Archivo,sans-serif;font-size:clamp(2.6rem,7.5vw,5.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.02;
  text-shadow:0 2px 40px rgba(0,0,0,.75)}
h2{font-family:Archivo,sans-serif;font-size:clamp(1.9rem,5vw,3.4rem);font-weight:700;letter-spacing:-.015em;line-height:1.05;
  text-shadow:0 2px 34px rgba(0,0,0,.75)}
.nr{font-size:.8rem;font-weight:700;letter-spacing:.42em;color:var(--teal);margin-bottom:.9rem}
.visk{font-size:.85rem;letter-spacing:.4em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
.ing{margin-top:1.2rem;font-size:clamp(1rem,2vw,1.15rem);line-height:1.65;color:var(--dis);
  text-shadow:0 1px 22px rgba(0,0,0,.8)}
.station p:not(.ing):not(.nr):not(.visk):not(.pil):not(.fot){margin-top:1rem;font-size:clamp(1rem,1.9vw,1.12rem);
  line-height:1.6;color:var(--dis);text-shadow:0 1px 22px rgba(0,0,0,.8)}
.pil{margin-top:2.6rem;font-size:.8rem;letter-spacing:.3em;color:var(--teal-dim);animation:sjunk 2.4s ease-in-out infinite}
@keyframes sjunk{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.cta{display:inline-block;margin-top:2rem;background:var(--teal);color:var(--duk);text-decoration:none;
  font-weight:800;letter-spacing:.04em;padding:.95em 2.1em;border-radius:99px;font-size:1rem}
.fot{margin-top:3rem;font-size:.75rem;letter-spacing:.14em;color:var(--teal-dim)}

@media (prefers-reduced-motion: reduce){
  .station .text{transition:none;opacity:1;transform:none}
  .pil{animation:none}
}