/* Nordic MRO: the hero, H5 (07.11.2026). Sverre about the house lighting up in the dark: «Finn og lag en helt ny hero. den nåværende animsajonen
   viser ingenting». Now the hero shows the work at once: seven of Nordic MRO's own jobs stand together on the right, and the scroll pushes six of them
   out past the edges at different speeds while the kitchen under the glass gable on Brønøya grows until it fills the box. Bright, real photographs, no film.
   Only transform moves. js/hero.js sets --f (0 to 1) and --e (the same, eased); each picture has its place at the start (--x, --y, from the box's centre, in
   % of the box), its size at the start (--b, --h) and how fast it grows (--k). A picture is laid out at its final size and scaled down, so it stays sharp.
   The ground is deep fjord; the menu lies clean on it above the pictures. Without the motion the hero is the kitchen with the text. */

.hero {
  position: relative; background: var(--skifer-dyp); color: var(--tekst-lys);
  --tekst: var(--tekst-lys); --tekst-dempet: var(--tekst-lys-dempet); --linje-sterk: var(--linje-lys-sterk);
  --aksent: var(--is); --fokus: var(--is);
}
.hero-scene {
  --f: 1; --e: 1;
  --flate-b: min(calc((100cqh - var(--meny-h)) * 1.2), 66cqw);    /* the box's width on a landscape screen */
  --hero-kol: calc(100cqw - var(--flate-b) - var(--marg) * 1.7);  /* the text column beside it */
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  container-type: size;
  background: var(--skifer-dyp);
}
html.js-anim .hero { height: calc(100svh * (1 + var(--hero-reise))); min-height: calc(560px * (1 + var(--hero-reise))); }
html.js-anim .hero-scene { position: sticky; top: 0; --f: 0; --e: 0; }
@supports not (width: 1cqw) {
  .hero-scene { --flate-b: min(calc((100svh - var(--meny-h)) * 1.2), 66vw); --hero-kol: calc(100vw - var(--flate-b) - var(--marg) * 1.7); }
}

/* ---------- the pictures ---------- */
.hero-flate {
  position: absolute; top: var(--meny-h); right: 0; bottom: 0;
  width: var(--flate-b);
  overflow: hidden;
  container-type: size;
}
/* the seam between the text and the pictures fades into the ground, with an eased ramp so no edge shows (Sverre 07.11.2026: «legg inn en
   fade mellom venstre og høyre halvdel der skille skjer»). It stands still over the moving pictures, so it costs nothing per frame. */
.hero-flate::after {
  content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 19%;
  pointer-events: none;
  background: linear-gradient(to right, var(--skifer-dyp), transparent);
  background: linear-gradient(to right,
    var(--skifer-dyp) 0%,
    color-mix(in srgb, var(--skifer-dyp) 90%, transparent) 16%,
    color-mix(in srgb, var(--skifer-dyp) 70%, transparent) 36%,
    color-mix(in srgb, var(--skifer-dyp) 42%, transparent) 56%,
    color-mix(in srgb, var(--skifer-dyp) 16%, transparent) 78%,
    transparent 100%);
}
.hero-rute { display: none; }
.hero-hoved { display: block; position: absolute; inset: 0; }
.hero-rute-inn { position: absolute; inset: 0; overflow: hidden; background: var(--skifer); }
.hero-rute-inn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bp, 50% 50%); }
html.js-anim .hero-rute {
  display: block; position: absolute; inset: auto; left: 50%; top: 50%;
  width: calc(var(--b) * 1cqw / 0.47); height: calc(var(--h) * 1cqh / 0.47);
  margin-left: calc(var(--b) * -0.5cqw / 0.47); margin-top: calc(var(--h) * -0.5cqh / 0.47);
  --z: calc(1 + (var(--k) - 1) * var(--e));
  transform: translate(calc(var(--x) * 1cqw * var(--z)), calc(var(--y) * 1cqh * var(--z))) scale(calc(0.47 * var(--z)));
  will-change: transform;
}
html.js-anim .hero-hoved { z-index: 2; }
/* a <picture> (a phone's own sizes) makes no box of its own */
.hero-rute-inn picture { display: contents; }
.hero-rute-inn source { display: none; }
/* the photo in each picture moves a little against its frame, so it feels like a camera and not a slide */
html.js-anim .hero-rute-inn img { transform-origin: var(--bp, 50% 50%); transform: scale(calc(1.12 - 0.12 * var(--e))); }
/* on load they come up one after another, the kitchen first, so the page never opens on a still picture */
html.js-anim .hero-rute-inn { animation: rute-inn 1s var(--mykt) both; animation-delay: calc(var(--n) * 90ms + 120ms); }
@keyframes rute-inn { from { opacity: 0; transform: translateY(5%) scale(0.95); } to { opacity: 1; transform: none; } }

/* ---------- the text, on the night to the left ---------- */
.hero-innhold {
  position: absolute; z-index: 4; left: var(--marg);
  width: var(--hero-kol);
  bottom: clamp(1.25rem, 5cqh, 3.25rem);
  color: var(--tekst);
}
.hero h1 {
  font-size: clamp(2rem, min(3.4vw, 6.3vh), 3.8rem); font-weight: var(--vekt-tittel);
  letter-spacing: var(--sporing-tittel); line-height: 1.04; text-wrap: balance;
}
.hero-merke {
  display: flex; align-items: center; gap: 0.7rem; margin-bottom: clamp(0.6rem, 1.8vh, 1rem);
  font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke);
  line-height: 1.3; text-transform: uppercase; color: var(--tekst);
}
.hero-merke::before { content: ""; width: 1.75rem; height: 3px; background: var(--aksent); flex: none; }
.hero-linje { display: block; }
.hero-ingress { margin-top: clamp(0.8rem, 2vh, 1.25rem); max-width: 30rem; font-size: var(--str-ingress); line-height: 1.5; color: var(--tekst-dempet); }
.hero-knapper { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1rem, 2.8vh, 1.75rem); }
.hero-knapper .knapp { white-space: nowrap; }
.hero-knapper .knapp-omriss:hover { background: var(--tekst-lys); color: var(--grafitt); border-color: var(--tekst-lys); }
.hero-fakta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: clamp(1rem, 3vh, 1.9rem);
  font-size: 0.86rem; font-weight: 500; color: var(--tekst-dempet);
}
.hero-fakta li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero-fakta li::before { content: ""; width: 7px; height: 7px; background: var(--aksent); clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }

/* a landscape screen: the text fills its column from under the menu to the bottom with even gaps (Sverre 06.11.2026: «fordel teksten mer utover») */
@media (min-aspect-ratio: 1/1) {
  .hero-innhold {
    container-type: inline-size;
    top: calc(var(--meny-h) + clamp(1.25rem, 5cqh, 3rem)); bottom: clamp(1.25rem, 5cqh, 3rem);
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .hero h1 { font-size: clamp(2rem, min(15.5cqi, 9.2cqh), 6.6rem); }
  .hero-linje { max-width: 8em; }
  .hero-merke { margin-bottom: clamp(0.75rem, 2.2cqh, 1.4rem); font-size: clamp(var(--str-merke), 1.3cqh, 1rem); }
  .hero-ingress, .hero-knapper, .hero-fakta { margin-top: 0; }
  .hero-ingress { max-width: 32em; font-size: clamp(var(--str-ingress), 2.3cqh, 1.75rem); }
  .hero-knapper .knapp { flex: 1 1 auto; justify-content: center; }
  .hero-fakta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 1rem; font-size: clamp(1rem, 1.7cqh, 1.25rem); }
}
@container (min-width: 23.75rem) {
  .hero-fakta { grid-template-columns: minmax(0, max-content) minmax(0, max-content); justify-content: space-between; }
}
@supports not (width: 1cqw) {
  @media (min-aspect-ratio: 1/1) {
    .hero h1 { font-size: clamp(2rem, min(4.4vw, 8.4vh), 6.2rem); }
    .hero-merke { font-size: var(--str-merke); }
    .hero-ingress { font-size: var(--str-ingress); }
    .hero-fakta { font-size: 1rem; }
  }
}

/* the job's name, bottom right once the kitchen fills the box, with a soft shade under it */
.hero-merknad {
  position: absolute; z-index: 4; right: 0; bottom: 0; margin: 0; padding: 2.5rem var(--marg) 1rem 4rem;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; color: var(--merknad);
  background: radial-gradient(ellipse 100% 100% at 100% 100%, var(--natt-hjorne) 0%, transparent 100%);
}
html.js-anim .hero-merknad { opacity: clamp(0, calc((var(--f) - 0.86) / 0.12), 1); }

/* entrance on load */
html.js-anim .hero-innhold > * { animation: hero-inn 0.9s var(--mykt) both; }
html.js-anim .hero-innhold > :nth-child(2) { animation-delay: 0.08s; }
html.js-anim .hero-innhold > :nth-child(3) { animation-delay: 0.16s; }
html.js-anim .hero-innhold > :nth-child(4) { animation-delay: 0.24s; }
html.js-anim .hero-innhold > :nth-child(5) { animation-delay: 0.32s; }
@keyframes hero-inn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* a landscape tablet: the text column is narrow, so no ingress, and the booking button's short words */
@media (min-aspect-ratio: 1/1) and (max-width: 1100px) {
  .hero-ingress { display: none; }
  .hero-knapper .knapp-lang { display: none; }
  .hero-knapper .knapp-kort { display: inline; }
}
@media (min-aspect-ratio: 1/1) and (max-height: 600px) {
  .hero-ingress { display: none; }
}

/* ---------- upright screens: the text on the night at the top, the lit part of the house under it ---------- */
@media (max-aspect-ratio: 1/1) {
  .hero-scene { --flate-h: min(112cqw, 52cqh); }
  .hero-flate { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: var(--flate-h); }
  /* upright: the text stands above the pictures, so the seam is the top edge */
  .hero-flate::after {
    right: 0; bottom: auto; width: auto; height: 16%;
    background: linear-gradient(to bottom, var(--skifer-dyp), transparent);
    background: linear-gradient(to bottom,
      var(--skifer-dyp) 0%,
      color-mix(in srgb, var(--skifer-dyp) 90%, transparent) 16%,
      color-mix(in srgb, var(--skifer-dyp) 70%, transparent) 36%,
      color-mix(in srgb, var(--skifer-dyp) 42%, transparent) 56%,
      color-mix(in srgb, var(--skifer-dyp) 16%, transparent) 78%,
      transparent 100%);
  }
  .hero-innhold { container-type: normal; top: calc(var(--meny-h) + clamp(0.75rem, 2.5cqh, 1.75rem)); bottom: auto; right: var(--marg); width: auto; display: block; }
  .hero h1 { font-size: clamp(2rem, 8.6cqw, 3.4rem); }
  .hero-linje { max-width: none; }
  .hero-merke { margin-bottom: clamp(0.6rem, 1.8vh, 1rem); font-size: var(--str-merke); }
  .hero-ingress { font-size: var(--str-ingress); }
  .hero-knapper { margin-top: clamp(1rem, 2.8vh, 1.75rem); }
  .hero-knapper .knapp { flex: 0 1 auto; }
  .hero-ingress { display: none; }
  .hero-fakta { display: none; }
}
@supports not (width: 1cqw) {
  @media (max-aspect-ratio: 1/1) {
    .hero-scene { --flate-h: min(112vw, 52svh); }
    .hero h1 { font-size: clamp(2rem, 8.6vw, 3.4rem); }
  }
}
/* a low phone (iPhone SE and smaller): the picture takes less, so the buttons never stand on it */
@media (max-aspect-ratio: 1/1) and (max-height: 680px) {
  .hero-scene { --flate-h: min(112cqw, 44cqh); }
}
/* a tall phone has room for the ingress */
@media (max-aspect-ratio: 1/1) and (min-height: 800px) {
  .hero-ingress { display: block; font-size: 1.0625rem; }
  .hero-scene { --flate-h: min(112cqw, 48cqh); }
}
/* the two buttons side by side on a phone: the shorter words on the booking button */
.knapp-kort { display: none; }
@media (max-width: 480px) {
  .hero-knapper { flex-wrap: nowrap; }
  .hero-knapper .knapp { padding-inline: 1.05rem; }
  .hero-knapper .knapp-lang { display: none; }
  .hero-knapper .knapp-kort { display: inline; }
}
@media (max-width: 400px) {
  .hero-knapper .knapp { padding-inline: 0.9rem; }
  .hero-knapper .knapp:first-child svg { display: none; }
}
/* under 360 px the phone button keeps only its icon (its label still says the number), so the two never wrap onto the photo */
.knapp-nr { display: inline; }
@media (max-width: 359px) {
  .hero-knapper .knapp-omriss { padding-inline: 0; width: 48px; flex: none; }
  .hero-knapper .knapp-nr { display: none; }
}

/* ---------- phones (mobil 08.11.2026; everything below is behind max-width: 767px, so the PC stays as it is) ----------
   Sverre 08.11.2026: «alt innholdet skal komme med, siden skal være smooth, ingenting skal laste tregt». The text takes the height it needs
   and the pictures take the rest, so the facts and the ingress need no fixed room. On a real iPhone the window is about 660 px tall
   with the address bar showing, so a rule for «tall phones» never fired there. */
@media (max-aspect-ratio: 1/1) and (max-width: 767px) {
  .hero-scene { display: flex; flex-direction: column; }
  .hero-innhold {
    order: 1; position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; flex: none; margin-inline: var(--marg);
    padding-top: calc(var(--meny-h) + clamp(0.6rem, 2svh, 1.5rem)); padding-bottom: clamp(0.7rem, 1.8svh, 1.1rem);
  }
  .hero-flate { order: 2; position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 100%; height: auto; flex: 1 1 0; min-height: 0; }
  .hero-fakta { display: flex; gap: 0.3rem 0.85rem; margin-top: clamp(0.7rem, 1.6svh, 1.1rem); font-size: 0.9rem; }
}
/* where the two columns fit, the facts line up in them */
@media (max-aspect-ratio: 1/1) and (min-width: 390px) and (max-width: 767px) {
  .hero-fakta { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content); justify-content: space-between; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 767px) and (min-height: 640px) {
  .hero-ingress { display: block; font-size: 1.0625rem; }
}
@media (max-width: 767px) {
  /* the small camera move inside each picture repainted its layer on every frame of the scroll; the box still moves the same way */
  html.js-anim .hero-rute-inn img { transform: none; }
  /* the largest picture on the first screen does not wait */
  html.js-anim .hero-hoved .hero-rute-inn { animation-delay: 0ms; }
  /* past the hero the pictures need no layers of their own (hero.js sets .ute) */
  html.js-anim .hero.ute .hero-rute { will-change: auto; }
}