/* FAKTIVE sektion 6 2026: "Skygge-AI" som en scene, der følger teksten.
   Hører sammen med assets/sektion6-2026.js. Teksten er uændret fra originalen;
   uden JavaScript står sektionen, som den gjorde før.

   Tekst og scene står fast, mens sektionen rulles igennem. Til venstre toner de tre
   afsnit ud og ind på samme plads; til højre står det samme chatvindue hele vejen,
   og scenen afspiller hvert trin, når det kommer frem:
     01  fotoet af hænderne på tastaturet, samtalen kommer frem
     02  fotoet trækker sig, de fire oplysninger understreges, og hårfine linjer
         fører dem hen til noten "Sendt til / En leverandør uden aftale"
     03  linjerne bliver creme, og noten står som registreret databehandler
   Under 1100 px bliver de tre trin til faner.

   Scenen er holdt stram med vilje: ingen glød, ingen mærkater, ingen kort i kort.
   Kobber er eneste accent og bruges kun for det, der er ude af kontrol.
   Kontrast mod aubergine: creme #FDF8F2 12:1, brødtekst #DCC8BC 8,4:1,
   dæmpet #B9A69B 5,6:1, kobber #F2A17E 6,1:1. I vinduet: #3A2E33 mod #FBF7F2 12:1. */

#skygge-ai.s6-klar{
  --s6-creme:#FDF8F2; --s6-tekst:#DCC8BC; --s6-daemp:#B9A69B; --s6-kobber:#F2A17E;
  --s6-haar:rgba(242,231,220,.16); --s6-flade:#2A1E31;
  --s6-ud:cubic-bezier(.16,1,.3,1);
  padding-bottom:clamp(40px,5vw,72px);
}

/* ---------- baggrunden: stille lys (WebGL) og data, der svæver ud i rummet (2D), på to lærreder, der står fast i billedet ----------
   overflow:clip (ikke hidden), så sektionen ikke bliver en rullebeholder og sticky virker */
#skygge-ai.s6-klar{position:relative;overflow:clip;
  background:radial-gradient(120% 70% at 12% 0%,#4A3453 0%,rgba(74,52,83,0) 60%),
    radial-gradient(90% 60% at 100% 100%,#2C1E33 0%,rgba(44,30,51,0) 70%),#3C2A44}
.s6-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.s6-bg-lag{position:sticky;top:0;height:100vh}
.s6-bg canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
/* bag tekstspalten er lyset dæmpet mod sektionens egen flade, så brødteksten altid står rent */
@media (min-width:1100px){
  .s6-bg-lag{-webkit-mask-image:linear-gradient(90deg,#000 var(--s6-m1,0px),rgba(0,0,0,.35) calc(var(--s6-m1,0px) + 70px),
      rgba(0,0,0,.35) calc(var(--s6-m2,0px) - 50px),#000 var(--s6-m2,0px));
    mask-image:linear-gradient(90deg,#000 var(--s6-m1,0px),rgba(0,0,0,.35) calc(var(--s6-m1,0px) + 70px),
      rgba(0,0,0,.35) calc(var(--s6-m2,0px) - 50px),#000 var(--s6-m2,0px))}
}

#skygge-ai.s6-klar > .wrap{position:relative;z-index:1}

/* ---------- indledningen: overskriften i to toner, brødteksten i fuld bredde under den,
   flugtende med dens venstrekant og holdt på tre linjer ---------- */
#skygge-ai .s6-intro{display:grid;grid-template-columns:minmax(0,1fr);max-width:none;padding-top:clamp(16px,2vw,32px)}
#skygge-ai .s6-intro .eyeline{grid-column:1/-1;margin-bottom:26px}
#skygge-ai .s6-intro h2{margin:0;max-width:16.5em;font-size:clamp(34px,4vw,60px) !important;
  line-height:1.04 !important;letter-spacing:-.018em !important;text-wrap:balance}
/* første sætning er konteksten og står dæmpet; anden sætning er krogen og står i hvidt */
.s6-i1{color:rgba(253,248,242,.5)}
.s6-i2{color:#fff}
#skygge-ai .s6-intro .lede{margin:clamp(26px,2.6vw,36px) 0 0;max-width:50em;font-size:20px;line-height:1.55;
  color:#CDB5A6;text-wrap:pretty}
.s6-fremhaev{color:var(--s6-creme);font-weight:400}

/* ordene glider ind ét ad gangen (word stagger) */
.s6-ord{display:inline-block;opacity:0;transform:translate3d(0,.45em,0);
  transition:opacity .7s ease calc(var(--i) * 45ms),transform 1s var(--s6-ud) calc(var(--i) * 45ms)}
.s6-intro.s6-vist .s6-ord{opacity:1;transform:none}
.s6-intro .lede{opacity:0;transform:translate3d(0,14px,0);transition:opacity .9s ease .55s,transform 1.1s var(--s6-ud) .55s}
.s6-intro.s6-vist .lede{opacity:1;transform:none}

/* ---------- opbygningen: tekst til venstre, scenen står stille til højre ---------- */
/* teksten flugter med indledningen; scenen får mere plads og går ud over .wrap mod højre.
   Blokken er 300vh høj; rammen med tekst og scene står fast (sticky), mens den rulles igennem. */
.s6{height:300vh;width:calc(50% + min(620px,50vw - 24px));margin:clamp(40px,5vw,72px) 0 0}
.s6-ramme{position:sticky;top:104px;display:grid;grid-template-columns:minmax(0,4.3fr) minmax(0,7.7fr);
  gap:clamp(36px,4vw,64px);align-items:center}
.s6-tekst{display:grid}
.s6-kol{display:flex;flex-direction:column;gap:12px}

/* ---------- afsnittene: står oven i hinanden og toner ud og ind ---------- */
.s6-kap{grid-area:1/1;align-self:center;opacity:0;transform:translate3d(0,14px,0);pointer-events:none;
  transition:opacity .35s ease,transform .45s ease}
.s6-kap.aktiv{opacity:1;transform:none;pointer-events:auto;
  transition:opacity .7s ease .3s,transform 1s var(--s6-ud) .3s}
.s6-nr{margin:0 0 16px;font-family:var(--font-text);font-size:12px;font-weight:600;letter-spacing:.16em;
  color:var(--s6-daemp);font-variant-numeric:tabular-nums}
/* trinenes rubrikker står i samme skrift som sektionens indledende overskrift (h2.big):
   Mona Sans bred, vægt 400. Sidens globale regler tvinger alle h3 til tekstskriften med
   !important, så de skal vindes tilbage her. */
#skygge-ai .s6-h3{margin:0 0 22px;font-family:var(--font-display) !important;font-stretch:125% !important;
  font-weight:400 !important;letter-spacing:-.012em !important;line-height:1.06 !important;
  font-size:clamp(30px,2.9vw,44px);color:#fff;text-wrap:balance}
.s6-p{margin:0;font-size:19px;line-height:1.6;font-weight:300;color:var(--s6-tekst);text-wrap:pretty}
.s6-fod{margin:26px 0 0;padding-left:18px;border-left:1px solid var(--s6-haar);
  font-size:17px;line-height:1.65;font-style:italic;font-weight:300;color:var(--s6-daemp)}
.s6-liste{list-style:none;margin:4px 0 0;padding:0}
.s6-liste li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--s6-haar);
  font-size:17px;line-height:1.5;font-weight:300;color:#EADDD2}
.s6-liste li:last-child{border-bottom:1px solid var(--s6-haar)}
.s6-liste svg{flex:none;width:16px;height:16px;margin-top:5px;fill:none;stroke:var(--s6-kobber);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;
  transition:stroke-dashoffset .5s cubic-bezier(.65,0,.35,1)}
/* fluebenene tegnes ét ad gangen, når tredje trin er fremme */
.s6[data-s="2"] .s6-liste svg{stroke-dashoffset:0}
.s6[data-s="2"] .s6-liste li:nth-child(1) svg{transition-delay:.3s}
.s6[data-s="2"] .s6-liste li:nth-child(2) svg{transition-delay:.5s}
.s6[data-s="2"] .s6-liste li:nth-child(3) svg{transition-delay:.7s}
.s6[data-s="2"] .s6-liste li:nth-child(4) svg{transition-delay:.9s}
/* "Næste"-knappen bruges kun, når trinene er faner */
.s6-naeste{display:none}
.s6-naeste[hidden]{display:none !important}

/* ---------- trinvælgeren: tre streger med numre ---------- */
.s6-faner{display:flex;gap:8px}
.s6-fane{all:unset;box-sizing:border-box;cursor:pointer;flex:1;min-width:0;min-height:44px;padding:10px 0 0;
  display:flex;flex-direction:column;gap:10px;font-family:var(--font-text);font-size:12px;font-weight:600;
  letter-spacing:.16em;color:var(--s6-daemp);font-variant-numeric:tabular-nums;transition:color .3s ease}
.s6-fane::before{content:"";display:block;height:1px;background:var(--s6-haar);transition:background-color .45s ease}
.s6-fane:hover,.s6-fane[aria-pressed="true"]{color:var(--s6-creme)}
.s6-fane[aria-pressed="true"]::before{background:var(--s6-creme)}
.s6-fane:focus-visible{outline:2px solid var(--s6-kobber);outline-offset:4px;border-radius:2px}

/* ---------- scenen ---------- */
.s6-scene{position:relative;height:min(660px,calc(100vh - 170px));min-height:560px;border-radius:20px;overflow:hidden;
  background:var(--s6-flade)}

/* fotoet: skala og styrke sættes af JS ud fra scroll (push-in, derefter dolly ud) */
.s6-foto{position:absolute;inset:0;overflow:hidden}
.s6-foto img{width:100%;height:100%;object-fit:cover;object-position:74% 50%;display:block;transform:scale(1.02);
  will-change:transform,opacity}

/* ---------- chatvinduet: et rigtigt vindue, lyst som på en skærm ---------- */
.s6-vindue{position:absolute;left:5%;top:50%;transform:translateY(-50%);width:47%;z-index:2;
  background:#FBF7F2;border-radius:14px;overflow:hidden;color:#3A2E33;
  box-shadow:0 1px 2px rgba(12,6,16,.2),0 36px 70px -34px rgba(12,6,16,.75)}
.s6-titel{padding:11px 16px;border-bottom:1px solid #ECE2D8;text-align:center;
  font-size:12.5px;line-height:1.3;color:#857770}
.s6-samtale{position:relative;padding:18px 18px 4px}
/* tom samtale før afsendelse: som en ny chat, med en stille velkomstlinje i midten */
.s6-velkommen{position:absolute;left:0;right:0;top:44%;margin:0;text-align:center;font-family:var(--font-display);
  font-stretch:112%;font-weight:500;font-size:18px;color:#8F827A;transition:opacity .35s ease}
.s6-vindue.sendt .s6-velkommen{opacity:0}
.s6-u{margin-left:auto;max-width:90%;padding:12px 15px;border-radius:16px 16px 5px 16px;background:#3C2A44;color:#F4EBE3}
.s6-u p{margin:0;font-size:14.5px;line-height:1.5}
.s6-u .s6-data{margin-top:8px;font-size:13.5px;line-height:1.6;color:#DCCBBF;white-space:pre-line}
.s6-a{margin:14px 0 0;min-height:3.1em;font-size:14.5px;line-height:1.55;color:#4A3D44}
/* beskeden står skjult, til den sendes; pladsen er holdt, så intet hopper */
.s6-u{opacity:0;transform:translate3d(0,10px,0);transition:opacity .45s ease,transform .7s var(--s6-ud)}
.s6-vindue.sendt .s6-u{opacity:1;transform:none}
.s6-a span{opacity:0;transition:opacity .3s ease}
.s6-a span.vist{opacity:1}

/* beskedfeltet: teksten tastes her, sendes, og feltet tømmes igen */
.s6-skriv{display:flex;align-items:flex-end;gap:8px;margin:12px 14px 14px;padding:8px 8px 8px 12px;
  border:1px solid #E3D8CE;border-radius:12px;background:#fff}
.s6-felt{flex:1;min-width:0;height:3.6em;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  font-size:13px;line-height:1.5}
.s6-felt-ind{white-space:pre-line;color:#3A2E33}
.s6-tom{color:#A1948C}
.s6-vindue.fyldt .s6-tom{display:none}
.s6-mark{display:none;width:1.5px;height:1.1em;margin:0 1px;vertical-align:-3px;background:#3C2A44;
  animation:s6-blink 1s steps(1) infinite}
.s6-vindue.skriver .s6-mark{display:inline-block}
@keyframes s6-blink{50%{opacity:0}}
.s6-send{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#DDD3CA;
  transition:background-color .25s ease,transform .15s ease}
.s6-send svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s6-vindue.fyldt .s6-send{background:#3C2A44}
.s6-vindue.trykket .s6-send{transform:scale(.86)}

/* de fire oplysninger understreges; bredden sættes af JS, farven af trinnet */
.s6-fund{white-space:nowrap;padding-bottom:1px;
  background:linear-gradient(var(--s6-kobber),var(--s6-kobber)) 0 100%/0 1.5px no-repeat;transition:color .5s ease}
.s6[data-s="1"] .s6-fund{color:#FFF1E8}
.s6[data-s="2"] .s6-fund{background-image:linear-gradient(#F4EBE3,#F4EBE3);color:#FFF}

/* ---------- rejsen: kopier af oplysningerne, der følger hver sin hårlinje ud ---------- */
.s6-linjer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.s6-linjer path{fill:none;stroke:var(--s6-kobber);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;opacity:.85;
  transition:stroke .6s ease}
.s6[data-s="2"] .s6-linjer path{stroke:rgba(253,248,242,.55)}
/* kopierne ligger under vinduet (z 1 mod vinduets 2): de kommer først til syne ved dets kant, ligesom linjerne.
   8 px luft mellem linjens spids og teksten. */
.s6-rejse{position:absolute;left:0;top:0;z-index:1;opacity:0;pointer-events:none;white-space:nowrap;will-change:transform;
  padding-left:8px;
  font-size:13.5px;line-height:1.6;color:#FFF1E8;transition:color .4s ease}
.s6-rejse.ude{color:var(--s6-kobber)}
.s6[data-s="2"] .s6-rejse.ude{color:var(--s6-creme)}

/* ---------- noten ved siden af chatten ---------- */
.s6-noter{position:absolute;left:66%;right:5%;top:50%;transform:translateY(-50%);z-index:2}
.s6-lag{display:grid;grid-template-columns:minmax(0,1fr)}
.s6-lag > div{grid-area:1/1;opacity:0}
.s6-note-foto{display:none}
.s6-over{margin:0;font-family:var(--font-text);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s6-daemp)}
.s6-hoved [data-f="1"] .s6-over{color:var(--s6-kobber)}
.s6-rubrik{margin:10px 0 16px;font-family:var(--font-display) !important;font-stretch:125%;font-weight:400;
  font-size:clamp(22px,1.9vw,28px);line-height:1.1;letter-spacing:-.012em;color:var(--s6-creme);text-wrap:balance}
/* pladserne, hvor de fire oplysninger lander; selve teksten står i de rejsende kopier */
.s6-pladser{list-style:none;margin:0 0 16px;padding:0;opacity:0}
.s6-pladser li{padding:1px 0;font-size:13.5px;line-height:1.6}
.s6-pladser span{visibility:hidden;white-space:nowrap}
.s6-bund ul{list-style:none;margin:0;padding:0}
.s6-bund li{padding:9px 0;border-top:1px solid var(--s6-haar);font-size:14.5px;line-height:1.4;color:var(--s6-tekst)}

/* ---------- under 1100 px: trinene som faner, scenen i ét forløb ---------- */
@media (max-width:1099px){
  .s6{display:flex;flex-direction:column;gap:0;height:auto;width:auto;max-width:720px;margin:40px 0 0}
  .s6-ramme{display:contents}
  .s6-tekst{display:block}
  /* rækkefølge: faner, trinets tekst, scenen, "Næste" */
  .s6-kol{display:contents}
  .s6-faner{order:1}
  .s6-tekst{order:2}
  .s6-scene{order:3}
  .s6-naeste{order:4}
  .s6-kap{opacity:1;transform:none;pointer-events:auto;transition:none;padding:24px 0 28px}
  .s6-kap:not(.aktiv){display:none}
  /* fanerne viser allerede trinnummeret */
  .s6-nr{display:none}
  .s6-naeste{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:22px;min-height:44px;
    padding:0 18px;border-radius:999px;border:1px solid rgba(242,231,220,.28);background:none;cursor:pointer;
    font:600 14px/1 var(--font-text);color:var(--s6-creme)}
  .s6-naeste:focus-visible{outline:2px solid var(--s6-kobber);outline-offset:3px}
  .s6-scene{height:auto;min-height:0;display:flex;flex-direction:column;gap:48px;padding:14px;border-radius:18px}
  .s6-foto{display:none}
  .s6-vindue,.s6-noter{position:relative;left:auto;right:auto;top:auto;transform:none;width:auto}
  .s6-noter{padding:0 4px}
  /* i første trin står fotoet oven på noten; styrken sættes af JS */
  .s6-note-foto{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
  .s6-note-foto img{width:100%;height:100%;object-fit:cover;object-position:68% 60%;border-radius:12px;display:block}
}
@media (max-width:899px){
  #skygge-ai .s6-intro{row-gap:22px}
  #skygge-ai .s6-intro .eyeline{margin-bottom:4px}
  #skygge-ai .s6-intro h2{font-size:clamp(31px,8vw,44px) !important}
  #skygge-ai .s6-intro .lede{font-size:18px;margin:0}
}
@media (max-width:420px){
  .s6-u p,.s6-a{font-size:14px}
  .s6-u .s6-data,.s6-rejse,.s6-pladser li{font-size:13px}
  .s6-samtale{padding:16px 14px 4px}
}
@media (prefers-reduced-motion:reduce){
  #skygge-ai.s6-klar *{transition-duration:.01ms !important;transition-delay:0s !important}
  .s6-ord,.s6-intro .lede{opacity:1 !important;transform:none !important}
  .s6-mark{animation:none}
}