/* MaklerHaus — Motion-Layer
   Moderne Microinteractions: gradient-borders, magnetic buttons,
   staggered reveals, scroll-progress, premium hover.
   Respektiert prefers-reduced-motion. */

/* ============== Scroll-Progress-Bar ============== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}
.scroll-progress::before {
  content: '';
  display: block;
  height: 100%;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--c-green), var(--c-lightblue), var(--c-pastelgreen));
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(38,157,46,0.5);
  transition: width 80ms linear;
  animation: scrollProgressShimmer 4s linear infinite;
}
@keyframes scrollProgressShimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ============== Staggered Reveal mit Cascade ============== */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; opacity: 1; transform: translateY(0); }

/* ============== Gradient-Border (Cards beim Hover) ============== */
.card,
.pillar,
.family-pillar {
  position: relative;
  isolation: isolate;
}
.card::before,
.pillar::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    var(--c-green),
    var(--c-lightblue),
    var(--c-pastelgreen),
    var(--c-blue),
    var(--c-green)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  z-index: -1;
  animation: gradientSpin 6s linear infinite paused;
}
.card:hover::before,
.pillar:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes gradientSpin {
  to { transform: rotate(360deg); }
}

/* Cards bekommen sanftere Lift-Animation + leichtes Glow auf Light-BG-Cards */
.section--light .card {
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out), border-color 380ms var(--ease-out);
}
.section--light .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px -16px rgba(0, 0, 112, 0.18), 0 8px 16px -8px rgba(0,0,0,0.08);
}

/* ============== Magnetic Buttons ============== */
.btn {
  position: relative;
  overflow: hidden;
  transform: translate3d(var(--btn-mx, 0), var(--btn-my, 0), 0);
  transition: transform 240ms var(--ease-out), background 180ms, border-color 180ms, box-shadow 240ms;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.18) 45%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.18) 55%,
    transparent 100%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.btn:hover::after { transform: translateX(120%); }

.btn--green:hover {
  box-shadow:
    0 8px 32px -8px rgba(38,157,46,0.55),
    0 0 0 4px rgba(38,157,46,0.10);
}
.btn--solid:hover {
  box-shadow:
    0 8px 32px -8px rgba(0,0,0,0.25),
    0 0 0 4px rgba(255,255,255,0.10);
}

/* ============== Hero-Card glow on hover ============== */
.hero__card {
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out);
}
.hero__stage:hover .hero__card {
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 50, 0.65),
    0 16px 32px -10px rgba(38, 157, 46, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

/* ============== Pillar-Number animierter Akzent ============== */
.pillar__num,
.tool-num {
  background: linear-gradient(90deg, var(--c-green), var(--c-pastelgreen), var(--c-green));
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: numShimmer 6s ease-in-out infinite;
}
@keyframes numShimmer {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
}

/* ============== Differentiator-Quote: Underline-Reveal ============== */
.differentiator__quote {
  position: relative;
  display: inline-block;
}
.differentiator__quote::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-green), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1200ms var(--ease-out);
}
.differentiator.is-visible .differentiator__quote::after {
  transform: scaleX(1);
}

/* ============== Step-Numbers Pulse ============== */
.step__num {
  position: relative;
}
.step__num::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 112, 0.18);
  animation: stepRing 2.4s ease-out infinite;
}
@keyframes stepRing {
  0%   { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============== Smooth-scroll für Anchor-Links ============== */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

/* ============== Section-Reveal Cascade ============== */
.section-head {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.section-head.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============== Pain Points: hover-lift mit Border-Akzent ============== */
.problem {
  transition: transform 320ms var(--ease-out), border-color 320ms var(--ease-out), background 320ms var(--ease-out);
}
.problem:hover {
  transform: translateX(4px);
  border-color: rgba(38,157,46,0.4);
  background: rgba(38,157,46,0.04);
}
.problem__num {
  transition: color 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.problem:hover .problem__num {
  color: var(--c-green);
  transform: scale(1.05);
}

/* ============== Link-Underline-Animation in nav ============== */
.nav-primary a {
  position: relative;
}
.nav-primary a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--c-green);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 280ms var(--ease-out);
}
.nav-primary a:hover::after,
.nav-primary a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* aktiver Link bleibt als „page" markiert */
.nav-primary a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ============== Reduced-Motion ============== */
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger > * { transition-delay: 0ms !important; }
  .card::before, .pillar::before { animation: none !important; }
  .pillar__num, .tool-num { animation: none !important; -webkit-text-fill-color: var(--c-green); }
  .step__num::before { animation: none !important; opacity: 0; }
  .scroll-progress::before { animation: none !important; }
  html { scroll-behavior: auto; }
  .btn::after { display: none; }
}

/* ============================================================
   Hero-Logo Stein-für-Stein Aufbau
   ============================================================
   Story: 8 Pillar-Steine bauen die zwei Säulen bottom-up auf.
   Dann formieren 5 V-Steine das Dach von außen nach innen.
   "Zusammenbauen — alle unter ein Dach."
   
   GPU-Properties only (transform, opacity), spring-easing,
   prefers-reduced-motion respektiert.
   ============================================================ */
.hero__logo-build .stone {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(28px) scale(0.4);
  will-change: transform, opacity;
}

@keyframes stoneIn {
  0%   { opacity: 0; transform: translateY(28px) scale(0.4); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stoneInFromSide {
  0%   { opacity: 0; transform: translateX(var(--from-x, -20px)) translateY(var(--from-y, -10px)) scale(0.4); }
  60%  { opacity: 1; transform: translateX(2px) translateY(2px) scale(1.05); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* === Welle 1: Pillars bottom-up (alternierend L/R) === */
.hero__logo-build .stone--L1 { animation: stoneIn 600ms cubic-bezier(.34,1.56,.64,1)  500ms forwards; }
.hero__logo-build .stone--R1 { animation: stoneIn 600ms cubic-bezier(.34,1.56,.64,1)  600ms forwards; }
.hero__logo-build .stone--L2 { animation: stoneIn 600ms cubic-bezier(.34,1.56,.64,1)  720ms forwards; }
.hero__logo-build .stone--R2 { animation: stoneIn 600ms cubic-bezier(.34,1.56,.64,1)  820ms forwards; }
.hero__logo-build .stone--L3 { animation: stoneIn 600ms cubic-bezier(.34,1.56,.64,1)  940ms forwards; }
.hero__logo-build .stone--R3 { animation: stoneIn 600ms cubic-bezier(.34,1.56,.64,1) 1040ms forwards; }
.hero__logo-build .stone--L4 { animation: stoneIn 600ms cubic-bezier(.34,1.56,.64,1) 1160ms forwards; }
.hero__logo-build .stone--R4 { animation: stoneIn 600ms cubic-bezier(.34,1.56,.64,1) 1260ms forwards; }

/* === Welle 2: V-Dach von außen nach Mitte/unten === */
.hero__logo-build .stone--V1 { --from-x: -18px; --from-y: -14px;
                               animation: stoneInFromSide 700ms cubic-bezier(.34,1.56,.64,1) 1420ms forwards; }
.hero__logo-build .stone--V2 { --from-x:  18px; --from-y: -14px;
                               animation: stoneInFromSide 700ms cubic-bezier(.34,1.56,.64,1) 1520ms forwards; }
.hero__logo-build .stone--V3 { --from-x: -14px; --from-y:  -6px;
                               animation: stoneInFromSide 700ms cubic-bezier(.34,1.56,.64,1) 1640ms forwards; }
.hero__logo-build .stone--V4 { --from-x:  14px; --from-y:  -6px;
                               animation: stoneInFromSide 700ms cubic-bezier(.34,1.56,.64,1) 1740ms forwards; }
.hero__logo-build .stone--V5 { --from-x:   0px; --from-y:  18px;
                               animation: stoneInFromSide 800ms cubic-bezier(.34,1.56,.64,1) 1900ms forwards; }

/* === Reduced-Motion === */
@media (prefers-reduced-motion: reduce) {
  .hero__logo-build .stone {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .hero__logo-build {
    animation: none !important;
  }
}