/* =========================================================
   Motion-lag — «levende papir»
   Lastes etter styles-preview.css på alle hovedsider.
   Kun transform/opacity/filter + scroll-/view-timelines.
   Alt bevegelig er gated bak prefers-reduced-motion.
   ========================================================= */

:root {
  --m-out:    cubic-bezier(0.19, 1, 0.22, 1);   /* expo-aktig utgang */
  --m-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --m-spring: cubic-bezier(0.34, 1.45, 0.5, 1); /* lett overshoot */
}

/* Registrert custom property — lar scroll-timeline drive parallakse
   uten å kollidere med hover-zoom på samme transform. */
@property --m-par {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* =========================================================
   1 · Sidebytter — cross-document View Transitions (MPA)
   Topbaren står i ro, innholdet glir retningsbevisst.
   motion.js setter data-vt="fwd|back" via pageswap/pagereveal.
   ========================================================= */
/* Opt-in på toppnivå — enkelte motorer ignorerer regelen inni media queries
   ved reveal. Redusert bevegelse håndteres ved å skru av animasjonene under,
   som gir et øyeblikkelig bytte. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .topbar--sticky { view-transition-name: topbar; }

  /* Scopet til .is-vt-nav (flyktig — settes i pagereveal, fjernes når
     transitionen er ferdig) — gjelder KUN sidebytter, ikke
     same-document-transitions som omløps-morfen. */
  html.is-vt-nav::view-transition-old(root) {
    animation: m-vt-out 0.38s var(--m-inout) both;
  }
  html.is-vt-nav::view-transition-new(root) {
    animation: m-vt-in 0.58s 0.05s var(--m-out) both;
  }
  html.is-vt-nav[data-vt="back"]::view-transition-old(root) { animation-name: m-vt-out-back; }
  html.is-vt-nav[data-vt="back"]::view-transition-new(root) { animation-name: m-vt-in-back; }

  @keyframes m-vt-out {
    to { opacity: 0; transform: translateX(-28px); filter: blur(8px); }
  }
  @keyframes m-vt-in {
    from { opacity: 0; transform: translateX(36px); filter: blur(10px); }
  }
  @keyframes m-vt-out-back {
    to { opacity: 0; transform: translateX(28px); filter: blur(8px); }
  }
  @keyframes m-vt-in-back {
    from { opacity: 0; transform: translateX(-36px); filter: blur(10px); }
  }
}

/* =========================================================
   2 · Entry-koreografi (kun ved direkte sidelast — ikke
   under view transitions, da styrer rot-animasjonen)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {

  html.has-motion:not(.is-vt) .topbar {
    animation: m-descend 0.75s var(--m-out) both;
  }
  @keyframes m-descend {
    from { opacity: 0; transform: translateY(-14px); }
  }

  /* Profilkortet stiger opp og fokuseres */
  html.has-motion:not(.is-vt) .profile-card__inner {
    animation: m-card-rise 1.05s 0.12s var(--m-out) both;
  }
  @keyframes m-card-rise {
    0%   { opacity: 0; transform: translateY(28px) scale(0.984); filter: blur(10px); }
    55%  { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
  }

  /* Portrettet: skarpstilles som et kamera */
  html.has-motion:not(.is-vt) .pc-avatar img.is-loaded {
    animation: m-avatar-focus 1.2s 0.3s var(--m-out) both;
  }
  @keyframes m-avatar-focus {
    from { opacity: 0; transform: scale(1.46); filter: blur(12px) saturate(0.7); }
    to   { opacity: 1; transform: scale(1.35); filter: blur(0) saturate(1); }
  }

  /* Navnetreken under «Cabalan.» tegnes som et pennestrøk */
  html.has-motion:not(.is-vt) .profile-card--quiet .pc-name em::after {
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: m-tick-draw 0.7s 1.05s var(--m-inout) forwards;
  }
  @keyframes m-tick-draw {
    to { transform: scaleX(1); }
  }

  /* Hero-tekst: linjene stiger og skarpstilles i sekvens.
     Drives av eksisterende data-reveal → .is-visible. */
  html.has-motion .hero-intro > * {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
    transition:
      opacity 0.9s var(--m-out),
      transform 0.9s var(--m-out),
      filter 0.9s var(--m-out);
  }
  html.has-motion .hero-intro.is-visible > * {
    opacity: 1;
    transform: none;
    filter: none;
  }
  html.has-motion .hero-intro.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
  html.has-motion .hero-intro.is-visible > *:nth-child(2) { transition-delay: 0.16s; }
  html.has-motion .hero-intro.is-visible > *:nth-child(3) { transition-delay: 0.27s; }
  html.has-motion .hero-intro.is-visible > *:nth-child(4) { transition-delay: 0.40s; }
  html.has-motion .hero-intro.is-visible > *:nth-child(5) { transition-delay: 0.54s; }

  /* Eyebrow: typografisk tracking-in */
  html.has-motion .hero-intro__eyebrow {
    letter-spacing: 0.46em;
    transition:
      opacity 0.9s var(--m-out),
      transform 0.9s var(--m-out),
      filter 0.9s var(--m-out),
      letter-spacing 1.2s var(--m-out);
  }
  html.has-motion .hero-intro.is-visible .hero-intro__eyebrow {
    letter-spacing: 0.26em;
  }

  /* Etter view transition: rolig, rask settle uten dobbel-koreografi */
  html.is-vt .hero-intro > * {
    transition-delay: 0s !important;
    transition-duration: 0.45s;
    filter: none;
    transform: translateY(8px);
  }
}

/* =========================================================
   3 · Scroll-drevne animasjoner (CSS view-timeline)
   Parallakse i kortbilder — null JS der det støttes.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    .featured-card__img,
    .project-tile__art {
      transform: translate3d(0, var(--m-par), 0) scale(1.12);
      animation: m-par-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 100%;
      transition: transform 0.65s var(--m-out), filter 0.65s ease;
    }
    .featured-card:hover .featured-card__img {
      transform: translate3d(0, var(--m-par), 0) scale(1.17);
      filter: saturate(1.06);
    }
    .project-tile:hover .project-tile__art {
      transform: translate3d(0, var(--m-par), 0) scale(1.16);
      filter: saturate(1.06);
    }
    @keyframes m-par-drift {
      from { --m-par: 12px; }
      to   { --m-par: -12px; }
    }

    /* Vannmerke-tallene driver med scrollen */
    .spa-watermark {
      animation: m-wm-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes m-wm-drift {
      from { translate: 0 34px; }
      to   { translate: 0 -34px; }
    }
  }
}

/* =========================================================
   4 · Scroll-fremdrift — varm hårlinje øverst
   (elementet injiseres av motion.js på sider som mangler det)
   ========================================================= */
.scroll-progress {
  height: 2px;
  background: transparent;
}
.scroll-progress__fill {
  background: linear-gradient(90deg, #1E3A2E 0%, #8B6F47 55%, #C19A3E 100%);
  background-size: 200% 100%;
}

/* =========================================================
   5 · Pointer-sheen — varmt lys + kantglimt som følger pekeren
   (span.m-sheen injiseres av motion.js i kortene)
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  .m-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.45s ease;
    background: radial-gradient(
      340px circle at var(--shx, 50%) var(--shy, 50%),
      rgba(214, 178, 109, 0.13),
      rgba(214, 178, 109, 0.05) 35%,
      transparent 65%
    );
  }
  .m-sheen::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
      240px circle at var(--shx, 50%) var(--shy, 50%),
      rgba(110, 86, 56, 0.55),
      rgba(110, 86, 56, 0.12) 45%,
      transparent 72%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
  .is-lit > .m-sheen { opacity: 1; }

  /* Sheen-vertene trenger posisjonering og avrunding å arve */
  .profile-card__inner { position: relative; }
}

/* =========================================================
   6 · JS-styrt transform: nøytraliser CSS-regler som ellers
   kjemper om transform på samme elementer
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  /* Magnet-knapper: fjær-fysikken eier transform */
  html.has-motion :is(
    .visitkort__cta, .hero-intro__link, .exec-cta, .demo-gift,
    .group-nav__btn, .projects__hub-btn, .chip-link, .about-ch__cta
  ) {
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease !important;
    will-change: transform;
  }
  html.has-motion :is(
    .visitkort__cta, .hero-intro__link, .exec-cta, .demo-gift,
    .group-nav__btn, .projects__hub-btn, .chip-link, .about-ch__cta
  ):hover {
    transform: none !important;
  }

  /* Tilt-kort: behold skygge/kant-transitions, slipp transform */
  html.has-motion .project-tile {
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  }
  html.has-motion .project-tile:hover { transform: none; }
  html.has-motion .featured-card {
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
  }
  html.has-motion .featured-card:hover { transform: none; }
}

/* =========================================================
   7 · Levende bakgrunn — aurora + filmkorn
   (injiseres av motion.js; ligger bak alt innhold)
   ========================================================= */
.m-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.m-ambient i {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.m-ambient__a {
  width: 56vmax; height: 56vmax;
  left: -14vmax; top: -20vmax;
  background: radial-gradient(circle at 35% 35%, rgba(193, 154, 62, 0.16), rgba(193, 154, 62, 0) 62%);
}
.m-ambient__b {
  width: 48vmax; height: 48vmax;
  right: -16vmax; bottom: -22vmax;
  background: radial-gradient(circle at 60% 60%, rgba(94, 124, 104, 0.15), rgba(94, 124, 104, 0) 62%);
}
.m-ambient__c {
  width: 34vmax; height: 34vmax;
  left: 38vw; top: 46vh;
  background: radial-gradient(circle at 50% 50%, rgba(181, 105, 79, 0.07), rgba(181, 105, 79, 0) 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .m-ambient__a { animation: m-amb-a 38s var(--m-inout) infinite alternate; }
  .m-ambient__b { animation: m-amb-b 46s var(--m-inout) infinite alternate; }
  .m-ambient__c { animation: m-amb-c 52s var(--m-inout) infinite alternate; }
  @keyframes m-amb-a { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.12); } }
  @keyframes m-amb-b { to { transform: translate3d(-8vmax, -6vmax, 0) scale(1.08); } }
  @keyframes m-amb-c { to { transform: translate3d(-6vmax, 4vmax, 0) scale(1.15); } }
}

.m-grain {
  position: fixed;
  inset: -28%;
  z-index: 95;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .m-grain { animation: m-grain-jump 1.1s steps(6) infinite; }
  @keyframes m-grain-jump {
    0%   { transform: translate3d(0, 0, 0); }
    20%  { transform: translate3d(-3%, 2%, 0); }
    40%  { transform: translate3d(2%, -3%, 0); }
    60%  { transform: translate3d(-2%, -2%, 0); }
    80%  { transform: translate3d(3%, 3%, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
}
@media (pointer: coarse), (max-width: 760px) {
  .m-grain { display: none; }
}

/* =========================================================
   8 · Mikrointeraksjoner
   ========================================================= */

/* Nav-indikatoren lander med en liten fjær */
.main-nav__indicator {
  transition:
    transform 0.6s var(--m-spring),
    width 0.6s var(--m-spring),
    opacity 0.3s ease;
}

/* «Nytt nå»-prikken sender rolige ping */
.hero-intro__latest__dot { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .hero-intro__latest__dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--accent-ok, #6B8E55);
    animation: m-ping 2.8s var(--m-out) infinite;
  }
  @keyframes m-ping {
    0%, 14% { transform: scale(0.55); opacity: 0.9; }
    60%     { transform: scale(2.1);  opacity: 0; }
    100%    { transform: scale(2.1);  opacity: 0; }
  }
}

/* Tekstlenker: understrek tegnes inn fra venstre, forlater mot høyre */
.featured__more,
.pc-more {
  position: relative;
  border-bottom: none !important;
}
.featured__more::after,
.pc-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--m-out);
}
.featured__more:hover::after,
.pc-more:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

/* Blomsten i merket nikker ved hover */
.mark__flower {
  transition: transform 0.45s var(--m-spring);
  display: inline-flex;
}
.mark:hover .mark__flower,
.mark--link:hover .mark__flower {
  transform: rotate(-14deg) scale(1.12);
}

/* GitHub-ikonet i footer */
.footbar__icon svg { transition: transform 0.45s var(--m-spring); }
.footbar__icon:hover svg { transform: translateY(-2px) rotate(-8deg); }

/* Piler i kort glir diagonalt */
.featured-card__arrow { transition: transform 0.4s var(--m-spring), color 0.3s ease; }
.featured-card:hover .featured-card__arrow { transform: translate(4px, -2px); }

/* =========================================================
   9 · Omløpet — 3D-ring av prosjektene (prosjekter.html)
   Bygges og drives av motion.js. Vises kun på desktop med
   mus og uten redusert bevegelse; ellers står kortlisten
   under for hele presentasjonen.
   ========================================================= */
.orbit-scene {
  position: relative;
  z-index: 3;
  max-width: min(1280px, 94vw);
  margin: clamp(48px, 6vw, 88px) auto clamp(48px, 6vw, 84px);
  padding: 0 var(--pad-x);
}
.orbit-scene__stage {
  position: relative;
  height: 500px;
  perspective: 1400px;
  perspective-origin: 50% 43%;
}
.orbit-scene__ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  --orbit: 0deg;
  --orbit-r: 330px;
}
/* Gulvskygge + hårlinje-bane gir dybde uten å bryte papirfølelsen */
.orbit-scene__floor {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 760px;
  height: 150px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(31, 26, 20, 0.13), rgba(31, 26, 20, 0) 70%);
  pointer-events: none;
}
.orbit-scene__path {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 820px;
  height: 230px;
  transform: translateX(-50%);
  border: 1px solid rgba(31, 26, 20, 0.10);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-scene__hint {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey-soft);
}

/* Kortene i ringen — billboardes mot kamera av calc-kjeden */
.orbit-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  height: 312px;
  margin: -156px 0 0 -115px;
  padding: 0;
  display: block;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--silver);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  --depth: 0.5;
  transform:
    rotateY(calc(var(--orbit) + var(--th)))
    translateZ(var(--orbit-r))
    rotateY(calc((var(--orbit) + var(--th)) * -1))
    scale(calc(0.82 + 0.26 * var(--depth)));
  opacity: calc(0.32 + 0.68 * var(--depth));
  filter: blur(calc((1 - var(--depth)) * 2.5px));
  box-shadow: 0 18px 40px -22px rgba(31, 26, 20, 0.30);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.orbit-card:hover {
  border-color: #1E3A2E;
  box-shadow:
    0 24px 50px -24px rgba(31, 26, 20, 0.34),
    0 0 0 1px #1E3A2E;
}
.orbit-card__visual {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border-bottom: 1px solid var(--silver);
  overflow: hidden;
  position: relative;
}
.orbit-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
}
.orbit-card__num {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(31, 26, 20, 0.5);
}
.orbit-card__body {
  display: block;
  padding: 12px 14px 14px;
}
.orbit-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.orbit-card__meta .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.orbit-card__title {
  display: block;
  margin-top: 6px;
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 1.15;
  color: var(--ink);
}
.orbit-card__title i { font-style: normal; color: var(--grey); }
.orbit-card__group {
  display: block;
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-soft);
}

/* ---------- Fokusert prosjektkort (scenen) ---------- */
.orbit-veil {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(245, 241, 232, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.orbit-veil.is-open { opacity: 1; }

.orbit-stage {
  position: fixed;
  inset: 0;
  z-index: 91;
  display: grid;
  place-items: center;
  padding: 24px;
}
.orbit-stage__card {
  position: relative;
  display: grid;
  grid-template-columns: 300px 1fr;
  width: min(780px, 92vw);
  max-height: min(82vh, 640px);
  background: var(--surface);
  border: 1px solid var(--silver-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(31, 26, 20, 0.06),
    0 48px 110px -40px rgba(31, 26, 20, 0.45);
}
.orbit-stage[data-open] .orbit-stage__card { view-transition-name: orbit-hero; }
.orbit-stage__visual {
  background: var(--paper-2);
  border-right: 1px solid var(--silver);
  min-height: 100%;
}
.orbit-stage__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  display: block;
}
.orbit-stage__body {
  padding: 26px 28px 24px;
  overflow-y: auto;
}
.orbit-stage__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
}
.orbit-stage__meta .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.orbit-stage__title {
  margin: 0 0 12px;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
  color: var(--ink);
}
.orbit-stage__title i { font-style: normal; color: var(--grey); }
.orbit-stage__content .project-tile__desc { margin: 0 0 14px; }
.orbit-stage__content .project-tile__story { margin: 0 0 14px; }
.orbit-stage__content .project-tile__value { margin: 0; }
.orbit-stage__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 9px 16px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background 0.22s ease, border-color 0.22s ease;
}
.orbit-stage__cta:hover { background: #1E3A2E; border-color: #1E3A2E; }
.orbit-stage__cta svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Lukk + nedtellingsring — selve animasjonen ER timeren:
   hover/fokus pauser den, animationend lukker scenen. */
.orbit-stage__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--silver-2);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  z-index: 2;
  transition: border-color 0.25s ease, transform 0.25s var(--m-spring);
}
.orbit-stage__close:hover { border-color: var(--ink); transform: scale(1.08); }
.orbit-stage__close .x {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round;
}
.orbit-stage__close .ring {
  position: absolute;
  inset: -1px;
  width: 40px;
  height: 40px;
  transform: rotate(-90deg);
  pointer-events: none;
}
.orbit-stage__close .ring circle {
  fill: none;
  stroke: #1E3A2E;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 119.4;     /* 2π·19 */
  stroke-dashoffset: 119.4;
}
.orbit-stage__card.is-counting .ring circle {
  animation: m-orbit-count 8s linear forwards;
}
/* Pause mens man leser: peker over kortet, eller synlig tastaturfokus.
   (Ikke :focus-within — det programmatiske fokuset på lukkeknappen
   ville pauset timeren permanent for musebrukere.) */
.orbit-stage__card:hover .ring circle,
.orbit-stage__card:has(:focus-visible) .ring circle {
  animation-play-state: paused;
}
@keyframes m-orbit-count {
  from { stroke-dashoffset: 119.4; }
  to   { stroke-dashoffset: 0; }
}

.orbit-stage[hidden] { display: none; }
.orbit-veil[hidden] { display: none; }

/* View transition-koreografi for morfen */
::view-transition-group(orbit-hero) {
  animation-duration: 0.62s;
  animation-timing-function: cubic-bezier(0.3, 1.18, 0.36, 1);
}

/* Omløpet finnes bare i riktig miljø */
@media (pointer: coarse), (hover: none), (max-width: 979px), (prefers-reduced-motion: reduce) {
  .orbit-scene { display: none !important; }
}

/* =========================================================
   10 · Polering — seleksjon og fokus
   ========================================================= */
::selection {
  background: rgba(193, 154, 62, 0.3);
  color: var(--ink, #1F1A14);
}
:where(a, button, [role="button"], summary):focus-visible {
  outline: 2px solid #1E3A2E;
  outline-offset: 3px;
  border-radius: 2px;
}