/* =========================================================
   TR BAU, Version 4: ruhige Einblendungen und Hover der Projektbilder
   Einblendungen steuert animation-v4.js über [data-reveal] und .is-in.
   Bewusst sparsam: Text gleitet hoch, Fotos decken sich von unten auf,
   Projektkarten kommen von rechts. Alles nur ohne „Bewegung reduzieren“.
   ========================================================= */

:root { --rv-ease: cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: no-preference) {
  /* Ausgangslage, solange ein Bereich noch nicht sichtbar war */
  .js [data-reveal="up"]:not([data-stagger]):not(.is-in),
  .js [data-reveal][data-stagger]:not(.is-in) > * { opacity: 0; }
  /* Vorhang als Abdeckung in der Flächenfarbe, nicht per clip-path: ein ganz
     weggeschnittenes Element meldet der Browser als unsichtbar, dann löst es
     nie aus und das Foto lädt nicht */
  .js [data-reveal="curtain"] { position: relative; }
  .js [data-reveal="curtain"]::after {
    content: ''; position: absolute; inset: -1px; z-index: 1; pointer-events: none;
    background: var(--rv-cover, var(--stein));
    transform-origin: 50% 0;
  }
  .js [data-reveal="curtain"].is-in::after { transform: scaleY(0); }
  /* sonst blitzt an den runden Ecken ein Haarstrich des Fotos durch */
  .js [data-reveal="curtain"]:not(.is-in) img { opacity: 0; }

  [data-reveal="up"].is-in:not([data-stagger]),
  [data-reveal="up"][data-stagger].is-in > * {
    animation: rv-up .9s var(--rv-ease) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  [data-reveal="right"][data-stagger].is-in > * {
    animation: rv-right 1.1s var(--rv-ease) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  /* Foto deckt sich von unten auf wie ein Bau, der wächst, und setzt sich dabei */
  .js [data-reveal="curtain"].is-in::after { animation: rv-curtain 1.3s var(--rv-ease) backwards; }
  [data-reveal="curtain"].is-in img { animation: rv-settle 1.8s var(--rv-ease) backwards; }

  /* Fotos laufen beim Scrollen ganz leicht mit (Chrome, Edge; andere ohne Effekt) */
  @supports (animation-timeline: view()) {
    /* overflow: hidden machte die Figur zum eigenen Scrollbereich, view() sähe dann nur sie */
    [data-parallax] { overflow: clip; }
    [data-parallax] img {
      scale: 1.1;
      animation: rv-par linear both;
      animation-timeline: view();
    }
    [data-reveal="curtain"].is-in[data-parallax] img {
      animation: rv-settle 1.8s var(--rv-ease) backwards, rv-par linear both;
      animation-timeline: auto, view();
    }
  }
}

@keyframes rv-up      { from { opacity: 0; transform: translateY(32px); } }
@keyframes rv-right   { from { opacity: 0; transform: translateX(80px); } }
@keyframes rv-curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.values__photo  { --rv-cover: var(--stein); }
.careers__photo { --rv-cover: var(--blau); }
@keyframes rv-settle  { from { scale: 1.22; } }
@keyframes rv-par     { from { translate: 0 -4.5%; } to { translate: 0 4.5%; } }

/* Ausrollen und Parallaxe dürfen nicht seitlich überlaufen */
.values, .projects, .careers { overflow-x: clip; }

/* =========================================================
   Projektbilder: beim Darüberfahren zoomt das Foto leicht,
   Suchermarken wie bei den Leistungen fahren von außen in die Ecken,
   vor der Kategorie wächst ein kurzer blauer Strich
   ========================================================= */
.pcard__media {
  position: relative; overflow: hidden;
  border-radius: 22px;
  background: var(--stein);
}
.pcard .pcard__media img { border-radius: 0; }
.pcard__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(13, 27, 38, .42), rgba(13, 27, 38, 0) 55%);
  opacity: 0;
  transition: opacity .5s ease-out;
}
.pcard__corners {
  position: absolute; inset: 16px; z-index: 1; pointer-events: none;
  --c: #fff; --l: 22px; --w: 2px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) left top / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) right top / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) var(--w),
    linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--l);
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.14);
  transition: opacity .35s ease-out, transform .6s var(--rv-ease);
}
.pcard figcaption span { display: flex; align-items: center; }
.pcard figcaption span::before {
  content: ''; display: block; flex-shrink: 0;
  width: 0; height: 2px; margin-right: 0;
  background: var(--blau);
  transition: width .45s var(--rv-ease), margin-right .45s var(--rv-ease);
}

@media (hover: hover) and (pointer: fine) {
  .pcard__media img { transition: transform 1.2s var(--rv-ease); }
  .pcard:hover .pcard__media img { transform: scale(1.06); }
  .pcard:hover .pcard__media::after { opacity: 1; }
  .pcard:hover .pcard__corners { opacity: 1; transform: none; }
  .pcard:hover figcaption span::before { width: 20px; margin-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pcard__media img, .pcard__corners, .pcard figcaption span::before { transition: none; }
}