/* ── Shared site effects (requires --fx-accent, --fx-accent-rgb, --fx-display on :root) ── */

/* Nav scroll state */
nav.fx-scrolled {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* Clip-path headline reveal */
.line-wrap { display: block; overflow: hidden; }
.fx-clip-headline .line,
.kontakt-headline .line,
.kontakt-title .line {
  display: block;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-clip-headline.clip-visible .line-wrap:nth-child(1) .line,
.kontakt-headline.clip-visible .line-wrap:nth-child(1) .line,
.kontakt-title.clip-visible .line-wrap:nth-child(1) .line {
  clip-path: inset(0 0 0% 0);
  transition-delay: 0ms;
}
.fx-clip-headline.clip-visible .line-wrap:nth-child(2) .line,
.kontakt-headline.clip-visible .line-wrap:nth-child(2) .line,
.kontakt-title.clip-visible .line-wrap:nth-child(2) .line {
  clip-path: inset(0 0 0% 0);
  transition-delay: 120ms;
}
.fx-clip-headline.clip-visible .line-wrap:nth-child(3) .line,
.kontakt-headline.clip-visible .line-wrap:nth-child(3) .line,
.kontakt-title.clip-visible .line-wrap:nth-child(3) .line {
  clip-path: inset(0 0 0% 0);
  transition-delay: 240ms;
}
.fx-clip-headline.clip-visible .line-wrap:nth-child(4) .line,
.kontakt-headline.clip-visible .line-wrap:nth-child(4) .line,
.kontakt-title.clip-visible .line-wrap:nth-child(4) .line {
  clip-path: inset(0 0 0% 0);
  transition-delay: 360ms;
}

/* Large image blocks stay visible — text sections keep scroll reveal */
.ueber-img,
.kontakt-img,
.warum-visual,
.hero-visual,
.hero-img {
  opacity: 1 !important;
  transform: none !important;
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .9s ease, transform .9s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .9s ease, transform .9s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* Hero particles */
#heroParticles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}

/* 3D hero cube */
.hero-3d-wrap {
  position: absolute;
  z-index: 3;
  width: 280px;
  height: 280px;
  opacity: 0.15;
  pointer-events: none;
}
.hero-3d-wrap--center {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.hero-3d-wrap--corner {
  right: 6vw; top: 50%;
  transform: translateY(-50%);
}
.hero-3d-scene {
  width: 100%; height: 100%;
  perspective: 900px;
  transform-style: preserve-3d;
}
.hero-3d-float {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: hero3dFloat 3s ease-in-out infinite alternate;
}
@keyframes hero3dFloat {
  from { transform: translateY(-10px); }
  to { transform: translateY(10px); }
}
.hero-3d-spin {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: hero3dRotate 8s linear infinite;
}
@keyframes hero3dRotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
.hero-3d-cube {
  position: relative;
  width: 280px; height: 280px;
  transform-style: preserve-3d;
}
.hero-3d-face {
  position: absolute; inset: 0;
  width: 280px; height: 280px;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(var(--fx-bg-rgb, 8, 8, 8), 0.55);
}
.hero-3d-face--front {
  transform: translateZ(18px);
  font-family: var(--fx-display);
  font-size: 7.5rem;
  letter-spacing: 0.06em;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.hero-3d-face--back { transform: rotateY(180deg) translateZ(18px); }
.hero-3d-face--right { transform: rotateY(90deg) translateZ(18px); }
.hero-3d-face--left { transform: rotateY(-90deg) translateZ(18px); }
.hero-3d-scissors {
  width: 120px; height: 120px;
  stroke: rgba(255, 255, 255, 0.25); fill: none;
  stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 3D tilt targets — neutral edges, no gold/beige bleed */
.fx-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.leistungen-grid.fx-tilt-grid,
.fx-tilt-parent {
  perspective: 800px;
  overflow: hidden;
}
.leistungen-grid.fx-tilt-grid {
  background: rgb(var(--fx-bg-rgb, 8, 8, 8)) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.fx-tilt .leistung-card-img-overlay {
  background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.55) 100%) !important;
}

/* Magnetic buttons */
.fx-magnetic {
  position: relative;
  overflow: hidden;
  transition: opacity .3s, transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.fx-magnetic::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%) skewX(-15deg);
  pointer-events: none; z-index: 1;
}
.fx-magnetic:hover::before {
  transform: translateX(100%) skewX(-15deg);
  transition: transform 0.6s ease;
}

@media (max-width: 900px) {
  .hero-3d-wrap { display: none; }
}