/* Visuelle Zusatzeffekte der MotionEngine (public/js/core/motion/). Getrennt von style.css,
   damit die Kern-Layoutregeln unangetastet bleiben. Deaktiviert bei prefers-reduced-motion,
   siehe MotionEngine.mount(). */

.reveal {
  opacity: 0;
  transform: translateY(3rem) scale(.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.34, 1.56, .64, 1), transform .8s cubic-bezier(.34, 1.56, .64, 1);
}

[data-theme] .hero__image,
[data-theme] .room-card__image,
[data-theme] .kitchen-panel__image,
[data-theme] .team-card__image,
[data-theme] .location-grid__image {
  transition: box-shadow .2s ease;
  will-change: transform;
}
.hero__image:hover,
.room-card__image:hover,
.kitchen-panel__image:hover,
.team-card__image:hover,
.location-grid__image:hover {
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
}

.motion-particle-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.motion-particle {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.4rem;
  color: var(--color-accent);
  opacity: .3;
  will-change: transform;
}

.hero { position: relative; overflow: hidden; perspective: 1400px; }
.hero__inner { position: relative; z-index: 1; }
.motion-depth-field {
  position: absolute;
  inset: -30% -15%;
  z-index: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.motion-depth-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  background: radial-gradient(circle at 30% 30%, var(--color-accent), transparent 62%);
}
.motion-depth-layer:nth-child(1) { inset: 10% 55% 45% -5%; opacity: .25; }
.motion-depth-layer:nth-child(2) { inset: 40% -10% -20% 45%; opacity: .3; }
.motion-depth-layer:nth-child(3) { inset: -15% 25% 60% 10%; opacity: .2; }

.motion-norbert-flyer {
  position: fixed;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--color-accent);
  box-shadow: 0 20px 45px -15px rgba(0, 0, 0, .55);
  pointer-events: none;
  z-index: 20;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .motion-particle-field,
  .motion-depth-field,
  .motion-norbert-flyer { display: none; }
}