/**
 * JK Ventures — dezente Motion-Layer (Bugfix: Reveal terminiert zuverlässig)
 * Progressive Enhancement: ohne JS bleibt alles sichtbar.
 *
 * Wichtig: Reveal-Einstieg NUR per Opacity (kein translateY).
 * Transform auf Content + position:fixed Header mit backdrop-filter
 * erzeugt in Chromium einen „Geister-Header“, der über Karten-Texten hängt.
 */

/* --- Fixed Header: eigene Compositing-Layer, kein Geister-Duplikat --- */
header.fixed.top-0 {
  transform: translate3d(0, 0, 0);
  isolation: isolate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1000;
  /* Solider Hintergrund OHNE backdrop-filter:
     backdrop-filter + transformierte Reveal-Karten = Geister-Nav in Chromium */
  background-color: rgba(10, 22, 40, 0.98) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* --- Scroll reveal --- */
html.js-motion .reveal:not(.reveal-visible) {
  opacity: 0 !important;
  transform: none !important;
}

html.js-motion .reveal {
  transition: opacity 0.7s ease-out;
}

html.js-motion .reveal.reveal-visible {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
  animation: jk-reveal-in 0.7s ease-out both;
}

@keyframes jk-reveal-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Nach Abschluss: Hover-Transform erlauben (ohne Opacity zu blockieren) */
html.js-motion .reveal.reveal-visible.motion-card,
html.js-motion .reveal.reveal-visible.card-service {
  animation: none;
  opacity: 1 !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

html.js-motion .reveal[data-reveal-delay="1"]:not(.reveal-visible) { transition-delay: 0.1s; }
html.js-motion .reveal[data-reveal-delay="2"]:not(.reveal-visible) { transition-delay: 0.2s; }
html.js-motion .reveal[data-reveal-delay="3"]:not(.reveal-visible) { transition-delay: 0.3s; }
html.js-motion .reveal[data-reveal-delay="4"]:not(.reveal-visible) { transition-delay: 0.4s; }
html.js-motion .reveal[data-reveal-delay="5"]:not(.reveal-visible) { transition-delay: 0.5s; }
html.js-motion .reveal[data-reveal-delay="6"]:not(.reveal-visible) { transition-delay: 0.6s; }
html.js-motion .reveal[data-reveal-delay="7"]:not(.reveal-visible) { transition-delay: 0.7s; }
html.js-motion .reveal[data-reveal-delay="8"]:not(.reveal-visible) { transition-delay: 0.8s; }

html.js-motion .reveal.reveal-visible {
  transition-delay: 0s !important;
}

/* --- Stat counter --- */
.stat-block {
  text-align: center;
  margin-bottom: 1.25rem;
}

.stat-number {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: #0a1628;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a84c;
  font-weight: 600;
}

/* --- Card hover (ohne opacity/transition-Shorthand !important) --- */
.motion-card:not(.reveal),
.card-service:not(.reveal),
main .grid > div.bg-white:not(.reveal),
main .grid > div.bg-gray-50:not(.reveal),
main a.group.block.bg-white:not(.reveal) {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.motion-card:not(.reveal):hover,
.card-service:not(.reveal):hover,
main .grid > div.bg-white:not(.reveal):hover,
main .grid > div.bg-gray-50:not(.reveal):hover,
main a.group.block.bg-white:not(.reveal):hover,
html.js-motion .reveal.reveal-visible.motion-card:hover,
html.js-motion .reveal.reveal-visible.card-service:hover,
html.js-motion .reveal.reveal-visible.bg-white:hover,
html.js-motion .reveal.reveal-visible.bg-gray-50:hover,
html.js-motion a.group.reveal.reveal-visible:hover {
  /* Nur Schatten/Border — kein translateY (vermeidet Fixed-Header-Geister) */
  transform: none !important;
  box-shadow: 0 16px 40px rgba(7, 18, 38, 0.12);
}

/* --- Buttons --- */
.btn-primary,
.btn-navy,
a.btn-primary,
a.btn-navy,
button.btn-primary {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

.btn-primary:hover,
a.btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.35), 0 8px 28px rgba(201, 168, 76, 0.35);
  transform: translateY(-1px);
}

.btn-navy:hover,
a.btn-navy:hover {
  box-shadow: 0 8px 24px rgba(7, 18, 38, 0.28);
  transform: translateY(-1px);
}

section.bg-gold-500 a.btn-navy:hover {
  box-shadow: 0 10px 28px rgba(7, 18, 38, 0.32);
}

.btn-outline:hover,
a.btn-outline:hover {
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.45), 0 6px 20px rgba(201, 168, 76, 0.18);
}

/* --- Nav underline --- */
header nav a.relative.group > span.absolute {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease-out;
  background-color: #c9a84c;
}

header nav a.relative.group:hover > span.absolute,
header nav a.relative.group[aria-current="page"] > span.absolute,
header nav a.relative.group.text-gold-400 > span.absolute {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  html.js-motion .reveal,
  html.js-motion .reveal:not(.reveal-visible),
  html.js-motion .reveal.reveal-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .motion-card:hover,
  .card-service:hover,
  .btn-primary:hover,
  a.btn-primary:hover,
  .btn-navy:hover,
  a.btn-navy:hover {
    transform: none !important;
  }
}