/* Bürklin – site-wide motion & interaction layer.
   Loaded from every page <head>; works together with site.js.
   All motion lives behind prefers-reduced-motion: no-preference or html.bk-motion (set by site.js only when motion is allowed). */

:root {
  --bk-ease: cubic-bezier(.16, 1, .3, 1);
  --bk-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --bk-blue: #2D6BB2;
  --bk-blue-dark: #224D82;
  --bk-magenta: #C71E81;
  --bk-ink: #172638;
  --bk-signet: linear-gradient(90deg, #cf2f8b, #864d9f 35%, #3f63b1 70%, #156ebb);
}

/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: 112px; }

/* Visually hidden, still read by screen readers */
.bk-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Skip link ---------- */
.bk-skip {
  position: fixed; left: 16px; top: 12px; z-index: 200;
  padding: 12px 18px; border-radius: 999px;
  background: var(--bk-ink); color: #fff !important; font: 600 15px/1 Inter, system-ui, sans-serif;
  transform: translateY(-160%); transition: transform .2s var(--bk-ease);
}
.bk-skip:focus { transform: none; outline: 3px solid var(--bk-magenta); outline-offset: 3px; }

/* ---------- Accessibility (BFSG / EN 301 549 / WCAG 2.1 AA) ---------- */
/* 2.4.7 Focus visible: site.js swaps the ring to white or ink where magenta would vanish (dark & magenta bands). */
:focus-visible { outline: 3px solid var(--bk-focus, #C71E81) !important; outline-offset: 3px; }
/* 1.4.1 Use of colour: unstyled inline links inside running text are underlined, not colour-only. */
a:not([style]):not(.bk-skip) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:not([style]):not(.bk-skip):hover { text-decoration-thickness: 2px; }
/* 2.5.8 Target size: phone and mail text links get at least 24px of hit area. */
a[href^="tel:"]:not([style*="height"]), a[href^="mailto:"]:not([style*="height"]) { padding-block: 4px; }
/* 1.4.11 Non-text contrast: form field borders at 3:1 against white (focus keeps its blue). */
input:not([type="checkbox"]):not([type="radio"]):not(:focus), textarea:not(:focus), select:not(:focus) { border-color: #7D8DA0 !important; }

/* ---------- Scroll reveal ---------- */
html.bk-motion [data-reveal]:not([data-reveal=""]):not([data-in]) { opacity: 0 !important; transform: translate3d(0, 28px, 0) !important; }
html.bk-motion [data-reveal="img"]:not([data-in]) { transform: scale(.965) !important; }
html.bk-motion [data-reveal="img"]:not([data-in]) img { transform: scale(1.14); }
html.bk-motion [data-in="anim"] {
  transition: opacity .9s var(--bk-ease) var(--bk-delay, 0ms), transform .9s var(--bk-ease) var(--bk-delay, 0ms) !important;
  will-change: opacity, transform;
}
html.bk-motion [data-in="anim"] img { transition: transform 1.6s var(--bk-ease) var(--bk-delay, 0ms), opacity .6s ease; }

/* Generated photos fade in once decoded instead of popping over the stripe placeholder */
img[src^="img/"] { transition: opacity .6s ease, transform .8s var(--bk-ease); }
html.bk-motion img[src^="img/"]:not([data-loaded]) { opacity: 0; }

/* ---------- Hover & press feedback ---------- */
@media (hover: hover) {
  a:hover img[src^="img/"] { transform: scale(1.05); }
  a > span[aria-hidden="true"]:last-child { display: inline-block; transition: transform .25s var(--bk-ease); }
  a:hover > span[aria-hidden="true"]:last-child { transform: translateX(4px); }
}
[data-bk-btn] { transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: .2s; }
[data-bk-btn]:active { transform: scale(.97); }
@media (hover: hover) {
  [data-bk-btn]:hover { box-shadow: 0 10px 24px rgba(23, 38, 56, .14); }
}


/* ---------- Video pause/play control ---------- */
[data-bk-video-toggle] .bk-i-play, [data-bk-video-toggle][data-paused] .bk-i-pause { display: none !important; }
[data-bk-video-toggle][data-paused] .bk-i-play { display: block !important; }
[data-bk-video-toggle]:hover { background: rgba(23, 38, 56, .9) !important; }

/* ---------- Scroll progress ---------- */
.bk-progress {
  position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; pointer-events: none;
  background: var(--bk-signet); transform-origin: 0 50%; transform: scaleX(0);
  opacity: 0; transition: opacity .3s;
}
.bk-progress[data-show] { opacity: 1; }

/* ---------- Signature: the riser (Steigstrang) ----------
   Wide screens only. Dotted line = the planned route, gradient line = the installed pipe, laid as the reader scrolls.
   Every section gets a branch and a fitting. Decorative only (aria-hidden). */
.bk-riser { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.bk-riser .t { fill: none; stroke: #B8C9DC; stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
.bk-riser .p, .bk-riser .b { fill: none; stroke: url(#bk-riser-g); stroke-width: 3; stroke-linecap: round; }
.bk-riser .b { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); transition: stroke-dashoffset .5s var(--bk-ease); }
.bk-riser .d { fill: #fff; stroke: #B8C9DC; stroke-width: 1.5; transition: fill .3s .35s, stroke .3s .35s; }
.bk-riser .r { fill: none; stroke: url(#bk-riser-g); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bk-riser [data-on] .b { stroke-dashoffset: 0; }
.bk-riser [data-on] .d { fill: url(#bk-riser-g); stroke: url(#bk-riser-g); }
.bk-riser .cap { fill: #fff; stroke: url(#bk-riser-g); stroke-width: 3; }
@keyframes bk-ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
@media (prefers-reduced-motion: no-preference) {
  .bk-riser [data-on] .r { animation: bk-ping 1s .4s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .bk-riser * { transition: none !important; } }

/* ---------- Back to top ---------- */
.bk-top {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 80;
  width: 52px; height: 52px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--bk-ink); color: #fff; box-shadow: 0 14px 34px rgba(23, 38, 56, .28);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .25s, transform .3s var(--bk-ease), visibility 0s .3s, background-color .2s;
}
.bk-top[data-show] { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--bk-ease), visibility 0s, background-color .2s; }
.bk-top:hover { background: var(--bk-blue); }
.bk-top:active { transform: scale(.94); }
.bk-top:focus-visible { outline: 3px solid var(--bk-magenta); outline-offset: 3px; }
.bk-top svg { width: 20px; height: 20px; transition: transform .25s var(--bk-ease); }
.bk-top:hover svg { transform: translateY(-2px); }
/* Mobile: sit above the fixed call/enquiry bar */
@media (max-width: 1039px) { .bk-top { bottom: calc(86px + env(safe-area-inset-bottom)); width: 46px; height: 46px; } }

/* ---------- Component entrances (header menu, drawer, FAQ) ---------- */
@keyframes bk-pop { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
@keyframes bk-rise-sm { from { opacity: 0; transform: translateY(8px); } }
@keyframes bk-drawer { from { opacity: 0; transform: translateX(24px); } }
@keyframes bk-bar-up { from { transform: translateY(100%); } }
@keyframes bk-expand { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: no-preference) {
  [data-bk-pop] { animation: bk-pop .26s var(--bk-ease) both; transform-origin: 30% 0; }
  [data-bk-pop] > a { animation: bk-rise-sm .35s var(--bk-ease) both; }
  [data-bk-drawer] { animation: bk-drawer .32s var(--bk-ease) both; }
  [data-bk-drawer] > div:last-child > * { animation: bk-rise-sm .4s var(--bk-ease) both; }
  [data-bk-bar] { animation: bk-bar-up .45s var(--bk-ease) .3s both; }
  [data-bk-expand] { animation: bk-expand .3s var(--bk-ease) both; }

  [data-bk-pop] > a:nth-child(2), [data-bk-drawer] > div:last-child > :nth-child(2) { animation-delay: 30ms; }
  [data-bk-pop] > a:nth-child(3), [data-bk-drawer] > div:last-child > :nth-child(3) { animation-delay: 60ms; }
  [data-bk-pop] > a:nth-child(4), [data-bk-drawer] > div:last-child > :nth-child(4) { animation-delay: 90ms; }
  [data-bk-pop] > a:nth-child(5), [data-bk-drawer] > div:last-child > :nth-child(5) { animation-delay: 120ms; }
  [data-bk-pop] > a:nth-child(6), [data-bk-drawer] > div:last-child > :nth-child(6) { animation-delay: 150ms; }
  [data-bk-pop] > a:nth-child(7), [data-bk-drawer] > div:last-child > :nth-child(7) { animation-delay: 180ms; }
  [data-bk-pop] > a:nth-child(8), [data-bk-drawer] > div:last-child > :nth-child(8) { animation-delay: 210ms; }
  [data-bk-pop] > a:nth-child(n+9), [data-bk-drawer] > div:last-child > :nth-child(n+9) { animation-delay: 240ms; }

  /* Smooth cross-page transitions (Chromium); header stays put while content cross-fades */
  @view-transition { navigation: auto; }
  [data-bk-header] { view-transition-name: bk-header; }
  ::view-transition-old(root) { animation: .18s ease both bk-fade-out; }
  ::view-transition-new(root) { animation: .32s var(--bk-ease) both bk-fade-in; }
}
@keyframes bk-fade-out { to { opacity: 0; } }
@keyframes bk-fade-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .bk-progress, .bk-top, .bk-skip, img[src^="img/"] { transition: none !important; }
}