/* Tid Bolig: the hero. The drawing (inline SVG) and the render share one box with the render's
   own aspect, so the traced lines lie on the houses. --f (0 to 1) is the build, set by js/hero.js. */

.hero { position: relative; background: var(--kalk); }
.hero-scene {
  --f: 1;
  position: relative; height: 100svh; min-height: 540px; overflow: hidden;
  container-type: size;
  background: color-mix(in srgb, var(--himmel) calc(var(--himmel-andel, 1) * 100%), var(--kalk));
}
html.js-anim .hero { height: calc(100svh * (1 + var(--hero-reise))); min-height: calc(540px * (1 + var(--hero-reise))); }
html.js-anim .hero-scene { position: sticky; top: 0; --himmel-andel: clamp(0, calc((var(--f) - 0.7) / 0.2), 1); }

/* the box: the render's aspect, anchored at the bottom, wide enough to cover */
.hero-flate {
  position: absolute; bottom: var(--flate-bunn, 0);
  left: var(--flate-venstre, 50%);
  width: var(--flate-b, max(100cqw, 100cqh * 1.3342));
  aspect-ratio: 2048 / 1535;
  transform: translateX(var(--flate-flytt, -50%));
}
.hero-bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.js-anim .hero-bilde {
  --r: clamp(0, calc((var(--f) - 0.62) / 0.28), 1);
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--r) * 118% - 18%), transparent calc(var(--r) * 118%));
  mask-image: linear-gradient(to top, #000 calc(var(--r) * 118% - 18%), transparent calc(var(--r) * 118%));
}

/* the drawing */
.tegning { display: none; }
html.js-anim .tegning {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  opacity: calc(1 - clamp(0, calc((var(--f) - 0.84) / 0.13), 1));
}
.tegning path {
  fill: none; stroke: var(--strek); stroke-linecap: round; stroke-linejoin: round;
  stroke-width: calc(var(--sw, 2) * 1.2);
  stroke-dasharray: 1 1;
  stroke-dashoffset: clamp(0, calc((var(--b) - var(--f)) / (var(--b) - var(--a))), 1);
}
.tegning .t-f { stroke-width: calc(var(--sw, 2) * 0.85); opacity: 0.85; }
.tegning .t-l { stroke-width: calc(var(--sw, 2) * 0.7); opacity: 0.42; }
.tegning .t-k {
  stroke: var(--kobber); stroke-width: calc(var(--sw, 2) * 0.8);
  opacity: calc(0.6 - 0.6 * clamp(0, calc((var(--f) - 0.5) / 0.18), 1));
}
.tegning .t-m {
  stroke: var(--kobber); stroke-width: calc(var(--sw, 2) * 1.1);
  opacity: calc(1 - clamp(0, calc((var(--f) - 0.64) / 0.14), 1));
}

/* text in the sky: the build log, then the title on the left and the ingress with the buttons on the right */
.hero-innhold {
  position: absolute; z-index: 2; left: var(--marg); right: var(--marg);
  top: calc(var(--meny-h) + clamp(0.75rem, 4vh, 3rem));
}
.hero-merke { color: var(--kobber-tekst); margin-bottom: clamp(0.6rem, 1.8vh, 1.1rem); }
.hero-merke::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }
html.js-anim .hero-merke { display: none; }
.hero h1 {
  font-size: clamp(2.2rem, min(4.7vw, 7.8vh), 4.7rem); font-weight: var(--vekt-tittel);
  letter-spacing: var(--sporing-tittel); line-height: 1.03; color: var(--tekst);
  text-wrap: balance; max-width: 13em;
}
.hero-ingress { margin-top: clamp(0.7rem, 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.75rem; margin-top: clamp(1rem, 2.6vh, 1.75rem); }

/* the build log: the copper arc from the logo fills like a clock hand */
.hero-logg {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: clamp(0.7rem, 2vh, 1.2rem);
  color: var(--tekst); min-height: 34px;
}
html:not(.js-anim) .hero-logg { display: none; }
.hero-bue { width: 34px; height: 34px; flex: none; overflow: visible; }
.hero-bue path { fill: none; stroke-linecap: butt; stroke-width: 4; }
.hero-bue .bue-spor { stroke: var(--linje-sterk); }
.hero-bue .bue-fyll { stroke: var(--kobber); stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--f)); }
.logg-overskrift { font-size: var(--str-merke); font-weight: var(--vekt-merke); letter-spacing: var(--sporing-merke); text-transform: uppercase; color: var(--kobber-tekst); }
.logg-steg { font-size: 0.98rem; font-weight: 500; white-space: nowrap; padding-left: 0.75rem; border-left: 1px solid var(--linje-sterk); }
.logg-steg [data-logg-nr] { color: var(--kobber-tekst); font-variant-numeric: tabular-nums; margin-right: 0.45rem; }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hero-rad { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 0.7fr); align-items: end; column-gap: clamp(2rem, 4vw, 5rem); }
  .hero-ingress { margin-top: 0; }
}

.hero-merknad {
  position: absolute; z-index: 2; right: var(--marg); bottom: 1rem;
  font-size: 0.75rem; letter-spacing: 0.04em; color: var(--merknad);
  text-shadow: 0 1px 3px var(--merknad-skygge);
}
html.js-anim .hero-merknad { opacity: clamp(0, calc((var(--f) - 0.86) / 0.12), 1); }

/* entrance on load */
html.js-anim .hero-innhold > *, html.js-anim .hero-logg {
  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-logg { animation-delay: 0.3s; }
@keyframes hero-inn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* short and wide windows (Sverre's 1210 x 654): the title on one line beside the buttons, no ingress,
   and the houses sit a little lower (only the driveway is cropped) */
@media (min-width: 900px) and (max-height: 720px) and (min-aspect-ratio: 1/1) {
  .hero-rad { grid-template-columns: auto auto; justify-content: space-between; }
  .hero h1 { white-space: nowrap; max-width: none; font-size: clamp(2.1rem, min(3.9vw, 7.2vh), 3.4rem); }
  .hero-ingress { display: none; }
  .hero-knapper { margin-top: 0; flex-wrap: nowrap; }
  .hero-scene { --flate-bunn: -2.2cqw; }
}
/* upright screens: the main house fills the width, standing on the bottom; the sky above carries the text */
@media (max-aspect-ratio: 1/1) {
  .hero-scene { --flate-b: 202cqw; --flate-venstre: 0%; --flate-flytt: -4.7%; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 767px) {
  .hero-innhold { top: calc(var(--meny-h) + 1.25rem); }
  .hero h1 { font-size: clamp(2.2rem, 10.6vw, 2.9rem); }
  .hero-knapper .knapp { flex: 1 1 auto; }
  .logg-overskrift { display: none; }
  .logg-steg { padding-left: 0; border-left: 0; }
}