/* =====================================================================
   Startskærmen - trin 0 i onboarding-flowet på /ny-klinik/opret/
   (Morten 8/11: "lægge det hele på /ny-klinik/opret"; før en side for sig, 6/11)
   Overskrift, den nye app på en almindelig skærm (Morten: "ikke bærbar,
   en alm monitor") og én knap ind i flowet (trinene udgik 8/11).
   Samme navy, typografi og knap som onboarding-flowet (ny-klinik.css).
   Skærmen er CSS, så kun selve skærmbilledet er et billede.
   Knappen venter ikke på animationen. Tokens only.
   8/11 (Morten: "mere ægte", "elegant glow", "bevægelse, også i baggrunden"):
   skærmen har glas, tynd mørk kant og genskin, og dens lyseblå lys falder
   ud i rummet. Baggrunden er et bølgefelt i bevægelse (opret-bud.js) -
   Mortens valg af tre bud, "mindre gennemtrængende".
   ===================================================================== */

html[data-cvi="2026"] body.nk {
  --nko-gap: clamp(var(--space-6), 4.5vh, var(--space-12));
  --nko-dev-w: min(100%, calc(var(--space-30) * 5), 54vh);
  --nko-black: color-mix(in srgb, var(--pc-ink) 72%, black);
  --nko-app: url(/ny-klinik/assets/clinic-app.webp);
  --nko-aura: 0.63;                 /* hvor meget skærmens lys fylder i rummet (Morten 8/11: 10 % mere gennemsigtigt) */
  --nko-aura-blur: var(--space-10);
  --nko-glow: var(--pc-dark-accent);                                            /* reserve - se @supports herunder */
  --nko-glow-far: color-mix(in srgb, var(--pc-dark-accent) 50%, transparent);
}

/* Skærmens lys er lyseblåt (Morten 8/11): ren periwinkle blev "grålig" oven på navy, og et skift
   mod azur blev "for turkis". Afledt af brandets periwinkle: lidt mere mættet, kun en anelse mod blå. */
@supports (color: oklch(from red l c h)) {
  html[data-cvi="2026"] body.nk {
    /* Morten 10/11: "lidt for tyrkis - mere blå blå, men mere satureret" */
    --nko-glow: oklch(from var(--pc-dark-accent) calc(l - 0.04) calc(c + 0.15) calc(h - 8));
    --nko-glow-far: oklch(from var(--pc-dark-accent) calc(l - 0.1) calc(c + 0.15) calc(h - 8) / 0.5);
  }
}

/* ---------- logo øverst til venstre (kun startskærmen - de andre trin har Tilbage dér) ---------- */
.nk .nko-logo {
  position: fixed; z-index: 6; top: var(--space-3); left: var(--nk-gutter);
  display: flex; align-items: center; min-height: var(--pc-control); line-height: 0; border-radius: var(--space-1);
}
.nk:not(.is-start) .nko-logo { display: none; }
.nk .nko-logo img { height: var(--space-10); width: auto; }
.nk .nko-logo:focus-visible { outline: none; box-shadow: var(--nk-ring); }

/* ---------- indhold ---------- */
.nk .nk-start {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: calc(var(--space-30) * 8);
  padding-top: var(--space-4);  /* h1 ~15 px ned, tættere på skærmen (Morten 8/11) */
  text-align: center;
}
.nk .nk-start[hidden] { display: none; }
.nk .nk-start > * { flex-shrink: 0; }  /* intet må klemmes */

/* ---------- skærmen ----------
   Ingen fod (Morten 6/11: foden er for oplagt). Ægte gennem detaljer:
   en kant, der næsten forsvinder i det sorte glas, kamera, et svagt
   genskin over glasset og en dyb, blød skygge. Den glider roligt frem,
   og dens lyseblå lys falder ud bag den (::before). */
.nko .nko-device {
  position: relative; margin: calc(var(--space-1) * 1.25) 0; width: var(--nko-dev-w);  /* 5 px mere luft over og under (Morten 8/11) */
  isolation: isolate;
  perspective: calc(var(--space-30) * 16);
}
/* skærmens lys i rummet - lyseblåt (Morten 8/11: "glow ... lyseblå ish"; det slørede skærmbillede blev gråt).
   Et klart lag tæt på kanten og et bredt, svagt lag længere ude. Kun det, der stikker ud om skærmen, ses. */
.nko .nko-device::before {
  content: ""; position: absolute; z-index: -1; inset: 1% 1.5%;
  border-radius: var(--space-6);
  background: var(--nko-glow);
  box-shadow: 0 0 var(--space-24) var(--space-12) var(--nko-glow-far);
  filter: blur(var(--nko-aura-blur));
  transform: translateY(var(--space-2));
  opacity: 0;
  animation: nko-aura-in 1800ms var(--nk-ease) 500ms forwards, nko-aura-breathe 9s ease-in-out 2300ms infinite alternate;
}
.nko .nko-device__tilt { transform: rotateX(var(--nko-rx, 0deg)) rotateY(var(--nko-ry, 0deg)); transform-style: preserve-3d; }
.nko .nko-device__monitor {
  position: relative;
  padding: 1.5%;  /* sort glas om skærmen (Morten 8/11: "kanten skal være tyndere") */
  border: var(--pc-hairline) solid transparent;  /* kanten tones næsten ud i glasset (Morten 8/11: "stadig lidt for tydelig") */
  border-radius: var(--space-3);
  background:
    /* sort glas med et svagt skær foroven */
    linear-gradient(180deg, color-mix(in srgb, var(--nko-black) 84%, var(--pc-surface)), var(--nko-black) 16%) padding-box,
    /* kanten: næsten samme sort som glasset, kun et svagt lys foroven - ingen ring rundt om */
    linear-gradient(180deg,
      color-mix(in srgb, var(--nko-black) 80%, var(--pc-surface)),
      color-mix(in srgb, var(--nko-black) 92%, var(--pc-surface)) 12%,
      color-mix(in srgb, var(--nko-black) 95%, var(--pc-surface)) 100%) border-box;
  box-shadow:
    0 var(--space-3) var(--space-6) color-mix(in srgb, black 25%, transparent),
    0 var(--space-12) var(--space-24) calc(var(--space-6) * -1) color-mix(in srgb, black 62%, transparent);
  animation: nko-monitor-in 900ms var(--nk-ease) 160ms both;
}
/* kamera midt i den øverste kant */
.nko .nko-device__monitor::before {
  content: ""; position: absolute; top: 0; left: 50%; z-index: 1;
  width: 1.5%; aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--pc-surface) 18%, var(--nko-black)) 0 22%, transparent 28%);
}
/* genskin i glasset - svagt og diagonalt, som et vindue der spejler sig */
.nko .nko-device__monitor::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--pc-surface) 12%, transparent) 0%,
    color-mix(in srgb, var(--pc-surface) 5%, transparent) 32%,
    transparent 32.3%, transparent 100%);
}
.nko .nko-device__screen { position: relative; overflow: hidden; border-radius: var(--space-1); background: black; line-height: 0; }
.nko .nko-device__screen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 var(--pc-hairline) color-mix(in srgb, black 60%, transparent), inset 0 0 var(--space-5) color-mix(in srgb, black 14%, transparent);
}
.nko .nko-device__screen img { display: block; width: 100%; height: auto; }

.nko .nko-title { position: relative; margin: 0 0 calc(var(--nko-gap) - var(--space-4)); text-wrap: balance; font-size: clamp(var(--text-6xl), min(4.4vw, 7.4vh), calc(var(--text-6xl) * 1.7)); animation: nko-rise 600ms var(--nk-ease) both; animation-delay: 60ms; }

/* ---------- handling: knap + én linje (Morten 8/11: "Intet kreditkort nødvendigt"; trinene er fjernet) ---------- */
.nko .nko-cta { margin-top: var(--nko-gap); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); animation: nko-rise 600ms var(--nk-ease) both; animation-delay: 300ms; }
.nko .nko-cta .nk-btn { text-decoration: none; }
.nko .nko-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }  /* start + videomøde side om side (Morten 10/11) */
.nko .nko-fine { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--nk-soft); }
/* grøn som "0 kr." i flowet (Morten 8/11) */
.nko .nko-fine--ok { font-size: var(--text-md); font-weight: 500; color: color-mix(in oklch, var(--pc-ok) 45%, white); }
@supports (color: oklch(from red l c h)) { .nko .nko-fine--ok { color: oklch(from var(--pc-ok) 0.82 calc(c + 0.08) h); } }
.nko .nko-cta .nk-login { margin: var(--space-2) 0 0; text-align: center; }  /* login under knappen (Morten 8/11) */

@keyframes nko-rise { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: none; } }
@keyframes nko-monitor-in { from { opacity: 0; transform: translateY(var(--space-6)) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes nko-aura-in { to { opacity: var(--nko-aura); } }
@keyframes nko-aura-breathe { from { opacity: var(--nko-aura); } to { opacity: calc(var(--nko-aura) * 0.7); } }
@media (prefers-reduced-motion: reduce) {
  .nko :is(.nko-title, .nko-cta, .nko-device__monitor) { animation: none; }
  .nko .nko-device::before { animation: none; opacity: var(--nko-aura); }
}

/* ---------- mobil: venstrestillet ---------- */
@media (max-width: 719px) {
  html[data-cvi="2026"] body.nk { --nko-dev-w: 100%; --nko-aura-blur: var(--space-8); }
  .nk .nko-logo { top: calc(var(--space-2) + env(safe-area-inset-top)); }
  .nk .nko-logo img { height: var(--space-8); }
  .nk .nk-start { align-items: stretch; text-align: left; }
  .nko .nko-title { font-size: clamp(var(--text-5xl), 8.6vw, var(--text-6xl)); }
  .nko .nko-cta { margin-top: var(--space-8); align-items: stretch; }
  .nko .nko-cta .nk-btn { width: 100%; }
  .nko .nko-btns { flex-direction: column; align-items: stretch; }
  .nko .nko-fine { text-align: center; }  /* Morten 8/11: linjen centreres under knappen */
}

/* ---------- logobælte i bunden af startskærmen, kun computer (Morten 12/11: "helt subtilt") ----------
   Hvide silhuetter i lav styrke, glider langsomt; kanterne toner ud. Står kun, hvor der er plads under knapperne. */
.nko-logos { display: none; }
@media (min-width: 1024px) and (min-height: 820px) {
  body.nk.is-start .nko-logos {
    display: block; position: fixed; left: 50%; bottom: var(--space-8); z-index: 1; transform: translateX(-50%);
    width: min(calc(var(--space-30) * 7), 62vw); overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, var(--pc-ink) 18%, var(--pc-ink) 82%, transparent);
    mask-image: linear-gradient(to right, transparent, var(--pc-ink) 18%, var(--pc-ink) 82%, transparent);
  }
  .nko-logos__track { display: flex; width: max-content; animation: nko-logos 60s linear infinite; }
  .nko-logos__group { display: flex; align-items: center; gap: var(--space-16); padding-right: var(--space-16); }
  .nko-logos__group img { display: block; width: auto; height: auto; max-height: var(--space-6); max-width: calc(var(--space-30) + var(--space-5)); filter: brightness(0) invert(1); opacity: 0.32; }  /* brede logoer (Holkegade) må ikke dominere */
}
@keyframes nko-logos { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nko-logos__track { animation: none; } }

/* ---------- stemmebølgerne bag skærmen (Morten 12/11: "de der bølger ... helt subtil", som på LP'erne) ----------
   Samme rolige linjer som LP-heroen, i halv styrke, bag lyset og skærmen. Kanterne toner ud. */
.nko .nko-voice {
  position: absolute; z-index: -2; left: 50%; top: 50%; width: 100vw; height: 70%; transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0; animation: nko-voice-in 1600ms var(--nk-ease) 600ms forwards;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--pc-ink) 22%, var(--pc-ink) 78%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--pc-ink) 22%, var(--pc-ink) 78%, transparent);
}
.nko .nko-voice canvas { display: block; width: 100%; height: 100%; }
@keyframes nko-voice-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nko .nko-voice { animation: none; opacity: 1; } }