/* Energiehaus — Einstieg ("das Haus erwacht") und ruhige Dauerbewegung. Nur Transform/Opacity, keine SVG-Filter (mobile Leistung). */
.hero{--ease:cubic-bezier(.16,1,.3,1);--t0:0ms}

/* Bühne je Tageszeit */
.hero.is-day{background:
  radial-gradient(90% 55% at 82% 4%,rgba(246,210,122,.30),transparent 62%),
  radial-gradient(80% 60% at 10% 100%,rgba(97,161,48,.22),transparent 65%),
  linear-gradient(180deg,#1D2C24 0%,#101812 72%)}
.hero.is-night{background:
  radial-gradient(70% 45% at 88% 6%,rgba(217,221,208,.10),transparent 60%),
  radial-gradient(80% 60% at 10% 100%,rgba(97,161,48,.16),transparent 65%),
  linear-gradient(180deg,#121A1F 0%,#0C120E 72%)}

/* ---------- Einstieg ---------- */
svg.house .hz,svg.house .pvp,svg.house .pin,svg.house .rays{transform-box:fill-box;transform-origin:center}
svg.house .hz-main,svg.house .hz-annex,svg.house .hz-dev,svg.house .hz-trees,svg.house .hz-shrub{transform-origin:center bottom}
@keyframes hzPlate{from{opacity:0;transform:scale(.72) translateY(24px)}}
@keyframes hzRise{from{opacity:0;transform:translateY(26px) scaleY(.9)}}
@keyframes hzDrop{from{opacity:0;transform:translateY(-34px)}}
@keyframes hzPop{from{opacity:0;transform:scale(.6)}}
@keyframes hzFade{from{opacity:0}}
@keyframes hzPanel{from{opacity:0;transform:scale(.15) rotate(-8deg)}}
@keyframes hzFlash{0%{opacity:0}35%{opacity:.9}100%{opacity:0}}
@keyframes hzDraw{from{stroke-dashoffset:1}}
@keyframes hzPill{from{opacity:0;transform:translateY(8px) scale(.86)}}
@keyframes hzTile{from{opacity:0;transform:translateY(12px)}}

.hero.intro #aura{animation:hzFade 1.4s var(--ease) calc(var(--t0) + 0ms) backwards,breathe 5s ease-in-out calc(var(--t0) + 1400ms) infinite}
.hero.intro .hz-ground{animation:hzPlate 1s var(--ease) calc(var(--t0) + 0ms) backwards}
.hero.intro .hz-sky{animation:hzFade 1.2s ease-out calc(var(--t0) + 200ms) backwards}
.hero.intro .hz-trees{animation:hzRise .9s var(--ease) calc(var(--t0) + 320ms) backwards}
.hero.intro .hz-main{animation:hzRise 1s var(--ease) calc(var(--t0) + 420ms) backwards}
.hero.intro .hz-annex{animation:hzRise .9s var(--ease) calc(var(--t0) + 620ms) backwards}
.hero.intro .hz-roof{animation:hzDrop .8s var(--ease) calc(var(--t0) + 760ms) backwards}
.hero.intro .pvp{animation:hzPanel .7s var(--ease) calc(var(--t0) + 1000ms + var(--i) * 75ms) backwards}
.hero.intro .pvf{animation:hzFlash .9s ease-out calc(var(--t0) + 1080ms + var(--i) * 75ms) backwards}
.hero.intro .hz-dev{animation:hzPop .8s var(--ease) calc(var(--t0) + 1150ms) backwards}
.hero.intro .hz-shrub{animation:hzRise .8s var(--ease) calc(var(--t0) + 900ms) backwards}
.hero.intro .wg{animation:hzFade .5s ease-out calc(var(--t0) + 1500ms + var(--i) * 140ms) backwards}
.hero.intro .fbase{stroke-dasharray:1;animation:hzDraw 1s var(--ease) calc(var(--t0) + 1500ms) backwards}
.hero.intro #dots{animation:hzFade .8s ease-out calc(var(--t0) + 2100ms) backwards}
.hero.intro .pin{animation:hzPill .6s var(--ease) calc(var(--t0) + 1750ms + var(--i) * 90ms) backwards}
.hero.intro .ldr{animation:hzFade .6s ease-out calc(var(--t0) + 2200ms) backwards}
.hero.intro .hd{animation:hzFade .6s ease-out calc(var(--t0) + 300ms) backwards}
.hero.intro .tiles>div{animation:hzTile .7s var(--ease) calc(var(--t0) + 1900ms) backwards}
.hero.intro .tiles>div:nth-child(2){animation-delay:calc(var(--t0) + 1980ms)}
.hero.intro .tiles>div:nth-child(3){animation-delay:calc(var(--t0) + 2060ms)}
.hero.intro .tiles>div:nth-child(4){animation-delay:calc(var(--t0) + 2140ms)}
.hero.intro .hsub{animation:hzFade .8s ease-out calc(var(--t0) + 2400ms) backwards}

/* ---------- Dauerbewegung ---------- */
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{from{transform:translateX(-70px)}to{transform:translateX(440px)}}
@keyframes sheen{0%{transform:translateX(-120px)}38%,100%{transform:translateX(300px)}}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.35}}
svg.house .star{animation:twinkle 3.4s ease-in-out var(--d) infinite}
svg.house .rays{animation:spin 48s linear infinite}
svg.house .cloud{animation:drift 70s linear var(--d) infinite}
svg.house .sheen{animation:sheen 7s cubic-bezier(.45,0,.2,1) 3s infinite}
svg.house #aura{animation:breathe 5s ease-in-out infinite}
svg.house.bat-in #socBar{animation:ledPulse 1.8s ease-in-out infinite}
svg.house.wb-on #wbLed,svg.house.wb-on #wbCable{animation:ledPulse 1.2s ease-in-out infinite}
svg.house #invLed{animation:ledPulse 3s ease-in-out infinite}
svg.house #auraG stop{transition:stop-color 1.2s ease}

/* ---------- Neigung mit der Maus (Werte kommen aus attachTilt) ---------- */
.hero svg.house{transform:perspective(1100px) rotateX(calc(var(--ty,0) * -7deg)) rotateY(calc(var(--tx,0) * 9deg));transition:transform .6s var(--ease)}
.hero #labels{transform:translate(calc(var(--tx,0) * 7px),calc(var(--ty,0) * 5px));transition:transform .6s var(--ease)}
.hero #sky{transform:translate(calc(var(--tx,0) * -9px),calc(var(--ty,0) * -6px));transition:transform .6s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .hero.intro *,svg.house *{animation:none!important}
  .hero svg.house,.hero #labels,.hero #sky{transform:none;transition:none}
}