/* Bitform.Studio — scroll & hero effects. Port of src/styles/marketing.css (Next.js reference).
   Loaded site-wide by mu-plugins/bf-effects.php, after each page's own Node 2 styles.
   Reduced motion: Node 2's `.bf-site *{animation:none!important;transition:none!important}`
   switches all of this off; bf-effects.js then shows every element in its end state. */

/* ---------- reveal (hidden only while this file loads, so pages stay readable with effects off) ---------- */
.bf-reveal-item{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);}
.bf-reveal-item.is-visible{opacity:1;transform:none;}

/* ---------- staggered lists, growing bars ---------- */
.bf-site [data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1), background-color .2s ease, color .2s ease, border-color .2s ease;
  transition-delay: calc(var(--bf-i, 0) * 80ms + 120ms), calc(var(--bf-i, 0) * 80ms + 120ms), 0s, 0s, 0s;
}
.bf-site [data-stagger][data-visible="true"] > * { opacity: 1; transform: none; }
.bf-site [data-grow] { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.2,.7,.3,1) .35s; }
.bf-site [data-grow][data-visible="true"] { transform: none; }

/* ---------- reading progress (bottom edge of the sticky header) ---------- */
.bf-site .bf-progress {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
  transform: scaleX(0); transform-origin: left center; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--om-accent-solid), var(--om-accent-light));
  transition: opacity .3s ease;
}

/* ---------- hero backdrop on subpages (muted homepage pixel field) ---------- */
.bf-site .bf-has-backdrop { position: relative; overflow: hidden; }
.bf-site .bf-has-backdrop > .ct-section-inner-wrap { position: relative; z-index: 1; }
.bf-site .bf-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bf-site .bf-backdrop-field { position: absolute; inset: 0; opacity: .55; }
.bf-site .bf-backdrop-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bf-site .bf-backdrop-fade-x { position: absolute; inset: 0; background: linear-gradient(100deg, var(--om-bg-solid) 10%, rgba(var(--om-bg-rgb), .85) 38%, rgba(var(--om-bg-rgb), .2) 70%, transparent); }
.bf-site .bf-backdrop-fade-y { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--om-bg-solid)); }

/* ---------- subpage hero: text + pixel motif side by side ---------- */
.bf-site .bf-phero-grid { position: relative; display: grid; align-items: end; gap: clamp(30px, 5vw, 64px); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.bf-site .bf-phero-aside { display: flex; justify-content: center; align-self: center; }
@media (min-width: 640px) { .bf-site .bf-phero-aside { justify-content: flex-end; } }
.bf-site .bf-motif-hero { width: min(64vw, 300px); }
@media (min-width: 640px) { .bf-site .bf-motif-hero { width: clamp(220px, 28vw, 380px); } }
.bf-site .bf-motif-side { display: none; width: 300px; margin-top: 56px; }
@media (min-width: 1024px) { .bf-site .bf-motif-side { display: block; } }
.bf-site .bf-motif svg { display: block; width: 100%; height: auto; overflow: visible; }
.bf-site .bf-float { animation: bfFxFloat 7s ease-in-out infinite; }
@keyframes bfFxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- key-figure strip ---------- */
.bf-site .bf-factstrip { border-bottom: 1px solid rgba(var(--om-border-rgb), .12); background: var(--om-surface-alt); }
.bf-site .bf-fact-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.bf-site .bf-fact-list li { display: flex; flex-direction: column; gap: 6px; }
.bf-site .bf-fact-value { font-family: var(--font-om-heading); font-size: 1.55rem; font-weight: 700; color: var(--om-text); }
.bf-site .bf-fact-label { font-size: 13.5px; color: var(--om-text-label); }

/* ---------- pixel motifs ---------- */
.bf-site .bf-pixels rect { transform-box: fill-box; transform-origin: center; transition: transform 1.1s cubic-bezier(.2,.7,.3,1), opacity .7s ease; transition-delay: var(--bf-d, 0s); }
.bf-site .bf-pixels:not([data-in="true"]) rect { opacity: 0 !important; transform: translate(var(--bf-dx, 0), var(--bf-dy, 0)) scale(.3); }
.bf-site .bf-pixels[data-in="true"] rect {
  transform: translate(calc(var(--bf-dx, 0px) * var(--bf-scatter, 0) + var(--bf-hx, 0px)), calc(var(--bf-dy, 0px) * var(--bf-scatter, 0) + var(--bf-hy, 0px))) rotate(var(--bf-hr, 0deg)) scale(calc(1 + var(--bf-hl, 0) * .5));
}
.bf-site .bf-pixels[data-settled="true"] rect { transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .7s ease, fill .3s ease; transition-delay: 0s; }
.bf-site .bf-pixel-twinkle { animation: bfFxTwinkle 4.2s ease-in-out infinite; }
.bf-site .bf-pixel-rise { opacity: 0; animation: bfFxRise 5s ease-out infinite; }
@keyframes bfFxTwinkle { 0%, 100% { opacity: var(--bf-o, 1); } 50% { opacity: .18; } }
@keyframes bfFxRise { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: .85; } 100% { opacity: 0; transform: translateY(-26px); } }
.bf-site .bf-pixel-glow { filter: drop-shadow(0 0 22px rgba(87, 182, 242, .3)); }
.bf-site[data-theme="light"] .bf-pixel-glow { filter: drop-shadow(0 8px 22px rgba(11, 111, 176, .2)); }
.bf-site .bf-pixels-live, .bf-site .bf-shatter { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; }

/* ---------- homepage logo built from tiles ---------- */
.bf-site .bf-logo-float-wrap { display: none; position: absolute; inset: 0; pointer-events: none; }
.bf-site.bf-wide-nav .bf-logo-float-wrap { display: block; }
/* Text column ends 32px before the floating logo (left edge 76vw − half its width; column starts 32px in, later centred in 1220px), so text never runs under it */
.bf-site.bf-wide-nav .ct-new-columns:has(.bf-logo-float-wrap) > .ct-div-block:has(> h1) { max-width: min(640px, calc(76vw - min(18vw, 300px) - 64px - max(0px, 50vw - 610px))) !important; }
.bf-site .bf-logo-float { position: absolute; top: 50%; left: 76%; width: min(36vw, 600px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); }
.bf-site .bf-logo-float-bob { width: 100%; height: 100%; opacity: .94; filter: drop-shadow(0 34px 70px rgba(0, 0, 0, .6)); animation: bfFxFloat 7s ease-in-out infinite; }
/* Compact logo (phones/tablets): 90vw, but shrinks on short screens (svh = with browser bars) so the headline is fully visible on page load */
.bf-site .bf-logo-compact { --bf-logo-w: min(90vw, 480px, calc(100svh - 310px)); display: block; margin: 0 0 12px calc(50% - var(--bf-logo-w) / 2); width: var(--bf-logo-w); aspect-ratio: 1 / 1; }
.bf-site.bf-wide-nav .bf-logo-compact { display: none; }
.ct-code-block:has(.bf-logo-compact) { width: 100%; }
.bf-site .bf-shatter { position: relative; width: 100%; height: 100%; }
.bf-site .bf-shatter > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bf-site .bf-shatter-tiles { position: absolute; inset: 0; visibility: hidden; }
.bf-site .bf-shatter-tile {
  position: absolute; opacity: var(--bf-to, 1);
  transform: translate(calc(var(--bf-tx) * var(--bf-s, 0) * 100% + var(--bf-hx, 0px)), calc(var(--bf-ty) * var(--bf-s, 0) * 100% + var(--bf-hy, 0px))) rotate(var(--bf-hr, 0deg)) scale(calc((1 - var(--bf-s, 0) * .28) * (1 - var(--bf-hl, 0) * .45)));
}
.bf-site .bf-shatter[data-intro="running"] .bf-shatter-tile { transition: transform 1.2s cubic-bezier(.2,.7,.3,1) var(--bf-d, 0s), opacity .8s ease var(--bf-d, 0s); }
.bf-site .bf-shatter[data-hover="true"] .bf-shatter-tile { transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.bf-site .bf-shatter-bits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .bf-site .bf-shatter:not([data-intro="done"]) > img { opacity: 0; }
}

/* ---------- headings: no automatic hyphenation (overrides the per-page .ct-headline / .bf-numrow-title / .bf-legal-h1 rule).
   Words too long for a 320px phone carry a soft hyphen in the content instead (Website­erstellung, Datenschutz­erklärung). */
.bf-site h1, .bf-site h2, .bf-site h3, .bf-site h4, .bf-site .ct-headline { -webkit-hyphens: manual; hyphens: manual; }