/* «Slik jobber vi» on the front page: one pinned scene. The four steps roll past on the left (number, title, text) while a film strip
   on the right goes sideways, one frame per step: the site visit, the elevation drawing that draws itself, the work on film, the
   finished job. js/slik.js sets html.slik-klar when its engine runs, and every moving start state sits behind that class: without
   JavaScript or with reduced motion the section is a still sheet, the four steps as a list beside the four frames in a grid.
   Only transform, opacity and the dash offset of the drawing's lines are animated. */

.slik { position: relative; z-index: 1; padding: var(--rom) var(--kant); background: var(--petrol); }
.slik-flate { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
.slik-hode { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.slik .tittel-2 { font-size: clamp(1.75rem, 1.15rem + 2vw, 2.875rem); }

/* the steps, still: a plain numbered list */
.slik-steg { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.slik-trinn { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: 0.75rem; align-items: baseline; padding-top: 1rem; border-top: 1px solid var(--linje-lys); }
.slik-nr { grid-row: 1 / span 2; font-size: 2rem; line-height: 1; letter-spacing: -0.04em; color: var(--eik); font-variant-numeric: tabular-nums; }
.slik-trinn h3 { margin: 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; }
.slik-trinn p { margin: 0.35rem 0 0; line-height: 1.5; color: var(--tekst-lys-sterk); }
.slik-bunn { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.slik-indeks, .slik-teller { display: none; }

/* the frames, still: two by two */
.slik-stripe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--slik-gap); }
.slik-rute { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--petrol-dyp); }
.slik-rute img, .slik-rute video { display: block; width: 100%; height: 100%; object-fit: cover; }
.slik-rute figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.25rem 1rem 0.8rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: var(--tekst-lys); background: linear-gradient(var(--slor-0), var(--slor-2)); pointer-events: none; }
/* still sheet: the clip keeps its controls at the bottom, so its caption stands at the top */
html:not(.slik-klar) .slik-rute video + figcaption { top: 0; bottom: auto; padding: 0.8rem 1rem 2.25rem; background: linear-gradient(var(--slor-2), var(--slor-0)); }

/* the drawing board: night ground with a faint grid, the house as it stands in chalk, what is being built in the timber colour */
.slik-rute-tegning { background-color: var(--natt); background-image: linear-gradient(var(--slik-rutenett) 1px, transparent 1px), linear-gradient(90deg, var(--slik-rutenett) 1px, transparent 1px); background-size: 2.5rem 2.5rem; background-position: 50% 50%; }
.slik-rute-tegning figcaption { background: none; }
.slik-tegning { position: absolute; left: 5%; top: 9%; width: 90%; height: 76%; overflow: visible; }
.slik-tegning path { fill: none; stroke: var(--kalk); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.slik-tegning .tg-ny { stroke: var(--eik); }
.slik-tegning .tg-tynn { stroke-width: 1.3; opacity: 0.5; }
.slik-forklaring { position: absolute; left: 1rem; top: 0.85rem; display: flex; gap: 1.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tekst-lys-dempet); }
.slik-forklaring li::before { content: ""; display: inline-block; width: 1.25rem; height: 2px; margin-right: 0.5rem; vertical-align: 0.28em; background: var(--kalk); }
.slik-forklaring li + li::before { background: var(--eik); }

/* ---- the scene, when the engine runs ---- */
html.slik-klar .slik { padding: 0; }
html.slik-klar .slik-spor { height: calc(100svh - var(--meny-h) + var(--slik-reise) * 100svh); }
html.slik-klar .slik-scene { position: sticky; top: var(--meny-h); display: flex; align-items: center; height: calc(100svh - var(--meny-h)); padding: var(--slik-luft) var(--kant); overflow: hidden; }
html.slik-klar .slik-flate { width: 100%; height: 100%; max-height: 45rem; align-items: stretch; }
html.slik-klar .slik-venstre { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
html.slik-klar .slik-hode { margin-bottom: 0; }

/* the counter rolls like a tally (js writes --x, 0 to 3, on the scene); under it one step's words at a time: js writes --o (how
   visible) and --y (px from its place) on each step. The four steps share one grid cell, so the tallest sets the height */
html.slik-klar .slik-midt { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-height: 0; }
html.slik-klar .slik-teller { display: block; height: 0.86em; overflow: hidden; font-size: clamp(4.25rem, 14.5vh, 8.75rem); line-height: 0.86; letter-spacing: -0.04em; color: var(--eik); font-variant-numeric: tabular-nums; }
html.slik-klar .slik-teller-rull { display: block; transform: translate3d(0, calc(var(--x, 0) * -25%), 0); transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
/* each number has air under it (the row is taller than the window), so the foot of the number before never shows at the top of the window */
html.slik-klar .slik-teller b { display: block; height: 1.1em; font-weight: 400; }
html.slik-klar .slik-steg { display: grid; gap: 0; margin-top: clamp(0.6rem, 2vh, 1.25rem); }
html.slik-klar .slik-trinn { grid-area: 1 / 1; display: block; padding: 0; border: 0; opacity: var(--o, 0); transform: translate3d(0, calc(var(--y, 0) * 1px), 0); transition: opacity 0.14s linear, transform 0.2s ease-out; pointer-events: none; }
html.slik-klar .slik-trinn.er-aktiv { pointer-events: auto; }
html.slik-klar .slik-nr { display: none; }
html.slik-klar .slik-trinn h3 { font-size: clamp(1.75rem, 1.15rem + 1.7vw, 2.625rem); line-height: 1.08; letter-spacing: -0.028em; }
html.slik-klar .slik-trinn p { margin-top: clamp(0.5rem, 1.4vh, 0.9rem); max-width: 30rem; font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); }
html.slik-klar .slik-bunn { margin-top: 0; }

/* the film strip: js writes --x (0 to 3) on the strip and --d (0 to 1, a frame's own progress) on each frame */
html.slik-klar .slik-hoyre { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; }
html.slik-klar .slik-ramme { position: relative; align-self: flex-end; width: min(100%, calc((100svh - var(--meny-h) - 2 * var(--slik-luft) - var(--slik-indeks-h)) * 4 / 3)); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--petrol-dyp); box-shadow: var(--skygge); }
html.slik-klar .slik-stripe { display: flex; gap: var(--slik-gap); height: 100%; transform: translate3d(calc(var(--x, 0) * -1 * (100% + var(--slik-gap))), 0, 0); transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
html.slik-klar .slik-rute { flex: 0 0 100%; height: 100%; aspect-ratio: auto; }
html.slik-klar .slik-rute img, html.slik-klar .slik-rute video { transform: scale(calc(1.09 - 0.09 * var(--d, 0))); transition: transform 0.3s ease-out; }
/* the two photographs drift a little sideways while their frame is the one in the middle, so the strip never stands dead still;
   they keep 3 % of extra size, more than the drift, so no edge ever shows */
@keyframes slik-driv { from { translate: -1.1% 0; } to { translate: 1.1% 0; } }
html.slik-klar .slik-rute img { transform: scale(calc(1.115 - 0.085 * var(--d, 0))); animation: slik-driv 16s ease-in-out infinite alternate paused; }
html.slik-klar .slik-scene.er-inne .slik-rute.er-aktiv img { animation-play-state: running; }
html.slik-klar .slik-scene.er-pauset .slik-rute.er-aktiv img { animation-play-state: paused; }
/* one button stops what moves by itself in the frames (the clip and the drifting photographs, WCAG 2.2.2); js/slik.js shows it */
html.slik-klar .slik-pause:not([hidden]) { position: absolute; z-index: 2; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--linje-lys); border-radius: 50%; background: color-mix(in srgb, var(--petrol-dyp) 62%, transparent); color: var(--tekst-lys); cursor: pointer; transition: border-color 0.2s ease; }
html.slik-klar .slik-pause:hover, html.slik-klar .slik-pause:focus-visible { border-color: var(--tekst-lys); }
.slik-pause svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.slik-pause .slik-pause-b { fill: currentColor; stroke-width: 1.6; }
.slik-pause[aria-pressed="false"] .slik-pause-b, .slik-pause[aria-pressed="true"] .slik-pause-a { display: none; }
html.slik-klar .slik-tegning path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - clamp(0, (var(--d, 0) - var(--a)) / var(--l), 1)); transition: stroke-dashoffset 0.2s linear; }
html.slik-klar .slik-rute figcaption { padding: 2.75rem 1.25rem 1rem; font-size: 1rem; }

/* the line under the strip: fills over the whole journey, the four names light as their frame is in the middle */
html.slik-klar .slik-indeks { display: block; align-self: flex-end; width: min(100%, calc((100svh - var(--meny-h) - 2 * var(--slik-luft) - var(--slik-indeks-h)) * 4 / 3)); height: var(--slik-indeks-h); padding-top: 1rem; }
.slik-linje { display: block; height: 2px; overflow: hidden; background: var(--linje-lys); }
.slik-linje i { display: block; height: 100%; background: var(--eik); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform 0.24s ease-out; }
.slik-indeks ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0.65rem 0 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.25; }
.slik-indeks li { display: flex; gap: 0.5rem; color: var(--tekst-lys-dempet); transition: color 0.2s ease-out; }
.slik-indeks li b { font-weight: 500; font-variant-numeric: tabular-nums; }
.slik-indeks li.er-aktiv { color: var(--tekst-lys); font-weight: 600; }
.slik-indeks li.er-aktiv b { color: var(--eik); font-weight: 600; }

/* a low window (Sverre's 1210 x 654): the same scene, tighter */
@media (min-width: 900px) and (max-height: 700px) {
  html.slik-klar .slik .tittel-2 { font-size: clamp(1.625rem, 1rem + 1.6vw, 2.25rem); }
  html.slik-klar .slik-teller { font-size: clamp(4rem, 13.5vh, 5.75rem); }
  html.slik-klar .slik-trinn h3 { font-size: clamp(1.625rem, 1rem + 1.4vw, 2.125rem); }
}

/* narrow screens: the frame first, the step under it */
@media (max-width: 599px) {
  html:not(.slik-klar) .slik-stripe { grid-template-columns: minmax(0, 1fr); }   /* still sheet on a phone: one frame per row */
}
@media (max-width: 899px) {
  .slik-flate { grid-template-columns: minmax(0, 1fr); }
  .slik-tegning path { stroke-width: 3.4; }
  .slik-tegning .tg-tynn { stroke-width: 2; }
  .slik-forklaring { left: 0.75rem; top: 0.6rem; font-size: 0.6875rem; gap: 0.9rem; }
  html.slik-klar .slik-spor { height: calc(100svh - var(--meny-h) + var(--slik-reise-smal) * 100svh); }
  html.slik-klar .slik-scene { align-items: stretch; }
  html.slik-klar .slik-flate { display: flex; flex-direction: column; gap: 0; max-height: none; }
  html.slik-klar .slik-venstre { display: contents; }
  html.slik-klar .slik-hode { order: 1; margin-bottom: 0.75rem; }
  html.slik-klar .slik-hode .merke { margin-bottom: 0.4rem; }
  html.slik-klar .slik .tittel-2 { font-size: clamp(1.5rem, 1rem + 2.6vw, 2rem); }
  html.slik-klar .slik-hoyre { order: 2; flex: none; justify-content: flex-start; }
  /* the frame takes the height the heading, the line, the step and the buttons leave (--slik-rest), never more than the width */
  html.slik-klar .slik-ramme, html.slik-klar .slik-indeks { align-self: center; width: min(100%, calc((100svh - var(--meny-h) - var(--slik-rest)) * 4 / 3)); max-width: 44rem; }
  html.slik-klar .slik-indeks { height: auto; padding-top: 0.75rem; }
  html.slik-klar .slik-indeks ol { font-size: 0.8125rem; gap: 0.4rem; }
  html.slik-klar .slik-indeks li { flex-direction: column; gap: 0; }
  html.slik-klar .slik-midt { order: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; align-content: start; align-items: start; padding-top: 0.9rem; }
  html.slik-klar .slik-teller { font-size: clamp(3rem, 15vw, 4.25rem); }
  html.slik-klar .slik-steg { margin-top: 0.1rem; }
  html.slik-klar .slik-trinn { transform: translate3d(0, calc(var(--y, 0) * 0.6px), 0); }
  html.slik-klar .slik-trinn h3 { font-size: 1.5rem; }
  html.slik-klar .slik-trinn p { margin-top: 0.35rem; font-size: 1.0625rem; }
  html.slik-klar .slik-bunn { order: 4; flex-wrap: nowrap; gap: 0.6rem; }
  html.slik-klar .slik-bunn .knapp { flex: 1 1 0; min-width: 0; padding: 0 0.75rem; font-size: 1rem; white-space: nowrap; }
  html.slik-klar .slik-rute figcaption { padding: 2rem 0.9rem 0.7rem; font-size: 0.9375rem; }
}
/* a phone (the screen under the menu is about 600 px high with Safari's bars showing, under 500 on a small one): the frame keeps
   its size, so the title is only read out (the label over it says the same), the line stands without its names, and the buttons are
   left to the sections above and below */
@media (max-width: 899px) and (max-height: 780px) {
  html.slik-klar .slik-hode { margin-bottom: 0.6rem; }
  html.slik-klar .slik-hode .merke { margin-bottom: 0; }
  html.slik-klar .slik .tittel-2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html.slik-klar .slik-bunn, html.slik-klar .slik-indeks ol { display: none; }
  html.slik-klar .slik-flate { justify-content: center; }     /* what is left of the height is shared above and below */
  html.slik-klar .slik-midt { flex: none; }
  html.slik-klar .slik-ramme, html.slik-klar .slik-indeks { width: min(100%, calc((100svh - var(--meny-h) - var(--slik-rest-lav)) * 4 / 3)); }
}