/* Renergi Infra: the hero (H2, 29.10.2026, after Sverre found H1 not exciting enough: «gjør heroen og resten av nettsiden
   mer spennende enn det den heroen der er»). Renergi's own photo of a lineman walking towards the pole with the cabinet,
   the Renergi Infra logo on his back. While you scroll, a precise line drawing of that same photo draws itself on the
   night ground (traced by hand from the photo: production/kilde/hero2/), the power runs down the cable into the cabinet in
   the logo's gradient, and from the cabinet the real photo spreads out until it fills the panel; the camera eases
   closer all the way. The text stands still on the night panel. Without JavaScript or with reduced motion the hero is
   the photo with the text, and nothing moves. --f, --g and the reveal's radius are set by js/hero.js. */

.hero { position: relative; background: var(--natt); }

.hero-scene {
  --f: 0;
  --foto-b: min(65vw, 118svh);            /* the photo panel's width; its height is the scene's */
  --pb: var(--foto-b);
  --ph: max(100svh, 560px);
  --bunn-h: 4.4rem;                       /* the facts along the bottom, with their hairline */
  --luft: clamp(1rem, 3.2svh, 2.6rem);    /* between the facts and the text above them */
  position: relative; height: 100svh; min-height: 560px; overflow: hidden;
  container-type: size;
  background:
    radial-gradient(55% 45% at 0% 100%, rgba(237, 128, 73, 0.1), transparent 70%),
    var(--natt);
  color: var(--hvit);
}
/* container units where the browser has them (Safari 16 and later); the vw and svh above stand in for older ones */
@supports (width: 1cqw) {
  .hero-scene { --foto-b: min(65cqw, 118cqh); --ph: 100cqh; --luft: clamp(1rem, 3.2cqh, 2.6rem); }
}
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; }
/* a phone on its side is lower than the scene's least height: pinned, the scene takes the window's height instead */
@media (max-height: 559px) {
  html.js-anim .hero, html.js-anim .hero-scene, .hero-scene { min-height: 0; }
  .hero-scene { --ph: 100svh; }
}

/* ---------- the photo panel ---------- */
.hero-flate { position: absolute; top: 0; bottom: 0; right: 0; width: var(--foto-b); overflow: hidden; }
/* the photo and the drawing share one box with the photo's own shape (the cut is x 0 to 80 % of the photo, 1.2:1), laid
   over the panel like object-fit: cover at 55 % 50 %, so every line of the drawing lies on the photo. The camera eases
   towards the lineman */
.hero-bilde {
  --bw: max(var(--pb), calc(var(--ph) * 1.2));
  --bh: max(var(--ph), calc(var(--pb) / 1.2));
  position: absolute; width: var(--bw); height: var(--bh);
  left: calc((var(--pb) - var(--bw)) * 0.55); top: calc((var(--ph) - var(--bh)) * 0.5);
  transform-origin: 30% 44%;
}
html.js-anim .hero-bilde { transform: scale(calc(1 + var(--f) * var(--hero-naer))); will-change: transform; }
.hero-foto { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* the photo spreads out from the cabinet (90.9 % 49 % of the cut): --rr is the radius, --rk the soft edge inside it */
html.js-anim .hero-foto {
  -webkit-mask-image: radial-gradient(circle at 90.9% 49%, #000 calc(var(--rr, 0px) - var(--rk, 60px)), transparent var(--rr, 0px));
  mask-image: radial-gradient(circle at 90.9% 49%, #000 calc(var(--rr, 0px) - var(--rk, 60px)), transparent var(--rr, 0px));
}
html.js-anim .hero-bilde.ferdig .hero-foto { -webkit-mask-image: none; mask-image: none; }

/* ---------- the drawing ---------- */
.hero-tegning { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
html:not(.js-anim) .hero-tegning, .hero-bilde.ferdig .hero-tegning { display: none; }
.hero-tegning path {
  fill: none; stroke: var(--strek); stroke-width: 1.15px; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
}
.hero-tegning .t-svak { stroke: var(--strek-svak); }
.hero-tegning .t-mann { stroke: var(--strek-sterk); stroke-width: 1.35px; }
.hero-tegning .t-r { stroke: url(#t-energi); stroke-width: 1.6px; }
.hero-tegning path[data-t] { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.hero-tegning .t-strom { stroke: url(#t-strom-g); stroke-width: 3.2px; stroke-dasharray: 0.24 1.4; stroke-dashoffset: 0.24; filter: url(#t-glod); }
.hero-tegning .t-skap-glod { stroke: url(#t-energi); stroke-width: 2.2px; opacity: var(--g, 0); filter: url(#t-glod); }
.hero-tegning .t-ring { fill: none; stroke: url(#t-energi); stroke-width: 2.4px; vector-effect: non-scaling-stroke; opacity: 0; filter: url(#t-glod); }

/* the seam to the night panel, a little shade under the menu, and the ground at the bottom where the facts stand */
.hero-flate::before, .hero-flate::after { content: ""; position: absolute; z-index: 1; pointer-events: none; }
.hero-flate::before { top: 0; bottom: 0; left: -1px; width: 13%; background: linear-gradient(90deg, var(--natt), rgba(14, 21, 28, 0)); }
.hero-flate::after {
  inset: 0;
  background:
    linear-gradient(to bottom, var(--hero-slor-topp), transparent 24%),
    linear-gradient(to top, var(--hero-slor-bunn), var(--hero-slor-midt) 18%, transparent 36%);
}

/* ---------- the text, on the night panel ---------- */
.hero-innhold {
  position: absolute; z-index: 2; left: var(--marg); bottom: calc(var(--bunn-h) + var(--luft));
  width: calc(100vw - var(--foto-b) - var(--marg) - clamp(1.5rem, 3vw, 3.5rem)); max-width: 36rem;
  --fokus: var(--hvit);
}
@supports (width: 1cqw) {
  .hero-innhold { width: calc(100cqw - var(--foto-b) - var(--marg) - clamp(1.5rem, 3cqw, 3.5rem)); }
}
.hero-merke { color: var(--hvit); margin-bottom: clamp(0.8rem, 2.4svh, 1.3rem); }
.hero h1 {
  font-size: clamp(2.3rem, min(4.6vw, 8.8svh), 5.2rem);
  font-weight: var(--vekt-tittel); letter-spacing: var(--sporing-tittel); line-height: 1.02; color: inherit;
  text-wrap: balance;
}
@supports (width: 1cqw) {
  .hero h1 { font-size: clamp(2.3rem, min(4.6cqw, 8.8cqh), 5.2rem); }
}
/* wide screens: the text stands in the middle of the panel, between the menu and the facts */
@media (min-aspect-ratio: 1001/1000) {
  .hero-innhold {
    top: var(--meny-h); bottom: var(--bunn-h);
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding-block: var(--luft);
  }
}
.hero-ingress { margin-top: clamp(0.9rem, 2.4svh, 1.4rem); max-width: 30rem; font-size: var(--str-ingress); line-height: 1.5; color: var(--hero-tekst-dempet); }
.hero-knapper { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.2rem, 3.6svh, 2.1rem); }
.hero .knapp-omriss {
  color: var(--hvit); border-color: var(--hero-kant); background: var(--hero-knapp-flate);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero .knapp-omriss:hover { background: var(--hvit); color: var(--natt); border-color: var(--hvit); }

/* ---------- the facts along the bottom ---------- */
.hero-bunn {
  position: absolute; z-index: 2; left: var(--marg); right: var(--marg); bottom: 0;
  height: var(--bunn-h); display: flex; align-items: center;
  border-top: 1px solid var(--hero-linje);
  font-size: 0.95rem; font-weight: 500; color: var(--hero-tekst-dempet);
}
.hero-fakta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0; }
.hero-fakta li { display: inline-flex; align-items: center; }
.hero-fakta li + li::before { content: ""; width: 1px; height: 1.05em; margin: 0 1.15rem; background: var(--hero-linje); }
/* the way through the hero: a hairline in the logo's gradient fills over the facts while you scroll */
html.js-anim .hero-bunn::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--energi); transform-origin: left center; transform: scaleX(var(--f));
}

/* ---------- entrance on load: the text comes up (the drawing starts itself, in hero.js) ---------- */
html.js-anim .hero-innhold > *, html.js-anim .hero-bunn { 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.22s; }
html.js-anim .hero-bunn { animation-delay: 0.4s; }
@keyframes hero-inn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* wide windows under 600 px high: the ingress gives way, so the title and the buttons have room (Sverre's 1210 x 654
   keeps it: it says what Renergi does) */
@media (min-aspect-ratio: 1001/1000) and (max-height: 599px) {
  .hero-ingress { display: none; }
}

/* ---------- upright screens ----------
   The photo box at full width under the menu (at 50 % 30 %), so his helmet never stands behind the bar; its foot melts
   into the night ground the text stands on */
@media (max-aspect-ratio: 1/1) {
  .hero-scene { --pb: 100vw; --ph: min(calc(100vw / 1.0949), 50svh); }
  @supports (width: 1cqw) {
    .hero-scene { --pb: 100cqw; --ph: min(calc(100cqw / 1.0949), 50cqh); }
  }
  .hero-flate { top: var(--meny-h); bottom: auto; left: 0; right: 0; width: 100%; height: var(--ph); }
  .hero-bilde { left: calc((var(--pb) - var(--bw)) * 0.5); top: calc((var(--ph) - var(--bh)) * 0.3); }
  .hero-flate::before { top: auto; left: 0; right: 0; bottom: -1px; width: auto; height: 34%; background: linear-gradient(to top, var(--natt), rgba(14, 21, 28, 0)); }
  .hero-flate::after { background: none; }
  .hero-innhold { right: var(--marg); width: auto; max-width: 34rem; }
  .hero h1 { font-size: clamp(2.1rem, 9.2vw, 3.4rem); }
  @supports (width: 1cqw) {
    .hero h1 { font-size: clamp(2.1rem, 9.2cqw, 3.4rem); }
  }
}
/* short upright screens: the ingress gives way first, then the small mark */
@media (max-aspect-ratio: 1/1) and (max-height: 799px) {
  .hero-ingress { display: none; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 699px) {
  .hero-merke { display: none; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 599px) {
  .hero-scene { --bunn-h: 5.4rem; --luft: 1.1rem; }
  .hero-bunn { font-size: 0.86rem; }
  .hero-fakta { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 0.4rem 1rem; width: 100%; }
  .hero-fakta li + li::before { display: none; }
  .hero-knapper { flex-wrap: nowrap; gap: 0.6rem; }
  .hero-knapper .knapp { flex: 1 1 auto; padding-inline: 0.9rem; }
}
@media (max-width: 359px) {
  .hero-knapper .knapp { padding-inline: 0.6rem; font-size: 0.94rem; }
}
/* a phone on its side: the photo panel stays, the mark and the facts give way so the title and the buttons fit */
@media (min-aspect-ratio: 1001/1000) and (max-height: 559px) {
  .hero-merke, .hero-bunn { display: none; }
  .hero-innhold { bottom: 1.25rem; }
  .hero h1 { font-size: clamp(1.8rem, 7svh, 2.4rem); }
}