#instrument {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--brass);
}

/* ---- Linan ---- */
#linan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
#lina-path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--lina-offset, 1));
  /* pathLength normaliserar dasharray till 0-1 oavsett verklig langd */
  pathLength: 1;
}

/* ---- Djupskalan ---- */
#djupskala {
  position: absolute;
  top: 50%;
  right: clamp(0.75rem, 2vw, 2rem);
  transform: translateY(-50%);
  display: none;
  align-items: baseline;
  gap: 0.15rem;
  font-size: var(--step--1);
  color: var(--brass);
  opacity: 0.8;
  letter-spacing: 0.05em;
}
@media (min-width: 56.25rem) {
  #djupskala { display: flex; }
}
.djup-enhet { opacity: 0.6; }

#djup-spar {
  position: absolute;
  right: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 40vh;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--brass) 50%, transparent) 15%,
    color-mix(in srgb, var(--brass) 50%, transparent) 85%,
    transparent
  );
}

/* ---- Ekolodsbagar ---- */
.ekolodsbage {
  position: absolute;
  right: clamp(1.5rem, 3vw, 3rem);
  width: 1.5rem;
  height: 0.5rem;
  border-top: 1.5px solid var(--brass);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0;
}

/* ---- Filmkorn och vinjett ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---- Sektionsintraden ---- */
.avslojas {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 550ms ease-out, transform 550ms ease-out;
}
.avslojas.syns {
  opacity: 1;
  transform: none;
}

/* ---- Reducerad rorelse ---- */
@media (prefers-reduced-motion: reduce) {
  #lina-path { stroke-dashoffset: 0; }
  .ekolodsbage { display: none; }
  body { transition: none; }
  .avslojas { opacity: 1; transform: none; transition: none; }
}