/* ============================================================
   et kreativt bureau: pigment, papir og filmkorn på kundesiderne (brandguide 3.0, Steffen 17/10)
   Indgangssiderne (body.ekb-indgang): log ind og 2-faktor (v2), opret og nulstil adgangskode, det gamle
   login og magic-login. Her fylder pigmentet hele skærmen, og formularen står midt på den rolige dybgrønne
   del med creme tekst; felterne og fejl- og OK-boksene beholder deres lyse flade (Steffen 17/10: mørkt login).
   Sælgersiden bruger .ekb-pigment som bånd øverst med bølgen i underkanten (som på hjemmesiden: en stor,
   uregelmæssig bølge med ren kant og lidt pigmentstøv på papiret, maskefliser med alfa = pigment).
   Godkendelsessiden har kun filmkornet. Værdierne (--ekb-paper, --ekb-pigment, --ekb-pigment-900) står i
   brand.css. De to brand-filer kalder creme og dyb grøn noget forskelligt, så indgangssiden sætter selv
   --indgang-creme og --indgang-groen.
   ============================================================ */
/* body.: vinder over styles.css (html, body { height: 100% } og .login-page) uanset rækkefølge,
   så siden vokser med indholdet og pigmentet altid fylder skærmen. Den dybe grønne ses kun, når
   telefonen trækkes ud over kanten. */
body.ekb-indgang {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: var(--indgang-groen);
  color: var(--indgang-creme);
}

/* Pigmentet som bånd med bølgen i underkanten (sælgersiden): fuldt pigment foroven og flisen
   (1600 x 200 px, gentaget vandret) forneden. I flisen ligger kanten 7 til 128 px under flisens
   top, og det svageste støv når 177 px ned, så papirets tekst starter mindst 40 px under det. */
.ekb-pigment {
  --bolge-bund: url("/v2/ds/assets/kant-pigment-baand.webp?v=1");
  --bolge-w: 1600px;
  --bolge-h: 200px;
  --bolge-x: left;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  height: 30vh;
  height: 30svh;
  min-height: 240px;
  background: var(--ekb-pigment-900) 15% 45% / max(100%, 640px) auto no-repeat;
  -webkit-mask: linear-gradient(black, black) top / 100% calc(100% - var(--bolge-h) + 1px) no-repeat, var(--bolge-bund) var(--bolge-x) bottom / var(--bolge-w) var(--bolge-h) repeat-x;
  mask: linear-gradient(black, black) top / 100% calc(100% - var(--bolge-h) + 1px) no-repeat, var(--bolge-bund) var(--bolge-x) bottom / var(--bolge-w) var(--bolge-h) repeat-x;
}
/* Telefon: et udsnit på 432 px fra dønningen (gentages aldrig); kanten ligger 20 til 122 px under toppen */
@media (max-width: 430px) {
  .ekb-pigment { --bolge-bund: url("/v2/ds/assets/kant-pigment-baand-432.webp?v=1"); --bolge-w: 432px; }
}
@media (min-width: 900px) {
  .ekb-pigment { background: var(--ekb-pigment) 15% 45% / max(100%, 640px) auto no-repeat; }
}

/* Indgangssiderne: pigmentet bag hele siden, uden bølge. Headeren dækker siden, så logoet og kornet ruller med,
   hvis formularen er højere end skærmen. Selve billedet (::after) ligger fast på skærmen og er udskåret efter den,
   så udsnittet aldrig flytter sig, når en fejl eller glemt adgangskode gør siden højere. Telefon: udsnittet fra
   bunden og lidt mod højre, så et strejf af orange ses i nederste højre hjørne på alle telefoner (også de høje og smalle),
   og formularen står på det dybgrønne. */
.ekb-indgang > .ekb-pigment {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
  background: none;
  -webkit-mask: none;
  mask: none;
  isolation: auto;   /* logoet skal kunne ligge over skyen bag formularen */
}
.ekb-indgang > .ekb-pigment::after {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  height: 100lvh;   /* den store skærmhøjde: står stille, når Safaris værktøjslinjer skjules */
  z-index: -1;
  pointer-events: none;
  background: var(--ekb-pigment-900) 45% 100% / auto max(125%, 100vw) no-repeat;   /* telefon på langs: zoomet ind, så det orange ikke fylder bag teksten */
}
.ekb-filmkorn .ekb-indgang > .ekb-pigment::before { z-index: 0; }
/* Pigmentet i vinden (ds/pigment-vind.js, Steffen 18/10): det levende lærred ligger samme sted som stillbilledet og
   under det (::after kommer efter lærredet). Når lærredet har tegnet sit første billede, fader stillbilledet ud; mister
   lærredet sin WebGL, står stillbilledet der straks igen. Kornet, skyen, formularen og logoet ligger over begge. */
.ekb-indgang > .ekb-pigment > .ekb-vind {
  position: fixed;
  inset: 0 0 auto;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
}
.ekb-vind-klar .ekb-indgang > .ekb-pigment::after { opacity: 0; transition: opacity 0.8s ease; }
/* Det inverse logo centreret øverst på det dybgrønne: vandret på telefonen (200 px), rundt på computeren */
.ekb-indgang .ekb-pigment-logo { position: absolute; z-index: 2; top: 40px; left: 50%; translate: -50% 0; }
.ekb-indgang .ekb-pigment-logo.rund { display: none; }
.ekb-pigment-logo img { display: block; }

/* Sidens eget indhold, midt på pigmentet under logoet */
.ekb-papir {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 140px 24px 40px;
  box-sizing: border-box;
}

/* Skyen bag formularen: pigmentets lyse pletter og overgangen mod creme og orange ligger tæt på teksten, så en
   blød, mørk sky (stærkest mod højre, hvor pigmentet lysner) holder al tekst over 4,5:1 mod den lyseste pixel bag
   den. Den følger formularen, også når siden er højere end skærmen. Fladen er formularen plus --sky til alle sider,
   sløret med halvdelen (padding giver plads til sløret). Lagene: pigmentet, kornet, skyen og formularen, logoet øverst. */
.ekb-indgang > .ekb-papir { z-index: 1; isolation: isolate; overflow: clip; }
.ekb-indgang > .ekb-papir > :not(style) { position: relative; }
.ekb-indgang > .ekb-papir > :not(style)::before {
  --sky: 32px;
  --sky-v: 45%;
  --sky-h: 62%;
  content: "";
  position: absolute;
  inset: calc(-2 * var(--sky));
  padding: var(--sky);
  border-radius: calc(2 * var(--sky));
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right, color-mix(in srgb, var(--ekb-ink) var(--sky-v), transparent), color-mix(in srgb, var(--ekb-ink) var(--sky-h), transparent)) content-box;
  filter: blur(calc(var(--sky) / 2));
}

@media (min-width: 900px) {
  /* Udsnittet: creme og orange fra højre og nederste højre hjørne, formularen på det dybgrønne */
  .ekb-indgang > .ekb-pigment::after { background: var(--ekb-pigment) 22% 50% / auto max(110%, 76vw) no-repeat; }
  .ekb-indgang .ekb-pigment-logo { display: none; }
  /* Logo og formular som én gruppe midt på skærmen (Steffen 19/10: "det ligger helt oppe i toppen"); gruppen er ca. 500 px
     høj. På lave skærme gælder de gamle mål (logo 80 px, formular 280 px fra toppen). */
  .ekb-indgang .ekb-pigment-logo.rund { display: block; top: max(80px, calc(50vh - 250px)); }
  .ekb-indgang > .ekb-papir { padding: max(280px, calc(50vh - 50px)) 40px 48px; }
  .ekb-indgang > .ekb-papir > :not(style)::before { --sky: 120px; --sky-v: 25%; --sky-h: 70%; }
}

/* Mere kontrast og tvungne farver: ensfarvet dyb grøn bag teksten, ingen sky */
@media (prefers-contrast: more), (forced-colors: active) {
  .ekb-indgang > .ekb-pigment::after { background: var(--indgang-groen); }
  .ekb-indgang > .ekb-papir > :not(style)::before { display: none; }
}

/* Fokusringen på det mørke: creme ring med mørk kant ind mod elementet, så den ses både på pigmentet og om
   de lyse felter og knapper. !important som brand.css' egen ring (en mørk ring forsvinder på dyb grøn). */
.ekb-indgang :is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--indgang-creme) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--ekb-ink) !important;
}

/* iPhone zoomer ind på felter med skrift under 16 px og bliver stående zoomet: samme regel som i ds-tokens.css */
@media (max-width: 900px), (pointer: coarse) {
  :is(input, select, textarea):not([style*="font-size: 17"], [style*="font-size: 18"], [style*="font-size: 19"], [style*="font-size: 2"], [style*="font-size: 3"], [style*="font-size: 4"]) {
    font-size: 16px !important;
  }
}

/* ============================================================
   FILMKORN (html.ekb-filmkorn): over pigment og papir, under al tekst, felter og logoet. Skifter 24 gange
   i sekundet som projiceret film, ca. 6 % (indgangssiderne ca. 10 %, se nedenfor). Papirets korn ligger fast over hele skærmen (body::before) oven på
   papiret, pigmentets eget korn inde i pigmentet (under logoet); indgangssiderne har intet papir og kun
   pigmentets korn. Uigennemsigtige flader (felter, knapper,
   film) dækker det. Kornet står stille, til ds/filmkorn.js har sat ekb-levende: det sker kun, når et punktum
   (pauseknappen) kan ses og ikke er trykket. Reduceret bevægelse: stille korn. Mere kontrast og tvungne
   farver: intet korn (som papiret). Udskrift: intet korn.
   ============================================================ */
.ekb-filmkorn {
  --korn: url("/v2/ds/assets/filmkorn.webp?v=1");
  --korn-s: 192px;
  background: none;   /* papiret males på lærredet (body), så kornet kan ligge over det */
}
@media (min-resolution: 1.5dppx) { .ekb-filmkorn { --korn-s: 168px; } }
.ekb-filmkorn body::before, .ekb-filmkorn .ekb-pigment::before {
  content: "";
  position: fixed;
  inset: 0 -192px -192px 0;   /* kornet flyttes op til 188 px op og til venstre */
  z-index: -1;
  pointer-events: none;
  background: var(--korn) 0 0 / var(--korn-s) var(--korn-s);
  image-rendering: pixelated;
  animation: ekb-korn 0.5s steps(1, end) infinite paused;
  will-change: transform;
}
.ekb-filmkorn .ekb-pigment::before { position: absolute; }
/* Indgangssiderne: kraftigere korn, ca. 10 % (Steffen 18/10: de 6 % blev ikke set). Samme flise med alfa x 1,55.
   Sat på body, så body::before (slået fra) og pigmentets korn peger på samme flise, og kun den ene hentes. */
body.ekb-indgang { --korn: url("/v2/ds/assets/filmkorn-indgang.webp?v=1"); }
.ekb-filmkorn body.ekb-indgang::before { content: none; }
.ekb-levende body::before, .ekb-levende .ekb-pigment::before { animation-play-state: running; }
@keyframes ekb-korn {
  0.0% { transform: translate(-9px, -93px); }
  8.333% { transform: translate(-42px, -145px); }
  16.667% { transform: translate(-136px, -149px); }
  25.0% { transform: translate(-142px, -148px); }
  33.333% { transform: translate(-20px, -17px); }
  41.667% { transform: translate(-168px, -11px); }
  50.0% { transform: translate(-153px, -11px); }
  58.333% { transform: translate(-119px, -6px); }
  66.667% { transform: translate(-188px, -79px); }
  75.0% { transform: translate(-72px, -7px); }
  83.333% { transform: translate(-29px, -162px); }
  91.667% { transform: translate(-184px, -59px); }
}
@media (prefers-reduced-motion: reduce) {
  .ekb-filmkorn body::before, .ekb-filmkorn .ekb-pigment::before { animation: none; will-change: auto; }
}
@media (prefers-contrast: more), (forced-colors: active) {
  .ekb-filmkorn body::before, .ekb-filmkorn .ekb-pigment::before { display: none; }
}

/* Punktummet efter overskriften (ds/filmkorn.js): logoets egen form i orange, 0,19 em bredt på grundlinjen.
   Som knap sætter det baggrunden på pause; ved reduceret bevægelse er det kun et slutpunkt. */
.ekb-dot {
  --prik-form: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2074.4 416.8 46.1 46.2'%3E%3Cpath d='M2094.4 416.9C2093 417 2091.6 417.3 2090.3 417.7C2089 418.1 2087.7 418.7 2086.5 419.4C2085.3 420.1 2084.2 421 2083.1 422C2082.1 422.9 2081.1 424 2080.2 425.1C2079.4 426.3 2078.6 427.5 2077.9 428.7C2077.2 429.9 2076.6 431.2 2076.1 432.5C2075.6 433.8 2075.2 435.2 2074.9 436.5C2074.6 437.9 2074.4 439.3 2074.4 440.7C2074.4 442.1 2074.4 443.6 2074.6 445C2074.9 446.4 2075.2 447.7 2075.7 449.1C2076.1 450.4 2076.7 451.6 2077.5 452.8C2078.2 454 2079.1 455.1 2080.1 456.1C2081.1 457.1 2082.2 458 2083.3 458.8C2084.5 459.6 2085.7 460.3 2087 460.9C2088.3 461.5 2089.6 461.9 2091 462.3C2092.3 462.6 2093.8 462.8 2095.2 462.9C2096.6 463 2098.1 463 2099.5 462.8C2100.9 462.6 2102.3 462.3 2103.6 461.9C2104.9 461.5 2106.2 460.9 2107.5 460.3C2108.7 459.6 2109.9 458.9 2111.1 458C2112.2 457.2 2113.3 456.2 2114.3 455.1C2115.2 454.1 2116.1 453 2116.9 451.8C2117.7 450.6 2118.4 449.4 2118.9 448.1C2119.5 446.8 2119.9 445.5 2120.1 444.1C2120.4 442.8 2120.5 441.3 2120.4 439.9C2120.3 438.6 2120.1 437.2 2119.7 435.8C2119.3 434.5 2118.8 433.2 2118.2 431.9C2117.6 430.7 2116.8 429.5 2116 428.3C2115.2 427.1 2114.2 426 2113.2 425C2112.2 424 2111.1 423 2110 422.1C2108.9 421.3 2107.7 420.5 2106.4 419.8C2105.2 419.1 2103.9 418.5 2102.6 418.1C2101.3 417.6 2099.9 417.2 2098.6 417C2097.2 416.8 2095.8 416.8 2094.4 416.9Z'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  width: 0.19em;
  height: 0.19em;
  min-width: 0;
  margin: 0 0 0 0.05em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  vertical-align: baseline;
  transition: none;
}
.ekb-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ekb-orange);
  -webkit-mask: var(--prik-form) center / contain no-repeat;
  mask: var(--prik-form) center / contain no-repeat;
  transition: scale 600ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
button.ekb-dot { cursor: pointer; }
/* Trykfladen 26 x 32 px uanset overskriftens størrelse: fra punktummets venstre kant og mod højre (inden for sidens
   margen på 24 px), så den ikke dækker overskriftens bogstaver */
button.ekb-dot::after { content: ""; position: absolute; left: 0; top: calc(50% - 16px); width: 26px; height: 32px; }
button.ekb-dot:hover::before { scale: 1.3; }
button.ekb-dot[aria-pressed="true"]::before { opacity: 0.6; }
button.ekb-dot:focus-visible { outline: 2px solid var(--ekb-ink); outline-offset: 4px; border-radius: 50%; }
@media (forced-colors: active) {
  .ekb-dot::before { background: CanvasText; }
}

@media print {
  .ekb-pigment, .ekb-filmkorn body::before { display: none; }
}