/* ============================================================
   Euphoria Bygg: hero.css
   Clean and light, after Tid Bolig (Sverre 28.10.2026: «gå for et
   enklere og cleanere design for euphoria som faktisk konverterer»),
   with Tid Bolig's drawing that becomes the photograph (Sverre
   29.10.2026: «kjør tegning til bilde men velg det kuleste på hele
   profilen!»). The words and the two buttons stand still on the
   left; on the right the white house with two dormers (Sverre 29.10:
   «bruk dette bildet på heroen i stedet, gjør overgangen fra tegning
   til bilde så smooth som mulig») is drawn in ink, a light wash of
   the photograph comes up under the lines, then the photograph. --f
   (0 to 1) is the film, set on the scene by hero.js; each stroke
   draws between its own --a and --b.

   Without JavaScript, or with reduced motion, the hero is one screen
   with the finished photograph.
   ============================================================ */

.hero {
  position: relative;
  background: var(--hero-grunn);
  color: var(--tekst);
}

html.js-anim .hero {
  height: calc(var(--hero-scene-h) + var(--hero-reise));
}

.hero-scene {
  --f: 1;  /* the film, set by hero.js; finished until the script says otherwise */
  position: relative;
  height: var(--hero-scene-h);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: clamp(40px, 5vw, 96px);
  padding: calc(var(--meny-h) + 4px) var(--side) var(--hero-bunn);
  overflow: hidden;
}

html.js-anim .hero-scene {
  position: sticky;
  top: 0;
}

/* ---------- the words ---------- */

.hero-tekst {
  align-self: center;
  max-width: 640px;
  padding-bottom: 2svh;
}

.hero-vurdering {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--liten);
  color: var(--tekst-2);
}

.hero-vurdering .stjerner {
  display: flex;
  gap: 2px;
  color: var(--furu);
}

.hero-vurdering .stjerner svg {
  width: 15px;
  height: 15px;
}

.hero h1 {
  max-width: 10.5em;
  margin: 20px 0 0;
  font-size: var(--tittel-hero);
  font-weight: var(--vekt-tittel);
  line-height: 1.02;
  letter-spacing: var(--sporing-tittel);
  text-wrap: balance;
}

.hero-under {
  max-width: 30em;
  margin: 24px 0 0;
  font-size: var(--ingress);
  line-height: 1.5;
  color: var(--tekst-2);
}

.hero-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-godkjent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  font-size: var(--liten);
  color: var(--tekst-2);
}

.hero-godkjent svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--furu-dyp);
}

/* ---------- the frame: the drawing, then the photograph ---------- */

.hero-ramme {
  --sw: 2;
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 3px;
}

.hero-foto {
  position: absolute;
  inset: 0;
  background: var(--kalk-2);
}

.hero-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;  /* the same as the drawing's xMidYMin slice: the chimney is never cut */
}

/* the shade under the project's name */
.hero-foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(to top, var(--skygge), var(--skygge-svak));
  pointer-events: none;
}

.hero-tegning,
.hero-steg {
  display: none;
}

/* the drawing, the wash and the photograph lie on one layer that comes slowly closer through the film (hero.js sets
   --zoom-s); hero.js also turns --f into three soft curves, so each layer eases in and out: --strek (the lines),
   --vask (the light wash of the photograph under the lines) and --foto (the photograph) */
.hero-lag {
  position: absolute;
  inset: 0;
}

html.js-anim .hero-lag {
  transform: scale(var(--zoom-s, 1));
  transform-origin: 50% 35%;
}

.hero-vask {
  display: none;
}

html.js-anim .hero-vask {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  opacity: var(--vask, 0);
}

html.js-anim .hero-foto {
  opacity: var(--foto, 1);
}

html.js-anim .hero-tegning {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-tegning path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: clamp(0, calc((var(--b) - var(--f)) / (var(--b) - var(--a))), 1);
}

/* the house in ink: outlines and the finer lines (windows, glazing bars, cladding); they fade as the photograph comes */
.hero-tegning .t-h,
.hero-tegning .t-v {
  stroke: var(--tekst);
}

.hero-tegning .t-h {
  opacity: calc(0.92 * var(--strek, 1));
}

.hero-tegning .t-v {
  opacity: calc(0.62 * var(--strek, 1));
}

.hero-tegning .t-h {
  stroke-width: calc(1.1 * var(--sw));
}

.hero-tegning .t-v {
  stroke-width: calc(0.85 * var(--sw));
}

/* construction lines in pine: the horizon and the rays to the two vanishing points; they fade while the deck is built */
.hero-tegning .t-k {
  stroke: var(--furu);
  stroke-width: calc(0.8 * var(--sw));
  opacity: calc(0.85 - 0.85 * clamp(0, calc((var(--f) - 0.46) / 0.22), 1));
}

/* Euphoria's own work: the joists on ground fabric, then the deck boards */
.hero-tegning .t-b,
.hero-tegning .t-d {
  stroke: var(--furu-dyp);
}

.hero-tegning .t-b {
  stroke-width: calc(1.7 * var(--sw));
}

.hero-tegning .t-d {
  stroke-width: calc(1 * var(--sw));
}

/* the step the drawing has reached, under the trust line: a quiet line that fills while the deck is built */
html.js-anim .hero-steg {
  display: grid;
  gap: 8px;
  max-width: 340px;
  margin: 30px 0 0;
  font-size: var(--liten);
  opacity: calc(1 - var(--foto, 0) * 0.85);
}

.hero-steg-over {
  font-size: 12px;
  font-weight: var(--vekt-sterk);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--furu-dyp);
}

.hero-steg-navn {
  display: grid;
}

.hero-steg-navn > span {
  grid-area: 1 / 1;
  color: var(--tekst);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.hero-steg-navn > span.aktiv {
  opacity: 1;
}

.hero-steg-linje {
  display: block;
  height: 2px;
  margin-top: 4px;
  overflow: hidden;
  background: var(--linje-mork);
}

.hero-steg-linje i {
  display: block;
  height: 100%;
  background: var(--furu-dyp);
  transform: scaleX(var(--f));
  transform-origin: 0 50%;
}

.hero-lapp {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: var(--liten);
  font-weight: var(--vekt-sterk);
  color: var(--tekst-lys);
  text-decoration: none;
  text-shadow: var(--skygge-tekst);
}

html.js-anim .hero-lapp:not(:focus-visible) {
  opacity: var(--foto, 1);
}

.hero-lapp .pil {
  width: 17px;
  height: 17px;
  transition: transform 0.35s var(--ease-ut);
}

.hero-lapp:hover .pil {
  transform: translate3d(4px, 0, 0);
}

/* ---------- the entrance on load (only when motion is allowed) ---------- */

html.js-anim .hero-inn {
  animation: hero-opp 1s var(--ease-ut) both;
  animation-delay: calc(0.12s + var(--i, 0) * 0.08s);
}

@keyframes hero-opp {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- phones and tablets: the words first, the frame under them ---------- */

@media (max-width: 1023px) {
  .hero-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 28px;
    padding-top: calc(var(--meny-h) + 18px);
  }

  .hero-tekst {
    align-self: start;
    max-width: 680px;
    padding-bottom: 0;
  }

  .hero-ramme {
    min-height: 200px;
  }
}

@media (max-width: 767px) {
  .hero-scene {
    row-gap: 22px;
    padding-top: calc(var(--meny-h) + 12px);
  }

  .hero h1 {
    margin-top: 14px;
  }

  .hero-under {
    margin-top: 16px;
  }

  .hero-knapper {
    flex-wrap: nowrap;
    margin-top: 22px;
  }

  .hero-knapper .knapp {
    flex: 1 1 auto;
    padding: 0 16px;
    font-size: 15px;
  }

  .hero-godkjent {
    margin-top: 16px;
    font-size: 14px;
  }

  /* the drawing shows how far it has come, so on phones the step line gives its room to the frame (02.11.2026: with the
     heading on three lines the frame was cut to 154 of its 200 px in Safari on a 390 x 664 iPhone screen) */
  html.js-anim .hero-steg {
    display: none;
  }

  .hero-vurdering {
    font-size: 14px;
  }
}

/* narrow phones (360 px Android, 320 px): both buttons stay inside the side margin (02.11.2026: 7 px over at 360,
   31 px cut at 320) */
@media (max-width: 379px) {
  .hero-knapper .knapp {
    padding: 0 12px;
    font-size: 14px;
  }
}

@media (max-width: 339px) {
  .hero-knapper {
    flex-wrap: wrap;
  }
}

/* short phone screens (an iPhone SE in Safari is 375 x 553): tighter spacing, and the approval line, which also stands in
   om oss and the footer, gives its room to the frame */
@media (max-width: 767px) and (max-height: 600px) {
  .hero-scene {
    row-gap: 14px;
  }

  .hero h1 {
    margin-top: 8px;
  }

  .hero-under {
    margin-top: 10px;
  }

  .hero-knapper {
    margin-top: 16px;
  }

  .hero-godkjent {
    display: none;
  }
}