/* bajclean-pro: the cinema swing, simplified. Same dark palette as the
   rest of the site. Hero opens with the sharp copy hidden behind a
   frosted-glass fog; a squeegee sweeps right-to-left and the fog clips
   away in sync, revealing the copy clearly. Everything else is quiet
   modern editorial. Custom cursor + HUD via pro.js. */

:root {
  color-scheme: dark;
  --bg: #0a0a0c;
  --bg-2: #101013;
  --bg-3: #17181c;
  --ink: #f2ede2;
  --ink-soft: #d9d3c6;
  --muted: #8a8681;
  --dim: #5a5651;
  --hair: rgb(242 237 226 / 0.10);
  --hair-strong: rgb(242 237 226 / 0.22);
  --accent: #4fb4d8;
  --accent-hi: #7dcae8;
  --accent-deep: #2c7f9d;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Menlo", Consolas, "Liberation Mono", monospace;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --page: 82rem;
  --measure: 42rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--ink);
}

p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }

a {
  color: var(--ink);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
a:hover { color: var(--accent-hi); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: 1rem; top: -3rem;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 60;
}
.skip:focus { top: 1rem; }

/* --------------------------------------------------------------- mast -- */

.mast {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.1rem clamp(1rem, 3vw, 2rem);
  color: var(--ink);
  background: rgba(10, 10, 12, 0.82);
  border-bottom: 1px solid var(--hair);
}
@supports (backdrop-filter: blur(10px)) {
  .mast {
    background: rgba(10, 10, 12, 0.6);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
  }
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 550 1.02rem/1 var(--sans);
  color: var(--ink); text-decoration: none;
  letter-spacing: -0.005em;
}
.mast-nav {
  display: none; gap: 1.75rem;
  margin-left: auto;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mast-nav a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
.mast-nav a:hover { color: var(--ink); }
.mast-cta {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--ink);
  font: 500 0.85rem/1 var(--sans);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mast-cta:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--accent);
  color: var(--ink);
}
.mast-cta-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: cta-pulse 3s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.35; transform: scale(0.7); }
}
@media (min-width: 62rem) {
  .mast-nav { display: inline-flex; margin-left: auto; }
  .mast-cta { margin-left: 0; }
}

/* --------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr;
  align-items: end;
  background: var(--bg);
}

/* the actual content, always sharp, always on. */
.hero-copy {
  position: relative;
  z-index: 1;
  padding: clamp(6rem, 14vh, 8rem) clamp(1.25rem, 4vw, 3rem) clamp(4rem, 10vh, 6rem);
  max-width: var(--page);
  margin-inline: auto;
  width: 100%;
}
.hero-copy h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.98;
  max-width: 22ch;
  color: var(--ink);
}
.hero-lede {
  margin-top: 1.75rem;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.15rem;
}
.hero-lede em {
  color: var(--accent-hi);
  font-style: italic;
}
.hero-actions {
  display: flex; flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
}

/* Shared wipe progress: both the fog's clip-path and the squeegee's
   right offset are driven by the same custom property, so they can't
   drift. Two separate animations diverged by up to a dozen pixels near
   the ends, which was the halo of fog visible right of the squeegee. */
@property --wipe {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

.hero {
  --wipe: 0%;
  animation: hero-wipe 1.1s cubic-bezier(0.72, 0, 0.28, 1) 0.15s forwards;
}
@keyframes hero-wipe {
  from { --wipe: 0%; }
  to   { --wipe: 100%; }
}

/* the frost overlay — obscures the copy at rest, gets wiped away.
   The wash carries the "hidden" state on its own; the backdrop blur
   is small on purpose, because backdrop-filter's blur radius bleeds
   past clip-path edges and a wide radius would leave a halo. */
.fog {
  position: absolute; inset: 0;
  z-index: 2;
  background: rgba(15, 15, 18, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  clip-path: inset(0 var(--wipe) 0 0);
}

/* the squeegee, sliding right-to-left at the wipe boundary. Its right
   offset equals the fog's clip, so its right edge is exactly on the
   fog's visible right edge at every frame. Opaque bar with sharp edges
   — soft edges would let the fog's blur bleed through the tool. */
.squeegee {
  position: absolute;
  top: 0; bottom: 0;
  right: var(--wipe);
  width: 6px;
  z-index: 3;
  pointer-events: none;
  background: #050505;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -12px 0 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  animation: squeegee-appear 0.1s linear 0.13s forwards;
}
@keyframes squeegee-appear {
  to { opacity: 1; }
}

/* a shine sweep across the just-cleaned surface, once, right after the
   fog is gone. Same diagonal as the card hover shine so the two read
   as the same visual vocabulary. */
.hero-glare {
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(125, 202, 232, 0.12) 48%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(125, 202, 232, 0.12) 52%,
    transparent 60%);
  transform: translateX(-100%) skewX(-15deg);
  animation: hero-glare-sweep 1s cubic-bezier(0.2,0.7,0.2,1) 1.3s forwards;
}
@keyframes hero-glare-sweep {
  from { transform: translateX(-100%) skewX(-15deg); }
  to   { transform: translateX(360%) skewX(-15deg); }
}

/* ------------------------------------------------------------ links -- */

.link {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--ink);
  font: 500 0.98rem/1 var(--sans);
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--hair-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link.primary {
  color: var(--accent-hi);
  border-bottom-color: var(--accent);
}
.link:hover {
  color: var(--accent-hi);
  border-bottom-color: var(--accent-hi);
}
.link-arrow { display: inline-block; transition: transform 0.25s ease; }
.link:hover .link-arrow { transform: translateX(4px); }

/* --------------------------------------------------------------- section */

.section {
  padding-block: clamp(5rem, 10vw, 8rem);
  padding-inline: var(--gutter);
  max-width: var(--page);
  margin-inline: auto;
  border-top: 1px solid var(--hair);
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section-head h2 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1;
  max-width: 20ch;
}
.section-lede {
  margin-top: 1.25rem;
  max-width: var(--measure);
  color: var(--muted);
  font-size: 1.1rem;
}

/* ---------------------------------------------------------- services -- */

.services {
  padding-block: clamp(5rem, 10vw, 8rem);
  padding-inline: var(--gutter);
  max-width: var(--page);
  margin-inline: auto;
  border-top: 1px solid var(--hair);
}
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 62rem) {
  .cards { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
.cards.cards-3 { grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 62rem) {
  .cards.cards-3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.03), transparent 40%),
    var(--bg-2);
  border: 1px solid var(--hair);
  border-radius: 14px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.9rem;
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.card > .card-shine { grid-row: 1 / -1; grid-column: 1; }
.card:hover {
  transform: translateY(-4px);
  border-color: var(--hair-strong);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6),
              0 0 0 1px var(--hair-strong);
}
.card-shine {
  position: absolute;
  top: 0; left: -50%;
  width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(125,202,232,0.10) 50%, transparent 60%);
  transform: translateX(-100%) skewX(-15deg);
  pointer-events: none;
  transition: transform 0.9s cubic-bezier(0.2,0.7,0.2,1);
}
.card:hover .card-shine { transform: translateX(350%) skewX(-15deg); }
/* fixed slots: 01, heading, body. Every card uses the same 3-row grid
   so the number, heading and body sit at the same y across cards. */
.card-num {
  grid-row: 1;
  font: 550 1.15rem/1 var(--sans);
  color: var(--dim);
  letter-spacing: -0.01em;
}
.card-h {
  grid-row: 2;
  font-size: clamp(1.65rem, 2.8vw, 2.1rem);
  color: var(--ink);
}
.card-body {
  grid-row: 3;
  color: var(--muted);
  align-self: start;
}

/* ---------------------------------------------------- closing card -- */

/* The about + kontakt merge: one wide card with the pitch on the left
   and the facts on the right, closing the page as a single unified
   surface instead of two thin sections. */
.closing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 62rem) {
  .closing {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
}
.closing-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.closing-h {
  font-size: clamp(1.9rem, 3.8vw, 2.85rem);
  line-height: 1;
  max-width: 18ch;
}
.closing-lede {
  color: var(--ink-soft);
  font-size: 1.1rem;
  max-width: var(--measure);
}
.closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 0.5rem;
}
.closing-facts {
  margin: 0; padding: 0;
  display: grid; gap: 1rem;
  align-self: start;
}
@media (min-width: 62rem) {
  .closing-facts {
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-left: 1px solid var(--hair);
  }
}
.closing-facts > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.4rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--hair);
}
.closing-facts > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.closing-facts dt {
  color: var(--dim);
  font: 400 0.72rem/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}
.closing-facts dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}
.closing-facts a {
  color: var(--accent-hi);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.closing-facts a:hover {
  color: var(--accent-hi);
  border-bottom-color: var(--accent-hi);
}

/* --------------------------------------------------------------- foot -- */

.foot {
  border-top: 1px solid var(--hair);
  background: var(--bg-2);
  padding-bottom: 3rem;
}
.foot-in {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-block: 2.5rem;
  padding-inline: var(--gutter);
  max-width: var(--page);
  margin-inline: auto;
}
@media (min-width: 55rem) {
  .foot-in { grid-template-columns: minmax(0, 1fr) auto; }
}
.foot-brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 550 1rem/1 var(--sans);
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.foot-copy {
  color: var(--muted);
  font: 400 0.9rem/1.5 var(--serif);
  max-width: 28rem;
}
.foot-meta {
  display: grid; gap: 0.4rem;
  color: var(--muted);
  font: 400 0.72rem/1.4 var(--mono);
  letter-spacing: 0.05em;
}
.foot-meta a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--hair);
}
.foot-meta a:hover { color: var(--ink); border-bottom-color: var(--hair-strong); }

/* --------------------------------------------------- scroll reveals */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .step,
    .studio,
    .section-head,
    .card {
      animation: rise 700ms ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------- reduced motion overrides */

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; --wipe: 100%; }
  .fog { opacity: 0; }
  .squeegee { display: none; }
  .hero-glare { display: none; }
  .mast-cta-dot { animation: none; }
}

/* ---------------------------------------------------------------- 404 -- */

.lost {
  display: grid; align-content: center;
  min-height: 75vh;
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--gutter);
  gap: 1rem;
  color: var(--ink);
}
.lost h1 {
  font: 550 clamp(2.5rem, 6vw, 4rem) var(--sans);
  line-height: 1;
  letter-spacing: -0.02em;
}
.lost .hero-lede {
  color: var(--ink-soft);
}