/* ==========================================================================
   IMMOBILIEN HERO — exact-layer composite
   Every visual element below is a native 2400x1800 PNG exported straight
   from AURA.psd, one per PSD layer/group, stacked back to front:

     glow → home-back → photo (HOME shine already clipped inside the
     photo, baked in) → aura → realestate-trees (REAL ESTATE sandwiched
     between the tree layers) → tagline → lines-your → lines-divider-icon

   Because every PNG shares the same 2400x1800 canvas, stacking them with
   inset:0 inside one aspect-ratio(2400/1800) box lines them up perfectly.

   Live mouse effect: a soft green ambient glow behind everything, slowly
   drifting on its own plus a light cursor-driven depth parallax across
   the whole composition (see js/hero-immobilien-chrome.js).
   ========================================================================== */

.fc-hero {
  position: relative;
  background: #050606;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4vw;
  min-height: 100svh;
}

.fc-stage {
  position: relative;
  width: min(1600px, 100%);
  aspect-ratio: 2400 / 1800;
}

.fc-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ---------- ambient glow: soft green, slow drift + cursor nudge ---------- */
.fc-glow {
  background:
    radial-gradient(ellipse 48% 42% at calc(50% + var(--glow-x, 0px)) calc(44% + var(--glow-y, 0px)),
      rgba(90,235,110,.26) 0%, rgba(90,235,110,.1) 45%, transparent 72%);
  animation: fcGlowDrift 16s ease-in-out infinite, fcFade 1s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes fcGlowDrift {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.18); }
  100% { filter: brightness(1); }
}

/* very light whole-scene depth parallax, cursor-driven */
.fc-home-back { transform: translate(calc(var(--px,0px) * 0.6), calc(var(--py,0px) * 0.6)); }
.fc-photo { transform: translate(calc(var(--px,0px) * 0.3), calc(var(--py,0px) * 0.3)); }
.fc-aura,.fc-realestate-trees,.fc-tagline-img,.fc-lines-your,.fc-lines-divider-icon {
  transform: translate(calc(var(--px,0px) * 0.12), calc(var(--py,0px) * 0.12));
}

/* ---------- entry motion, respecting PSD stacking ---------- */
.fc-layer { opacity: 0; animation: fcFade 1s cubic-bezier(.16,1,.3,1) forwards; }
.fc-glow { animation-delay: 0s; }
.fc-home-back { animation-delay: .2s; }
.fc-photo { animation-delay: .4s; }
.fc-aura { animation-delay: .55s; }
.fc-realestate-trees { animation-delay: .8s; }
.fc-tagline-img { animation-delay: 1.05s; }
.fc-lines-your { animation-delay: .15s; }
.fc-lines-divider-icon { animation-delay: 1.15s; }
@keyframes fcFade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .fc-hero .fc-layer { animation: none !important; opacity: 1 !important; transform: none !important; }
  .fc-glow { filter: none !important; }
}