/* =========================================================
   Prikken – logoets punktum som lille figur
   Hører sammen med dot.js. Bruges af index.html og 404.html.
   ========================================================= */

/* ---------- Øjne (bruges af logo-prikken, menu-prikken og 404) ---------- */
.eye{position:absolute;top:26%;width:30%;height:30%;border-radius:50%;background:#F5F2EC;overflow:hidden;
  transform:translate(calc(var(--lx,0) * 12%),calc(var(--ly,0) * 10%)) scaleY(var(--open,1));transition:transform .12s ease-out}
.eye:first-child{left:17%}
.eye:last-child{right:17%}
.eye b{position:absolute;left:25%;top:25%;width:50%;height:50%;border-radius:50%;background:#15171C;
  transform:translate(calc(var(--lx,0) * 45%),calc(var(--ly,0) * 40%));transition:transform .12s ease-out}

/* ---------- 1. Logo-prikken ---------- */
/* Prikken er 20px stor men skaleret ned til 8px i hvile, så øjnene er skarpe, når den vågner.
   Margenerne holder samme plads og placering som den gamle 8px-prik. */
.brand .dot{position:relative;width:20px;height:20px;margin:8px -8px 0 -3px;flex:none;
  --s:.4;transform:scale(var(--s));transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.brand .dot .eye{opacity:0;transition:opacity .18s,transform .12s ease-out}
.brand:hover .dot,.brand:focus-visible .dot,.brand .dot.awake{--s:1.1;transform:scale(var(--s))}
.brand:hover .dot .eye,.brand:focus-visible .dot .eye,.brand .dot.awake .eye{opacity:1}
.dot.blink,.nav-dot.blink{--open:.08}

/* ---------- 2. Menu-prikken: viser, hvor man er på siden ---------- */
.nav-dot{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:999px;pointer-events:none;z-index:0;opacity:0;
  --c:0;--e:0;background:color-mix(in srgb,var(--ink) calc(var(--c) * 100%),var(--accent));transform-origin:50% 100%}
.nav-dot .eye{opacity:var(--e)}
.has-navdot .nav{position:relative;z-index:1}
.has-navdot .nav a.active{background:transparent;color:inherit}
.has-navdot .nav a.lit{color:var(--bg)}
.has-navdot .nav a.lit:hover{background:transparent}

/* ---------- 3. Botten skriver: tre prikker der hopper i en bølge ---------- */
.typing{align-items:flex-end;height:14px}
.typing i{background:var(--accent);animation:prik-hop 1.05s infinite cubic-bezier(.3,.6,.4,1);transform-origin:50% 100%}
.typing i:nth-child(2){animation-delay:.14s}
.typing i:nth-child(3){animation-delay:.28s}
@keyframes prik-hop{
  0%,58%,100%{transform:translateY(0) scale(1)}
  10%{transform:translateY(0) scale(1.3,.7)}
  28%{transform:translateY(-7px) scale(.85,1.18)}
  46%{transform:translateY(0) scale(1.25,.78)}
}

/* ---------- 4. 404-siden ---------- */
.nf{min-height:calc(100vh - 140px);display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;padding:24px max(24px,calc((100vw - var(--max))/2)) 64px}
.nf-stage{width:min(720px,100%);aspect-ratio:1000/420;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nf-code{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nf h1{font-size:clamp(2rem,4.6vw,3.4rem);margin:.2em 0 .25em}
.nf p{color:var(--muted);margin:0 auto 1.6em;max-width:46ch}
.nf .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:0}

@media (prefers-reduced-motion:reduce){
  .brand .dot{transition:none}
  .typing i{animation:none}
}

/* ---------- 5. Kolofon: samtalen med Claude (i den mørke kontakt-sektion) ---------- */
/* Et mørkt chatvindue, så prompten passer ind i footeren i stedet for at lyse op som en hvid boks */
.colophon{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(28px,5vw,64px);align-items:center;margin:0 0 56px;padding-top:clamp(36px,5vw,56px);border-top:1px solid rgba(255,255,255,.1)}
.colophon .colo-label{font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:#FF7A50;margin:0 0 10px}
.colophon .colo-title{font-size:clamp(1.7rem,3vw,2.3rem);color:#F5F2EC;margin:0 0 16px}
.colophon .colo-text p{margin:0 0 .9em;font-size:1rem;line-height:1.6}
.colophon .colo-text b{color:#F5F2EC;font-weight:600}
.colo-facts{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.colo-facts li{font:500 .72rem var(--mono);color:#B9BDC6;padding:6px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px}

.colo-window{background:#1B1D23;border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.colo-bar{display:flex;align-items:center;gap:14px;padding:11px 14px 11px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.colo-lights{display:flex;gap:6px}
.colo-lights i{width:10px;height:10px;border-radius:50%;background:#3A3D45}
.colo-lights i:first-child{background:#FF7A50}
.colo-file{flex:1;min-width:0;font:500 .74rem var(--mono);color:#8A8F99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colo-replay{flex:none;font:500 .72rem var(--mono);color:#ECE9E3;background:transparent;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 12px;cursor:pointer;transition:border-color .2s,color .2s}
.colo-replay:hover,.colo-replay:focus-visible{border-color:#FF7A50;color:#FF7A50}

.colo-chat{display:flex;flex-direction:column;gap:18px;cursor:pointer;padding:clamp(16px,2.4vw,24px);min-height:300px;justify-content:center}
.cmsg{display:flex;flex-direction:column;gap:6px;max-width:92%;transition:opacity .35s,transform .45s var(--ease)}
.cmsg.me{align-self:flex-end;align-items:flex-end}
.cmsg.ai{align-items:flex-start}
.cmsg .who{font:500 .66rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8A8F99}
.colophon .cbody{margin:0;padding:12px 16px;border-radius:14px;font-size:.98rem;line-height:1.5;max-width:none}
.colophon .cmsg.me .cbody{background:#23262D;color:#ECE9E3;border:1px solid rgba(255,255,255,.08);border-bottom-right-radius:4px}
.colophon .cmsg.ai .cbody{background:rgba(255,122,80,.08);color:#F1EDE6;border:1px solid rgba(255,122,80,.24);border-bottom-left-radius:4px}
.colo-chat.armed .cmsg:not(.show){opacity:0;transform:translateY(10px)}
.cdot{display:inline-block;position:relative;width:20px;height:20px;margin:0 -6px -7px -4px;vertical-align:baseline;border-radius:50%;background:#FF7A50;
  --s:.4;--tx:0px;transform:translateX(var(--tx)) scale(var(--s));transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.cdot .eye{opacity:0;transition:opacity .18s,transform .12s ease-out}
.colo-chat.armed .cdot:not(.pop){--s:0}
.cdot.awake{--s:1.15;--tx:9px}
.cdot.awake .eye{opacity:1}
.ctyping{display:inline-flex;gap:5px;align-items:flex-end;height:16px;vertical-align:middle}
.ctyping i{width:7px;height:7px;border-radius:50%;background:#FF7A50;animation:prik-hop 1.05s infinite cubic-bezier(.3,.6,.4,1);transform-origin:50% 100%}
.ctyping i:nth-child(2){animation-delay:.14s}
.ctyping i:nth-child(3){animation-delay:.28s}
/* prompten som et lille briefark: rolle, mål, krav, lever */
.colophon .cmsg.me{max-width:100%}
.cprompt p{display:grid;grid-template-columns:3.6rem 1fr;gap:12px;margin:0;padding:8px 0;border-top:1px solid rgba(255,255,255,.07);font-size:.94rem;line-height:1.45;color:#ECE9E3}
.cprompt p:first-child{border-top:0;padding-top:2px}
.cprompt p:last-child{padding-bottom:2px}
.cprompt b{font:500 .68rem/1.9 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#FF7A50;transition:opacity .2s}
.colo-chat.armed .cprompt b:not(.on){opacity:0}
@media (max-width:860px){.colophon{grid-template-columns:1fr}.colo-chat{min-height:0}}
@media (max-width:480px){.cprompt p{grid-template-columns:1fr;gap:2px}.cmsg{max-width:100%}}
@media (prefers-reduced-motion:reduce){.cdot{transition:none}.ctyping i{animation:none}.colo-replay{display:none}}
/* boblen med prompten har fast bredde, så den ikke vokser, mens teksten skrives */
.colophon .cmsg.me,.colophon .cmsg.me .cbody{width:100%}