/* ==========================================================================
   LHG · Home (Willkommen) — cinematic entrance + scroll interactions
   Loaded ONLY on index.html. Layers on top of styles.css.
   States are gated on html.js so the page is fully visible without JS.
   ========================================================================== */

/* lock scroll while the preloader is up */
html.lhg-loading, html.lhg-loading body { overflow: hidden; height: 100%; }

/* ==========================================================================
   HERO — cinematic load-in
   ========================================================================== */
#homeHero { overflow: hidden; }

/* image: curtain reveal + scale + de-blur */
.js #homeHero .hero-media { clip-path: inset(0 0 100% 0); will-change: clip-path, transform; }
.js #homeHero .hero-media img { transform: scale(1.35); filter: blur(16px); will-change: transform, filter; }
.is-loaded #homeHero .hero-media {
  clip-path: inset(0 0 0% 0);
  transition: clip-path 1.5s var(--ease);
}
.is-loaded #homeHero .hero-media img {
  transform: scale(1.06); filter: blur(0);
  transition: transform 2.4s var(--ease), filter 1.7s var(--ease);
}

/* headline: per-line mask reveal */
.js #homeHero .hero-headline span { overflow: hidden; padding-bottom: .04em; }
.js #homeHero .hero-headline span i { display: block; font-style: normal; transform: translateY(118%); }
.is-loaded #homeHero .hero-headline span i { transform: translateY(0); transition: transform 1.1s var(--ease); }
.is-loaded #homeHero .hero-headline .hl-heavy i { transition-delay: .42s; }
.is-loaded #homeHero .hero-headline .hl-light i { transition-delay: .58s; }

/* kicker / text / actions: staggered fade-rise */
.js #homeHero .hero-kicker,
.js #homeHero .hero-text,
.js #homeHero .hero-actions { opacity: 0; transform: translateY(22px); }
.is-loaded #homeHero .hero-kicker { opacity: 1; transform: none; transition: opacity .9s var(--ease) .3s, transform .9s var(--ease) .3s; }
.is-loaded #homeHero .hero-text   { opacity: 1; transform: none; transition: opacity 1s var(--ease) .85s, transform 1s var(--ease) .85s; }
.is-loaded #homeHero .hero-actions{ opacity: 1; transform: none; transition: opacity 1s var(--ease) 1s, transform 1s var(--ease) 1s; }

/* hero buttons get a magnetic inner so the icon + label can shift together */
#homeHero .btn-hero { will-change: transform; }

/* ==========================================================================
   SECTION-LEVEL SCROLL FX (classes added by home.js)
   ========================================================================== */

/* Leistungen media: slide from the screen edge + zoom-settle */
.js .lsec .lsec-media { opacity: 0; transform: translateX(-6%); transition: opacity 1s var(--ease), transform 1.25s var(--ease); will-change: transform, opacity; }
.js .lsec.reverse .lsec-media { transform: translateX(6%); }
.lsec.lsec-in .lsec-media { opacity: 1; transform: none; }
.js .lsec .lsec-frame img { transform: scale(1.2); transition: transform 1.7s var(--ease); }
.lsec.lsec-in .lsec-frame img { transform: scale(1); }
/* keep the hover zoom after reveal (re-declared so it wins on tie) */
.lsec-media:hover .lsec-frame img { transform: scale(1.05); }

/* Reveal headings & lead with a soft clip-up (added via .fx) */
.js .fx { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.fx.fx-in { opacity: 1; transform: none; }
.js .fx-d1 { transition-delay: .08s; }
.js .fx-d2 { transition-delay: .16s; }
.js .fx-d3 { transition-delay: .24s; }

/* Why-items: staggered slide + number reveal */
.js .why-item { opacity: 0; transform: translateX(-26px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.why-list.why-in .why-item { opacity: 1; transform: none; }
.why-list.why-in .why-item:nth-child(1){ transition-delay: .05s; }
.why-list.why-in .why-item:nth-child(2){ transition-delay: .15s; }
.why-list.why-in .why-item:nth-child(3){ transition-delay: .25s; }
.why-list.why-in .why-item:nth-child(4){ transition-delay: .35s; }
.why-num { display: inline-block; transition: color .4s var(--ease); }
.why-item:hover .why-num { color: var(--navy); }

/* Team cards: 3D tilt foundation */
.js .team-card { transition: transform .35s var(--ease), box-shadow .45s var(--ease); transform-style: preserve-3d; will-change: transform; }
.js .team-card .team-photo,
.js .team-card .team-info { transform: translateZ(0); }
.team-card.tilt-on { box-shadow: 0 30px 60px -34px rgba(21,24,42,.4); }

/* Blog feature + testimonials: gentle rise (added via .fx by JS too) */

/* ==========================================================================
   Reduced motion — show everything, kill transforms
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js #homeHero .hero-media,
  .js #homeHero .hero-media img,
  .js #homeHero .hero-headline span i,
  .js #homeHero .hero-kicker,
  .js #homeHero .hero-text,
  .js #homeHero .hero-actions,
  .js .lsec .lsec-media,
  .js .lsec .lsec-frame img,
  .js .fx,
  .js .why-item,
  .js .team-card {
    opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important;
    transition: none !important; animation: none !important;
  }
}