/* SPOR 2030 · fælles motion-DNA for hele martinegesoe.dk (Martin 23. okt. 2026). Indlæses efter sidens egen CSS på alle sider.
   Én kilde til tempo, kurver og mikrointeraktioner: fokus, knapper, links, menu, undermenu, sidefod og tryk.
   Bevægelse viser sammenhæng (den røde tråd), udført arbejde eller feedback; ellers står det stille.
   Alt virker uden bevægelse: ved reduceret bevægelse og uden script står alt i sin færdige tilstand. */
:root{
  --t-micro:160ms;   /* farve, tryk */
  --t-ui:280ms;      /* menu, undermenu, felter */
  --t-line:480ms;    /* streger, der tegnes */
  --t-story:900ms;   /* indgange og tråden i fortællingerne */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-io:cubic-bezier(.65,0,.35,1);
}

/* Fokus: ringen strammes ind om elementet, så man ser, hvor man er */
:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:4px;animation:m-focus var(--t-ui) var(--ease-out)}
@keyframes m-focus{from{outline-offset:9px;outline-color:transparent}}

/* Knapper: farven skifter, pilen skubbes frem, og et tryk giver efter */
.btn{transition:background-color var(--t-micro) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),transform var(--t-micro) var(--ease-out);-webkit-tap-highlight-color:transparent}
.btn svg{transition:transform var(--t-ui) var(--ease-out)}
.btn:active{transform:scale(.97);transition-duration:80ms}
.btn-red:hover{background:var(--red-press)}
@media (hover:hover) and (pointer:fine){
  .btn:hover svg{transform:translateX(4px)}
  .btn-red:hover{box-shadow:0 14px 28px -16px rgba(214,58,36,.75)}
  .btn-ink:hover{box-shadow:0 14px 28px -16px rgba(31,34,26,.6)}
}

/* Links: understregningen trækkes væk mod højre, og den tegnes ind igen, når musen forlader linket */
.lnk{transition:background-size var(--t-line) var(--ease-out);-webkit-tap-highlight-color:transparent}
@media (hover:hover) and (pointer:fine){.lnk:hover{background-size:0 1px;background-position:100% calc(100% - 9px)}}
main a:not([class]){transition:color var(--t-micro) var(--ease-out),text-decoration-color var(--t-micro) var(--ease-out),text-decoration-thickness var(--t-micro) var(--ease-out)}

/* Menupunkter: en rød streg tegnes ind under det, man peger på; den aktuelle side har stregen */
.nav .links>a,.nav .nav-spor>a{background:linear-gradient(var(--red),var(--red)) 0 calc(100% - 8px)/0 1.6px no-repeat;transition:background-size var(--t-line) var(--ease-out)}
.nav .links>a[aria-current="page"],.nav .nav-spor>a[aria-current="page"],.nav .nav-spor:has(.nav-spor-p [aria-current="page"])>a{background-size:100% 1.6px}
@media (hover:hover) and (pointer:fine){.nav .links>a:hover,.nav .nav-spor>a:hover{background-size:100% 1.6px}}

/* Undermenuen falder blødt på plads; ringen ved menupunktet fyldes, når man peger på det */
.nav-spor-p:not([hidden]){animation:m-drop var(--t-ui) var(--ease-out)}
@keyframes m-drop{from{opacity:0;transform:translateY(-6px)}}
.nav .links .nav-spor-p a{transition:background-color var(--t-micro) var(--ease-out)}
.nav-spor-p a::before{transition:background-color var(--t-micro) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav-spor-p a:hover::before{background:var(--red)}}

/* Sidefoden: samme streg som links, i sidefodens farve */
.f-col a,.f-col .f-link{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--t-line) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.f-col a:hover,.f-col .f-link:hover{background-size:100% 1px}}

/* Tryk på telefon: synlig feedback, hvor der ikke er nogen hover */
@media (hover:none){
  .lnk,.f-col a,.drw a,.nav-spor-p a{-webkit-tap-highlight-color:transparent}
  .lnk:active,.f-col a:active,.drw a:active,.nav-spor-p a:active{opacity:.55;transition:opacity 80ms linear}
}

/* Den røde tråd som byggeklods (motion.js): [data-thread] får --p (0–1) og klassen m-live; [data-knot] får klassen on, når tråden når det.
   Komponenterne bestemmer selv, hvordan tråden og knuderne ser ud (fx Det gør SPOR i spor-site.css). */

/* Reduceret bevægelse: alt står i sin færdige tilstand */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-in]{opacity:1;transform:none}
}