/* Introfilm (2026-09-24): den scrollstyrda filmen (norrsken → Hallands kust → upplyst fönster) är första skärmen
   och glider undan som en skjutdörr; den ljusa startsidan står bakom. Mekaniken kommer från hero.css/hero.js
   (godkänd 21/9), typsnitt och knappar följer startsidan.
   Lägen sätts av skriptet i <head>: html.film (förstagångsbesökare), html.direkt (sett introt eller ankarlänk),
   html.utan-film (reducerad rörelse, datasparläge, 2G). Utan JS gäller basreglerna: stillbild + startsida. */

/* ── Bas: stillbild med slogan och knapp ── */
.fh { position: relative; }
.fh-stage { position: relative; height: calc(100vh - 68px); height: calc(100svh - 68px); min-height: 460px; overflow: hidden; background: var(--night); color: var(--bone); }
.fh-poster, .fh-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fh-stage video { display: none; }
.fh-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(7,9,12,.5), rgba(7,9,12,0) 20%, rgba(7,9,12,0) 70%, rgba(7,9,12,.55)); }
.fh-dim { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .9;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(7,9,12,.62), rgba(7,9,12,.3) 70%, rgba(7,9,12,.22)); }
.fh-run { display: none; }
.fh-skip { display: none; }

.fh-st { position: absolute; inset: 0; z-index: 2; display: none; place-content: center; justify-items: center; text-align: center; padding: 0 var(--gutter); }
.fh-st.forst { display: grid; }
.fh-mark { display: none; }
.fh-slogan { margin: 0 0 .5em; font-family: var(--head); font-weight: 700; font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.8rem); line-height: 1.05; color: #fff; max-width: 20ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(7,9,12,.6); }
.fh-lead { margin: 0; max-width: 34rem; font-size: clamp(1.1rem, 1rem + .3vw, 1.35rem); color: var(--bone); text-shadow: 0 1px 16px rgba(7,9,12,.8); }
.fh-go { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: center; margin-top: 1.6rem; }
.fh-trust { margin: 18px 0 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--bone); text-shadow: 0 1px 12px rgba(7,9,12,.8); }
.textlink.on-dark { color: var(--bone); text-decoration-color: var(--gold); }
.fh-h { margin: 0 0 .35em; font-family: var(--head); font-weight: 700; font-size: clamp(2.4rem, 1.4rem + 4vw, 5.6rem); line-height: 1.02; color: #fff; max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(7,9,12,.6); }
.fh-st:not(.forst) p:not(.fh-h) { margin: 0 auto; max-width: 34rem; font-size: clamp(1.1rem, 1rem + .3vw, 1.35rem); color: var(--bone); text-shadow: 0 1px 16px rgba(7,9,12,.8); }

/* ── Direkt: ingen film alls, bara startsidan ── */
html.direkt .fh-stage, html.direkt .fh-run { display: none; }

/* ── Film ── */
html.film .top { position: fixed; inset: 0 0 auto; z-index: 20; border-bottom-color: transparent; background: transparent; transition: background .3s, border-color .3s; }
html.film .top:not(.over) { background: var(--paper); border-bottom-color: var(--rule); }
html.film .top.over { background: linear-gradient(rgba(7,9,12,.75), rgba(7,9,12,0)); }
html.film .top.over .wordmark { color: #fff; }
html.film .top.over .wordmark span { color: var(--gold); }
html.film .top.over nav a { color: var(--bone); }
html.film .top.over .btn-top { background: var(--paper); border-color: var(--paper); color: var(--ink); }
html.film .top .brand, html.film .top .btn-top { transition: opacity .35s, visibility 0s, background .15s, color .15s; }
html.film .top.t-intro .brand, html.film .top.t-intro .btn-top { opacity: 0; visibility: hidden; pointer-events: none; }
html.film { scroll-behavior: auto; }

html.film .fh { background: var(--night); }
html.film .fh-run { display: block; height: 860vh; }   /* 800vh film + glidning, 60vh vila innan sidan scrollar vidare */
html.film .fh-stage { position: sticky; top: 0; z-index: 3; height: 100vh; height: 100svh; min-height: 0; will-change: transform; }
html.film .fh-stage.glid { box-shadow: 40px 0 80px rgba(0,0,0,.55); }
html.film .fh-stage.ute { visibility: hidden; }
html.film .fh-stage video { display: block; opacity: 0; transition: opacity .4s; }
html.film .fh-stage video.redo { opacity: 1; }
html.film .fh-dim { opacity: 0; }
html.film .fh-st { display: grid; opacity: 0; transform: translateY(16px); pointer-events: none; }
html.film .fh-st.forst { opacity: 1; transform: none; pointer-events: auto; }
html.film .fh-mark { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); margin-bottom: 4vh; }
.fh-mark img { width: clamp(52px, 5.4vw, 96px); height: auto; flex: none; filter: drop-shadow(0 4px 18px rgba(201,168,76,.25)); }
.fh-mark .wordmark { font-family: var(--head); font-weight: 700; color: #fff; font-size: clamp(1.5rem, .9rem + 3.4vw, 4.8rem); letter-spacing: .24em; margin-right: -.24em; white-space: nowrap; }
.fh-mark .wordmark span { color: var(--gold); }
html.film .fh-st.sist { place-content: end start; justify-items: start; text-align: left; padding: 0 0 12vh calc(var(--gutter) + 2vw); }
html.film .fh-st.sist .fh-h { max-width: 12ch; }
html.film .fh-st.sist p:not(.fh-h) { margin: 0; max-width: 26rem; }
html.film .fh-st.sist .fh-go { justify-content: flex-start; }
html.film .fh-skip { position: absolute; right: var(--gutter); bottom: 5vh; z-index: 4; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 2px; font-family: var(--mono); font-size: .85rem; letter-spacing: .06em; color: var(--bone); text-decoration: none;
  border-bottom: 1px solid rgba(201,168,76,.7); transition: opacity .3s; }
html.film .fh-skip::after { content: "↓"; color: var(--gold); }
html.film .fh-skip:hover { color: #fff; border-bottom-color: var(--gold); }
html.film .fh-skip.borta { opacity: 0; pointer-events: none; }
html.film .fh-skip:focus-visible, html.film .fh-st a:focus-visible { outline-color: var(--gold); }

/* Startsidan bakom dörren */
html.film .behind { overflow-x: clip; color: var(--ink); position: sticky; top: var(--mast-h, 68px); z-index: 1; min-height: calc(100vh - var(--mast-h, 68px)); display: flex; align-items: center; background: var(--paper); }
html.film .behind:focus { outline: none; }
html.film .behind > .wrap { width: 100%; }
html.film .behind .hero-in { will-change: transform, opacity; }

@media (max-width: 760px) {
  html.film .fh-st.sist { place-content: end center; justify-items: center; text-align: center; padding: 0 var(--gutter) 8vh; }
  html.film .fh-st.sist .fh-go { justify-content: center; }
}
@media (max-width: 900px) {
  html.film .behind { align-items: flex-start; }
}