/* Enkla textanimationer (opacity + liten flytt). Allt ligger bakom .mo. */
.mo [data-r]:not(.in) { opacity: 0; transform: translateY(22px); }
.mo [data-r].in { animation: moIn .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) backwards; }
/* Bildrutor: bara opacity, ingen flytt (inga extra grafiklager). Ta bort dessa tre rader för att stänga av. */
.mo .tile[data-r]:not(.in), .mo .pcard[data-r]:not(.in) { opacity: 0; transform: none; }
.mo .tile[data-r].in, .mo .pcard[data-r].in { animation: moFade .7s ease var(--d, 0ms) backwards; }
@keyframes moFade { from { opacity: 0; } }
@keyframes moIn { from { opacity: 0; transform: translateY(22px); } }

/* Gemensamt: header-knapp och footerlänkar */
.nav a.nav-cta, .nav a.nav-cta[aria-current="page"], a.nav-cta {
  display: inline-block;
  color: #0b0a09;
  background: #ff5a1f;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
@media (hover: hover) and (pointer: fine){ .nav a.nav-cta:hover, a.nav-cta:hover { color: #0b0a09; background: #f3efe9; transform: translateY(-1px); } }
.nav-cta .s { display: none; }
@media (max-width: 480px) {
  .nav-cta .l { display: none; }
  .nav-cta .s { display: inline; }
  .nav a.nav-cta, a.nav-cta { padding: 8px 12px; font-size: 13px; }
  header .wrap { gap: 10px; }
  .nav { gap: 13px !important; font-size: 14px !important; }
  .mark { font-size: 18px !important; }
}
.hdr-r { display: flex; align-items: center; gap: 20px; }
footer a { color: inherit; border-bottom: 1px solid var(--line, #2a2622); transition: color .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine){ footer a:hover { color: #ff5a1f; border-color: #ff5a1f; } }

@media (max-width: 340px) {
  .nav { gap: 9px !important; font-size: 13px !important; }
  .mark { font-size: 16px !important; }
  .nav a.nav-cta, a.nav-cta { padding: 7px 9px; font-size: 12px; }
}

/* ---- Mobil/touch-baslinje ----
   Ingen grå tap-flash, ingen 300ms-fördröjning, ingen "fastnad" hover på touch,
   och tryck-feedback direkt vid nedtryck (inte först vid släpp). */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
a, button, [role="button"], summary { touch-action: manipulation; }
button, .btn, .btn-reel, a.nav-cta, .reel-x, .lb button, .rl .x, .rl .open, .tile-link, .reel, .shot {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.btn, .btn-reel, a.nav-cta, .reel-x, .lb button, .rl .x, .rl .open, .tile-link, .reel, .shot {
  transition-property: background-color, border-color, color, opacity, transform;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.23, 1, .32, 1);
}
.btn:active, .btn-reel:active, a.nav-cta:active, .rl .open:active { transform: scale(.97); }
.reel-x:active, .lb button:active, .rl .x:active { transform: scale(.92); }
.tile-link:active, .reel:active, .shot:active { transform: scale(.985); }
.reel-dlg video, .lb, .rl { overscroll-behavior: contain; }

/* ---- Design-polish ---- */
::selection { background: #ff5a1f; color: #0b0a09; }

/* Fast header, solid bakgrund efter scroll */
header { position: sticky; top: 0; z-index: 30; background: #0b0a09; border-bottom: 1px solid transparent; transition: border-color .25s; }
header.stuck { border-bottom-color: #2a2622; }
header .wrap { padding-block: 22px; }
@media (max-width: 480px) { header .wrap { padding-block: 16px; } }
section[id], [id="kontakt"] { scroll-margin-top: 72px; }

/* Orange läsframsteg, bara transform (compositor). Visas bara där webbläsaren stöder scroll-driven animation. */
@supports (animation-timeline: scroll()) {
  body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40;
    background: #ff5a1f; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
    animation: moProg linear both; animation-timeline: scroll(root);
  }
  @keyframes moProg { to { transform: scaleX(1); } }
}


/* Kontakt-rubrik: sista ordet i orange, som "stay." i hero */
.contact h3 em { font-style: normal; color: #ff5a1f; }
.nav, .hdr-r { align-items: center; }

/* Availability badge */
.avail { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(20px, 3vw, 32px); padding: 8px 14px 8px 12px; border: 1px solid var(--line, #2a2724); border-radius: 999px; font-size: 14px; letter-spacing: .02em; color: var(--ink, #f4f1ec); }
.avail .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--orange, #ff5a1f); flex: none; }
.avail .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange, #ff5a1f); animation: availPulse 2.4s cubic-bezier(.23, 1, .32, 1) infinite; }
@keyframes availPulse { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .avail .dot::after { animation: none; display: none; } }

a.avail { text-decoration: none; transition: border-color .2s, background .2s; }
a.avail .arr { color: var(--orange, #ff5a1f); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
a.avail:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { a.avail:hover { border-color: var(--orange, #ff5a1f); } a.avail:hover .arr { transform: translateX(3px); } }