/* NESTE motion system — demo (lokal prototype, ikke publisert)
   Verdier dokumentert i ../MOTION-SPEC.md */
@font-face{font-family:"Instrument Serif";src:url(../fonts/InstrumentSerif-Regular.ttf) format("truetype");font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/InstrumentSerif-Italic.ttf) format("truetype");font-style:italic;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/InterTight-VariableFont_wght.ttf) format("truetype");font-weight:100 900;font-display:swap}

:root{
  /* farger (merkevarepakke 2j) */
  --orange:#C8501E; --paper:#F4F1EA; --ink:#141414; --ink-2:#2A2724; --muted:#6E6A63;
  /* easing */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* expo-out: reveals, inn-animasjoner */
  --ease-in-out:cubic-bezier(.65,.05,.36,1);/* WO-kurve: sideoverganger, paneler */
  --ease-std:cubic-bezier(.4,0,.2,1);       /* standard UI: farger, hover */
  --ease-in:cubic-bezier(.7,0,.84,0);       /* ut-animasjoner */
  /* varigheter */
  --d-xs:120ms; --d-s:200ms; --d-m:400ms; --d-l:700ms; --d-xl:1000ms;
  --stagger:60ms;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:"Inter Tight",system-ui,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
body{margin:0;transition:background-color var(--d-m) var(--ease-std),color var(--d-m) var(--ease-std)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.serif{font-family:"Instrument Serif",serif;font-weight:400}
.it{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;color:var(--orange)}

/* ---------- 5. Tekstmarkering (::selection) ---------- */
::selection{background:var(--orange);color:var(--paper);text-shadow:none}
.dark ::selection,.dark::selection{background:var(--orange);color:var(--ink)}
.on-orange ::selection{background:var(--ink);color:var(--paper)}
::target-text{background:var(--orange);color:var(--paper)}
mark{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--orange) 35%,transparent) 0);color:inherit;padding:0 .1em}
/* store titler: markering blir en grafisk blokk (R/GA-effekten) */
.display{line-height:1;letter-spacing:-.02em}

/* ---------- 1a. Native SVG-markører (Wolff Olins-teknikk) ---------- */
@media (pointer:fine){
  [data-cursor="lenke"]{cursor:url(../cursors/pil-lenke.svg) 24 24,pointer}
  [data-cursor="apne"]{cursor:url(../cursors/pil-apne.svg) 28 28,pointer}
  [data-cursor="neste"]{cursor:url(../cursors/ord-neste.svg) 60 24,e-resize}
  [data-cursor="forrige"]{cursor:url(../cursors/ord-forrige.svg) 64 20,w-resize}
  [data-cursor="se"]{cursor:url(../cursors/ord-se.svg) 39 24,zoom-in}
  [data-cursor="spill"]{cursor:url(../cursors/ord-spill.svg) 60 24,pointer}
  [data-cursor="dra"]{cursor:url(../cursors/ord-dra.svg) 33 24,grab}
}
/* ---------- 1b. JS-følgemarkør («flis») — valgfri ---------- */
.cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;
  background:var(--orange);border-radius:2px;transform:translate3d(-100px,-100px,0);
  transition:width var(--d-s) var(--ease-out),height var(--d-s) var(--ease-out),margin var(--d-s) var(--ease-out),background-color var(--d-s) var(--ease-std),opacity var(--d-s) var(--ease-std);
  display:flex;align-items:center;justify-content:center;color:var(--paper);font:500 12px/1 "Inter Tight",sans-serif;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.cursor.is-hover{width:44px;height:44px;margin:-22px 0 0 -22px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--orange)}
.cursor.is-label{width:auto;height:30px;margin:-15px 0 0 -10px;padding:0 12px;border-radius:2px;background:var(--orange)}
.cursor.is-hidden{opacity:0}
.cursor.is-down{transform-origin:center}
html.has-cursor-follow body{cursor:auto}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.cursor{display:none}}

/* ---------- 2. Sideoverganger (View Transitions API, cross-document) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out var(--d-m) var(--ease-in) both}
::view-transition-new(root){animation:vt-in var(--d-l) var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-2vh)}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
/* felles element som «morfer» mellom forside-kort og case-hero */
.vt-hero{view-transition-name:case-hero}
::view-transition-group(case-hero){animation-duration:var(--d-l);animation-timing-function:var(--ease-in-out)}
/* JS-fallback: oransje panel */
.wipe{position:fixed;inset:0;z-index:9998;background:var(--orange);transform:translateY(100%);pointer-events:none;display:flex;align-items:center;justify-content:center}
.wipe svg{width:64px;height:64px;opacity:0;transition:opacity var(--d-s) var(--ease-std)}
.wipe.in{transform:translateY(0);transition:transform 450ms var(--ease-in-out)}
.wipe.in svg{opacity:1}
.wipe.out{transform:translateY(-100%);transition:transform 600ms var(--ease-in-out)}

/* ---------- 3. Scroll-reveals ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--d-l) var(--ease-out),transform var(--d-l) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger))}
.reveal.is-in{opacity:1;transform:none}
.lines .line{display:block;overflow:hidden;padding-bottom:.06em}
.lines .line>span{display:block;transform:translateY(105%);transition:transform 900ms var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.lines.is-in .line>span{transform:none}
.img-reveal{clip-path:inset(12% 6% 12% 6%);transform:scale(1.08);transition:clip-path 1100ms var(--ease-out),transform 1400ms var(--ease-out)}
.img-reveal.is-in{clip-path:inset(0 0 0 0);transform:none}

/* ---------- 4. Hover ---------- */
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size var(--d-m) var(--ease-out)}
.ul:hover,.ul:focus-visible{background-size:100% 1.5px}
.card{display:block}
.card .media{overflow:hidden;background:var(--ink-2)}
.card .media img{transition:transform var(--d-xl) var(--ease-out)}
.card:hover .media img{transform:scale(1.035)}
.card .meta{display:flex;justify-content:space-between;gap:1rem;padding-top:.6rem;font-size:.85rem}
.card .meta .arrow{transition:transform var(--d-m) var(--ease-out)}
.card:hover .meta .arrow{transform:translateX(6px)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.3rem;background:var(--ink);color:var(--paper);border-radius:2px;font-weight:500;transition:background-color var(--d-s) var(--ease-std),transform var(--d-m) var(--ease-out)}
.btn:hover{background:var(--orange)}
.btn .pil{width:18px;height:18px;transition:transform var(--d-m) var(--ease-out)}
.btn:hover .pil{transform:translateX(4px)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- 6. Preloader (bare første besøk i økta) ---------- */
.preloader{position:fixed;inset:0;z-index:10000;background:var(--ink);color:var(--paper);display:grid;place-items:center;
  clip-path:inset(0 0 0 0);transition:clip-path 800ms var(--ease-in-out)}
.preloader .flis{width:72px;height:72px;background:var(--orange);display:grid;place-items:center;transform:scale(.2);transition:transform 700ms var(--ease-out)}
.preloader .flis svg{width:46px;height:46px;opacity:0;transition:opacity 300ms var(--ease-std) 350ms}
.preloader.go .flis{transform:scale(1)} .preloader.go .flis svg{opacity:1}
.preloader .count{position:absolute;right:2rem;bottom:1.5rem;font-family:"Instrument Serif",serif;font-style:italic;font-size:2.4rem;font-variant-numeric:tabular-nums}
.preloader.done{clip-path:inset(0 0 100% 0)}
html.seen .preloader{display:none}

/* ---------- Footer: strekk-ordmerke ---------- */
.stretch-wrap{overflow:hidden;margin-top:2rem}
.stretch{font-weight:var(--w,300);line-height:.8;font-size:calc((100vw - 4rem)/3.05);letter-spacing:-.04em;transform-origin:50% 100%;transform:scaleY(var(--sy,1));will-change:transform}

/* ---------- Redusert bevegelse: alt av, innhold synlig ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .reveal,.lines .line>span,.img-reveal{opacity:1;transform:none;clip-path:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .preloader{display:none}
  .stretch{transform:none!important}
}

/* Modus B: følgemarkør erstatter systemmarkøren (kun fin peker, ikke redusert bevegelse) */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.cursor-b,html.cursor-b *{cursor:none!important}
}
html:not(.cursor-b) .cursor{display:none}